From b93f6e8f63995327cdc1c19f3057b90f7672e51a Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Thu, 30 Oct 2025 14:34:46 +0800
Subject: [PATCH] =?UTF-8?q?docs=EF=BC=9A=E9=9B=A8=E9=87=8F=E6=88=90?=
 =?UTF-8?q?=E6=9E=9C=EF=BC=88=E9=80=90=E6=97=A5=E9=99=8D=E6=B0=B4=E9=87=8F?=
 =?UTF-8?q?=E3=80=81=E9=99=8D=E6=B0=B4=E9=87=8F=E6=91=98=E5=BD=95=E8=A1=A8?=
 =?UTF-8?q?=E3=80=81=E5=90=84=E6=97=B6=E6=AE=B5=E6=9C=80=E5=A4=A7=E9=99=8D?=
 =?UTF-8?q?=E6=B0=B4=E9=87=8F=E8=A1=A81=EF=BC=8C=E8=A1=A82=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/jsltable1/index.vue  | 223 +++++++++++++++++
 src/views/report/jsltable2/index.vue  | 221 +++++++++++++++++
 src/views/report/jslzl/index.vue      | 174 +++++++++++++
 src/views/report/reportrain/index.vue | 106 ++++++++
 src/views/report/zrjsl/index.vue      | 337 ++++++++++++++++++++++++++
 5 files changed, 1061 insertions(+)
 create mode 100644 src/views/report/jsltable1/index.vue
 create mode 100644 src/views/report/jsltable2/index.vue
 create mode 100644 src/views/report/jslzl/index.vue
 create mode 100644 src/views/report/reportrain/index.vue
 create mode 100644 src/views/report/zrjsl/index.vue

diff --git a/src/views/report/jsltable1/index.vue b/src/views/report/jsltable1/index.vue
new file mode 100644
index 0000000..d2ec0b4
--- /dev/null
+++ b/src/views/report/jsltable1/index.vue
@@ -0,0 +1,223 @@
+<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-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
+                    <el-button type="warning" icon="Download" @click="handleExport">下载</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <splitpanes :horizontal="device === 'mobile'" class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box" :push-other-panes="false">
+            <pane :size="firstSize" :min-size="SPLITPANES_CONFIG.MIN_SIZE" :max-size="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10">
+                <e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree>
+            </pane>
+            <pane :size="100 - firstSize" class="pad10">
+                <div class="main-table-header">
+                    <div class="table-title">{{tableTitle}}</div>
+                    <div class="table-time mb5">
+                        <div>
+                            <span>年份: </span><span id="title1">{{ queryParams.year }}</span>
+                        </div>
+                    </div>
+                </div>
+                <vxe-grid class="report-table" ref="gridRef" v-bind="gridOptions"></vxe-grid>
+                <!-- <el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;">
+                    <el-table-column fixed label="序号" :align="alignment" type="index">
+                    </el-table-column>
+                    <el-table-column fixed prop="c1" label="河名" width="100" :align="alignment">
+                    </el-table-column>
+                    <el-table-column fixed prop="c2" label="站名" width="100" :align="alignment">
+                    </el-table-column>
+                    <el-table-column label="时 段(min)" :align="alignment">
+                        <el-table-column prop="c3" label="10" :align="alignment">
+                            <el-table-column prop="c3" label="最大降水量开始 月-日" :align="alignment">
+                        </el-table-column>
+                        </el-table-column>
+                        <el-table-column prop="c4" label="20" :align="alignment">
+                            <el-table-column prop="c3" label="最大降水量开始 月-日" :align="alignment"></el-table-column>
+                        </el-table-column>
+                        <el-table-column prop="c5" label="30" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c6" label="45" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c7" label="60" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c8" label="90" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c9" label="120" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c10" label="180" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c11" label="240" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c12" label="360" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c13" label="540" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c14" label="720" :align="alignment">
+                        </el-table-column>
+                        <el-table-column prop="c15" label="1440" :align="alignment">
+                        </el-table-column>
+                    </el-table-column>
+                </el-table> -->
+            </pane>
+        </splitpanes>
+
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import { Splitpanes, Pane } from 'splitpanes'
+    import 'splitpanes/dist/splitpanes.css'
+    import ETree from '@/components/ETree/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+    import useAppStore from '@/store/modules/app'
+    const device = computed(() => useAppStore().device);
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE)
+    const stationType = 'A'
+    const eTreeRef = ref(null)
+    let stnmIdsList = []
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmIds) => {
+        stnmIdsList = stnmIds
+        queryParams.stnmIds = stnmIds.join(',')
+        if (stnmIdsList.length == 0) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else if (stnmIdsList.length > 50) {
+            proxy.$modal.msg("站点最多可选择50个");
+            return
+        } else {
+            loading.value = true;
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY'),
+        stnmId: "",
+        type: 0
+    });
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/report/jsltabledata', queryParams)
+            if (res.code == 0) {
+                let data = res.data
+                tableData.value = data.map(item => {
+                    const newItem = { ...item }; // 浅拷贝原对象
+
+                    // 遍历所有时段字段并替换逗号为 \n
+                    const periods = [10, 20, 30, 45, 60, 90, 120, 180, 240, 360, 540, 720, 1440];
+                    periods.forEach(period => {
+                        const key = `data${period}`;
+                        if (newItem[key] && typeof newItem[key] === 'string') {
+                            newItem[key] = newItem[key].replace(',', '\n');
+                        }
+                    });
+
+                    return newItem;
+                })
+                gridOptions.columns = [
+                    { field: 'index', width: 70, title: "站次", align: 'center', },
+                    { field: 'staid', minWidth: 120, title: '测站编码', align: 'center', },
+                    { field: 'stnm', minWidth: 100, title: '站名', align: 'center', },
+                    {
+                        title: '时 段(min)',
+                        field: 'shiduan',
+                        headerAlign: 'center',
+                        children: [
+                            {
+                                field: '10', title: '10', headerAlign: 'center',
+                                children: [
+                                    { field: 'data10', title: '最大降水量\n开始 月-日', align: 'center', minWidth: 60, },
+                                ]
+                            },
+                            {
+                                field: 'data20', title: '20', align: 'center', minWidth: 60,
+                            },
+                            { field: 'data30', title: '30', align: 'center', minWidth: 60, },
+                            { field: 'data45', title: '45', align: 'center', minWidth: 60, },
+                            { field: 'data60', title: '60', align: 'center', minWidth: 60, },
+                            { field: 'data90', title: '90', align: 'center', minWidth: 60, },
+                            { field: 'data120', title: '120', align: 'center', minWidth: 60, },
+                            { field: 'data180', title: '180', align: 'center', minWidth: 60, },
+                            { field: 'data240', title: '240', align: 'center', minWidth: 60, },
+                            { field: 'data360', title: '360', align: 'center', minWidth: 60, },
+                            { field: 'data540', title: '540', align: 'center', minWidth: 60, },
+                            { field: 'data720', title: '720', align: 'center', minWidth: 60, },
+                            { field: 'data1440', title: '1440', align: 'center', minWidth: 60, },
+                        ]
+                    },
+                ]
+                gridOptions.data = tableData.value;
+            }
+            gridOptions.loading = false;
+        } catch (error) {
+            gridOptions.loading = false;
+        }
+    }
+    // 搜索按钮操作
+    const handleQuery = () => {
+        getList()
+    }
+    // 下载按钮操作
+    const handleExport = () => { }
+
+    const gridOptions = reactive({
+        border: true,
+        loading: false,
+        showCustomHeader: true,
+        height: '86%',
+        mergeHeaderCells: [
+            { row: 0, col: 0, rowspan: 3, colspan: 1 },
+            { row: 0, col: 1, rowspan: 3, colspan: 1 },
+            { row: 0, col: 2, rowspan: 3, colspan: 1 },
+            { row: 0, col: 3, rowspan: 1, colspan: 13 },
+            { row: 2, col: 3, rowspan: 1, colspan: 13 },
+        ],
+        columns: [],
+        data: []
+    })
+</script>
+<style scoped lang="scss">
+    .report-table :deep(.vxe-table--column),
+    :deep(.vxe-header--row) {
+        background: #fff !important;
+        /* border-bottom: 1px solid #000 !important; */
+        border-right: 1px solid #000 !important;
+    }
+
+    .report-table :deep(.vxe-header--column),
+    :deep(.vxe-table--header-inner-wrapper) {
+        border-bottom: 1px solid #000 !important;
+    }
+
+    .report-table :deep(.vxe-grid--table-container),
+    :deep(.vxe-table) {
+        height: 100% !important;
+    }
+
+    .report-table :deep(.vxe-table--body) {
+        /* border: 1px solid #000; */
+        border-top: none;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/report/jsltable2/index.vue b/src/views/report/jsltable2/index.vue
new file mode 100644
index 0000000..e4b649b
--- /dev/null
+++ b/src/views/report/jsltable2/index.vue
@@ -0,0 +1,221 @@
+<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-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <el-button type="warning" icon="Download" @click="handleExport">下载</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <splitpanes :horizontal="device === 'mobile'" class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box" :push-other-panes="false">
+            <pane :size="firstSize" :min-size="SPLITPANES_CONFIG.MIN_SIZE" :max-size="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10">
+                <e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree>
+            </pane>
+            <pane :size="100 - firstSize" class="pad10">
+                <div class="main-table-header">
+                    <div class="table-title">{{tableTitle}}</div>
+                    <div class="table-time mb5">
+                        <div>
+                            <span>年份: </span><span id="title1">{{ queryParams.year }}</span>
+                        </div>
+                    </div>
+                </div>
+                <el-table class="report-table no-border-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;">
+                    <el-table-column fixed label="站次" width="60" :align="alignment" prop="index">
+                    </el-table-column>
+                    <el-table-column fixed prop="staid" width="120" label="测站编码" :align="alignment">
+                    </el-table-column>
+                    <el-table-column fixed prop="stnm" label="站名" width="150" :align="alignment">
+                    </el-table-column>
+                    <el-table-column label="时 段 (h)" :align="alignment">
+                        <el-table-column label="1" :align="alignment">
+                            <el-table-column prop="jsl1" label="降水量" :align="alignment"> </el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month1" label="月" width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day1" label="日" width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="2" :align="alignment">
+                            <el-table-column prop="jsl2" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month2" label="月" width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day2" label="日"  width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="3" :align="alignment">
+                            <el-table-column prop="jsl3" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month3" label="月" width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day3" label="日"  width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="6" :align="alignment">
+                            <el-table-column prop="jsl6" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month6" label="月" width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day6" label="日" width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="12" :align="alignment">
+                            <el-table-column prop="jsl12" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month12" label="月"  width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day12" label="日" width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="24" :align="alignment">
+                            <el-table-column prop="jsl24" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month24" label="月"  width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day24" label="日" width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="48" :align="alignment">
+                            <el-table-column prop="jsl48" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month48" label="月" width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day48" label="日" width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column label="72" :align="alignment">
+                            <el-table-column prop="jsl72" label="降水量" :align="alignment"></el-table-column>
+                            <el-table-column label="开始" :align="alignment">
+                                <el-table-column prop="month72" label="月" width="50" :align="alignment"> </el-table-column>
+                                <el-table-column prop="day72" label="日" width="50" :align="alignment"> </el-table-column>
+                            </el-table-column>
+                        </el-table-column>
+                    </el-table-column>
+                </el-table>
+            </pane>
+        </splitpanes>
+
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import { Splitpanes, Pane } from 'splitpanes'
+    import 'splitpanes/dist/splitpanes.css'
+    import ETree from '@/components/ETree/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+    import useAppStore from '@/store/modules/app'
+    const device = computed(() => useAppStore().device);
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE)
+    const stationType = 'A'
+    const eTreeRef = ref(null)
+    let stnmIdsList = []
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmIds) => {
+        stnmIdsList = stnmIds
+        queryParams.stnmIds = stnmIds.join(',')
+        if (stnmIdsList.length == 0) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else if (stnmIdsList.length > 50) {
+            proxy.$modal.msg("站点最多可选择50个");
+            return
+        } else {
+            loading.value = true;
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY'),
+        stnmIds: '',
+        type: 1
+    });
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/report/jsltabledata', queryParams)
+            if (res.code == 0) {
+                let data = res.data
+                // 处理数据格式以适应表格
+                tableData.value = data.map(item => {
+                    // 解析各个时段的数据
+                    const parseData = (dataStr) => {
+                        if (!dataStr) return { jsl: '', month: '', day: '' };
+                        const [jsl, date] = dataStr.split(',');
+                        const [month, day] = date ? date.split('-') : ['', ''];
+                        return { jsl, month, day };
+                    };
+
+                    const data1 = parseData(item.data1);
+                    const data2 = parseData(item.data2);
+                    const data3 = parseData(item.data3);
+                    const data6 = parseData(item.data6);
+                    const data12 = parseData(item.data12);
+                    const data24 = parseData(item.data24);
+                    const data48 = parseData(item.data48);
+                    const data72 = parseData(item.data72);
+
+                    return {
+                        index: item.index,
+                        staid: item.staid,
+                        stnm: item.stnm,
+                        jsl1: data1.jsl,
+                        month1: data1.month,
+                        day1: data1.day,
+                        jsl2: data2.jsl,
+                        month2: data2.month,
+                        day2: data2.day,
+                        jsl3: data3.jsl,
+                        month3: data3.month,
+                        day3: data3.day,
+                        jsl6: data6.jsl,
+                        month6: data6.month,
+                        day6: data6.day,
+                        jsl12: data12.jsl,
+                        month12: data12.month,
+                        day12: data12.day,
+                        jsl24: data24.jsl,
+                        month24: data24.month,
+                        day24: data24.day,
+                        jsl48: data48.jsl,
+                        month48: data48.month,
+                        day48: data48.day,
+                        jsl72: data72.jsl,
+                        month72: data72.month,
+                        day72: data72.day
+                    };
+                });
+            }
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+    // 搜索按钮操作
+    const handleQuery = () => {
+        getList()
+    }
+        // 下载按钮操作
+    const handleExport = () => { }
+
+</script>
+<style scoped lang="scss">
+    /* 隐藏前31行的下边框 */
+    .no-border-table :deep(.el-table__body tr td) {
+        border-bottom: none !important;
+    }
+    .no-border-table :deep(.el-table__body tr:last-child td) {
+        /* border-bottom: 1px solid #000 !important; */
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/report/jslzl/index.vue b/src/views/report/jslzl/index.vue
new file mode 100644
index 0000000..e280d64
--- /dev/null
+++ b/src/views/report/jslzl/index.vue
@@ -0,0 +1,174 @@
+<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="选择站点">
+                    <ESelectSingle ref="eSelectSingle" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading" />
+                </el-form-item>
+                <el-form-item label="年份">
+                    <el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <el-button type="warning" icon="Download" @click="handleExport">下载</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+
+        <div class="el-card-p card-shadow carder-border mt10 pad10" style="max-width: 100%; overflow-x: hidden;padding-top:0" v-loading="loading">
+            <div class="main-table-header sticky-header" style="width: 1200px;margin:0 auto">
+                <div class="table-title">{{tableTitle}}</div>
+                <div class="table-time mb5">
+                    <div>
+                        <span>年份: </span><span id="title1">{{queryParams.year }}</span>
+                    </div>
+                    <div>
+                        <span>测站编码: </span><span id="title2">{{queryParams.stnmId}}</span>
+                    </div>
+                    <div>
+                        <span>单位：</span><span id="title3" class="pl10">降水量(m)</span>
+                    </div>
+                </div>
+            </div>
+            <div style="height:90%;width:1200px;margin:0 auto;display: flex;margin-bottom:20px" >
+                <template v-for="(info,idx) in tableData" :key="idx">
+                    <el-table class="report-table merge-header no-border-table" :data="info" style="width: 100%;" :table-layout="tableLayout">
+                        <el-table-column label="月" :align="alignment" width="45">
+                            <template #default="scope">
+                                <span v-if="scope.row.month !== getPrevRow(scope,'m','1')">
+                                    {{ scope.row.m }}
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="日" :align="alignment" width="45">
+                            <template #default="scope">
+                                <span v-if=" scope.row.day !== getPrevRow(scope,'d','2')">
+                                    {{ scope.row.d }}
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="eh" :align="alignment" width="70" >
+                            <template #header>
+                                <div style="line-height: 1.2;text-align: center;">
+                                    <div>起</div>
+                                    <div>时：分</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="h" :align="alignment" width="70">
+                            <template #header>
+                                <div style="line-height: 1.2;text-align: center;">
+                                    <div>止</div>
+                                    <div>时：分</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="value" label="降水量" :align="alignment">
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import ESelectSingle from '@/components/ESelectSingle/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const stationType = 'A'
+    const tableLayout = ref('fixed')
+    const eSelectSingle = ref(null)
+
+    const handleStationLoading = (loadingState) => {
+        loading.value = loadingState;
+    }
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmId) => {
+        queryParams.stnmId = stnmId
+        if (stnmId == undefined) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else {
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY'),
+        stnmId: ""
+    });
+    const getList = async () => {
+        try {
+            const res = await proxy.axiosPost2('/report/jslzldata', queryParams)
+            if (res.code == 0) {
+                let data = res.data.list
+                tableData.value = data;
+            }
+        } catch (error) {
+            console.error(error)
+        } finally {
+            // 确保在请求完成后隐藏loading
+            loading.value = false
+        }
+    }
+
+    // 优化后的获取上一行月份的方法
+    const getPrevRow = (scope, field, type) => {
+        const rowIndex = scope.$index;
+        const data = scope.store.states.data;
+
+        // 如果是第一行，返回null
+        if (rowIndex === 0) return null;
+
+        // 找到上一个非空行的月份
+        let prevRowIndex = rowIndex - 1;
+        while (prevRowIndex >= 0 && (!data.value[prevRowIndex][field] || data.value[prevRowIndex][field] === '')) {
+            prevRowIndex--;
+        }
+        if (type == '1') {
+            field = 'month'
+        }
+        let result = prevRowIndex >= 0 ? data.value[prevRowIndex][field] : null;
+        // 如果找到有效的上一行数据，返回其月份；否则返回null
+        return result
+    };
+    const isFirstOccurrence = (scope) => {
+        return scope.$index === 0;
+    };
+
+    // 搜索按钮操作
+    const handleQuery = () => {
+        getList()
+    }
+    // 下载按钮操作
+    const handleExport = () => { }
+    onMounted(() => { })
+</script>
+<style scoped lang="scss">
+    .no-border-table :deep(.el-table__body-wrapper .el-table__cell) {
+        border-bottom: 0 !important;
+    }
+
+    .no-border-table :deep(.el-table__body-wrapper .el-table__cell) {
+        padding: 2px 0 !important;
+    }
+
+    /* .no-border-table :deep(.el-table__body-wrapper .el-table__row:nth-child(6n) .el-table__cell) {
+        padding: 10px 0 !important;
+        background-color: #f9f9f9;
+    } */
+</style>
\ No newline at end of file
diff --git a/src/views/report/reportrain/index.vue b/src/views/report/reportrain/index.vue
new file mode 100644
index 0000000..e4e5c4b
--- /dev/null
+++ b/src/views/report/reportrain/index.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="report-rain">
+        <div class="tjfx-menu">
+            <el-select v-model="menu" placeholder="请选择">
+                <el-option v-for="dict in tjfxMenus" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </div>
+        <!-- 添加加载状态和错误提示 -->
+        <div v-if="componentError" class="error-message">
+            <el-empty description="组件加载失败，请刷新页面重试" />
+        </div>
+        <component :is="currentComponent" :tableTitle="tableTitle"></component>
+    </div>
+</template>
+
+<script setup>
+    import { ref, computed, defineAsyncComponent } from 'vue'
+
+
+    // 定义菜单选项
+    const tjfxMenus = [
+        // {
+        //     value: '1',
+        //     label: '降水量、水面蒸发量站一览表'
+        // },
+        // {
+        //     value: '2',
+        //     label: '各站月年降水量对照表'
+        // },
+        {
+            value: '3',
+            label: '逐日降水量表'
+        },
+        {
+            value: '4',
+            label: '降水量摘录表'
+        },
+        {
+            value: '5',
+            label: '各时段最大降水量表(1)'
+        },
+        {
+            value: '6',
+            label: '各时段最大降水量表(2)'
+        },
+        // {
+        //     value: '7',
+        //     label: '蒸发站成果表'
+        // }
+    ]
+
+    // 当前选中的菜单
+    const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '')
+
+    // 动态组件映射
+    const componentMap = {
+        '1': defineAsyncComponent(() => import('@/views/report/jslsmzflylb/index.vue')),
+        '2': defineAsyncComponent(() => import('@/views/report/gzynjsldzb/index.vue')),
+        '3': defineAsyncComponent(() => import('@/views/report/zrjsl/index.vue')),
+        '4': defineAsyncComponent(() => import('@/views/report/jslzl/index.vue')),
+        '5': defineAsyncComponent(() => import('@/views/report/jsltable1/index.vue')),
+        '6': defineAsyncComponent(() => import('@/views/report/jsltable2/index.vue')),
+        '7': defineAsyncComponent(() => import('@/views/report/evaporation/index.vue'))
+    }
+    // 添加错误处理
+    const componentError = ref(false)
+
+    onErrorCaptured((error) => {
+        componentError.value = true
+        return true
+    })
+
+    // 计算当前应该显示的组件
+    const currentComponent = computed(() => {
+        console.log(menu.value, 'menu.value')
+        return componentMap[menu.value]
+    })
+    // 原代码有误，tjfxMenus 中的对象没有 name 属性
+    const tableTitle = computed(() => {
+        const currentItem = tjfxMenus.find(item => item.value === menu.value);
+        return currentItem ? currentItem.label : '';
+    })
+</script>
+
+<style lang="scss">
+    .tjfx-menu {
+        position: absolute;
+        right: 25px;
+        top: 30px;
+        z-index: 999999;
+
+        .el-input__wrapper {
+            background: #10163A;
+        }
+
+        .el-input__inner {
+            background: #10163A;
+            color: #fff;
+            border-color: #10163A;
+        }
+
+        .el-select .el-input .el-select__caret {
+            color: #fff !important;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/report/zrjsl/index.vue b/src/views/report/zrjsl/index.vue
new file mode 100644
index 0000000..bf8d638
--- /dev/null
+++ b/src/views/report/zrjsl/index.vue
@@ -0,0 +1,337 @@
+<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="选择站点">
+                    <ESelectSingle ref="eSelectSingle" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading" />
+                </el-form-item>
+                <el-form-item label="年份">
+                    <el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <el-button type="warning" icon="Download" @click="handleExport">下载</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+
+        <div class="el-card-p card-shadow carder-border mt10 pad10 " style="max-width: 100%; overflow-x: hidden;">
+            <div class="main-table-header" style="width: 70%;margin:0 auto">
+                <div class="table-title">{{tableTitle}}</div>
+                <div class="table-time mb5">
+                    <div>
+                        <span>年份: </span><span id="title1">{{queryParams.year }}</span>
+                    </div>
+                    <div>
+                        <span>测站编码: </span><span id="title2">00</span>
+                    </div>
+                    <div>
+                        <span>单位: </span><span id="title3">降水量(mm)</span>
+                    </div>
+                </div>
+            </div>
+
+            <el-table class="report-table merge-header" v-table-height="{bottom:130}" v-loading="loading" :data="tableData" style="width: 1200px;margin:0 auto" :table-layout="tableLayout" :span-method="arraySpanMethod">
+                <el-table-column prop="value" :align="alignment">
+                    <el-table-column prop="date" width="40" :align="alignment" />
+                    <el-table-column prop="yueTotal" width="40" :align="alignment" />
+                    <template #header>
+                        <div class="diagonal-header">
+                            <svg class="diagonal-line" viewBox="0 0 100 100" preserveAspectRatio="none">
+                                <line x1="0" y1="0" x2="100" y2="100" stroke="#000" stroke-width="1" />
+                            </svg>
+                            <div class="header-month">月份</div>
+                            <div class="header-date">日期</div>
+                        </div>
+                    </template>
+
+                </el-table-column>
+                <el-table-column  v-for="(item, index) in columnData" :key="index" :label="item.label" :align="alignment" :prop="item.prop">
+                </el-table-column>
+            </el-table>
+            <div style="width: 60%;margin:0 auto"> 备注：表格中 ' / '表示该日期整天缺测，其余缺测日期为部分缺测。 </div>
+
+        </div>
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import singleStation from '@/components/SingleStation/index.vue'
+    import ESelectSingle from '@/components/ESelectSingle/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const stationType = 'A'
+    const tableLayout = ref('fixed')
+    const singleStationRef = ref(null)
+    const handleStationLoading = (loadingState) => {
+        loading.value = loadingState;
+    }
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmId) => {
+        console.log(stnmId, '===新增处理站点变化的函数')
+        queryParams.stnmId = stnmId
+        if (stnmId == undefined) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else {
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY')
+    });
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/report/zrjsldata', queryParams)
+            if (res.code == 0) {
+                // let data = res.data
+                let data = []
+                // 生成1~31日数据
+                for (let i = 1; i <= 31; i++) {
+                    let j = i - 1
+                    data.push({
+                        date: i,
+                        yueTotal: '',
+                        Jan: res.data.dayCountData[0][j] || '/',
+                        Feb: res.data.dayCountData[1][j] || '/',
+                        Mar: res.data.dayCountData[2][j] || '/',
+                        Apr: res.data.dayCountData[3][j] || '/',
+                        May: res.data.dayCountData[4][j] || '/',
+                        Jun: res.data.dayCountData[5][j] || '/',
+                        Jul: res.data.dayCountData[6][j] || '/',
+                        Aug: res.data.dayCountData[7][j] || '/',
+                        Sep: res.data.dayCountData[8][j] || '/',
+                        Oct: res.data.dayCountData[9][j] || '/',
+                        Nov: res.data.dayCountData[10][j] || '/',
+                        Dec: res.data.dayCountData[11][j] || '/'
+                    })
+                }
+                let yueList = ['总量', '降水日数', '最大日量']
+
+                for (let i = 0; i < 3; i++) {
+                    data.push(
+                        {
+                            yueTotal: yueList[i],
+                            date: "月统计",
+                            Jan: i == 0 ? res.data.monthCountDays[0] : i == 1 ? res.data.monthSumByDay[0] : i == 2 ? res.data.monthCountSum[0] : '/',
+                            Feb: i == 0 ? res.data.monthCountDays[1] : i == 1 ? res.data.monthSumByDay[1] : i == 2 ? res.data.monthCountSum[1] : '/',
+                            Mar: i == 0 ? res.data.monthCountDays[2] : i == 1 ? res.data.monthSumByDay[2] : i == 2 ? res.data.monthCountSum[2] : '/',
+                            Apr: i == 0 ? res.data.monthCountDays[3] : i == 1 ? res.data.monthSumByDay[3] : i == 2 ? res.data.monthCountSum[3] : '/',
+                            May: i == 0 ? res.data.monthCountDays[4] : i == 1 ? res.data.monthSumByDay[4] : i == 2 ? res.data.monthCountSum[4] : '/',
+                            Jun: i == 0 ? res.data.monthCountDays[5] : i == 1 ? res.data.monthSumByDay[5] : i == 2 ? res.data.monthCountSum[5] : '/',
+                            Jul: i == 0 ? res.data.monthCountDays[6] : i == 1 ? res.data.monthSumByDay[6] : i == 2 ? res.data.monthCountSum[6] : '/',
+                            Aug: i == 0 ? res.data.monthCountDays[7] : i == 1 ? res.data.monthSumByDay[7] : i == 2 ? res.data.monthCountSum[7] : '/',
+                            Sep: i == 0 ? res.data.monthCountDays[8] : i == 1 ? res.data.monthSumByDay[8] : i == 2 ? res.data.monthCountSum[8] : '/',
+                            Oct: i == 0 ? res.data.monthCountDays[9] : i == 1 ? res.data.monthSumByDay[9] : i == 2 ? res.data.monthCountSum[9] : '/',
+                            Nov: i == 0 ? res.data.monthCountDays[10] : i == 1 ? res.data.monthSumByDay[10] : i == 2 ? res.data.monthCountSum[10] : '/',
+                            Dec: i == 0 ? res.data.monthCountDays[11] : i == 1 ? res.data.monthSumByDay[11] : i == 2 ? res.data.monthCountSum[11] : '/'
+
+                        }
+                    )
+                }
+                let nianList = ['降水量', '时段(d)', '最大降水量', '开始日期']
+                for (let i = 0; i < 4; i++) {
+                    data.push(
+                        {
+                            date: "年统计",
+                            yueTotal: '',
+                            Jan: nianList[i],
+                            Feb: i == 0 ? res.data.yearSum : i == 1 ? 1 : i == 2 ? res.data.maxJsl_1.split(',')[0] : i == 3 ? res.data.maxJsl_1.split(',')[1] : '/',
+                            Mar: i == 0 ? '年降水日数' : i == 1 ? 3 : i == 2 ? res.data.maxJsl_3.split(',')[0] : i == 3 ? res.data.maxJsl_3.split(',')[1] : '/',
+                            Apr: i == 0 ? res.data.yearDays : i == 1 ? 7 : i == 2 ? res.data.maxJsl_7.split(',')[0] : i == 3 ? res.data.maxJsl_7.split(',')[1] : '/',
+                            May: i == 0 ? '' : i == 1 ? 15 : i == 2 ? res.data.maxJsl_15.split(',')[0] : i == 3 ? res.data.maxJsl_15.split(',')[1] : '/',
+                            Jun: i == 0 ? '' : i == 1 ? 30 : i == 2 ? res.data.maxJsl_30.split(',')[0] : i == 3 ? res.data.maxJsl_30.split(',')[1] : '/'
+
+                        }
+                    )
+                }
+                // 添加附注行
+                data.push({
+                    date: '附录',
+                    Jan: res.data.fuzhu
+                })
+                tableData.value = data
+
+            }
+            console.log(tableData.value, 'tableData')
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+
+    // 搜索按钮操作
+    const handleQuery = () => {
+        getList()
+    }
+    // 重置按钮操作
+    const resetQuery = () => { }
+    // 下载按钮操作
+    const handleExport = () => { }
+    onMounted(() => { })
+    const columnData = ref([
+        { label: '一月', prop: 'Jan' },
+        { label: '二月', prop: 'Feb' },
+        { label: '三月', prop: 'Mar' },
+        { label: '四月', prop: 'Apr' },
+        { label: '五月', prop: 'May' },
+        { label: '六月', prop: 'Jun' },
+        { label: '七月', prop: 'Jul' },
+        { label: '八月', prop: 'Aug' },
+        { label: '九月', prop: 'Sep' },
+        { label: '十月', prop: 'Oct' },
+        { label: '十一月', prop: 'Nov' },
+        { label: '十二月', prop: 'Dec' }
+    ])
+
+    const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+        let rowList = [31, 32, 33, 34, 35, 36, 37]
+        // 表头行（第一行）合并第一列和第二列
+        if (!rowList.includes(rowIndex)) {
+            if (columnIndex === 0) {
+                // 第一列合并两列
+                return [1, 2];
+            } else if (columnIndex === 1) {
+                // 第二列被合并，不显示
+                return [0, 0];
+            }
+        }
+        // 月统计行合并
+        if (rowIndex >= 31 && rowIndex <= 33) {
+            if (columnIndex === 0) {
+                return rowIndex === 31 ? [3, 1] : [0, 0];
+            }
+            if (columnIndex === 1) return [1, 1];
+        }
+        // 年统计行合并
+        if (rowIndex >= 34 && rowIndex <= 37) {
+            if (columnIndex === 0) {
+                return rowIndex === 34 ? [4, 2] : [0, 0];
+            }
+            if (columnIndex === 1) return [0, 0];
+            if (rowIndex == 34) {
+                if (columnIndex === 1) {
+                    return [1, 2];
+                } else if (columnIndex === 2) {
+                    return [1, 2];
+                } else if (columnIndex === 3) {
+                    return [1, 4];
+                } else if (columnIndex === 4) {
+                    return [1, 2];
+                } else if (columnIndex === 5) {
+                    return [1, 4];
+                } else {
+                    return [0, 0];
+                }
+            }
+            let numList = [2, 3, 4, 5, 6, 7]
+            if (numList.includes(columnIndex)) {
+                // 第三列（yueTotal列）正常显示
+                return [1, 2];
+            } else {
+                return [0, 0]
+            }
+        }
+
+
+        // 附录行合并
+        if (rowIndex === tableData.value.length - 1) {
+            if (columnIndex === 1) {
+                return [1, 2];
+            } else if (columnIndex === 2) {
+                return [1, 12];
+            } else {
+                return [0, 0];
+
+            }
+        }
+        // 其他行不合并
+        return [1, 1];
+    }
+</script>
+<style scoped lang='scss'>
+    /* 斜线表头容器 */
+    .diagonal-header {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 60px;
+        /* 确保有足够空间 */
+    }
+
+    /* SVG 斜线 */
+    .diagonal-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        /* 防止遮挡点击事件 */
+    }
+
+    /* 月份/日期文本样式 */
+    .header-month,
+    .header-date {
+        position: absolute;
+        font-size: 12px;
+        line-height: 1;
+        z-index: 1;
+    }
+
+    /* 右上角月份 */
+    .header-month {
+        top: 10%;
+        right: 10%;
+        text-align: right;
+    }
+
+    /* 左下角日期 */
+    .header-date {
+        bottom: 10%;
+        left: 10%;
+        text-align: left;
+    }
+
+    /* 表头单元格高度调整 */
+    ::v-deep .el-table__header th {
+        padding: 0;
+        height: 60px;
+        /* 增加高度保证斜线效果 */
+    }
+
+    ::v-deep .el-table__header th.el-table__cell>.cell {
+        padding: 0 !important;
+    }
+
+    /* 隐藏子列的表头行 */
+    .merge-header :deep(.el-table__header tr:nth-child(2)) {
+        display: none;
+    }
+
+    /* 隐藏前31行的下边框 */
+    ::v-deep .el-table__body tr:nth-child(-n+30) td,
+    ::v-deep .el-table__body tr:nth-child(32) td,
+    ::v-deep .el-table__body tr:nth-child(33) td {
+        border-bottom: none !important;
+    }
+
+    ::v-deep .el-table__body tr:nth-child(32) td:nth-child(1) {
+        border-bottom: 1px solid #000 !important;
+    }
+</style>
\ No newline at end of file