From 199ca6cde0f90e14099c334015a73eb82585c3fc Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Thu, 30 Oct 2025 14:18:47 +0800
Subject: [PATCH] =?UTF-8?q?docs=EF=BC=9A=E6=B4=AA=E6=B0=B4=E9=A2=84?=
 =?UTF-8?q?=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/flood/index.vue | 490 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 490 insertions(+)
 create mode 100644 src/views/flood/index.vue

diff --git a/src/views/flood/index.vue b/src/views/flood/index.vue
new file mode 100644
index 0000000..7a7ccd8
--- /dev/null
+++ b/src/views/flood/index.vue
@@ -0,0 +1,490 @@
+<template>
+    <div class="app-container app-container-bg">
+        <el-card class="first-card" ref='firstCard' shadow="always">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+                <el-form-item label="测站选择：">
+                    <el-select v-model="queryForm.station" placeholder="测站选择" style="width: 240px;" @change="changeStation">
+                        <el-option v-for="item in stationList" :key="item.stnmId" :label="item.name" :value="item.stnmId" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="起止时段：">
+                    <el-date-picker v-model="queryForm.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:00">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="drawChart">查询</el-button>
+                </el-form-item>
+                <!-- <el-button type="primary" @click="showSetting = true">设置</el-button> -->
+            </el-form>
+            <el-row class="info-bar">
+                <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10"> <span>起报时间：</span><span>{{qbTime}}</span></el-col>
+                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6"> <span>预报时段：</span><span>1小时</span></el-col>
+                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+                    <el-descriptions class="margin-top" :column="2" border>
+                        <el-descriptions-item>
+                            <template slot="label">
+                                预测最高值
+                            </template>
+                            {{predict.maxValue}}
+                        </el-descriptions-item>
+                        <el-descriptions-item>
+                            <template slot="label">
+
+                                预测最低值
+                            </template>
+                            {{predict.minValue}}
+                        </el-descriptions-item>
+                        <el-descriptions-item>
+                            <template slot="label">
+
+                                时间
+                            </template>
+                            {{predict.maxTime}}
+                        </el-descriptions-item>
+                        <el-descriptions-item>
+                            <template slot="label">
+
+                                时间
+                            </template>
+                            {{predict.minTime}}
+                        </el-descriptions-item>
+                    </el-descriptions>
+
+                </el-col>
+            </el-row>
+        </el-card>
+        <splitpanes class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box">
+            <pane size="30" min-size="30" max-size="30" style="height: 100%;">
+                <el-table v-table-height :data="tableData" border v-loading="loading">
+                    <el-table-column prop="date" label="日期">
+                    </el-table-column>
+                    <el-table-column prop="rain" label="雨量(mm)">
+                        <template #default="scope">
+                            <el-input v-if="isEditing" v-model="scope.row.rain" size="small" />
+                            <span v-else>{{ scope.row.rain }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="water" label="水位(mm)">
+                        <template #default="scope">
+                            <el-input type="number" v-if="isEditing" v-model="scope.row.water" size="small" />
+                            <span v-else>{{ scope.row.water }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </pane>
+            <pane size="70" min-size="70" max-size="70" class="ml10 pad20" v-loading="loading">
+                <div v-table-height id="main" style="width: 100%; "></div>
+            </pane>
+        </splitpanes>
+    </div>
+</template>
+<script>
+    import * as echarts from "echarts";
+    import request from "@/utils/request";
+    import {
+        Splitpanes,
+        Pane
+    } from 'splitpanes'
+    import 'splitpanes/dist/splitpanes.css'
+
+    import dayjs from 'dayjs'
+    export default {
+        name: 'Flood',
+        components: {
+            Splitpanes,
+            Pane
+        },
+        data() {
+            const endTime = dayjs(new Date());
+            const startTime = endTime.subtract(10, 'hour').format('YYYY-MM-DD HH:mm:00');
+            const endTimeFormatted = dayjs(new Date()).format('YYYY-MM-DD HH:mm:00');
+            return {
+                loading: false,
+                showSetting: false,
+                tableData: [],
+                stationList: [],
+                queryForm: {
+                    station: null,
+                    dateRange: [startTime, endTimeFormatted]
+                },
+                isEditing: false,
+                // 起报时间
+                qbTime: '',
+                // 预测值信息
+                predict: {
+                    maxValue: '',
+                    minValue: '',
+                    maxTime: '',
+                    minTime: ''
+                }
+            }
+        },
+        created() {
+            this.getStationList()
+        },
+        mounted() {
+        },
+
+        methods: {
+            // 获取测站选择下拉框数据
+            async getStationList() {
+                let res = await request({
+                    url: "/history/data/getStationList",
+                    method: 'post',
+                });
+                if (res.code == 0) {
+                    let data = res.data;
+                    this.stationList = data;
+                    this.queryForm.station = this.stationList[0].stnmId;
+                    this.drawChart()
+
+                }
+            },
+            async drawChart() {
+                this.loading = true
+                let params = {
+                    startTime: this.queryForm.dateRange[0],
+                    endTime: this.queryForm.dateRange[1],
+                    stnmId: this.queryForm.station,
+                    stationType: 'A',
+                    stcd: ''
+                }
+                let res = await request({
+                    url: "/history/data/newHistorydata",
+                    method: 'post',
+                    params: params
+                });
+                if (res.code == 0) {
+                    this.chartData = res.data;
+                    let rainData = res.data.A.data || [];
+                    let waterData = res.data.C.data || [];
+                    if (waterData && waterData.length > 0) {
+                        const actualStartTime = dayjs(waterData[0][0]).format('YYYY-MM-DD HH:mm:ss');
+                        const actualEndTime = dayjs(waterData[waterData.length - 1][0]).format('YYYY-MM-DD HH:mm:ss');
+                        this.queryForm.dateRange = [actualStartTime, actualEndTime]
+                    }
+                    let predictData = res.data.Z.data || [];
+
+                    // 👇 关键：表格用的水位数据，去掉最后一个点
+                    const waterDataForTable = waterData.length > 0 ? waterData.slice(0, -1) : [];
+
+                    // 构建表格数据（雨量 + 水位，水位不包含最后一个点）
+                    const tableData = waterDataForTable.map(waterItem => {
+                        const [timestamp, water] = waterItem;
+                        const rainItem = rainData.find(r => r[0] === timestamp);
+                        const date = dayjs(timestamp).format('YYYY/MM/DD HH:mm:ss');
+                        return {
+                            date,
+                            rain: rainItem ? rainItem[1]?.toString() : '',
+                            water: water?.toString()
+                        };
+                    });
+                    this.tableData = tableData;
+
+                    this.initEcharts() // 图表仍使用完整的 waterData 和 predictData
+                    this.loading = false
+                }
+            },
+            initEcharts() {
+                // 1. 取出A和V数据
+                const rainArr = this.chartData?.A?.data || [];
+                const waterArr = this.chartData?.C?.data || [];
+                const predictArr = this.chartData?.Z?.data || [];
+
+                // const filteredRain = waterArr
+                // let Xdata = [...filteredRain, ...predictArr]
+                const filteredRain = waterArr;
+
+                // 合并数据，去重相同时间点
+                let Xdata;
+                if (waterArr.length > 0 && predictArr.length > 0 && waterArr[waterArr.length - 1][0] === predictArr[0][0]) {
+                    Xdata = [...waterArr, ...predictArr.slice(1)];
+                } else {
+                    Xdata = [...waterArr, ...predictArr];
+                }
+                // 3. 生成timeData和rainfallData
+                const timeData = Xdata.map(item => {
+                    // 时间戳转格式
+                    return dayjs(item[0]).format('MM月DD日 HH:mm');
+                });
+                const timeDataLength = timeData.length;
+                const startIndex = Math.max(0, timeDataLength - 12); // 后12条数据的起始索引
+                this.qbTime = dayjs(Xdata[startIndex][0]).format('YYYY-MM-DD HH:mm:ss')
+                // const rainfallData = filteredRain.map(item => item[1]);
+                // 雨量
+                const rainfallData = filteredRain.map(item => {
+                    const waterItem = rainArr.find(w => w[0] === item[0]);
+                    return waterItem ? waterItem[1] : null;
+                });
+                // 水位
+                const rainData = filteredRain.map(item => {
+                    const waterItem = waterArr.find(w => w[0] === item[0]);
+                    return waterItem ? waterItem[1] : null;
+                });
+                const levelData = rainData
+                // 5. 预测水位
+                const waterForecast = Xdata.map(item => {
+                    const waterItem = predictArr.find(w => w[0] === item[0]);
+                    return waterItem ? waterItem[1] : null;
+                });
+                // 获取预测水位的最高值和最低值及对应时间
+                const validForecast = waterForecast.map((value, index) => ({ value, index })).filter(item => item.value !== null);
+                if (validForecast.length > 0) {
+                    const maxItem = validForecast.reduce((max, current) =>
+                        (current.value > max.value ? current : max), validForecast[0]);
+                    const minItem = validForecast.reduce((min, current) =>
+                        (current.value < min.value ? current : min), validForecast[0]);
+
+                    this.predict.maxValue = maxItem.value;
+                    this.predict.minValue = minItem.value;
+                    this.predict.maxTime = timeData[maxItem.index];
+                    this.predict.minTime = timeData[minItem.index];
+                }
+                // 15条横线颜色，首尾黑色，中间灰色
+                const splitLineColors = [
+                    '#000', '#ccc', '#ccc', '#ccc', '#ccc',
+                    '#ccc', '#ccc', '#ccc', '#ccc', '#ccc',
+                    '#ccc', '#ccc', '#ccc', '#ccc', '#000'
+                ];
+                let ycColor = '#1EA1CE'
+                function getSplitLine(index) {
+                    return {
+                        show: true,
+                        lineStyle: {
+                            color: splitLineColors,
+                            width: 1
+                        }
+                    }
+                }
+                // 计算y轴的最小值和最大值，用于自动设置刻度
+                const yAxisRainMin = Math.min(...rainfallData.filter(v => v !== undefined && v !== null));
+                const yAxisRainMax = Math.max(...rainfallData.filter(v => v !== undefined && v !== null));
+                const allWaterData = levelData.concat(waterForecast).filter(v => v !== undefined && v !== null);
+                const yAxisWaterMin = allWaterData.length ? Math.min(...allWaterData) : 0;
+                const yAxisWaterMax = allWaterData.length ? Math.max(...allWaterData) : 10; let that = this
+                const option = {
+                    backgroundColor: '#fff',
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: { type: 'cross' },
+                        // 在 tooltip.formatter 函数中替换以下代码
+                        formatter: function (params) {
+                            let dataIndex = params[0].dataIndex;
+                            let html = `<div><strong>${timeData[dataIndex]}</strong></div>`;
+
+                            // 检查是否为预测数据区间
+                            const isForecast = dataIndex >= filteredRain.length;
+
+                            // 显示雨量（仅在非预测时段或有雨量数据时显示）
+                            if (!isForecast || rainfallData[dataIndex] !== undefined) {
+                                html += `<div style="margin-top:4px;">
+                                    <span style="display:inline-block;width:10px;height:10px;background:#1075FD;margin-right:4px;"></span>
+                                    雨量: ${rainfallData[dataIndex] ?? '-'} mm
+                                    </div>`;
+                            }
+
+                            // 显示实际水位（仅在非预测时段显示）
+                            if (!isForecast) {
+                                html += `<div>
+                                    <span style="display:inline-block;width:10px;height:10px;background:#EE6666;margin-right:4px;"></span>
+                                    水位: ${levelData[dataIndex] ?? '-'} m
+                                    </div>`;
+                            }
+
+                            // 显示预测水位（在预测时段显示）
+                            if (isForecast || waterForecast[dataIndex] !== null) {
+                                html += `<div>
+                                    <span style="display:inline-block;width:10px;height:10px;background:#6f46fd;margin-right:4px;"></span>
+                                    预测水位: ${waterForecast[dataIndex] ?? '-'} m
+                                    </div>`;
+                            }
+
+                            return html;
+                        }
+                    },
+                    legend: {
+                        data: ['雨量', '水位', '预测水位'],
+                        top: 20
+                    },
+                    toolbox: {
+                        show: true,
+                        feature: {
+                            saveAsImage: { show: true, title: '下载图片' },
+                        },
+                        right: 30,
+                        top: 20
+                    },
+                    grid: {
+                        left: 60,
+                        right: 60,
+                        top: '15%',
+                        height: '60%' // 调整高度以适应dataZoom
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: timeData,
+                        axisLabel: {
+                            rotate: 0,
+                            formatter: function (value) {
+                                const [date, time] = value.split(' ');
+                                return `${time}\n${date}`;
+                            }
+                        }
+                    },
+                    yAxis: [
+                        { // 雨量 - 左侧
+                            type: 'value',
+                            name: '雨量 (mm)',
+                            nameLocation: 'middle',
+                            nameGap: 35,
+                            inverse: true,
+                            min: Math.floor(yAxisRainMin),
+                            max: Math.ceil(yAxisRainMax),
+                            axisLabel: { color: '#1075FD' },
+                            nameTextStyle: { color: '#1075FD', fontWeight: 'bold' },
+                            splitLine: getSplitLine(0),
+                        },
+                        { // 水位 - 右侧
+                            type: 'value',
+                            name: '水位 (m)',
+                            nameLocation: 'middle',
+                            nameGap: 45,
+                            min: Math.floor(yAxisWaterMin),
+                            max: Math.ceil(yAxisWaterMax),
+                            position: 'right',
+                            axisLabel: { color: '#EE6666' },
+                            nameTextStyle: { color: '#EE6666', fontWeight: 'bold' },
+                            splitLine: getSplitLine(1),
+                        }
+                    ],
+                    dataZoom: [
+                        {
+                            type: 'inside', // 内置型数据区域缩放组件
+                            xAxisIndex: [0], // 控制第一个x轴
+                            start: 0,
+                            end: 100
+                        },
+                        {
+                            type: 'slider', // 滑动条型数据区域缩放组件
+                            xAxisIndex: [0],
+                            start: 0,
+                            end: 100,
+                            bottom: 50, // 距离底部距离
+                            height: 30, // 高度
+                            fillerColor: 'rgba(167,183,204,0.4)', // 选中区域的背景色
+                            borderColor: '#ddd',
+                            textStyle: {
+                                color: '#999'
+                            },
+                            handleSize: '100%', // 手柄大小
+                            handleStyle: {
+                                color: '#a7b7cc'
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '雨量',
+                            type: 'bar',
+                            yAxisIndex: 0, // 使用左侧y轴
+                            data: rainfallData,
+                            barWidth: 10,
+                            z: 10,
+                            lineStyle: { color: '#1075FD', width: 3 },
+                            itemStyle: { color: '#1075FD' },
+                            markLine: {
+                                symbol: 'none',
+                                label: {
+                                    show: false
+                                },
+                                lineStyle: {
+                                    color: ycColor,
+                                    type: "dashed",
+                                    width: 2
+                                },
+                                z: 20,
+                                data: [
+                                    {
+                                        xAxis: timeData.slice(startIndex)[0]
+                                    }
+                                ]
+                            }
+                        },
+                        {
+                            name: '水位',
+                            type: 'line',
+                            yAxisIndex: 1, // 使用右侧y轴
+                            data: levelData,
+                            symbol: 'circle',
+                            lineStyle: { color: '#EE6666', width: 3 },
+                            itemStyle: { color: '#EE6666' },
+                            markLine: {
+                                symbol: 'none',
+                                label: {
+                                    show: false
+                                },
+                                lineStyle: {
+                                    color: ycColor,
+                                    type: "dashed",
+                                    width: 2
+                                },
+                                data: [
+                                    {
+                                        xAxis: timeData.slice(startIndex)[0]
+                                    }
+                                ]
+                            }
+
+                        },
+                        {
+                            name: '预测水位',
+                            type: 'line',
+                            yAxisIndex: 1, // 使用右侧y轴
+                            data: waterForecast,
+                            symbol: 'circle',
+                            lineStyle: { color: '#6f46fd', width: 2 },
+                            itemStyle: { color: '#6f46fd' },
+                            markLine: {
+                                symbol: 'none',
+                                label: {
+                                    show: false
+                                },
+                                lineStyle: {
+                                    color: ycColor,
+                                    type: "dashed",
+                                    width: 2
+                                },
+                                data: [
+                                    {
+                                        xAxis: timeData.slice(startIndex)[0]
+                                    }
+                                ]
+                            }
+                        }
+                    ]
+                };
+
+                const chartDom = document.getElementById('main');
+                if (!chartDom) return;
+                if (this.chartInstance) {
+                    this.chartInstance.dispose();
+                }
+                this.chartInstance = echarts.init(chartDom);
+                this.chartInstance.setOption(option);
+
+                // 监听窗口变化
+                window.addEventListener('resize', () => {
+                    if (this.chartInstance) {
+                        this.chartInstance.resize();
+                    }
+                });
+            },
+
+            // 改变下拉框数据
+            changeStation(val) {
+                this.queryForm.station = val
+                this.drawChart()
+            },
+        }
+    }
+</script>
\ No newline at end of file