<template>
<div id="pagetwo" class="report">
<div class="form">
<el-select
class="widthinput"
v-model="curProjectCode"
filterable
:clearable="true"
placeholder="请选择项目"
@change="handleChange"
>
<el-option
v-for="item in projectList"
:key="item.index"
:label="item.platformName"
:value="item.platformCode"
></el-option>
</el-select>
<el-select
clearable
v-model="site"
filterable
placeholder="请选择站点"
class="widthinput"
>
<el-option
v-for="item in siteList"
:key="item.index"
:label="item.siteName"
:value="item.siteNo"
></el-option>
</el-select>
<!-- <span class="SelectTitle">站点编号:</span> -->
<!-- <el-input v-model="site" placeholder="请输入站点编号"></el-input> -->
<!-- <span class="SelectTitle">时间选择:</span> -->
<el-date-picker
v-model="TimeValue"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<el-button
type="primary"
icon="el-icon-search"
@click="search"
v-has="'Search'"
>查询</el-button
>
</div>
<div class="tableSection">
<table>
<thead>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">日期</th>
<th colspan="3">流量（m³/h）</th>
<th colspan="3">水位（m）</th>
<th colspan="3">SS值（mg/L）</th>
<th rowspan="2">SS负荷量（g）</th>
<th rowspan="2">雨量（mm）</th>
<th rowspan="2">外排水量（m³）</th>
</tr>
<tr>
<th>最大值</th>
<th>最小值</th>
<th>平均值</th>
<th>最大值</th>
<th>最小值</th>
<th>平均值</th>
<th>最大值</th>
<th>最小值</th>
<th>平均值</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in List" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.tt }}</td>
<td>{{ item.sbl1Max }}</td>
<td>{{ item.sbl1Min }}</td>
<td>{{ item.sbl1Avg }}</td>
<td>{{ item.zMax }}</td>
<td>{{ item.zMin }}</td>
<td>{{ item.zAvg }}</td>
<td>{{ item.ssMax }}</td>
<td>{{ item.ssMin }}</td>
<td>{{ item.ssAvg }}</td>
<td>{{ item.totalSS }}</td>
<td>{{ item.pd }}</td>
<td>{{ item.totalWater }}</td>
</tr>
<tr>
<th colspan="13">合计</th>
<th>{{ alltotalWater }}</th>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: "StatisticalReport",
data() {
return {
site: "",
TimeValue: [
this.moment()
.subtract("days", 3)
.format("YYYY-MM-DD HH:mm:ss"),
this.moment().format("YYYY-MM-DD HH:mm:ss")
],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
}, //时间快捷选项
loading: "",
alltotalWater: "",
List: [],
loading: "",
//项目存放数组
projectList: [],
//当前所选项目编码
curProjectCode: "",
//当前所选项目下的所有站点
siteList: []
};
},
mounted() {
this.initProject();
},
methods: {
//初始化项目
initProject() {
this.$http.get(this.nozzle.StationBaseControllerGetPlatFormSiteTree).then(res => {
if(res.data.code === 1) {
this.projectList = res.data.data;
// this.cascaderOptions = this.$fn.handleTree(res.data.data,'platformCode');
}
// if (response.data.data.length > 0) {
// this.ProjectOptions = this.ProjectOptions.concat(
// response.data.data
// );
// this.Project = this.ProjectOptions[0].platformCode;
// this.loadProjectUser(this.ProjectOptions[0].dropSiteList);
// } else {
// this.$message({
// showClose: true,
// message: "无项目",
// type: "warning"
// });
// }
})
.catch(response => {
this.$message({
showClose: true,
message: "请求平台失败",
type: "warning"
});
});
},
//获取项目下的站点
getSiteList(platformCode) {
// this.platCode = platformCode;
// this.SiteOptions = [
// {
// siteName: "请先选择项目",
// siteNo: ""
// }
// ];
// this.Site = "";
this.siteList = [];
let siteArr = this.projectList.filter((item,index) =>{
if(item.platformCode === platformCode) {
return item.dropSiteList;
}
})
this.siteList = siteArr[0].dropSiteList;
// console.log(111,this.siteList);
// for (var i = 0; i < this.ProjectOptions.length; i++) {
// if (this.ProjectOptions[i].platformCode == CODE) {
// this.SiteOptions = this.SiteOptions.concat(
// this.ProjectOptions[i].dropSiteList
// );
// return;
// }
// }
},
//项目选择事件
handleChange(value) {
this.site = "";
if(value) {
this.getSiteList(value);
}else{
this.siteList = [];
}
},
getData1() {
var url =
this.nozzle.Conn +
"?siteNo=" +
this.site +
"&startTime=" +
this.TimeValue[0] +
"&endTime=" +
this.TimeValue[1];
this.$http.get(url).then(res => {
this.loading.close();
this.List = res.data;
var math = 0;
for (let i in this.List) {
math += parseFloat(this.List[i].totalWater);
}
this.alltotalWater = math.toFixed(3);
});
},
//搜索
search() {
if (this.site === "") {
this.$message({
message: "请先选择站点",
type: "warning"
});
return;
}
this.loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.3)"
});
this.getData1();
}
}
};
</script>
<style lang="scss" scoped>
.form {
@include fa();
text-align: left;
color: var(--white);
font-size: 14px;
box-sizing: border-box;
flex-wrap: wrap;
&>div{
margin-right: 10px;
margin-bottom: 10px;
}
/deep/ .el-button{
margin-bottom: 10px;
}
}
.report{
@include fd();
.tableSection{
flex: 1;
table{
height: 100%;
tbody{
min-height: calc(100% - 62px);
}
}
}
}
.form .el-input {
width: 200px;
margin: 0 10px;
}
.title {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
}
.tableSection {
// padding: 10px;
// background: rgba(255, 255, 255, 0.05);
}
table {
border-collapse: collapse;
width: 100%;
box-sizing: border-box;
}
th,
td {
border: 1px solid rgb(165, 163, 163);
text-align: center;
height: 30px;
color: var(--white);
}
th {
background: rgba(255, 255, 255, 0.05);
}
</style>
