首次提交

2026-07-13 12:06:16 +08:00
commit e3c810b1a6
1690 changed files with 228324 additions and 0 deletions
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>碳汇趋势图</title>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { background: transparent; }
+        #chart { width: 100%; height: 160px; }
+    </style>
+</head>
+<body>
+    <div id="chart"></div>
+    <script>
+        var chart = echarts.init(document.getElementById('chart'));
+        var months = ['1月', '2月', '3月', '4月', '5月', '6月'];
+        var data = [0];
+
+        var option = {
+            tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'rgba(13,40,71,0.9)',
+                borderColor: '#00FF88',
+                borderWidth: 1,
+                textStyle: { color: '#FFFFFF', fontSize: 12 },
+                formatter: function(p) {
+                    return '<div style="font-weight:bold">' + p[0].axisValue + '</div><div style="color:#00FF88">' + p[0].value.toFixed(2) + ' kg</div>';
+                }
+            },
+            grid: { left: 35, right: 15, top: 15, bottom: 25 },
+            xAxis: {
+                type: 'category',
+                data: months,
+                axisLabel: { fontSize: 11, color: 'rgba(255,255,255,0.7)' },
+                axisLine: { lineStyle: { color: 'rgba(22,119,255,0.4)' } },
+                axisTick: { show: false }
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: { fontSize: 11, color: 'rgba(255,255,255,0.7)', formatter: '{value}' },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                splitLine: { lineStyle: { color: 'rgba(22,119,255,0.2)', type: 'dashed' } }
+            },
+            series: [{
+                type: 'line',
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 5,
+                lineStyle: { color: '#00FF88', width: 2 },
+                itemStyle: { color: '#00FF88' },
+                areaStyle: {
+                    color: {
+                        type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+                        colorStops: [{ offset: 0, color: 'rgba(0,255,136,0.35)' }, { offset: 1, color: 'rgba(0,255,136,0.05)' }]
+                    }
+                },
+                data: data
+            }]
+        };
+        chart.setOption(option);
+
+        function updateData(arr) {
+            data = arr;
+            option.series[0].data = data;
+            chart.setOption(option);
+        }
+    </script>
+</body>
+</html>
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>contrast chart</title>
+    <style>
+        html, body {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+          background: transparent;
+          overflow: hidden;
+        }
+        #chart {
+          width: 100%;
+          height: 100%;
+          background: transparent;
+        }
+    </style>
+</head>
+<body>
+<div id="chart"></div>
+
+<!-- 你项目里若是本地 echarts，请改成你的实际路径 -->
+<!-- 例如：<script src="./echarts.min.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+
+<script>
+    let chart = null;
+    let currentColor = '#00FF88';
+    let currentData = [];
+    let currentUnit = '';
+    let currentName = '';
+    let xLabels = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
+
+    function getOption(data, unit, name, color) {
+      const max = Math.max.apply(null, data);
+      const min = Math.min.apply(null, data);
+
+      return {
+        backgroundColor: 'transparent',
+        animation: true,
+        grid: {
+          left: 18,
+          right: 12,
+          top: 24,
+          bottom: 24,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(10,22,40,0.9)',
+          borderColor: 'rgba(22,119,255,0.5)',
+          borderWidth: 1,
+          textStyle: { color: '#fff', fontSize: 11 },
+          formatter: function (params) {
+            const p = params[0];
+            return `${p.axisValue}<br/>${name}: ${p.value}${unit ? ' ' + unit : ''}`;
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xLabels,
+          boundaryGap: false,
+          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.25)' } },
+          axisTick: { show: false },
+          axisLabel: {
+            color: 'rgba(255,255,255,0.65)',
+            fontSize: 10
+          },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            color: 'rgba(255,255,255,0.65)',
+            fontSize: 10
+          },
+          splitLine: {
+            lineStyle: { color: 'rgba(255,255,255,0.12)' }
+          }
+        },
+        series: [
+          {
+            name: name,
+            type: 'line',
+            data: data,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            showSymbol: true,
+            lineStyle: {
+              width: 2,
+              color: color
+            },
+            itemStyle: {
+              color: color,
+              borderColor: '#ffffff',
+              borderWidth: 1
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: hexToRgba(color, 0.35) },
+                  { offset: 1, color: hexToRgba(color, 0.02) }
+                ]
+              }
+            },
+            markPoint: {
+              symbolSize: 30,
+              label: { color: '#fff', fontSize: 9 },
+              itemStyle: { color: color },
+              data: [
+                { type: 'max', name: '最大值' },
+                { type: 'min', name: '最小值' }
+              ]
+            }
+          }
+        ]
+      };
+    }
+
+    function hexToRgba(hex, alpha) {
+      const c = hex.replace('#', '');
+      if (c.length !== 6) return `rgba(0,255,136,${alpha})`;
+      const r = parseInt(c.substring(0, 2), 16);
+      const g = parseInt(c.substring(2, 4), 16);
+      const b = parseInt(c.substring(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+
+    function ensureChart() {
+      const dom = document.getElementById('chart');
+      if (!chart) {
+        chart = echarts.init(dom, null, { renderer: 'canvas' });
+      }
+    }
+
+    // 首次初始化（对应 TS: onPageEnd -> initChart）
+    function initChart(data, unit, name) {
+      ensureChart();
+      currentData = Array.isArray(data) ? data : [];
+      currentUnit = unit || '';
+      currentName = name || '';
+      chart.setOption(getOption(currentData, currentUnit, currentName, currentColor), true);
+    }
+
+    // 更新数据（对应 TS: updateChart -> updateData）
+    function updateData(data, unit, name) {
+      ensureChart();
+      currentData = Array.isArray(data) ? data : currentData;
+      currentUnit = unit !== undefined ? unit : currentUnit;
+      currentName = name !== undefined ? name : currentName;
+      chart.setOption(getOption(currentData, currentUnit, currentName, currentColor), true);
+    }
+
+    // 更新颜色
+    function setColor(color) {
+      currentColor = color || currentColor;
+      if (!chart) return;
+      chart.setOption(getOption(currentData, currentUnit, currentName, currentColor), true);
+    }
+
+    window.addEventListener('resize', function () {
+      if (chart) chart.resize();
+    });
+
+    // 暴露给 ArkTS 调用
+    window.initChart = initChart;
+    window.updateData = updateData;
+    window.setColor = setColor;
+</script>
+</body>
+</html>
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>水质实时曲线</title>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: transparent;
+            font-family: 'Microsoft YaHei', sans-serif;
+            padding: 8px;
+        }
+        #chart {
+            width: 100%;
+            height: 200px;
+        }
+    </style>
+</head>
+<body>
+    <div id="chart"></div>
+    <script>
+        var chartDom = document.getElementById('chart');
+        var myChart = echarts.init(chartDom);
+
+        // 初始化数据存储
+        var chlorineData = [];
+        var ammoniaData = [];
+        var timeData = [];
+
+        // 初始化20个空数据点
+        for(var i = 19; i >= 0; i--) {
+            timeData.push(formatTime(new Date(Date.now() - i * 5000)));
+            chlorineData.push(0);
+            ammoniaData.push(0);
+        }
+
+        // 时间格式化函数
+        function formatTime(date) {
+            var h = date.getHours();
+            var m = date.getMinutes();
+            var s = date.getSeconds();
+            return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
+        }
+
+        // ECharts配置
+        var option = {
+            tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'rgba(255,255,255,0.95)',
+                borderColor: '#E5E5E5',
+                borderWidth: 1,
+                textStyle: {
+                    color: '#333',
+                    fontSize: 13
+                },
+                formatter: function(params) {
+                    var result = '<div style="font-weight:bold;margin-bottom:4px">' + params[0].axisValue + '</div>';
+                    params.forEach(function(item) {
+                        var color = item.seriesName === '余氯' ? '#FA8C16' : '#FF4D4F';
+                        result += '<div style="display:flex;align-items:center;margin:2px 0">';
+                        result += '<span style="display:inline-block;width:10px;height:10px;background:' + color + ';border-radius:50%;margin-right:6px"></span>';
+                        result += '<span style="flex:1">' + item.seriesName + '</span>';
+                        result += '<span style="font-weight:bold;color:' + color + '">' + item.value.toFixed(3) + ' mg/L</span>';
+                        result += '</div>';
+                    });
+                    return result;
+                }
+            },
+            legend: {
+                data: ['余氯', '氨氮'],
+                top: 5,
+                right: 10,
+                textStyle: {
+                    fontSize: 12,
+                    color: '#666'
+                },
+                itemWidth: 16,
+                itemHeight: 8,
+                itemGap: 15
+            },
+            grid: {
+                left: 45,
+                right: 15,
+                top: 30,
+                bottom: 30
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: timeData,
+                axisLabel: {
+                    fontSize: 10,
+                    color: '#999',
+                    interval: 3,
+                    rotate: 0
+                },
+                axisLine: {
+                    lineStyle: { color: '#E5E5E5', width: 1 }
+                },
+                axisTick: { show: false }
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 1,
+                interval: 0.2,
+                axisLabel: {
+                    fontSize: 10,
+                    color: '#999',
+                    formatter: '{value}'
+                },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                splitLine: {
+                    lineStyle: {
+                        color: '#F0F0F0',
+                        type: 'dashed'
+                    }
+                }
+            },
+            series: [
+                {
+                    name: '余氯',
+                    type: 'line',
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 4,
+                    showSymbol: false,
+                    lineStyle: {
+                        color: '#FA8C16',
+                        width: 2.5
+                    },
+                    itemStyle: { color: '#FA8C16' },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1,
+                            colorStops: [
+                                { offset: 0, color: 'rgba(250,140,22,0.3)' },
+                                { offset: 0.5, color: 'rgba(250,140,22,0.15)' },
+                                { offset: 1, color: 'rgba(250,140,22,0.05)' }
+                            ]
+                        }
+                    },
+                    data: chlorineData
+                },
+                {
+                    name: '氨氮',
+                    type: 'line',
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 4,
+                    showSymbol: false,
+                    lineStyle: {
+                        color: '#FF4D4F',
+                        width: 2.5
+                    },
+                    itemStyle: { color: '#FF4D4F' },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1,
+                            colorStops: [
+                                { offset: 0, color: 'rgba(255,77,79,0.3)' },
+                                { offset: 0.5, color: 'rgba(255,77,79,0.15)' },
+                                { offset: 1, color: 'rgba(255,77,79,0.05)' }
+                            ]
+                        }
+                    },
+                    data: ammoniaData
+                }
+            ]
+        };
+
+        myChart.setOption(option);
+
+        // 更新数据函数 - 从HarmonyOS调用
+        function updateData(chlorine, ammonia) {
+            var now = formatTime(new Date());
+
+            // 添加新数据
+            timeData.push(now);
+            chlorineData.push(parseFloat(chlorine));
+            ammoniaData.push(parseFloat(ammonia));
+
+            // 保持最多20个数据点
+            if(timeData.length > 20) {
+                timeData.shift();
+                chlorineData.shift();
+                ammoniaData.shift();
+            }
+
+            // 更新图表
+            myChart.setOption({
+                xAxis: { data: timeData },
+                series: [
+                    { data: chlorineData },
+                    { data: ammoniaData }
+                ]
+            });
+        }
+
+        // 清空数据函数
+        function clearData() {
+            timeData = [];
+            chlorineData = [];
+            ammoniaData = [];
+            for(var i = 19; i >= 0; i--) {
+                timeData.push(formatTime(new Date(Date.now() - i * 5000)));
+                chlorineData.push(0);
+                ammoniaData.push(0);
+            }
+            myChart.setOption({
+                xAxis: { data: timeData },
+                series: [
+                    { data: chlorineData },
+                    { data: ammoniaData }
+                ]
+            });
+        }
+
+        // 响应窗口大小变化
+        window.addEventListener('resize', function() {
+            myChart.resize();
+        });
+    </script>
+</body>
+</html>