From d0f5933cb7fe9196ca0250252efc820a1a9d947e Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 08 五月 2024 22:47:30 +0800
Subject: [PATCH] 新增历史轨迹菜单
---
src/components/monitor/LineChart.vue | 46 ++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 42 insertions(+), 4 deletions(-)
diff --git a/src/components/monitor/LineChart.vue b/src/components/monitor/LineChart.vue
index 612cb61..2a0b846 100644
--- a/src/components/monitor/LineChart.vue
+++ b/src/components/monitor/LineChart.vue
@@ -6,7 +6,7 @@
<template #footer>
<!-- 鍗曢〉鏁版嵁閲�-->
<SliderBar
- @input="(e) => (progress = e)"
+ v-model:progress="progress"
@size-change="(e) => (pageSize = e)"
></SliderBar>
</template>
@@ -21,6 +21,7 @@
export default {
props: {
+ loading: Boolean,
factorDatas: {
type: FactorDatas
// default: () => new FactorDatas()
@@ -28,7 +29,9 @@
selectFactorType: {
type: Array,
default: () => ['1']
- }
+ },
+ // 褰撳墠閫変腑楂樹寒鐨勬暟鎹偣绱㈠紩
+ locateIndex: Number
},
data() {
return {
@@ -39,6 +42,7 @@
progress: 0
};
},
+ emits: ['chartClick'],
watch: {
factorDatas: {
handler() {
@@ -56,6 +60,35 @@
this.changeChartRange();
},
pageSize() {
+ this.changeChartRange();
+ },
+ locateIndex(nV, oV) {
+ if (nV == oV) return;
+ // 1. 瀹氫綅鐐瑰簲璇ュ睍绀哄湪瓒嬪娍鍥句腑闂达紝鍥犳瀹氫綅鐧惧垎姣斿線鍓嶅亸绉诲綋鍓峗size鐨勪竴鍗�
+ let i = nV - parseInt(this.pageSize / 2);
+ // 2. 纭繚绱㈠紩涓嶄細瓒呭嚭鑼冨洿
+ i = i < 0 ? 0 : i;
+ // 3. 鑾峰彇绱㈠紩瀵瑰簲鐨勮繘搴︾櫨鍒嗘瘮
+ this.progress = (i / (this.allXAxis.length - this.pageSize)) * 100;
+
+ for (const iterator of this.allSeries) {
+ // if (iterator.name == factorName || (iterator.name == 'TVOC' || factorName == 'VOC')) {
+ iterator.markLine = {
+ symbol: 'none',
+ data: [
+ {
+ name: '閫変腑',
+ xAxis: this.allXAxis[nV],
+ label: {
+ color: 'white'
+ },
+ lineStyle: {
+ color: 'yellow'
+ }
+ }
+ ]
+ };
+ }
this.changeChartRange();
}
},
@@ -103,16 +136,18 @@
}
// this.option.dataZoom[0].start = startPer;
// this.option.dataZoom[0].end = endPer;
- this.lineChart.setOption(this.option);
+ this.lineChart.setOption(this.option, { notMerge: true });
},
getShowXAxis(sIndex, eIndex) {
return this.allXAxis.slice(sIndex, eIndex);
},
getShowSeries(sIndex, eIndex) {
- const res = this.allSeries.filter((s) => {
+ this.allSeries.forEach((s) => {
if (sIndex && eIndex) {
s.data = s.allData.slice(sIndex, eIndex);
}
+ });
+ const res = this.allSeries.filter((s) => {
return this.selectFactorType.includes(s.key);
});
return res;
@@ -137,6 +172,9 @@
},
mounted() {
this.lineChart = echarts.init(this.$refs.lineChart);
+ this.lineChart.on('click', (e) => {
+ this.$emit('chartClick', e.dataIndex);
+ });
}
};
</script>
--
Gitblit v1.9.3