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
b9a7835628
commit
3ac19b24c0
9 changed files with 4649 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2101
      src/views/report/dzm/index.vue
  2. 186
      src/views/report/swjsldzb/index.vue
  3. 114
      src/views/statistic/rain/byjc.vue
  4. 409
      src/views/statistic/rain/jslmonth.vue
  5. 302
      src/views/statistic/rain/jsltzz.vue
  6. 502
      src/views/statistic/rain/lxwy.vue
  7. 502
      src/views/statistic/rain/lxyy.vue
  8. 123
      src/views/statistic/rain/rain_main.vue
  9. 410
      src/views/statistic/rain/sdjyjz.vue

2101
src/views/report/dzm/index.vue
View File

File diff suppressed because it is too large Load Diff

186
src/views/report/swjsldzb/index.vue
Unescape View File

@ -0,0 +1,186 @@
<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-tree-select filterable :props="{ value: 'stnmId', label: 'name' }" v-model="queryParams.stnmId" style="width: 240px" :data="treeSelectOptions" node-key="id" />
</el-form-item>
<el-form-item label="时段">
<el-select v-model="queryParams.sType" placeholder="请选择时段" class="w150" @change="handleQuery">
<el-option v-for="dict in mainTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</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-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
</el-form-item>
</el-form>
</el-card>
<splitpanes horizontal class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box" :push-other-panes="false" v-loading="loading">
<pane size="100">
<div v-table-height='{bottom:0}' style="width:100%;">
<BarLineChart :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" />
</div>
</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="title2">雨量(mm),水位(m)</span>
</div>
</div>
</div>
<el-table ref="myTable" :data="tableData" v-table-height="{bottom:90}" border>
<el-table-column label="序号" type="index" :align="alignment" width="60"></el-table-column>
<el-table-column label="站名" :align="alignment" prop="stnm" />
<el-table-column label="时间" :align="alignment" prop="tm" />
<el-table-column label="雨量" :align="alignment" prop="rainValue" />
<el-table-column label="水位" :align="alignment" prop="waterValue" />
</el-table>
</pane> -->
</splitpanes>
</div>
</template>
<script setup>
import dayjs from 'dayjs';
import {
Splitpanes,
Pane
} from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import BarLineChart from '@/components/ChartsBarLine/index.vue'
const {
proxy
} = getCurrentInstance()
const mainTypes = ref([
{
name: '分钟',
value: '0'
},
{
name: '小时',
value: '1'
},
{
name: '天',
value: '2'
}
])
const tableTitle = '时段雨量、水位'
const alignment = 'center'
const queryParams = reactive({
startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
stnmId: '',
type: "",
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 loading = ref(false)
const tableData = ref([])
const legendData = ref([])
const xAxisData = ref([])
const seriesData = ref([])
const getList = async () => {
loading.value = true;
try {
let res = await proxy.axiosPost2('/report/swjslzdb2', queryParams)
if (res.code == 0) {
tableData.value = res.data?.tableData || []
let list = res.data
legendData.value = list.map(item => item.name)
seriesData.value = list
if (list && list.length > 0 && list[0].data) {
// 假设第一个series的data包含完整的时间点
xAxisData.value = list[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');
}
});
}
console.log(legendData, xAxisData, seriesData, '======')
}
} catch (error) {
tableData.value = [];
} finally {
loading.value = false
}
}
const treeSelectOptions = ref([])
const getTreeStation = async () => {
try {
let res = await proxy.axiosGet('/basic/stype/getTreeStationABC');
if (res.code == 0) {
treeSelectOptions.value = res.data
// 设置默认值为第一个叶子节点的stnmId
if (treeSelectOptions.value.length > 0) {
const firstLeafNode = findFirstLeafNode(treeSelectOptions.value);
if (firstLeafNode) {
queryParams.stnmId = firstLeafNode.stnmId;
nextTick(() => {
getList()
})
}
}
}
} catch (error) {
}
}
// 查找树结构中的第一个叶子节点
const findFirstLeafNode = (nodes) => {
for (let node of nodes) {
// 如果节点有子节点，则递归查找
if (node.children && node.children.length > 0) {
const leaf = findFirstLeafNode(node.children);
if (leaf) {
return leaf;
}
}
// 如果节点没有子节点，则为叶子节点
else if (node.stnmId) {
return node;
}
}
return null;
}
const handleQuery = () => {
getList()
}
onMounted(() => {
getTreeStation()
})
</script>

114
src/views/statistic/rain/byjc.vue
Unescape View File

@ -0,0 +1,114 @@
<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.comUnit" placeholder="请选择" style="width: 60px;">
<el-option label="≥" value="ge"></el-option>
<el-option label=">" value="gt"></el-option>
</el-select>
<el-input v-model="queryParams.value" placeholder="请输入内容" style="width: 100px;" @keyup.enter.native="handleQuery"></el-input>
</el-form-item>
<el-form-item label="频次">
<el-select v-model="queryParams.type" placeholder="请选择频次" class="w150" @change="handleQuery">
<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" placeholder="选择开始时间" class="w200">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间" class="w200">
</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>
<div class="el-card-p card-shadow carder-border mt10 pad10 ">
<el-table class="table-box" v-table-height v-loading="loading" :data="tableData" border>
<el-table-column type="index" width="55" :align="alignment" label="序号" />
<el-table-column prop="stnmId" label="站码" :align="alignment">
</el-table-column>
<el-table-column prop="stnm" label="站名" :align="alignment">
</el-table-column>
<el-table-column prop="field" label="时间" :align="alignment">
</el-table-column>
<el-table-column prop="maxValue" label="雨量" :align="alignment">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, } from 'vue'
import dayjs from 'dayjs';
const { proxy } = getCurrentInstance()
const alignment = 'center'
const queryParams = reactive({
startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD 08:00:00'),
endTime: dayjs().format('YYYY-MM-DD 08:00:00'),
comUnit: 'ge',
type: '1',
value: '1',
})
const loading = ref(false)
const tableData = ref([])
const getList = async () => {
loading.value = true;
try {
const res = await proxy.axiosPost('/report/byjc', queryParams)
if (res.code == 0) {
let data = res.data
tableData.value = data.map(item => {
item.field = item.field == " " ? '-' : item.field
return item
})
}
} catch (error) {
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
const dataTypes = [
{
label: "1小时",
value: "1"
}, {
label: "2小时",
value: "2"
},
{
label: "3小时",
value: "3"
},
{
label: "6小时",
value: "6"
},
{
label: "12小时",
value: "12"
},
{
label: "24小时",
value: "24"
}
]
onMounted(() => {
getList()
})
</script>

409
src/views/statistic/rain/jslmonth.vue
Unescape View File

@ -0,0 +1,409 @@
<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="报表排列方式（按站点）">
<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(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>

302
src/views/statistic/rain/jsltzz.vue
Unescape View File

@ -0,0 +1,302 @@
<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" style="width:120px" v-model="queryParams.startTime" type="year" value-format="YYYY" placeholder="选择开始年" @change="handleQuery">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker class="picker-year" style="width:120px" v-model="queryParams.endTime" type="year" value-format="YYYY" placeholder="选择结束年" @change="handleQuery">
</el-date-picker>
</el-form-item>
<el-form-item label="时段">
<el-select v-model="queryParams.interval" placeholder="请选择时段" class="w150" @change="handleQuery">
<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="报表排列方式（按站点）">
<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 label="年份" prop="time" :align="alignment"></el-table-column>
<el-table-column :align="alignment" v-for="(column, index) in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="120">
<el-table-column label="雨量" :prop="'rain'+index" :align="alignment"></el-table-column>
<el-table-column label="时间" :prop="'tm'+index" :align="alignment"></el-table-column>
</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 { interval_options } = proxy.useDict("interval_options")
let interval_options = ref([
{ value: 10, label: "10分钟" },
{ value: 20, label: "20分钟" },
{ value: 30, label: "30分钟" },
{ value: 45, label: "45分钟" },
{ value: 60, label: "60分钟" },
{ value: 90, label: "90分钟" },
{ value: 120, label: "120分钟" },
{ value: 180, label: "180分钟" },
{ value: 240, label: "240分钟" },
{ value: 360, label: "360分钟" },
{ value: 540, label: "540分钟" },
{ value: 720, label: "720分钟" },
{ value: 1440, label: "1440分钟" },
{ value: 1, label: "1小时" },
{ value: 2, label: "2小时" },
{ value: 3, label: "3小时" },
{ value: 6, label: "6小时" },
{ value: 12, label: "12小时" },
{ value: 24, label: "24小时" },
{ value: 48, label: "48小时" },
{ value: -3, label: "3天" },
])
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 queryParams = reactive({
startTime: dayjs().subtract(1, 'year').format('YYYY'),
endTime: dayjs().format('YYYY'),
stnmIds: '',
interval: 10,
});
const tableTitle = '降水量特征值表(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/raintzzhistory', 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) => {
let { year, list, name, max, min } = res.data;
let columns = [
{
prop: "station",
label: "站点"
},
{
prop: "type",
label: ""
}
]
// 添加站点列
year.forEach(item => {
columns.push({
prop: item,
label: item
});
});
columns.push(
{
prop: "max",
label: "最大值",
},
{
prop: "min",
label: "最小值",
}
);
tableColumns.value = columns
// 处理数据部分 - 构造两行合并的数据结构
const processedData = [];
list.forEach((item, index) => {
// 第一行：显示站点名称和"雨量"
const row1 = {
station: name[index],
type: "雨量"
};
// 填充年份数据
year.forEach(y => {
row1[y] = item[0].value ? item[0].value.toFixed(1) : '-';
});
// 处理最大值和最小值的第一部分（数值）
row1.max = max[index] && max[index].value ? max[index].value.toFixed(1) : '';
row1.min = min[index] && min[index].value ? min[index].value.toFixed(1) : '';
// // 第二行：显示空的站点名称和"时间"
const row2 = {
station: name[index],
type: "时间"
};
// 填充年份数据对应的时间
year.forEach(y => {
row2[y] = item[0].tm ? item[0].tm.slice(5) : '-';
});
// 处理最大值和最小值的第二部分（时间）
row2.max = max[index] && max[index].tm ? max[index].tm : '';
row2.min = min[index] && min[index].tm ? min[index].tm : '';
processedData.push(row1);
processedData.push(row2);
});
console.log(processedData, 'processedData')
tableData.value = processedData;
}
const getHXTableData = (res) => {
const { year, list, name, max, min } = res.data;
if (!year || !list || !name || !max || !min) {
console.error('数据缺失:', { year, list, name, max, min });
tableData.value = [];
return;
}
const columns = name.map(stationName => ({
prop: stationName,
label: stationName
}));
tableColumns.value = columns;
console.log(columns, 'tableColumns')
const processedData = [];
// 添加年份行
year.forEach(y => {
const row = { time: y };
name.forEach((stationName, idx) => {
const stationIndex = name.indexOf(stationName);
const stationList = list[stationIndex];
if (!stationList || stationList.length === 0) {
row[stationName] = { rain: '-', tm: '-' };
return;
}
const valueItem = stationList[0]; // 假设只有一个记录
row['rain' + idx] = valueItem.value ? valueItem.value.toFixed(1) : '-'
row['tm' + idx] = valueItem.tm ? valueItem.tm.slice(5) : '-'
});
processedData.push(row);
});
// 添加最大值行
processedData.push({
time: '最大值',
...name.reduce((acc, stationName, index) => {
acc['rain' + index] = max[index]?.value ? max[index]?.value.toFixed(1) : '-';
acc['tm' + index] = max[index]?.tm ? max[index].tm : '-';
return acc;
}, {})
});
// 添加最小值行
processedData.push({
time: '最小值',
...name.reduce((acc, stationName, index) => {
acc['rain' + index] = min[index]?.value ? min[index]?.value.toFixed(1) : '-';
acc['tm' + index] = min[index]?.tm ? min[index].tm : '-';
return acc;
}, {})
});
tableData.value = processedData;
};
// 查询
const handleQuery = async () => {
getList()
}
// 行列合并
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (direction.value == 'zx') {
if (columnIndex === 0) {
// 每两行合并一次
if (rowIndex % 2 === 0) {
// 偶数行显示，奇数行隐藏
return [2, 1];
} else {
// 隐藏奇数行
return [0, 0];
}
}
} else {
}
}
</script>
<style lang="scss" scoped>
</style>

502
src/views/statistic/rain/lxwy.vue
Unescape View File

@ -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>

502
src/views/statistic/rain/lxyy.vue
Unescape View File

@ -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>

123
src/views/statistic/rain/rain_main.vue
Unescape View File

@ -0,0 +1,123 @@
<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: '历史降雨量'
},
{
value: '5',
label: '雨量等值面'
},
{
value: '6',
label: '雨量水位对照'
},
// {
// value: '7',
// label: '面平均降雨量'
// },
{
value: '8',
label: '暴雨检索'
},
// {
// value: '9',
// label: '连续无雨日统计'
// },
// {
// value: '10',
// label: '有效降雨日统计'
// },
{
value: '11',
label: '时段降雨极值'
},
]
// 当前选中的菜单
const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '')
// const menu = ref('5')
// 动态组件映射
const componentMap = {
'1': defineAsyncComponent(() => import('@/views/statistic/rain/sdjsl.vue')),
'2': defineAsyncComponent(() => import('@/views/statistic/rain/lssdyl.vue')),
'3': defineAsyncComponent(() => import('@/views/statistic/rain/jsltzz.vue')),
'4': defineAsyncComponent(() => import('@/views/statistic/rain/jslmonth.vue')),
'5': defineAsyncComponent(() => import('@/views/report/dzm/index.vue')),
'6': defineAsyncComponent(() => import('@/views/report/swjsldzb/index.vue')),
'7': defineAsyncComponent(() => import('@/views/statistic/rain/area_rain.vue')),
'8': defineAsyncComponent(() => import('@/views/statistic/rain/byjc.vue')),
'9': defineAsyncComponent(() => import('@/views/statistic/rain/lxwy.vue')),
'10': defineAsyncComponent(() => import('@/views/statistic/rain/lxyy.vue')),
'11': defineAsyncComponent(() => import('@/views/statistic/rain/sdjyjz.vue'))
}
// 添加错误处理
const componentError = ref(false)
onErrorCaptured((error) => {
console.log(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>

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

@ -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