waibao2
5 days ago
9 changed files with 926 additions and 273 deletions
@ -0,0 +1,458 @@
@@ -0,0 +1,458 @@
|
||||
<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="开始时间" prop="year"> |
||||
<el-date-picker style="width: 100px" v-model="queryParams.year" type="year" value-format="YYYY" format="YYYY" placeholder="选择年份"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="月份" prop="month"> |
||||
<el-select clearable v-model="queryParams.month" filterable placeholder="请选择月份" style="width: 100px"> |
||||
<el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="雨量统计年"> |
||||
<el-date-picker style="width: 90px" v-model="queryParams.startDate" type="year" value-format="YYYY" format="YYYY" placeholder="起"> |
||||
</el-date-picker>至 |
||||
<el-date-picker style="width: 90px" v-model="queryParams.endDate" type="year" value-format="YYYY" format="YYYY" placeholder="止"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="河道统计年"> |
||||
<el-date-picker style="width: 90px" v-model="queryParams.startDateRiver" type="year" value-format="YYYY" format="YYYY" placeholder="起"> |
||||
</el-date-picker>至 |
||||
<el-date-picker style="width: 90px" v-model="queryParams.endDateRiver" type="year" value-format="YYYY" format="YYYY" placeholder="止"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="水库统计年"> |
||||
<el-date-picker style="width: 90px" v-model="queryParams.startDateRsvr" type="year" value-format="YYYY" format="YYYY" placeholder="起"> |
||||
</el-date-picker>至 |
||||
<el-date-picker style="width: 90px" v-model="queryParams.endDateRsvr" type="year" value-format="YYYY" format="YYYY" placeholder="止"> |
||||
</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 container-box scroll-bar" v-loading="fullscreenLoading"> |
||||
<div class="briefing" v-if="showBriefing"> |
||||
<div class="briefing-title text-center mt20">水雨情简报</div> |
||||
<div class="briefing-qishu mt10 mb10 text-center">{{briefingData.qishu}}</div> |
||||
<div class="briefing-name-date"> |
||||
<div class="briefing-name">{{stationName}}</div> |
||||
<div class="briefing-date">{{briefingData.newDate}}</div> |
||||
</div> |
||||
<hr style="color: red;height: 2px;border-top: 2px solid red;" /> |
||||
<div class="briefing-content"> |
||||
<div class="content-title text-center mt50 mb50">{{briefingData.title}}</div> |
||||
<p class="content-text1 paragraph suojin">{{briefingData.str1}}</p> |
||||
<div class="suojin"> |
||||
<p class="type-title ">一、雨情</p> |
||||
<p class="paragraph ">{{briefingData.rainStr1}}</p> |
||||
<p class="paragraph ">{{briefingData.rainStr2}}</p> |
||||
<p>（详见附表一）</p> |
||||
</div> |
||||
|
||||
<div class="suojin"> |
||||
<p class="type-title ">二、水情</p> |
||||
<p>（一）江河水情</p> |
||||
<p class="paragraph ">{{briefingData.waterStr1}}</p> |
||||
<p>（详见附表二）</p> |
||||
<div class="fubiao biao1"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title"> |
||||
<span>表1 主要河网控制站特征水位表</span> |
||||
</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>单位: m(国家85)</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" :data="briefingData.biao1" border style="width:100%"> |
||||
<el-table-column prop="area" label="区域" :align="alignment"></el-table-column> |
||||
<el-table-column prop="stnm" label="站名" :align="alignment"></el-table-column> |
||||
<el-table-column prop="nvalue" label="当前水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value" label="平均水位" :align="alignment"></el-table-column> |
||||
<el-table-column label="最高水位" :align="alignment"> |
||||
<el-table-column prop="maxValue" label="水位" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="maxTm" label="时间" :align="alignment" width="180"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="最低水位" :align="alignment"> |
||||
<el-table-column prop="minValue" label="水位" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="minTm" label="时间" :align="alignment" width="180"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="jjsw" label="警戒水位" :align="alignment"> </el-table-column> |
||||
<el-table-column prop="bzsw" label="保证水位" :align="alignment"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<p>（二）水库水情</p> |
||||
<p class="paragraph">{{briefingData.waterStr2}}</p> |
||||
<p>（详见附表三）</p> |
||||
<div class="fubiao biao2"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title"> |
||||
<span>表2 <span>{{briefingData.yearmonth}}</span>大中型及小(一)、小(二)型水库水位特征表</span> |
||||
</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>水位单位：m（国家85） 蓄水量单位：万方</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" :data="briefingData.biao2" border> |
||||
<el-table-column prop="type" label="类型" :align="alignment"></el-table-column> |
||||
<el-table-column prop="stnm" label="站名" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value1" label="当前水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value2" label="平均水位" :align="alignment"></el-table-column> |
||||
<el-table-column label="最高水位" :align="alignment"> |
||||
<el-table-column prop="maxValue" label="水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="maxXs" label="蓄水量" :align="alignment"></el-table-column> |
||||
<el-table-column prop="maxTm" label="时间" :align="alignment" width="180"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="最低水位" :align="alignment"> |
||||
<el-table-column prop="minValue" label="水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="minXs" label="蓄水量" :align="alignment"></el-table-column> |
||||
<el-table-column prop="minTm" label="时间" :align="alignment" width="180"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="kzsw" label="控制水位" :align="alignment"> </el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="fubiao fubiao1"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title"> |
||||
<span>附表一 <span>{{briefingData.yearmonth}}</span>余姚市降水量分析表</span> |
||||
</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>单位: mm</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" :data="briefingData.fubiao1" border> |
||||
<el-table-column prop="area" label="地区" :align="alignment" width="200"></el-table-column> |
||||
<el-table-column prop="stnm" label="站名" :align="alignment" width="200"></el-table-column> |
||||
<el-table-column :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.month}}月降水量</span> |
||||
</template> |
||||
<el-table-column prop="value1" :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.year}}年</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="value2" label="常年同期" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value3" label="偏多(%)" :align="alignment"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column :align="alignment"> |
||||
<template #header> |
||||
<span>{{briefingData.interval}}月累计降水量</span> |
||||
</template> |
||||
<el-table-column prop="value4" :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.year}}年</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="value5" label="常年同期" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value6" label="偏多(%)" :align="alignment"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="去年同期" :align="alignment"> |
||||
<el-table-column prop="value7" :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.month}}月</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="value8" :align="alignment"> |
||||
<template #header> |
||||
<span>{{briefingData.interval}}月</span> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.month}}月降水量历年极值</span> |
||||
</template> |
||||
<el-table-column prop="value9" label="最大值" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value10" label="出现年份" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value11" label="最小值" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value12" label="出现年份" :align="alignment"></el-table-column> |
||||
</el-table-column> |
||||
</el-table> |
||||
<p class=" suojin fuzhu" id="zhu1">{{briefingData.zhu1}}</p> |
||||
</div> |
||||
<div class="fubiao fubiao2"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title"> |
||||
<span>附表二 <span>{{briefingData.nextMonthDate}}</span>余姚市主要江河控制站水情表</span> |
||||
</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>单位: m</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" :data="briefingData.fubiao2" border> |
||||
<el-table-column prop="area" label="片区" :align="alignment" width="200"></el-table-column> |
||||
<el-table-column prop="stnm" label="站名" :align="alignment" width="200"></el-table-column> |
||||
<el-table-column :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.year}}年</span> |
||||
</template> |
||||
<el-table-column prop="value1" :align="alignment"> |
||||
<template #header> |
||||
<span>{{briefingData.nextMonth}}月1日8时水位</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="value2" :align="alignment"> |
||||
<template #header> |
||||
<span>{{queryParams.month}}月1日8时水位</span> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="value3" label="水位变化值" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value4" label="常年同期" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value5" label="警戒水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value6" label="基面" :align="alignment"></el-table-column> |
||||
</el-table> |
||||
<p class=" suojin fuzhu" id="zhu2">{{briefingData.zhu2}}</p> |
||||
</div> |
||||
<div class="fubiao fubiao3"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title"> |
||||
<span>附表三 <span>{{briefingData.nextMonthDate}}</span>中型及重要小（一）、小(二)型水库蓄水情况表</span> |
||||
</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>水位：m；蓄水量：万方 </span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table id="el-table3" class="report-table" :data="briefingData.fubiao3" border show-summary :summary-method="getSummaries" :span-method="getSpanMethod"> |
||||
<el-table-column prop="type" label="类型" :align="alignment" width="200"></el-table-column> |
||||
<el-table-column prop="stnm" label="水库名称" :align="alignment" width="200"></el-table-column> |
||||
<el-table-column label="控制蓄水" :align="alignment"> |
||||
<el-table-column prop="value1" label="水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value2" label="蓄水量" :align="alignment"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column :align="alignment"> |
||||
<template #header> |
||||
<span>{{briefingData.nextMonth}}月1日8时</span> |
||||
</template> |
||||
<el-table-column prop="value3" label="水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value4" label="蓄水量" :align="alignment"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="value5" label="占控制蓄水的比例(%)" :align="alignment"></el-table-column> |
||||
<el-table-column label="常年同期" :align="alignment"> |
||||
<el-table-column prop="value6" label="水位" :align="alignment"></el-table-column> |
||||
<el-table-column prop="value7" label="蓄水量" :align="alignment"></el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="value8" label="蓄水增量" :align="alignment"></el-table-column> |
||||
</el-table> |
||||
<p class=" suojin fuzhu" id="zhu3">{{briefingData.zhu3}}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-empty v-else description="暂无数据" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs' |
||||
import { reactive, ref, computed } from 'vue' |
||||
const { proxy } = getCurrentInstance() |
||||
|
||||
const queryParams = reactive({ |
||||
year: dayjs().format('YYYY'), |
||||
endDate: dayjs().format('YYYY'), |
||||
startDate: '1963', |
||||
month: 1, |
||||
startDateRiver: '1963', |
||||
endDateRiver: dayjs().format('YYYY'), |
||||
startDateRsvr: '1963', |
||||
endDateRsvr: dayjs().format('YYYY'), |
||||
}) |
||||
const monthList = ref([ |
||||
{ label: '一月', 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: '十二月', value: 12, } |
||||
]) |
||||
const stationName = '余姚水文站' |
||||
const fullscreenLoading = ref(false) |
||||
const showBriefing = ref(false) |
||||
const briefingData = ref({}) |
||||
const alignment = 'center' |
||||
// 查询按钮操作 |
||||
const handleQuery = async () => { |
||||
fullscreenLoading.value = true |
||||
showBriefing.value = false |
||||
try { |
||||
const res = await proxy.axiosGet('/report/jbmonth', queryParams) |
||||
if (res.code == 0) { |
||||
let data = res.data |
||||
data.newDate = dayjs(data.date).format('YYYY年MM月DD日') |
||||
data.title = data.yearmonth + "余姚市水雨情概况" |
||||
data.zhu1 = `注：各站资料统计年限为${queryParams.startDate}～${queryParams.endDate}年；平均雨量采用加权平均法计算。` |
||||
data.zhu2 = `注：各站资料统计年限为${queryParams.startDateRiver}～${queryParams.endDateRiver}年。` |
||||
data.zhu3 = `注：各站资料统计年限为${queryParams.startDateRsvr}～${queryParams.endDateRsvr}年。` |
||||
briefingData.value = data |
||||
showBriefing.value = true |
||||
} |
||||
} finally { |
||||
fullscreenLoading.value = false |
||||
} |
||||
} |
||||
import { h } from 'vue' |
||||
// 附表三表尾合计 |
||||
const getSummaries = (param) => { |
||||
const { columns, data } = param; |
||||
const sums = []; |
||||
|
||||
columns.forEach((column, index) => { |
||||
if (index === 0) { |
||||
// 第一列显示“合计” |
||||
sums[index] = h('div', '合计'); |
||||
return; |
||||
} |
||||
|
||||
// 第二列（stnm）不需要显示内容，直接返回空 |
||||
if (index === 1) { |
||||
sums[index] = ''; |
||||
return; |
||||
} |
||||
|
||||
const prop = column.property; |
||||
|
||||
// 定义哪些列是“水位”列，不需要求和，直接显示 / |
||||
const isWaterLevelColumn = ['value1', 'value3', 'value6'].includes(prop); |
||||
|
||||
if (isWaterLevelColumn) { |
||||
sums[index] = '/'; |
||||
return; |
||||
} |
||||
|
||||
// 对于其他数值列（如 value2, value4, value7, value8），进行求和 |
||||
let values = data.map(item => { |
||||
const val = item[prop]; |
||||
return val !== null && val !== undefined && !isNaN(val) ? Number(val) : 0; |
||||
}); |
||||
|
||||
if (values.every(v => v === 0)) { |
||||
sums[index] = '/'; |
||||
} else { |
||||
const sum = values.reduce((prev, curr) => prev + curr, 0); |
||||
sums[index] = sum.toFixed(2); // 保留两位小数 |
||||
} |
||||
}); |
||||
|
||||
return sums; |
||||
}; |
||||
|
||||
// 合并附表三的合计 |
||||
const unsubscribe = watch(() => briefingData.value, async (newVal) => { |
||||
if (newVal && newVal.fubiao3) { |
||||
await nextTick() |
||||
const tds = document.querySelectorAll( |
||||
"#el-table3 .el-table__footer-wrapper tr>td" |
||||
); |
||||
|
||||
if (tds.length >= 2) { |
||||
tds[0].colSpan = 2; |
||||
tds[0].style.textAlign = "center"; |
||||
tds[1].style.display = "none"; |
||||
} |
||||
} |
||||
}, { deep: true }) |
||||
|
||||
// 下载按纽操作 |
||||
const handleExport = () => { |
||||
window.download('/report/jbmonthexport?year=' + queryParams.year + '&month=' + queryParams.month + |
||||
'&startDate=' + queryParams.startDate + '&endDate=' + queryParams.endDate + |
||||
"&startDateRiver=" + queryParams.startDateRiver + "&endDateRiver=" + queryParams.endDateRiver + |
||||
"&startDateRsvr=" + queryParams.startDateRsvr + "&endDateRsvr=" + queryParams.endDateRsvr, {}, |
||||
queryParams.year + '年' + queryParams.month + `月水雨情简报.doc`) |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.briefing { |
||||
width: 92%; |
||||
margin: 0 auto; |
||||
|
||||
.briefing-title { |
||||
font-family: SimSun; |
||||
color: red; |
||||
font-size: 50px; |
||||
letter-spacing: 10px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.briefing-qishu { |
||||
font-family: KaiTi; |
||||
font-size: 18px |
||||
} |
||||
|
||||
.briefing-name-date { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
/* 简报主体内容 */ |
||||
.briefing-content { |
||||
font-family: FangSong; |
||||
|
||||
.suojin { |
||||
text-indent: 2em; |
||||
|
||||
} |
||||
|
||||
.content-title { |
||||
font-size: 40px; |
||||
letter-spacing: 5px; |
||||
} |
||||
|
||||
.paragraph { |
||||
font-size: 20px; |
||||
letter-spacing: 2px; |
||||
line-height: 1.6; |
||||
} |
||||
|
||||
.type-title { |
||||
font-size: 32px; |
||||
height: 50px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.table-title { |
||||
font-family: SimHei; |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.table-time { |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
|
||||
.fuzhu { |
||||
font-size: 12px; |
||||
letter-spacing: 1px; |
||||
} |
||||
} |
||||
|
||||
:deep(.el-scrollbar__view) { |
||||
display: inline !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue