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

riku

2024-05-08 f16acb06ab278cdcb1d39a29680634010638326d

 src/views/historymode/component/TrendAnalysis.vue

@@ -1,14 +1,24 @@
<template>
  <el-row class="wrap">
    <el-col span="10">
      <FactorCheckbox
        :device-type="deviceType"
        @change="(e) => (selectFactorType = e)"
      ></FactorCheckbox>
      <LineChart
        :factor-datas="factorDatas"
        :select-factor-type="selectFactorType"
      ></LineChart>
    <Transition name="">
      <el-col v-show="show" span="10">
        <FactorCheckbox
          v-model="selectFactorType"
          :device-type="deviceType"
        ></FactorCheckbox>
        <LineChart
          :locate-index="locateIndex"
          @chart-click="handleChartClick"
          :factor-datas="factorDatas"
          :select-factor-type="selectFactorType"
        ></LineChart>
      </el-col>
    </Transition>
    <el-col span="2">
      <CardButton
        name="监测要素趋势分析"
        @click="() => (show = !show)"
      ></CardButton>
    </el-col>
  </el-row>
</template>
@@ -24,12 +34,21 @@
    deviceType: {
      type: String
    },
    factorDatas: FactorDatas
    factorDatas: FactorDatas,
    // 当前选中高亮的数据点索引
    locateIndex: Number
  },
  data() {
    return {
      selectFactorType: ['1']
      selectFactorType: ['1'],
      show: true
    };
  },
  emits: ['chartClick'],
  methods: {
    handleChartClick(index) {
      this.$emit('chartClick', index);
    }
  }
};
</script>
@@ -37,5 +56,20 @@
.wrap {
  /* display: flex;
  flex-direction: column; */
  /* background-color: aliceblue; */
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>