feat:流量统计

src/components/ChartsBarLine/index.vue

@@ -36,8 +36,8 @@
             type: Object,
             default: () => {
                 return {
-                    left: "5%",
+                    left: '15%',
-                    right: "5%",
+                    right: '15%',
                     bottom: "16%",
                     top: "16%",
                     containLabel: true,
@@ -133,14 +133,26 @@
             }, 100);
         }
     };
-
+    const splitLineColors = [
-
+        '#000', '#ccc', '#ccc', '#ccc', '#ccc',
+        '#ccc', '#ccc', '#ccc', '#ccc', '#ccc',
+        '#ccc', '#ccc', '#ccc', '#ccc', '#000'
+    ];
+    function getSplitLine(index) {
+        return {
+            show: true,
+            lineStyle: {
+                color: splitLineColors,
+                width: 1
+            }
+        }
+    }
     const getChartOption = () => {
         console.log(props.legendData, props.xAxisData, props.seriesData)
         const series = props.seriesData.map((item, index) => {
             const colors = [
                 ["#248ff7", "#6f5be8"],
-                ["#248ff7", "#6f5be8"],
+                ["#EE6666", "#EE6666"],
 
             ];
             const color = colors[index % colors.length];
@@ -198,11 +210,13 @@
                 type: "category",
                 data: props.xAxisData,
                 axisLine: {
+                    show: true,
                     lineStyle: {
                         color: "#ccc",
-                    },
+                        width: 1,
+                    }
                 },
-
+                position: 'bottom',
                 axisLabel: {
                     textStyle: {
                         fontFamily: "Microsoft YaHei",
@@ -235,37 +249,49 @@
             },
 
             yAxis: [
-
-                { // 水位 - 右侧
-                    type: 'value',
-                    name: '水位 (m)',
-                    axisLabel: { color: '#EE6666' },
-                    nameTextStyle: { color: '#EE6666', fontWeight: 'bold' },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "#ccc",
-                        },
-                    },
-                },
                 { // 雨量 - 左侧
                     type: 'value',
                     name: '雨量 (mm)',
                     inverse: true,
                     nameLocation: 'start',
-                    position: 'right',
                     axisLabel: { color: '#1075FD' },
                     nameTextStyle: { color: '#1075FD', fontWeight: 'bold' },
-                    splitLine: {
+                    splitLine: getSplitLine(0),
-                        show: true,
+                },
-                        lineStyle: {
+                { // 水位 - 右侧
-                            color: "#ccc",
+                    type: 'value',
-                        },
+                    name: '水位 (m)',
+                    position: 'right',
+                    axisLabel: { color: '#EE6666' },
+                    nameTextStyle: { color: '#EE6666', fontWeight: 'bold' },
+                    splitLine: getSplitLine(1),
+                },
+            ],
+            dataZoom: [
+                {
+                    type: 'inside', // 内置型数据区域缩放组件
+                    xAxisIndex: [0], // 控制第一个x轴
+                    start: 0,
+                    end: 100
+                },
+                {
+                    type: 'slider', // 滑动条型数据区域缩放组件
+                    xAxisIndex: [0],
+                    start: 0,
+                    end: 100,
+                    bottom: 50, // 距离底部距离
+                    height: 30, // 高度
+                    fillerColor: 'rgba(167,183,204,0.4)', // 选中区域的背景色
+                    borderColor: '#ddd',
+                    textStyle: {
+                        color: '#999'
                     },
-
+                    handleSize: '100%', // 手柄大小
+                    handleStyle: {
+                        color: '#a7b7cc'
+                    }
                 }
             ],
-
             series: series,
         };
 

src/components/ETree/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <el-radio-group class="pad10" v-model="dataType" @change="handleChange" v-if="showRadioGroup">
     <el-radio v-for="item in radioGroup" :value="item.value">{{item.label}}</el-radio>
@@ -88,8 +87,14 @@
   const handleCheckChange = (data, checked, indeterminate) => {
     // 获取当前所有选中的节点
     const checkedNodes = treeRef.value.getCheckedNodes(false, true);
-    // 提取选中节点的ID列表
+    // 筛选出叶子节点（无children属性或者children为空数组）
-    const checkedKeys = checkedNodes.map(node => node.id);
+    const leafNodes = checkedNodes.filter(node =>
+      !node.children || node.children.length === 0
+    );
+
+    // 提取叶子节点的ID列表
+    const checkedKeys = leafNodes.map(node => node.id);
+
     // 发送事件给父组件
     emit('stationChange', checkedKeys);
     emit('loadingChange', true);

src/components/HistoryYOY/index.vue

@@ -328,6 +328,20 @@
             }
         }
     }
+
+    // 禁用开始时间选择器中大于当前时间和结束时间的日期
+    const disabledStartDate = (time) => {
+        const endTime = queryParams.endTime ? dayjs(queryParams.endTime) : null;
+        return dayjs(time).isAfter(dayjs()) ||
+            (endTime && dayjs(time).isAfter(endTime));
+    };
+
+    // 禁用结束时间选择器中大于当前时间和小于开始时间的日期
+    const disabledEndDate = (time) => {
+        const startTime = queryParams.startTime ? dayjs(queryParams.startTime) : null;
+        return dayjs(time).isAfter(dayjs()) ||
+            (startTime && dayjs(time).isBefore(startTime));
+    };
 </script>
 <style scoped lang="scss">
     .no-border-table :deep(.el-table__body-wrapper .el-table__cell) {

src/components/TimeProcess/index.vue

@@ -95,8 +95,8 @@
 		if (stnmIdsList.length == 0) {
 			proxy.$modal.msgWarning("请选择站点后查询");
 			return
-		} else if (stnmIdsList.length > 50) {
+		} else if (stnmIdsList.length > 10) {
-			proxy.$modal.msg("站点最多可选择50个");
+			proxy.$modal.msg("站点最多可选择10个");
 			return
 		} else {
 			getList()

src/components/YearEigenvalue/index.vue

@@ -3,10 +3,10 @@
         <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 class="picker-year" style="width:180px" v-model="queryParams.startTime" type="year" value-format="YYYY" placeholder="选择开始年" @change="handleQuery">
+                    <el-date-picker class="picker-year" style="width:180px" v-model="queryParams.startTime" type="year" value-format="YYYY" format="YYYY" placeholder="选择开始年" @change="handleQuery">
                     </el-date-picker>
                     <span class="pr10 pl10"> - </span>
-                    <el-date-picker class="picker-year" style="width:180px" v-model="queryParams.endTime" type="year" value-format="YYYY" placeholder="选择结束年" @change="handleQuery">
+                    <el-date-picker class="picker-year" style="width:180px" v-model="queryParams.endTime" type="year" value-format="YYYY" format="YYYY" placeholder="选择结束年" @change="handleQuery">
                     </el-date-picker>
                 </el-form-item>
                 <el-form-item>
@@ -30,7 +30,7 @@
                     <div class="table-title">{{tableTitle}}</div>
                 </div>
                 <el-table v-if="direction=='zx'" v-loading="loading" ref="myTable" :data="tableData" v-table-height="{bottom:90}" border :span-method="arraySpanMethod">
-                    <el-table-column prop="station" label="站点" :align="alignment" :rowspan="getRowspan"></el-table-column>
+                    <el-table-column prop="station" label="站点" :align="alignment" ></el-table-column>
                     <el-table-column prop="type" label="" :align="alignment"></el-table-column>
                     <el-table-column :align="alignment" :prop="item.prop" :label="item.label" v-for="(item, index) in tableColumns.filter(col => col.prop !== 'station' && col.prop !== 'type')" :key="index"></el-table-column>
                 </el-table>

src/views/statistic/qflow/qflow.vue

@@ -0,0 +1,11 @@
+<template>
+    <time-process :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :requestPrefixTable="requestPrefixTable" :tableTitle="title"></time-process>
+</template>
+<script setup>
+    import TimeProcess from '@/components/TimeProcess/index.vue'
+    const stationType = ref('E')
+    const fixed = ref(1)
+    const requestPrefix = ref('/ycqflowdata/chartdata')
+    const requestPrefixTable = ref('/ycqflowdata/gettabledataopen')
+    const title = '流量时段过程'
+</script>

src/views/statistic/qflow/qflow_main.vue

@@ -0,0 +1,86 @@
+<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>
+        <!-- 添加加载状态和错误提示 -->
+        <el-empty v-if="componentError" class="error-message" description="组件加载失败，请刷新页面重试" />
+        <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: '历史同期对比'
+        }
+    ]
+
+    // 当前选中的菜单
+     const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '')
+
+    // 动态组件映射
+    const componentMap = {
+        '1': defineAsyncComponent(() => import('@/views/statistic/qflow/qflow.vue')),
+        '2': defineAsyncComponent(() => import('@/views/statistic/qflow/qflowtzz.vue')),
+        '3': defineAsyncComponent(() => import('@/views/statistic/qflow/qflowsd.vue')),
+        '4': defineAsyncComponent(() => import('@/views/statistic/qflow/qflowls.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>

src/views/statistic/qflow/qflowls.vue

@@ -0,0 +1,10 @@
+<template>
+    <history-yoy :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableTitle="title"></history-yoy>
+</template>
+<script setup>
+    import HistoryYoy from '@/components/HistoryYOY/index.vue'
+    const stationType = ref('E')
+    const fixed = ref(1)
+    const requestPrefix = ref('history')
+    const title = '流量历史同期对比'
+</script>

src/views/statistic/qflow/qflowsd.vue

@@ -0,0 +1,10 @@
+<template>
+    <time-count :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableTitle="title"></time-count>
+</template>
+<script setup>
+    import TimeCount from '@/components/TimeCount/index.vue'
+    const stationType = ref('E')
+    const fixed = ref(1)
+    const requestPrefix = ref('sddata')
+    const title = '流量时段统计(m³/s)'
+</script>

src/views/statistic/qflow/qflowtzz.vue

@@ -0,0 +1,11 @@
+<template>
+    <year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableTitle="title" :tableName="tableName"></year-eigenvalue>
+</template>
+<script setup>
+    import YearEigenvalue from '@/components/YearEigenvalue/index.vue'
+    const stationType = ref('E')
+    const fixed = ref(1)
+    const requestPrefix = ref('tzzdatahistory')
+    let title = '流量年特征值表'
+    let tableName=ref('arch_char_q_qflow')
+</script>