sunli
/
qingtian-report-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:水雨情统计

master
waibao2 5 days ago
parent
d29d2b56da
commit
8719fe0910
3 changed files with 443 additions and 6 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. 23
      src/views/report/jbmonth/index.vue
  2. 164
      src/views/report/jbsyq/index.vue
  3. 262
      src/views/report/jbweek/index.vue

23
src/views/report/jbmonth/index.vue
Unescape View File

@ -231,7 +231,7 @@ @@ -231,7 +231,7 @@
</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 id="el-table3" class="report-table" :data="briefingData.fubiao3" border show-summary :summary-method="getSummaries">
<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">
@ -379,11 +379,22 @@ @@ -379,11 +379,22 @@
// 下载按纽操作
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`)
const params = new URLSearchParams({
year: queryParams.year,
month: queryParams.month,
startDate: queryParams.startDate,
endDate: queryParams.endDate,
startDateRiver: queryParams.startDateRiver,
endDateRiver: queryParams.endDateRiver,
startDateRsvr: queryParams.startDateRsvr,
endDateRsvr: queryParams.endDateRsvr
}).toString();
proxy.download(
`/report/jbmonthexport?${params}`,
{},
`${queryParams.year}年${queryParams.month}月水雨情简报.doc`
)
}
</script>
<style scoped lang="scss">

164
src/views/report/jbsyq/index.vue
Unescape View File

@ -0,0 +1,164 @@ @@ -0,0 +1,164 @@
<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: 150px" v-model="queryParams.selectDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="选择查询日期">
</el-date-picker>
</el-form-item>
<el-form-item label="常年区间">
<el-date-picker style="width: 90px" v-model="queryParams.startYear" type="year" value-format="YYYY" format="YYYY" placeholder="起">
</el-date-picker>至
<el-date-picker style="width: 90px" v-model="queryParams.endYear" 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-content">
<div class="suojin">
<p class="type-title ">一、河网水情</p>
<p class="paragraph ">{{briefingData.river1}}</p>
</div>
<div class="suojin">
<p class="type-title ">二、水库水情</p>
<p class="paragraph ">{{briefingData.rsvr}}</p>
<p class="paragraph ">{{briefingData.river2}}</p>
</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({
selectDate: '',
endYear: dayjs().format('YYYY'),
startYear: '1964',
})
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/river_report', queryParams)
if (res.code == 0) {
let data = res.data
briefingData.value = data
showBriefing.value = true
}
} finally {
fullscreenLoading.value = false
}
}
// 下载按钮操作
const handleExport = () => {
if (!showBriefing.value || !briefingData.value) {
proxy.$message.warning('暂无数据可导出')
return
}
// 构建文档内容
const content = `
<html xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta charset='utf-8'>
<title>简报</title>
</head>
<body>
<div>
<div style="text-indent: 2em;">
<p style="font-size: 32px; height: 50px; font-weight: bold;">一、河网水情</p>
<p style="font-family: FangSong; font-size: 20px; letter-spacing: 2px; line-height: 1.6;">${briefingData.value.river1 || ''}</p>
</div>
<div style="text-indent: 2em;">
<p style="font-size: 32px; height: 50px; font-weight: bold;">二、水库水情</p>
<p style="font-family: FangSong; font-size: 20px; letter-spacing: 2px; line-height: 1.6;">${briefingData.value.rsvr || ''}</p>
<p style="font-family: FangSong; font-size: 20px; letter-spacing: 2px; line-height: 1.6;">${briefingData.value.river2 || ''}</p>
</div>
</div>
</body>
</html>
`
// 创建 Blob 对象
const blob = new Blob([content], {
type: 'application/msword;charset=utf-8'
})
// 创建下载链接
const link = document.createElement('a')
const fileName = `水雨情统计简报_${queryParams.selectDate || dayjs().format('YYYY-MM-DD')}.doc`
if (window.Blob && window.navigator.msSaveOrOpenBlob) {
// IE
window.navigator.msSaveOrOpenBlob(blob, fileName)
} else {
// 其他浏览器
const url = window.URL.createObjectURL(blob)
link.href = url
link.download = fileName
link.click()
window.URL.revokeObjectURL(url)
}
}
</script>
<style scoped lang="scss">
.briefing {
width: 92%;
margin: 0 auto;
/* 简报主体内容 */
.briefing-content {
font-family: FangSong;
.suojin {
text-indent: 2em;
}
.paragraph {
font-size: 20px;
letter-spacing: 2px;
line-height: 1.6;
}
.type-title {
font-size: 32px;
height: 50px;
font-weight: bold;
}
}
}
:deep(.el-scrollbar__view) {
display: inline !important;
}
</style>

262
src/views/report/jbweek/index.vue
Unescape View File

@ -0,0 +1,262 @@ @@ -0,0 +1,262 @@
<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: 150px" v-model="queryParams.selectDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="选择查询日期">
</el-date-picker>
</el-form-item>
<el-form-item label="雨量统计年">
<el-date-picker style="width: 90px" v-model="queryParams.startYear" type="year" value-format="YYYY" format="YYYY" placeholder="起">
</el-date-picker>至
<el-date-picker style="width: 90px" v-model="queryParams.endYear" 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.startYear2" type="year" value-format="YYYY" format="YYYY" placeholder="起">
</el-date-picker>至
<el-date-picker style="width: 90px" v-model="queryParams.endYear2" 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.startYear3" type="year" value-format="YYYY" format="YYYY" placeholder="起">
</el-date-picker>至
<el-date-picker style="width: 90px" v-model="queryParams.endYear3" 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-name-date">
<div class="briefing-name">{{stationName}}</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>
<div class="suojin">
<p class="type-title ">一、雨情</p>
<p class="paragraph ">1、上周及近期回顾</p>
<p class="paragraph ">{{briefingData.lastWeekRain1}}</p>
<p class="paragraph ">{{briefingData.lastWeekRain2}}</p>
<p class="paragraph ">2、今年回顾</p>
<p class="paragraph ">{{briefingData.yearRain}}</p>
</div>
<div class="suojin">
<p class="type-title ">二、水情</p>
<p class="paragraph ">1、水库水情</p>
<p class="paragraph ">{{briefingData.rsvr}}</p>
<p class="paragraph ">2、河网水情</p>
<p class="paragraph ">{{briefingData.river1}}</p>
<p class="paragraph ">{{briefingData.river2}}</p>
</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({
selectDate: '',
endYear: dayjs().format('YYYY'),
startYear: '1964',
startYear2: '1964',
endYear2: dayjs().format('YYYY'),
startYear3: '1964',
endYear3: dayjs().format('YYYY'),
})
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/week_report', queryParams)
if (res.code == 0) {
let data = res.data
data.title = data.m + "月第" + data.weekIndex + "周水雨情简况"
briefingData.value = data
showBriefing.value = true
}
} finally {
fullscreenLoading.value = false
}
}
// 下载按钮操作
const handleExport = () => {
// const params = new URLSearchParams({
// selectDate: queryParams.selectDate,
// startYear: queryParams.startYear,
// endYear: queryParams.endYear,
// startYear2: queryParams.startYear2,
// endYear2: queryParams.endYear2,
// startYear3: queryParams.startYear3,
// endYear3: queryParams.endYear3
// }).toString();
// proxy.download(
// `/report/week_report_export?${params}`,
// {},
// `${briefingData.value.m}月第${briefingData.value.weekIndex}周水雨情周报.doc`
// )
if (!showBriefing.value) {
proxy.$message.warning('暂无数据可导出')
return
}
// 获取要导出的内容
const content = generateDocContent()
// 创建Blob对象
const blob = new Blob([content], {
type: 'application/msword;charset=utf-8'
})
// 创建下载链接
const link = document.createElement('a')
const fileName = `${briefingData.value.m}月第${briefingData.value.weekIndex}周水雨情简报.doc`
if (link.download !== undefined) {
// 使用 Blob URL
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', fileName)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
} else {
// 兼容旧版本浏览器
window.open(`data:application/msword;charset=utf-8,${encodeURIComponent(content)}`)
}
}
// 生成DOC文档内容
const generateDocContent = () => {
const data = briefingData.value
// 简单的 DOC 格式模板
return `
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta charset="utf-8">
<title>${data.title}</title>
</head>
<body>
<div style="text-align:center;">
<p style="font-family:SimSun;color:red;font-size:36pt;font-weight:bold;letter-spacing:10px;margin:20pt 0;">
水雨情简报
</p>
<p style="font-family:KaiTi;font-size:18pt;text-align:right;">
${stationName}
</p>
<hr style="color:red;height:2px;border-top:2px solid red;" />
<p style="font-family:FangSong;font-size:30pt;letter-spacing:5px;margin:40pt 0;">
${data.title}
</p>
</div>
<div style="font-family:FangSong;">
<p style="font-size:24pt;font-weight:bold;margin:20pt 0;">一、雨情</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">1、上周及近期回顾</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">${data.lastWeekRain1 || ''}</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">${data.lastWeekRain2 || ''}</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">2、今年回顾</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">${data.yearRain || ''}</p>
<p style="font-size:24pt;font-weight:bold;margin:20pt 0;">二、水情</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">1、水库水情</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">${data.rsvr || ''}</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">2、河网水情</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">${data.river1 || ''}</p>
<p style="font-size:20pt;margin:10pt 0;text-indent:2em;">${data.river2 || ''}</p>
</div>
</body>
</html>
`
}
</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;
}
}
}
:deep(.el-scrollbar__view) {
display: inline !important;
}
</style>
Write Preview
Loading…
Cancel
Save