动态溯源功能初步完成

feiyu02

2025-05-15 026f17ebafb85250d9ae9b71b80ae5f07341c172

 src/views/realtimemode/RealtimeMode.vue

@@ -6,14 +6,18 @@
    <el-row class="m-t-2">
      <FactorRadio
        :device-type="deviceType"
        @change="(e) => (factorType = e)"
        v-model="factorType"
      ></FactorRadio>
    </el-row>
    <el-row class="m-t-2">
      <FactorLegend
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
      <el-col span="1">
        <FactorLegend
          :factor="factorDatas.factor[factorType]"
        ></FactorLegend>
      </el-col>
      <el-col span="1">
        <SourceTrace v-model:factorType="factorType"></SourceTrace>
      </el-col>
    </el-row>
    <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
    <RealTimeTrend
@@ -26,6 +30,7 @@

<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';
@@ -33,6 +38,7 @@
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
import DeviceChange from './component/DeviceChange.vue';
import SourceTrace from '@/views/sourcetrace/SourceTrace.vue';
import { realTimeMapAnimation } from '@/utils/map/animation';
import {
  fetchHistoryData,
@@ -40,11 +46,15 @@
  clearFetchingTask
} from '@/utils/factor/data';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
import websocket from '@/api/websocket';

// const mapAnimation = new MapAnimation();

// 调试模式
const mode = 'debug';

export default {
  components: { DashBoard, RealTimeTrend, DeviceChange },
  components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
@@ -55,7 +65,7 @@
      deviceType: TYPE0,
      deviceCode: '',
      // 监测因子的类型编号
      factorType: defaultOptions(TYPE0),
      factorType: defaultOptions(TYPE0).value,
      // 新获取的监测数据
      factorDatas: new FactorDatas(),
      // 全部监测数据
@@ -100,24 +110,29 @@
        // this.draw();
        this.factorDatas = fDatas;
      });
      if (mode == 'debug') {
        websocket.send(JSON.stringify(data));
      }
    },
    fetchRealTimeData() {
      this.fetchData((page) => {
        return fetchHistoryData(
          {
            deviceCode: this.deviceCode,
            // startTime: '2024-08-20 06:00:00',
            // endTime: '2024-08-20 06:02:00',
            page,
            perPage: 100
          },
          false
        ).then((res) => {
        const param =
          mode == 'debug'
            ? {
                deviceCode: this.deviceCode,
                startTime: '2025-01-16 11:34:00',
                endTime: '2025-01-16 11:35:00',
                page,
                perPage: 100
              }
            : {
                deviceCode: this.deviceCode,
                page,
                perPage: 100
              };
        return fetchHistoryData(param, 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);
        });
@@ -132,14 +147,15 @@
          return {
            deviceCode: this.deviceCode,
            updateTime: this.latestTime,
            perPage: 10
            perPage: mode == 'debug' ? 1 : 10
          };
        },
        (res) => {
          this.onFetchData(res.data);
          this.onMapData(res.data);
          thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode);
        }
        },
        mode == 'debug' ? 4000 : undefined
      );
    },
    onMapData(dataList) {
@@ -161,18 +177,14 @@
    }
  },
  mounted() {
    // this.fetchRealTimeData();
    // startLoopFetchRealTimeData({
    //   compUser: 'user1',
    //   compPassword: 'User1@jingan',
    //   mn: 'TX105',
    //   dtFrom: '2024-08-07 10:00:00',
    //   dtTo: '2024-08-07 10:00:59'
    // });
    if (mode == 'debug') {
      websocket.send('start');
    }
  },
  unmounted() {
    this.clearFetchingTask();
    realTimeMapAnimation.stop();
    mapUtil.clearMap();
  }
};
</script>