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.
337 lines
14 KiB
337 lines
14 KiB
1 month ago
|
<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="选择站点">
|
||
|
|
<ESelectSingle ref="eSelectSingle" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="年份">
|
||
|
|
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false">
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
|
|
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<div class="el-card-p card-shadow carder-border mt10 pad10 " style="max-width: 100%; overflow-x: hidden;">
|
||
|
|
<div class="main-table-header" style="width: 70%;margin:0 auto">
|
||
|
|
<div class="table-title">{{tableTitle}}</div>
|
||
|
|
<div class="table-time mb5">
|
||
|
|
<div>
|
||
|
|
<span>年份: </span><span id="title1">{{queryParams.year }}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>测站编码: </span><span id="title2">00</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>单位: </span><span id="title3">降水量(mm)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table class="report-table merge-header" v-table-height="{bottom:130}" v-loading="loading" :data="tableData" style="width: 1200px;margin:0 auto" :table-layout="tableLayout" :span-method="arraySpanMethod">
|
||
|
|
<el-table-column prop="value" :align="alignment">
|
||
|
|
<el-table-column prop="date" width="40" :align="alignment" />
|
||
|
|
<el-table-column prop="yueTotal" width="40" :align="alignment" />
|
||
|
|
<template #header>
|
||
|
|
<div class="diagonal-header">
|
||
|
|
<svg class="diagonal-line" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||
|
|
<line x1="0" y1="0" x2="100" y2="100" stroke="#000" stroke-width="1" />
|
||
|
|
</svg>
|
||
|
|
<div class="header-month">月份</div>
|
||
|
|
<div class="header-date">日期</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column v-for="(item, index) in columnData" :key="index" :label="item.label" :align="alignment" :prop="item.prop">
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div style="width: 60%;margin:0 auto"> 备注：表格中 ' / '表示该日期整天缺测，其余缺测日期为部分缺测。 </div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import singleStation from '@/components/SingleStation/index.vue'
|
||
|
|
import ESelectSingle from '@/components/ESelectSingle/index.vue'
|
||
|
|
import { ref, reactive, onMounted } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
tableTitle: {
|
||
|
|
type: String,
|
||
|
|
default: '表格标题'
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
const { proxy } = getCurrentInstance()
|
||
|
|
const alignment = 'center'
|
||
|
|
const stationType = 'A'
|
||
|
|
const tableLayout = ref('fixed')
|
||
|
|
const singleStationRef = ref(null)
|
||
|
|
const handleStationLoading = (loadingState) => {
|
||
|
|
loading.value = loadingState;
|
||
|
|
}
|
||
|
|
// 新增处理站点变化的函数
|
||
|
|
const handleStationChange = (stnmId) => {
|
||
|
|
console.log(stnmId, '===新增处理站点变化的函数')
|
||
|
|
queryParams.stnmId = stnmId
|
||
|
|
if (stnmId == undefined) {
|
||
|
|
proxy.$modal.msgWarning("请选择站点后查询");
|
||
|
|
return
|
||
|
|
} else {
|
||
|
|
getList()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const loading = ref(false);
|
||
|
|
const tableData = ref([]);
|
||
|
|
const queryParams = reactive({
|
||
|
|
year: dayjs(new Date()).format('YYYY')
|
||
|
|
});
|
||
|
|
const getList = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
try {
|
||
|
|
const res = await proxy.axiosGet('/report/zrjsldata', queryParams)
|
||
|
|
if (res.code == 0) {
|
||
|
|
// let data = res.data
|
||
|
|
let data = []
|
||
|
|
// 生成1~31日数据
|
||
|
|
for (let i = 1; i <= 31; i++) {
|
||
|
|
let j = i - 1
|
||
|
|
data.push({
|
||
|
|
date: i,
|
||
|
|
yueTotal: '',
|
||
|
|
Jan: res.data.dayCountData[0][j] || '/',
|
||
|
|
Feb: res.data.dayCountData[1][j] || '/',
|
||
|
|
Mar: res.data.dayCountData[2][j] || '/',
|
||
|
|
Apr: res.data.dayCountData[3][j] || '/',
|
||
|
|
May: res.data.dayCountData[4][j] || '/',
|
||
|
|
Jun: res.data.dayCountData[5][j] || '/',
|
||
|
|
Jul: res.data.dayCountData[6][j] || '/',
|
||
|
|
Aug: res.data.dayCountData[7][j] || '/',
|
||
|
|
Sep: res.data.dayCountData[8][j] || '/',
|
||
|
|
Oct: res.data.dayCountData[9][j] || '/',
|
||
|
|
Nov: res.data.dayCountData[10][j] || '/',
|
||
|
|
Dec: res.data.dayCountData[11][j] || '/'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
let yueList = ['总量', '降水日数', '最大日量']
|
||
|
|
|
||
|
|
for (let i = 0; i < 3; i++) {
|
||
|
|
data.push(
|
||
|
|
{
|
||
|
|
yueTotal: yueList[i],
|
||
|
|
date: "月统计",
|
||
|
|
Jan: i == 0 ? res.data.monthCountDays[0] : i == 1 ? res.data.monthSumByDay[0] : i == 2 ? res.data.monthCountSum[0] : '/',
|
||
|
|
Feb: i == 0 ? res.data.monthCountDays[1] : i == 1 ? res.data.monthSumByDay[1] : i == 2 ? res.data.monthCountSum[1] : '/',
|
||
|
|
Mar: i == 0 ? res.data.monthCountDays[2] : i == 1 ? res.data.monthSumByDay[2] : i == 2 ? res.data.monthCountSum[2] : '/',
|
||
|
|
Apr: i == 0 ? res.data.monthCountDays[3] : i == 1 ? res.data.monthSumByDay[3] : i == 2 ? res.data.monthCountSum[3] : '/',
|
||
|
|
May: i == 0 ? res.data.monthCountDays[4] : i == 1 ? res.data.monthSumByDay[4] : i == 2 ? res.data.monthCountSum[4] : '/',
|
||
|
|
Jun: i == 0 ? res.data.monthCountDays[5] : i == 1 ? res.data.monthSumByDay[5] : i == 2 ? res.data.monthCountSum[5] : '/',
|
||
|
|
Jul: i == 0 ? res.data.monthCountDays[6] : i == 1 ? res.data.monthSumByDay[6] : i == 2 ? res.data.monthCountSum[6] : '/',
|
||
|
|
Aug: i == 0 ? res.data.monthCountDays[7] : i == 1 ? res.data.monthSumByDay[7] : i == 2 ? res.data.monthCountSum[7] : '/',
|
||
|
|
Sep: i == 0 ? res.data.monthCountDays[8] : i == 1 ? res.data.monthSumByDay[8] : i == 2 ? res.data.monthCountSum[8] : '/',
|
||
|
|
Oct: i == 0 ? res.data.monthCountDays[9] : i == 1 ? res.data.monthSumByDay[9] : i == 2 ? res.data.monthCountSum[9] : '/',
|
||
|
|
Nov: i == 0 ? res.data.monthCountDays[10] : i == 1 ? res.data.monthSumByDay[10] : i == 2 ? res.data.monthCountSum[10] : '/',
|
||
|
|
Dec: i == 0 ? res.data.monthCountDays[11] : i == 1 ? res.data.monthSumByDay[11] : i == 2 ? res.data.monthCountSum[11] : '/'
|
||
|
|
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
let nianList = ['降水量', '时段(d)', '最大降水量', '开始日期']
|
||
|
|
for (let i = 0; i < 4; i++) {
|
||
|
|
data.push(
|
||
|
|
{
|
||
|
|
date: "年统计",
|
||
|
|
yueTotal: '',
|
||
|
|
Jan: nianList[i],
|
||
|
|
Feb: i == 0 ? res.data.yearSum : i == 1 ? 1 : i == 2 ? res.data.maxJsl_1.split(',')[0] : i == 3 ? res.data.maxJsl_1.split(',')[1] : '/',
|
||
|
|
Mar: i == 0 ? '年降水日数' : i == 1 ? 3 : i == 2 ? res.data.maxJsl_3.split(',')[0] : i == 3 ? res.data.maxJsl_3.split(',')[1] : '/',
|
||
|
|
Apr: i == 0 ? res.data.yearDays : i == 1 ? 7 : i == 2 ? res.data.maxJsl_7.split(',')[0] : i == 3 ? res.data.maxJsl_7.split(',')[1] : '/',
|
||
|
|
May: i == 0 ? '' : i == 1 ? 15 : i == 2 ? res.data.maxJsl_15.split(',')[0] : i == 3 ? res.data.maxJsl_15.split(',')[1] : '/',
|
||
|
|
Jun: i == 0 ? '' : i == 1 ? 30 : i == 2 ? res.data.maxJsl_30.split(',')[0] : i == 3 ? res.data.maxJsl_30.split(',')[1] : '/'
|
||
|
|
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
// 添加附注行
|
||
|
|
data.push({
|
||
|
|
date: '附录',
|
||
|
|
Jan: res.data.fuzhu
|
||
|
|
})
|
||
|
|
tableData.value = data
|
||
|
|
|
||
|
|
}
|
||
|
|
console.log(tableData.value, 'tableData')
|
||
|
|
loading.value = false
|
||
|
|
} catch (error) {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 搜索按钮操作
|
||
|
|
const handleQuery = () => {
|
||
|
|
getList()
|
||
|
|
}
|
||
|
|
// 重置按钮操作
|
||
|
|
const resetQuery = () => { }
|
||
|
|
// 下载按钮操作
|
||
|
|
const handleExport = () => { }
|
||
|
|
onMounted(() => { })
|
||
|
|
const columnData = ref([
|
||
|
|
{ label: '一月', prop: 'Jan' },
|
||
|
|
{ label: '二月', prop: 'Feb' },
|
||
|
|
{ label: '三月', prop: 'Mar' },
|
||
|
|
{ label: '四月', prop: 'Apr' },
|
||
|
|
{ label: '五月', prop: 'May' },
|
||
|
|
{ label: '六月', prop: 'Jun' },
|
||
|
|
{ label: '七月', prop: 'Jul' },
|
||
|
|
{ label: '八月', prop: 'Aug' },
|
||
|
|
{ label: '九月', prop: 'Sep' },
|
||
|
|
{ label: '十月', prop: 'Oct' },
|
||
|
|
{ label: '十一月', prop: 'Nov' },
|
||
|
|
{ label: '十二月', prop: 'Dec' }
|
||
|
|
])
|
||
|
|
|
||
|
|
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
||
|
|
let rowList = [31, 32, 33, 34, 35, 36, 37]
|
||
|
|
// 表头行（第一行）合并第一列和第二列
|
||
|
|
if (!rowList.includes(rowIndex)) {
|
||
|
|
if (columnIndex === 0) {
|
||
|
|
// 第一列合并两列
|
||
|
|
return [1, 2];
|
||
|
|
} else if (columnIndex === 1) {
|
||
|
|
// 第二列被合并，不显示
|
||
|
|
return [0, 0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 月统计行合并
|
||
|
|
if (rowIndex >= 31 && rowIndex <= 33) {
|
||
|
|
if (columnIndex === 0) {
|
||
|
|
return rowIndex === 31 ? [3, 1] : [0, 0];
|
||
|
|
}
|
||
|
|
if (columnIndex === 1) return [1, 1];
|
||
|
|
}
|
||
|
|
// 年统计行合并
|
||
|
|
if (rowIndex >= 34 && rowIndex <= 37) {
|
||
|
|
if (columnIndex === 0) {
|
||
|
|
return rowIndex === 34 ? [4, 2] : [0, 0];
|
||
|
|
}
|
||
|
|
if (columnIndex === 1) return [0, 0];
|
||
|
|
if (rowIndex == 34) {
|
||
|
|
if (columnIndex === 1) {
|
||
|
|
return [1, 2];
|
||
|
|
} else if (columnIndex === 2) {
|
||
|
|
return [1, 2];
|
||
|
|
} else if (columnIndex === 3) {
|
||
|
|
return [1, 4];
|
||
|
|
} else if (columnIndex === 4) {
|
||
|
|
return [1, 2];
|
||
|
|
} else if (columnIndex === 5) {
|
||
|
|
return [1, 4];
|
||
|
|
} else {
|
||
|
|
return [0, 0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
let numList = [2, 3, 4, 5, 6, 7]
|
||
|
|
if (numList.includes(columnIndex)) {
|
||
|
|
// 第三列（yueTotal列）正常显示
|
||
|
|
return [1, 2];
|
||
|
|
} else {
|
||
|
|
return [0, 0]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 附录行合并
|
||
|
|
if (rowIndex === tableData.value.length - 1) {
|
||
|
|
if (columnIndex === 1) {
|
||
|
|
return [1, 2];
|
||
|
|
} else if (columnIndex === 2) {
|
||
|
|
return [1, 12];
|
||
|
|
} else {
|
||
|
|
return [0, 0];
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 其他行不合并
|
||
|
|
return [1, 1];
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
/* 斜线表头容器 */
|
||
|
|
.diagonal-header {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
min-height: 60px;
|
||
|
|
/* 确保有足够空间 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SVG 斜线 */
|
||
|
|
.diagonal-line {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
/* 防止遮挡点击事件 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 月份/日期文本样式 */
|
||
|
|
.header-month,
|
||
|
|
.header-date {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 右上角月份 */
|
||
|
|
.header-month {
|
||
|
|
top: 10%;
|
||
|
|
right: 10%;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 左下角日期 */
|
||
|
|
.header-date {
|
||
|
|
bottom: 10%;
|
||
|
|
left: 10%;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表头单元格高度调整 */
|
||
|
|
::v-deep .el-table__header th {
|
||
|
|
padding: 0;
|
||
|
|
height: 60px;
|
||
|
|
/* 增加高度保证斜线效果 */
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table__header th.el-table__cell>.cell {
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 隐藏子列的表头行 */
|
||
|
|
.merge-header :deep(.el-table__header tr:nth-child(2)) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 隐藏前31行的下边框 */
|
||
|
|
::v-deep .el-table__body tr:nth-child(-n+30) td,
|
||
|
|
::v-deep .el-table__body tr:nth-child(32) td,
|
||
|
|
::v-deep .el-table__body tr:nth-child(33) td {
|
||
|
|
border-bottom: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table__body tr:nth-child(32) td:nth-child(1) {
|
||
|
|
border-bottom: 1px solid #000 !important;
|
||
|
|
}
|
||
|
|
</style>
|