实时走航模块

riku

2024-05-10 f5624d6a7ad32ee475e00edbad26bc98ea4629e1

 src/views/realtimemode/RealtimeMode.vue

@@ -1,9 +1,73 @@
<template>
  <div>RealtimeMode</div>
  <div class="p-events-none m-t-2">
    <el-row justify="center" align="middle" class="top-wrap"> </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>
    <el-row class="m-t-2" justify="start">
      <DashBoard :factor-datas="factorDatas"></DashBoard>
    </el-row>
  </div>
</template>

<script>
import { useFetchData } from '@/composables/fetchData';
import { TYPE0 } from '@/constant/device-type';
import { FactorDatas } from '@/model/FactorDatas';
import monitorDataApi from '@/api/monitorDataApi';
import DashBoard from './component/DashBoard.vue';

export default {
  name: 'HistoryPage'
  components: { DashBoard },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
  },
  data() {
    return {
      // 监测设备类型
      deviceType: TYPE0,
      // 监测因子的类型编号
      factorType: '1',
      // 监测数据
      factorDatas: new FactorDatas()
    };
  },
  methods: {
    onFetchData(type, data) {
      // todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
      this.deviceType = type;
      this.factorDatas.setData(data, this.drawMode, () => {
        this.factorDatas.refreshHeight(this.factorType);
        // this.draw();
      });
    },
    fetchRealTimeData() {
      // fixme 2024.5.3 此处初始获取的数据，参数应该由searchbar决定，后续修改
      this.fetchData((page) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode: '0a0000000001',
            page,
            perPage: 100
          })
          .then((res) => {
            this.onFetchData(TYPE0, res.data);
          });
      });
    }
  },
  mounted() {
    this.fetchRealTimeData();
  }
};
</script>