深蓝渐变驾驶舱大屏：浅色主题升级为深色科技风格

```json
{
"summary": "基于设计稿，将原浅色主题升级为深色系驾驶舱大屏风格。采用深蓝渐变背景+科技网格线条+霓虹光效，卡片使用毛玻璃质感+边框发光，ECharts图表全部配以深色主题，视觉冲击力大幅提升。保留所有原始数据指标和布局结构。",
"widget": {
"type": "custom-template",
"isAPI": false,
"api": null,
"fullWidth": true,
"html": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…;);\n\n* {\n font-family: 'Inter', system-ui, sans-serif;\n}\n\nbody {\n margin: 0;\n padding: 0;\n}\n\n.dashboard-cockpit {\n background: #070b24;\n min-height: 100vh;\n position: relative;\n overflow: hidden;\n}\n\n.dashboard-cockpit::before {\n content: '';\n position: absolute;\n inset: 0;\n background: \n linear-gradient(rgba(16, 24, 96, 0.3) 1px, transparent 1px),\n linear-gradient(90deg, rgba(16, 24, 96, 0.3) 1px, transparent 1px);\n background-size: 60px 60px;\n pointer-events: none;\n z-index: 0;\n}\n\n.dashboard-cockpit::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 20% 50%, rgba(0, 150, 255, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 20%, rgba(120, 50, 255, 0.06) 0%, transparent 50%),\n radial-gradient(ellipse at 50% 80%, rgba(0, 200, 255, 0.05) 0%, transparent 50%);\n pointer-events: none;\n z-index: 0;\n}\n\n.glass-panel {\n background: linear-gradient(135deg, rgba(15, 23, 62, 0.85) 0%, rgba(10, 16, 48, 0.75) 100%);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(56, 152, 236, 0.15);\n box-shadow: 0 0 30px rgba(0, 100, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);\n transition: all 0.3s ease;\n}\n\n.glass-panel:hover {\n border-color: rgba(56, 152, 236, 0.3);\n box-shadow: 0 0 40px rgba(0, 100, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);\n}\n\n.glass-panel-light {\n background: linear-gradient(135deg, rgba(20, 30, 76, 0.7) 0%, rgba(14, 20, 56, 0.6) 100%);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid rgba(56, 152, 236, 0.1);\n}\n\n.title-underline {\n position: relative;\n display: inline-block;\n}\n\n.title-underline::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n width: 80%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #3898ec, #7c3aed, transparent);\n border-radius: 2px;\n}\n\n.corner-decoration {\n position: absolute;\n width: 16px;\n height: 16px;\n border-color: rgba(56, 152, 236, 0.4);\n border-style: solid;\n}\n\n.corner-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }\n.corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }\n.corner-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }\n.corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }\n\n.glow-text {\n background: linear-gradient(135deg, #f0f4ff 0%, #94b8ff 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.metric-card {\n position: relative;\n overflow: hidden;\n}\n\n.metric-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 3px;\n height: 100%;\n border-radius: 0 2px 2px 0;\n}\n\n.metric-card.gold::before { background: linear-gradient(180deg, #f59e0b, #d97706); }\n.metric-card.blue::before { background: linear-gradient(180deg, #3898ec, #2563eb); }\n.metric-card.purple::before { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }\n\n.ring-value-center {\n position: absolute;\n top: 42%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 18px;\n font-weight: 700;\n color: #e2e8f0;\n text-align: center;\n line-height: 1.2;\n}\n\n.ring-label {\n position: absolute;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 11px;\n color: rgba(148, 163, 184, 0.7);\n white-space: nowrap;\n letter-spacing: 1px;\n}\n\n@keyframes pulse-glow {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 0.8; }\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-6px); }\n}\n\n@keyframes scan-line {\n 0% { transform: translateY(-100%); }\n 100% { transform: translateY(100vh); }\n}\n\n.scan-animation::after {\n content: '';\n position: absolute;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(56, 152, 236, 0.3), transparent);\n animation: scan-line 6s linear infinite;\n pointer-events: none;\n}\n\n.status-circle {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n width: 120px;\n height: 120px;\n box-shadow: 0 0 40px rgba(0,0,0,0.3);\n transition: all 0.4s ease;\n}\n\n.status-circle:hover {\n transform: scale(1.05);\n}\n\n.status-circle.warning {\n background: linear-gradient(135deg, #f59e0b, #d97706);\n box-shadow: 0 0 30px rgba(245, 158, 11, 0.3), inset 0 -2px 6px rgba(0,0,0,0.2);\n}\n\n.status-circle.warning:hover {\n box-shadow: 0 0 50px rgba(245, 158, 11, 0.5);\n}\n\n.status-circle.alert {\n background: linear-gradient(135deg, #ef4444, #dc2626);\n box-shadow: 0 0 30px rgba(239, 68, 68, 0.3), inset 0 -2px 6px rgba(0,0,0,0.2);\n}\n\n.status-circle.alert:hover {\n box-shadow: 0 0 50px rgba(239, 68, 68, 0.5);\n}\n\n/* Table Styles */\n.data-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.data-table th {\n padding: 6px 10px;\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: rgba(148, 163, 184, 0.6);\n border-bottom: 1px solid rgba(56, 152, 236, 0.15);\n text-align: left;\n}\n\n.data-table td {\n padding: 7px 10px;\n font-size: 14px;\n color: #cbd5e1;\n border-bottom: 1px solid rgba(56, 152, 236, 0.06);\n}\n\n.data-table tr:last-child td {\n border-bottom: none;\n}\n\n.data-table tr:hover td {\n background: rgba(56, 152, 236, 0.05);\n}\n\n/* Scrollbar */\n::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n::-webkit-scrollbar-track {\n background: transparent;\n}\n::-webkit-scrollbar-thumb {\n background: rgba(56, 152, 236, 0.3);\n border-radius: 2px;\n}\n\n@media (max-width: 960px) {\n .status-circle {\n width: 90px;\n height: 90px;\n }\n .status-circle .circle-value {\n font-size: 20px !important;\n }\n .status-circle .circle-label {\n font-size: 12px !important;\n }\n}\n</style>\n\n<div class=\"dashboard-cockpit\">\n <div class=\"relative z-10 p-4 md:p-6 lg:p-8\" style=\"min-height: 100vh;\">\n \n <!-- Header -->\n <div class=\"relative mb-6 md:mb-8\">\n <div class=\"flex items-center justify-center gap-3 md:gap-4\">\n <div class=\"w-8 md:w-10 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-50\"></div>\n <i class=\"fa fa-cubes text-cyan-400 text-lg md:text-xl opacity-60\"></i>\n <h1 class=\"text-xl md:text-2xl lg:text-3xl font-bold tracking-wider text-center glow-text\" style=\"font-family:'Inter',sans-serif;\">\n 潮设运营数字化全景看板\n </h1>\n <i class=\"fa fa-cubes text-cyan-400 text-lg md:text-xl opacity-60\"></i>\n <div class=\"w-8 md:w-10 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-50\"></div>\n </div>\n <div class=\"flex justify-center mt-2\">\n <div class=\"w-32 md:w-48 h-0.5 bg-gradient-to-r from-transparent via-blue-500 to-transparent rounded-full opacity-40\"></div>\n </div>\n <div class=\"absolute left-0 right-0 top-1/2 -translate-y-1/2 flex justify-between px-2 pointer-events-none opacity-20\">\n <i class=\"fa fa-bolt text-cyan-400 text-xs\"></i>\n <i class=\"fa fa-bolt text-cyan-400 text-xs\"></i>\n </div>\n </div>\n\n <!-- Row 1: Charts + Metrics + Ring Charts -->\n <div class=\"grid grid-cols-12 gap-3 md:gap-4 lg:gap-5 mb-3 md:mb-4 lg:mb-5\">\n \n <!-- Col 1-4: ECharts (Bar+Line combo) -->\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-3 md:p-4 lg:p-5 h-full scan-animation relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-tr\"></div>\n <div class=\"corner-decoration corner-bl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n <div class=\"flex items-center gap-2 mb-3\">\n <i class=\"fa fa-line-chart text-cyan-400 text-sm\"></i>\n <span class=\"text-xs font-medium text-gray-400 tracking-wider uppercase\">营收趋势</span>\n <div class=\"ml-auto flex gap-2\">\n <span class=\"text-[10px] text-cyan-400 bg-cyan-400/10 px-2 py-0.5 rounded-sm\">本月</span>\n </div>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"rgba(7,11,36,0.9)\", \"borderColor\": \"rgba(56,152,236,0.3)\", \"textStyle\": {\"color\": \"#e2e8f0\", \"fontSize\": 12}},\n \"legend\": {\"data\": [\"营收\", \"目标\"], \"textStyle\": {\"color\": \"#94a3b8\", \"fontSize\": 10}, \"bottom\": 0},\n \"grid\": {\"left\": \"6%\", \"right\": \"6%\", \"top\": \"8%\", \"bottom\": \"18%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"1月\",\"2月\",\"3月\",\"4月\",\"5月\",\"6月\",\"7月\",\"8月\"], \"axisLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.15)\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.06)\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}},\n \"series\": [\n {\"name\": \"营收\", \"type\": \"bar\", \"data\": [820, 932, 901, 1034, 1150, 1260, 1180, 1340], \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#3898ec\"}, {\"offset\": 1, \"color\": \"#1d4ed8\"}]}, \"borderRadius\": [4,4,0,0]}, \"barWidth\": \"40%\"},\n {\"name\": \"目标\", \"type\": \"line\", \"data\": [780, 880, 950, 1000, 1100, 1200, 1150, 1300], \"smooth\": true, \"symbol\": \"circle\", \"symbolSize\": 6, \"lineStyle\": {\"color\": \"#f59e0b\", \"width\": 2}, \"itemStyle\": {\"color\": \"#f59e0b\", \"borderColor\": \"#070b24\", \"borderWidth\": 2}}\n ]\n }' style=\"width:100%;height:180px;\">\n </div>\n </div>\n </div>\n\n <!-- Col 5-8: 3 Metric Cards -->\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4\">\n <div class=\"grid grid-cols-3 gap-2 md:gap-3 h-full\">\n \n <!-- Metric 1 -->\n <div class=\"glass-panel metric-card gold rounded-xl p-3 md:p-4 flex flex-col items-center justify-center text-center relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-20 h-20 bg-yellow-500/5 rounded-full -translate-y-1/2 translate-x-1/2\"></div>\n <i class=\"fa fa-flask text-yellow-400/50 text-lg mb-1\"></i>\n <span class=\"text-2xl md:text-3xl font-bold text-white tracking-tight\">0.93%</span>\n <span class=\"text-[10px] md:text-xs text-gray-400 mt-0.5 tracking-wider\">研发经费投入强度</span>\n <div class=\"flex items-center gap-1 mt-1\">\n <i class=\"fa fa-arrow-up text-emerald-400 text-[8px]\"></i>\n <span class=\"text-[8px] text-emerald-400\">+0.12%</span>\n </div>\n </div>\n\n <!-- Metric 2 -->\n <div class=\"glass-panel metric-card blue rounded-xl p-3 md:p-4 flex flex-col items-center justify-center text-center relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-20 h-20 bg-blue-500/5 rounded-full -translate-y-1/2 translate-x-1/2\"></div>\n <i class=\"fa fa-dollar text-blue-400/50 text-lg mb-1\"></i>\n <span class=\"text-2xl md:text-3xl font-bold text-white tracking-tight\">993.99</span>\n <span class=\"text-[10px] md:text-xs text-gray-400 mt-0.5 tracking-wider\">利润总额 (万元)</span>\n <div class=\"flex items-center gap-1 mt-1\">\n <i class=\"fa fa-arrow-up text-emerald-400 text-[8px]\"></i>\n <span class=\"text-[8px] text-emerald-400\">+8.3%</span>\n </div>\n </div>\n\n <!-- Metric 3 -->\n <div class=\"glass-panel metric-card purple rounded-xl p-3 md:p-4 flex flex-col items-center justify-center text-center relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-20 h-20 bg-purple-500/5 rounded-full -translate-y-1/2 translate-x-1/2\"></div>\n <i class=\"fa fa-balance-scale text-purple-400/50 text-lg mb-1\"></i>\n <span class=\"text-2xl md:text-3xl font-bold text-white tracking-tight\">14.27%</span>\n <span class=\"text-[10px] md:text-xs text-gray-400 mt-0.5 tracking-wider\">资产负债率</span>\n <div class=\"flex items-center gap-1 mt-1\">\n <i class=\"fa fa-arrow-down text-rose-400 text-[8px]\"></i>\n <span class=\"text-[8px] text-rose-400\">-1.8%</span>\n </div>\n </div>\n\n </div>\n </div>\n\n <!-- Col 9-12: 3 Ring Charts -->\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4\">\n <div class=\"grid grid-cols-3 gap-2 md:gap-3 h-full\">\n \n <!-- Ring 1: 营业收入 -->\n <div class=\"glass-panel rounded-xl p-2 md:p-3 relative\">\n <div class=\"w-full relative\" style=\"height:120px;\">\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"show\": false},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"70%\", \"85%\"],\n \"center\": [\"50%\", \"45%\"],\n \"avoidLabelOverlap\": false,\n \"silent\": true,\n \"data\": [\n {\"value\": 7456.41, \"name\": \"已完成\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#3898ec\"}, {\"offset\": 1, \"color\": \"#06b6d4\"}]}}},\n {\"value\": 2543.59, \"name\": \"未完成\", \"itemStyle\": {\"color\": \"rgba(56,152,236,0.12)\"}}\n ],\n \"label\": {\"show\": false},\n \"startAngle\": 90\n }]\n }' style=\"width:100%;height:100%;\">\n </div>\n <div class=\"absolute text-center\" style=\"top:42%;left:50%;transform:translate(-50%,-50%);\">\n <span class=\"text-base md:text-lg font-bold text-white\">7456.41</span>\n </div>\n <div class=\"absolute text-center\" style=\"bottom:4px;left:50%;transform:translateX(-50%);\">\n <span class=\"text-[9px] md:text-[10px] text-gray-500 tracking-wider\">营业收入</span>\n </div>\n </div>\n </div>\n\n <!-- Ring 2: 回款金额 -->\n <div class=\"glass-panel rounded-xl p-2 md:p-3 relative\">\n <div class=\"w-full relative\" style=\"height:120px;\">\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"show\": false},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"70%\", \"85%\"],\n \"center\": [\"50%\", \"45%\"],\n \"avoidLabelOverlap\": false,\n \"silent\": true,\n \"data\": [\n {\"value\": 7578.36, \"name\": \"已回款\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#8b5cf6\"}, {\"offset\": 1, \"color\": \"#6d28d9\"}]}}},\n {\"value\": 2421.64, \"name\": \"未回款\", \"itemStyle\": {\"color\": \"rgba(139,92,246,0.12)\"}}\n ],\n \"label\": {\"show\": false},\n \"startAngle\": 90\n }]\n }' style=\"width:100%;height:100%;\">\n </div>\n <div class=\"absolute text-center\" style=\"top:42%;left:50%;transform:translate(-50%,-50%);\">\n <span class=\"text-base md:text-lg font-bold text-white\">7578.36</span>\n </div>\n <div class=\"absolute text-center\" style=\"bottom:4px;left:50%;transform:translateX(-50%);\">\n <span class=\"text-[9px] md:text-[10px] text-gray-500 tracking-wider\">回款金额</span>\n </div>\n </div>\n </div>\n\n <!-- Ring 3: 应收账款金额 -->\n <div class=\"glass-panel rounded-xl p-2 md:p-3 relative\">\n <div class=\"w-full relative\" style=\"height:120px;\">\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"show\": false},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"70%\", \"85%\"],\n \"center\": [\"50%\", \"45%\"],\n \"avoidLabelOverlap\": false,\n \"silent\": true,\n \"data\": [\n {\"value\": 7578.36, \"name\": \"已收\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#f59e0b\"}, {\"offset\": 1, \"color\": \"#d97706\"}]}}},\n {\"value\": 2421.64, \"name\": \"未收\", \"itemStyle\": {\"color\": \"rgba(245,158,11,0.12)\"}}\n ],\n \"label\": {\"show\": false},\n \"startAngle\": 90\n }]\n }' style=\"width:100%;height:100%;\">\n </div>\n <div class=\"absolute text-center\" style=\"top:42%;left:50%;transform:translate(-50%,-50%);\">\n <span class=\"text-base md:text-lg font-bold text-white\">7578.36</span>\n </div>\n <div class=\"absolute text-center\" style=\"bottom:4px;left:50%;transform:translateX(-50%);\">\n <span class=\"text-[9px] md:text-[10px] text-gray-500 tracking-wider\">应收账款金额</span>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Row 2: 3 Charts -->\n <div class=\"grid grid-cols-12 gap-3 md:gap-4 lg:gap-5 mb-3 md:mb-4 lg:mb-5\">\n \n <!-- Chart 1: Line Chart -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-3 md:p-4 relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n <div class=\"flex items-center gap-2 mb-2\">\n <div class=\"w-2 h-2 rounded-full bg-cyan-400\"></div>\n <span class=\"text-xs font-medium text-gray-400 tracking-wider\">月度营收增长率</span>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"rgba(7,11,36,0.9)\", \"borderColor\": \"rgba(56,152,236,0.3)\", \"textStyle\": {\"color\": \"#e2e8f0\", \"fontSize\": 11}},\n \"grid\": {\"left\": \"5%\", \"right\": \"5%\", \"top\": \"10%\", \"bottom\": \"12%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"1月\",\"2月\",\"3月\",\"4月\",\"5月\",\"6月\"], \"axisLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.12)\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.05)\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}},\n \"series\": [{\n \"type\": \"line\",\n \"data\": [2.5, 3.8, 5.2, 4.6, 7.1, 8.9],\n \"smooth\": true,\n \"symbol\": \"circle\",\n \"symbolSize\": 7,\n \"lineStyle\": {\"color\": \"#06b6d4\", \"width\": 2},\n \"areaStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"rgba(6,182,212,0.3)\"}, {\"offset\": 1, \"color\": \"rgba(6,182,212,0)\"}]}},\n \"itemStyle\": {\"color\": \"#06b6d4\", \"borderColor\": \"#070b24\", \"borderWidth\": 2}\n }]\n }' style=\"width:100%;height:150px;\">\n </div>\n </div>\n </div>\n\n <!-- Chart 2: Bar Chart -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-3 md:p-4 relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n <div class=\"flex items-center gap-2 mb-2\">\n <div class=\"w-2 h-2 rounded-full bg-purple-400\"></div>\n <span class=\"text-xs font-medium text-gray-400 tracking-wider\">各部门业绩对比</span>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"rgba(7,11,36,0.9)\", \"borderColor\": \"rgba(56,152,236,0.3)\", \"textStyle\": {\"color\": \"#e2e8f0\", \"fontSize\": 11}},\n \"grid\": {\"left\": \"8%\", \"right\": \"5%\", \"top\": \"8%\", \"bottom\": \"15%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"设计部\",\"研发部\",\"市场部\",\"运营部\",\"产品部\"], \"axisLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.12)\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9, \"rotate\": 0}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.05)\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}},\n \"series\": [{\n \"type\": \"bar\",\n \"data\": [\n {\"value\": 86, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#8b5cf6\"}, {\"offset\": 1, \"color\": \"#6d28d9\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 92, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#3898ec\"}, {\"offset\": 1, \"color\": \"#1d4ed8\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 78, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#f59e0b\"}, {\"offset\": 1, \"color\": \"#d97706\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 88, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#06b6d4\"}, {\"offset\": 1, \"color\": \"#0891b2\"}]}, \"borderRadius\": [6,6,0,0]}},\n {\"value\": 95, \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#ec4899\"}, {\"offset\": 1, \"color\": \"#db2777\"}]}, \"borderRadius\": [6,6,0,0]}}\n ],\n \"barWidth\": \"45%\",\n \"label\": {\"show\": true, \"position\": \"top\", \"color\": \"#94a3b8\", \"fontSize\": 9}\n }]\n }' style=\"width:100%;height:150px;\">\n </div>\n </div>\n </div>\n\n <!-- Chart 3: Area Chart -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-3 md:p-4 relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n <div class=\"flex items-center gap-2 mb-2\">\n <div class=\"w-2 h-2 rounded-full bg-emerald-400\"></div>\n <span class=\"text-xs font-medium text-gray-400 tracking-wider\">累计利润走势</span>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"axis\", \"backgroundColor\": \"rgba(7,11,36,0.9)\", \"borderColor\": \"rgba(56,152,236,0.3)\", \"textStyle\": {\"color\": \"#e2e8f0\", \"fontSize\": 11}},\n \"grid\": {\"left\": \"5%\", \"right\": \"5%\", \"top\": \"8%\", \"bottom\": \"12%\"},\n \"xAxis\": {\"type\": \"category\", \"data\": [\"Q1\",\"Q2\",\"Q3\",\"Q4\"], \"axisLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.12)\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}},\n \"yAxis\": {\"type\": \"value\", \"splitLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.05)\", \"type\": \"dashed\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"axisLine\": {\"show\": false}},\n \"series\": [{\n \"type\": \"line\",\n \"data\": [120, 280, 460, 780],\n \"smooth\": true,\n \"symbol\": \"diamond\",\n \"symbolSize\": 10,\n \"lineStyle\": {\"color\": \"#10b981\", \"width\": 2},\n \"areaStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 0, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"rgba(16,185,129,0.35)\"}, {\"offset\": 1, \"color\": \"rgba(16,185,129,0)\"}]}},\n \"itemStyle\": {\"color\": \"#10b981\", \"borderColor\": \"#070b24\", \"borderWidth\": 2}\n }]\n }' style=\"width:100%;height:150px;\">\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Row 3: Warning/Alert + Chart + Table/Pie -->\n <div class=\"grid grid-cols-12 gap-3 md:gap-4 lg:gap-5\">\n \n <!-- Col 1-4: Warning + Alert Circles -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-4 md:p-5 h-full flex items-center justify-center gap-6 md:gap-10 relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n \n <div class=\"status-circle warning\">\n <span class=\"text-2xl md:text-3xl font-bold text-white circle-value\" style=\"font-family:'Inter',sans-serif;\">200</span>\n <span class=\"text-xs md:text-sm font-medium text-white/80 circle-label\">警告</span>\n <div class=\"absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full animate-ping opacity-50\"></div>\n </div>\n \n <div class=\"status-circle alert\">\n <span class=\"text-2xl md:text-3xl font-bold text-white circle-value\" style=\"font-family:'Inter',sans-serif;\">200</span>\n <span class=\"text-xs md:text-sm font-medium text-white/80 circle-label\">预警</span>\n <div class=\"absolute -top-1 -right-1 w-4 h-4 bg-yellow-400 rounded-full animate-ping opacity-50\"></div>\n </div>\n \n <div class=\"absolute bottom-2 left-0 right-0 text-center\">\n <div class=\"flex items-center justify-center gap-4 text-[10px] text-gray-500\">\n <span><span class=\"inline-block w-2 h-2 bg-yellow-400 rounded-full mr-1\"></span>实时告警</span>\n <span><span class=\"inline-block w-2 h-2 bg-red-500 rounded-full mr-1\"></span>系统预警</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Col 5-8: ECharts (Scatter/Bubble) -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-3 md:p-4 relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n <div class=\"flex items-center gap-2 mb-2\">\n <div class=\"w-2 h-2 rounded-full bg-rose-400\"></div>\n <span class=\"text-xs font-medium text-gray-400 tracking-wider\">项目风险分布</span>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"item\", \"backgroundColor\": \"rgba(7,11,36,0.9)\", \"borderColor\": \"rgba(56,152,236,0.3)\", \"textStyle\": {\"color\": \"#e2e8f0\", \"fontSize\": 11}},\n \"grid\": {\"left\": \"6%\", \"right\": \"8%\", \"top\": \"8%\", \"bottom\": \"12%\"},\n \"xAxis\": {\"type\": \"value\", \"name\": \"进度\", \"nameTextStyle\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"axisLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.12)\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"splitLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.04)\"}}},\n \"yAxis\": {\"type\": \"value\", \"name\": \"风险\", \"nameTextStyle\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"axisLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.12)\"}}, \"axisLabel\": {\"color\": \"#64748b\", \"fontSize\": 9}, \"splitLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.04)\"}}},\n \"series\": [{\n \"type\": \"scatter\",\n \"symbolSize\": function(val) { return val[2] * 8; },\n \"data\": [\n [85, 20, 3], [65, 65, 5], [30, 80, 4], [55, 45, 2], [90, 15, 3],\n [45, 70, 6], [70, 35, 3], [25, 90, 5], [80, 25, 2], [40, 55, 4],\n [60, 50, 3], [75, 30, 2], [50, 60, 4], [35, 75, 5], [95, 10, 2]\n ],\n \"itemStyle\": {\n \"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 0, \"colorStops\": [{\"offset\": 0, \"color\": \"#f43f5e\"}, {\"offset\": 1, \"color\": \"#e11d48\"}]},\n \"shadowBlur\": 10,\n \"shadowColor\": \"rgba(244,63,94,0.3)\"\n }\n }]\n }' style=\"width:100%;height:160px;\">\n </div>\n </div>\n </div>\n\n <!-- Col 9-12: Table + Pie -->\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"glass-panel rounded-xl p-3 md:p-4 lg:p-5 h-full relative\">\n <div class=\"corner-decoration corner-tl\"></div>\n <div class=\"corner-decoration corner-br\"></div>\n <div class=\"grid grid-cols-2 gap-3 h-full\">\n \n <!-- Table -->\n <div class=\"flex flex-col\">\n <div class=\"flex items-center gap-2 mb-2\">\n <i class=\"fa fa-file-text text-blue-400/60 text-xs\"></i>\n <span class=\"text-[10px] font-medium text-gray-400 tracking-wider\">创新研发</span>\n </div>\n <table class=\"data-table flex-1\">\n <thead>\n <tr>\n <th>指标</th>\n <th class=\"text-right\">实际</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-cyan-400 flex-shrink-0\"></div>\n <span>发明专利</span>\n </td>\n <td class=\"text-right font-medium text-white\">62</td>\n </tr>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-purple-400 flex-shrink-0\"></div>\n <span>实用新型</span>\n </td>\n <td class=\"text-right font-medium text-white\">8</td>\n </tr>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-amber-400 flex-shrink-0\"></div>\n <span>外观设计</span>\n </td>\n <td class=\"text-right font-medium text-white\">69</td>\n </tr>\n <tr>\n <td class=\"flex items-center gap-1.5\">\n <div class=\"w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0\"></div>\n <span>技术秘密</span>\n </td>\n <td class=\"text-right font-medium text-white\">42</td>\n </tr>\n </tbody>\n </table>\n <div class=\"mt-auto pt-2\">\n <div class=\"flex items-center justify-between text-[9px] text-gray-500\">\n <span>总计</span>\n <span class=\"text-white font-semibold\">181</span>\n </div>\n <div class=\"w-full h-1 bg-gray-700/30 rounded-full mt-1 overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-cyan-500 via-purple-500 to-amber-500 rounded-full\" style=\"width:72%\"></div>\n </div>\n </div>\n </div>\n\n <!-- Pie Chart -->\n <div class=\"relative\">\n <div class=\"flex items-center gap-2 mb-2\">\n <i class=\"fa fa-pie-chart text-purple-400/60 text-xs\"></i>\n <span class=\"text-[10px] font-medium text-gray-400 tracking-wider\">占比</span>\n </div>\n <div class=\"chart\" \n data-echarts='{\n \"tooltip\": {\"trigger\": \"item\", \"backgroundColor\": \"rgba(7,11,36,0.9)\", \"borderColor\": \"rgba(56,152,236,0.3)\", \"textStyle\": {\"color\": \"#e2e8f0\", \"fontSize\": 11}},\n \"series\": [{\n \"type\": \"pie\",\n \"radius\": [\"30%\", \"70%\"],\n \"center\": [\"50%\", \"50%\"],\n \"data\": [\n {\"value\": 62, \"name\": \"发明专利\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#06b6d4\"}, {\"offset\": 1, \"color\": \"#0891b2\"}]}}},\n {\"value\": 8, \"name\": \"实用新型\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#8b5cf6\"}, {\"offset\": 1, \"color\": \"#6d28d9\"}]}}},\n {\"value\": 69, \"name\": \"外观设计\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#f59e0b\"}, {\"offset\": 1, \"color\": \"#d97706\"}]}}},\n {\"value\": 42, \"name\": \"技术秘密\", \"itemStyle\": {\"color\": {\"type\": \"linear\", \"x\": 0, \"y\": 0, \"x2\": 1, \"y2\": 1, \"colorStops\": [{\"offset\": 0, \"color\": \"#10b981\"}, {\"offset\": 1, \"color\": \"#059669\"}]}}}\n ],\n \"label\": {\"show\": true, \"color\": \"#94a3b8\", \"fontSize\": 9, \"formatter\": \"{b}\\n{d}%\"},\n \"labelLine\": {\"lineStyle\": {\"color\": \"rgba(56,152,236,0.15)\"}},\n \"emphasis\": {\"itemStyle\": {\"shadowBlur\": 10, \"shadowColor\": \"rgba(56,152,236,0.3)\"}}\n }]\n }' style=\"width:100%;height:175px;\">\n </div>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Footer -->\n <div class=\"mt-4 md:mt-5 flex items-center justify-between text-[9px] md:text-[10px] text-gray-600/60 border-t border-blue-500/5 pt-3\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fa fa-circle text-[4px] text-emerald-400\"></i>\n <span>数据实时更新于 <span class=\"text-gray-500\" id=\"updateTime\"></span></span>\n </div>\n <div class=\"flex items-center gap-3\">\n <i class=\"fa fa-shield text-gray-600/40\"></i>\n <span>潮设运营中心 · 数字化全景驾驶舱 v2.0</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<script>\ndocument.getElementById('updateTime').textContent = new Date().toLocaleString('zh-CN', { hour12: false });\n</script>"
},
"next": [
"添加数据轮播自动刷新",
"增加时间筛选控件",
"鼠标悬停卡片数据动效",
"添加视差滚动效果",
"增加全屏切换按钮"
]
}
```