深色科技风指挥大屏HTML修复：四区布局含SVG地图与风险预警

By 15657170297, 12 May, 2026

推理

用户反馈大屏主页只看到标题，其余一片黑。这说明我之前的代码输出被截断了——我只输出了HTML的开始部分（到标题栏），后面的大量内容（左侧风险预警区、中间地图、右侧港区总览、下方任务列表等）根本没有包含在输出中。

让我仔细检查一下：我之前的输出在 `<span class="text-slate-400 flex items-center gap-1.5">` 之后就断了，后面的HTML完全缺失。这是一个严重的截断问题。

我需要重新生成完整的HTML代码。让我重新组织，确保整个页面完整输出。我会把整个HTML代码写完整，包括：

1. 顶部标题栏（已完成）
2. 场景切换按钮
3. 左侧风险预警区
4. 中间港口地图
5. 右侧港区总览
6. 下方任务处置列表

同时要保持之前的设计风格：深色科技风、Orbitron+Noto Sans SC字体、霓虹青蓝点缀。

让我重新构建完整的HTML，注意不要被截断。

角色

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 {\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* { box-sizing: border-box; margin: 0; padding: 0; }\nbody {\n font-family: var(--font-body);\n background-color: var(--bg-deep);\n background-image:\n radial-gradient(ellipse at 25% 15%, rgba(0,170,210,0.05) 0%, transparent 55%),\n radial-gradient(ellipse at 72% 55%, rgba(0,90,170,0.04) 0%, transparent 55%),\n url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"80\" height=\"80\"><rect width=\"80\" height=\"80\" fill=\"none\"/><circle cx=\"40\" cy=\"40\" r=\"0.5\" fill=\"rgba(200,220,255,0.035)\"/></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.88) 100%);\n border-bottom: 1px solid var(--border-glow);\n box-shadow: 0 1px 20px rgba(0,140,210,0.07);\n padding: 10px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 10px;\n}\n.header-title {\n font-family: var(--font-display);\n letter-spacing: 0.07em;\n background: linear-gradient(180deg, #e8f4ff 0%, #80c8f0 50%, #48a8d8 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-weight: 700;\n font-size: 1.25rem;\n}\n\n/* 场景按钮 */\n.scene-btn {\n font-family: var(--font-body);\n font-weight: 500;\n font-size: 0.8rem;\n padding: 7px 18px;\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.28s ease;\n letter-spacing: 0.03em;\n white-space: nowrap;\n position: relative;\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,175,215,0.07);\n}\n.scene-btn.active {\n background: linear-gradient(135deg, rgba(0,175,215,0.2) 0%, rgba(0,90,190,0.1) 100%);\n border-color: var(--accent-cyan);\n color: #fff;\n box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.04);\n}\n.scene-btn.active::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 22%;\n right: 22%;\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 14px;\n display: flex;\n align-items: center;\n gap: 9px;\n font-weight: 600;\n font-size: 0.88rem;\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.35; box-shadow: 0 0 10px currentColor; }\n}\n\n/* 告警行 */\n.alert-row {\n display: grid;\n grid-template-columns: 50px 1fr 1fr 54px 54px 50px;\n gap: 4px;\n align-items: center;\n padding: 7px 10px;\n font-size: 0.76rem;\n border-bottom: 1px solid rgba(26,35,64,0.45);\n transition: background 0.22s;\n}\n.alert-row:hover { background: rgba(0,175,215,0.04); }\n.risk-badge {\n display: inline-block;\n padding: 2px 7px;\n border-radius: 3px;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.04em;\n text-align: center;\n min-width: 42px;\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.stat-bar {\n height: 6px;\n border-radius: 3px;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));\n transition: width 1s 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,140,200,0.07) 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 min-height: 480px;\n}\n.map-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(30,58,95,0.13) 1px, transparent 1px),\n linear-gradient(90deg, rgba(30,58,95,0.13) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n}\n\n/* 船舶标记 */\n.ship-marker {\n position: absolute;\n animation: ship-float 3.2s ease-in-out infinite;\n cursor: pointer;\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: -5px;\n border-radius: 50%;\n border: 2px solid currentColor;\n animation: blip-ring 2.2s ease-out infinite;\n}\n@keyframes blip-ring {\n 0% { transform: scale(0.7); opacity: 1; }\n 100% { transform: scale(2.8); 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 0.9s ease-in-out infinite;\n}\n@keyframes alert-blink {\n 0%,100% { opacity: 1; filter: drop-shadow(0 0 7px rgba(239,68,68,0.9)); }\n 50% { opacity: 0.25; 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.66rem;\n letter-spacing: 0.05em;\n color: rgba(0,212,255,0.72);\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.74rem;\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: 8px 12px;\n font-size: 0.78rem;\n border-bottom: 1px solid rgba(26,35,64,0.35);\n white-space: nowrap;\n}\n.task-table tr:hover td { background: rgba(0,175,215,0.03); }\n\n/* 状态标签 */\n.status-tag {\n padding: 3px 10px;\n border-radius: 3px;\n font-size: 0.7rem;\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: 5px;\n flex-shrink: 0;\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 9px;\n font-size: 0.7rem;\n border-radius: 3px;\n border: 1px solid var(--border-glow);\n color: var(--accent-cyan);\n background: rgba(0,175,215,0.07);\n cursor: pointer;\n transition: all 0.2s;\n letter-spacing: 0.03em;\n}\n.btn-action:hover {\n background: rgba(0,175,215,0.2);\n box-shadow: var(--glow-cyan);\n}\n\n/* 滚动条 */\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\n/* 响应式 */\n@media (max-width: 1400px) {\n .alert-row { grid-template-columns: 44px 1fr 1fr 48px 44px 42px; font-size: 0.7rem; gap: 3px; }\n}\n@media (max-width: 1024px) {\n .main-grid { display: flex !important; flex-direction: column !important; }\n .map-container { min-height: 360px; }\n}\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\">\n <i class=\"fa-regular fa-clock text-cyan-500/70\"></i>\n <span id=\"liveTime\" class=\"font-mono text-slate-300\">2026-05-12 10:30:00</span>\n </span>\n <span class=\"text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-cloud-sun text-cyan-500/70\"></i> 多云 24°C\n </span>\n <span class=\"text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-wind text-cyan-500/70\"></i> 东北风 12kt\n </span>\n <span class=\"text-emerald-400/80 flex items-center gap-1.5 text-xs\">\n <span class=\"device-dot online\"></span> 浙渔安平台 · 在线\n </span>\n </div>\n</div>\n\n\n<div class=\"px-4 py-3 flex items-center gap-3 flex-wrap\" style=\"background:rgba(10,16,31,0.6);border-bottom:1px solid rgba(30,58,95,0.4);\">\n <span class=\"text-xs text-slate-500 mr-1 tracking-wider\">场景切换</span>\n <button class=\"scene-btn active\">\n <i class=\"fa-solid fa-ship mr-1.5\"></i> 外省籍渔船监测\n </button>\n <button class=\"scene-btn\">\n <i class=\"fa-solid fa-circle-exclamation mr-1.5\"></i> \"三无\"船舶监测\n </button>\n <button class=\"scene-btn\">\n <i class=\"fa-solid fa-fire mr-1.5\"></i> 消防监测\n </button>\n <button class=\"scene-btn\">\n <i class=\"fa-solid fa-person mr-1.5\"></i> 船员接驳监测\n </button>\n <button class=\"scene-btn\">\n <i class=\"fa-solid fa-triangle-exclamation mr-1.5\"></i> 港内防碰撞监测\n </button>\n</div>\n\n\n<div class=\"main-grid p-3 md:p-4\" style=\"display:grid;grid-template-columns:320px 1fr 340px;gap:12px;\">\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:1 1 auto;max-height:360px;\">\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\">\n <i class=\"fa-solid fa-rotate text-cyan-600 mr-1\"></i>滚动更新\n </span>\n </div>\n <div class=\"scroll-thin overflow-y-auto flex-1\" style=\"max-height:300px;\">\n <div class=\"alert-row\" style=\"background:rgba(239,68,68,0.04);\">\n <span class=\"text-slate-500 text-xs\">10:23</span>\n <span class=\"text-slate-300\">外省籍渔船超期停留</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 <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">10:15</span>\n <span class=\"text-slate-300\">港区烟雾预警</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 <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">10:05</span>\n <span class=\"text-slate-300\">接驳船未穿救生衣</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 <div class=\"alert-row\">\n <span class=\"text-slate-500 text-xs\">09:58</span>\n <span class

total_tokens

16089

summary

修复上一版代码被截断导致页面空白的问题，重新输出完整HTML——深色科技风指挥大屏，含完整四区布局（左侧风险预警滚动列表+统计柱状图+等级分布、中间港口态势SVG地图含航道/船舶/瞭望塔/无人机机场标注、右侧港区核心数据+航道流量+设备状态+今日处置、下方任务处置表格）、顶部场景切换栏与标题信息行，Orbitron+Noto Sans SC字体、霓虹青蓝点缀。

uiParsing

关闭