分段轨迹

riku

2024-07-03 f57633ef165ae24ae858894e3b9583a00d3ef7f6

分段轨迹

 src/api/index.js

@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';

const debug = false;
const debug = true;

// let ip1 = 'http://114.215.109.124:8805/';
let ip1 = 'http://47.100.191.150:9029/';

 src/api/monitorDataApi.js

@@ -33,8 +33,25 @@
    return $http.get(`air/realtime/sec?${params}`).then((res) => res.data);
  },

  /**
   * èŽ·å–更新时间之后的新数据
   * @param {*} param0
   * @returns
   */
  fetchNextData({ deviceCode, updateTime, perPage = 50 }) {
    let params = `deviceCode=${deviceCode}&updateTime=${updateTime}&perPage=${perPage}`;
    return $http.get(`air/realtime/sec/next?${params}`).then((res) => res.data);
  },

  /**
   * èŽ·å–按照路段分割的走航数据
   * @param {String} missionCode
   * @returns
   */
  fetchSegmentData(missionCode) {
    let params = `missionCode=${missionCode}`;
    return $http
      .get(`air/realtime/sec/segment?${params}`)
      .then((res) => res.data);
  }
};

 src/components.d.ts

@@ -29,6 +29,7 @@
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPopover: typeof import('element-plus/es')['ElPopover']

 src/components/core/CoreMenu.vue

@@ -57,6 +57,10 @@
          name: '走航监测',
          path: 'rmode'
        },
        {
          name: '污染溯源2',
          path: 'hmode2'
        }
        // {
        //   name: '网格化监测',
        //   path: 'gridmonitor'

 src/router/index.js

@@ -25,6 +25,11 @@
          name: 'historyMode',
          component: () => import('@/views/historymode/HistoryMode.vue')
        },
        {
          path: 'hmode2',
          name: 'historyMode2',
          component: () => import('@/views/historymode/HistoryMode2.vue')
        },
        // èµ°èˆªç›‘测
        {
          path: 'rmode',

 src/views/historymode/HistoryMode2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,250 @@
<template>
  <div class="p-events-none m-t-2">
    <el-row justify="center" align="middle" class="top-wrap">
      <SearchBar
        v-show="status == 0"
        :search-time="searchTime"
        :loading="loading"
        @search="fetchSegmentData"
      ></SearchBar>
      <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState>
      <el-input-number
        class="p-events-auto"
        v-model="num"
        :min="0"
        @change="handleChange"
      />
    </el-row>
    <el-row class="m-t-2">
      <FactorRadio
        :device-type="deviceType"
        @change="(e) => (factorType = e)"
      ></FactorRadio>
    </el-row>
    <el-row class="m-t-2">
      <FactorLegend
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
    </el-row>
    <el-row class="historical" justify="center">
      <HistoricalTrajectory
        :factor-datas="factorDatas"
        :factor-type="factorType"
        @change="(e) => (status = e)"
        @stop="draw"
      ></HistoricalTrajectory>
    </el-row>
    <TrendAnalysis
      class="trend-analysis"
      :locate-index="locateIndex"
      @chart-click="handelIndexChange"
      :factor-datas="factorDatas"
      :device-type="deviceType"
    ></TrendAnalysis>
    <DataSheet
      class="data-sheet"
      :locate-index="locateIndex"
      @table-click="handelIndexChange"
      :factor-datas="factorDatas"
      :device-type="deviceType"
    ></DataSheet>
  </div>
</template>

<script>
import Layer from '@/utils/map/3dLayer';
import marks from '@/utils/map/marks';
import sector from '@/utils/map/sector';
import { DialogUtil } from '@/utils/map/dialog';
import monitorDataApi from '@/api/monitorDataApi';
import { useFetchData } from '@/composables/fetchData';
import moment from 'moment';
import { TYPE0 } from '@/constant/device-type';
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';
import DataSheet from './component/DataSheet.vue';

export default {
  components: { TrendAnalysis, DataSheet },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
  },
  data() {
    return {
      // ç›‘测设备类型
      deviceType: TYPE0,
      // ç›‘测因子的类型编号
      factorType: '1',
      // ç›‘测数据
      factorDatas: new FactorDatas(),
      segmentFactorDatas: [],
      num: 0,
      // å†³å®šç»˜åˆ¶3D图形时是否与原图像合并
      merge: false,
      // å†³å®šç»˜åˆ¶å®Œ3D图形后地图视角是否自动回中
      setCenter: true,
      // ç»˜åˆ¶æ¨¡å¼ï¼Œ0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
      drawMode: 0,
      searchTime: [],
      // å½“前选中高亮的数据点索引
      locateIndex: undefined,
      // è½¨è¿¹åŠ¨ç”»çŠ¶æ€
      status: 0
    };
  },
  watch: {
    factorType(nValue, oValue) {
      if (nValue != oValue && this.status == 0) {
        this.draw();
      }
    }
  },
  methods: {
    // ç›‘听折线图和表格的点击事件
    handelIndexChange(index) {
      this.locateIndex = index;
      this.drawSector(index);
    },
    handleChange(value) {
      if (value >= this.segmentFactorDatas.length) {
        this.num = this.segmentFactorDatas.length - 1;
      } else {
        const factorDatas = this.segmentFactorDatas[value];
        this.drawRoadMap(factorDatas);
        this.drawMassMarks(factorDatas);
      }
    },
    draw(factorDatas) {
      // todo åˆ·æ–°å›¾ä¾‹
      const f = factorDatas ? factorDatas : this.factorDatas;
      this.drawRoadMap(f);
      this.drawMassMarks(f);
    },
    // ç»˜åˆ¶3D走行路线图
    drawRoadMap(factorDatas) {
      const factor = factorDatas.factor[this.factorType];
      factorDatas.refreshHeight(this.factorType);

      Layer.drawRoadMap(factorDatas, factor, this.merge, this.setCenter);
      // }
    },
    drawMassMarks(factorDatas) {
      const factor = factorDatas.factor[this.factorType];
      marks.drawMassMarks(factorDatas, factor, (index) => {
        // æŸ¥è¯¢èŒƒå›´å†…的监测站点
        // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
        this.drawSector(index);
        this.locateIndex = index;
      });
    },
    drawSector(index) {
      // 1. ç»˜åˆ¶æ–°æ‰‡å½¢åŒºåŸŸ
      sector.drawSector(this.factorDatas, index);
      // 2. ç»˜åˆ¶å¯¹è¯æ¡†
      DialogUtil.openNewWindow(this.factorDatas, index, () => {
        // ç§»é™¤æ‰‡å½¢åŒºåŸŸ
        sector.clearSector();
      });
    },
    onFetchData(type, data) {
      // todo æ ¹æ®è®¾å¤‡ç±»åž‹åˆ‡æ¢åœ°å›¾ç›‘测因子展示单选框、折线图复选框、数据表格复选框的因子类型
      this.deviceType = type;
      this.factorDatas.setData(data, this.drawMode, () => {
        this.factorDatas.refreshHeight(this.factorType);
        this.draw();
      });
    },
    onFetchSegmentData(type, data) {
      this.deviceType = type;
      const list = [];
      data.forEach((d) => {
        const factorDatas = new FactorDatas();
        factorDatas.setData(d, this.drawMode, () => {
          factorDatas.refreshHeight(this.factorType);
          // this.draw(factorDatas);
        });
        list.push(factorDatas);
      });
      this.segmentFactorDatas = list;
    },
    fetchHistroyData(option) {
      const { deviceCode, type, timeArray } = option;
      let startTime, endTime;
      if (timeArray && timeArray.length == 2) {
        startTime = moment(timeArray[0]).format('YYYY-MM-DD HH:mm:ss');
        endTime = moment(timeArray[1]).format('YYYY-MM-DD HH:mm:ss');
      }
      this.fetchData((page, pageSize) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode,
            startTime,
            endTime,
            page,
            perPage: pageSize
          })
          .then((res) => this.onFetchData(type, res.data));
      });
    },
    fetchRealTimeData() {
      // fixme 2024.5.3 æ­¤å¤„初始获取的数据，参数应该由searchbar决定，后续修改
      this.fetchData((page) => {
        return monitorDataApi
          .fetchHistroyData({
            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);
          });
      });
    },
    fetchSegmentData(option) {
      const { type, mission } = option;
      this.fetchData((page, pageSize) => {
        return monitorDataApi
          .fetchSegmentData(mission.missionCode)
          .then((res) => this.onFetchSegmentData(type, res.data));
      });
    }
  },
  mounted() {
    this.fetchRealTimeData();
  }
};
</script>
<style scoped>
.top-wrap {
  height: 40px;
}

.trend-analysis {
  position: absolute;
  left: 0;
  bottom: 2px;
}

.data-sheet {
  position: absolute;
  right: 0;
  top: 0;
}

.historical {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
</style>