2025.7.10 修改动态溯源模块

riku

2025-07-10 2cffd9c7db5c3191cf172641c800e5a328d6f3af

 src/views/realtimemode/RealtimeMode.vue

@@ -2,29 +2,35 @@
  <div class="p-events-none m-t-2">
    <el-row justify="center" align="middle" class="top-wrap">
      <DeviceChange @change="onDeviceChange"></DeviceChange>
      <el-button
        type="primary"
        class="p-events-auto el-button-custom"
        @click="pauseTask"
      >
        {{ pause ? '继续' : '暂停' }}
      </el-button>
    </el-row>
    <el-row class="m-t-2">
      <FactorRadio
        :device-type="deviceType"
        v-model="factorType"
      ></FactorRadio>
      <FactorRadio :device-type="deviceType" v-model="factorType"></FactorRadio>
    </el-row>
    <el-row class="m-t-2">
      <el-col span="1">
        <FactorLegend
          :factor="factorDatas.factor[factorType]"
        ></FactorLegend>
        <FactorLegend :factor="factorDatas.factor[factorType]"></FactorLegend>
      </el-col>
      <el-col span="1">
        <SourceTrace v-model:factorType="factorType"></SourceTrace>
      </el-col>
      <el-col span="1"> </el-col>
    </el-row>
    <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
    <!-- <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard> -->
    <RealTimeTrend
      class="real-time-trend"
      :factor-datas="factorDatas"
      :device-type="deviceType"
    ></RealTimeTrend>
    <SourceTrace
      class="source-trace"
      v-model:factorType="factorType"
      :deviceCode="deviceCode"
    ></SourceTrace>
    <!-- <PollutedClueItem></PollutedClueItem> -->
  </div>
</template>

@@ -39,11 +45,14 @@
import RealTimeTrend from './component/RealTimeTrend.vue';
import DeviceChange from './component/DeviceChange.vue';
import SourceTrace from '@/views/sourcetrace/SourceTrace.vue';
import UnderwayAdvice from '@/views/sourcetrace/UnderwayAdvice.vue';
import PollutedClueItem from '@/views/sourcetrace/component/PollutedClueItem.vue';
import { realTimeMapAnimation } from '@/utils/map/animation';
import {
  fetchHistoryData,
  startLoopFetchRealTimeData,
  clearFetchingTask
  clearFetchingTask,
  pauseTask
} from '@/utils/factor/data';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
import websocket from '@/api/websocket';
@@ -52,9 +61,17 @@

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

export default {
  components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace },
  components: {
    DashBoard,
    RealTimeTrend,
    DeviceChange,
    SourceTrace,
    UnderwayAdvice,
    PollutedClueItem
  },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
@@ -69,7 +86,8 @@
      // 新获取的监测数据
      factorDatas: new FactorDatas(),
      // 全部监测数据
      allFactorDatas: new FactorDatas()
      allFactorDatas: new FactorDatas(),
      pause: false
    };
  },
  watch: {
@@ -120,10 +138,18 @@
          mode == 'debug'
            ? {
                deviceCode: this.deviceCode,
                startTime: '2025-01-16 11:34:00',
                endTime: '2025-01-16 11:35:00',
                // startTime: '2025-01-16 11:34:00',
                // endTime: '2025-01-16 11:35:00',
                // startTime: '2025-01-20 12:40:00',
                // startTime: '2024-12-27 08:30:00',
                // startTime: '2024-12-13 16:35:00',
                // startTime: '2024-11-27 11:50:41', // Pm, 中距离工地
                // startTime: '2024-08-30 15:27:00', // voc 近距离汽修
                startTime: '2024-07-23 15:21:30',
                // startTime: '2024-07-23 14:39:00',
                endTime: '2025-01-16 11:51:41',
                page,
                perPage: 100
                perPage: 10
              }
            : {
                deviceCode: this.deviceCode,
@@ -137,6 +163,9 @@
          thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode);
        });
      });
    },
    pauseTask() {
      this.pause = pauseTask();
    },
    clearFetchingTask() {
      clearFetchingTask();
@@ -191,12 +220,17 @@
<style scoped>
.dash-board {
  position: absolute;
  left: 0;
  bottom: 2px;
  right: 0;
  bottom: 0px;
}
.real-time-trend {
  position: absolute;
  right: 0;
  top: 0;
}
.source-trace {
  position: absolute;
  left: 0;
  bottom: 0px;
}
</style>