You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
409 lines
12 KiB
409 lines
12 KiB
<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 class="picker-year" v-model="queryParams.startTime" type="year" value-format="YYYY" placeholder="选择开始年"> |
|
</el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="结束时间"> |
|
<el-date-picker class="picker-year" v-model="queryParams.endTime" type="year" value-format="YYYY" placeholder="选择结束年"> |
|
</el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="月份"> |
|
<el-select v-model="queryParams.month" placeholder="请选择月份" class="w150" @change="changeMonth"> |
|
<el-option v-for="dict in interval_options" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button> |
|
</el-form-item> |
|
<br /> |
|
<el-form-item label="报表排列方式（按站点）" style="margin-bottom: 0;"> |
|
<el-radio-group v-model="direction" @change="getList" class="pt10"> |
|
<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(1, 'year').format('YYYY'), |
|
endTime: dayjs().format('YYYY'), |
|
stnmIds: '', |
|
month: dayjs().month() + 1, |
|
}); |
|
|
|
|
|
const tableTitle = computed(() => { |
|
return queryParams.month == 'all' ? '全年历史降水量表' : queryParams.month + '月份历史降水量表'; |
|
}); |
|
const tableColumns = ref([]) |
|
const tableData = ref([]) |
|
|
|
const loading = ref(false) |
|
|
|
// 修改 getList 函数来处理动态列和数据 |
|
const getList = async () => { |
|
loading.value = true; |
|
try { |
|
let res = await proxy.axiosPost2('/report/rainmonthhistory', 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 changeMonth = (val) => { |
|
queryParams.month = val |
|
handleQuery() |
|
} |
|
// 行列合并 |
|
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]; // 默认不合并 |
|
} |
|
|
|
const interval_options = ref([ |
|
{ value: "01", label: "1月" }, |
|
{ value: "02", label: "2月" }, |
|
{ value: "03", label: "3月" }, |
|
{ value: "04", label: "4月" }, |
|
{ value: "05", label: "5月" }, |
|
{ value: "06", label: "6月" }, |
|
{ value: "07", label: "7月" }, |
|
{ value: "08", label: "8月" }, |
|
{ value: "09", label: "9月" }, |
|
{ value: "10", label: "10月" }, |
|
{ value: "11", label: "11月" }, |
|
{ value: "12", label: "12月" }, |
|
{ value: "all", label: "全年" }, |
|
]) |
|
</script> |