实时走航模式完成

riku

2024-05-12 fb876cbc3b21035125668f2db6ee84e47efb544f

 src/views/realtimemode/RealtimeMode.vue

@@ -1,6 +1,8 @@
<template>
  <div class="p-events-none m-t-2">
    <el-row justify="center" align="middle" class="top-wrap"> </el-row>
    <el-row justify="center" align="middle" class="top-wrap">
      <DeviceChange @change="onDeviceChange"></DeviceChange>
    </el-row>
    <el-row class="m-t-2">
      <FactorRadio
        :device-type="deviceType"
@@ -13,9 +15,7 @@
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
    </el-row>
    <el-row class="m-t-2" justify="start">
      <DashBoard :factor-datas="factorDatas"></DashBoard>
    </el-row>
    <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
    <RealTimeTrend
      class="real-time-trend"
      :factor-datas="factorDatas"
@@ -31,12 +31,13 @@
import monitorDataApi from '@/api/monitorDataApi';
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
import { MapAnimation } from '@/utils/map/animation';
import DeviceChange from './component/DeviceChange.vue';
import { realTimeMapAnimation } from '@/utils/map/animation';

const mapAnimation = new MapAnimation();
// const mapAnimation = new MapAnimation();

export default {
  components: { DashBoard, RealTimeTrend },
  components: { DashBoard, RealTimeTrend, DeviceChange },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
@@ -54,16 +55,33 @@
      allFactorDatas: new FactorDatas()
    };
  },
  watch: {
    factorType(nV, oV) {
      if (nV != oV) {
        realTimeMapAnimation.setFactorType(nV);
      }
    }
  },
  computed: {
    latestTime() {
      if (this.factorDatas.times.length == 0) {
        return '----/--/-- --:--:--';
        return '';
      } else {
        return this.factorDatas.times[this.factorDatas.times.length - 1];
      }
    }
  },
  methods: {
    onDeviceChange({ type, deviceCode }) {
      this.deviceType = type;
      this.deviceCode = deviceCode;
      this.clearFetchingTask();
      realTimeMapAnimation.stop();
      this.allFactorDatas.clearData();
      this.factorDatas.clearData();
      this.notFirstFetch = false;
      this.fetchRealTimeData();
    },
    onFetchData(data) {
      // todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
      // this.deviceType = type;
@@ -80,7 +98,7 @@
        return monitorDataApi
          .fetchHistroyData({
            deviceCode: this.deviceCode,
            startTime: '2021-11-04 09:53:35',
            // startTime: '2021-11-04 09:53:35',
            page,
            perPage: 100
          })
@@ -94,6 +112,7 @@
    clearFetchingTask() {
      if (this.fetchingTask) {
        clearInterval(this.fetchingTask);
        this.fetchingTask = undefined;
      }
    },
    fetchNextData() {
@@ -109,7 +128,7 @@
            .fetchNextData({
              deviceCode: this.deviceCode,
              updateTime: this.latestTime,
              perPage: 2
              perPage: 10
            })
            .then((res) => {
              this.onFetchData(res.data);
@@ -126,12 +145,14 @@
        this.notFirstFetch = true;
      }
      startIndex = startIndex < 0 ? 0 : startIndex;
      this.allFactorDatas.addData(dataList, this.drawMode, () => {
        mapAnimation.moveAnimation(
          this.allFactorDatas,
          this.factorType,
          startIndex
        );
      return new Promise((resolve, reject) => {
        this.allFactorDatas.addData(dataList, this.drawMode, () => {
          realTimeMapAnimation.moveAnimation(
            this.allFactorDatas,
            this.factorType,
            startIndex
          );
        });
      });
    }
  },
@@ -140,11 +161,16 @@
  },
  unmounted() {
    this.clearFetchingTask();
    mapAnimation.stop();
    realTimeMapAnimation.stop();
  }
};
</script>
<style scoped>
.dash-board {
  position: absolute;
  left: 0;
  bottom: 2px;
}
.real-time-trend {
  position: absolute;
  right: 0;