From bb32b2e1ba53569c5629944eb6e7ec5a7ccd3366 Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Thu, 6 Nov 2025 15:48:14 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=9C=A8=E7=BA=BF=E6=95=B4?=
 =?UTF-8?q?=E7=BC=96-=E6=B0=B4=E4=BD=8D=E7=9A=84=E9=80=90=E6=97=A5?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChartsTimeLine/index.vue | 367 ++++++++++++++++++++++++
 src/components/ZhengBian/index.vue      |  62 ++--
 2 files changed, 411 insertions(+), 18 deletions(-)
 create mode 100644 src/components/ChartsTimeLine/index.vue

diff --git a/src/components/ChartsTimeLine/index.vue b/src/components/ChartsTimeLine/index.vue
new file mode 100644
index 0000000..de4f515
--- /dev/null
+++ b/src/components/ChartsTimeLine/index.vue
@@ -0,0 +1,367 @@
+<template>
+    <div ref="ChartsBarLineRef" style="height:100%;width: 100%;" class="chart-container"></div>
+</template>
+
+<script setup>
+    import * as echarts from "echarts";
+    import dayjs from 'dayjs';
+    import { onMounted, nextTick, ref, onUnmounted, watch } from "vue";
+
+    const props = defineProps({
+        legendData: {
+            type: Array,
+            default: () => []
+        },
+        xAxisData: {
+            type: Array,
+            default: () => []
+        },
+        seriesData: {
+            type: Array,
+            default: () => []
+        },
+        baseOptionData: {
+            type: Array,
+            default: () => []
+        },
+        textTitle: {
+            type: String,
+            default: ''
+        },
+        fixed: {
+            type: Number,
+            default: 2
+        },
+        unit: {
+            type: String,
+            default: 'mm'
+        },
+        echartType: {
+            type: String,
+            default: 'line'
+        },
+        grid: {
+            type: Object,
+            default: () => {
+                return {
+                    left: "5%",
+                    right: "5%",
+                    bottom: "20%",
+                    top: "16%",
+                    containLabel: true,
+                }
+            }
+        }
+    });
+
+    let ChartsBarLineRef = ref(null);
+    let echartsBar = null;
+    let resizeObserver = null;
+
+    // 监听props变化，确保数据更新后重新初始化图表
+    watch([() => props.legendData, () => props.xAxisData, () => props.seriesData], () => {
+        if (echartsBar) {
+            updateChart();
+        }
+    }, { deep: true });
+
+    onMounted(() => {
+        initEcharts();
+        window.addEventListener('resize', handleResize);
+        // 监听容器本身尺寸变化
+        if (ChartsBarLineRef.value) {
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(ChartsBarLineRef.value);
+        }
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', handleResize);
+        if (resizeObserver && ChartsBarLineRef.value) {
+            resizeObserver.unobserve(ChartsBarLineRef.value);
+        }
+        if (echartsBar) {
+            echartsBar.dispose();
+        }
+    });
+
+    const echartsLoading = ref(true);
+
+    const initEcharts = () => {
+        nextTick(() => {
+            if (ChartsBarLineRef.value) {
+                echartsBar = echarts.init(ChartsBarLineRef.value, "macarons");
+                let option = getChartOption();
+                echartsBar.setOption(option);
+
+                // 确保图表尺寸适应容器
+                const resizeChart = () => {
+                    if (echartsBar && ChartsBarLineRef.value) {
+                        echartsBar.resize({
+                            width: ChartsBarLineRef.value.clientWidth,
+                            height: ChartsBarLineRef.value.clientHeight
+                        });
+                    }
+                };
+
+                // 初始化时调整一次大小
+                resizeChart();
+            }
+        });
+    };
+
+    const updateChart = () => {
+        nextTick(() => {
+            if (echartsBar) {
+                let option = getChartOption();
+                echartsBar.setOption(option, true); // 使用notMerge:true来完全替换旧选项
+                resizeChart();
+            }
+        });
+    };
+
+    const resizeChart = () => {
+        if (echartsBar && ChartsBarLineRef.value) {
+            echartsBar.resize({
+                width: ChartsBarLineRef.value.clientWidth,
+                height: ChartsBarLineRef.value.clientHeight
+            });
+        }
+    };
+
+    const handleResize = () => {
+        if (echartsBar && ChartsBarLineRef.value) {
+            // 添加防抖机制，避免频繁触发
+            clearTimeout(window.resizeTimer);
+            window.resizeTimer = setTimeout(() => {
+                echartsBar.resize({
+                    width: ChartsBarLineRef.value.clientWidth,
+                    height: ChartsBarLineRef.value.clientHeight,
+                    animation: {
+                        duration: 300
+                    }
+                });
+            }, 100);
+        }
+    };
+
+    // 使用 dayjs 格式化时间轴标签
+    const formatTimelineLabel = (s) => {
+        return dayjs(s).format('MM-DD');
+    };
+
+    // 使用 dayjs 格式化 X 轴标签
+    const formatXAxisLabel = (value) => {
+        return dayjs(value).format('HH:mm');
+    };
+
+    // 使用 dayjs 格式化 tooltip 中的时间
+    const formatTooltipDate = (dateValue) => {
+        return dayjs(dateValue).format('YYYY-MM-DD HH:mm');
+    };
+
+    // 使用 dayjs 格式化 tooltip 中的数据时间
+    const formatTooltipDataDate = (dateValue) => {
+        const date = dayjs(dateValue);
+        return `${date.format('YYYY-MM-DD')} ${date.format('HH:mm')}`;
+    };
+
+    const getChartOption = () => {
+        let xAxisType = 'time';
+        let yAxisBoundaryGap = ['5%', '5%'];
+        if (props.echartType == 'bar') {
+            xAxisType = 'category';
+            yAxisBoundaryGap = [0, '5%'];
+        }
+
+        // 颜色配置提取为常量
+        const CHART_COLORS = [
+            ["#FA8072", "#B22222"],
+            ["#0fec7d", "#04793e"],
+            ["#ab36fc", "#7705a4"],
+            ["#ffbd89", "#8a5c08"],
+            ["#CD9B1D", "#8B6914"],
+            ["#ff7f50", "#a93f07"],
+            ["#EE1289", "#8B0A50"],
+            ["#ee9c9c", "#755252"],
+            ["#06e8d6", "#078075"],
+            ["#de79c2", "#cd5c5c"],
+            ["#00F5FF", "#6b8e23"],
+            ["#f50000", "#590404"],
+            ["#00CD66", "#3cb371"],
+            ["#c400fa", "#48005d"],
+            ["#eca86c", "#5e4310"],
+            ["#bebe0f", "#8B8B00"]
+        ];
+
+        let optionsData = props.baseOptionData.map((base, idx) => ({
+            series: props.seriesData.map((item, index) => {
+                const color = CHART_COLORS[index % CHART_COLORS.length];
+                return {
+                    name: props.legendData[index],
+                    type: 'line',
+                    symbolSize: 0,
+                    smooth: false,
+                    lineStyle: {
+                        width: 2,
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: color[0] },
+                            { offset: 1, color: color[1] }
+                        ])
+                    },
+                    itemStyle: {
+                        opacity: 0
+                    },
+                    markPoint: {
+                        data: [
+                            { type: 'max', name: '最高值', label: { formatter: '{c}' } },
+                            { type: 'min', name: '最低值', label: { formatter: '{c}' } }
+                        ],
+                        itemStyle: {
+                            color: color[0]
+                        },
+                        label: {
+                            color: '#fff',
+                        }
+                    },
+                    data: item[idx]
+                };
+            })
+        }));
+        console.log(optionsData, 'optionsData')
+        let option = {
+            baseOption: {
+                color: CHART_COLORS,
+                timeline: {
+                    axisType: 'category',
+                    autoPlay: false,
+                    playInterval: 2000,
+                    data: props.baseOptionData,
+                    label: {
+                        formatter: formatTimelineLabel
+                    },
+                    lineStyle: {
+                        color: "#464b50"
+                    },
+                    controlStyle: {
+                        color: "#464b50",
+                        borderColor: "#464b50"
+                    },
+                    bottom:'10%'
+                },
+                title: {
+                    text: props.textTitle,
+                    x: 'center',
+                    textStyle: {
+                        color: '#464b50',
+                        fontSize: 16
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                        shadowStyle: {
+                            color: "rgba(133,131,131,0.3)"
+                        }
+                    },
+                    backgroundColor: 'rgba(255,255,255,1)',
+                    padding: [5, 10],
+                    textStyle: {
+                        color: '#7588E4',
+                        align: 'left'
+                    },
+                    extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)',
+                    formatter: function (params) {
+                        const dateValue = params[0].data[0];
+                        const formattedDate = formatTooltipDataDate(dateValue);
+                        let text = formattedDate + '<br/>';
+                        for (let i = 0; i < params.length; i++) {
+                            text += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`
+                            text += params[i].seriesName + " : " + params[i].data[1] + '<br/>';
+                        }
+                        return text;
+                    }
+                },
+                legend: {
+                    data: props.legendData,
+                    right: 10,
+                    top: 20,
+                    textStyle: {
+                        color: "#333"
+                    },
+                    itemWidth: 15,
+                    itemHeight: 8,
+                },
+                grid: props.grid,
+                toolbox: {
+                    show: true,
+                    feature: {
+                        mark: { show: true },
+                        restore: { iconStyle: { borderColor: '#000' } },
+                        saveAsImage: { iconStyle: { borderColor: '#000' } }
+                    },
+                    y: 'center',
+                    orient: 'vertical'
+                },
+                xAxis: [
+                    {
+                        type: 'time',
+                        boundaryGap: true,
+                        axisLabel: {
+                            formatter: formatXAxisLabel,
+                            textStyle: {
+                                color: '#606e7a'
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#b3b6b9'
+                            }
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        axisLabel: {
+                            textStyle: {
+                                color: "#606e7a",
+                            },
+                            formatter: function (value, index) {
+                                return value.toFixed(props.fixed);
+                            }
+                        },
+                        name: props.unit,
+                        nameLocation: 'middle',
+                        nameGap: 50,
+                        nameTextStyle: {
+                            color: '#464b50'
+                        },
+                        scale: true,
+                        boundaryGap: ['5%', '5%'],
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#b3b6b9'
+                            }
+                        }
+                    }
+                ],
+                series: []
+            },
+            options: optionsData
+        };
+
+        return option;
+    };
+</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 d7e5f85..3ac6c08 100644
--- a/src/components/ZhengBian/index.vue
+++ b/src/components/ZhengBian/index.vue
@@ -68,7 +68,8 @@
 			</pane>
 			<pane :size="100 - firstSize">
 				<div v-table-height='{bottom:0}' style="width:100%;">
-					<TimeBarChart v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" />
+					<TimeBarChart v-if="stationType !== 'A' && staticType == '1'" v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :baseOptionData='baseOptionData' :key="`${staticType}-${props.stationType}`"  :fixed="fixed"/>
+					<DataZoomChart v-else v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" :key="`${staticType}-${props.stationType}`" />
 				</div>
 			</pane>
 		</splitpanes>
@@ -121,7 +122,8 @@
 		Pane
 	} from 'splitpanes'
 	import 'splitpanes/dist/splitpanes.css'
-	import TimeBarChart from '@/components/ChartsDataZoom/index.vue'
+	import DataZoomChart from '@/components/ChartsDataZoom/index.vue'
+	import TimeBarChart from '@/components/ChartsTimeLine/index.vue'
 	import ESelectSingle from '@/components/ESelectSingle/index.vue'
 	import { getToken } from "@/utils/auth";
 	import useAppStore from '@/store/modules/app'
@@ -180,7 +182,6 @@
 		return options;
 	});
 
-
 	const textTitle = computed(() => {
 		switch (props.stationType) {
 			case 'A':
@@ -509,8 +510,13 @@
 	const legendData = ref([])
 	const xAxisData = ref([])
 	const seriesData = ref([])
+	const baseOptionData = ref([])
 	const echartsLoading = ref(false)
 	const getEchartsData = async () => {
+		legendData.value = []
+		seriesData.value = []
+		baseOptionData.value = []
+		xAxisData.value = []
 		echartsLoading.value = true
 		let baseUrl = '/chartdata'
 		if (staticType.value == '1' && props.stationType != 'A') {
@@ -521,22 +527,34 @@
 			let res = await proxy.axiosPost2(url, queryParams);
 			if (res.code === 0) {
 				legendData.value = res.data.legend
-				// 提取每个series中data的第一个元素并格式化时间
-				if (res.data.series && res.data.series.length > 0) {
-					// 假设第一个series的data包含完整的时间点
-					xAxisData.value = res.data.series[0].data.map(item => {
-						// 如果item是对象且包含时间字段
-						if (typeof item === 'object' && item !== null) {
-							// 假设时间字段可能是tm, time, or the first element
-							const timeValue = item.tm || item.time || item[0];
-							return dayjs(timeValue).format('YYYY-MM-DD HH:mm');
-						} else {
-							// 如果item直接就是时间值
-							return dayjs(item).format('YYYY-MM-DD HH:mm');
-						}
-					});
+
+				if (props.stationType !== 'A' && staticType.value == '1') {
+
+					seriesData.value = res.data.data
+					baseOptionData.value = res.data.baseOptionData
+					xAxisData.value = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00']
+					console.log(props.stationType, staticType.value,)
+					console.log('seriesData.value', seriesData.value)
+					console.log('baseOptionData.value', baseOptionData.value)
+					console.log('xAxisData.value', xAxisData.value)
+				} else {
+					// 提取每个series中data的第一个元素并格式化时间
+					if (res.data.series && res.data.series.length > 0) {
+						// 假设第一个series的data包含完整的时间点
+						xAxisData.value = res.data.series[0].data.map(item => {
+							// 如果item是对象且包含时间字段
+							if (typeof item === 'object' && item !== null) {
+								// 假设时间字段可能是tm, time, or the first element
+								const timeValue = item.tm || item.time || item[0];
+								return dayjs(timeValue).format('YYYY-MM-DD HH:mm');
+							} else {
+								// 如果item直接就是时间值
+								return dayjs(item).format('YYYY-MM-DD HH:mm');
+							}
+						});
+					}
+					seriesData.value = res.data.series
 				}
-				seriesData.value = res.data.series
 			}
 		} catch (error) {
 			console.log(error)
@@ -545,7 +563,15 @@
 		}
 	};
 
+	watch(staticType.value, (newVal, oldVal) => {
+		if (oldVal !== undefined) { // 避免首次初始化时触发
+			// 更新查询参数中的 dataType
+			queryParams.dataType = newVal
 
+			// 重新获取图表数据
+			getEchartsData()
+		}
+	})
 	// 预处理数据导出
 	const yclExport = () => {
 		let url = `${props.requestPrefix}/exportoriginaldata?stnmId=${queryParams.stnmId}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}`