修复走航融合功能bug

Riku

2025-03-27 c7a16ca1b6fbcb0b82a4a09c2e75014624082e37

 src/views/historymode/HistoryMode.vue

@@ -5,7 +5,7 @@
        v-show="status == 0"
        :search-time="searchTime"
        :loading="loading"
        @search="fetchHistroyData"
        @search="onSearch"
      ></SearchBar>
      <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState>
    </el-row>
@@ -19,6 +19,7 @@
      <FactorLegend
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
        @change="handleLegendTypeChange"
      ></FactorLegend>
    </el-row>
    <el-row class="historical" justify="center">
@@ -42,12 +43,14 @@
      @table-click="handelIndexChange"
      :factor-datas="factorDatas"
      :device-type="deviceType"
      :device-code="deviceCode"
    ></DataSheet>
  </div>
</template>

<script>
import Layer from '@/utils/map/3dLayer';
import mapLine from '@/utils/map/line';
import marks from '@/utils/map/marks';
import sector from '@/utils/map/sector';
import mapUtil from '@/utils/map/util';
@@ -55,16 +58,19 @@
import { useFetchData } from '@/composables/fetchData';
import moment from 'moment';
import { TYPE0 } from '@/constant/device-type';
import { radioOptions } from '@/constant/radio-options';
import { defaultOptions } from '@/constant/radio-options';
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';
import DataSheet from './component/DataSheet.vue';
import { ElMessage } from 'element-plus';
import { fetchHistoryData } from '@/utils/factor/data';
import { mapStores } from 'pinia';
import { useSceneStore } from '@/stores/scene';

export default {
  components: { TrendAnalysis, DataSheet },
  setup() {
    // 限定分页数据量为10000
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
  },
@@ -75,7 +81,7 @@
      // 监测设备编号
      deviceCode: '',
      // 监测因子的类型编号
      factorType: radioOptions(TYPE0)[0].value,
      factorType: defaultOptions(TYPE0),
      // 监测数据
      factorDatas: new FactorDatas(),
      // 决定绘制3D图形时是否与原图像合并
@@ -88,7 +94,9 @@
      // 当前选中高亮的数据点索引
      locateIndex: undefined,
      // 轨迹动画状态
      status: 0
      status: 0,
      // 是否页面已跳转
      isUnmounted: false
    };
  },
  watch: {
@@ -97,6 +105,9 @@
        this.draw();
      }
    }
  },
  computed: {
    ...mapStores(useSceneStore)
  },
  methods: {
    // 检查数据经纬度是否合法
@@ -117,30 +128,42 @@
    // 监听折线图和表格的点击事件
    handelIndexChange(index) {
      if (this.checkDataIsValid(index)) {
        // 绘制溯源扇形
        this.drawSector(index);
        // 查询范围内的监测站点
        const [lng, lat] = this.factorDatas.lnglats_GD[index];
        this.sceneStore.searchScene(lng, lat);
      }
    },
    handleLegendTypeChange(value, done) {
      if (value) {
        this.factorDatas.resetRange();
      } else {
        this.factorDatas.standardRange();
      }
      done();
      this.draw();
    },
    draw() {
      // 刷新图例
      const factor = this.factorDatas.factor[this.factorType];
      sector.clearSector();
      // this.drawRoadLine(factor);
      this.drawRoadMap(factor);
      this.drawMassMarks(factor);
    },
    // 绘制3D走行路线图
    drawRoadMap(e) {
      this.factorDatas.refreshHeight(this.factorType);

      Layer.drawRoadMap(this.factorDatas, e, this.merge, this.setCenter);
      // }
    },
    drawRoadLine(e) {
      this.factorDatas.refreshHeight(this.factorType);
      mapLine.drawLine(this.factorDatas, e);
    },
    drawMassMarks(e) {
      marks.drawMassMarks(this.factorDatas, e, (index) => {
        // 查询范围内的监测站点
        // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
        if (this.checkDataIsValid(index)) {
          this.drawSector(index);
        }
        this.handelIndexChange(index);
      });
      // 调整地图视角
      mapUtil.setBound(this.factorDatas.lnglats_GD);
@@ -152,21 +175,29 @@
      mapUtil.setCenter(pr.p);
      // mapUtil.setFitSector(pr);
      // 2. 绘制对话框
      DialogUtil.openNewWindow(this.deviceCode, this.factorDatas, index, () => {
        // 移除扇形区域
        sector.clearSector();
      });
      DialogUtil.openNewWindow(
        this.deviceType,
        this.deviceCode,
        this.factorDatas,
        index,
        () => {
          // 移除扇形区域
          sector.clearSector();
        }
      );
    },
    onFetchData(type, data) {
    onFetchData(deviceType, data) {
      if (this.isUnmounted) return;
      // todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
      this.deviceType = type;
      this.deviceType = deviceType;
      this.factorDatas.setData(data, this.drawMode, () => {
        this.factorDatas.refreshHeight(this.factorType);
        this.draw();
      });
    },
    fetchHistroyData(option) {
      const { deviceCode, type, timeArray } = option;
    onSearch(option) {
      const { deviceType, deviceCode, timeArray } = option;
      this.deviceType = deviceType;
      this.deviceCode = deviceCode;
      let startTime, endTime;
      if (timeArray && timeArray.length == 2) {
@@ -175,40 +206,22 @@
      }
      this.fetchData((page, pageSize) => {
        return fetchHistoryData({
          deviceType,
          deviceCode,
          startTime,
          endTime,
          page,
          perPage: pageSize
        }).then((res) => this.onFetchData(type, res.data));
        }).then((res) => this.onFetchData(deviceType, res.data));
      });
    }
    // fetchRealTimeData() {
    //   // fixme 2024.5.3 此处初始获取的数据，参数应该由searchbar决定，后续修改
    //   this.fetchData((page) => {
    //     return fetchHistoryData({
    //       deviceCode: '0a0000000001',
    //       // type: TYPE0,
    //       page,
    //       perPage: 100
    //     }).then((res) => {
    //       if (res.data.length > 0) {
    //         const s = new Date(res.data[0].time.replace(' ', 'T'));
    //         const e = new Date(
    //           res.data[res.data.length - 1].time.replace(' ', 'T')
    //         );
    //         this.searchTime = [s, e];
    //       }
    //       this.onFetchData(TYPE0, res.data);
    //     });
    //   });
    // }
  },
  mounted() {
    // this.fetchRealTimeData();
    this.isUnmounted = false;
  },
  unmounted() {
    mapUtil.clearMap();
    this.isUnmounted = true;
  }
};
</script>