From c6828bfd2165d88861b27f46b0c66d99744b896c Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Fri, 31 Oct 2025 16:56:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  19 +-
 src/components/ChartsTimeLine/index.vue | 369 ------------------------
 src/components/ZhengBian/index.vue      |  11 +
 3 files changed, 29 insertions(+), 370 deletions(-)
 delete mode 100644 src/components/ChartsTimeLine/index.vue

diff --git a/README.md b/README.md
index 028a22f..2df9f18 100644
--- a/README.md
+++ b/README.md
@@ -36,4 +36,21 @@ yarn dev
 ## 公共组件说明
 1. ESelectSingle:  普通下拉框选择器
 2. ETree:          页面左侧树结构
-3. SingleStation:  级联下拉框选择器
\ No newline at end of file
+3. SingleStation:  级联下拉框选择器
+
+
+# 公共组件趋势图说明
+1. ChartsBar
+    * seriesData:只有一个对象的时候使用
+2. ChartsBarLine
+    * seriesData:是数组的时候使用
+2. ChartsTimeBar
+	* 时间轴的趋势图(缩放echarts使用)
+	* legendData: 图例数据
+	* xAxisData: x轴数据
+	* seriesData: 图表数据
+	* textTitle: 图表标题
+	* unit: 单位
+	* echartType: 图表类型
+	* timeType: 时间类型
+	* grid: 图表网格配置
\ No newline at end of file
diff --git a/src/components/ChartsTimeLine/index.vue b/src/components/ChartsTimeLine/index.vue
deleted file mode 100644
index 75437ce..0000000
--- a/src/components/ChartsTimeLine/index.vue
+++ /dev/null
@@ -1,369 +0,0 @@
-<template>
-    <!-- <div > -->
-    <div ref="ChartsTimeBarRef" style="height:100%;width: 100%;" class="chart-container"></div>
-    <!-- </div> -->
-</template>
-<script setup>
-    import * as echarts from "echarts";
-    import dayjs from 'dayjs'
-    import { onMounted, nextTick, ref, onUnmounted } from "vue";
-    const props = defineProps({
-        legendData: {
-            type: Array,
-            default: () => []
-        },
-        xAxisData: {
-            type: Array,
-            default: () => []
-        },
-        seriesData: {
-            type: Array,
-            default: () => []
-        },
-        textTitle: {
-            type: String,
-            default: ''
-        },
-        unit: {
-            type: String,
-            default: 'mm'
-        },
-        grid: {
-            type: Object,
-            default: () => {
-                return {
-                    left: "5%",
-                    right: "5%",
-                    bottom: "16%",
-                    top: "16%",
-                    containLabel: true,
-                }
-            }
-        }
-    })
-    const ChartsTimeBarRef = ref(null);
-    let echartsBar = null;
-    let resizeObserver = null;
-    // 监听props变化，确保数据更新后重新初始化图表
-    watch([() => props.legendData, () => props.xAxisData, () => props.seriesData], () => {
-        if (echartsBar) {
-            updateChart();
-        }
-    }, { deep: true });
-    onMounted(() => {
-        console.log(props.xAxisData, '======xAxisData')
-        initEcharts();
-        window.addEventListener('resize', handleResize);
-        // 监听容器本身尺寸变化
-        if (ChartsTimeBarRef.value) {
-            resizeObserver = new ResizeObserver(handleResize);
-            resizeObserver.observe(ChartsTimeBarRef.value);
-        }
-    });
-
-    onUnmounted(() => {
-        window.removeEventListener('resize', handleResize);
-        if (resizeObserver && ChartsTimeBarRef.value) {
-            resizeObserver.unobserve(ChartsTimeBarRef.value);
-        }
-        if (echartsBar) {
-            echartsBar.dispose();
-        }
-    });
-    const echartsLoading = ref(true);
-    const initEcharts = () => {
-        nextTick(() => {
-            if (ChartsTimeBarRef.value) {
-                echartsBar = echarts.init(ChartsTimeBarRef.value, "macarons");
-                let option = getChartOption();
-                echartsBar.setOption(option);
-
-                // 确保图表尺寸适应容器
-                const resizeChart = () => {
-                    if (echartsBar && ChartsTimeBarRef.value) {
-                        echartsBar.resize({
-                            width: ChartsTimeBarRef.value.clientWidth,
-                            height: ChartsTimeBarRef.value.clientHeight
-                        });
-                    }
-                };
-
-                // 初始化时调整一次大小
-                resizeChart();
-            }
-        });
-    };
-    const updateChart = () => {
-        nextTick(() => {
-            if (echartsBar) {
-                let option = getChartOption();
-                echartsBar.setOption(option, true); // 使用notMerge:true来完全替换旧选项
-                resizeChart();
-            }
-        });
-    };
-
-    const resizeChart = () => {
-        if (echartsBar && ChartsTimeBarRef.value) {
-            echartsBar.resize({
-                width: ChartsTimeBarRef.value.clientWidth,
-                height: ChartsTimeBarRef.value.clientHeight
-            });
-        }
-    };
-    const handleResize = () => {
-        if (echartsBar && ChartsTimeBarRef.value) {
-            // 添加防抖机制，避免频繁触发
-            clearTimeout(window.resizeTimer);
-            window.resizeTimer = setTimeout(() => {
-                echartsBar.resize({
-                    width: ChartsTimeBarRef.value.clientWidth,
-                    height: ChartsTimeBarRef.value.clientHeight,
-                    animation: {
-                        duration: 300
-                    }
-                });
-            }, 100);
-        }
-    };
-
-
-    const getChartOption = () => {
-        let allData = [];
-        props.seriesData.forEach(series => {
-            if (series.data) {
-                series.data.forEach(item => {
-                    // 根据数据结构获取数值，可能是 [time, value] 或 {tm: time, value: value} 格式
-                    const value = Array.isArray(item) ? item[1] : (item.value !== undefined ? item.value : item);
-                    if (value !== undefined && value !== null && !isNaN(value)) {
-                        allData.push(Number(value));
-                    }
-                });
-            }
-        });
-
-        // 计算y轴范围
-        let yAxisMin = 0;
-        let yAxisMax = 100;
-
-        if (allData.length > 0) {
-            const minVal = Math.min(...allData);
-            const maxVal = Math.max(...allData);
-
-            // 添加一些边距，使图表更美观
-            const range = maxVal - minVal;
-            const margin = range > 0 ? range * 0.1 : 1;
-
-            yAxisMin = Math.floor((minVal - margin) * 100) / 100; // 保留两位小数
-            yAxisMax = Math.ceil((maxVal + margin) * 100) / 100;  // 保留两位小数
-
-            // 如果数据值都很小，确保最小值不为负数（可根据实际需求调整）
-            if (minVal >= 0 && yAxisMin < 0) {
-                yAxisMin = 0;
-            }
-        }
-        const series = props.seriesData.map((item, index) => {
-            const colors = [
-                ["#fccb05", "#f5804d"],
-                ["#8bd46e", "#09bcb7"],
-                ["#248ff7", "#6851f1"]
-            ];
-            const color = colors[index % colors.length];
-
-            return {
-                name: props.legendData[index],
-                type: "line",
-                barWidth: item.data.length > 100 ? '15%' : "20",
-                showSymbol: false,
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: color[0] },
-                            { offset: 1, color: color[1] }
-                        ]),
-                        barBorderRadius: 12,
-                    },
-                },
-                data: item.data.map(val => val[1]),
-            };
-        });
-        let option = {
-            // backgroundColor: "#323a5e",
-            title: {
-                text: props.textTitle,
-                textStyle: {
-                    align: "center",
-                    color: "#000",
-                    fontSize: 20,
-                },
-                top: "3%",
-                left: "50%",
-            },
-            tooltip: {
-                trigger: "axis",
-                axisPointer: {
-                    // 坐标轴指示器，坐标轴触发有效
-                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-                },
-            },
-            grid: props.grid,
-            legend: {
-                data: props.legendData,
-                right: 10,
-                top: 12,
-                textStyle: {
-                    color: "#000",
-                },
-                itemWidth: 12,
-                itemHeight: 10,
-                // itemGap: 35
-            },
-            xAxis: {
-                type: "category",
-                data: props.xAxisData,
-                axisLine: {
-                    lineStyle: {
-                        color: "#ccc",
-                    },
-                },
-
-                axisLabel: {
-                    textStyle: {
-                        fontFamily: "Microsoft YaHei",
-                    },
-                    showMinLabel: true,  // 强制显示最小值标签
-                    showMaxLabel: true,  // 强制显示最大值标签
-                    formatter: function (value) {
-                        let date = dayjs(value)
-                        let yearMonthDay = date.format('YYYY-MM-DD')
-                        let hourMinute = date.format('HH:mm')
-                        let result = `{a|${hourMinute}}\n{b|${yearMonthDay}}`;
-                        if (props.timeType == 'day') {
-                            result = `{b|${yearMonthDay}}`;
-                        }
-                        return result
-                    },
-                    rich: {
-                        a: {
-                            fontSize: 12,
-                            color: '#000',
-                            padding: [0, 0, 5, 0] // 上右下左的内边距，这里给上方小时分钟添加一点底部间距
-                        },
-                        b: {
-                            fontSize: 12,
-                            color: '#000'
-                        }
-                    }
-                },
-            },
-
-            yAxis: {
-                type: "value",
-                min: yAxisMin,
-                max: yAxisMax,
-
-                name: 'mm',
-                nameLocation: 'middle',
-
-                nameTextStyle: {//y轴上方单位的颜色
-                    color: '#464b50'
-                },
-                nameGap: 50,
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: "#ccc",
-                    },
-                },
-
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        color: "#ccc",
-                    },
-                },
-                axisLabel: {
-                    textStyle: {
-                        color: "#000000",
-                    },
-                    // 添加formatter属性，保留两位小数
-                    formatter: function (value) {
-                        return value.toFixed(2);
-                    }
-                },
-            },
-            dataZoom: [
-                {
-                    show: true,
-                    // height: 15,
-                    xAxisIndex: [0],
-                    bottom: "8%",
-                    start: 0,
-                    end: 100,
-                    handleIcon:
-                        "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
-                    handleSize: "110%",
-                    handleStyle: {
-                        color: "#d3dee5",
-                    },
-                    textStyle: {
-                        color: "#000",
-                    },
-                    borderColor: "#90979c",
-                },
-                {
-                    type: "inside",
-                    show: true,
-                    // height: 15,
-                    start: 1,
-                    end: 35,
-                },
-                // {
-                //     type: 'inside'
-                // },
-                // {
-                //     type: 'slider'
-                // }
-            ],
-            series: series,
-        };
-
-        return option
-        // var app = {
-        //     currentIndex: -1,
-        // };
-        // setInterval(function () {
-        //     var dataLen = option.series[0].data.length;
-
-        //     // 取消之前高亮的图形
-        //     myChart.dispatchAction({
-        //         type: "downplay",
-        //         seriesIndex: 0,
-        //         dataIndex: app.currentIndex,
-        //     });
-        //     app.currentIndex = (app.currentIndex + 1) % dataLen;
-        //     //console.log(app.currentIndex);
-        //     // 高亮当前图形
-        //     myChart.dispatchAction({
-        //         type: "highlight",
-        //         seriesIndex: 0,
-        //         dataIndex: app.currentIndex,
-        //     });
-        //     // 显示 tooltip
-        //     myChart.dispatchAction({
-        //         type: "showTip",
-        //         seriesIndex: 0,
-        //         dataIndex: app.currentIndex,
-        //     });
-        // }, 1000);
-
-    }
-</script>
-<style scoped>
-    .chart-container {
-        width: 100%;
-        height: 100%;
-        min-height: 300px;
-        position: relative;
-    }
-</style>
\ No newline at end of file
diff --git a/src/components/ZhengBian/index.vue b/src/components/ZhengBian/index.vue
index 9c9dedb..4e1de30 100644
--- a/src/components/ZhengBian/index.vue
+++ b/src/components/ZhengBian/index.vue
@@ -22,6 +22,12 @@
 					<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
 					<el-switch class="ml20" v-model="staticType" @change='changeStaticType' size="large" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #1890FF" active-text="逐日显示" active-value="1" inactive-value="0" inactive-text="逐时显示" />
 				</el-form-item>
+				<el-form-item v-if="staticType==1">
+					<div style="font-size: 12px;color:#ccc">
+						逐日天表统计的是当日早八点到次日早八点
+					</div>
+				</el-form-item>
+
 				<br />
 				<el-form-item label="对比站点">
 					<el-select-v2 collapse-tags multiple filterable clearable v-model="compareStation" @change="changeCompareStnmIds" :options="stationOptions" :props="defaultProps" placeholder="请选择对比测站名称" style="width: 360px" />
@@ -91,6 +97,11 @@
 						<div class="el-upload__text">
 							将文件拖到此处，或<em>点击上传</em>
 						</div>
+						<template #tip>
+							<div class="el-upload__tip ">
+								模板就是预处理数据表格导出的文件。
+							</div>
+						</template>
 					</el-upload>
 				</div>
 			</el-form>