docs：统计分析-雨量统计-历史同期对比

src/views/statistic/rain/lssdyl.vue

@@ -0,0 +1,410 @@
+<template>
+	<div class="app-container app-container-bg">
+		<el-card class="first-card" ref='firstCard' shadow="always">
+			<el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+				<el-form-item label="开始时间">
+					<el-date-picker v-model="queryParams.startTime" type="datetime" value-format="MM-DD" 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="MM-DD" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item label="年份区间">
+					<el-date-picker class="picker-year" style="width:120px" v-model="yearstart" type="year" value-format="YYYY" placeholder="选择开始年">
+					</el-date-picker>
+					<span class="pr10 pl10"> - </span>
+					<el-date-picker class="picker-year" style="width:120px" v-model="yearend" type="year" value-format="YYYY" placeholder="选择结束年">
+					</el-date-picker>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
+				</el-form-item>
+				<br />
+				<el-form-item label="报表排列方式（按站点）">
+					<el-radio-group v-model="direction" @change="getList">
+						<el-radio label="zx">纵向</el-radio>
+						<el-radio label="hx">横向</el-radio>
+					</el-radio-group>
+				</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" @loadingChange="handleStationLoading"></e-tree>
+			</pane>
+			<pane :size="100 - firstSize" style="height: 100%;">
+				<div class="main-table-header">
+					<div class="table-title">{{tableTitle}}</div>
+				</div>
+				<el-table v-if="direction == 'zx'" v-table-height v-loading="loading" :data="tableData" border :span-method="arraySpanMethod">
+					<el-table-column :align="alignment" v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="column.width || 120">
+					</el-table-column>
+				</el-table>
+				<el-table v-if="direction == 'hx'" v-table-height v-loading="loading" :data="tableData" border :span-method="arraySpanMethod">
+					<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="column.width || 120" align="center">
+					</el-table-column>
+				</el-table>
+			</pane>
+		</splitpanes>
+
+	</div>
+</template>
+<script setup>
+	import dayjs from 'dayjs';
+	import {
+		Splitpanes,
+		Pane
+	} from 'splitpanes'
+	import 'splitpanes/dist/splitpanes.css'
+	import ETree from '@/components/ETree/index.vue'
+	import useAppStore from '@/store/modules/app'
+	const device = computed(() => useAppStore().device);
+
+	const props = defineProps({
+	})
+	const {
+		proxy
+	} = getCurrentInstance()
+	const { update_type_options } = proxy.useDict("update_type_options")
+	const stationType = 'A'
+	const alignment = 'center'
+	const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE)
+	const direction = ref('zx')
+	const eTreeRef = ref(null)
+	let stnmIdsList = []
+	const handleStationLoading = (loadingState) => {
+		loading.value = loadingState;
+	}
+	// 新增处理站点变化的函数
+	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()
+
+		}
+	}
+	const yearstart = ref(dayjs().subtract(1, 'year').format('YYYY'))
+	const yearend = ref(dayjs().format('YYYY'))
+	const queryParams = reactive({
+		startTime: dayjs().subtract(30, 'day').format('MM-DD'),
+		endTime: dayjs().format('MM-DD'),
+		years: `${yearstart.value}-${yearend.value}`,
+		stnmIds: '',
+	});
+
+	// 禁用开始时间选择器中大于当前时间和结束时间的日期
+	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 tableTitle = computed(() => {
+		const startFormatted = dayjs(queryParams.startTime, 'MM-DD').format('MM月DD日');
+		const endFormatted = dayjs(queryParams.endTime, 'MM-DD').format('MM月DD日');
+		return `${startFormatted}~${endFormatted}历史同期降水量表(mm)`;
+	});
+
+	const tableColumns = ref([])
+	const tableData = ref([])
+	const loading = ref(false)
+
+	// 修改 getList 函数来处理动态列和数据
+	const getList = async () => {
+		loading.value = true;
+		try {
+			let res = await proxy.axiosPost2('/report/rainhistorycount', queryParams)
+			if (res.code == 0) {
+				if (direction.value == 'zx') {
+					getZXTableData(res)
+				} else {
+					getHXTableData(res)
+				}
+			}
+		} catch (error) {
+			tableColumns.value = [];
+			tableData.value = [];
+		} finally {
+			loading.value = false
+		}
+	}
+
+
+	const getZXTableData = (res) => {
+		const { ys, list } = res.data;
+
+		// 构建表头列
+		let columns = [
+			{
+				prop: "name",
+				label: "站点名称",
+			}
+		];
+
+		// 分离年份数据和统计项数据
+		const yearItems = list.filter(item => !['均值', '最大值', '最小值'].includes(item.year));
+		const statItems = list.filter(item => ['均值', '最大值', '最小值'].includes(item.year));
+
+		// 添加年份列
+		yearItems.forEach(item => {
+			columns.push({
+				prop: item.year,
+				label: item.year
+			});
+		});
+
+		// 添加统计列
+		const statPropMap = {
+			'均值': 'avg',
+			'最大值': 'max',
+			'最小值': 'min'
+		};
+
+		statItems.forEach(item => {
+			const prop = statPropMap[item.year];
+			if (prop) {
+				columns.push({
+					prop: prop,
+					label: item.year
+				});
+			}
+		});
+
+		tableColumns.value = columns;
+
+		// 处理表格数据
+		const processedData = [];
+
+		// 处理站点数据
+		ys.forEach((station) => {
+			const stationId = station.stnmId;
+			// 创建数据行和年份行
+			const dataRow = { name: station.stnm };
+			const yearRow = { name: station.stnm };
+
+			// 填充年份数据
+			yearItems.forEach(yearItem => {
+				const value = yearItem[stationId] || '';
+				dataRow[yearItem.year] = value;
+				yearRow[yearItem.year] = '';
+			});
+
+			// 填充统计值（分离数值和年份）
+			statItems.forEach(statItem => {
+				const prop = statPropMap[statItem.year];
+				if (prop) {
+					const value = statItem[stationId] || '';
+					if (value && value.includes('/')) {
+						const [yearPart, valuePart] = value.split('/');
+						dataRow[prop] = valuePart;
+						yearRow[prop] = yearPart;
+					} else {
+						dataRow[prop] = value;
+						yearRow[prop] = '';
+					}
+				}
+			});
+
+			processedData.push(dataRow);
+			processedData.push(yearRow);
+		});
+
+		// 计算并添加平均行
+		if (ys.length > 0) {
+			const avgDataRow = { name: '平均' };
+			const avgYearRow = { name: '平均' };
+
+			// 计算年份列的平均值
+			yearItems.forEach(yearItem => {
+				const values = ys.map(station => {
+					const stationId = station.stnmId;
+					return parseFloat(yearItem[stationId]) || 0;
+				});
+				const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
+				avgDataRow[yearItem.year] = avg.toFixed(1);
+				avgYearRow[yearItem.year] = '';
+			});
+
+			// 处理统计项的平均值
+			statItems.forEach(statItem => {
+				const prop = statPropMap[statItem.year];
+				if (prop) {
+					const value = statItem.avg || '';
+					if (value && value.includes('/')) {
+						const [yearPart, valuePart] = value.split('/');
+						avgDataRow[prop] = valuePart;
+						avgYearRow[prop] = yearPart;
+					} else {
+						avgDataRow[prop] = value;
+						avgYearRow[prop] = '';
+					}
+				}
+			});
+
+			processedData.push(avgDataRow);
+			processedData.push(avgYearRow);
+		}
+
+		tableData.value = processedData;
+	}
+	const getHXTableData = (res) => {
+		const { ys, list } = res.data;
+
+		// 构建表头列
+		const columns = [
+			{
+				prop: 'year',
+				label: '年份',
+			},
+		];
+
+		ys.forEach(station => {
+			columns.push({
+				prop: station.stnmId,
+				label: station.stnm,
+			});
+		});
+
+		columns.push({
+			prop: 'avg',
+			label: '平均',
+		});
+
+		tableColumns.value = columns;
+
+		const processedData = [];
+
+		// 分离年份和统计项
+		const yearItems = list.filter(item => !['均值', '最大值', '最小值'].includes(item.year));
+		const statItems = list.filter(item => ['均值', '最大值', '最小值'].includes(item.year));
+
+		// 添加年份行
+		yearItems.forEach(item => {
+			const row = { year: item.year };
+			ys.forEach(station => {
+				row[station.stnmId] = item[station.stnmId];
+			});
+			row.avg = item.avg;
+			processedData.push(row);
+		});
+		// 添加统计项行（均值、最大值、最小值）
+		statItems.forEach(statItem => {
+			const statName = statItem.year;
+			const valueRow = { year: statName };
+			// 只有当存在年份信息时，才添加年份行
+			const yearRow = { year: '' };
+
+			// 填充数值行
+			ys.forEach(station => {
+				const value = statItem[station.stnmId];
+				if (value && value.includes('/')) {
+					const [yearPart, valPart] = value.split('/');
+					valueRow[station.stnmId] = valPart;
+				} else {
+					valueRow[station.stnmId] = value;
+				}
+			});
+
+			// 填充平均值
+			if (statItem.avg && statItem.avg.includes('/')) {
+				const [yearPart, valuePart] = statItem.avg.split('/');
+				valueRow.avg = valuePart;
+				yearRow.avg = yearPart;
+			} else {
+				valueRow.avg = statItem.avg;
+				yearRow.avg = '';
+			}
+			processedData.push(valueRow);
+
+			ys.forEach(station => {
+				const value = statItem[station.stnmId];
+				if (value && value.includes('/')) {
+					const [yearPart, _] = value.split('/');
+					yearRow[station.stnmId] = yearPart;
+				} else {
+					yearRow[station.stnmId] = '';
+				}
+			});
+
+			// 如果所有站点都没有年份信息，则不添加该行
+			if (!Object.values(yearRow).some(v => v)) {
+				return; // 跳过空行
+			}
+
+			processedData.push(yearRow);
+		});
+
+		tableData.value = processedData;
+	};
+	// 查询
+	const handleQuery = async () => {
+		getList()
+	}
+	// 行列合并
+
+	const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+		if (direction.value == 'zx') {
+			// 获取总列数
+			const columnCount = tableColumns.value.length;
+
+			// 如果是最后一列（最大值/最小值列），不进行合并
+			if (columnIndex === columnCount - 1 || columnIndex === columnCount - 2) {
+				return [1, 1];
+			}
+
+			// 第一列（站点名称列）的合并逻辑
+			if (columnIndex === 0) {
+				// 每两行合并一次
+				if (rowIndex % 2 === 0) {
+					// 偶数行显示，奇数行隐藏
+					return [2, 1];
+				} else {
+					// 隐藏奇数行
+					return [0, 0];
+				}
+			}
+
+			// 其他数据列的合并逻辑
+			if (rowIndex % 2 === 0) {
+				// 偶数行显示，奇数行隐藏
+				return [2, 1];
+			} else {
+				// 隐藏奇数行
+				return [0, 0];
+			}
+		} else if (direction.value == 'hx') {
+			// 新增 hx 模式下的合并逻辑：基于内容判断
+			if (columnIndex === 0) {
+				const currentRow = row.year;
+				const nextRow = tableData.value[rowIndex + 1]?.year;
+
+				// 如果当前行是“最大值”或“最小值”，且下一行为空（即年份行），则合并两行
+				if ((currentRow === '最大值' || currentRow === '最小值') && !nextRow) {
+					return [2, 1]; // 合并两行
+				}
+				// 如果当前行是空行（即年份行），且上一行是“最大值”或“最小值”，则隐藏当前行
+				if (!currentRow && (tableData.value[rowIndex - 1]?.year === '最大值' || tableData.value[rowIndex - 1]?.year === '最小值')) {
+					return [0, 0]; // 隐藏当前行
+				}
+			}
+		}
+		return [1, 1]; // 默认不合并
+	};
+
+</script>
+<style lang="scss" scoped>
+</style>