|
|
@ -76,8 +76,8 @@ |
|
|
|
<span class="data">{{ analysisData.exceedGateFlowCount }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="statistical-chart water-level" ref="water-level"></div> |
|
|
|
<div class="statistical-chart water-flow" ref="water-flow"></div> |
|
|
|
<div id="water-level" class="statistical-chart water-level" ref="water-level" :style="{'zoom': zoom}"></div> |
|
|
|
<div id="water-flow" class="statistical-chart water-flow" ref="water-flow" :style="{'zoom': zoom}"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -114,7 +114,11 @@ export default { |
|
|
|
exceedWarningCount: 0, // 高于警戒水位次数 |
|
|
|
exceedRainfallCount: 0, // 降雨量超过50mm/h次数 |
|
|
|
exceedGateFlowCount: 0 // 当天总过闸流量高于100m³次数 |
|
|
|
} |
|
|
|
}, |
|
|
|
currentSluice:null, //当前水闸 |
|
|
|
zoom: 1, |
|
|
|
flowChart: null, |
|
|
|
levelChart: null, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
@ -126,7 +130,7 @@ export default { |
|
|
|
pageNum: this.pageConfig.pageNum, |
|
|
|
data: { |
|
|
|
basin: this.basin, |
|
|
|
adcd: this.region //区域筛选 |
|
|
|
adcd: this.region, //区域筛选 |
|
|
|
} |
|
|
|
}; |
|
|
|
const res = await getSluiceStatisticalListApi(params); |
|
|
@ -163,6 +167,7 @@ export default { |
|
|
|
}, |
|
|
|
// 选择一个水闸数据行 |
|
|
|
handleRowChange(row) { |
|
|
|
this.currentSluice = row; |
|
|
|
getSluiceExceedApi(row.wagaCode).then((res) => { |
|
|
|
if (!res.success) return; |
|
|
|
const data = res.data; |
|
|
@ -176,7 +181,9 @@ export default { |
|
|
|
getRainfallAndGateFlowApi(row.wagaCode).then((res) => { |
|
|
|
if (!res.success) return; |
|
|
|
const data = res.data.rainfallAndGateFlowMap; //{2024-03-04:{rainfall: '0.0', gateFlow: '0.0'}......} |
|
|
|
this.$echarts.init(this.$refs['water-flow']).setOption({ |
|
|
|
if(this.flowChart) this.flowChart.dispose(); |
|
|
|
this.flowChart = this.$echarts.init(document.getElementById('water-flow')); |
|
|
|
this.flowChart.setOption({ |
|
|
|
title: { |
|
|
|
text: '流量监测', |
|
|
|
textStyle: { |
|
|
@ -186,7 +193,8 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
trigger: 'axis', |
|
|
|
// show:false |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
right: 'center', |
|
|
@ -255,12 +263,17 @@ export default { |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.flowChart.resize(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
getWaterLevelInfoApi(row.wagaCode).then((res) => { |
|
|
|
if (!res.success) return; |
|
|
|
let data = res.data.waterLevelMap; // {2024-03-04:{waterLevel: '0.0', floodLevel: '12', warningLevel: '38'}.....} |
|
|
|
this.$echarts.init(this.$refs['water-level']).setOption({ |
|
|
|
if(this.levelChart) this.flowChart.dispose(); |
|
|
|
this.levelChart = this.$echarts.init(document.getElementById('water-level')); |
|
|
|
this.levelChart.setOption({ |
|
|
|
title: { |
|
|
|
text: '水位监测', |
|
|
|
textStyle: { |
|
|
@ -270,7 +283,8 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
trigger: 'axis', |
|
|
|
// show:false |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
right: 'center', |
|
|
@ -333,14 +347,23 @@ export default { |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.levelChart.resize(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
async mounted() { |
|
|
|
this.zoom = 1 / document.body.style.zoom; |
|
|
|
await this.getSluiceStatisticalList(); |
|
|
|
this.getAreasOptions(); |
|
|
|
this.$refs.table.setCurrentRow(this.tableData[0]); //隐式触发了handleRowChange |
|
|
|
|
|
|
|
window.onresize = ()=> { |
|
|
|
this.zoom = 1 / document.body.style.zoom; |
|
|
|
this.handleRowChange(this.currentSluice) |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|