1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动

riku

2024-05-08 f16acb06ab278cdcb1d39a29680634010638326d

 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>