From 75aeb4e63339b60f9559af984c7d9f87a7cba24a Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 09 五月 2024 17:40:47 +0800
Subject: [PATCH] 轨迹动画和任务管理
---
src/components/monitor/LineChart.vue | 145 ++++++++++++++++++++++++++++++++++++------------
1 files changed, 108 insertions(+), 37 deletions(-)
diff --git a/src/components/monitor/LineChart.vue b/src/components/monitor/LineChart.vue
index ccaa3e2..2a0b846 100644
--- a/src/components/monitor/LineChart.vue
+++ b/src/components/monitor/LineChart.vue
@@ -5,7 +5,10 @@
</template>
<template #footer>
<!-- 鍗曢〉鏁版嵁閲�-->
- <SliderBar></SliderBar>
+ <SliderBar
+ v-model:progress="progress"
+ @size-change="(e) => (pageSize = e)"
+ ></SliderBar>
</template>
</BaseCard>
</template>
@@ -18,6 +21,7 @@
export default {
props: {
+ loading: Boolean,
factorDatas: {
type: FactorDatas
// default: () => new FactorDatas()
@@ -25,41 +29,74 @@
selectFactorType: {
type: Array,
default: () => ['1']
- }
+ },
+ // 褰撳墠閫変腑楂樹寒鐨勬暟鎹偣绱㈠紩
+ locateIndex: Number
},
data() {
return {
- lineChart: null,
- option: null
+ allXAxis: [],
+ allSeries: [],
+ option: null,
+ pageSize: 200,
+ progress: 0
};
},
+ emits: ['chartClick'],
watch: {
factorDatas: {
handler() {
- this.refreshChart();
+ this.initData();
+ this.changeChartRange();
},
deep: true
},
selectFactorType: {
handler() {
- this.refreshChart();
- },
- deep: true
+ this.changeChartSeries();
+ }
+ },
+ progress() {
+ 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();
}
},
- computed: {
- /**
- * 鑾峰彇妯潗鏍�
- */
- xAxis() {
- return this.factorDatas.times.map((v) => {
+ methods: {
+ initData() {
+ this.allXAxis = this.factorDatas.times.map((v) => {
return v.split(' ')[1];
});
- },
- /**
- * 鑾峰彇鐩戞祴鏁版嵁绾靛潗鏍�
- */
- allSeries() {
const res = [];
for (const key in this.factorDatas.factor) {
if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
@@ -68,6 +105,7 @@
key: key,
name: factorName[e.factorName],
type: 'line',
+ allData: e.datas.map((v) => v.factorData),
data: e.datas.map((v) => v.factorData),
showAllSymbol: true,
animationDelay: function (idx) {
@@ -76,34 +114,67 @@
});
}
}
- return res;
+ this.allSeries = res;
},
- showSeries() {
- return this.allSeries.filter((s) => {
+ // 淇敼鍥捐〃灞曠ず鐨勬姌绾垮浘绫诲瀷
+ changeChartSeries() {
+ this.option.series = this.getShowSeries();
+ this.option.legend.data = this.getLegends(this.option.series);
+ this.lineChart.setOption(this.option, { notMerge: true });
+ },
+ changeChartRange() {
+ const { sIndex, eIndex, startPer, endPer } = this.getRange();
+ const showSeries = this.getShowSeries(sIndex, eIndex);
+ const xAxis = this.getShowXAxis(sIndex, eIndex);
+ const legends = this.getLegends(showSeries);
+ if (!this.option) {
+ this.option = factorLineOption(xAxis, showSeries, legends);
+ } else {
+ this.option.xAxis.data = xAxis;
+ this.option.series = showSeries;
+ this.option.legend.data = legends;
+ }
+ // this.option.dataZoom[0].start = startPer;
+ // this.option.dataZoom[0].end = endPer;
+ this.lineChart.setOption(this.option, { notMerge: true });
+ },
+ getShowXAxis(sIndex, eIndex) {
+ return this.allXAxis.slice(sIndex, eIndex);
+ },
+ getShowSeries(sIndex, eIndex) {
+ 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;
},
- legends() {
- return this.showSeries.map((s) => {
+ getRange() {
+ let len = this.allXAxis.length - this.pageSize;
+ len = len < 0 ? 0 : len;
+ const sIndex = Math.round((len * this.progress) / 100);
+ const eIndex = sIndex + this.pageSize;
+ const startPer = (sIndex / this.allXAxis.length) * 100;
+ const endPer = (eIndex / this.allXAxis.length) * 100;
+ return { sIndex, eIndex, startPer, endPer };
+ },
+ getLegends(series) {
+ return series.map((s) => {
return s.name;
});
}
},
- methods: {
- initChart() {
- this.lineChart = echarts.init(this.$refs.lineChart);
- },
- refreshChart() {
- const option = factorLineOption(
- this.xAxis,
- this.showSeries,
- this.legends
- );
- this.lineChart.setOption(option, { notMerge: true });
- }
+ beforeUnmount() {
+ // this.$refs.lineChart && this.$refs.lineChart.clear();
},
mounted() {
- this.initChart();
+ this.lineChart = echarts.init(this.$refs.lineChart);
+ this.lineChart.on('click', (e) => {
+ this.$emit('chartClick', e.dataIndex);
+ });
}
};
</script>
--
Gitblit v1.9.3