礁山数安渔港指挥大屏：深色科技风四区布局，实时告警与SVG地图联动

By 15657170297, 12 May, 2026
推理
Let me analyze this request carefully. The user wants a comprehensive command center dashboard for "温岭礁山数安渔港" (Wenling Jiaoshan Digital Security Fishing Port). This is a large-scale monitoring dashboard with:

1. Left panel: Risk warnings (real-time alerts + statistics)
2. Center: Port 3D/2D map (scene points + vessel situation)
3. Right panel: Port overview (core data + operational summary)
4. Bottom: Task list
5. Top: Scene switching (5 major scenes)

This is a complex data visualization dashboard. Let me first get the design system recommendations, then fetch assets, and build this out.

Let me plan the aesthetic direction:
- Dark theme command center style - this is a monitoring/command dashboard
- Futuristic/tech feel with data visualization
- Professional, authoritative
- Chinese maritime/port monitoring context

Let me get design system and assets first.Let me think about the design direction for this command center dashboard. The design system returned minimalism but for a command center, I need to go with something more appropriate - a dark tech-focused command center aesthetic. Let me design this as a professional maritime monitoring command center with:

- Dark background with subtle grid/texture patterns
- Tech-blue and cyan accents for data
- Alert colors: red/orange/yellow/blue for risk levels
- Clean data visualization
- Professional Chinese typography
- Responsive grid layout

Let me now build the full HTML. This is going to be complex. I'll use:
- Tailwind CSS via CDN (script tag)
- Font Awesome for icons
- Google Fonts - I'll use a more distinctive Chinese-supporting font. Since this is Chinese, I need fonts that support Chinese. Let me use "Noto Sans SC" for body and maybe "ZCOOL QingKe HuangYou" or similar for headings. Actually for a command center, a technical/monospace feel might work. Let me use "Orbitron" for numbers and headings (has a futuristic feel) and "Noto Sans SC" for Chinese body text.

Wait, Orbitron doesn't support Chinese. Let me think... For Chinese command centers, common choices are:
- Body: Noto Sans SC, or system Chinese fonts
- Display numbers: Orbitron (Latin numbers only, but numbers are universal)
- Headers: A bolder Chinese font

Actually, let me use:
- "Rajdhani" or "Orbitron" for numbers and English
- "Noto Sans SC" for Chinese text
- Both from Google Fonts

For the design:
- Deep navy/ charcoal background (#0a0e17 or similar)
- Cyan/teal accents for data (#00d4ff, #0ef)
- Alert colors: Red (#ff4757), Orange (#ff6b35), Yellow (#ffc048), Blue (#3b82f6)
- Cards with subtle glass morphism effect
- Thin borders with glowing effects on alerts
- Grid background texture

Layout:
- Top bar: Title + time/weather + system status
- Below top: Scene switching buttons (5 scenes)
- Main area (3 columns): Left (risk warnings) | Center (map) | Right (port overview)
- Bottom: Task list table

Let me structure the full HTML now. This will be a large component.

Key considerations:
- The center map area needs a placeholder for the port map
- Real-time alert scrolling list
- Statistics with bar charts
- Status indicators
- Task table

I need to use a transparent texture for the background. Let me use one from transparenttextures.com.

For the map area, I'll create a stylized port map using SVG or CSS, since we don't have actual map data. I'll create a schematic representation.

Let me now write the complete HTML code. This will be extensive.

Let me think about the layout:

```
┌─────────────────────────────────────────────────────┐
│ 温岭礁山数安渔港指挥大屏 时间/天气 系统状态 │
├─────────────────────────────────────────────────────┤
│ [外省籍渔船] [三无船舶] [消防] [接驳] [防碰撞] │
├────────────┬───────────────────┬────────────────────┤
│ 实时告警 │ │ 港区总览 │
│ (滚动) │ 港口地图 │ - 核心数据 │
│ │ (中心区域) │ - 航道流量 │
│ 预警统计 │ │ - 设备状态 │
│ │ │ - 今日处置 │
│ 风险分布 │ │ │
├────────────┴───────────────────┴────────────────────┤
│ 待处置任务列表 │
└─────────────────────────────────────────────────────┘
```

Now let me code this up. I'll make the map area a stylized visualization with SVG elements representing the port, ships, channels, etc.

For the background, I'll use a subtle grid/dot pattern with transparenttextures.

Let me create a comprehensive, professional command center dashboard.

I need to use <script src="https://cdn.tailwindcss.com"> for Tailwind (must be script tag, not link).

Google Fonts: I'll use Orbitron for numbers/technical labels, and Noto Sans SC for Chinese text.

Let me build this now. The code will be quite long.

For the map center, I'll create an SVG-based port map with:
- Coastline
- 3 channels marked
- 4 entrances (口门)
- Ship icons at various positions
- Alert flashing points
- Legend

Let me also add some animation for the alert scrolling and blinking indicators.

For the bar charts in the statistics section, I'll use CSS-based bars.

This is going to be a very comprehensive dashboard. Let me write it all out.

I should use transparenttextures for background depth. Let me use something like "dark-dots" or "carbon-fiber" pattern.

Actually, for a command center, a subtle grid or dot pattern works well. Let me use:
https://www.transparenttextures.com/patterns/dark-matter.png or similar

Let me pick something subtle that won't interfere with readability.

Now let me code the entire thing. I'll focus on making it look like a real command center with:
1. Professional dark theme
2. Glowing accent borders
3. Clean data visualization
4. Responsive behavior (though for a command center, it's typically on large screens)
5. Subtle animations

One important note: the user says breakpoint is "none" (default). But I should still make it reasonably responsive.

Let me write the complete HTML now.
角色
assistant
content

```json{
"summary": "构建礁山数安渔港指挥大屏完整页面——深色科技风、四区布局（左侧风险预警/中间港口态势地图/右侧港区总览/下方任务列表）、顶部场景切换栏、实时告警滚动、统计柱状图、港口SVG地图含航道与船舶标记、设备状态面板、任务处置表格，配合Orbitron+Noto Sans SC字体、霓虹青蓝点缀、网格纹理背景。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>温岭礁山数安渔港指挥大屏</title>\n <script src=\"https://cdn.tailwindcss.com\">\n </script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;…\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-deep: #060b14;\n --bg-panel: #0a101f;\n --bg-card: #0e1629;\n --border-subtle: #1a2340;\n --border-glow: #1e3a5f;\n --accent-cyan: #00d4ff;\n --accent-blue: #3b82f6;\n --accent-teal: #14b8a6;\n --text-primary: #e2e8f0;\n --text-secondary: #94a3b8;\n --text-muted: #64748b;\n --risk-red: #ef4444;\n --risk-orange: #f97316;\n --risk-yellow: #eab308;\n --risk-blue: #3b82f6;\n --glow-cyan: 0 0 12px rgba(0,212,255,0.25);\n --glow-red: 0 0 10px rgba(239,68,68,0.3);\n --font-display: 'Orbitron', 'Noto Sans SC', sans-serif;\n --font-body: 'Noto Sans SC', system-ui, sans-serif;\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n padding: 0;\n font-family: var(--font-body);\n background-color: var(--bg-deep);\n background-image:\n radial-gradient(ellipse at 30% 20%, rgba(0,180,220,0.04) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 60%, rgba(0,100,180,0.03) 0%, transparent 60%),\n url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"60\" height=\"60\"><rect width=\"60\" height=\"60\" fill=\"none\"/><circle cx=\"30\" cy=\"30\" r=\"0.6\" fill=\"rgba(255,255,255,0.04)\"/></svg>');\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n /* 顶部标题栏 */\n .header-bar {\n background: linear-gradient(180deg, rgba(10,16,31,0.98) 0%, rgba(10,16,31,0.9) 100%);\n border-bottom: 1px solid var(--border-glow);\n box-shadow: 0 1px 20px rgba(0,150,220,0.08);\n }\n\n .header-title {\n font-family: var(--font-display);\n letter-spacing: 0.08em;\n background: linear-gradient(180deg, #e0f0ff 0%, #7cc8f0 50%, #4aa8d8 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* 场景切换按钮 */\n .scene-btn {\n position: relative;\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 0.82rem;\n padding: 8px 20px;\n border-radius: 4px;\n background: rgba(14,22,41,0.8);\n border: 1px solid var(--border-subtle);\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.3s ease;\n letter-spacing: 0.03em;\n white-space: nowrap;\n }\n .scene-btn:hover {\n border-color: var(--accent-cyan);\n color: var(--accent-cyan);\n box-shadow: var(--glow-cyan);\n background: rgba(0,180,220,0.08);\n }\n .scene-btn.active {\n background: linear-gradient(135deg, rgba(0,180,220,0.18) 0%, rgba(0,100,200,0.1) 100%);\n border-color: var(--accent-cyan);\n color: #ffffff;\n box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.05);\n }\n .scene-btn.active::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 20%;\n right: 20%;\n height: 2px;\n background: var(--accent-cyan);\n box-shadow: 0 0 8px var(--accent-cyan);\n }\n\n /* 面板卡片 */\n .panel-card {\n background: var(--bg-card);\n border: 1px solid var(--border-subtle);\n border-radius: 6px;\n overflow: hidden;\n }\n .panel-header {\n background: linear-gradient(180deg, rgba(16,26,50,0.9) 0%, rgba(12,20,42,0.7) 100%);\n border-bottom: 1px solid var(--border-subtle);\n padding: 10px 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n font-size: 0.9rem;\n letter-spacing: 0.04em;\n }\n .panel-header .indicator-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n animation: pulse-dot 2s infinite;\n }\n @keyframes pulse-dot {\n 0%,100% { opacity: 1; box-shadow: 0 0 4px currentColor; }\n 50% { opacity: 0.4; box-shadow: 0 0 10px currentColor; }\n }\n\n /* 告警行 */\n .alert-row {\n display: grid;\n grid-template-columns: 48px 1fr 1fr 56px 56px 48px;\n gap: 6px;\n align-items: center;\n padding: 7px 12px;\n font-size: 0.78rem;\n border-bottom: 1px solid rgba(26,35,64,0.5);\n transition: background 0.25s;\n }\n .alert-row:hover {\n background: rgba(0,180,220,0.05);\n }\n .risk-badge {\n display: inline-block;\n padding: 2px 8px;\n border-radius: 3px;\n font-size: 0.72rem;\n font-weight: 600;\n letter-spacing: 0.04em;\n text-align: center;\n min-width: 44px;\n }\n .risk-red { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.35); }\n .risk-orange { background: rgba(249,115,22,0.2); color: #f97316; border: 1px solid rgba(249,115,22,0.35); }\n .risk-yellow { background: rgba(234,179,8,0.2); color: #eab308; border: 1px solid rgba(234,179,8,0.35); }\n .risk-blue { background: rgba(59,130,246,0.2); color: #3b82f6; border: 1px solid rgba(59,130,246,0.35); }\n\n /* 滚动容器 */\n .scroll-thin::-webkit-scrollbar {\n width: 3px;\n }\n .scroll-thin::-webkit-scrollbar-track {\n background: transparent;\n }\n .scroll-thin::-webkit-scrollbar-thumb {\n background: rgba(255,255,255,0.08);\n border-radius: 3px;\n }\n\n /* 统计柱 */\n .stat-bar {\n height: 6px;\n border-radius: 3px;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));\n transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .stat-bar.orange { background: linear-gradient(90deg, #f97316, #fb923c); }\n .stat-bar.yellow { background: linear-gradient(90deg, #eab308, #facc15); }\n .stat-bar.red { background: linear-gradient(90deg, #ef4444, #f87171); }\n\n /* 地图区域 */\n .map-container {\n position: relative;\n background:\n radial-gradient(ellipse at 50% 50%, rgba(0,150,200,0.06) 0%, transparent 70%),\n linear-gradient(180deg, #080e1c 0%, #0c1628 100%);\n border: 1px solid var(--border-subtle);\n border-radius: 6px;\n overflow: hidden;\n }\n .map-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(30,58,95,0.12) 1px, transparent 1px),\n linear-gradient(90deg, rgba(30,58,95,0.12) 1px, transparent 1px);\n background-size: 40px 40px;\n }\n\n /* 船舶标记闪烁 */\n .ship-marker {\n position: absolute;\n animation: ship-float 3s ease-in-out infinite;\n }\n .ship-marker .blip {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n position: relative;\n }\n .ship-marker .blip::after {\n content: '';\n position: absolute;\n inset: -4px;\n border-radius: 50%;\n border: 2px solid currentColor;\n animation: blip-ring 2s ease-out infinite;\n }\n @keyframes blip-ring {\n 0% { transform: scale(0.8); opacity: 1; }\n 100% { transform: scale(2.4); opacity: 0; }\n }\n @keyframes ship-float {\n 0%,100% { transform: translateY(0); }\n 50% { transform: translateY(-3px); }\n }\n\n /* 告警闪烁 */\n .alert-blink {\n animation: alert-blink 1s ease-in-out infinite;\n }\n @keyframes alert-blink {\n 0%,100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(239,68,68,0.8)); }\n 50% { opacity: 0.3; filter: drop-shadow(0 0 2px rgba(239,68,68,0.2)); }\n }\n\n /* 航道标签 */\n .channel-label {\n font-family: var(--font-display);\n font-size: 0.68rem;\n letter-spacing: 0.05em;\n color: rgba(0,212,255,0.7);\n text-shadow: 0 0 8px rgba(0,212,255,0.4);\n }\n\n /* 底部任务表格 */\n .task-table th {\n font-weight: 500;\n font-size: 0.76rem;\n color: var(--text-muted);\n letter-spacing: 0.04em;\n text-align: left;\n padding: 10px 12px;\n border-bottom: 1px solid var(--border-subtle);\n white-space: nowrap;\n }\n .task-table td {\n padding: 9px 12px;\n font-size: 0.8rem;\n border-bottom: 1px solid rgba(26,35,64,0.4);\n white-space: nowrap;\n }\n .task-table tr:hover td {\n background: rgba(0,180,220,0.03);\n }\n\n /* 状态标签 */\n .status-tag {\n padding: 3px 10px;\n border-radius: 3px;\n font-size: 0.72rem;\n font-weight: 500;\n letter-spacing: 0.03em;\n }\n .status-pending { background: rgba(249,115,22,0.18); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }\n .status-processing { background: rgba(59,130,246,0.18); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }\n .status-done { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }\n\n /* 数字跳动 */\n .num-glow {\n font-family: var(--font-display);\n font-weight: 600;\n color: var(--accent-cyan);\n text-shadow: 0 0 8px rgba(0,212,255,0.3);\n }\n\n /* 设备在线指示灯 */\n .device-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n display: inline-block;\n margin-right: 6px;\n }\n .device-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }\n .device-dot.offline { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }\n\n /* 操作按钮 */\n .btn-action {\n padding: 3px 10px;\n font-size: 0.72rem;\n border-radius: 3px;\n border: 1px solid var(--border-glow);\n color: var(--accent-cyan);\n background: rgba(0,180,220,0.08);\n cursor: pointer;\n transition: all 0.2s;\n letter-spacing: 0.03em;\n }\n .btn-action:hover {\n background: rgba(0,180,220,0.2);\n box-shadow: var(--glow-cyan);\n }\n .btn-action.danger {\n border-color: rgba(239,68,68,0.4);\n color: #f87171;\n background: rgba(239,68,68,0.06);\n }\n .btn-action.danger:hover {\n background: rgba(239,68,68,0.18);\n box-shadow: var(--glow-red);\n }\n\n /* 响应式 */\n @media (max-width: 1400px) {\n .alert-row { grid-template-columns: 44px 1fr 1fr 48px 48px 42px; font-size: 0.72rem; gap: 4px; }\n }\n @media (max-width: 1024px) {\n .main-grid { grid-template-columns: 1fr !important; }\n }\n </style>\n</head>\n<body>\n\n <!-- ========== 顶部标题栏 ========== -->\n <div class=\"header-bar px-4 py-3 flex items-center justify-between flex-wrap gap-3\">\n <div class=\"flex items-center gap-4\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa-solid fa-anchor text-cyan-400 text-xl\"></i>\n <h1 class=\"header-title text-xl md:text-2xl font-bold tracking-wider\">温岭礁山数安渔港指挥大屏</h1>\n </div>\n <span class=\"hidden md:inline-block px-2 py-0.5 text-xs border border-cyan-500/30 rounded text-cyan-400/80 font-mono tracking-wider\">V2.6</span>\n </div>\n <div class=\"flex items-center gap-4 md:gap-6 text-sm flex-wrap\">\n <span class=\"text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-regular fa-clock text-cyan-500/70

total_tokens
12862
summary
构建礁山数安渔港指挥大屏完整页面——深色科技风、四区布局（左侧风险预警/中间港口态势地图/右侧港区总览/下方任务列表）、顶部场景切换栏、实时告警滚动、统计柱状图、港口SVG地图含航道与船舶标记、设备状态面板、任务处置表格，配合Orbitron+Noto Sans SC字体、霓虹青蓝点缀、网格纹理背景。
uiParsing
关闭