riku
2025-03-14 5f44d21b3921abc88506a7ec46b3fe6f078664aa
src/views/realtimemode/RealtimeMode.vue
@@ -25,14 +25,22 @@
</template>
<script>
import moment from 'moment';
import mapUtil from '@/utils/map/util';
import { useFetchData } from '@/composables/fetchData';
import { TYPE0 } from '@/constant/device-type';
import { defaultOptions } from '@/constant/radio-options';
import { FactorDatas } from '@/model/FactorDatas';
import monitorDataApi from '@/api/monitorDataApi';
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
import DeviceChange from './component/DeviceChange.vue';
import { realTimeMapAnimation } from '@/utils/map/animation';
import {
  fetchHistoryData,
  startLoopFetchRealTimeData,
  clearFetchingTask
} from '@/utils/factor/data';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
// const mapAnimation = new MapAnimation();
@@ -46,9 +54,9 @@
    return {
      // 监测设备类型
      deviceType: TYPE0,
      deviceCode: '0a0000000001',
      deviceCode: '',
      // 监测因子的类型编号
      factorType: '1',
      factorType: defaultOptions(TYPE0),
      // 新获取的监测数据
      factorDatas: new FactorDatas(),
      // 全部监测数据
@@ -63,11 +71,13 @@
    }
  },
  computed: {
    // 数据最新时间(最新数据的采样时间加1秒;没有数据时,采用当前时间的前6分钟)
    latestTime() {
      if (this.factorDatas.times.length == 0) {
        return '';
        return moment().subtract(6, 'm').format('YYYY-MM-DD HH:mm:ss');
      } else {
        return this.factorDatas.times[this.factorDatas.times.length - 1];
        const _time = this.factorDatas.times[this.factorDatas.times.length - 1];
        return moment(_time).add(1, 's').format('YYYY-MM-DD HH:mm:ss');
      }
    }
  },
@@ -93,50 +103,45 @@
      });
    },
    fetchRealTimeData() {
      // fixme 2024.5.3 此处初始获取的数据,参数应该由searchbar决定,后续修改
      this.fetchData((page) => {
        return monitorDataApi
          .fetchHistroyData({
        return fetchHistoryData(
          {
            deviceCode: this.deviceCode,
            // startTime: '2021-11-04 09:53:35',
            // startTime: '2024-08-20 06:00:00',
            // endTime: '2024-08-20 06:02:00',
            page,
            perPage: 100
          })
          .then((res) => {
            this.onFetchData(res.data);
            this.onMapData(res.data);
            this.fetchNextData();
          });
          },
          false
        ).then((res) => {
          this.onFetchData(res.data);
          this.onMapData(res.data);
          // if (res.data.length > 0) {
          //   this.fetchNextData(res.data[res.data.length - 1].time);
          // }
          this.fetchNextData();
          thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode);
        });
      });
    },
    clearFetchingTask() {
      if (this.fetchingTask) {
        clearInterval(this.fetchingTask);
        this.fetchingTask = undefined;
      }
      clearFetchingTask();
    },
    fetchNextData() {
      this.clearFetchingTask();
      this.fetchingTask = setInterval(() => {
        if (this.isFetching) {
          return;
      startLoopFetchRealTimeData(
        () => {
          return {
            deviceCode: this.deviceCode,
            updateTime: this.latestTime,
            perPage: 10
          };
        },
        (res) => {
          this.onFetchData(res.data);
          this.onMapData(res.data);
          thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode);
        }
        this.isFetching = true;
        this.fetchData(() => {
          return monitorDataApi
            .fetchNextData({
              deviceCode: this.deviceCode,
              updateTime: this.latestTime,
              perPage: 10
            })
            .then((res) => {
              this.onFetchData(res.data);
              this.onMapData(res.data);
            })
            .finally(() => (this.isFetching = false));
        });
      }, 10000);
      );
    },
    onMapData(dataList) {
      let startIndex = this.allFactorDatas.length() - 1;
@@ -145,7 +150,7 @@
        this.notFirstFetch = true;
      }
      startIndex = startIndex < 0 ? 0 : startIndex;
      return new Promise((resolve, reject) => {
      return new Promise(() => {
        this.allFactorDatas.addData(dataList, this.drawMode, () => {
          realTimeMapAnimation.moveAnimation(
            this.allFactorDatas,
@@ -157,12 +162,19 @@
    }
  },
  mounted() {
    this.fetchRealTimeData();
    // this.fetchRealTimeData();
    // startLoopFetchRealTimeData({
    //   compUser: 'user1',
    //   compPassword: 'User1@jingan',
    //   mn: 'TX105',
    //   dtFrom: '2024-08-07 10:00:00',
    //   dtTo: '2024-08-07 10:00:59'
    // });
  },
  unmounted() {
    this.clearFetchingTask();
    realTimeMapAnimation.stop();
    console.log('clear');
    mapUtil.clearMap();
  }
};
</script>