waibao2
3 days ago
5 changed files with 391 additions and 135 deletions
@ -0,0 +1,353 @@ |
|||||||
|
<!-- 蒸发站成果表 --> |
||||||
|
<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="选择站点"> |
||||||
|
<singleStation ref="singleStationRef" :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 scroll-bar" 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">{{queryParams.stnmId}}</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>蒸发器位置特征: </span><span id="title3"></span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>蒸发器型式: </span><span id="title4"></span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>单位: </span><span id="title6"></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table class="report-table merge-header" style="width: 70%;margin:0 auto" v-loading="loading" :data="tableData" :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="90" :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> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import dayjs from 'dayjs'; |
||||||
|
import singleStation from '@/components/SingleStation/index.vue' |
||||||
|
import { ref, reactive, onMounted } from 'vue'; |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
tableTitle: { |
||||||
|
type: String, |
||||||
|
default: '表格标题' |
||||||
|
}, |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() |
||||||
|
const alignment = 'center' |
||||||
|
const stationType = 'F' |
||||||
|
const tableLayout = ref('fixed') |
||||||
|
const singleStationRef = ref(null) |
||||||
|
const handleStationLoading = (loadingState) => { |
||||||
|
loading.value = loadingState; |
||||||
|
} |
||||||
|
// 新增处理站点变化的函数 |
||||||
|
const handleStationChange = (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('/ycraindata/zfzsjdata', 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.monthCountSum[0] : i == 1 ? res.data.monthCountMax[0] : i == 2 ? res.data.monthCountMin[0] : '/', |
||||||
|
Feb: i == 0 ? res.data.monthCountSum[1] : i == 1 ? res.data.monthCountMax[1] : i == 2 ? res.data.monthCountMin[1] : '/', |
||||||
|
Mar: i == 0 ? res.data.monthCountSum[2] : i == 1 ? res.data.monthCountMax[2] : i == 2 ? res.data.monthCountMin[2] : '/', |
||||||
|
Apr: i == 0 ? res.data.monthCountSum[3] : i == 1 ? res.data.monthCountMax[3] : i == 2 ? res.data.monthCountMin[3] : '/', |
||||||
|
May: i == 0 ? res.data.monthCountSum[4] : i == 1 ? res.data.monthCountMax[4] : i == 2 ? res.data.monthCountMin[4] : '/', |
||||||
|
Jun: i == 0 ? res.data.monthCountSum[5] : i == 1 ? res.data.monthCountMax[5] : i == 2 ? res.data.monthCountMin[5] : '/', |
||||||
|
Jul: i == 0 ? res.data.monthCountSum[6] : i == 1 ? res.data.monthCountMax[6] : i == 2 ? res.data.monthCountMin[6] : '/', |
||||||
|
Aug: i == 0 ? res.data.monthCountSum[7] : i == 1 ? res.data.monthCountMax[7] : i == 2 ? res.data.monthCountMin[7] : '/', |
||||||
|
Sep: i == 0 ? res.data.monthCountSum[8] : i == 1 ? res.data.monthCountMax[8] : i == 2 ? res.data.monthCountMin[8] : '/', |
||||||
|
Oct: i == 0 ? res.data.monthCountSum[9] : i == 1 ? res.data.monthCountMax[9] : i == 2 ? res.data.monthCountMin[9] : '/', |
||||||
|
Nov: i == 0 ? res.data.monthCountSum[10] : i == 1 ? res.data.monthCountMax[10] : i == 2 ? res.data.monthCountMin[10] : '/', |
||||||
|
Dec: i == 0 ? res.data.monthCountSum[11] : i == 1 ? res.data.monthCountMax[11] : i == 2 ? res.data.monthCountMin[11] : '/' |
||||||
|
|
||||||
|
} |
||||||
|
) |
||||||
|
} |
||||||
|
let yearMaxValue = res.data.yearCountMax?.replace(/ /g, ' ').trim(); |
||||||
|
let yearMinValue = res.data.yearCountMin?.replace(/ /g, ' ').trim(); |
||||||
|
|
||||||
|
let nianList = ['水面蒸发量', '终 冰',] |
||||||
|
for (let i = 0; i < 2; i++) { |
||||||
|
data.push( |
||||||
|
{ |
||||||
|
date: "年统计", |
||||||
|
yueTotal: '', |
||||||
|
Jan: nianList[i], |
||||||
|
Feb: i == 0 ? res.data.yearCountSum : i == 1 ? res.data.endIce : '/', |
||||||
|
Mar: i == 0 ? '最大日水面蒸发量' : i == 1 ? '初冰' : '/', |
||||||
|
Apr: i == 0 ? yearMaxValue : i == 1 ? '' : '/', |
||||||
|
May: i == 0 ? '最小日水面蒸发量' : i == 1 ? '' : '/', |
||||||
|
Jun: i == 0 ? yearMinValue : i == 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,] |
||||||
|
// 表头行（第一行）合并第一列和第二列 |
||||||
|
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 <= 35) { |
||||||
|
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, 2]; |
||||||
|
} else if (columnIndex === 4) { |
||||||
|
return [1, 2]; |
||||||
|
} else if (columnIndex === 5) { |
||||||
|
return [1, 2]; |
||||||
|
} else if (columnIndex === 6) { |
||||||
|
return [1, 2]; |
||||||
|
} else if (columnIndex === 7) { |
||||||
|
return [1, 2]; |
||||||
|
} else { |
||||||
|
return [0, 0]; |
||||||
|
} |
||||||
|
} |
||||||
|
if (rowIndex == 35) { |
||||||
|
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]; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// 附录行合并 |
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
/* 表头单元格高度调整 */ |
||||||
|
:deep(.el-table__header th) { |
||||||
|
padding: 0; |
||||||
|
height: 60px; |
||||||
|
/* 增加高度保证斜线效果 */ |
||||||
|
} |
||||||
|
|
||||||
|
: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行的下边框 */ |
||||||
|
:deep(.el-table__body tr:nth-child(-n+30) td), |
||||||
|
:deep(.el-table__body tr:nth-child(32) td), |
||||||
|
:deep(.el-table__body tr:nth-child(33) td) { |
||||||
|
border-bottom: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-table__body tr:nth-child(32) td:nth-child(1)) { |
||||||
|
border-bottom: 1px solid #000 !important; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue