From 73b536bb9f59799041ff0c227c61a731a2f79989 Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Wed, 29 Oct 2025 17:10:58 +0800
Subject: [PATCH] =?UTF-8?q?docs=EF=BC=9A=E7=BB=9F=E8=AE=A1=E5=88=86?=
 =?UTF-8?q?=E6=9E=90-=E9=9B=A8=E9=87=8F=E7=BB=9F=E8=AE=A1-=E6=97=B6?=
 =?UTF-8?q?=E6=AE=B5=E9=99=8D=E9=9B=A8=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/common.scss           |  19 +-
 src/components/ChartsBarLine/index.vue  |   2 +-
 src/components/ChartsTimeBar/index.vue  |   2 +-
 src/components/ChartsTimeLine/index.vue |   2 +-
 src/components/ESelectSingle/index.vue  |  18 +-
 src/views/statistic/rain/area_rain.vue  | 502 ++++++++++++++++++++++++
 src/views/statistic/rain/sdjsl.vue      | 261 ++++++++++++
 7 files changed, 788 insertions(+), 18 deletions(-)
 create mode 100644 src/views/statistic/rain/area_rain.vue
 create mode 100644 src/views/statistic/rain/sdjsl.vue

diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index 6053090..baab07b 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -106,6 +106,7 @@
   }
 }
 // 表格始终显示右侧滚动条
+.scrollable-table,
 .scrollable-table .el-table__body-wrapper {
   &::-webkit-scrollbar {
     -webkit-appearance: none;
@@ -117,19 +118,31 @@
     border-radius: 8px;
     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);
   }
 
-  overflow-y: scroll !important;
+  // 确保滚动条始终显示
+  &::-webkit-scrollbar-thumb {
+    visibility: visible !important;
+  }
+
+  overflow-y: auto !important; // 使用 auto 而不是 scroll 避免始终显示滚动条轨道
 }
 
-::v-deep .scrollable-table .el-table__body-wrapper {
-  overflow-x: hidden !important;
+// 确保滚动条始终可见的关键规则
+.scrollable-table::-webkit-scrollbar-thumb {
+  visibility: visible !important;
+  opacity: 1 !important;
 }
 
+::v-deep .scrollable-table .el-table__body-wrapper {
+  overflow-x: auto !important; // 改为 auto 以支持横向滚动
+}
 .vxe-select--panel.is--transfer {
   z-index: 999999 !important;
 }
diff --git a/src/components/ChartsBarLine/index.vue b/src/components/ChartsBarLine/index.vue
index 593a7bf..854a9ff 100644
--- a/src/components/ChartsBarLine/index.vue
+++ b/src/components/ChartsBarLine/index.vue
@@ -148,7 +148,7 @@
             return {
                 name: props.legendData[index],
                 type: item.type,
-                barWidth: "20",
+                barWidth: item.data.length > 100 ? '15%' : "20",
                 yAxisIndex: index,
                 showSymbol: false,
                 itemStyle: {
diff --git a/src/components/ChartsTimeBar/index.vue b/src/components/ChartsTimeBar/index.vue
index 0ca5275..148b878 100644
--- a/src/components/ChartsTimeBar/index.vue
+++ b/src/components/ChartsTimeBar/index.vue
@@ -182,7 +182,7 @@
             return {
                 name: props.legendData[index],
                 type: props.echartType,
-                barWidth: "20",
+                barWidth: item.data.length > 100 ? '15%' : "20",
                 showSymbol: false,
                 itemStyle: {
                     normal: {
diff --git a/src/components/ChartsTimeLine/index.vue b/src/components/ChartsTimeLine/index.vue
index 64d1f54..75437ce 100644
--- a/src/components/ChartsTimeLine/index.vue
+++ b/src/components/ChartsTimeLine/index.vue
@@ -173,7 +173,7 @@
             return {
                 name: props.legendData[index],
                 type: "line",
-                barWidth: "20",
+                barWidth: item.data.length > 100 ? '15%' : "20",
                 showSymbol: false,
                 itemStyle: {
                     normal: {
diff --git a/src/components/ESelectSingle/index.vue b/src/components/ESelectSingle/index.vue
index 638477f..19d506e 100644
--- a/src/components/ESelectSingle/index.vue
+++ b/src/components/ESelectSingle/index.vue
@@ -1,14 +1,7 @@
-<!--
- * @Author: waibao2 1@qq.com
- * @Date: 2025-10-13 14:12:37
- * @LastEditors: waibao2 1@qq.com
- * @LastEditTime: 2025-10-23 11:27:53
- * @FilePath: \qingtian-report-ui\src\components\ESelectSingle\index.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
+
 <template>
   <div class="cascader-container">
-    <el-select-v2 filterable v-model="stnmId" :options="options" :props="defaultProps" placeholder="请选择" @change="handleChange" style="width: 240px" />
+    <el-select-v2 filterable v-model="stnmId" :options="options" :props="defaultProps" placeholder="请选择" @change="(val)=>handleChange(val,name)" style="width: 240px" />
   </div>
 </template>
 
@@ -45,7 +38,9 @@
 
   const stnmId = ref('')
 
-  const handleChange = (val) => {
+  const handleChange = (id,name) => {
+    console.log(id,name)
+    return 
     stnmId.value = val
     emit('stationChange', val, options.value, stnm.value)
     emit('loadingChange', false);
@@ -65,8 +60,7 @@
       }
       await nextTick()
       stnmId.value = options.value[0].stnmId
-      stnm.value = options.value[0].stnm
-
+      stnm.value = options.value[0].stnm || options.value[0].name
       emit('stationChange', stnmId.value, options.value, stnm.value)
 
     } catch (error) {
diff --git a/src/views/statistic/rain/area_rain.vue b/src/views/statistic/rain/area_rain.vue
new file mode 100644
index 0000000..6eb3a9b
--- /dev/null
+++ b/src/views/statistic/rain/area_rain.vue
@@ -0,0 +1,502 @@
+<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-cascader v-model="defaultOption" placeholder="请选择站点" :options="selectOptions" style="width: 250px;" filterable clearable></el-cascader>
+				</el-form-item>
+				<el-form-item label="开始时间">
+					<el-date-picker v-model="queryParams.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" :disabled-date="disabledStartDate">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item label="结束时间">
+					<el-date-picker v-model="queryParams.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item>
+					<el-checkbox v-model="queryParams.xindao" @change='handleQuery' :true-label="1" :false-label="0">遥测数据</el-checkbox>
+				</el-form-item>
+
+				<el-form-item>
+					<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
+					<el-switch class="ml20" v-model="staticType" size="large" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #1890FF" active-text="逐日显示" inactive-text="逐时显示" />
+
+				</el-form-item>
+				<br />
+				<el-form-item label="对比站点">
+					<el-cascader v-model="defaultOption2" placeholder="请选择对比站" :options="selectOptions2" :props="{multiple: true, }" :show-all-levels="false" collapse-tags filterable clearable></el-cascader>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="compareQuery" icon="Search">对比查询</el-button>
+					<el-button type="success" plain icon="Edit" @click="updateData">数据修改</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">
+				<el-collapse v-model="activeName" accordion @change="handleChangeCollapse">
+					<el-collapse-item title="预处理数据" name="1">
+						<el-row :gutter="10" class="mb8">
+							<el-col :span="1.5">
+								<el-button type="warning" plain icon="Download" @click="yclExport">导出 </el-button>
+							</el-col>
+							<el-col :span="1.5">
+								<el-button type="success" plain icon="RefreshRight" @click="yclUpdate"> 整编 </el-button>
+							</el-col>
+						</el-row>
+						<!-- <el-table v-loading="loading" :data="tableData1" height="450" border style="width:100%">
+                            <el-table-column prop="tm" label="时间" width="170">
+                            </el-table-column>
+                            <el-table-column prop="value" label="数值">
+                                <template #default="scope">
+                                    <el-input type="text" v-model="scope.row.value" />
+                                </template>
+                            </el-table-column>
+                        </el-table> -->
+						<vxe-grid v-bind="gridOptions1"></vxe-grid>
+					</el-collapse-item>
+					<el-collapse-item :title="stationType==='A'?'小时数据':'摘录数据'" name="2">
+						<el-row :gutter="10" class="mb8">
+							<el-col :span="1.5">
+								<el-button type="warning" plain icon="Download" @click="hourExport">导出 </el-button>
+							</el-col>
+						</el-row>
+						<!-- <el-table v-loading="loading" :data="tableData1" height="450" border style="width:100%">
+                            <el-table-column prop="tm" label="时间" width="170">
+                            </el-table-column>
+                            <el-table-column prop="value" label="数值">
+                                <template #default="scope">
+                                    <el-input type="text" v-model="scope.row.value" />
+                                </template>
+                            </el-table-column>
+                        </el-table> -->
+						<vxe-grid v-bind="gridOptions2"></vxe-grid>
+					</el-collapse-item>
+					<el-collapse-item title="遥测数据" name="3">
+						<!-- <el-table :data="tableData3" height="450" border>
+                            <el-table-column width="180" :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead" :key="index">
+                            </el-table-column>
+                        </el-table> -->
+						<vxe-grid v-bind="gridOptions3"></vxe-grid>
+					</el-collapse-item>
+				</el-collapse>
+			</pane>
+			<pane :size="100 - firstSize">
+				<div v-table-height='{bottom:0}' style="width:100%;">
+					<TimeBarChart v-loading="echartsLoading" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" />
+				</div>
+			</pane>
+		</splitpanes>
+		<el-dialog class="custom-dialog" title="数据修改" v-model="open" width="500px" append-to-body>
+			<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+				<el-form-item label="修改方式" prop="updateType">
+					<el-select v-model="form.updateType" placeholder="请选择修改方式">
+						<el-option v-for="dict in update_type_options" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="开始时间" v-if="form.updateType!='2'&&form.updateType!=null">
+					<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" class="w320">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item label="结束时间" v-if="form.updateType!='2'&&form.updateType!=null">
+					<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" class="w320">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item label="替换值" v-if="form.updateType=='1'">
+					<el-input v-model="form.value1" placeholder="请输入替换值" style="width:220px" />
+				</el-form-item>
+				<div style="width:80%;margin: 0 auto;" v-if="form.updateType=='2'">
+					<el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
+						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
+						<div class="el-upload__text">
+							将文件拖到此处，或<em>点击上传</em>
+						</div>
+					</el-upload>
+				</div>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button type="primary" @click="submitForm(formRef)" v-loading='btnLoading'>确 定</el-button>
+					<el-button @click="cancel">取 消</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<script setup>
+	import dayjs from 'dayjs';
+	import {
+		Splitpanes,
+		Pane
+	} from 'splitpanes'
+	import 'splitpanes/dist/splitpanes.css'
+	import TimeBarChart from '@/components/ChartsTimeBar/index.vue'
+
+	import useAppStore from '@/store/modules/app'
+	const device = computed(() => useAppStore().device);
+
+	const props = defineProps({
+		stationType: {
+			type: String,
+			default: 'A'
+		},
+		requestPrefix: {
+			type: String,
+			default: '/ycraindata'
+		},
+		fixed: {
+			type: Number,
+			default: 1
+		}
+	})
+	const {
+		proxy
+	} = getCurrentInstance()
+	const { update_type_options } = proxy.useDict("update_type_options")
+
+	const textTitle = computed(() => {
+		switch (props.stationType) {
+			case 'A':
+				return '雨量过程线';
+			case 'B':
+				return '水位过程线';
+			case 'C':
+				return '水位过程线';
+			case 'D':
+				return '潮位过程线';
+			case 'E':
+				return '流量过程线';
+		}
+	});
+	const unit = computed(() => {
+		switch (props.stationType) {
+			case 'A':
+				return 'mm';
+			case 'B':
+				return 'm';
+			case 'C':
+				return 'm';
+			case 'D':
+				return 'm';
+			case 'E':
+				return 'm³/s';
+		}
+	});
+	const echartType = computed(() => {
+		switch (props.stationType) {
+			case 'A':
+				return 'bar';
+			case 'B':
+				return 'line';
+			case 'C':
+				return 'line';
+			case 'D':
+				return 'line';
+			case 'E':
+				return 'line';
+		}
+	});
+	const staticType = ref(0)
+	const queryParams = reactive({
+		startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
+		endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+		xindao: 1,
+		stnmId: null,
+		dataType: staticType.value,
+		chartType: echartType.value
+	});
+
+	// 禁用开始时间选择器中大于当前时间和结束时间的日期
+	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));
+	};
+
+
+	// 获取站点级联选择器数据
+	const selectOptions = ref([]);
+	const selectOptions2 = ref([]);
+	const defaultOption = ref([])
+	const defaultOption2 = ref([])
+	const getSingleStation = async () => {
+		let res = await proxy.axiosGet('/basic/stype/getTreeStation2New/' + props.stationType);
+		if (res.code === 0) {
+			selectOptions.value = res.data;
+			defaultOption.value = res.defaultOption
+			queryParams.stnmId = defaultOption.value.length > 0 ? parseInt(defaultOption.value[2]) : null
+			queryParams.stnmIds = queryParams.stnmId
+			try {
+				await Promise.all([
+					drawTable1(),
+					drawTable2(),
+					drawTable3(),
+					getEchartsData()
+
+				]);
+			} catch (error) {
+				console.error('请求执行出错:', error);
+			}
+		}
+	}
+
+
+	const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE)
+
+	const activeName = ref('1')
+
+	const tableData1 = ref([])
+	const tableData2 = ref([])
+	const tableData3 = ref([])
+	// 折叠面板事件
+	const handleChangeCollapse = (val) => { }
+	// 基础共享配置
+	const baseGridOptions = {
+		border: true,
+		loading: false,
+		showOverflow: false,
+		height: 450,
+		columnConfig: {
+			resizable: true
+		},
+		virtualYConfig: {
+			enabled: true,
+			gt: 0
+		}
+	}
+	// 预处理数据表格配置
+	const gridOptions1 = reactive({
+		...baseGridOptions,
+		columns: [{
+			title: '时间',
+			field: 'tm',
+			width: 160,
+			align: "center"
+		},
+		{
+			title: '数值',
+			field: 'value',
+			align: "center"
+		}
+		],
+		data: []
+	})
+
+
+	// 获取预处理数据
+	const drawTable1 = async () => {
+		gridOptions1.loading = true
+		try {
+			let url = props.requestPrefix + '/originaldata'
+			let res = await proxy.axiosPost2(url, queryParams);
+			if (res.code === 0) {
+				let data = res.data;
+				for (var i = 0; i < data.length; i++) {
+					data[i].value = data[i].value.toFixed(proxy.fixed)
+				}
+				gridOptions1.data = data
+				// selectOptions.value = res.data;
+			}
+
+		} catch (error) {
+		} finally {
+			gridOptions1.loading = false
+		}
+	}
+	// 小时/摘录数据表格配置
+	const gridOptions2 = reactive({
+		...baseGridOptions,
+		columns: [{
+			title: '时间',
+			field: 'tm',
+			width: 160,
+			align: "center"
+		},
+		{
+			title: '数值',
+			field: 'value',
+			align: "center"
+		}
+		],
+		data: []
+	})
+	// 获取小时数居
+	const drawTable2 = async () => {
+		gridOptions2.loading = true
+		try {
+			let url = props.requestPrefix + '/countdata'
+			let res = await proxy.axiosPost2(url, queryParams);
+			if (res.code === 0) {
+				let data = res.data;
+				gridOptions2.data = data
+			}
+			gridOptions2.loading = false
+		} catch (error) {
+			gridOptions2.loading = false
+		}
+	}
+	// 遥测数据表格配置
+	const gridOptions3 = reactive({
+		...baseGridOptions,
+		columns: [],
+		data: []
+	})
+	// 获取遥测数居
+	const drawTable3 = async () => {
+		gridOptions3.loading = true
+		try {
+			let url = props.requestPrefix + '/xindaodaydata'
+			let res = await proxy.axiosPost2(url, queryParams);
+			if (res.code === 0) {
+				let data = res.data;
+				let header = data[0];
+				let tableColumn = []
+				tableColumn.push({
+					field: 'tm',
+					title: '时间',
+					width: 160,
+					align: "center"
+				});
+				for (let k in header) {
+					if (k != 'tm' && k != 'avg') {
+						tableColumn.push({
+							field: k,
+							title: k,
+							width: 100,
+							align: "center"
+						});
+					}
+				}
+				gridOptions3.columns = tableColumn;
+				gridOptions3.data = data
+			}
+			gridOptions3.loading = false
+		} catch (error) {
+			gridOptions3.loading = false
+		}
+	}
+	// 获取echarts数据
+	const legendData = ref([])
+	const xAxisData = ref([])
+	const seriesData = ref([])
+	const echartsLoading = ref(false)
+	const getEchartsData = async () => {
+		echartsLoading.value = true
+		let baseUrl = '/chartdata'
+		if (staticType.value == 1) {
+			baseUrl = "/chartdatabyday";
+		}
+		try {
+			let url = props.requestPrefix + baseUrl
+			let res = await proxy.axiosPost2(url, queryParams);
+			if (res.code === 0) {
+				legendData.value = res.data.legend
+				// 提取每个series中data的第一个元素并格式化时间
+				if (res.data.series && res.data.series.length > 0) {
+					// 假设第一个series的data包含完整的时间点
+					xAxisData.value = res.data.series[0].data.map(item => {
+						// 如果item是对象且包含时间字段
+						if (typeof item === 'object' && item !== null) {
+							// 假设时间字段可能是tm, time, or the first element
+							const timeValue = item.tm || item.time || item[0];
+							return dayjs(timeValue).format('YYYY-MM-DD HH:mm');
+						} else {
+							// 如果item直接就是时间值
+							return dayjs(item).format('YYYY-MM-DD HH:mm');
+						}
+					});
+				}
+				seriesData.value = res.data.series
+			}
+		} catch (error) {
+			console.log(error)
+		} finally {
+			echartsLoading.value = false
+		}
+	};
+
+
+	// 预处理数据导出
+	const yclExport = () => {
+
+	}
+	// 预处理数据整编
+	const yclUpdate = () => {
+
+	}
+
+
+	// 小时数居导出
+	const hourExport = () => { }
+
+	// 查询
+	const handleQuery = async () => {
+		try {
+			await Promise.all([
+				drawTable1(),
+				drawTable2(),
+				drawTable3(),
+				getEchartsData()
+
+			]);
+		} catch (error) {
+			console.error('请求执行出错:', error);
+		}
+	}
+
+	// 对比查询
+	const compareQuery = () => {
+
+	}
+	let open = ref(false)
+	const form = reactive({
+		updateType: null
+	});
+	// 数据修改
+	const updateData = () => {
+		open.value = true
+	}
+	/****************************************************    数据修改弹窗    ******************************************************/
+	let formRef = ref(null)
+	// 取消按钮
+	const cancel = () => {
+		open.value = false;
+		reset();
+	}
+	const reset = () => {
+		Object.assign(form, {});
+		proxy.resetForm("formRef");
+	}
+	/** 提交按钮 */
+	const submitForm = async (formEl) => {
+		if (!formEl) return
+		await formEl.validate(async (valid, fields) => {
+			if (valid) {
+				try {
+					// let res = await proxy.axiosPost('/riverBasin', form);
+					// if (res.code === 0) {
+					// 	proxy.$modal.msgSuccess("修改成功");
+					// 	open.value = false;
+					// 	getList();
+					// }
+				} catch (error) { }
+			}
+		})
+	}
+
+	onMounted(() => {
+		getSingleStation();
+	})
+</script>
+<style lang="scss" scoped>
+	:deep(.el-collapse) {
+		border-top: none !important;
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/statistic/rain/sdjsl.vue b/src/views/statistic/rain/sdjsl.vue
new file mode 100644
index 0000000..2fd3464
--- /dev/null
+++ b/src/views/statistic/rain/sdjsl.vue
@@ -0,0 +1,261 @@
+<template>
+	<div class="app-container app-container-bg">
+		<el-card class="first-card" ref='firstCard' shadow="always">
+			<el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+				<el-form-item label="时间维度">
+					<el-select v-model="queryParams.dataType" placeholder="请选择时间维度" class="w150" @change="changeDataType">
+						<el-option v-for="item in dataTypes" :key="item.value" :label="item.label" :value="item.value">
+						</el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="开始时间">
+					<el-date-picker v-model="queryParams.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" :disabled-date="disabledStartDate" @change="(val)=>changeTime(val,'start')">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item label="结束时间">
+					<el-date-picker v-model="queryParams.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate" @change="(val)=>changeTime(val,'end')">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+		<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">
+				<splitpanes horizontal class="default-theme" :push-other-panes="false">
+					<pane size="50">
+						<BarChart v-loading="echartsLoading" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :echartType="echartType" :grid="grid"  :BarFormatter="false"/>
+						<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-change="changeTabs">
+							<el-tab-pane label="统计图" name="first" style="height:100%">
+								<BarChart v-loading="echartsLoading" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :echartType="echartType" />
+							</el-tab-pane>
+							<el-tab-pane label="趋势图" name="second" style="height:90%">
+								<TimeBarChart v-loading="echartsLoading" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :echartType="echartType" :timeType="timeType" />
+							</el-tab-pane>
+						</el-tabs> -->
+					</pane>
+					<pane size="50" class="mr10">
+						<div class="main-table-header">
+							<div class="table-title">{{tableTitle}}</div>
+							<div class="table-time mb5">
+								<div>
+									<span>时间: </span><span id="title1">{{ tableTime}}</span>
+								</div>
+								<div>
+									<span>单位: </span><span id="title2">mm</span>
+								</div>
+							</div>
+						</div>
+						<el-table class="scrollable-table" v-loading="loading" ref="myTable" :data="tableData" v-table-height="{bottom:90}" border>
+							<el-table-column :align="alignment" :width="item.label == '时间' ? '180': '' " :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead" :key="index"></el-table-column>
+						</el-table>
+					</pane>
+				</splitpanes>
+			</pane>
+		</splitpanes>
+	</div>
+</template>
+<script setup>
+	import dayjs from 'dayjs';
+	import {
+		Splitpanes,
+		Pane
+	} from 'splitpanes'
+	import 'splitpanes/dist/splitpanes.css'
+	import BarChart from '@/components/ChartsBar/index.vue'
+	import TimeBarChart from '@/components/ChartsTimeBar/index.vue'
+	import ETree from '@/components/ETree/index.vue'
+
+	import useAppStore from '@/store/modules/app'
+	const device = computed(() => useAppStore().device);
+
+	const props = defineProps({
+		tableTitle: {
+			type: String,
+			default: '表格标题'
+		},
+	})
+	const { proxy } = getCurrentInstance()
+	const stationType = 'A'
+	const alignment = 'center'
+	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 {
+			getList()
+			getEchartsData()
+		}
+	}
+	const queryParams = reactive({
+		startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD 08:00:00'),
+		endTime: dayjs().format('YYYY-MM-DD 08:00:00'),
+		dataType: '0',
+	});
+
+	// 禁用开始时间选择器中大于当前时间和结束时间的日期
+	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));
+	};
+	const tableTime = ref(queryParams.startTime.substring(0, 16) + " 至 " + queryParams.endTime.substring(0, 16))
+	const timeType = ref('day')
+	// 改变时间纬度
+	const changeDataType = (val) => {
+		queryParams.dataType = val
+		if (val == 0) {
+			tableTime.value = queryParams.startTime.substring(0, 16) + " 至 " + queryParams.endTime.substring(0, 16);
+		} else {
+			tableTime.value = queryParams.startTime.substring(0, 10) + " 至 " + queryParams.endTime.substring(0, 10);
+		}
+		getList()
+	}
+	// 改变时间
+	const changeTime = (val, type = 'start') => {
+		if (type == 'start') {
+			queryParams.startTime = dayjs(val).format('YYYY-MM-DD HH:mm:ss')
+		} else {
+			queryParams.endTime = dayjs(val).format('YYYY-MM-DD HH:mm:ss')
+		}
+	}
+	console.log(proxy, '--------')
+	console.log(proxy.SPLITPANES_CONFIG, '--------')
+	const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE)
+	const activeName = ref('first')
+	const loading = ref(false)
+	const tableData = ref([])
+	const tableHead = ref([])
+	const getList = async () => {
+		loading.value = true;
+		try {
+			let res = await proxy.axiosPost2('/ycraindata/gettabledataopen', queryParams)
+			if (res.code == 0) {
+				tableHead.value = handleTableHead(res.data)
+				let data = res.data.slice(1)
+				if (queryParams.dataType == 0) {
+					data.map(item => { item.tm = item.tm.slice(0, 16) })
+				} else {
+					data.map(item => { item.tm = item.tm.slice(0, 10) })
+				}
+				tableData.value = data
+			}
+		} catch (error) {
+			tableHead.value = [];
+			tableData.value = [];
+		} finally {
+			loading.value = false
+		}
+	}
+	// 假设 res.data 是从接口返回的数据
+	const handleTableHead = (data) => {
+		if (!data || data.length === 0) return [];
+
+		const firstRow = data[0]; // 第一条数据，包含所有字段名
+		const head = [];
+
+		// 添加 "时间" 列
+		head.push({ prop: 'tm', label: '时间' });
+
+		// 遍历 firstRow 的 key-value，提取站点名称作为列名
+		Object.keys(firstRow).forEach(key => {
+			if (key !== 'avg' && key !== 'tm') {
+				head.push({ prop: key, label: firstRow[key] });
+			}
+		});
+
+		// 添加 "平均" 列
+		head.push({ prop: 'avg', label: '平均' });
+
+		return head;
+	};
+	const legendData = ref([])
+	const xAxisData = ref([])
+	const seriesData = ref([])
+	const echartsLoading = ref(false)
+	const getEchartsData = async () => {
+		echartsLoading.value = true
+		let url = '/ycraindata/getrainsumdataopen'
+		if (activeName.value == 'second') {
+			url = '/ycraindata/getRainYearDayChartOption'
+		}
+		try {
+			let res = await proxy.axiosPost2(url, queryParams);
+			if (res.code === 0) {
+				if (activeName.value == 'first') {
+					xAxisData.value = res.data.x
+					seriesData.value = res.data.y
+				}
+				if (activeName.value == 'second') {
+					legendData.value = res.data.legend
+					// 提取每个series中data的第一个元素并格式化时间
+					if (res.data.series && res.data.series.length > 0) {
+						// 假设第一个series的data包含完整的时间点
+						xAxisData.value = res.data.series[0].data.map(item => {
+							// 如果item是对象且包含时间字段
+							if (typeof item === 'object' && item !== null) {
+								// 假设时间字段可能是tm, time, or the first element
+								const timeValue = item.tm || item.time || item[0];
+								return dayjs(timeValue).format('YYYY-MM-DD HH:mm');
+							} else {
+								// 如果item直接就是时间值
+								return dayjs(item).format('YYYY-MM-DD HH:mm');
+							}
+						});
+					}
+					seriesData.value = res.data.series
+				}
+			}
+		} catch (error) {
+
+		} finally {
+			echartsLoading.value = false
+		}
+	};
+	const echartType = ref('bar')
+	const changeTabs = (val) => {
+		activeName.value = val
+		echartType.value = val == 'first' ? 'bar' : 'line'
+		getEchartsData()
+	}
+	const handleQuery = () => {
+		getList()
+		getEchartsData()
+	}
+	const dataTypes = ref([
+		{ label: '小时', value: '0' },
+		{ label: '日', value: '1' }
+	])
+	const grid = {
+		left: "5%",
+		right: "5%",
+		bottom: "10%",
+		top: "10%",
+		containLabel: true,
+	}
+</script>
+<style lang="scss" scoped>
+	:deep(.el-tabs),
+	:deep(.el-tabs .el-tabs__content) {
+		height: 100%;
+	}
+</style>
\ No newline at end of file