From 53fe3581bce78bb3bef8710a2838d86ebeed1ef1 Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Tue, 18 Nov 2025 17:39:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=95=B4=E7=BC=96=E6=88=90=E6=9E=9C-?=
 =?UTF-8?q?=E6=BD=AE=E4=BD=8D=E6=88=90=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/common.scss         |  25 +-
 src/utils/jsencrypt-jd.js             |  29 ++
 src/utils/jsencrypt.js                |   2 +-
 src/views/report/jslzl/index.vue      |   4 +-
 src/views/report/reportrain/index.vue |   8 +-
 src/views/report/reporttide/index.vue |  92 ++++++
 src/views/report/tide2/index.vue      | 408 ++++++++++++++++++++++++
 src/views/report/tide3/index.vue      | 436 ++++++++++++++++++++++++++
 src/views/report/zrjsl/index.vue      |   6 +-
 src/views/report/zrtide/index.vue     | 340 ++++++++++++++++++++
 10 files changed, 1339 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/jsencrypt-jd.js
 create mode 100644 src/views/report/reporttide/index.vue
 create mode 100644 src/views/report/tide2/index.vue
 create mode 100644 src/views/report/tide3/index.vue
 create mode 100644 src/views/report/zrtide/index.vue

diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index baab07b..11b43d6 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -31,7 +31,30 @@
   background-color: #fff;
 }
 .scroll-bar {
-  overflow-y: auto;
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: rgba(144, 147, 153, 0.5);
+    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  // 确保滚动条始终显示
+  &::-webkit-scrollbar-thumb {
+    visibility: visible !important;
+  }
+
+  overflow-y: scroll;
 }
 .card-shadow {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
diff --git a/src/utils/jsencrypt-jd.js b/src/utils/jsencrypt-jd.js
new file mode 100644
index 0000000..8f1022d
--- /dev/null
+++ b/src/utils/jsencrypt-jd.js
@@ -0,0 +1,29 @@
+import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
+
+// 密钥对生成 http://web.chacuo.net/netrsakeypair
+
+const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCbqqN6/gsbl92/fqlVptUBll5x6GVguc9kKjlAjNGGJkjfCP4bwHP2WM6n0ZIPat/EpzhZfZ9HPkVxRi4fgg6Y0naAR0ktTv5jXM8AewjqYyvlKuVD2grEoGfpBJSp2EDHMCS+nPgx8cAfWNrQtztaF7ycV/yY2ahgqEnNdtTIOQIDAQAB'
+
+const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
+  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
+  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
+  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
+  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
+  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
+  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
+  'UP8iWi1Qw0Y='
+
+// 加密
+export function encrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(publicKey) // 设置公钥
+  return encryptor.encrypt(txt) // 对数据进行加密
+}
+
+// 解密
+export function decrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPrivateKey(privateKey) // 设置私钥
+  return encryptor.decrypt(txt) // 对数据进行解密
+}
+
diff --git a/src/utils/jsencrypt.js b/src/utils/jsencrypt.js
index 8f1022d..530a2a9 100644
--- a/src/utils/jsencrypt.js
+++ b/src/utils/jsencrypt.js
@@ -2,7 +2,7 @@ import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
 
 // 密钥对生成 http://web.chacuo.net/netrsakeypair
 
-const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCbqqN6/gsbl92/fqlVptUBll5x6GVguc9kKjlAjNGGJkjfCP4bwHP2WM6n0ZIPat/EpzhZfZ9HPkVxRi4fgg6Y0naAR0ktTv5jXM8AewjqYyvlKuVD2grEoGfpBJSp2EDHMCS+nPgx8cAfWNrQtztaF7ycV/yY2ahgqEnNdtTIOQIDAQAB'
+const publicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0EkxjWtlkeYaSUi0+Pp0Y2XffoxZAy2wr+QkcpHV7Ahy0ZjrEYH445+jTALzUSTGbKoo4eytNjY57DbLKHfGbB3ChSXypabA0IGExkoMjrG0IMdoSAspsbScmHcFKnhTpcIyxVZOt+zC/sMhx4Ac/PBikOdNVuwSlT9TtaqEbSMfKPpLl0h/0FVdSL8+1IphlMt6AmtRtfsqCWMkDmG9dXGqRpKwuU/fRmgk/WBJt5TkZthToOTKfTYgDERl3g2Ru+/ZX5xKkVVbPOlyZkXf8kFh1lI51jqxIu4pINUT2tWmZHe4PmQv2q6QvCkMv7p4ZeRoBa95+zOuEeA4NtaxgwIDAQAB'
 
 const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
   '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
diff --git a/src/views/report/jslzl/index.vue b/src/views/report/jslzl/index.vue
index e280d64..de05fc5 100644
--- a/src/views/report/jslzl/index.vue
+++ b/src/views/report/jslzl/index.vue
@@ -16,8 +16,8 @@
             </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="el-card-p card-shadow carder-border mt10 pad10 scroll-bar" style="max-width: 100%; overflow-x: hidden;padding-top:0" v-loading="loading">
+            <div class="main-table-header " style="width: 1200px;margin:0 auto">
                 <div class="table-title">{{tableTitle}}</div>
                 <div class="table-time mb5">
                     <div>
diff --git a/src/views/report/reportrain/index.vue b/src/views/report/reportrain/index.vue
index e4e5c4b..b84e488 100644
--- a/src/views/report/reportrain/index.vue
+++ b/src/views/report/reportrain/index.vue
@@ -19,10 +19,10 @@
 
     // 定义菜单选项
     const tjfxMenus = [
-        // {
-        //     value: '1',
-        //     label: '降水量、水面蒸发量站一览表'
-        // },
+        {
+            value: '1',
+            label: '降水量、水面蒸发量站一览表'
+        },
         // {
         //     value: '2',
         //     label: '各站月年降水量对照表'
diff --git a/src/views/report/reporttide/index.vue b/src/views/report/reporttide/index.vue
new file mode 100644
index 0000000..0553567
--- /dev/null
+++ b/src/views/report/reporttide/index.vue
@@ -0,0 +1,92 @@
+<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">
+            组件加载失败，请刷新页面重试
+        </div>
+        <component v-else :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: '潮位月年统计表'
+        }
+    ]
+
+    // 当前选中的菜单
+    const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '')
+
+    // 动态组件映射
+    const componentMap = {
+        '1': defineAsyncComponent(() => import('@/views/report/tide3/index.vue')),
+        '2': defineAsyncComponent(() => import('@/views/report/tide1/index.vue')),
+        '3': defineAsyncComponent(() => import('@/views/report/zrtide/index.vue')),
+        '4': defineAsyncComponent(() => import('@/views/report/gzyntidedzb/index.vue')),
+        '5': defineAsyncComponent(() => import('@/views/report/tide2/index.vue')),
+    }
+    // 添加错误处理
+    const componentError = ref(false)
+
+    onErrorCaptured((error) => {
+        componentError.value = true
+        return true
+    })
+
+    // 计算当前应该显示的组件
+    const currentComponent = computed(() => {
+        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/tide2/index.vue b/src/views/report/tide2/index.vue
new file mode 100644
index 0000000..444913b
--- /dev/null
+++ b/src/views/report/tide2/index.vue
@@ -0,0 +1,408 @@
+<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="选择站点">
+                    <singleStation ref="singleStationRef" :stationType="stationType" @stationChange="handleStationChange" />
+                </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 scroll-bar " style="max-width: 100%; overflow-x: hidden;">
+            <div class="main-table-header" style="width: 80%;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>单位：潮差，(m)，历时，(时分)</span>
+                    </div>
+                </div>
+            </div>
+            <el-table class="report-table merge-header" v-loading="loading" :data="tableData" style="width: 80%;margin:0 auto" :table-layout="tableLayout" :span-method="arraySpanMethod" :row-class-name="getRowClassName">
+                <el-table-column v-for="(item, index) in columnData" :key="index" :label="item.label" :align="alignment" :prop="item.prop">
+                    <el-table-column v-if="item.children" v-for="(child, childIndex) in item.children" :key="childIndex" :label="child.label" :prop="child.prop" :width="child.width" :align="alignment">
+                    </el-table-column>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import singleStation from '@/components/SingleStation/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const stationType = 'D'
+    const tableLayout = ref('fixed')
+    const singleStationRef = ref(null)
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmId) => {
+        queryParams.stnmId = stnmId
+        if (stnmId == undefined) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else {
+            loading.value = true;
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY'),
+    });
+    const staid = ref('')
+    const title = ref('')
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/report/tideyntj', queryParams)
+            if (res.code == 0) {
+                if (res.data == null) {
+                    proxy.$modal.msgWarning("该站点没有数据");
+                    tableData.value = []
+                    return
+                }
+                let data = res.data
+                let sourceData = data; // 兼容两种数据格式
+                let list = []
+                for (let i = 0; i < 42; i++) {
+                    let projectText = getProjectText(i);
+                    let typeText = getTypeText(i);
+                    let dateText = getDateText(i);
+                    // 计算应该使用哪一组数据（0-高潮潮位, 1-低潮潮位, 2-涨潮潮差, 3-落潮潮差, 4-涨潮历时, 5-落潮历时）
+                    const dataIndex = Math.floor(i / 7);
+                    // 计算在当前组内的索引（0-6）
+                    const innerIndex = i % 7;
+
+                    // 获取每个月份的值
+                    const monthValues = {};
+                    for (let month = 1; month <= data.length - 1; month++) {
+                        monthValues[getMonthKey(month)] = getValueByRule(sourceData, month, dataIndex, innerIndex);
+                    }
+
+                    // 获取全年值
+                    const allValue = getAllValueByRule(sourceData, dataIndex, innerIndex);
+                    list.push({
+                        Project: projectText,
+                        Type: typeText,
+                        Date: dateText,
+                        ...monthValues,
+                        All: allValue
+                    })
+
+                }
+                // 添加附注行
+                list.push({
+                    Project: '附录',
+                    Jan: res.data.fuzhu
+                })
+                tableData.value = list
+            }
+        } catch (error) {
+
+        } finally {
+            loading.value = false;
+        }
+    }
+    // 获取月份键名
+    const getMonthKey = (month) => {
+        const months = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return months[month];
+    }
+
+    // 根据规则获取值
+    const getValueByRule = (sourceData, month, dataIndex, innerIndex) => {
+        console.log(sourceData, month, dataIndex, innerIndex, 'sourceData, month, dataIndex, innerIndex')
+        // 确保月份数据存在
+        if (!sourceData[month - 1] || !sourceData[month - 1][dataIndex]) {
+            return '';
+        }
+
+        const item = sourceData[month - 1][dataIndex];
+        return getValueFromItemByIndex(item, innerIndex);
+    }
+
+    // 根据索引从项目中获取值
+    const getValueFromItemByIndex = (item, innerIndex) => {
+        switch (innerIndex) {
+            case 0: return item.max || '';
+            case 1: return item.maxDate || '';
+            case 2: return item.maxNDate || '';
+            case 3: return item.min || '';
+            case 4: return item.minDate || '';
+            case 5: return item.minNDate || '';
+            case 6: return item.avg || '';
+            default: return '';
+        }
+    }
+
+    // 获取全年值
+    const getAllValueByRule = (sourceData, dataIndex, innerIndex) => {
+        // 全年数据在最后一个月（13月）或者需要另外计算
+        let idx = sourceData.length - 1;
+        const item = sourceData[idx][dataIndex];
+        if (item) {
+            return getValueFromItemByIndex(item, innerIndex);
+        }
+        return '';
+    }
+    const getProjectText = (i) => {
+        let projectText = '';
+        const groupIndex = Math.floor(i / 7);
+        switch (groupIndex) {
+            case 0:
+                projectText = '高潮潮位(m)';
+                break;
+            case 1:
+                projectText = '低潮潮位(m)';
+                break;
+            case 2:
+                projectText = '涨潮潮差(m)';
+                break;
+            case 3:
+                projectText = '落潮潮差(m)';
+                break;
+            case 4:
+                projectText = '涨潮历时';
+                break;
+            case 5:
+                projectText = '落潮历时';
+                break;
+        }
+        return projectText;
+    }
+    const getTypeText = (i) => {
+        let typeText = '';
+        const innerIndex = i % 7;
+
+        // 修改这里的逻辑，确保平均值行正确设置
+        if (innerIndex === 6) {  // 每组第7行（索引6）应该是平均值
+            // 根据项目类型设置具体的平均值文本
+            const groupIndex = Math.floor(i / 7);
+            switch (groupIndex) {
+                case 0:
+                case 1:
+                    typeText = '平均潮位';
+                    break;
+                case 2:
+                case 3:
+                    typeText = '平均潮差';
+                    break;
+                case 4:
+                case 5:
+                    typeText = '平均历时';
+                    break;
+            }
+        } else if ([0, 1, 2, 7, 8, 9, 14, 15, 16, 21, 22, 23, 28, 29, 30, 35, 36, 37].includes(i)) {
+            typeText = '最高';
+        } else if ([3, 4, 5, 10, 11, 12, 17, 18, 19, 24, 25, 26, 31, 32, 33, 38, 39, 40].includes(i)) {
+            typeText = '最低';
+        }
+        return typeText
+    }
+    const getDateText = (i) => {
+        let dateText = '';
+        switch (i % 7) {
+            case 0:
+                dateText = '潮位';
+                break;
+            case 1:
+                dateText = '公历:日-时.分';
+                break;
+            case 2:
+                dateText = '农历:月-日';
+                break;
+            case 3:
+                dateText = '潮位';
+                break;
+            case 4:
+                dateText = '公历:日-时.分';
+                break;
+            case 5:
+                dateText = '农历:月-日';
+                break;
+        }
+        return dateText
+    }
+    // 搜索按钮操作
+    const handleQuery = () => {
+        getList()
+    }
+    // 下载按钮操作
+    const handleExport = () => { }
+    onMounted(() => { })
+    const columnData = ref([
+        {
+            label: '项目',
+            prop: 'Project',
+            children: [
+                { label: '项目', prop: 'Project', width: 60 },
+                { label: '', prop: 'Type', width: 60 },
+                { label: '', prop: 'Date', width: 120 }
+            ]
+        },
+        { 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' },
+        { label: '全年', prop: 'All' }
+    ])
+
+    const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+        // 处理附录行（最后一行）
+        if (rowIndex === tableData.value.length - 1) {
+            // 附录行的"附录"单元格（第一列）合并前三列
+            if (columnIndex === 0) {
+                return {
+                    rowspan: 1,
+                    colspan: 3
+                };
+            }
+            // 附录行的第二列和第三列需要隐藏
+            else if (columnIndex === 1 || columnIndex === 2) {
+                return {
+                    rowspan: 0,
+                    colspan: 0
+                };
+            }
+            // 附录行从第四列开始（即从"一月"列开始）合并为一列
+            else if (columnIndex === 3) {
+                // 合并剩余的所有列（12个月+全年 = 13列）
+                return {
+                    rowspan: 1,
+                    colspan: 13
+                };
+            }
+            // 附录行的其他数据列隐藏
+            else {
+                return {
+                    rowspan: 0,
+                    colspan: 0
+                };
+            }
+        }
+
+        // 第0列（项目列）每7行合并一次
+        if (columnIndex === 0) {
+            // 每组的第一行显示合并后的单元格
+            if (rowIndex % 7 === 0) {
+                return {
+                    rowspan: 7,
+                    colspan: 1
+                };
+            } else {
+                // 其他行隐藏
+                return {
+                    rowspan: 0,
+                    colspan: 0
+                };
+            }
+        }
+        // 第1列（Type列）按数据内容合并
+        else if (columnIndex === 1) {
+            const innerIndex = rowIndex % 7; // 组内索引(0-6)
+            const isAverage = ['平均潮位', '平均潮差', '平均历时'].includes(tableData.value[rowIndex].Type);
+
+            // 每组第0行，且为"最高"值时，合并前三行
+            if (innerIndex === 0 && tableData.value[rowIndex].Type === '最高') {
+                return {
+                    rowspan: 3,
+                    colspan: 1
+                };
+            }
+            // 每组第3行，且为"最低"值时，合并前三行
+            else if (innerIndex === 3 && tableData.value[rowIndex].Type === '最低') {
+                return {
+                    rowspan: 3,
+                    colspan: 1
+                };
+            }
+            // 每组第6行，且为平均值时，合并两列
+            else if (innerIndex === 6 && isAverage) {
+                return {
+                    rowspan: 1,
+                    colspan: 2
+                };
+            }
+            // 其他需要隐藏的行（包括每组的第1,2,4,5行，以及第6行但不是平均值的情况）
+            else if ([1, 2, 4, 5].includes(innerIndex) ||
+                (innerIndex === 6 && !isAverage) ||
+                (innerIndex === 0 && tableData.value[rowIndex].Type !== '最高') ||
+                (innerIndex === 3 && tableData.value[rowIndex].Type !== '最低')) {
+                return {
+                    rowspan: 0,
+                    colspan: 0
+                };
+            }
+        }
+        // 第2列（Date列）需要处理平均值行的情况
+        else if (columnIndex === 2) {
+            const innerIndex = rowIndex % 7;
+            const isAverage = ['平均潮位', '平均潮差', '平均历时'].includes(tableData.value[rowIndex].Type);
+
+            // 如果第1列是平均值且合并了两列，那么第2列的这一行需要隐藏
+            if (innerIndex === 6 && isAverage) {
+                return {
+                    rowspan: 0,
+                    colspan: 0
+                };
+            }
+        }
+    };
+    const getRowClassName = ({ row, rowIndex }) => {
+        const n = rowIndex + 1; // 转换为从1开始的索引    
+        // 可以用以下方式判断:
+        if (n === 2 || n === 5) return 'small-font-row';
+        if (n === 9 || n === 12) return 'small-font-row';
+        if (n === 16 || n === 19) return 'small-font-row';
+        if (n === 23 || n === 26) return 'small-font-row';
+        if (n === 30 || n === 33) return 'small-font-row';
+        if (n === 37 || n === 40) return 'small-font-row';
+        return '';
+    };
+</script>
+<style scoped lang='scss'>
+    /* 隐藏子列的表头行 */
+    .merge-header :deep(.el-table__header tr:nth-child(2)) {
+        display: none;
+    }
+
+    /* 为特定行添加小字体样式 */
+    :deep(.small-font-row td) {
+        font-size: 12px !important;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/report/tide3/index.vue b/src/views/report/tide3/index.vue
new file mode 100644
index 0000000..be6aea0
--- /dev/null
+++ b/src/views/report/tide3/index.vue
@@ -0,0 +1,436 @@
+<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="选择站点">
+                    <singleStation ref="singleStationRef" :stationType="stationType" @stationChange="handleStationChange" />
+                </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 label="时段">
+                    <el-select v-model="queryParams.month" placeholder="请选择时段" clearable class="w150">
+                        <el-option v-for="dict in monthList" :key="dict.month" :label="dict.monthName" :value="dict.month" />
+                    </el-select>
+                </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">
+                <div class="table-title">{{tableTitle}}</div>
+                <div class="table-time mb5">
+                    <div>
+                        <span>测站编码: </span><span id="title2">{{staid}}</span>
+                    </div>
+                    <div>
+                        <span>{{title}} </span><span id="title3" class="pl10">m= 85基准基准基面以上米数</span>
+                    </div>
+                </div>
+            </div>
+            <el-table class="report-table merge-header" v-table-height="{bottom:130}" v-loading="loading" :data="tableData" style="width: 100%;" :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="90" :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-column label="高潮" :align="alignment">
+                    <el-table-column label='潮时' :align="alignment" />
+                    <el-table-column label='潮高' :align="alignment" />
+                </el-table-column>
+                <el-table-column label="高潮" :align="alignment">
+                    <el-table-column label='潮时' :align="alignment" />
+                    <el-table-column label='潮高' :align="alignment" />
+                </el-table-column>
+                <el-table-column label="低潮" :align="alignment">
+                    <el-table-column label='潮时' :align="alignment" />
+                    <el-table-column label='潮高' :align="alignment" />
+                </el-table-column>
+                <el-table-column label="低潮" :align="alignment">
+                    <el-table-column label='潮时' :align="alignment" />
+                    <el-table-column label='潮高' :align="alignment" />
+                </el-table-column>
+            </el-table>
+            <div class="table-footer">
+                <div class="footer-item">
+                    <span>制表：</span><span></span>
+                    <span></span><span>月</span>
+                    <span></span><span>日</span>
+                </div>
+                <div class="footer-item">
+                    <span>初校：</span><span></span>
+                    <span></span><span>月</span>
+                    <span></span><span>日</span>
+                </div>
+                <div class="footer-item">
+                    <span>复校：</span><span></span>
+                    <span></span><span>月</span>
+                    <span></span><span>日</span>
+                </div>
+                <div class="footer-item">
+                    <span>审查：</span><span></span>
+                    <span></span><span>月</span>
+                    <span></span><span>日</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import singleStation from '@/components/SingleStation/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const stationType = 'D'
+    const tableLayout = ref('fixed')
+    const singleStationRef = ref(null)
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmId) => {
+        queryParams.stnmId = stnmId
+        if (stnmId == undefined) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else {
+            loading.value = true;
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY'),
+        month: '01'
+    });
+    const staid = ref('')
+    const title = ref('')
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/report/gettidehour', queryParams)
+            if (res.code == 0) {
+                staid.value = res.data.staid
+                title.value = res.data.rTitle
+                // 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 < 5; i++) {
+                    data.push(
+                        {
+                            yueTotal: yueList[i],
+                            date: "月统计",
+                            Jan: i == 0 ? res.data.avgList[0] : i == 1 ? res.data.maxList[0] : i == 2 ? res.data.maxDayList[0] : i == 3 ? res.data.minList[0] : i == 4 ? res.data.minDayList[0] : '/',
+                            Feb: i == 0 ? res.data.avgList[1] : i == 1 ? res.data.maxList[1] : i == 2 ? res.data.maxDayList[1] : i == 3 ? res.data.minList[1] : i == 4 ? res.data.minDayList[1] : '/',
+                            Mar: i == 0 ? res.data.avgList[2] : i == 1 ? res.data.maxList[2] : i == 2 ? res.data.maxDayList[2] : i == 3 ? res.data.minList[2] : i == 4 ? res.data.minDayList[2] : '/',
+                            Apr: i == 0 ? res.data.avgList[3] : i == 1 ? res.data.maxList[3] : i == 2 ? res.data.maxDayList[3] : i == 3 ? res.data.minList[3] : i == 4 ? res.data.minDayList[3] : '/',
+                            May: i == 0 ? res.data.avgList[4] : i == 1 ? res.data.maxList[4] : i == 2 ? res.data.maxDayList[4] : i == 3 ? res.data.minList[4] : i == 4 ? res.data.minDayList[4] : '/',
+                            Jun: i == 0 ? res.data.avgList[5] : i == 1 ? res.data.maxList[5] : i == 2 ? res.data.maxDayList[5] : i == 3 ? res.data.minList[5] : i == 4 ? res.data.minDayList[5] : '/',
+                            Jul: i == 0 ? res.data.avgList[6] : i == 1 ? res.data.maxList[6] : i == 2 ? res.data.maxDayList[6] : i == 3 ? res.data.minList[6] : i == 4 ? res.data.minDayList[6] : '/',
+                            Aug: i == 0 ? res.data.avgList[7] : i == 1 ? res.data.maxList[7] : i == 2 ? res.data.maxDayList[7] : i == 3 ? res.data.minList[7] : i == 4 ? res.data.minDayList[7] : '/',
+                            Sep: i == 0 ? res.data.avgList[8] : i == 1 ? res.data.maxList[8] : i == 2 ? res.data.maxDayList[8] : i == 3 ? res.data.minList[8] : i == 4 ? res.data.minDayList[8] : '/',
+                            Oct: i == 0 ? res.data.avgList[9] : i == 1 ? res.data.maxList[9] : i == 2 ? res.data.maxDayList[9] : i == 3 ? res.data.minList[9] : i == 4 ? res.data.minDayList[9] : '/',
+                            Nov: i == 0 ? res.data.avgList[10] : i == 1 ? res.data.maxList[10] : i == 2 ? res.data.maxDayList[10] : i == 3 ? res.data.minList[10] : i == 4 ? res.data.minDayList[10] : '/',
+                            Dec: i == 0 ? res.data.avgList[11] : i == 1 ? res.data.maxList[11] : i == 2 ? res.data.maxDayList[11] : i == 3 ? res.data.minList[11] : i == 4 ? res.data.minDayList[11] : '/'
+
+                        }
+                    )
+                }
+                let yearMaxValue = res.data.yearMax?.replace(/&nbsp;/g, ' ').trim();
+                let yearMinValue = res.data.yearMin?.replace(/&nbsp;/g, ' ').trim();
+
+                let nianList = ['最高水位', '保证率', '水位']
+                for (let i = 0; i < 3; i++) {
+                    data.push(
+                        {
+                            date: "年统计",
+                            yueTotal: '',
+                            Jan: nianList[i],
+                            Feb: i == 0 ? yearMaxValue : i == 1 ? '最高' : i == 2 ? res.data.bz_max : '/',
+                            Mar: i == 0 ? '最低水位' : i == 1 ? '第15天' : i == 2 ? res.data.bz_15 : '/',
+                            Apr: i == 0 ? yearMinValue : i == 1 ? '第30天' : i == 2 ? res.data.bz_30 : '/',
+                            May: i == 0 ? '平均水位' : i == 1 ? '' : i == 2 ? '' : '/',
+                            Jun: i == 0 ? res.data.yearAvg : i == 1 ? '第90天' : i == 2 ? res.data.bz_90 : '/',
+                            Jul: '',
+                            Aug: i == 0 ? '' : i == 1 ? '第180天' : i == 2 ? res.data.bz_180 : '/',
+                            Sep: '',
+                            Oct: i == 0 ? '' : i == 1 ? '第270天' : i == 2 ? res.data.bz_270 : '/',
+                            Nov: '',
+                            Dec: i == 0 ? '' : i == 1 ? '最低' : i == 2 ? res.data.bz_min : '/',
+
+                        }
+                    )
+                }
+                // 添加附注行
+                data.push({
+                    date: '附录',
+                    Jan: res.data.fuzhu
+                })
+                tableData.value = data
+
+            }
+            console.log(tableData.value, 'tableData')
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+    // 改变类型操作
+    const changeStationType = (val) => {
+        queryParams.stationType = val
+        queryParams.type = val == 'B' ? 1 : 0
+    }
+    // 搜索按钮操作
+    const handleQuery = () => {
+        getList()
+    }
+    // 重置按钮操作
+    const resetQuery = () => { }
+    // 下载按钮操作
+    const handleExport = () => { }
+    onMounted(() => { })
+    const columnData = ref([
+        { label: '0', prop: '0' },
+        { label: '1', prop: '1' },
+        { label: '2', prop: '2 ' },
+        { label: '3', prop: '3 ' },
+        { label: '4', prop: '4 ' },
+        { label: '5', prop: '5 ' },
+        { label: '6', prop: '6 ' },
+        { label: '7', prop: '7' },
+        { label: '8', prop: '8' },
+        { label: '9', prop: '9' },
+        { label: '10', prop: '10' },
+        { label: '11', prop: '11' },
+        { label: '12', prop: '12' },
+        { label: '13', prop: '13' },
+        { label: '14', prop: '14' },
+        { label: '15', prop: '15' },
+        { label: '16', prop: '16' },
+        { label: '17', prop: '17' },
+        { label: '18', prop: '18' },
+        { label: '19', prop: '19' },
+        { label: '20', prop: '20' },
+        { label: '21', prop: '21' },
+        { label: '22', prop: '22' },
+        { label: '23', prop: '23' },
+        { label: '总计', prop: 'total' },
+        { label: '平均', prop: 'avg' },
+    ])
+
+    const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+        let rowList = [31, 32, 33, 34, 35, 36, 37, 38]
+        // 表头行（第一行）合并第一列和第二列
+        if (!rowList.includes(rowIndex)) {
+            if (columnIndex === 0) {
+                // 第一列合并两列
+                return [1, 2];
+            } else if (columnIndex === 1) {
+                // 第二列被合并，不显示
+                return [0, 0];
+            }
+        }
+
+        // 月统计行合并
+        if (rowIndex >= 31 && rowIndex <= 35) {
+            if (columnIndex === 0) {
+                return rowIndex === 31 ? [5, 1] : [0, 0];
+            }
+            if (columnIndex === 1) return [1, 1];
+        }
+
+        // 年统计行合并
+        if (rowIndex >= 36 && rowIndex <= 38) {
+            if (columnIndex === 0) {
+                return rowIndex === 36 ? [3, 2] : [0, 0];
+            }
+
+            if (columnIndex === 1) return [0, 0];
+            if (rowIndex == 36) {
+                if (columnIndex === 2) {
+                    return [1, 1];
+                } else if (columnIndex === 3) {
+                    return [1, 3];
+                } else if (columnIndex === 4) {
+                    return [1, 1];
+                } else if (columnIndex === 5) {
+                    return [1, 3];
+                } else if (columnIndex === 6) {
+                    return [1, 1];
+                } else if (columnIndex === 7) {
+                    return [1, 3];
+                } 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];
+    }
+    const monthList = [
+        { month: "01", monthName: "1月" },
+        { month: "02", monthName: "2月" },
+        { month: "03", monthName: "3月" },
+        { month: "04", monthName: "4月" },
+        { month: "05", monthName: "5月" },
+        { month: "06", monthName: "6月" },
+        { month: "07", monthName: "7月" },
+        { month: "08", monthName: "8月" },
+        { month: "09", monthName: "9月" },
+        { month: "10", monthName: "10月" },
+        { month: "11", monthName: "11月" },
+        { month: "12", monthName: "12月" },
+    ]
+</script>
+<style scoped lang='scss'>
+    .table-footer {
+        display: flex;
+        justify-content: space-between;
+        width: 90%;
+        margin: 0 auto;
+
+        .footer-item {
+            width: 25%;
+            margin-right: 20px;
+
+            span:nth-child(1) {
+                display: inline-block;
+                width: 60%;
+            }
+
+            span:nth-child(4) {
+                display: inline-block;
+                width: 20%;
+            }
+        }
+    }
+
+    /* 斜线表头容器 */
+    .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,
+    ::v-deep .el-table__body tr:nth-child(34) td,
+    ::v-deep .el-table__body tr:nth-child(35) 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
diff --git a/src/views/report/zrjsl/index.vue b/src/views/report/zrjsl/index.vue
index bf8d638..c0f7ed4 100644
--- a/src/views/report/zrjsl/index.vue
+++ b/src/views/report/zrjsl/index.vue
@@ -16,7 +16,7 @@
             </el-form>
         </el-card>
 
-        <div class="el-card-p card-shadow carder-border mt10 pad10 " style="max-width: 100%; overflow-x: hidden;">
+        <div class="el-card-p card-shadow carder-border mt10 pad10 scroll-bar " 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">
@@ -32,10 +32,10 @@
                 </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 class="report-table merge-header"  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" />
+                    <el-table-column prop="yueTotal" width="80" :align="alignment" />
                     <template #header>
                         <div class="diagonal-header">
                             <svg class="diagonal-line" viewBox="0 0 100 100" preserveAspectRatio="none">
diff --git a/src/views/report/zrtide/index.vue b/src/views/report/zrtide/index.vue
new file mode 100644
index 0000000..258da00
--- /dev/null
+++ b/src/views/report/zrtide/index.vue
@@ -0,0 +1,340 @@
+<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="选择站点">
+                    <singleStation ref="singleStationRef" :stationType="stationType" @stationChange="handleStationChange" />
+                </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 scroll-bar" 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">{{staid}}</span>
+                    </div>
+                    <div>
+                        <span>{{title}} </span><span id="title3" class="pl10">m= 85基准基准基面以上米数</span>
+                    </div>
+                </div>
+            </div>
+            <el-table class="report-table merge-header"  v-loading="loading" :data="tableData" style="width: 70%;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="90" :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> 备注：表格中 ' / '表示该日期整天缺测，其余缺测日期为部分缺测。 </div> -->
+        </div>
+    </div>
+</template>
+<script setup>
+    import dayjs from 'dayjs';
+    import singleStation from '@/components/SingleStation/index.vue'
+    import { ref, reactive, onMounted } from 'vue';
+
+    const props = defineProps({
+        tableTitle: {
+            type: String,
+            default: '表格标题'
+        },
+
+    })
+
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const stationType = 'D'
+    const tableLayout = ref('fixed')
+    const singleStationRef = ref(null)
+    // 新增处理站点变化的函数
+    const handleStationChange = (stnmId) => {
+        queryParams.stnmId = stnmId
+        if (stnmId == undefined) {
+            proxy.$modal.msgWarning("请选择站点后查询");
+            return
+        } else {
+            loading.value = true;
+            getList()
+        }
+    }
+
+    const loading = ref(false);
+    const tableData = ref([]);
+    const queryParams = reactive({
+        year: dayjs(new Date()).format('YYYY'),
+        type: 0
+    });
+    const staid = ref('')
+    const title = ref('')
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/report/zrtidedata', queryParams)
+            if (res.code == 0) {
+                staid.value = res.data.staid
+                title.value = res.data.title
+                // 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 < 5; i++) {
+                    data.push(
+                        {
+                            yueTotal: yueList[i],
+                            date: "月统计",
+                            Jan: i == 0 ? res.data.avgList[0] : i == 1 ? res.data.maxList[0] : i == 2 ? res.data.maxDayList[0] : i == 3 ? res.data.minList[0] : i == 4 ? res.data.minDayList[0] : '/',
+                            Feb: i == 0 ? res.data.avgList[1] : i == 1 ? res.data.maxList[1] : i == 2 ? res.data.maxDayList[1] : i == 3 ? res.data.minList[1] : i == 4 ? res.data.minDayList[1] : '/',
+                            Mar: i == 0 ? res.data.avgList[2] : i == 1 ? res.data.maxList[2] : i == 2 ? res.data.maxDayList[2] : i == 3 ? res.data.minList[2] : i == 4 ? res.data.minDayList[2] : '/',
+                            Apr: i == 0 ? res.data.avgList[3] : i == 1 ? res.data.maxList[3] : i == 2 ? res.data.maxDayList[3] : i == 3 ? res.data.minList[3] : i == 4 ? res.data.minDayList[3] : '/',
+                            May: i == 0 ? res.data.avgList[4] : i == 1 ? res.data.maxList[4] : i == 2 ? res.data.maxDayList[4] : i == 3 ? res.data.minList[4] : i == 4 ? res.data.minDayList[4] : '/',
+                            Jun: i == 0 ? res.data.avgList[5] : i == 1 ? res.data.maxList[5] : i == 2 ? res.data.maxDayList[5] : i == 3 ? res.data.minList[5] : i == 4 ? res.data.minDayList[5] : '/',
+                            Jul: i == 0 ? res.data.avgList[6] : i == 1 ? res.data.maxList[6] : i == 2 ? res.data.maxDayList[6] : i == 3 ? res.data.minList[6] : i == 4 ? res.data.minDayList[6] : '/',
+                            Aug: i == 0 ? res.data.avgList[7] : i == 1 ? res.data.maxList[7] : i == 2 ? res.data.maxDayList[7] : i == 3 ? res.data.minList[7] : i == 4 ? res.data.minDayList[7] : '/',
+                            Sep: i == 0 ? res.data.avgList[8] : i == 1 ? res.data.maxList[8] : i == 2 ? res.data.maxDayList[8] : i == 3 ? res.data.minList[8] : i == 4 ? res.data.minDayList[8] : '/',
+                            Oct: i == 0 ? res.data.avgList[9] : i == 1 ? res.data.maxList[9] : i == 2 ? res.data.maxDayList[9] : i == 3 ? res.data.minList[9] : i == 4 ? res.data.minDayList[9] : '/',
+                            Nov: i == 0 ? res.data.avgList[10] : i == 1 ? res.data.maxList[10] : i == 2 ? res.data.maxDayList[10] : i == 3 ? res.data.minList[10] : i == 4 ? res.data.minDayList[10] : '/',
+                            Dec: i == 0 ? res.data.avgList[11] : i == 1 ? res.data.maxList[11] : i == 2 ? res.data.maxDayList[11] : i == 3 ? res.data.minList[11] : i == 4 ? res.data.minDayList[11] : '/'
+
+                        }
+                    )
+                }
+                let yearMaxValue = res.data.yearMax?.replace(/&nbsp;/g, ' ').trim();
+                let yearMinValue = res.data.yearMin?.replace(/&nbsp;/g, ' ').trim();
+                let nianList = ['最高潮位']
+                for (let i = 0; i < 1; i++) {
+                    data.push(
+                        {
+                            date: "年统计",
+                            yueTotal: '',
+                            Jan: nianList[i],
+                            Feb: i == 0 ? yearMaxValue : '/',
+                            Mar: i == 0 ? '最低潮位' : '/',
+                            Apr: i == 0 ? yearMinValue : '/',
+                            May: i == 0 ? '平均潮位' : '/',
+                            Jun: i == 0 ? res.data.yearAvg : '/',
+
+                        }
+                    )
+                }
+                // 添加附注行
+                data.push({
+                    date: '附录',
+                    Jan: res.data.fuzhu
+                })
+                tableData.value = data
+
+            }
+            console.log(tableData.value, 'tableData')
+            loading.value = false
+        } catch (error) {
+            loading.value = false
+        }
+    }
+    // 改变类型操作
+    const changeStationType = (val) => {
+        queryParams.stationType = val
+        queryParams.type = val == 'B' ? 1 : 0
+    }
+    // 搜索按钮操作
+    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, 38]
+        // 表头行（第一行）合并第一列和第二列
+        if (!rowList.includes(rowIndex)) {
+            if (columnIndex === 0) {
+                // 第一列合并两列
+                return [1, 2];
+            } else if (columnIndex === 1) {
+                // 第二列被合并，不显示
+                return [0, 0];
+            }
+        }
+
+        // 月统计行合并
+        if (rowIndex >= 31 && rowIndex <= 35) {
+            if (columnIndex === 0) {
+                return rowIndex === 31 ? [5, 1] : [0, 0];
+            }
+            if (columnIndex === 1) return [1, 1];
+        }
+
+        // 年统计行合并
+        if (rowIndex >= 36 && rowIndex <= 38) {
+            if (columnIndex === 0) {
+                return rowIndex === 36 ? [3, 2] : [0, 0];
+            }
+
+            if (columnIndex === 1) return [0, 0];
+            if (rowIndex == 36) {
+                if (columnIndex === 2) {
+                    return [1, 1];
+                } else if (columnIndex === 3) {
+                    return [1, 3];
+                } else if (columnIndex === 4) {
+                    return [1, 1];
+                } else if (columnIndex === 5) {
+                    return [1, 3];
+                } else if (columnIndex === 6) {
+                    return [1, 1];
+                } else if (columnIndex === 7) {
+                    return [1, 3];
+                } 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,
+    ::v-deep .el-table__body tr:nth-child(34) td,
+    ::v-deep .el-table__body tr:nth-child(35) 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