<template>
<div class="water-environment">
<div class="top-cnt">
<div class="form-cnt">
<el-form :inline="true">
<el-form-item label="年份：">
<el-date-picker v-model="formData.year" type="year" @change="onYearChange" placeholder="选择年"
:clearable="false"></el-date-picker>
</el-form-item>
<el-form-item label="取样点：">
<!-- <el-select v-model="formData.pointNo" @change="onTypeChange" placeholder="选择取样点">
<el-option v-for="(item, index) in pointList" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select> -->
<el-select
v-model="formData.typeVal"
@change="onTypeChange"
style="margin-right: 15px;"
>
<el-option label="地下水" :value="1"></el-option>
<el-option label="排口" :value="2"></el-option>
<el-option label="饮用水" :value="3"></el-option>
</el-select>
<el-select
v-model="formData.siteNo"
@change="onSiteChange"
style="margin-right: 15px;"
>
<el-option
v-for="(item, index) in siteList"
:key="index"
:label="item.samplingPointName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</div>
<div class="container" v-loading="loading" v-if="flag">
<div class="item">
<VLine :data="data1" style="height: 350px" />
</div>
<div class="item">
<VLine :data="data2" style="height: 350px" />
</div>
<div class="item">
<VLine :data="data3" style="height: 350px" />
</div>
<div class="item">
<VLine :data="data4" style="height: 350px" />
</div>
<div class="item">
<VLine :data="data5" style="height: 350px" />
</div>
<!-- <div class="item">
<VLine :data="data5" style="height: 350px" />
</div> -->
</div>
<el-dialog :title="WaterEDialogTitle" v-model="WaterEDialog" :modal-append-to-body="false" id="WaterEDialog"
width="90%">
<div id="ZHEchartsBox" style="width: 100%; height: 600px"></div>
</el-dialog>
</div>
</template>
<script>
import {
watersecurityData,
prodrinkwatersecurityWaterAnalyze,
prosamplepointconfigSiteList
} from "@/services";
import VLine from "./components/waterenvironment/VLine";
// import MainMap from "@/components/MainMap";
import moment from "moment";
// import * as echarts from "echarts";
// import ComplaintsVue from "../publicPart/Complaints.vue";
export default {
components: {
VLine,
// MainMap
},
data() {
return {
siteList:[],
flag: false,
map: null,
layermsg: "水环境",
loading: false,
WaterEDialog: false,
WaterEDialogTitle: "",
formData: {
siteNo:'',
typeVal:1,
year: "2020",
pointNo: "10057"
},
pointNo: "0171150006",
pointList: [
{ label: "排口", value: "10057" }
// { label: "饮用水", value: "10051" }
],
data1: {
},
data2: {
},
data4: {
},
data5: {
},
data3: {
}
};
},
methods: {
moment,
// initMap() {
// this.map = this.$refs.myOlmap.getMap();
// this.map.getView().setZoom(14);
// },
// 切换分类
async onTypeChange(v) {
this.getSiteList(v);
},
onSiteChange(){
this.getData()
},
// 获取站点列表
async getSiteList(v) {
let {data} = await prosamplepointconfigSiteList(v);
if (data.length>0) {
this.siteList = data;
this.formData.siteNo = data[0].id;
//this.getData();
}else{
this.siteList=[]
this.formData.siteNo=''
}
this.getData()
},
// 获取水质分析图数据
async getData(val) {
if (val) {
this.pointNo = val.id;
}
this.loading = true;
let _data = {
... this.formData
};
let res = await watersecurityData(_data);
this.loading = false;
if (res.code === 200) {
//氨氮
this.data1 = {
yData: res.data.codmn.data,
markLine: {
yAxis: res.data.codmn.standard.gradeFour
},
max: 50,
yName: "COD(mg/L)",
title: "COD(mg/L)",
color: "#ff4d4f",
};
//溶解氧
this.data2 = {
yData: res.data.nh4n.data,
markLine: {
yAxis: res.data.nh4n.standard.gradeFour
},
max: 2.5,
yName: "NH4H(氨氮mg/L)",
title: "NH4H(氨氮mg/L)",
color: "#ffa940",
};
//悬浮物
this.data3 = {
yData: res.data.ss.data,
markLine: {
yAxis: res.data.ss.standard.gradeFour
},
max: 60,
yName: "SS(悬浮物mg/L)",
title: "SS(悬浮物mg/L)",
color: "#a0d911",
series: [
{
data: res.data.ss.data,
type:'line'
}
]
};
//高锰酸钾指数
this.data4 = {
yData: res.data.do.data,
markLine: {
yAxis: res.data.do.standard.gradeFour
},
max: 15,
yName: "溶解氧(mg/L)",
title: "溶解氧(mg/L)",
color: "#1890ff",
series: [
{
data: res.data.do.data,
type:'line'
}
]
};
//氧化还原电位
this.data5 = {
yData: res.data.redox.data,
markLine: {
yAxis: res.data.redox.standard.gradeFour
},
max: 300,
yName: "氧化还原电位(mV)",
title: "氧化还原电位(mV)",
color: "#722ed1",
series: [
{
data: res.data.redox.data,
type:'line'
}
]
};
this.flag = true
}
},
// 年份改变
onYearChange(val) {
let year = moment(val).format("YYYY");
this.formData.year = year;
this.getData();
},
// 取样点改变
// onTypeChange() {
// this.getData();
// //地图重新加载新的类型水环境站点
// let type;
// if (this.formData.pointNo == "10050") type = 2;
// else if (this.formData.pointNo == "10051") type = 3;
// this.$refs.myOlmap.getSiteList(type);
// },
//点击查看水质综合分析
async OpenSZ() {
this.WaterEDialog = true;
// console.log(this.Timevalue3, this.Timevalue);
this.WaterEDialogTitle =
this.formData.year +
" 年 " +
this.$refs.myOlmap.getSamplingPointname() +
" 水质综合分析";
let _data = {
data: this.formData
};
let response = await prodrinkwatersecurityWaterAnalyze(_data);
this.loading = false;
if (response.code === 200) {
this.$nextTick(function () {
this.LoadZHEcahrtsOptions(response.data);
});
} else {
message(response);
}
},
//水质综合分析Echarts的Options
LoadZHEcahrtsOptions(seriesData) {
var ZHmyChart = echarts.init(
document.getElementById("ZHEchartsBox")
);
ZHmyChart.clear();
var date = [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
];
ZHmyChart.setOption(
{
tooltip: {
trigger: "axis"
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisTick: {
alignWithLabel: false
},
data: date,
axisLine: {
lineStyle: {
// color: "#fff",
width: 1 //这里是为了突出显示加上的
}
}
}
],
yAxis: [
{
type: "value",
name: "水质标准",
min: 0,
max: 5,
axisLine: {
lineStyle: {
// color: "#fff"
}
},
axisLabel: {
formatter: "{value}类水"
},
splitLine: {
lineStyle: {
type: "dashed"
}
}
}
],
series: [
{
name: "水质标准",
type: "line",
yAxisIndex: 0,
data: seriesData,
markLine: {
silent: true,
symbol: "none", //去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: "dashed"
// color: '#0012FF',
},
label: {
show: true
// position: 'left'
}
}
}
}
}
]
},
true
);
}
},
mounted() {
// this.initMap();
let year = moment(new Date()).format("YYYY");
this.formData.year = year;
this.getSiteList(this.formData.typeVal);
}
};
</script>
<style lang="less" scoped>
@import "@/global.less";
.water-environment {
height: 91vh;
// background-image: url("../../assets/images/bj_img.png");
padding: 10px;
.el-input__inner {
// color: #fff !important;
}
.top-cnt {
display: flex;
align-items: center;
.top-title {
display: flex;
align-items: center;
font-size: 14px;
margin-bottom: 10px;
color: @title-color;
img {
margin-right: 10px;
}
}
}
.container {
display: flex;
flex-wrap: wrap;
.item {
width: 33.3333%;
box-sizing: border-box;
padding: 0 25px;
margin: 10px 0;
}
}
#WESearchA {
margin-top: 5px;
margin-left: 5px;
color: white;
background: #366d6d;
}
#ZHEchartsBox {
width: 100%;
height: 100%;
}
::v-deep(.el-input__wrapper ) {
background-color: transparent ;
}
}
</style>
