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