这是一个关于年逐日降雨量和蓄水量统计的系统，包括了HTML页面模板、Java服务层和数据库查询。系统提供了年逐日报表、年逐日蓄水量报表以及年逐日降雨量报表，支持筛选水库、测站和年份，并提供打印和导出功能。数据通过Mapper接口从数据库中获取，经过处理后填充到前端展示表格。报表包含了累计降雨量、降雨天数、最大和最小降雨量等信息。
1.数据报表
1.年逐日报表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>年逐日雨量统计表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
.box{
height: 100%;
padding: 10px;
/* background-color: #B22E37; */
}
.table{
width: 100%;
border-collapse: collapse;
text-align: center;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
font-size: 14px;
}
.table th{
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
.table td{
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
</style>
</head>
<body>
<div class="box" id="app">
<table class="table">
<thead>
<tr>
<th width="100" height="30">日\月</th>
<th v-for="i in 12">{{i}}月</th>
</tr>
</thead>
<tbody>
<tr v-for="j in 31">
<th>{{j}}日</th>
<td v-for="k in 12">{{init(k,j)}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
dataList: [
{month: 1,day: 1,drp: Math.random().toFixed(1)},
{month: 1,day: 5,drp: Math.random().toFixed(1)},
{month: 1,day: 12,drp: Math.random().toFixed(1)},
{month: 2,day: 1,drp: Math.random().toFixed(1)},
{month: 2,day: 19,drp: Math.random().toFixed(1)},
{month: 2,day: 25,drp: Math.random().toFixed(1)},
{month: 3,day: 1,drp: Math.random().toFixed(1)},
{month: 5,day: 1,drp: Math.random().toFixed(1)},
{month: 10,day: 1,drp: Math.random().toFixed(1)},
{month: 12,day: 7,drp: Math.random().toFixed(1)},
]
},
mounted() {
},
methods:{
init(m,d){
let val = ''
for (var i = 0; i < this.dataList.length; i++) {
if(this.dataList[i].month == m && this.dataList[i].day == d){
val = this.dataList[i].drp
break
}
}
return val
}
}
})
</script>
</body>
</html>
/* 年逐日雨情统计 */
@Override
@DataScope(addvcdAlias = "b", rscdAlias = "b")
public List<Map<String, Object>> getReportPPTNYearAndDate(ReportParamsVo reportParamsVo) {
String addvcd = reportParamsVo.getAddvcd();
if (addvcd != null && !addvcd.equals("")) {
if (addvcd.substring(2, 6).equals("0000")) {
reportParamsVo.setAddvcd(addvcd.substring(0, 2));
} else if (addvcd.substring(4, 6).equals("00")) {
reportParamsVo.setAddvcd(addvcd.substring(0, 4));
}
}
List<YearAndDayReportDTO> reportPPTNYearAndDate = stPptnRMapper.getReportPPTNYearAndDate(reportParamsVo);
BigDecimal[][] yadpptn = new BigDecimal[12][31];
for (YearAndDayReportDTO yearAndDayReportDTO : reportPPTNYearAndDate) {
yadpptn[yearAndDayReportDTO.getMonth() - 1][yearAndDayReportDTO.getDay() - 1] = yearAndDayReportDTO.getDrp();
}
List<Map<String, Object>> list = new ArrayList<>();
for (int i = 0; i < 31; i++) {
Map<String, Object> maps = new HashMap<>();
for (int j = 0; j < 12; j++) {
maps.put(String.valueOf(j + 1), yadpptn[j][i]);
}
list.add(maps);
}
Map<String, Object> mapSum = new HashMap<>();
Map<String, Object> mapDaynum = new HashMap<>();
Map<String, Object> mapmax = new HashMap<>();
Map<String, Object> mapmaxDate = new HashMap<>();
Map<String, Object> mapmin = new HashMap<>();
Map<String, Object> mapminDate = new HashMap<>();
for (int i = 0; i < 12; i++) {
Double sumDrp = 0.0;
int rainFall = 0;
Double maxDrp = 0.0;//最小值
Double minDrp = Double.POSITIVE_INFINITY;//最大值
String maxDate = "";
String minDate = "";
for (int j = 0; j < 31; j++) {
if (null != yadpptn[i][j]) {
sumDrp += yadpptn[i][j].doubleValue();
if (yadpptn[i][j].doubleValue() > 0) {
rainFall++;
if (yadpptn[i][j].doubleValue() > maxDrp) {
maxDrp = yadpptn[i][j].doubleValue();
maxDate = (i + 1) + "月" + (j + 1) + "日";
}
if (yadpptn[i][j].doubleValue() < minDrp) {
minDrp = yadpptn[i][j].doubleValue();
minDate = (i + 1) + "月" + (j + 1) + "日";
}
}
}
}
if (sumDrp != 0.0) {
mapSum.put(String.valueOf(i + 1), new DecimalFormat("#0.0").format(sumDrp));//累计降雨量
} else {
mapSum.put(String.valueOf(i + 1), "");//累计降雨量
}
if (rainFall != 0) {
mapDaynum.put(String.valueOf(i + 1), rainFall);//降雨天数
} else {
mapDaynum.put(String.valueOf(i + 1), "");//降雨天数
}
if (maxDrp != 0.0) {
mapmax.put(String.valueOf(i + 1), maxDrp);//最大降雨量
} else {
mapmax.put(String.valueOf(i + 1), "");//最大降雨量
}
mapmaxDate.put(String.valueOf(i + 1), maxDate);//最大降雨日期
if (minDrp != Double.POSITIVE_INFINITY) {
mapmin.put(String.valueOf(i + 1), minDrp);//最小降雨量
} else {
mapmin.put(String.valueOf(i + 1), "");//最小降雨量
}
mapminDate.put(String.valueOf(i + 1), minDate);//最小降雨日期
}
list.add(mapSum);
list.add(mapDaynum);
list.add(mapmax);
list.add(mapmaxDate);
list.add(mapmin);
list.add(mapminDate);
return list;
}2.年逐日蓄水量报表
<template>
<div class="app-container">
<el-form :model="queryParams" :rules="rules" ref="queryForm" :inline="true" label-width="80px">
<el-form-item label="水库选择" prop="rscd">
<el-select
v-model="queryParams.rscd"
placeholder="请选择"
filterable
@change="handleChangeOfrsvrcd"
>
<el-option
v-for="item in wrprsrbsinList"
:key="item.rscd"
:label="item.rsnm"
:value="item.rscd"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="测站选择" prop="stcd">
<el-select
v-model="queryParams.stcd"
placeholder="请选择"
filterable
@change="handleChangeStcd"
>
<el-option
v-for="item in stbprpbList"
:key="item.value"
:label="item.stnm"
:value="item.stcd"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="年份">
<el-date-picker
v-model="queryParams.year"
type="year"
style="width: 240px"
value-format="YYYY"
@change="changeDate"
placeholder="选择年">
</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="success" icon="Printer" @click="myPrint">打印</el-button>
<el-button type="warning" icon="Download" @click="myExport">导出</el-button>
</el-form-item>
</el-form>
<el-card class="box-card" id="contextIntake2">
<div class="table-title" style="text-align:center">{{mainTitle}}</div>
<div class="unit">
<span>{{subTitle}}</span>
<span>单位：mm</span>
</div>
<table class="el-table" id="myTable" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width: 100%;text-align: center;font-size: 13px;">
<thead>
<tr style="background:#f8f8f9;height:35px">
<th width="125px">日 \ 月</th>
<th width="125px" v-for="i in 12">{{i}}月</th>
<!-- <th th:each="i : ${#numbers.sequence(1,12)}" th:text="${i}+'月'"></th> -->
</tr>
</thead>
<tbody>
<tr v-for="i in 31">
<th>{{i}}</th>
<td v-for="j in 12"></td>
</tr>
<tr>
<th>最高</th>
<td v-for="j in 12"></td>
</tr>
<tr>
<th>日期</th>
<td v-for="j in 12"></td>
</tr>
<tr>
<th>最低</th>
<td v-for="j in 12"></td>
</tr>
<tr>
<th>日期</th>
<td v-for="j in 12"></td>
</tr>
<tr>
<th>平均值</th>
<td v-for="j in 12"></td>
</tr>
</tbody>
</table>
</el-card>
</div>
</template>
<script setup name="Rsvrwyearanddayreport">
//年逐日蓄水量统计
import { listWrprsrbsinAll } from "@/api/oam/basic/wrprsrbsin";
import { listStstbprpbAll } from "@/api/oam/basic/ststbprpb";
import { getDatasW } from "@/api/oam/datareport/datareport";
import { toRefs } from "@vue/reactivity";
import $ from 'jquery';
const { proxy } = getCurrentInstance();
const wrprsrbsinList = ref([]); //水库列表
const stbprpbList = ref([]); //测站列表
const tableData = ref([]);//数据列表
const mainTitle = ref('');//主标题
const subTitle = ref('');//副标题
const data =reactive({
//查询参数
queryParams:{
year:new Date().getFullYear()+'',
rscd: null,
stcd: null,
},
tableTitle: {
rsnm:'',
stnm:'',
},
rules: {
rscd: [
{ required: true, message: '请选择水库', trigger: 'change' }
],
stcd: [
{ required: true, message: '请选择测站', trigger: 'blur' }
],
},
})
const{ queryParams,tableTitle,rules} = toRefs(data);
/*初始化参数列表 */
function initQueryParams(){
var rPromise = new Promise((resolve,reject)=>{
//初始化水库
listWrprsrbsinAll().then((response) => {
wrprsrbsinList.value = response.rows;
if(response.rows.length > 0){
queryParams.value.rscd = response.rows[0].rscd;
tableTitle.value.rsnm = response.rows[0].rsnm;
resolve(wrprsrbsinList.value[0].rscd);
}else{
proxy.$modal.msgWarning("暂无水库");
}
});
})
//初始化测站
rPromise.then(rscdQuery=>{
listStstbprpbAll({ rscd: rscdQuery,sttp:'RR'}).then((response) => {
stbprpbList.value = response.data;
if (response.data.length > 0) {
queryParams.value.stcd = response.data[0].stcd;
tableTitle.value.stnm = response.data[0].stnm;
getList();
}else{
proxy.$modal.msgWarning("暂无测站");
}
});
})
};
/**查询水库列表 */
function getWrprsrbsinList() {
listWrprsrbsinAll().then((response) => {
wrprsrbsinList.value = response.rows;
});
}
//选择水库(查询条件)
function handleChangeOfrsvrcd(value) {
queryParams.value.stcd = null;
var obj = wrprsrbsinList.value.find((item) => {
return item.rscd == value;
});
tableTitle.value.rsnm = obj.rsnm;
getStbprpbAll(value);
}
//获取所有测站列表(查询条件)
function getStbprpbAll(value) {
listStstbprpbAll({ rscd: value,sttp:'RR' }).then((response) => {
stbprpbList.value = response.data;
if (response.data.length > 0) {
tableTitle.value.stnm = response.data[0].stnm;
queryParams.value.stcd=response.data[0].stcd;
}else{
roxy.$modal.msgWarning("暂无测站");
}
});
}
//选择测站
function handleChangeStcd(value) {
queryParams.value.stcd = value;
var obj = stbprpbList.value.find((item) => {
return item.stcd == value;
});
tableTitle.value.stnm = obj.stnm;
// handleQuery();
};
//选择时间
function changeDate(value){
queryParams.value.year=value;
// handleQuery();
};
//表格索引
function indexMethod(index) {
if(index==31)return "累计雨量";
if(index==32)return "降雨天数";
if(index==33)return "最大降雨";
if(index==34)return "发生日期";
if(index==35)return "最小降雨";
if(index==36)return "发生日期";
return index+1;
};
/** 搜索按钮操作 */
function handleQuery() {
if(queryParams.value.stcd==null){
return false;
}
getList();
}
//获取数据
function getList(){
mainTitle.value=tableTitle.value.stnm+'年逐日蓄水量报表';
subTitle.value=queryParams.value.year+'年 '+tableTitle.value.rsnm;
getDatasW(queryParams.value).then((response)=>{
tableData.value = response;
if(response.length > 0){
$('#myTable td').text('')
zuzhiDatas(response)
}else {
$('#myTable td').text('')
}
})
};
//表格数据渲染
function zuzhiDatas(dataList) {
for (var i = 1; i <= 12 ; i++) {
for (var j = 1; j <= 31; j++) {
dataList.forEach(function (item) {
if(i == item.month && j == item.day){
$('#myTable').find('tr').eq(j).find('td').eq(i-1).text(item.val)
}
})
}
}
for (var i = 1; i <= 12 ; i++) {
var array = []
dataList.forEach(function (item) {
if(i == item.month){
array.push(item.val)
}
})
var maxv = getMax(array)
var minv = getMin(array)
var avgv = getAvg(array)
$('#myTable').find('tr').eq(32).find('td').eq(i-1).text(maxv)
$('#myTable').find('tr').eq(34).find('td').eq(i-1).text(minv)
$('#myTable').find('tr').eq(36).find('td').eq(i-1).text(avgv)
//寻找极值对应的日期
for (var j = 0; j < dataList.length; j++) {
if(i == dataList[j].month && dataList[j].val == maxv){
var tmStr = dataList[j].month + '月' + dataList[j].day + '日'
$('#myTable').find('tr').eq(33).find('td').eq(i-1).text(tmStr)
break
}
}
for (var j = 0; j < dataList.length; j++) {
if(i == dataList[j].month && dataList[j].val == minv){
var tmStr = dataList[j].month + '月' + dataList[j].day + '日'
$('#myTable').find('tr').eq(35).find('td').eq(i-1).text(tmStr)
break
}
}
}
}
;
function getMax(arr) {
var max = arr[0]
for (var i = 1; i < arr.length; i++) {
if(max < arr[i] && arr[i] != null){
max = arr[i]
}
}
return max
};
function getMin(arr) {
var min = arr[0]
for (var i = 1; i < arr.length; i++) {
if(min > arr[i] && arr[i] != null){
min = arr[i]
}
}
return min
};
function getAvg(arr) {
var sum = 0
for (var i = 0; i < arr.length; i++) {
if(arr[i] != null){
sum += arr[i]
}
}
return (sum/arr.length).toFixed(2) == 'NaN' ? '' :(sum/arr.length).toFixed(2)
};
/** 重置按钮操作 */
function resetQuery() {
reset();
proxy.resetForm("queryForm");
initQueryParams();
};
//重置
function reset(){
queryParams.value.rscd = null;
queryParams.value.stcd = null;
queryParams.value.year=new Date().getFullYear()+'';
tableTitle.value.rsnm='';
tableTitle.value.stnm='';
subTitle.value='';
wrprsrbsinList.value=[];
stbprpbList.value=[];
};
//打印
function myPrint(){
webPrint(contextIntake2)
};
//打印功能
function webPrint(domid) {
//window.print();//打印
//判断iframe是否存在，不存在则创建iframe
var iframe = document.getElementById("print-iframe");
if (!iframe) {
var el = domid;
iframe = document.createElement("IFRAME");
var doc = null;
iframe.setAttribute("id", "print-iframe");
iframe.setAttribute(
"style",
"position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
);
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<style media="print">@page {size: auto;margin: 5mm auto;}</style>'); //解决出现页眉页脚和路径的问题
//这里可以自定义样式
doc.write("<style>"+
"table{border-collapse: collapse;}"+
".el-table td,th{border: 1px solid #9b9b9b;text-align:center;}"+
".el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{border:1px solid #9b9b9b;border-bottom:0px}"+
".unit { display: flex; margin: 10px 10px; font-size: 13px; flex-wrap: nowrap; justify-content: space-between; align-items: center;}"+
"</style>");
doc.write("<div>" + el.innerHTML + "</div>");
doc.close();
iframe.contentWindow.focus();
}
iframe.contentWindow.print();
document.body.removeChild(iframe);
};
//导出功能
function myExport(){
var fileName = mainTitle.value;
var context = document.getElementById("contextIntake2").innerHTML;
var data={filename:fileName,context:context}
proxy.download('oam/reportstatistic/report/export',
data
, `${subTitle.value+mainTitle.value}.xlsx`)
}
initQueryParams();
</script>
<style scoped>
.table-title{
text-align:center;
font-size: 20px;
}
.unit {
display: flex;
margin: 10px 10px;
font-size: 13px;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;
}
#myTable{
width: 100%;
text-align: center;
border:1px solid #e5e5e5;
font-size: 13px;
}
#myTable tr td,th{
min-width: 120px;
height: 35px;
text-align: center;
border:1px solid #e5e5e5;
}
</style>
3.年逐日降雨量报表
StPptnRMapper.xml
<!--年逐日降雨量统计-->
<select id="getReportPPTNYearAndDate" parameterType="com.ruoyi.oam.reportstatistic.domain.vo.ReportParamsVo"
resultType="com.ruoyi.oam.reportstatistic.domain.vo.YearAndDayReportDTO">
SELECT a.stcd,YEAR(a.tm) `year`,MONTH(a.tm) `month`,DAY(a.tm) `day`,SUM(a.drp) `drp` FROM `st_pptn_r` a
<where>
a.tm <= NOW()
<if test="year!=null and year!=''">and YEAR(a.tm) = #{year}</if>
<if test="stcd!=null and stcd!=''">and a.stcd = #{stcd}</if>
</where>
GROUP BY a.stcd,YEAR(a.tm),MONTH(a.tm),DAY(a.tm)
</select>/* 年逐日雨情统计 StPptnRServiceImpl */
@Override
public List<Map<String, Object>> getReportPPTNYearAndDate(ReportParamsVo reportParamsVo) {
List<YearAndDayReportDTO> reportPPTNYearAndDate = stPptnRMapper.getReportPPTNYearAndDate(reportParamsVo);
BigDecimal[][] yadpptn = new BigDecimal[12][31];
for (YearAndDayReportDTO yearAndDayReportDTO : reportPPTNYearAndDate) {
yadpptn[yearAndDayReportDTO.getMonth() - 1][yearAndDayReportDTO.getDay() - 1] = yearAndDayReportDTO.getDrp();
}
List<Map<String, Object>> list = new ArrayList<>();
for (int i = 0; i < 31; i++) {
Map<String, Object> maps = new HashMap<>();
for (int j = 0; j < 12; j++) {
maps.put(String.valueOf(j + 1), yadpptn[j][i]);
}
list.add(maps);
}
Map<String, Object> mapSum = new HashMap<>();
Map<String, Object> mapDaynum = new HashMap<>();
Map<String, Object> mapmax = new HashMap<>();
Map<String, Object> mapmaxDate = new HashMap<>();
Map<String, Object> mapmin = new HashMap<>();
Map<String, Object> mapminDate = new HashMap<>();
for (int i = 0; i < 12; i++) {
Double sumDrp = 0.0;
int rainFall = 0;
Double maxDrp = 0.0;//最小值
Double minDrp = Double.POSITIVE_INFINITY;//最大值
String maxDate = "";
String minDate = "";
for (int j = 0; j < 31; j++) {
if (null != yadpptn[i][j]) {
sumDrp += yadpptn[i][j].doubleValue();
if (yadpptn[i][j].doubleValue() > 0) {
rainFall++;
if (yadpptn[i][j].doubleValue() > maxDrp) {
maxDrp = yadpptn[i][j].doubleValue();
maxDate = (i + 1) + "月" + (j + 1) + "日";
}
if (yadpptn[i][j].doubleValue() < minDrp) {
minDrp = yadpptn[i][j].doubleValue();
minDate = (i + 1) + "月" + (j + 1) + "日";
}
}
}
}
if (sumDrp != 0.0) {
mapSum.put(String.valueOf(i + 1), new DecimalFormat("#0.0").format(sumDrp));//累计降雨量
} else {
mapSum.put(String.valueOf(i + 1), "");//累计降雨量
}
if (rainFall != 0) {
mapDaynum.put(String.valueOf(i + 1), rainFall);//降雨天数
} else {
mapDaynum.put(String.valueOf(i + 1), "");//降雨天数
}
if (maxDrp != 0.0) {
mapmax.put(String.valueOf(i + 1), maxDrp);//最大降雨量
} else {
mapmax.put(String.valueOf(i + 1), "");//最大降雨量
}
mapmaxDate.put(String.valueOf(i + 1), maxDate);//最大降雨日期
if (minDrp != Double.POSITIVE_INFINITY) {
mapmin.put(String.valueOf(i + 1), minDrp);//最小降雨量
} else {
mapmin.put(String.valueOf(i + 1), "");//最小降雨量
}
mapminDate.put(String.valueOf(i + 1), minDate);//最小降雨日期
}
list.add(mapSum);
list.add(mapDaynum);
list.add(mapmax);
list.add(mapmaxDate);
list.add(mapmin);
list.add(mapminDate);
return list;
}pptnyearanddayreport
<template>
<div class="app-container">
<el-form :model="queryParams" :rules="rules" ref="queryForm" :inline="true" label-width="80px">
<el-form-item label="水库选择" prop="rscd">
<el-select
v-model="queryParams.rscd"
placeholder="请选择"
filterable
@change="handleChangeOfrsvrcd"
>
<el-option
v-for="item in wrprsrbsinList"
:key="item.rscd"
:label="item.rsnm"
:value="item.rscd"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="测站选择" prop="stcd">
<el-select
v-model="queryParams.stcd"
placeholder="请选择"
filterable
@change="handleChangeStcd"
>
<el-option
v-for="item in stbprpbList"
:key="item.value"
:label="item.stnm"
:value="item.stcd"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="年份">
<el-date-picker
v-model="queryParams.year"
type="year"
style="width: 240px"
value-format="YYYY"
@change="changeDate"
placeholder="选择年">
</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="success" icon="Printer" @click="myPrint">打印</el-button>
<el-button type="warning" icon="Download" @click="myExport">导出</el-button>
</el-form-item>
</el-form>
<el-card class="box-card" id="contextIntake2">
<div class="table-title" style="text-align:center">{{mainTitle}}</div>
<div class="unit">
<span>{{subTitle}}</span>
<span>单位：mm</span>
</div>
<el-table
:data="tableData"
style="width: 100%"
border>
<el-table-column
type="index"
align="center"
label="日 \ 月"
width="100"
:index="indexMethod">
</el-table-column>
<el-table-column
align="center"
prop="1"
label="1月">
</el-table-column>
<el-table-column
align="center"
prop="2"
label="2月">
</el-table-column>
<el-table-column
align="center"
prop="3"
label="3月">
</el-table-column>
<el-table-column
align="center"
prop="4"
label="4月">
</el-table-column>
<el-table-column
align="center"
prop="5"
label="5月">
</el-table-column>
<el-table-column
align="center"
prop="6"
label="6月">
</el-table-column>
<el-table-column
align="center"
prop="7"
label="7月">
</el-table-column>
<el-table-column
align="center"
prop="8"
label="8月">
</el-table-column>
<el-table-column
align="center"
prop="9"
label="9月">
</el-table-column>
<el-table-column
align="center"
prop="10"
label="10月">
</el-table-column>
<el-table-column
align="center"
prop="11"
label="11月">
</el-table-column>
<el-table-column
align="center"
prop="12"
label="12月">
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script setup name="Pptnyearanddayreport">
//年逐日降雨量统计
import { listWrprsrbsinAll } from "@/api/oam/basic/wrprsrbsin";
import { listStstbprpbAll } from "@/api/oam/basic/ststbprpb";
import { getPPTNYearAndDayTable } from "@/api/oam/datareport/datareport";
import { toRefs } from "@vue/reactivity";
const { proxy } = getCurrentInstance();
const wrprsrbsinList = ref([]); //水库列表
const stbprpbList = ref([]); //测站列表
const tableData = ref([]);//数据列表
const mainTitle = ref('');//主标题
const subTitle = ref('');//副标题
const data =reactive({
//查询参数
queryParams:{
year:new Date().getFullYear()+'',
rscd: null,
stcd: null,
},
tableTitle: {
rsnm:'',
stnm:'',
},
rules: {
rscd: [
{ required: true, message: '请选择水库', trigger: 'change' }
],
stcd: [
{ required: true, message: '请选择测站', trigger: 'blur' }
],
},
})
const{ queryParams,tableTitle,rules} = toRefs(data);
/*初始化参数列表 */
function initQueryParams(){
var rPromise = new Promise((resolve,reject)=>{
//初始化水库
listWrprsrbsinAll().then((response) => {
wrprsrbsinList.value = response.rows;
if(response.rows.length > 0){
queryParams.value.rscd = response.rows[0].rscd;
tableTitle.value.rsnm = response.rows[0].rsnm;
resolve(wrprsrbsinList.value[0].rscd);
}else{
proxy.$modal.msgWarning("暂无水库");
}
});
})
//初始化测站
rPromise.then(rscdQuery=>{
listStstbprpbAll({ rscd: rscdQuery,israin:'1'}).then((response) => {
stbprpbList.value = response.data;
if (response.data.length > 0) {
queryParams.value.stcd = response.data[0].stcd;
tableTitle.value.stnm = response.data[0].stnm;
getList();
}else{
proxy.$modal.msgWarning("暂无测站");
}
});
})
};
/**查询水库列表 */
function getWrprsrbsinList() {
listWrprsrbsinAll().then((response) => {
wrprsrbsinList.value = response.rows;
});
}
//选择水库(查询条件)
function handleChangeOfrsvrcd(value) {
queryParams.value.stcd = null;
var obj = wrprsrbsinList.value.find((item) => {
return item.rscd == value;
});
tableTitle.value.rsnm = obj.rsnm;
getStbprpbAll(value);
}
//获取所有测站列表(查询条件)
function getStbprpbAll(value) {
listStstbprpbAll({ rscd: value,israin:'1' }).then((response) => {
stbprpbList.value = response.data;
if (response.data.length > 0) {
tableTitle.value.stnm = response.data[0].stnm;
queryParams.value.stcd=response.data[0].stcd;
}else{
roxy.$modal.msgWarning("暂无测站");
}
});
}
//选择测站
function handleChangeStcd(value) {
queryParams.value.stcd = value;
var obj = stbprpbList.value.find((item) => {
return item.stcd == value;
});
tableTitle.value.stnm = obj.stnm;
// handleQuery();
};
//选择时间
function changeDate(value){
queryParams.value.year=value;
// handleQuery();
};
//表格索引
function indexMethod(index) {
if(index==31)return "累计雨量";
if(index==32)return "降雨天数";
if(index==33)return "最大降雨";
if(index==34)return "发生日期";
if(index==35)return "最小降雨";
if(index==36)return "发生日期";
return index+1;
};
/** 搜索按钮操作 */
function handleQuery() {
if(queryParams.value.stcd==null){
return false;
}
getList();
}
//获取数据
function getList(){
mainTitle.value=tableTitle.value.stnm+'年逐日降雨报表';
subTitle.value=queryParams.value.year+'年 '+tableTitle.value.rsnm;
getPPTNYearAndDayTable(queryParams.value).then((response)=>{
tableData.value=response.data;
})
};
/** 重置按钮操作 */
function resetQuery() {
reset();
proxy.resetForm("queryForm");
initQueryParams();
};
//重置
function reset(){
queryParams.value.rscd = null;
queryParams.value.stcd = null;
queryParams.value.year=new Date().getFullYear()+'';
tableTitle.value.rsnm='';
tableTitle.value.stnm='';
subTitle.value='';
wrprsrbsinList.value=[];
stbprpbList.value=[];
};
//打印
function myPrint(){
webPrint(contextIntake2)
};
//打印功能
function webPrint(domid) {
//window.print();//打印
//判断iframe是否存在，不存在则创建iframe
var iframe = document.getElementById("print-iframe");
if (!iframe) {
var el = domid;
iframe = document.createElement("IFRAME");
var doc = null;
iframe.setAttribute("id", "print-iframe");
iframe.setAttribute(
"style",
"position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
);
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<style media="print">@page {size: auto;margin: 5mm auto;}</style>'); //解决出现页眉页脚和路径的问题
//这里可以自定义样式
doc.write("<style>"+
"table{border-collapse: collapse;}"+
".el-table td,th{border: 1px solid #9b9b9b;text-align:center;}"+
".el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{border:1px solid #9b9b9b;border-bottom:0px}"+
".unit { display: flex; margin: 10px 10px; font-size: 13px; flex-wrap: nowrap; justify-content: space-between; align-items: center;}"+
"</style>");
doc.write("<div>" + el.innerHTML + "</div>");
doc.close();
iframe.contentWindow.focus();
}
iframe.contentWindow.print();
document.body.removeChild(iframe);
};
//导出功能
function myExport(){
var fileName = mainTitle.value;
var context = document.getElementById("contextIntake2").innerHTML;
var data={filename:fileName,context:context}
proxy.download('oam/reportstatistic/report/export',
data
, `${subTitle.value+mainTitle.value}.xlsx`)
}
initQueryParams();
</script>
<style scoped>
.table-title{
text-align:center;
font-size: 20px;
}
.unit {
display: flex;
margin: 10px 10px;
font-size: 13px;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;
}
#myTable{
width: 100%;
text-align: center;
border:1px solid #e5e5e5;
font-size: 13px;
}
#myTable tr td,th{
min-width: 120px;
height: 35px;
text-align: center;
border:1px solid #e5e5e5;
}
</style>
4.年逐月降雨量报表
StPptnRMapper.xml
<!--查询所有雨量站-->
<select id="getAllStPPthR" parameterType="com.ruoyi.oam.reportstatistic.domain.vo.ReportParamsVo"
resultType="com.alibaba.fastjson.JSONObject">
select DISTINCT c.rscd,c.rsnm,c.alias,c.addvcd,b.stcd,b.stnm from wrp_rsr_bsin c
left join st_stbprp_b b on c.rscd=b.ofrsvrcd
left join st_pptn_r r on r.stcd=b.stcd
<where>
b.israin=1
<if test="rscd != null and rscd != ''">and c.rscd=#{rscd}</if>
<if test="stcd != null and stcd != ''">and b.stcd=#{stcd}</if>
</where>
order by c.rscd,b.stcd
</select>
<!--年逐月雨情统计-->
<select id="getPPTNYearAndMonthTable" parameterType="com.ruoyi.oam.reportstatistic.domain.vo.ReportParamsVo"
resultType="com.alibaba.fastjson.JSONObject">
select r.stcd,SUM(r.drp)drp,DATE_FORMAT(r.tm,'%m')tm,DATE_FORMAT(r.tm,'%Y-%m')tms,b.stnm from st_pptn_r r
left join st_stbprp_b b on r.stcd=b.stcd
<where>
r.tm <= now()
<if test="year != null and year != ''">and YEAR(r.tm)=#{year}</if>
</where>
GROUP BY r.stcd, MONTH(r.tm)
order by r.stcd,r.tm
</select>
<!--月逐日雨情统计-->
<select id="getPPTNMonthAndDayTable" parameterType="com.ruoyi.oam.reportstatistic.domain.vo.ReportParamsVo"
resultType="com.alibaba.fastjson.JSONObject">
select r.stcd,SUM(r.drp)drp,DATE_FORMAT(r.tm,'%d')tm,DATE_FORMAT(r.tm,'%Y-%m-%d')tms,b.stnm from st_pptn_r r
left join st_stbprp_b b on r.stcd=b.stcd
<where>
r.tm <= now()
<if test="year != null and year != ''">and YEAR(r.tm) = #{year}</if>
<if test="month != null and month != ''">and MONTH(r.tm)= #{month}</if>
</where>
GROUP BY r.stcd, DAY(r.tm)
order by r.stcd,r.tm
</select>
<!--日逐时降雨量-->
<select id="getPPTNDayAndHourTable" parameterType="com.ruoyi.oam.reportstatistic.domain.vo.ReportParamsVo"
resultType="com.alibaba.fastjson.JSONObject">
select r.stcd,SUM(r.drp)drp,DATE_FORMAT(r.tm,'%H')tm,DATE_FORMAT(r.tm,'%Y-%m-%d %H')tms,b.stnm from st_pptn_r r
left join st_stbprp_b b on r.stcd=b.stcd
<where>
r.tm <= now()
<if test="year != null and year != ''">and YEAR(r.tm) = #{year}</if>
<if test="month != null and month != ''">and MONTH(r.tm)= #{month}</if>
<if test="day != null and day != ''">and DAY(r.tm)= #{day}</if>
</where>
GROUP BY r.stcd, HOUR(r.tm)
order by r.stcd,r.tm
</select>StPptnRMapper.java
/*查询所有雨量站*/
List<JSONObject> getAllStPPthR(ReportParamsVo reportParamsVo);
/*年逐月降雨量*/
List<JSONObject> getPPTNYearAndMonthTable(ReportParamsVo reportParamsVo);
/*日逐时降雨量*/
List<JSONObject> getPPTNDayAndHourTable(ReportParamsVo reportParamsVo);
/*降雨量月逐日统计表*/
List<JSONObject> getPPTNMonthAndDayTable(ReportParamsVo reportParamsVo);StPptnRServiceImpl
/*年逐月雨量统计*/
@Override
public Map<String, Object> getPPTNYearAndMonthTable(ReportParamsVo reportParamsVo) {
List<JSONObject> allStPPthR = stPptnRMapper.getAllStPPthR(reportParamsVo);
List<JSONObject> list = stPptnRMapper.getPPTNYearAndMonthTable(reportParamsVo);
List<Map<String, Object>> lists = new ArrayList<>();
Double maxD = 0.0;
Double minD = Double.POSITIVE_INFINITY;
JSONObject maxObj = new JSONObject();
JSONObject minObj = new JSONObject();
for (JSONObject obj : allStPPthR) {
Map<String, Object> map = new HashMap<>();
double sum = 0.0;
StringBuffer minTm = new StringBuffer();
StringBuffer maxTm = new StringBuffer();
for (int i = 1; i <= 12; i++) {
for (JSONObject stPptnR : list) {
if (obj.getString("stcd").equals(stPptnR.getString("stcd"))) {
if (i == stPptnR.getInteger("tm")) {
Double drp = stPptnR.getDoubleValue("drp");
map.put(String.valueOf(i), drp);
sum += stPptnR.getDoubleValue("drp");
if (drp > maxD) {
maxD = drp;
maxObj = stPptnR;
}
if (drp <= minD) {
minD = drp;
minObj = stPptnR;
}
break;
} else {
map.put(String.valueOf(i), null);
}
}
}
}
map.put("parentName", obj.getString("parentName"));
map.put("advm", obj.getString("name"));
map.put("rsnm", obj.getString("rsnm"));
map.put("stcd", obj.getString("stcd"));
map.put("stnm", obj.getString("stnm"));
map.put("sum", String.format("%.1f", sum));
lists.add(map);
}
Map<String, Object> result = new HashMap<>();
Map<String, Object> map2 = new HashMap<>();
map2.put("minDrp", minObj.getDouble("drp"));
map2.put("maxDrp", maxObj.getDouble("drp"));
map2.put("maxTm", maxObj.getString("tms"));
map2.put("minTm", minObj.getString("tms"));
map2.put("minStcd", minObj.getString("stnm"));
map2.put("maxStcd", maxObj.getString("stnm"));
result.put("list", lists);
result.put("report", map2);
return result;
}
/*月逐日雨量统计*/
@Override
public Map<String, Object> getPPTNMonthAndDayTable(ReportParamsVo reportParamsVo) {
List<JSONObject> allStPPthR = stPptnRMapper.getAllStPPthR(reportParamsVo);
List<JSONObject> list = stPptnRMapper.getPPTNMonthAndDayTable(reportParamsVo);
int dayNum = getDayNum(reportParamsVo);
List<Map<String, Object>> lists = new ArrayList<>();
Double maxD = 0.0;
Double minD = Double.POSITIVE_INFINITY;
JSONObject maxObj = new JSONObject();
JSONObject minObj = new JSONObject();
for (JSONObject obj : allStPPthR) {
Map<String, Object> map = new HashMap<>();
double sum = 0.0;
for (int i = 1; i <= dayNum; i++) {
for (JSONObject jsonObject : list) {
if (obj.getString("stcd").equals(jsonObject.getString("stcd"))) {
if (i == jsonObject.getInteger("tm")) {
Double drp = jsonObject.getDoubleValue("drp");
map.put(String.valueOf(i), drp);
sum += jsonObject.getDoubleValue("drp");
if (drp >= maxD) {
maxD = drp;
maxObj = jsonObject;
}
if (drp <= minD) {
minD = drp;
minObj = jsonObject;
}
break;
} else {
map.put(String.valueOf(i), null);
}
}
}
}
map.put("parentName", obj.getString("parentName"));
map.put("advm", obj.getString("name"));
map.put("rsnm", obj.getString("rsnm"));
map.put("stcd", obj.getString("stcd"));
map.put("stnm", obj.getString("stnm"));
map.put("sum", String.format("%.1f", sum));
lists.add(map);
}
Map<String, Object> result = new HashMap<>();
Map<String, Object> map2 = new HashMap<>();
map2.put("minDrp", minObj.getDouble("drp"));
map2.put("maxDrp", maxObj.getDouble("drp"));
map2.put("maxTm", maxObj.getString("tms"));
map2.put("minTm", minObj.getString("tms"));
map2.put("minStcd", minObj.getString("stnm"));
map2.put("maxStcd", maxObj.getString("stnm"));
result.put("list", lists);
result.put("report", map2);
return result;
}
/*日逐时降雨量*/
@Override
public Map<String, Object> getPPTNDayAndHourTable(ReportParamsVo reportParamsVo) {
List<JSONObject> allStPPthR = stPptnRMapper.getAllStPPthR(reportParamsVo);
List<JSONObject> list = stPptnRMapper.getPPTNDayAndHourTable(reportParamsVo);
List<Map<String, Object>> lists = new ArrayList<>();
Double maxD = 0.0;
Double minD = Double.POSITIVE_INFINITY;
JSONObject maxObj = new JSONObject();
JSONObject minObj = new JSONObject();
for (JSONObject obj : allStPPthR) {
Map<String, Object> map = new HashMap<>();
double sum = 0.0;
for (int i = 0; i < 24; i++) {
for (JSONObject jsonObject : list) {
if (obj.getString("stcd").equals(jsonObject.getString("stcd"))) {
map.put(String.valueOf(i), jsonObject.getDoubleValue("drp"));
if (i == jsonObject.getInteger("tm")) {
Double drp = jsonObject.getDoubleValue("drp");
map.put(String.valueOf(i), drp);
sum += jsonObject.getDoubleValue("drp");
if (drp >= maxD) {
maxD = drp;
maxObj = jsonObject;
}
if (drp <= minD) {
minD = drp;
minObj = jsonObject;
}
break;
} else {
map.put(String.valueOf(i), null);
}
}
}
}
map.put("parentName", obj.getString("parentName"));
map.put("advm", obj.getString("name"));
map.put("rsnm", obj.getString("rsnm"));
map.put("stcd", obj.getString("stcd"));
map.put("stnm", obj.getString("stnm"));
map.put("sum", String.format("%.1f", sum));
lists.add(map);
}
Map<String, Object> result = new HashMap<>();
Map<String, Object> map2 = new HashMap<>();
map2.put("minDrp", minObj.getDouble("drp"));
map2.put("maxDrp", maxObj.getDouble("drp"));
map2.put("maxTm", maxObj.getString("tms"));
map2.put("minTm", minObj.getString("tms"));
map2.put("minStcd", minObj.getString("stnm"));
map2.put("maxStcd", maxObj.getString("stnm"));
result.put("list", lists);
result.put("report", map2);
return result;
}
//获取某月有多少天
public int getDayNum(ReportParamsVo reportParamsVo) {
String year = reportParamsVo.getYear();
String month = reportParamsVo.getMonth();
Calendar cal = Calendar.getInstance();
cal.set(Calendar.YEAR, Integer.valueOf(year));
cal.set(Calendar.MONTH, (Integer.valueOf(month)) - 1);
return cal.getActualMaximum(Calendar.DATE);
}ReportPptnController
/**
* @description: 降雨量报表
* @create: 2022-02-08 15:50
*/
@Api(value = "降雨量统计表",tags = "降雨量统计表")
@RestController
@RequestMapping("/reportstatistic/report")
public class ReportPptnController {
@Autowired
private IStPptnRService reportPPTNService;
@ApiOperation(value = "年逐月降雨量", notes = "年逐月降雨量")
@ApiImplicitParams({
@ApiImplicitParam(name = "year", value = "年份", required = false, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "stcd", value = "测站", required = false, dataType = "String", paramType = "query")
})
@GetMapping(value = "/getPPTNYearAndMonthTable")
public AjaxResult getPPTNYearAndMonthTable(ReportParamsVo reportParamsVo) {
Map<String, Object> list = reportPPTNService.getPPTNYearAndMonthTable(reportParamsVo);
return AjaxResult.success(list);
}
@ApiOperation(value = "月逐日降雨量", notes = "月逐日降雨量")
@ApiImplicitParams({
@ApiImplicitParam(name = "month", value = "月份", required = true, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "stcd", value = "测站", required = false, dataType = "String", paramType = "query")
})
@GetMapping(value = "/getPPTNMonthAndDayTable")
public AjaxResult getPPTNMonthAndDayTable(ReportParamsVo reportParamsVo) {
if (reportParamsVo.getMonth() != null && reportParamsVo.getMonth() != "") {
String[] split = reportParamsVo.getMonth().split("-");
reportParamsVo.setYear(split[0]);
reportParamsVo.setMonth(split[1]);
}
Map<String, Object> list = reportPPTNService.getPPTNMonthAndDayTable(reportParamsVo);
return AjaxResult.success(list);
}
@ApiOperation(value = "日逐时降雨量", notes = "日逐时降雨量")
@ApiImplicitParams({
@ApiImplicitParam(name = "day", value = "天", required = true, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "stcd", value = "测站", required = false, dataType = "String", paramType = "query")
})
@GetMapping(value = "/getPPTNDayAndHourTable")
public AjaxResult getPPTNDayAndHourTable(ReportParamsVo reportParamsVo) {
if (reportParamsVo.getDay() != null && reportParamsVo.getDay() != "") {
String[] split = reportParamsVo.getDay().split("-");
reportParamsVo.setYear(split[0]);
reportParamsVo.setMonth(split[1]);
reportParamsVo.setDay(split[2]);
}
Map<String, Object> list = reportPPTNService.getPPTNDayAndHourTable(reportParamsVo);
return AjaxResult.success(list);
}
/**
* 年逐日雨情列表
*/
@ApiOperation(value = "年逐日雨情列表", notes = "年逐日雨情列表")
@ApiImplicitParams({
@ApiImplicitParam(name = "stcd", value = "测站编码", required = true, dataType = "String", paramType = "query"),
@ApiImplicitParam(name = "year", value = "年份", required = true, dataType = "String", paramType = "query")
})
@ResponseBody
@RequestMapping(value = "/getPPTNYearAndDayTable", method = RequestMethod.GET)
public AjaxResult getPPTNYearAndDayTable(ReportParamsVo reportParamsVo) {
return AjaxResult.success(reportPPTNService.getReportPPTNYearAndDate(reportParamsVo));
}
//文件下载相关代码
@ApiOperation(value=" 导出", notes="导出")
@PostMapping("/export")
public void exportFile(
@RequestParam(value = "filename", required = false, defaultValue = "") String filename,
@RequestParam(value = "context", required = false, defaultValue = "") String context,
HttpServletResponse response) throws IOException {
String fname="";
if(StringUtil.isNotBlank(filename)){
fname = filename;
}else{
fname = DateUtils.getCurrentDate("yyyyMMddHHmmss");
}
PrintWriter pw = null;
response.reset();// 清空输出流
response.setHeader("Content-Disposition", "attachment; filename=" + java.net.URLEncoder.encode(fname, "UTF-8")+".xls");
//response.setHeader("Content-disposition", "attachment; filename=exportdata("+ fname +").xls");// 设定输出文件头
response.setContentType("application/msexcel;charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
pw = response.getWriter();
String html="<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>\n<head>\n";
html+="<meta charset=\"UTF-8\">\n";
html+="<style type=\"text/css\">\n#bootstrap-table th,#bootstrap-table td{border-right: 0.5pt solid #000;border-bottom: 0.5pt solid #000;text-align: center;border:1; cellspacing:0} " ;
html+="\n#biaotou{text-align:center;margin-bottom: 20px;}" ;
html+="\n#biaotou1{width:100%; border:0px; text-align: center;margin: auto; margin-left: 25%;}";
html+="\n.title{text-align: center;font-size: 25px;font-weight: bold;} " ;
html+="\n.unit{text-align: right;} " ;
html+="\n.bootstrap-table{border-spacing: 0;border-left: 0.5 pt solid #000;border-top: 0.5pt solid #000;border:1; cellspacing:0;padding-top: 30px;width: 75%} " ;
html+="table{border-collapse: collapse;}";
// html+=".el-table td,th{border: 0.5px solid #000000;text-align:center;}";
html+="table td,th{border: 0.5px solid #000000;text-align:center;}";
html+=".el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{bgcolor:#f8f8f9}";
html+= ".el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{border:1px solid #9b9b9b;border-bottom:0px}";
html+= ".unit { display: flex; margin: 10px 10px; font-size: 13px; flex-wrap: nowrap; justify-content: space-between; align-items: center;}";
html+="\n\n</style>\n</head>\n";
html+="<body>\n" + context + "\n</body>\n</html>";
pw.print(html);
pw.flush();
pw.close();
}
}
pptnyearandmonthreport
<template>
<div class="app-container">
<el-form :model="queryParams" :rules="rules" ref="queryForm" :inline="true" label-width="80px">
<el-form-item label="水库选择" prop="rscd">
<el-select
v-model="queryParams.rscd"
placeholder="请选择"
filterable
@change="handleChangeOfrsvrcd"
>
<el-option
v-for="item in wrprsrbsinList"
:key="item.rscd"
:label="item.rsnm"
:value="item.rscd"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="测站选择" prop="stcd">
<el-select
v-model="queryParams.stcd"
placeholder="请选择"
filterable
@change="handleChangeStcd"
>
<el-option
v-for="item in stbprpbList"
:key="item.value"
:label="item.stnm"
:value="item.stcd"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="年份">
<el-date-picker
v-model="queryParams.year"
type="year"
style="width: 240px"
value-format="YYYY"
@change="changeDate"
placeholder="选择年">
</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="success" icon="Printer" @click="myPrint">打印</el-button>
<el-button type="warning" icon="Download" @click="myExport">导出</el-button>
</el-form-item>
</el-form>
<el-card class="box-card">
<!-- <el-tabs v-model="activeName" @tab-click="tabClick"> -->
<!-- 图表 -->
<!-- <el-tab-pane label="图表" name="first"> -->
<!-- </el-tab-pane> -->
<!-- 表格 -->
<!-- <el-tab-pane label="表格" name="second"> -->
<div id="contextIntake2">
<div class="table-title" style="text-align: center">
{{ mainTitle }}
</div>
<div class="unit">
<span>{{subTitle}}</span>
<span>单位：mm</span>
</div>
<el-table border :data="tableData" style="width: 100%" @row-click="queryEcharts">
<el-table-column align="center" prop="rsnm" label="水库" width="120" show-overflow-tooltip>
</el-table-column>
<el-table-column align="center" prop="stnm" label="雨量站" width="180" show-overflow-tooltip>
</el-table-column>
<el-table-column align="center" prop="1" label="1月">
</el-table-column>
<el-table-column align="center" prop="2" label="2月">
</el-table-column>
<el-table-column align="center" prop="3" label="3月">
</el-table-column>
<el-table-column align="center" prop="4" label="4月">
</el-table-column>
<el-table-column align="center" prop="5" label="5月">
</el-table-column>
<el-table-column align="center" prop="6" label="6月">
</el-table-column>
<el-table-column align="center" prop="7" label="7月">
</el-table-column>
<el-table-column align="center" prop="8" label="8月">
</el-table-column>
<el-table-column align="center" prop="9" label="9月">
</el-table-column>
<el-table-column align="center" prop="10" label="10月">
</el-table-column>
<el-table-column align="center" prop="11" label="11月">
</el-table-column>
<el-table-column align="center" prop="12" label="12月">
</el-table-column>
<el-table-column align="center" prop="sum" label="总量">
</el-table-column>
<!-- <el-table-column
id="eltEnd"
align="center"
label="变化过程"
width="100">
<template #default="scope">
<i class="el-icon-s-marketing diy" @click="queryEcharts(scope.row)"></i>
</template>
</el-table-column> -->
</el-table>
<el-row>
<el-col :span="24" >
<div class="boxDesc">
<el-col :span="12">
<el-descriptions :column="3" style="margin-top:20px;margin-left:50px">
<el-descriptions-item width="200px" label="最大降雨">{{reportInfo.maxDrp}} mm</el-descriptions-item>
<el-descriptions-item label="测站名称">{{reportInfo.maxStcd}}</el-descriptions-item>
<el-descriptions-item width="200px" label="所在日期">{{reportInfo.maxTm}}</el-descriptions-item>
<el-descriptions-item label="最小降雨">{{reportInfo.minDrp}} mm</el-descriptions-item>
<el-descriptions-item width="200px" label="测站名称">{{reportInfo.minStcd}}</el-descriptions-item>
<el-descriptions-item label="所在日期">{{reportInfo.minTm}}</el-descriptions-item>
</el-descriptions>
</el-col>
</div>
</el-col>
</el-row>
</div>
</el-card>
<el-dialog v-model="open" width="800px" append-to-body>
<el-row>
<el-col :span="24">
<div ref="myEcharts" style="width: 780px; height: 650px"></div>
</el-col>
</el-row>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="open=false">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Pptnyearandmonthreport">
//年逐月降雨量统计
import { listWrprsrbsinAll } from "@/api/oam/basic/wrprsrbsin";
import { listStstbprpbAll } from "@/api/oam/basic/ststbprpb";
import { getPPTNYearAndMonthTable } from "@/api/oam/datareport/datareport";
import { toRefs } from "@vue/reactivity";
const { proxy } = getCurrentInstance();
const open = ref(false)//是否显示弹出层
const wrprsrbsinList = ref([]); //水库列表
const stbprpbList = ref([]); //测站列表
const tableData = ref([]);//数据列表
const echartsData = ref([]);//Echarts数据列表
const mainTitle = ref('');//主标题
const subTitle = ref('');//副标题
const data =reactive({
//查询参数
queryParams:{
year:new Date().getFullYear()+'',
rscd: null,
stcd: null,
},
tableTitle: {
rsnm:'',
stnm:'',
},
reportInfo:{},//统计数据
rules: {
},
})
const{ queryParams,tableTitle,rules,reportInfo} = toRefs(data);
/**查询水库列表 */
function getWrprsrbsinList() {
listWrprsrbsinAll().then((response) => {
wrprsrbsinList.value = response.rows;
});
}
//选择水库(查询条件)
function handleChangeOfrsvrcd(value) {
queryParams.value.stcd = null;
var obj = wrprsrbsinList.value.find((item) => {
return item.rscd == value;
});
tableTitle.value.rsnm = obj.rsnm;
getStbprpbAll(value);
}
//获取所有测站列表(查询条件)
function getStbprpbAll(value) {
listStstbprpbAll({ rscd: value,israin:'1' }).then((response) => {
stbprpbList.value = response.data;
if (response.data.length > 0) {
tableTitle.value.stnm = response.data[0].stnm;
queryParams.value.stcd=response.data[0].stcd;
}else{
roxy.$modal.msgWarning("暂无测站");
}
});
}
//选择测站
function handleChangeStcd(value) {
queryParams.value.stcd = value;
var obj = stbprpbList.value.find((item) => {
return item.stcd == value;
});
tableTitle.value.stnm = obj.stnm;
// handleQuery();
};
//选择时间
function changeDate(value){
queryParams.value.year=value;
// handleQuery();
};
/** 搜索按钮操作 */
function handleQuery() {
if(queryParams.value.stcd==null){
return false;
}
getList();
}
//获取数据
function getList(){
mainTitle.value=tableTitle.value.stnm+'年逐月降雨量报表';
subTitle.value=queryParams.value.year+'年 '+tableTitle.value.rsnm;
getPPTNYearAndMonthTable(queryParams.value).then((response)=>{
tableData.value=response.data.list;
reportInfo.value=response.data.report;
})
};
/** 重置按钮操作 */
function resetQuery() {
reset();
proxy.resetForm("queryForm");
getList();
};
//重置
function reset(){
queryParams.value.rscd = null;
queryParams.value.stcd = null;
queryParams.value.year = new Date().getFullYear()+'';
tableTitle.value.rsnm='';
tableTitle.value.stnm='';
subTitle.value='';
wrprsrbsinList.value=[];
stbprpbList.value=[];
echartsData.value=[]
};
function queryEcharts(row){
open.value = true;
getPPTNReportEcharts(row);
};
function getPPTNReportEcharts(row) {
const queryTemp= {
year:new Date().getFullYear()+'',
rscd: null,
stcd: null,
};
queryTemp.year=queryParams.value.year;
queryTemp.rscd = queryParams.value.rscd;
queryTemp.stcd = row.stcd;
getPPTNYearAndMonthTable(queryTemp).then((response) => {
echartsData.value = response.data.list;
drawChart(row);
});
};
//绘图
function drawChart(row) {
var xd = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
let yd = [];
// var nam='';
if(echartsData.value.length>0){
var obj = echartsData.value[0];
for(var i=1;i<=12;i++){
yd.push(obj[i]);
}
// nam=obj.stnm;
}
// 基于准备好的dom，初始化echarts实例
let myChart = proxy.$echarts.init(proxy.$refs.myEcharts);
myChart.clear();
// 指定图表的配置项和数据
var option = {
color: ["#2da8e7"],
title: {
text: queryParams.value.year+'年'+row.rsnm+'年逐月降雨统计表',
left: "center",
top: "3%",
},
tooltip: {
name:row.rsnm,
trigger: "axis",
axisPointer: {
type: "line",
},
formatter: "月份：{b0} <br />降雨量：{c0} mm",
},
grid: {
left: "5%",
bottom: "7%",
right: "9%",
top: "10%",
},
xAxis: {
data: xd,
name: "月份",
boundaryGap: true,
},
yAxis: {
name: "降雨量(mm)",
splitArea: {
show: true
}
},
series: [
{
name:row.rsnm,
barWidth:'50%',
type: "bar",
data: yd,
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//根据浏览器大小变化自适应
window.onresize = function () {
myChart.resize();
};
};
//打印
function myPrint(){
webPrint(contextIntake2)
};
//打印功能
function webPrint(domid) {
//window.print();//打印
//判断iframe是否存在，不存在则创建iframe
var iframe = document.getElementById("print-iframe");
if (!iframe) {
var el = domid;
iframe = document.createElement("IFRAME");
var doc = null;
iframe.setAttribute("id", "print-iframe");
iframe.setAttribute(
"style",
"position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
);
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<style media="print">@page {size: auto;margin: 5mm auto;}</style>'); //解决出现页眉页脚和路径的问题
//这里可以自定义样式
doc.write("<style>"+
"table{border-collapse: collapse;}"+
".el-table td,th{border: 1px solid #9b9b9b;text-align:center;}"+
".el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{border:1px solid #9b9b9b;border-bottom:0px}"+
".unit { display: flex; margin: 10px 10px; font-size: 13px; flex-wrap: nowrap; justify-content: space-between; align-items: center;}"+
"</style>");
doc.write("<div>" + el.innerHTML + "</div>");
doc.close();
iframe.contentWindow.focus();
}
iframe.contentWindow.print();
document.body.removeChild(iframe);
};
//导出功能
function myExport(){
var fileName = mainTitle.value;
var context = document.getElementById("contextIntake2").innerHTML;
var data={filename:fileName,context:context}
proxy.download('oam/reportstatistic/report/export',
data
, `${subTitle.value+mainTitle.value}.xlsx`)
}
getWrprsrbsinList();
getList();
</script>
<style scoped>
.table-title{
text-align:center;
font-size: 20px;
}
.unit {
display: flex;
margin: 10px 10px;
font-size: 13px;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;
}
#myTable{
width: 100%;
text-align: center;
border:1px solid #e5e5e5;
font-size: 13px;
}
#myTable tr td,th{
min-width: 120px;
height: 35px;
text-align: center;
border:1px solid #e5e5e5;
}
</style>
扫一扫
2352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
