<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>