ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 【水闸、堤防-水雨情智能分析】折线图显示部分，鼠标移入后出现点位偏移

sy-water-data-board-ui
yantingyu 1 year ago
parent
996c432b76
commit
3cc7008f16
2 changed files with 58 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue
  2. 39
      src/views/sluice/runManage/waterRainReport/smartAnalyse/index.vue

32
src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue
View File

@ -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³次数
}
},
currentDike: null,
zoom: 1,
levelChart:null,
flowChart:null
};
},
@ -163,6 +167,7 @@ export default {
},
// 选择一个堤坝数据行
handleRowChange(row) {
this.currentDike = row;
getDikeExceedApi(row.dikeCode).then((res) => {
if (!res.success) return;
const data = res.data;
@ -176,7 +181,9 @@ export default {
getRainfallAndGateFlowApi(row.dikeCode).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: {
@ -255,12 +262,17 @@ export default {
}
]
});
this.$nextTick(() => {
this.flowChart.resize();
});
});
getWaterLevelInfoApi(row.dikeCode).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.levelChart.dispose();
this.levelChart = this.$echarts.init(document.getElementById('water-level'))
this.levelChart.setOption({
title: {
text: '水位监测',
textStyle: {
@ -333,14 +345,24 @@ export default {
}
]
});
this.$nextTick(() => {
this.levelChart.resize();
});
});
}
},
async mounted() {
this.zoom = 1 / document.body.style.zoom;
await this.getDikeStatisticalList();
this.getAreasOptions();
this.$refs.table.setCurrentRow(this.tableData[0]); //隐式触发了handleRowChange
window.onresize = ()=> {
this.zoom = 1 / document.body.style.zoom;
this.handleRowChange(this.currentDike)
};
}
};
</script>

39
src/views/sluice/runManage/waterRainReport/smartAnalyse/index.vue
View File

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

Write Preview
Loading…
Cancel
Save