完成折线图相关功能的迁移

riku

2024-05-07 c4e9d054916c3f085329a67c7664b4c54f9137f9

 src/views/historymode/component/TrendAnalysis.vue

@@ -1,14 +1,22 @@
<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
          :device-type="deviceType"
          @change="(e) => (selectFactorType = e)"
        ></FactorCheckbox>
        <LineChart
          :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>
@@ -28,7 +36,8 @@
  },
  data() {
    return {
      selectFactorType: ['1']
      selectFactorType: ['1'],
      show: true
    };
  }
};
@@ -37,5 +46,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>