新增折线图模块功能

riku

2024-05-06 1534aee0339dee8000cdd26c21797cf3ad391f7a

 src/views/historymode/HistoryMode.vue

@@ -1,22 +1,55 @@
<template>
  <div class="fy-container">
    <FactorRadio @change="(e) => (factorType = e)"></FactorRadio>
    <SearchBar></SearchBar>
  <div class="p-events-none m-t-2">
    <el-row justify="center">
      <SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
    </el-row>
    <el-row class="m-t-2">
      <FactorRadio
        :device-type="deviceType"
        @change="(e) => (factorType = e)"
      ></FactorRadio>
    </el-row>
    <el-row class="m-t-2">
      <FactorLegend
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
    </el-row>
    <TrendAnalysis :factor-datas="factorDatas"></TrendAnalysis>
  </div>
</template>

<script>
import Layer from '@/utils/map/3dLayer';
import marks from '@/utils/map/marks';
import monitorDataApi from '@/api/monitorDataApi';
import { useFetchData } from '@/composables/fetchData';
import moment from 'moment';
import { TYPE0 } from '@/constant/device-type';
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';

export default {
  name: 'HistoryPage',
  components: { TrendAnalysis },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
  },
  data() {
    return {
      factorType: '',
      factorDatas: [],
      // 监测设备类型
      deviceType: TYPE0,
      // 监测因子的类型编号
      factorType: '1',
      // 监测数据
      factorDatas: new FactorDatas(),
      // 决定绘制3D图形时是否与原图像合并
      merge: false,
      setCenter: true
      // 决定绘制完3D图形后地图视角是否自动回中
      setCenter: true,
      // 绘制模式，0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
      drawMode: 0,
      searchTime: []
    };
  },
  watch: {
@@ -28,6 +61,7 @@
  },
  methods: {
    draw() {
      // todo 刷新图例
      const factor = this.factorDatas.factor[this.factorType];
      this.drawRoadMap(factor);
      this.drawMassMarks(factor);
@@ -37,7 +71,7 @@
      //   this.factorMode = factorMode;
      // this.factorType = factorType;
      // this.factorName = factorName;
      // this.factorDatas.refreshHeight(this.factorType + 1 + '');
      this.factorDatas.refreshHeight(this.factorType);
      // this.refreshLegend(this.factorDatas);
      // this.mapMaker.setFactorType(factorType);
      // if (!this.mapMaker.runStatus()) {
@@ -54,12 +88,64 @@
        // 4. 表格数据跳转定位
        // Table.locate(i);
      });
    },
    onFetchData(type, data) {
      // todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
      this.deviceType = type;
      this.factorDatas.setData(data, this.drawMode, () => {
        this.factorDatas.refreshHeight(this.factorType);
        this.draw();
      });
    },
    fetchHistroyData(option) {
      const { deviceCode, type, timeArray } = option;
      let startTime, endTime;
      if (timeArray && timeArray.length == 2) {
        startTime = moment(timeArray[0]).format('YYYY-MM-DD HH:mm:ss');
        endTime = moment(timeArray[1]).format('YYYY-MM-DD HH:mm:ss');
      }
      this.fetchData((page, pageSize) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode,
            startTime,
            endTime,
            type,
            page,
            perPage: pageSize
          })
          .then((res) => this.onFetchData(type, res.data));
      });
    },
    fetchRealTimeData() {
      // fixme 2024.5.3 此处初始获取的数据，参数应该由searchbar决定，后续修改
      this.fetchData((page) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode: '0a0000000001',
            // type: TYPE0,
            page,
            perPage: 100
          })
          .then((res) => {
            if (res.data.length > 0) {
              const s = new Date(res.data[0].time);
              const e = new Date(res.data[res.data.length - 1].time);
              this.searchTime = [s, e];
            }
            this.onFetchData(TYPE0, res.data);
          });
      });
    }
  },
  mounted() {
    this.fetchRealTimeData();
  }
};
</script>
<style scoped>
.fy-container {
  background-color: antiquewhite;
.p-events-auto {
  /* background-color: antiquewhite; */
  /* padding-top: 1px; */
}
</style>