park-application-fe/src/views/bd/realtimeLocation/index.vue

<template>
  <pannel class="fence-location-container">
    <template v-slot:icon>
      <svg-icon icon-class="bd_real_time"/>
    </template>
    <template v-slot:title>
      实时坐标
    </template>
    <template v-slot:action>

    </template>
    <template v-slot:content>
      <div class="location-list">
        <template v-for="device in deviceList">
          <div :key="`evt_${device.id}`" class="list-item">
            <span class="over-flow-hidden" style="width: 40%">
              {{ device.desc }}
            </span>
            <span class="over-flow-hidden" style="width: 40%">
             {{ device.uwbKey }}
            </span>
            <span class="over-flow-hidden" style="width: 20%">
              <svg-icon :icon-class="`${selectedFlag[device.deviceId]?'bd_signal':'bd_signal_off'}`"
                        title="查看设备定位"
                        @click="()=>showLocation(device)"
              />
            </span>
          </div>
        </template>
        <socket-message
            v-for="item in selectedDevice"
            :key="`device_${item.id}`" :onMessage="onMessage"
            :ws="`/ws/point/${item.deviceId}`"></socket-message>
      </div>
    </template>
  </pannel>
</template>

<script>

import {pushDevcLocation} from '@/api/bd/fenceInfo';
import SocketMessage from '@/components/WebsocketMessage/index.vue';
import item from '@/layout/components/Sidebar/Item.vue';
import Pannel from '@/views/bd/pannel/index.vue';
import dayjs from 'dayjs';
import position from './icon/position.png';

export default {
  name: 'realtime-location',
  computed: {
    item() {
      return item;
    },
  },
  components: {
    SocketMessage,
    Pannel,
  },
  data() {
    return {
      deviceList: [
        {
          id: 1,
          desc: 'uwb001',
          deviceId: 'uwb001',
        },
      ],
      fp: null,
      ws: null,
      markLayer: null,
      locationMarkers: {},
      selectedDevice: [],
      playInterval: null,
      selectedFlag: {},
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && window.map.removeLayersById('markerLayer');
    this.playInterval && clearInterval(this.playInterval);
  },
  created() {
    this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
    window.map.addCustomLayers(this.markLayer, 5);
  },
  mounted() {
    this.getFenceVioEvtList();
  },
  methods: {
    dayjs,
    async getFenceVioEvtList() {
      // const { rows } = await listFenceVioEvt({
      //   pageNum: 1,
      //   pageSize: 10,
      // });
      // this.deviceList = rows;
    },
    addMarker(data) {
      const {
        latitude,
        longitude,
        deviceId,
      } = data;
      const marker = new BDLayers.Lib.Overlays.MarkerImg(
          `marker${deviceId}`,
          [longitude, latitude],
          {
            imgurl: position,
            iconSize: [50, 60],
            symbol: {
              'textName': 'm4',
              'textSize': 14,
              'markerFile': position,
              'markerHorizontalAlignment': 'middle', // left, middle(默认), right
              'markerVerticalAlignment': 'middle', // top, middle, bottom(默认)
            },
          },
      );
      this.markLayer.addMarker(marker);
      return marker;
    },
    showLocation(device) {
      const exist = this.selectedDevice.find(item => item.deviceId === device.deviceId);
      if (exist) {
        this.selectedDevice = this.selectedDevice.filter(item => item.deviceId !== device.deviceId);
        this.selectedFlag = {
          ...this.selectedFlag,
          [device.deviceId]: false,
        };
        return;
      }
      this.selectedDevice.push(device);
      this.selectedFlag = {
        ...this.selectedFlag,
        [device.deviceId]: true,
      };
      this.selectedDevice = [...this.selectedDevice];
      this.play();
    },
    onMessage(a) {
      const data = JSON.parse(a.data);
      const {
        latitude,
        longitude,
        deviceId,
      } = data;
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>', data);
      if (!this.locationMarkers[deviceId]) {
        this.locationMarkers[deviceId] = this.addMarker(data);
        return;
      }
      this.locationMarkers[deviceId].moveMarker([longitude, latitude], 2000, false);
    },
    play() {
      this.playInterval && clearInterval(this.playInterval);
      const gps =
          [
            [118.868446580271, 32.0123378608057],
            [118.868406952344, 32.0123370689339],
            [118.868366815026, 32.0123546053505],
            [118.868358676065, 32.0123880632266],
            [118.868350452205, 32.0124245758027],
            [118.86834900893, 32.0124765058939],
            [118.868344642304, 32.012503926295],
            [118.868332136717, 32.0125648044994],
            [118.868320565014, 32.0125920808978],
            [118.86830547567, 32.0126162305943],
            [118.868297336709, 32.0126496883748],
            [118.868296572622, 32.0126771807122],
            [118.868295214246, 32.0127260559583],
            [118.868293601174, 32.0127840952791],
            [118.868289064751, 32.0128176249864],
            [118.868281265384, 32.012838863901],
            [118.868280671094, 32.0128602467866],
            [118.868290375029, 32.0129001738105],
            [118.86833686844, 32.0129133284373],
            [118.868358313875, 32.0129198697561],
            [118.868408240027, 32.0129392057582],
            [118.868415360206, 32.0129424044289],
            [118.868425828228, 32.012954839171],
            [118.86843277861, 32.0129641472296],
            [118.868435786859, 32.0129856020738],
            [118.868442737241, 32.0129949101293],
            [118.868445915288, 32.0130102555814],
            [118.868445066302, 32.0130408025022],
            [118.868447395363, 32.013086694852],
            [118.868446716175, 32.0131111323691],
            [118.868446036987, 32.0131355698797],
            [118.868444933306, 32.0131752808204],
            [118.868447517062, 32.0132120090459],
            [118.868446668077, 32.0132425558994],
            [118.868445479497, 32.0132853214773],
            [118.868463492191, 32.0132856814153],
            [118.868506722657, 32.0132865452666]
          ];
      let i = 0;
      this.playInterval = setInterval(() => {
        if (i === gps.length - 1) {
          return;
        }
        pushDevcLocation({
          devcKey: 'uwb001',
          lat: gps[i][1],
          lng: gps[i][0],
        });
        i++;
      }, 2000);

    },
  },
};
</script>
<style lang="scss" src="./index.scss"/>