<template>
<div id="YSIndex_right2">
<div class="historySZ">
<div class="leve2Title flex flex-justcontent-spacebetween">
<div @click="getData">历史水质</div>
<div>
<el-select
v-model="AllData.selectmodel"
placeholder="请选择湖泊"
style="width: 90px;position: relative;margin-bottom: 5px;"
filterable
size="small"
placement="bottom"
@change="selectchange"
>
<el-option v-for="(item) in AllData.filterList" :key="item.lakerId" :label="item.lakerName" :value="item.lakerId">
</el-option>
</el-select>
</div>
</div>
<div id="history">
<HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>
</div>
</div>
<el-tabs v-model="AllData.activeName" class="demo-tabs" @tab-click="handleClick" stretch>
<el-tab-pane label="港渠" name="GQ"></el-tab-pane>
<el-tab-pane label="排口" name="PK"></el-tab-pane>
</el-tabs>
<div class="chartsbox" v-if="AllData.activeName=='GQ'">
<div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode" >
<div class="h100">
<div class="leve2Title">{{item.stName}}</div>
<div id="Charts">
<ShuiZhicharts
:data="item.chartInfo"
:refresh="item.chartInfo.refresh"
></ShuiZhicharts>
</div>
</div>
</div>
<div class="flex flex-justcontent-center" v-if="AllData.allSZ.length==0">
暂无数据
</div>
</div>
<div class="chartsbox" v-if="AllData.activeName=='PK'">
<div class="eachLake" v-for="(item) in AllData.allPK" :key="item.stCode" >
<div class="h100">
<div class="leve2Title">{{item.stName}}</div>
<div id="Charts">
<Paikoucharts
:refresh="item.chartInfo.refresh"
:XAxis="item.chartInfo.XAxis"
:YAxis="item.chartInfo.YAxis"
:yAxisarr="item.chartInfo.yAxisarr"
>
</Paikoucharts>
</div>
</div>
</div>
<div class="flex flex-justcontent-center" v-if="AllData.allPK.length==0">
暂无数据
</div>
</div>
</div>
</template>
<script setup name="YSIndex_right2">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { getWaterQualityEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
import ShuiZhicharts from "./components/ShuiZhicharts.vue";
import Paikoucharts from "./components/Paikoucharts.vue";
import HistorySZChart from "./components/HistorySZChart.vue";
const props = defineProps({
//分区编号
waterRegionCode: {
type: [String],
default: '',
},
});
const AllData = reactive({
selectmodel:'',
filterList:[],
activeName:'',
GQdata:[],
PKdata:[],
allSZ:[],
allPK:[],
szHistoryData:[],
szHistoryrefresh:[],
});
watch(
() => props.waterRegionCode,
val => {
console.log('YSIndex_right2:分区编号变了2', val);
// debugger
if(val){
getHistoryData();
getData();
}
},
{ immediate: true, deep: true }
);
function selectchange(value) {
console.log('value',value);
AllData.filterList.map((e)=>{
if(e.lakerId==value){
AllData.szHistoryData=e
AllData.szHistoryrefresh=Math.random()
}
})
}
function handleClick(e){
console.log('e',e.props.name);
console.log('AllData.activeName',AllData.activeName);
if(e.props.name=='GQ'){
chuliDataFunGQ()
}else {
chuliDataFunPK()
}
}
function getHistoryData(){
let params={
waterRegionCode:props.waterRegionCode,
// lakerId:5,
}
riverQualityGetHistory(params).then(res=>{
console.log('水质历史数据',res);
if(res.code==200){
AllData.filterList=res.data
if(res.data?.length>0){
AllData.selectmodel=res.data[0].lakerId
AllData.szHistoryData=res.data[0]
AllData.szHistoryrefresh=Math.random()
}
}
})
}
function getData(){
getWaterQualityEchart(props.waterRegionCode).then(res=>{
console.log('水质',res);
if(res.code==200){
AllData.GQdata=res.data.portChannelDataList
AllData.PKdata=res.data.outletDataList
if(AllData.GQdata.length>0){
AllData.activeName='GQ'
chuliDataFunGQ()
return
}else if(AllData.PKdata.length>0) {
AllData.activeName='PK'
chuliDataFunPK()
return
}else {
AllData.activeName='GQ'
chuliDataFunGQ()
}
}
})
}
function chuliDataFunGQ(){
let arr=[]
let data=AllData.GQdata
data.forEach((e)=>{
let obj={
stName:e.stName,
stCode:e.stCode,
targetQuality:e.targetQuality,
chartInfo:{
name:'',
XAxis:[],
nh4n:[],
DO:[],
codcr:[],
cond:[],
ph:[],
marklineObj:{
nh4n:'',
DO:'',
codcr:'',
cond:'',
ph:'',
},
refresh:1
}
}
let at=obj.chartInfo
at.XAxis = e.siteEchartDto.times;
if(e.targetQuality==1){
at.marklineObj.nh4n=0.15
at.marklineObj.DO=7.5
at.marklineObj.codcr=15
at.marklineObj.cond=''
at.marklineObj.ph=''
}else if(e.targetQuality==2){
at.marklineObj.nh4n=0.5
at.marklineObj.DO=6
at.marklineObj.codcr=15
at.marklineObj.cond=''
at.marklineObj.ph=''
}else if(e.targetQuality==3){
at.marklineObj.nh4n=1
at.marklineObj.DO=5
at.marklineObj.codcr=20
at.marklineObj.cond=''
at.marklineObj.ph=''
}else if(e.targetQuality==4){
at.marklineObj.nh4n=1.5
at.marklineObj.DO=3
at.marklineObj.codcr=30
at.marklineObj.cond=''
at.marklineObj.ph=''
}else if(e.targetQuality==5){
at.marklineObj.nh4n=2
at.marklineObj.DO=2
at.marklineObj.codcr=40
at.marklineObj.cond=''
at.marklineObj.ph=''
}
e.siteEchartDto.datas.forEach((j) => {
switch (j.dataKey) {
case "nh4n":
at.nh4n = j.datas;
break;
case "DO":
at.DO = j.datas;
break;
case "codcr":
at.codcr = j.datas;
break;
case "cond":
at.cond = j.datas;
break;
case "ph":
at.ph = j.datas;
break;
}
});
arr.push(obj)
obj.chartInfo.refresh =Math.random()
})
AllData.allSZ=arr
console.log('AllData.allSZ',AllData.allSZ);
}
function chuliDataFunPK(){
let arr=[]
let data=AllData.PKdata
console.log('dataPK',data);
data.forEach((e)=>{
let obj={
stName:e.stName,
stCode:e.stCode,
targetQuality:e.targetQuality,
chartInfo:{
refresh: 1,
DataName: '',
XAxis: [],
typeName: '',
YAxis: [0, 1, 6, 3, 4],
loading: false,
yAxisarr: [
],
marklinearr: [
],
}
}
let at=obj.chartInfo
e.siteEchartDto.datas.map(item => {
at.marklinearr.push(...item.cordonLineList);
});
at.XAxis = e.siteEchartDto.times;
at.yAxisarr = e.siteEchartDto.datas;
arr.push(obj)
at.refresh =Math.random()
})
console.log('arrPK',arr);
AllData.allPK=arr
}
onMounted(() => {
});
</script>
<style lang="scss" scoped>
#YSIndex_right2 {
width: 100%;
height: 100%;
.historySZ{
height: calc((100% - 30px) / 3);
}
#Charts,#history {
width: calc(100% - 10px);
height: calc(100% - 32px);
}
.chartsbox {
height: calc((100% - 68px) / 3 * 2);
overflow-y: auto;
}
.eachLake {
height: calc((100% - 30px) / 2);
}
:deep(.el-select .el-input__inner){
color: #fff;
}
}
</style>
