From b5ed8b2a72a7d2103ec7038e2b984cdf5bac3b76 Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Thu, 23 Oct 2025 16:06:36 +0800
Subject: [PATCH] =?UTF-8?q?docs:=E5=91=A8=E6=8A=A5=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/data/report/index.vue | 477 ++++++++++++++++++++++++++++++++
 1 file changed, 477 insertions(+)
 create mode 100644 src/views/data/report/index.vue

diff --git a/src/views/data/report/index.vue b/src/views/data/report/index.vue
new file mode 100644
index 0000000..d0b778d
--- /dev/null
+++ b/src/views/data/report/index.vue
@@ -0,0 +1,477 @@
+<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="时间范围" prop="dateTime">
+                    <el-date-picker :clearable="false" v-model="queryParams.dateTime" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" popper-class="date-clear">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <div class="el-card-p card-shadow carder-border mt10 pad10 scroll-bar">
+            <div style="max-width:1200px;margin: 0 auto;" v-loading="loading">
+                <h2 class="text-center">{{queryParams.dateTime[0]}}到{{queryParams.dateTime[1]}}周报数据统计</h2>
+                <ul style="height:98%;">
+                    <li v-for='(item,index) in weekReportData' :key="index">
+                        <h2>{{item.title}}</h2>
+                        <span v-if="item.stationType=='A'">总降雨量<span class="ml10 mr10">{{item.totalRain}}</span>mm</span>
+                        <span v-if="item.stationType=='T'">本周平均温度为{{item.tempAvg}}℃，最高温度为{{item.tempMax}}℃。</span>
+                        <!-- :span-method="arraySpanMethod" -->
+                        <el-table v-if="item.stationType=='A'" class="mt10 table-box double-header-table" :data="item.tableData" :span-method="arraySpanMethod">
+                            <el-table-column label="雨量站站点" :align="alignment">
+                                <el-table-column prop="yujingzhi" :align="alignment" />
+                                <el-table-column prop="name" :align="alignment" />
+                            </el-table-column>
+                            <el-table-column :align="alignment">
+                                <template #header>
+                                    <div style="line-height: 1.2;text-align: center;">
+                                        <div>最大一小时</div>
+                                        <div>降雨量(mm)</div>
+                                    </div>
+                                </template>
+                                <el-table-column prop="oneHourValue" :align="alignment" width="60" />
+                                <el-table-column prop="oneHourStart" :align="alignment" />
+                            </el-table-column>
+                            <el-table-column>
+                                <template #header>
+                                    <div style="line-height: 1.2;text-align: center;">
+                                        <div>最大三小时</div>
+                                        <div>降雨量(mm)</div>
+                                    </div>
+                                </template>
+                                <el-table-column prop="threeHourValue" :align="alignment" width="60" />
+                                <el-table-column prop="threeHourStart" :align="alignment" />
+                            </el-table-column>
+                            <el-table-column prop="sessionValue" :align="alignment">
+                                <template #header>
+                                    <div style="line-height: 1.2;text-align: center;">
+                                        <div>最大场次</div>
+                                        <div>降雨量(mm)</div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="totalValue" :align="alignment">
+                                <template #header>
+                                    <div style="line-height: 1.2;text-align: center;">
+                                        <div>总降雨量</div>
+                                        <div>(mm)</div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                        <el-table v-if="item.stationType=='B'||item.stationType=='C'" class="mt10 table-box " :data="item.tableData" border>
+                            <el-table-column label="站点" prop="name" :align="alignment"></el-table-column>
+                            <el-table-column label="水位（m）" :align="alignment">
+                                <el-table-column label="最大水位" prop="maxValue" :align="alignment"></el-table-column>
+                                <el-table-column label="最小水位" prop="minValue" :align="alignment"></el-table-column>
+                                <el-table-column label="平均水位" prop="avgValue" :align="alignment"></el-table-column>
+                            </el-table-column>
+                        </el-table>
+                        <el-table v-if="item.stationType==='T'" class="mt10 table-box " :data="item.tableData" border>
+                            <el-table-column label="站点" prop="name" :align="alignment"></el-table-column>
+                            <el-table-column label="温度（℃）" :align="alignment">
+                                <el-table-column label="最大温度" prop="maxValue" :align="alignment"></el-table-column>
+                                <el-table-column label="最小温度" prop="minValue" :align="alignment"></el-table-column>
+                                <el-table-column label="平均温度" prop="avgValue" :align="alignment"></el-table-column>
+                            </el-table-column>
+                        </el-table>
+                        <el-table v-if="item.stationType==='S'" class="mt10 table-box " :data="item.tableData" border>
+                            <el-table-column label="站点" prop="name" :align="alignment"></el-table-column>
+                            <el-table-column label="风速（m/s）" :align="alignment">
+                                <el-table-column label="最大风速" prop="maxValue" :align="alignment"></el-table-column>
+                                <el-table-column label="最小风速" prop="minValue" :align="alignment"></el-table-column>
+                                <el-table-column label="平均风速" prop="avgValue" :align="alignment"></el-table-column>
+                            </el-table-column>
+                        </el-table>
+                        <el-table v-if="item.stationType==='R'" class="mt10 table-box " :data="item.tableData" border>
+                            <el-table-column label="站点" prop="name" :align="alignment"></el-table-column>
+                            <el-table-column label="湿度（%）" :align="alignment">
+                                <el-table-column label="最大湿度" prop="maxValue" :align="alignment"></el-table-column>
+                                <el-table-column label="最小湿度" prop="minValue" :align="alignment"></el-table-column>
+                                <el-table-column label="平均湿度" prop="avgValue" :align="alignment"></el-table-column>
+                            </el-table-column>
+                        </el-table>
+                        <el-table v-if="item.stationType=='U'" class="mt10 table-box " :data="item.tableData" border>
+                            <el-table-column v-for='(column, colIndex) in item.TableHeader' :key="colIndex" :label="column.stcd" :prop="column.field" :align="alignment"></el-table-column>
+                        </el-table>
+                        <div class="mt10" style="height:280px;" v-if="item.isEcharts">
+                            <!-- 为每个图表创建独立的容器 -->
+                            <div :ref="el => setChartRef(el, index)" :id="'weekReportEchart' + index" style="height:100%;"></div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs'
+    import { ref, reactive, onMounted } from 'vue'
+    import * as echarts from "echarts";
+
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const start = ref(dayjs().subtract(6, 'day').format('YYYY-MM-DD'))
+    const end = ref(dayjs().format('YYYY-MM-DD'))
+    const queryParams = reactive({
+        dateTime: [start.value, end.value]
+    })
+
+    // 存储图表实例的数组
+    const chartInstances = ref([])
+
+    // 设置图表引用
+    const setChartRef = (el, index) => {
+        if (el) {
+            chartInstances.value[index] = el;
+        }
+    }
+
+    let weekReportData = ref([
+        {
+            title: "雨情",
+            unit: "mm/h",
+            textTitle: "雨情测报各站点降雨变化趋势图",
+            stationType: "A",
+            isEcharts: true,
+            totalRain: ""
+        },
+        {
+            title: "水情",
+            unit: "m",
+            textTitle: "水位变化趋势图",
+            stationType: "B",
+            isEcharts: true,
+        },
+        {
+            title: "温度",
+            unit: "℃",
+            textTitle: "温度变化趋势图",
+            stationType: "T",
+            isEcharts: true,
+        },
+        {
+            title: "风速",
+            unit: "m/s",
+            textTitle: "风速变化趋势图",
+            stationType: "S",
+            isEcharts: true,
+        },
+        {
+            title: "湿度",
+            unit: "%",
+            textTitle: "湿度变化趋势图",
+            stationType: "R",
+            isEcharts: true,
+        },
+        {
+            title: "风向",
+            unit: "",
+            textTitle: "",
+            stationType: "U",
+            isEcharts: false,
+        }
+    ])
+    const loading = ref(false)
+    const rainTableData = ref([])
+    const getList = async () => {
+        let params = {
+            startDate: queryParams.dateTime[0],
+            endDate: queryParams.dateTime[1]
+        }
+        loading.value = true;
+        try {
+            const res = await proxy.axiosPost2('/data/statistics/getWeekReport', params)
+            if (res.code == 0) {
+                let obj = res.data
+                weekReportData.value.forEach((item, index) => {
+                    switch (item.stationType) {
+                        case 'A':
+                            let list = [
+                                {
+                                    yujingzhi: "预警值",
+                                    name: "三级预警",
+                                    oneHourValue: "20",
+                                    threeHourValue: "30",
+                                    sessionValue: "50",
+                                },
+                                {
+                                    yujingzhi: "预警值",
+                                    name: "二级预警",
+                                    oneHourValue: "30",
+                                    threeHourValue: "50",
+                                    sessionValue: "80",
+                                },
+                                {
+                                    yujingzhi: "预警值",
+                                    name: "一级预警",
+                                    oneHourValue: "40",
+                                    threeHourValue: "100",
+                                    sessionValue: "120",
+                                }
+                            ]
+                            item.tableData = obj.rainTableData.concat(list)
+                            item.xAxisData = obj.rainChartXdata
+                            item.seriesData = obj.rainChartData
+                            item.legendData = obj.rainChartData.map(seriesItem => seriesItem.name)
+                            item.totalRain = obj.totalRain
+                            break;
+                        case 'B':
+                        case 'C':
+                            item.tableData = obj.waterTableData
+                            item.xAxisData = obj.waterChartXdata
+                            item.seriesData = obj.waterChartData
+                            item.legendData = obj.waterChartData.map(seriesItem => seriesItem.name)
+                            break;
+                        case 'T':
+                            item.tempAvg = obj.tempAvg
+                            item.tempMax = obj.tempMax
+                            item.tableData = obj.tempTableData
+                            item.xAxisData = obj.tempChartXdata
+                            item.seriesData = obj.tempChartData
+                            item.legendData = obj.tempChartData.map(seriesItem => seriesItem.name)
+                            break;
+                        case 'S':
+                            item.tableData = obj.wsTableData
+                            item.xAxisData = obj.qxChartXdata
+                            item.seriesData = obj.wsChartData
+                            item.legendData = obj.wsChartData.map(seriesItem => seriesItem.name)
+                            break;
+                        case 'R':
+                            item.tableData = obj.rhTableData
+                            item.xAxisData = obj.qxChartXdata
+                            item.seriesData = obj.rhChartData
+                            item.legendData = obj.rhChartData.map(seriesItem => seriesItem.name)
+                            break;
+                        case 'U':
+                            item.tableData = obj.wdrTableData
+                            item.TableHeader = obj.wdrTableHeader
+                            break;
+                    }
+                    // 只为需要图表的项初始化图表
+                    if (item.isEcharts && chartInstances.value[index]) {
+                        nextTick(() => {
+                            initEchart(item, index)
+                        })
+                    }
+                })
+            }
+        } catch (error) {
+            console.error(error)
+        } finally {
+            loading.value = false
+        }
+    }
+
+    const initEchart = (item, index) => {
+        // 确保图表容器存在
+        if (!chartInstances.value[index]) {
+            console.warn(`图表容器不存在: index ${index}`)
+            return
+        }
+
+        // 销毁已存在的图表实例
+        if (chartInstances.value[index].chartInstance) {
+            chartInstances.value[index].chartInstance.dispose()
+        }
+
+        let myEcharts = echarts.init(chartInstances.value[index]);
+        // 将图表实例保存到容器元素上
+        chartInstances.value[index].chartInstance = myEcharts
+
+        const series = item.seriesData.map((seriesItem, seriesIndex) => {
+            const colors = [
+                ["#1075fd", "#164fb4"],
+                ["#0fec7d", "#2fbb18"],
+                ["#d364fd", "#a700bf"],
+                ["#5cffea", "#1aa2c2"],
+                ["#f2b622", "#c54b17"],
+                ["#fc3c54", "#d70005"],
+                ["#EE1289", "#8B0A50"],
+                ["#ee9c9c", "#755252"],
+                ["#06e8d6", "#078075"],
+                ["#de79c2", "#cd5c5c"],
+                ["#bebe0f", "#8B8B00"],
+                ["#00F5FF", "#6b8e23"],
+                ["#f50000", "#590404"],
+                ["#00CD66", "#3cb371"],
+                ["#c400fa", "#48005d"],
+                ["#eca86c", "#5e4310"],
+            ];
+            const color = colors[seriesIndex % colors.length];
+
+            return {
+                name: seriesItem.name, // 使用seriesItem.name而不是item.legendData[seriesIndex]
+                type: 'line',
+                showSymbol: false,
+                // barWidth: "20", // 线图不需要barWidth
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: color[0] },
+                            { offset: 1, color: color[1] }
+                        ]),
+                    },
+                },
+                data: seriesItem.data,
+            };
+        });
+
+        let option = {
+            title: {
+                text: item.textTitle,
+                subtext: '',
+                x: 'center',
+                textStyle: {
+                    fontSize: 16,
+                    color: "#000",
+                },
+                // top: "8%",
+                // left: "30%",
+            },
+            tooltip: {
+                trigger: "axis",
+                axisPointer: {
+                    // 坐标轴指示器，坐标轴触发有效
+                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+                },
+            },
+            grid: {
+                left: '15px',
+                right: '15px',
+                bottom: '10px',
+                top: '50px',
+                containLabel: true
+            },
+            legend: {
+                data: item.legendData || [],
+                // right: 10,
+                top: 24,
+                textStyle: {
+                    color: "#000",
+                },
+                // itemWidth: 12,
+                // itemHeight: 10,
+            },
+            xAxis: {
+                type: "category",
+                boundaryGap: true,
+                data: item.xAxisData || [],
+                axisLabel: {
+                    textStyle: {
+                        color: "#000",
+                    },
+                    formatter: function (value) {
+                        return dayjs(value).format('MM/DD H时');
+                    }
+                },
+            },
+            yAxis: {
+                type: "value",
+                name: `${item.title}（${item.unit}）`,
+                nameLocation: 'end',
+                nameTextStyle: {
+                    color: '#464b50'
+                },
+                nameGap: 15,
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: "#ccc",
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: "#ccc",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "#000000",
+                    },
+                    formatter: function (value) {
+                        return value.toFixed(2);
+                    }
+                },
+            },
+            series: series,
+        };
+
+        myEcharts.setOption(option);
+
+        // 确保图表尺寸适应容器
+        const resizeChart = () => {
+            if (myEcharts) {
+                myEcharts.resize({
+                    width: chartInstances.value[index].clientWidth,
+                    height: chartInstances.value[index].clientHeight
+                });
+            }
+        };
+
+        // 初始化时调整一次大小
+        setTimeout(resizeChart, 100);
+    }
+
+    const handleQuery = () => {
+        getList()
+    }
+
+    const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+        // 获取实际数据行数（不包括最后三行预警数据）
+        const dataRows = weekReportData.value[0].tableData ? weekReportData.value[0].tableData.slice(0, -3).length : 0;
+        console.log(dataRows, 'dataRows')
+        // 前dataRows行的合并规则
+        if (rowIndex < dataRows) {
+            // 第一列不合并
+            if (columnIndex === 0) {
+                return [0, 0];
+            } else if (columnIndex === 1) {
+                return [1, 2]
+            }
+            return [1, 1];
+        }
+
+        // 最后三行（预警值行）的合并规则
+        if (rowIndex >= dataRows && rowIndex < dataRows + 3) {
+            if (columnIndex === 0) {
+                if (rowIndex === dataRows) {
+                    // 第一行合并三行
+                    return [3, 1];
+                } else {
+                    // 其他两行隐藏
+                    return [0, 0];
+                }
+            }
+            if ([2, 4].includes(columnIndex)) {
+                return [1, 2];
+            } if ([3, 5].includes(columnIndex)) {
+                return [0, 0];
+            }
+            return [1, 1]
+        }
+
+        return [1, 1];
+    };
+    onMounted(() => {
+        getList()
+    })
+</script>
+<style scoped lang="scss">
+    .text-center {
+        text-align: center;
+    }
+
+    .report-rain-table th,
+    .report-rain-table td {
+        padding: 8px 0;
+    }
+
+    :deep(.double-header-table .el-table__header tr:nth-child(2)) {
+        display: none;
+    }
+</style>
\ No newline at end of file