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
b93f6e8f63
commit
9b7404df6d
3 changed files with 668 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      src/views/report/reportwater/index.vue
  2. 200
      src/views/report/waterZl/index.vue
  3. 353
      src/views/report/zrsw/index.vue

115
src/views/report/reportwater/index.vue
Unescape View File

@ -0,0 +1,115 @@ @@ -0,0 +1,115 @@
<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">
组件加载失败，请刷新页面重试
</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: '月最低水位及出现日期'
// },
{
value: '6',
label: '洪水水位摘录表'
},
// {
// value: '7',
// label: '洪水水文要素摘录表'
// },
// {
// value: '8',
// label: '堰闸洪水水文要素摘录表'
// },
// {
// value: '9',
// label: '水库水文要素摘录表'
// }
]
// 当前选中的菜单
const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '')
// 动态组件映射
const componentMap = {
'1': defineAsyncComponent(() => import('@/views/report/swswzylb/index.vue')),
'2': defineAsyncComponent(() => import('@/views/report/gzynswdzb/index.vue')),
'3': defineAsyncComponent(() => import('@/views/report/zrsw/index.vue')),
'4': defineAsyncComponent(() => import('@/views/report/swpeak/index.vue')),
'5': defineAsyncComponent(() => import('@/views/report/swpeakmin/index.vue')),
'6': defineAsyncComponent(() => import('@/views/report/waterZl/index.vue')),
'7': defineAsyncComponent(() => import('@/views/report/waterswys/index.vue')),
'8': defineAsyncComponent(() => import('@/views/report/zyhssw/index.vue')),
'9': defineAsyncComponent(() => import('@/views/report/rvhsswyszl/index.vue'))
}
// 添加错误处理
const componentError = ref(false)
onErrorCaptured((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>

200
src/views/report/waterZl/index.vue
Unescape View File

@ -0,0 +1,200 @@ @@ -0,0 +1,200 @@
<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">
<div class="table-title">
<span class="pr10" v-if="selectStnm!==''">{{selectStnm}}</span>
<span>{{tableTitle}}</span>
</div>
</div>
<el-empty v-if="total==0" description="暂无数据" />
<div v-for="(item,index) in tableData" :key="index" class="mb50 main-table-header">
<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>共{{total}}页 </span><span id="title3" class="pl10">第{{index+1}}页</span>
</div>
</div>
<div style="height:100%;display: flex;">
<template v-for="(info,idx) in item.slice(0,5)" :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">
<el-table-column label="月" :align="alignment">
<template #default="scope">
<span v-if="scope.row.month !== getPrevRow(scope,'month','1')">
{{ scope.row.month }}
</span>
</template>
</el-table-column>
<el-table-column label="日" :align="alignment">
<template #default="scope">
<span v-if=" scope.row.day !== getPrevRow(scope,'day','2')">
{{ scope.row.day }}
</span>
</template>
</el-table-column>
<el-table-column prop="hourMinute2" label="时分">
</el-table-column>
</el-table-column>
<el-table-column prop="valueDecimal" align="right">
<template #header>
<div style="line-height: 1.2;text-align: center;">
<div>水位</div>
<div>(m)</div>
</div>
</template>
</el-table-column>
</el-table>
</template>
</div>
</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 = 'C'
const tableLayout = ref('fixed')
const singleStationRef = ref(null)
const selectStnm = ref('')
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: ""
});
let total = ref(0)
const getList = async () => {
try {
const res = await proxy.axiosGet('/report/getWaterZlData', queryParams)
if (res.code == 0) {
total.value = res.data.datas.length
let data = res.data.datas
selectStnm.value = res.data.station.stnm
// 处理数据，每五行插入一组空数据
const processedData = data.map(page => {
return page.map(table => {
const newTable = [];
for (let i = 0; i < table.length; i += 5) {
// 添加原始数据的5行
newTable.push(...table.slice(i, i + 5));
// 每5行后插入一组空数据（如果不是最后一批数据）
if (i + 5 < table.length) {
newTable.push({
month: '',
day: '',
hourMinute2: '',
valueDecimal: ''
});
}
}
return newTable;
});
});
tableData.value = processedData;
}
} 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 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>

353
src/views/report/zrsw/index.vue
Unescape View File

@ -0,0 +1,353 @@ @@ -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="类型">
<el-select v-model="stationType" placeholder="请选择类型" @change="changeStationType" class="w150">
<el-option label="水库" value="C"></el-option>
<el-option label="河道" value="B"></el-option>
</el-select>
</el-form-item> -->
<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">{{staid}}</span>
</div>
<div>
<span>{{title}} </span><span id="title3" class="pl10">m= 85基准基准基面以上米数</span>
</div>
</div>
</div>
<el-table class="report-table merge-header" v-table-height="{bottom:130}" v-loading="loading" :data="tableData" style="width: 70%;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> 备注：表格中 ' / '表示该日期整天缺测，其余缺测日期为部分缺测。 </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 = 'C'
const tableLayout = ref('fixed')
const singleStationRef = ref(null)
// 新增处理站点变化的函数
const handleStationChange = (stnmId) => {
queryParams.stnmId = stnmId
if (stnmId == undefined) {
proxy.$modal.msgWarning("请选择站点后查询");
return
} else {
loading.value = true;
getList()
}
}
const loading = ref(false);
const tableData = ref([]);
const queryParams = reactive({
year: dayjs(new Date()).format('YYYY'),
type: 0
});
const staid = ref('')
const title = ref('')
const getList = async () => {
loading.value = true;
try {
const res = await proxy.axiosGet('/report/zrswdata', queryParams)
if (res.code == 0) {
staid.value = res.data.staid
title.value = res.data.title
// 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 < 5; i++) {
data.push(
{
yueTotal: yueList[i],
date: "月统计",
Jan: i == 0 ? res.data.avgList[0] : i == 1 ? res.data.maxList[0] : i == 2 ? res.data.maxDayList[0] : i == 3 ? res.data.minList[0] : i == 4 ? res.data.minDayList[0] : '/',
Feb: i == 0 ? res.data.avgList[1] : i == 1 ? res.data.maxList[1] : i == 2 ? res.data.maxDayList[1] : i == 3 ? res.data.minList[1] : i == 4 ? res.data.minDayList[1] : '/',
Mar: i == 0 ? res.data.avgList[2] : i == 1 ? res.data.maxList[2] : i == 2 ? res.data.maxDayList[2] : i == 3 ? res.data.minList[2] : i == 4 ? res.data.minDayList[2] : '/',
Apr: i == 0 ? res.data.avgList[3] : i == 1 ? res.data.maxList[3] : i == 2 ? res.data.maxDayList[3] : i == 3 ? res.data.minList[3] : i == 4 ? res.data.minDayList[3] : '/',
May: i == 0 ? res.data.avgList[4] : i == 1 ? res.data.maxList[4] : i == 2 ? res.data.maxDayList[4] : i == 3 ? res.data.minList[4] : i == 4 ? res.data.minDayList[4] : '/',
Jun: i == 0 ? res.data.avgList[5] : i == 1 ? res.data.maxList[5] : i == 2 ? res.data.maxDayList[5] : i == 3 ? res.data.minList[5] : i == 4 ? res.data.minDayList[5] : '/',
Jul: i == 0 ? res.data.avgList[6] : i == 1 ? res.data.maxList[6] : i == 2 ? res.data.maxDayList[6] : i == 3 ? res.data.minList[6] : i == 4 ? res.data.minDayList[6] : '/',
Aug: i == 0 ? res.data.avgList[7] : i == 1 ? res.data.maxList[7] : i == 2 ? res.data.maxDayList[7] : i == 3 ? res.data.minList[7] : i == 4 ? res.data.minDayList[7] : '/',
Sep: i == 0 ? res.data.avgList[8] : i == 1 ? res.data.maxList[8] : i == 2 ? res.data.maxDayList[8] : i == 3 ? res.data.minList[8] : i == 4 ? res.data.minDayList[8] : '/',
Oct: i == 0 ? res.data.avgList[9] : i == 1 ? res.data.maxList[9] : i == 2 ? res.data.maxDayList[9] : i == 3 ? res.data.minList[9] : i == 4 ? res.data.minDayList[9] : '/',
Nov: i == 0 ? res.data.avgList[10] : i == 1 ? res.data.maxList[10] : i == 2 ? res.data.maxDayList[10] : i == 3 ? res.data.minList[10] : i == 4 ? res.data.minDayList[10] : '/',
Dec: i == 0 ? res.data.avgList[11] : i == 1 ? res.data.maxList[11] : i == 2 ? res.data.maxDayList[11] : i == 3 ? res.data.minList[11] : i == 4 ? res.data.minDayList[11] : '/'
}
)
}
let yearMaxValue = res.data.yearMax?.replace(/&nbsp;/g, ' ').trim();
let yearMinValue = res.data.yearMin?.replace(/&nbsp;/g, ' ').trim();
let nianList = ['最高水位', '保证率', '水位']
for (let i = 0; i < 3; i++) {
data.push(
{
date: "年统计",
yueTotal: '',
Jan: nianList[i],
Feb: i == 0 ? yearMaxValue : i == 1 ? '最高' : i == 2 ? res.data.bz_max : '/',
Mar: i == 0 ? '最低水位' : i == 1 ? '第15天' : i == 2 ? res.data.bz_15 : '/',
Apr: i == 0 ? yearMinValue : i == 1 ? '第30天' : i == 2 ? res.data.bz_30 : '/',
May: i == 0 ? '平均水位' : i == 1 ? '' : i == 2 ? '' : '/',
Jun: i == 0 ? res.data.yearAvg : i == 1 ? '第90天' : i == 2 ? res.data.bz_90 : '/',
Jul: '',
Aug: i == 0 ? '' : i == 1 ? '第180天' : i == 2 ? res.data.bz_180 : '/',
Sep: '',
Oct: i == 0 ? '' : i == 1 ? '第270天' : i == 2 ? res.data.bz_270 : '/',
Nov: '',
Dec: i == 0 ? '' : i == 1 ? '最低' : i == 2 ? res.data.bz_min : '/',
}
)
}
// 添加附注行
data.push({
date: '附录',
Jan: res.data.fuzhu
})
tableData.value = data
}
console.log(tableData.value, 'tableData')
loading.value = false
} catch (error) {
loading.value = false
}
}
// 改变类型操作
const changeStationType = (val) => {
queryParams.stationType = val
queryParams.type = val == 'B' ? 1 : 0
}
// 搜索按钮操作
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, 38]
// 表头行（第一行）合并第一列和第二列
if (!rowList.includes(rowIndex)) {
if (columnIndex === 0) {
// 第一列合并两列
return [1, 2];
} else if (columnIndex === 1) {
// 第二列被合并，不显示
return [0, 0];
}
}
// 月统计行合并
if (rowIndex >= 31 && rowIndex <= 35) {
if (columnIndex === 0) {
return rowIndex === 31 ? [5, 1] : [0, 0];
}
if (columnIndex === 1) return [1, 1];
}
// 年统计行合并
if (rowIndex >= 36 && rowIndex <= 38) {
if (columnIndex === 0) {
return rowIndex === 36 ? [3, 2] : [0, 0];
}
if (columnIndex === 1) return [0, 0];
if (rowIndex == 36) {
if (columnIndex === 2) {
return [1, 1];
} else if (columnIndex === 3) {
return [1, 3];
} else if (columnIndex === 4) {
return [1, 1];
} else if (columnIndex === 5) {
return [1, 3];
} else if (columnIndex === 6) {
return [1, 1];
} else if (columnIndex === 7) {
return [1, 3];
} 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,
::v-deep .el-table__body tr:nth-child(34) td,
::v-deep .el-table__body tr:nth-child(35) 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>
Write Preview
Loading…
Cancel
Save