waibao2
1 month ago
5 changed files with 1061 additions and 0 deletions
@ -0,0 +1,223 @@ |
|||||||
|
<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.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 icon="Refresh" @click="resetQuery">重置</el-button> --> |
||||||
|
<el-button type="warning" icon="Download" @click="handleExport">下载</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"> |
||||||
|
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree> |
||||||
|
</pane> |
||||||
|
<pane :size="100 - firstSize" class="pad10"> |
||||||
|
<div class="main-table-header"> |
||||||
|
<div class="table-title">{{tableTitle}}</div> |
||||||
|
<div class="table-time mb5"> |
||||||
|
<div> |
||||||
|
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<vxe-grid class="report-table" ref="gridRef" v-bind="gridOptions"></vxe-grid> |
||||||
|
<!-- <el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;"> |
||||||
|
<el-table-column fixed label="序号" :align="alignment" type="index"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column fixed prop="c1" label="河名" width="100" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column fixed prop="c2" label="站名" width="100" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="时 段(min)" :align="alignment"> |
||||||
|
<el-table-column prop="c3" label="10" :align="alignment"> |
||||||
|
<el-table-column prop="c3" label="最大降水量开始 月-日" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c4" label="20" :align="alignment"> |
||||||
|
<el-table-column prop="c3" label="最大降水量开始 月-日" :align="alignment"></el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c5" label="30" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c6" label="45" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c7" label="60" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c8" label="90" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c9" label="120" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c10" label="180" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c11" label="240" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c12" label="360" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c13" label="540" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c14" label="720" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="c15" label="1440" :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 { ref, reactive, onMounted } from 'vue'; |
||||||
|
import useAppStore from '@/store/modules/app' |
||||||
|
const device = computed(() => useAppStore().device); |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
tableTitle: { |
||||||
|
type: String, |
||||||
|
default: '表格标题' |
||||||
|
}, |
||||||
|
|
||||||
|
}) |
||||||
|
const { proxy } = getCurrentInstance() |
||||||
|
const alignment = 'center' |
||||||
|
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||||
|
const stationType = 'A' |
||||||
|
const eTreeRef = ref(null) |
||||||
|
let stnmIdsList = [] |
||||||
|
// 新增处理站点变化的函数 |
||||||
|
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 { |
||||||
|
loading.value = true; |
||||||
|
getList() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const loading = ref(false); |
||||||
|
const tableData = ref([]); |
||||||
|
const queryParams = reactive({ |
||||||
|
year: dayjs(new Date()).format('YYYY'), |
||||||
|
stnmId: "", |
||||||
|
type: 0 |
||||||
|
}); |
||||||
|
const getList = async () => { |
||||||
|
loading.value = true; |
||||||
|
try { |
||||||
|
const res = await proxy.axiosGet('/report/jsltabledata', queryParams) |
||||||
|
if (res.code == 0) { |
||||||
|
let data = res.data |
||||||
|
tableData.value = data.map(item => { |
||||||
|
const newItem = { ...item }; // 浅拷贝原对象 |
||||||
|
|
||||||
|
// 遍历所有时段字段并替换逗号为 \n |
||||||
|
const periods = [10, 20, 30, 45, 60, 90, 120, 180, 240, 360, 540, 720, 1440]; |
||||||
|
periods.forEach(period => { |
||||||
|
const key = `data${period}`; |
||||||
|
if (newItem[key] && typeof newItem[key] === 'string') { |
||||||
|
newItem[key] = newItem[key].replace(',', '\n'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return newItem; |
||||||
|
}) |
||||||
|
gridOptions.columns = [ |
||||||
|
{ field: 'index', width: 70, title: "站次", align: 'center', }, |
||||||
|
{ field: 'staid', minWidth: 120, title: '测站编码', align: 'center', }, |
||||||
|
{ field: 'stnm', minWidth: 100, title: '站名', align: 'center', }, |
||||||
|
{ |
||||||
|
title: '时 段(min)', |
||||||
|
field: 'shiduan', |
||||||
|
headerAlign: 'center', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
field: '10', title: '10', headerAlign: 'center', |
||||||
|
children: [ |
||||||
|
{ field: 'data10', title: '最大降水量\n开始 月-日', align: 'center', minWidth: 60, }, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'data20', title: '20', align: 'center', minWidth: 60, |
||||||
|
}, |
||||||
|
{ field: 'data30', title: '30', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data45', title: '45', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data60', title: '60', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data90', title: '90', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data120', title: '120', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data180', title: '180', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data240', title: '240', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data360', title: '360', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data540', title: '540', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data720', title: '720', align: 'center', minWidth: 60, }, |
||||||
|
{ field: 'data1440', title: '1440', align: 'center', minWidth: 60, }, |
||||||
|
] |
||||||
|
}, |
||||||
|
] |
||||||
|
gridOptions.data = tableData.value; |
||||||
|
} |
||||||
|
gridOptions.loading = false; |
||||||
|
} catch (error) { |
||||||
|
gridOptions.loading = false; |
||||||
|
} |
||||||
|
} |
||||||
|
// 搜索按钮操作 |
||||||
|
const handleQuery = () => { |
||||||
|
getList() |
||||||
|
} |
||||||
|
// 下载按钮操作 |
||||||
|
const handleExport = () => { } |
||||||
|
|
||||||
|
const gridOptions = reactive({ |
||||||
|
border: true, |
||||||
|
loading: false, |
||||||
|
showCustomHeader: true, |
||||||
|
height: '86%', |
||||||
|
mergeHeaderCells: [ |
||||||
|
{ row: 0, col: 0, rowspan: 3, colspan: 1 }, |
||||||
|
{ row: 0, col: 1, rowspan: 3, colspan: 1 }, |
||||||
|
{ row: 0, col: 2, rowspan: 3, colspan: 1 }, |
||||||
|
{ row: 0, col: 3, rowspan: 1, colspan: 13 }, |
||||||
|
{ row: 2, col: 3, rowspan: 1, colspan: 13 }, |
||||||
|
], |
||||||
|
columns: [], |
||||||
|
data: [] |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.report-table :deep(.vxe-table--column), |
||||||
|
:deep(.vxe-header--row) { |
||||||
|
background: #fff !important; |
||||||
|
/* border-bottom: 1px solid #000 !important; */ |
||||||
|
border-right: 1px solid #000 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.report-table :deep(.vxe-header--column), |
||||||
|
:deep(.vxe-table--header-inner-wrapper) { |
||||||
|
border-bottom: 1px solid #000 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.report-table :deep(.vxe-grid--table-container), |
||||||
|
:deep(.vxe-table) { |
||||||
|
height: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
.report-table :deep(.vxe-table--body) { |
||||||
|
/* border: 1px solid #000; */ |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,221 @@ |
|||||||
|
<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.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> |
||||||
|
<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"></e-tree> |
||||||
|
</pane> |
||||||
|
<pane :size="100 - firstSize" class="pad10"> |
||||||
|
<div class="main-table-header"> |
||||||
|
<div class="table-title">{{tableTitle}}</div> |
||||||
|
<div class="table-time mb5"> |
||||||
|
<div> |
||||||
|
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table class="report-table no-border-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;"> |
||||||
|
<el-table-column fixed label="站次" width="60" :align="alignment" prop="index"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column fixed prop="staid" width="120" label="测站编码" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column fixed prop="stnm" label="站名" width="150" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="时 段 (h)" :align="alignment"> |
||||||
|
<el-table-column label="1" :align="alignment"> |
||||||
|
<el-table-column prop="jsl1" label="降水量" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month1" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day1" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="2" :align="alignment"> |
||||||
|
<el-table-column prop="jsl2" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month2" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day2" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="3" :align="alignment"> |
||||||
|
<el-table-column prop="jsl3" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month3" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day3" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="6" :align="alignment"> |
||||||
|
<el-table-column prop="jsl6" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month6" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day6" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="12" :align="alignment"> |
||||||
|
<el-table-column prop="jsl12" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month12" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day12" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="24" :align="alignment"> |
||||||
|
<el-table-column prop="jsl24" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month24" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day24" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="48" :align="alignment"> |
||||||
|
<el-table-column prop="jsl48" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month48" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day48" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="72" :align="alignment"> |
||||||
|
<el-table-column prop="jsl72" label="降水量" :align="alignment"></el-table-column> |
||||||
|
<el-table-column label="开始" :align="alignment"> |
||||||
|
<el-table-column prop="month72" label="月" width="50" :align="alignment"> </el-table-column> |
||||||
|
<el-table-column prop="day72" label="日" width="50" :align="alignment"> </el-table-column> |
||||||
|
</el-table-column> |
||||||
|
</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 { ref, reactive, onMounted } from 'vue'; |
||||||
|
import useAppStore from '@/store/modules/app' |
||||||
|
const device = computed(() => useAppStore().device); |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
tableTitle: { |
||||||
|
type: String, |
||||||
|
default: '表格标题' |
||||||
|
}, |
||||||
|
|
||||||
|
}) |
||||||
|
const { proxy } = getCurrentInstance() |
||||||
|
const alignment = 'center' |
||||||
|
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||||
|
const stationType = 'A' |
||||||
|
const eTreeRef = ref(null) |
||||||
|
let stnmIdsList = [] |
||||||
|
// 新增处理站点变化的函数 |
||||||
|
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 { |
||||||
|
loading.value = true; |
||||||
|
getList() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const loading = ref(false); |
||||||
|
const tableData = ref([]); |
||||||
|
const queryParams = reactive({ |
||||||
|
year: dayjs(new Date()).format('YYYY'), |
||||||
|
stnmIds: '', |
||||||
|
type: 1 |
||||||
|
}); |
||||||
|
const getList = async () => { |
||||||
|
loading.value = true; |
||||||
|
try { |
||||||
|
const res = await proxy.axiosGet('/report/jsltabledata', queryParams) |
||||||
|
if (res.code == 0) { |
||||||
|
let data = res.data |
||||||
|
// 处理数据格式以适应表格 |
||||||
|
tableData.value = data.map(item => { |
||||||
|
// 解析各个时段的数据 |
||||||
|
const parseData = (dataStr) => { |
||||||
|
if (!dataStr) return { jsl: '', month: '', day: '' }; |
||||||
|
const [jsl, date] = dataStr.split(','); |
||||||
|
const [month, day] = date ? date.split('-') : ['', '']; |
||||||
|
return { jsl, month, day }; |
||||||
|
}; |
||||||
|
|
||||||
|
const data1 = parseData(item.data1); |
||||||
|
const data2 = parseData(item.data2); |
||||||
|
const data3 = parseData(item.data3); |
||||||
|
const data6 = parseData(item.data6); |
||||||
|
const data12 = parseData(item.data12); |
||||||
|
const data24 = parseData(item.data24); |
||||||
|
const data48 = parseData(item.data48); |
||||||
|
const data72 = parseData(item.data72); |
||||||
|
|
||||||
|
return { |
||||||
|
index: item.index, |
||||||
|
staid: item.staid, |
||||||
|
stnm: item.stnm, |
||||||
|
jsl1: data1.jsl, |
||||||
|
month1: data1.month, |
||||||
|
day1: data1.day, |
||||||
|
jsl2: data2.jsl, |
||||||
|
month2: data2.month, |
||||||
|
day2: data2.day, |
||||||
|
jsl3: data3.jsl, |
||||||
|
month3: data3.month, |
||||||
|
day3: data3.day, |
||||||
|
jsl6: data6.jsl, |
||||||
|
month6: data6.month, |
||||||
|
day6: data6.day, |
||||||
|
jsl12: data12.jsl, |
||||||
|
month12: data12.month, |
||||||
|
day12: data12.day, |
||||||
|
jsl24: data24.jsl, |
||||||
|
month24: data24.month, |
||||||
|
day24: data24.day, |
||||||
|
jsl48: data48.jsl, |
||||||
|
month48: data48.month, |
||||||
|
day48: data48.day, |
||||||
|
jsl72: data72.jsl, |
||||||
|
month72: data72.month, |
||||||
|
day72: data72.day |
||||||
|
}; |
||||||
|
}); |
||||||
|
} |
||||||
|
loading.value = false |
||||||
|
} catch (error) { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
// 搜索按钮操作 |
||||||
|
const handleQuery = () => { |
||||||
|
getList() |
||||||
|
} |
||||||
|
// 下载按钮操作 |
||||||
|
const handleExport = () => { } |
||||||
|
|
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
/* 隐藏前31行的下边框 */ |
||||||
|
.no-border-table :deep(.el-table__body tr td) { |
||||||
|
border-bottom: none !important; |
||||||
|
} |
||||||
|
.no-border-table :deep(.el-table__body tr:last-child td) { |
||||||
|
/* border-bottom: 1px solid #000 !important; */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
<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;padding-top:0" v-loading="loading"> |
||||||
|
<div class="main-table-header sticky-header" style="width: 1200px;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" class="pl10">降水量(m)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style="height:90%;width:1200px;margin:0 auto;display: flex;margin-bottom:20px" > |
||||||
|
<template v-for="(info,idx) in tableData" :key="idx"> |
||||||
|
<el-table class="report-table merge-header no-border-table" :data="info" style="width: 100%;" :table-layout="tableLayout"> |
||||||
|
<el-table-column label="月" :align="alignment" width="45"> |
||||||
|
<template #default="scope"> |
||||||
|
<span v-if="scope.row.month !== getPrevRow(scope,'m','1')"> |
||||||
|
{{ scope.row.m }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="日" :align="alignment" width="45"> |
||||||
|
<template #default="scope"> |
||||||
|
<span v-if=" scope.row.day !== getPrevRow(scope,'d','2')"> |
||||||
|
{{ scope.row.d }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="eh" :align="alignment" width="70" > |
||||||
|
<template #header> |
||||||
|
<div style="line-height: 1.2;text-align: center;"> |
||||||
|
<div>起</div> |
||||||
|
<div>时：分</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="h" :align="alignment" width="70"> |
||||||
|
<template #header> |
||||||
|
<div style="line-height: 1.2;text-align: center;"> |
||||||
|
<div>止</div> |
||||||
|
<div>时：分</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="value" label="降水量" :align="alignment"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import dayjs from 'dayjs'; |
||||||
|
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 eSelectSingle = 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'), |
||||||
|
stnmId: "" |
||||||
|
}); |
||||||
|
const getList = async () => { |
||||||
|
try { |
||||||
|
const res = await proxy.axiosPost2('/report/jslzldata', queryParams) |
||||||
|
if (res.code == 0) { |
||||||
|
let data = res.data.list |
||||||
|
tableData.value = data; |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
console.error(error) |
||||||
|
} finally { |
||||||
|
// 确保在请求完成后隐藏loading |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 优化后的获取上一行月份的方法 |
||||||
|
const getPrevRow = (scope, field, type) => { |
||||||
|
const rowIndex = scope.$index; |
||||||
|
const data = scope.store.states.data; |
||||||
|
|
||||||
|
// 如果是第一行，返回null |
||||||
|
if (rowIndex === 0) return null; |
||||||
|
|
||||||
|
// 找到上一个非空行的月份 |
||||||
|
let prevRowIndex = rowIndex - 1; |
||||||
|
while (prevRowIndex >= 0 && (!data.value[prevRowIndex][field] || data.value[prevRowIndex][field] === '')) { |
||||||
|
prevRowIndex--; |
||||||
|
} |
||||||
|
if (type == '1') { |
||||||
|
field = 'month' |
||||||
|
} |
||||||
|
let result = prevRowIndex >= 0 ? data.value[prevRowIndex][field] : null; |
||||||
|
// 如果找到有效的上一行数据，返回其月份；否则返回null |
||||||
|
return result |
||||||
|
}; |
||||||
|
const isFirstOccurrence = (scope) => { |
||||||
|
return scope.$index === 0; |
||||||
|
}; |
||||||
|
|
||||||
|
// 搜索按钮操作 |
||||||
|
const handleQuery = () => { |
||||||
|
getList() |
||||||
|
} |
||||||
|
// 下载按钮操作 |
||||||
|
const handleExport = () => { } |
||||||
|
onMounted(() => { }) |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.no-border-table :deep(.el-table__body-wrapper .el-table__cell) { |
||||||
|
border-bottom: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.no-border-table :deep(.el-table__body-wrapper .el-table__cell) { |
||||||
|
padding: 2px 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
/* .no-border-table :deep(.el-table__body-wrapper .el-table__row:nth-child(6n) .el-table__cell) { |
||||||
|
padding: 10px 0 !important; |
||||||
|
background-color: #f9f9f9; |
||||||
|
} */ |
||||||
|
</style> |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
<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> |
||||||
|
<!-- 添加加载状态和错误提示 --> |
||||||
|
<div v-if="componentError" class="error-message"> |
||||||
|
<el-empty description="组件加载失败，请刷新页面重试" /> |
||||||
|
</div> |
||||||
|
<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: '各时段最大降水量表(1)' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: '6', |
||||||
|
label: '各时段最大降水量表(2)' |
||||||
|
}, |
||||||
|
// { |
||||||
|
// value: '7', |
||||||
|
// label: '蒸发站成果表' |
||||||
|
// } |
||||||
|
] |
||||||
|
|
||||||
|
// 当前选中的菜单 |
||||||
|
const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '') |
||||||
|
|
||||||
|
// 动态组件映射 |
||||||
|
const componentMap = { |
||||||
|
'1': defineAsyncComponent(() => import('@/views/report/jslsmzflylb/index.vue')), |
||||||
|
'2': defineAsyncComponent(() => import('@/views/report/gzynjsldzb/index.vue')), |
||||||
|
'3': defineAsyncComponent(() => import('@/views/report/zrjsl/index.vue')), |
||||||
|
'4': defineAsyncComponent(() => import('@/views/report/jslzl/index.vue')), |
||||||
|
'5': defineAsyncComponent(() => import('@/views/report/jsltable1/index.vue')), |
||||||
|
'6': defineAsyncComponent(() => import('@/views/report/jsltable2/index.vue')), |
||||||
|
'7': defineAsyncComponent(() => import('@/views/report/evaporation/index.vue')) |
||||||
|
} |
||||||
|
// 添加错误处理 |
||||||
|
const componentError = ref(false) |
||||||
|
|
||||||
|
onErrorCaptured((error) => { |
||||||
|
componentError.value = true |
||||||
|
return true |
||||||
|
}) |
||||||
|
|
||||||
|
// 计算当前应该显示的组件 |
||||||
|
const currentComponent = computed(() => { |
||||||
|
console.log(menu.value, 'menu.value') |
||||||
|
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> |
||||||
@ -0,0 +1,337 @@ |
|||||||
|
<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> |
||||||
Loading…
Reference in new issue