sunli
/
qingtian-report-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
waibao2 1 month ago
parent
92e5113f63
commit
b9a7835628
1 changed files with 410 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 410
      src/views/statistic/rain/lssdyl.vue

410
src/views/statistic/rain/lssdyl.vue
Unescape View File

@ -0,0 +1,410 @@ @@ -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>
Write Preview
Loading…
Cancel
Save