<template>
<div id="YSIndex_right2">
<div class="historySZ">
<div class="leve2Title">{{AllData.szHistoryData.lakerName}}历史水质</div>
<div id="history">
<HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>
</div>
</div>
<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>
</template>
<script setup name="YSIndex_right2">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { getPortChannelEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
import ShuiZhicharts from "./components/ShuiZhicharts.vue";
import HistorySZChart from "./components/HistorySZChart.vue";
const props = defineProps({
//分区编号
waterRegionCode: {
type: [String],
default: '',
},
});
const AllData = reactive({
allSZ:[],
szHistoryData:[],
szHistoryrefresh:[],
});
watch(
() => props.waterRegionCode,
val => {
console.log('YSIndex_right2:分区编号变了2', val);
// debugger
if(val){
getHistoryData();
getData();
}
},
{ immediate: true, deep: true }
);
function getHistoryData(){
let params={
waterRegionCode:props.waterRegionCode,
// lakerId:5,
}
riverQualityGetHistory(params).then(res=>{
console.log('水质历史数据',res);
if(res.code==200){
AllData.szHistoryData=res.data
AllData.szHistoryrefresh=Math.random()
}
})
}
function getData(){
getPortChannelEchart(props.waterRegionCode).then(res=>{
let res1 = {
code: 200,
msg: '操作成功',
data: {
datas: [
{
dataKey: 'z',
dataName: '黄海水位',
unit: '(m)',
datas: ['0', '0', '1', '0', '2', '0.5', '0', '0', '0', '0.2'],
cordonLineList: [
{
id: '1856620587907244131',
cordonId: '1856647503229968394',
lineName: '正常蓄水位',
lineValue: '1.3',
lineType: '2',
lineColor: 'rgba(0, 255, 68, 1)',
systemDefault: '0',
code: 'normal_water_level',
stConfig: 'z',
calcType: '2',
relateRainSiteSt: '4201110002',
},
{
id: '1856620587932409132',
cordonId: '1856647503229968394',
lineName: '设计洪水位',
lineValue: '1.8',
lineType: '1',
lineColor: 'rgba(221, 255, 0, 1)',
systemDefault: '0',
code: 'design_flood_level',
stConfig: 'z',
calcType: '2',
relateRainSiteSt: '4201110002',
},
{
id: '1856620587936604135',
cordonId: '1856647503229968394',
lineName: '校核洪水位',
lineValue: '1.98',
lineType: '1',
lineColor: 'rgba(255, 191, 0, 1)',
systemDefault: '0',
code: 'verify_flood_level',
stConfig: 'z',
calcType: '2',
relateRainSiteSt: '4201110002',
},
{
id: '1856620587936604134',
cordonId: '1856647503229968394',
lineName: '坝顶高程',
lineValue: '2.8',
lineType: '1',
lineColor: 'rgba(255, 81, 0, 1)',
systemDefault: '0',
code: 'dam_hight',
stConfig: 'z',
calcType: '2',
relateRainSiteSt: '4201110002',
},
],
},
{
dataKey: 'pn05',
dataName: '降雨量',
unit: 'mm',
datas: ['10', '5', '11', '2', '2', '20', '15', '0', '0', '0.2'],
cordonLineList: [],
},
],
times: [
'1732291200000',
'1732291200000',
'1732291800000',
'1732292100000',
'1732292400000',
'1732292700000',
'1732293000000',
'1732293300000',
'1732293600000',
'1732293900000',
],
},
};
console.log('水质',res);
if(res.code==200){
let arr=[]
let data=res.data
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);
}
})
}
onMounted(() => {
});
</script>
<style lang="scss" scoped>
#YSIndex_right2 {
width: 100%;
height: 100%;
.historySZ,.eachLake{
height: calc((100% - 30px) / 3);
}
#Charts,#history {
width: calc(100% - 10px);
height: calc(100% - 32px);
}
// .eachLake {
// height: calc((100% - 10px) / 3 * 2);
// overflow-y: auto;
// #Charts {
// height: calc(100% - 33px) ;
// }
// }
}
</style>
