feat: 实现供水运营专题大屏BI可视化

- 新增OperationDashboard.vue全屏大屏组件 - 添加6个核心KPI指标卡片: 进水总量/出水总量/产销差率/营收额/平均水质/报警次数 - 实现6个ECharts图表: 供水趋势/水质分布/报警统计/管网空间/设备状态/营收分析 - 创建静态HTML版本operation-dashboard.html，使用CDN加载Vue3/ECharts/Element Plus - 更新路由配置，添加/operation路径支持 - 修复nextTick导入问题，优化build脚本 🚧 开发者: bot_dev1 📝 任务: #38 [BI] 运营仪表盘 + 供水专题大屏
2026-06-15 09:06:11 +08:00
parent 37bcc78eee
commit 85df71fc28
17426 changed files with 4091508 additions and 47 deletions
@@ -0,0 +1,93 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link href="https://fonts.googleapis.com/css?family=Lobster+Two:700i" rel="stylesheet">
+
+        <script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
+        <script src='../dist/echarts-liquidfill.js'></script>
+    </head>
+    <body>
+        <style>
+            html, body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                background: #F1F7FF;
+            }
+
+            #main {
+                padding: 20px;
+            }
+
+            h1 {
+                margin: 20px;
+                font-size: 20px;
+                font-weight: bold;
+                text-align: center;
+                color: #D94854;
+            }
+
+            .chart {
+                width: 80%;
+                margin: 20px auto;
+                height: 300px;
+                border: 1px solid #D94854;
+            }
+
+            p {
+                text-align: center;
+            }
+        </style>
+        <h1>ECharts LiquidFill Example</h1>
+        <p>This is an example showing liquidFill chart that fills the container.</p>
+        <div id='main'>
+            <div class="chart"></div>
+            <div class="chart"></div>
+        </div>
+        <script>
+            var bgColor = '#E3F7FF';
+            var containers = document.getElementsByClassName('chart');
+            var options = [{
+                series: [{
+                    type: 'liquidFill',
+                    data: [0.6, 0.5, 0.4, 0.3],
+                    outline: {
+                        show: false
+                    },
+                    shape: 'container'
+                }]
+            }, {
+                series: [{
+                    type: 'liquidFill',
+                    data: [0.6, 0.5, 0.4, 0.3],
+                    amplitude: '10%',
+                    waveLength: '200%',
+                    shape: 'container'
+                }]
+            }];
+
+            var charts = [];
+            for (var i = 0; i < options.length; ++i) {
+                var chart = echarts.init(containers[i]);
+                chart.setOption(options[i]);
+                charts.push(chart);
+            }
+
+            window.onresize = function () {
+                for (var i = 0; i < charts.length; ++i) {
+                    charts[i].resize();
+                }
+            };
+        </script>
+
+        <script>
+            var _hmt = _hmt || [];
+            (function() {
+            var hm = document.createElement('script');
+            hm.src = '//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(hm, s);
+            })();
+        </script>
+    </body>
+</html>