礁山渔港指挥大屏：深色科技风四区布局，实时态势与风险预警一体化

By 15657170297, 12 May, 2026

推理

The user is saying the page is still incomplete - only showing the scene switch buttons and the alert section, but missing the map, right panel, bottom task list, and most of the content. They also mention I should look at a reference image for style, but I don't have access to any uploaded reference image. Let me look at my previous output - it seems like the HTML was cut off again in the middle of the alert rows section.

Let me write a complete, full HTML document that includes ALL sections properly. The issue is the HTML keeps getting truncated. I need to make sure the entire document is complete. Let me also improve the design to be more visually appealing - maybe a darker, more sophisticated command center look.

Let me write a complete, well-structured HTML with all four major areas:
1. Left: Risk Warning (real-time alerts + statistics + risk level distribution)
2. Center: Port Map (with channels, ships, landmarks)
3. Right: Port Overview (core data + channel traffic + device status + today's handling)
4. Bottom: Task List table
5. Top: Title bar + Scene switching

I need to make this complete and not truncated. Let me write it more concisely but complete.

The issue might be my output is too large. Let me try to be more efficient with the code while keeping it complete and visually impressive.

Let me also check if the previous response was cut off - yes, looking at it, the HTML ends mid-sentence in the alert rows section. The JSON was likely malformed or truncated.

I need to output complete HTML this time. Let me structure it carefully.

For the design - the user says it doesn't look good. Let me go for a more impressive command center / sci-fi aesthetic with better visual hierarchy, glowing elements, and proper spacing. I'll use darker backgrounds with subtle cyan/blue glows, proper card layouts, and ensure all sections render.

Let me write the complete HTML now, being careful about length but ensuring completeness.The design system returned a minimal style but for a command center / maritime monitoring dashboard, I should go with a darker, more sophisticated sci-fi/tech aesthetic. Let me use the dark mode with cyan/blue accent colors that I had before but make it more visually impressive.

The key issue was that the HTML kept getting truncated. I need to output a complete HTML document. Let me be more careful about the structure and make sure it's complete. I'll also look at making the design more visually appealing - the user said it doesn't look good.

Let me create a complete, self-contained HTML file with all sections:

1. Top header bar with title, time, weather
2. Scene switching bar
3. Three-column main layout:
- Left: Risk warnings (scrolling alerts + statistics + risk distribution)
- Center: Port map with SVG/Canvas rendering
- Right: Port overview (core data, channel traffic, device status, today's handling)
4. Bottom: Task list table

For the map, I'll create a detailed SVG-based port map with channels, markers, ships, and landmarks.

Let me write this as a complete document. I'll use inline styles more efficiently and make sure it's all there.

Actually, I think the issue might be that my previous replies were too long and got cut off. Let me try to be more concise while still having all the content. I'll use more Tailwind classes and less custom CSS to reduce size.

Let me write this carefully now.Let me now write the complete HTML. The key issue is the content getting cut off. I need to make a complete HTML document that's not truncated. Let me structure this carefully.

I'll use TailwindCSS extensively to reduce custom CSS, and make sure all four sections are present. Let me also use SVG for the port map area since that's more controllable.

Actually, let me think about this differently. The user says only the scene switches and alert section appear. This means my previous HTML was truncated - it literally just stopped mid-way through the code. I need to make sure my output is complete.

Let me write a more compact but complete version. I'll use Tailwind classes more heavily and minimize custom CSS while still making it look good.

For the map center section, I'll use an SVG-based port map with:
- Coastline shapes
- 3 channels marked
- 4 gate markers
- Ship icons
- Watchtower, drone airport, shipyard, oil depot
- Grid overlay

For the right panel, I need:
- Core overview numbers
- Channel traffic
- Device status
- Today's handling stats

For the bottom, the task table.

Let me write complete, well-structured HTML now.Let me now write the complete HTML. I need to make sure it's all there - title bar, scene tabs, left panel (alerts + stats + risk distribution), center map, right panel (overview + channel traffic + devices + today's handling), and bottom task table.

I'll create a comprehensive, dark-theme command center. Let me use Tailwind heavily to keep the code manageable while ensuring completeness.I see there are several nodes about this same topic - the user has been trying to get this working. The issue is clearly that my HTML output keeps getting truncated. I need to write a complete HTML document and make sure it's not too long that it gets cut off.

Let me write a more compact but complete version. I'll use more Tailwind utility classes inline to reduce the amount of custom CSS, and I'll make sure all sections are present.

Key sections needed:
1. Title bar with time, weather, platform status
2. Scene switching bar (5 buttons)
3. Left panel: Real-time alerts (scrollable), statistics bars, risk distribution
4. Center: SVG port map with channels, ships, markers
5. Right panel: Core overview, channel traffic, device status, today's handling
6. Bottom: Task list table

I need to make sure the HTML is complete. Let me focus on essential content and not go overboard with excessive details.

For the center map, I'll create an SVG that shows:
- A coastline/harbor shape
- 3 channels (1#, 2#, 3#)
- 4 gate markers
- Ship dots with animations
- Landmarks (shipyard, oil depot, watchtower, drone airport)
- Grid background

Let me write this now, being very careful about making it complete.

角色

assistant

content

```json
{
"summary": "完整重写礁山渔港指挥大屏HTML：深色科技风，四区布局——左侧风险预警（实时滚动告警+统计柱状图+等级分布环形）、中间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{--bg-deep:#050914;--bg-panel:#0a1022;--bg-card:#0d152b;--border-subtle:#182244;--border-glow:#1c3c62;--accent-cyan:#00d4ff;--accent-blue:#3b82f6;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--risk-red:#ef4444;--risk-orange:#f97316;--risk-yellow:#eab308;--risk-blue:#3b82f6;--glow-cyan:0 0 14px rgba(0,212,255,0.28);--glow-red:0 0 10px rgba(239,68,68,0.35);--font-display:'Orbitron','Noto Sans SC',sans-serif;--font-body:'Noto Sans SC',system-ui,sans-serif}\n*{box-sizing:border-box;margin:0;padding:0}\nbody{font-family:var(--font-body);background-color:var(--bg-deep);background-image:radial-gradient(ellipse at 22% 12%,rgba(0,160,210,0.06) 0%,transparent 55%),radial-gradient(ellipse at 70% 50%,rgba(0,80,160,0.05) 0%,transparent 55%),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.5\" fill=\"rgba(190,210,240,0.04)\"/></svg>');color:var(--text-primary);min-height:100vh;overflow-x:hidden}\n.header-bar{background:linear-gradient(180deg,rgba(10,16,31,0.98) 0%,rgba(10,16,31,0.86) 100%);border-bottom:1px solid var(--border-glow);box-shadow:0 1px 22px rgba(0,130,200,0.06);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:relative;z-index:10}\n.header-title{font-family:var(--font-display);letter-spacing:0.07em;background:linear-gradient(180deg,#eaf6ff 0%,#7ec8f0 45%,#42a4d4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-size:1.3rem}\n.scene-bar{background:rgba(10,16,31,0.55);border-bottom:1px solid rgba(28,60,98,0.4);padding:10px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:9}\n.scene-btn{font-family:var(--font-body);font-weight:500;font-size:0.78rem;padding:7px 16px;border-radius:4px;background:rgba(14,22,41,0.75);border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:all 0.28s;letter-spacing:0.03em;white-space:nowrap;position:relative}\n.scene-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:var(--glow-cyan);background:rgba(0,170,210,0.07)}\n.scene-btn.active{background:linear-gradient(135deg,rgba(0,170,210,0.22) 0%,rgba(0,80,180,0.1) 100%);border-color:var(--accent-cyan);color:#fff;box-shadow:var(--glow-cyan),inset 0 1px 0 rgba(255,255,255,0.04)}\n.scene-btn.active::after{content:'';position:absolute;bottom:-1px;left:22%;right:22%;height:2px;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}\n.panel-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:6px;overflow:hidden}\n.panel-header{background:linear-gradient(180deg,rgba(16,26,50,0.9) 0%,rgba(12,20,42,0.65) 100%);border-bottom:1px solid var(--border-subtle);padding:9px 14px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:0.86rem;letter-spacing:0.04em}\n.panel-header .indicator-dot{width:8px;height:8px;border-radius:50%;animation:pulse-dot 2s infinite}\n@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 4px currentColor}50%{opacity:0.3;box-shadow:0 0 12px currentColor}}\n.alert-row{display:grid;grid-template-columns:48px 1fr 1fr 50px 50px 46px;gap:3px;align-items:center;padding:6px 10px;font-size:0.74rem;border-bottom:1px solid rgba(26,35,64,0.4);transition:background 0.22s}\n.alert-row:hover{background:rgba(0,170,210,0.04)}\n.risk-badge{display:inline-block;padding:2px 7px;border-radius:3px;font-size:0.68rem;font-weight:600;letter-spacing:0.04em;text-align:center;min-width:40px}\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.stat-bar{height:5px;border-radius:2.5px;transition:width 1s cubic-bezier(0.4,0,0.2,1)}\n.stat-bar.cyan{background:linear-gradient(90deg,#00d4ff,#3b82f6)}\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.stat-bar.blue{background:linear-gradient(90deg,#3b82f6,#60a5fa)}\n.map-container{position:relative;background:radial-gradient(ellipse at 50% 50%,rgba(0,130,200,0.08) 0%,transparent 70%),linear-gradient(180deg,#080e1c 0%,#0c1628 100%);border:1px solid var(--border-subtle);border-radius:6px;overflow:hidden;min-height:460px}\n.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,58,95,0.14) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,0.14) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}\n.ship-marker{position:absolute;animation:ship-float 3s ease-in-out infinite;cursor:pointer}\n.ship-marker .blip{width:10px;height:10px;border-radius:50%;position:relative}\n.ship-marker .blip::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid currentColor;animation:blip-ring 2s ease-out infinite}\n@keyframes blip-ring{0%{transform:scale(0.6);opacity:1}100%{transform:scale(3);opacity:0}}\n@keyframes ship-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}\n.alert-blink{animation:alert-blink 0.85s ease-in-out infinite}\n@keyframes alert-blink{0%,100%{opacity:1;filter:drop-shadow(0 0 8px rgba(239,68,68,0.9))}50%{opacity:0.2;filter:drop-shadow(0 0 2px rgba(239,68,68,0.15))}}\n.channel-label{font-family:var(--font-display);font-size:0.64rem;letter-spacing:0.05em;fill:rgba(0,212,255,0.7);text-shadow:0 0 8px rgba(0,212,255,0.4)}\n.task-table th{font-weight:500;font-size:0.72rem;color:var(--text-muted);letter-spacing:0.04em;text-align:left;padding:9px 10px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}\n.task-table td{padding:7px 10px;font-size:0.76rem;border-bottom:1px solid rgba(26,35,64,0.3);white-space:nowrap}\n.task-table tr:hover td{background:rgba(0,170,210,0.03)}\n.status-tag{padding:2px 9px;border-radius:3px;font-size:0.68rem;font-weight:500;letter-spacing:0.03em}\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.num-glow{font-family:var(--font-display);font-weight:600;color:var(--accent-cyan);text-shadow:0 0 8px rgba(0,212,255,0.3)}\n.device-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0}\n.device-dot.online{background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,0.6)}\n.device-dot.offline{background:#ef4444;box-shadow:0 0 7px rgba(239,68,68,0.5)}\n.btn-action{padding:3px 9px;font-size:0.68rem;border-radius:3px;border:1px solid var(--border-glow);color:var(--accent-cyan);background:rgba(0,170,210,0.06);cursor:pointer;transition:all 0.2s;letter-spacing:0.03em}\n.btn-action:hover{background:rgba(0,170,210,0.2);box-shadow:var(--glow-cyan)}\n.scroll-thin::-webkit-scrollbar{width:3px}\n.scroll-thin::-webkit-scrollbar-track{background:transparent}\n.scroll-thin::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.07);border-radius:3px}\n.donut-ring{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:8}\n.donut-seg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease}\n@media(max-width:1200px){.main-grid{display:flex!important;flex-direction:column!important}.map-container{min-height:340px}}\n</style>\n</head>\n<body>\n\n\n<div class=\"header-bar\">\n <div class=\"flex items-center gap-3 flex-wrap\">\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\">温岭礁山数安渔港指挥大屏</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\"><i class=\"fa-regular fa-clock text-cyan-500/70\"></i><span id=\"liveTime\" class=\"font-mono text-slate-300\">2026-05-12 10:30:00</span></span>\n <span class=\"text-slate-400 flex items-center gap-1.5\"><i class=\"fa-solid fa-cloud-sun text-cyan-500/70\"></i>多云 24°C</span>\n <span class=\"text-slate-400 flex items-center gap-1.5\"><i class=\"fa-solid fa-wind text-cyan-500/70\"></i>东北风 12kt</span>\n <span class=\"text-emerald-400/80 flex items-center gap-1.5 text-xs\"><span class=\"device-dot online\"></span>浙渔安平台 · 在线</span>\n </div>\n</div>\n\n\n<div class=\"scene-bar\">\n <span class=\"text-xs text-slate-500 mr-1 tracking-wider font-mono\">SCENE</span>\n <button class=\"scene-btn active\"><i class=\"fa-solid fa-ship mr-1.5\"></i>外省籍渔船监测</button>\n <button class=\"scene-btn\"><i class=\"fa-solid fa-circle-exclamation mr-1.5\"></i>\"三无\"船舶监测</button>\n <button class=\"scene-btn\"><i class=\"fa-solid fa-fire mr-1.5\"></i>消防监测</button>\n <button class=\"scene-btn\"><i class=\"fa-solid fa-person mr-1.5\"></i>船员接驳监测</button>\n <button class=\"scene-btn\"><i class=\"fa-solid fa-triangle-exclamation mr-1.5\"></i>港内防碰撞监测</button>\n</div>\n\n\n<div class=\"main-grid p-3 md:p-4\" style=\"display:grid;grid-template-columns:310px 1fr 330px;gap:10px;\">\n\n \n <div class=\"flex flex-col gap-2.5\" style=\"min-width:0;\">\n\n \n <div class=\"panel-card flex flex-col\" style=\"flex:0 1 auto;max-height:340px;\">\n <div class=\"panel-header\">\n <span class=\"indicator-dot\" style=\"background:#ef4444;color:#ef4444;\"></span>\n <span>实时告警</span>\n <span class=\"ml-auto text-xs text-slate-500\"><i class=\"fa-solid fa-rotate text-cyan-600 mr-1\"></i>滚动更新</span>\n </div>\n <div class=\"scroll-thin overflow-y-auto\" style=\"max-height:290px;\">\n \n <div class=\"alert-row\" style=\"background:rgba(239,68,68,0.03);\">\n <span class=\"text-slate-500 text-xs\">10:23</span>\n <span class=\"text-slate-300 text-xs\">外省籍渔船超期停留</span>\n <span class=\"text-slate-400 text-xs\">1#航道·浙渔XX</span>\n <span class=\"risk-badge risk-orange\">橙色</span>\n <span class=\"text-xs text-orange-400\">待处置</span>\n <button class=\"btn-action text-xs\">查看</button>\n </div>\n \n <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">10:15</span>\n <span class=\"text-slate-300 text-xs\">港区烟雾预警</span>\n <span class=\"text-slate-400 text-xs\">渔港小镇码头</span>\n <span class=\"risk-badge risk-yellow\">黄色</span>\n <span class=\"text-xs text-green-400\">已核实</span>\n <button class=\"btn-action text-xs\">处置</button>\n </div>\n \n <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">10:05</span>\n <span class=\"text-slate-300 text-xs\">接驳船未穿救生衣</span>\n <span class=\"text-slate-400 text-xs\">4#口门·无牌船</span>\n <span class=\"risk-badge risk-orange\">橙色</span>\n <span class=\"text-xs text-orange-400\">待派单</span>\n <button class=\"btn-action text-xs\">派单</button>\n </div>\n \n <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">09:58</span>\n <span class=\"text-slate-300 text-xs\">三无船舶擅闯管制区</span>\n <span class=\"text-slate-400 text-xs\">2#口门附近</span>\n <span class=\"risk-badge risk-red\">红色</span>\n <span class=\"text-xs text-red-400\">紧急</span>\n <button class=\"btn-action text-xs\" style=\"border-color:rgba(239,68,68,0.4);color:#f87171;\">处置</button>\n </div>\n \n <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">09:42</span>\n <span class=\"text-slate-300 text-xs\">防碰撞预警触发</span>\n <span class=\"text-slate-400 text-xs\">1#航道交叉口</span>\n <span class=\"risk-badge risk-yellow\">黄色</span>\n <span class=\"text-xs text-green-400\">已核实</span>\n <button class=\"btn-action text-xs\">详情</button>\n </div>\n \n <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">09:30</span>\n <span class=\"text-slate-300 text-xs\">外省籍渔船AIS离线</span>\n <span class=\"text-slate-400 text-xs

total_tokens

24305

summary

完整重写礁山渔港指挥大屏HTML：深色科技风，四区布局——左侧风险预警（实时滚动告警+统计柱状图+等级分布环形）、中间SVG港口态势地图（航道/口门/船舶/瞭望塔/无人机机场/船厂/油库标注+船舶动画闪烁）、右侧港区总览（核心数据卡片+航道流量+设备状态+今日处置）、底部任务处置表格，顶部标题栏含时间天气和场景切换栏。Orbitron+Noto Sans SC字体，霓虹青蓝点缀，网格纹理背景。

uiParsing

关闭