traffic-eff-backend/ruoyi-ui/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)"
              />
              <!--               <i-->
              <!--                   class="el-icon-circle-close"-->
              <!--                   title="查看设备定位"-->
              <!--                   @click="()=>play(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.868474555524, 32.013913750075],
        [118.868459917135, 32.0138560330253],
        [118.868460650064, 32.0137600494265],
        [118.868469791963, 32.0135491295906],
        [118.868450597046, 32.0135969285238],
        [118.868451821878, 32.0134372342673],
        [118.868369085172, 32.0134271059761],
        [118.868229813542, 32.0134261784667],
        [118.868037844538, 32.0134249000077],
        [118.867988911263, 32.013424574126],
        [118.867990212059, 32.0132809893746],
        [118.867986825628, 32.0132395072755],
        [118.867987028075, 32.0132171885197],
        [118.867987432888, 32.0131725599655],
        [118.867984539806, 32.0130769425047],
        [118.867977454441, 32.0130291167663],
        [118.86797791828, 32.0129781711549],
        [118.867978150146, 32.0129527041872],
        [118.867974855578, 32.0129017568948],
        [118.868046176274, 32.0129117791912],
        [118.868121507934, 32.0128931867922],
        [118.868117943319, 32.0128708893801],
        [118.868126616248, 32.012737367597],
        [118.868127634971, 32.0126197858525],
        [118.868127662494, 32.0126166091195],
        [118.868165320753, 32.0126041528561],
        [118.868173101262, 32.0125724412675],
        [118.868240681514, 32.0125728913369],
        [118.868308235972, 32.0125765173023],
        [118.868334874981, 32.0125322352762],
        [118.868324305199, 32.012446455205],
        [118.868361835438, 32.0124467051483],
        [118.868364679658, 32.0125610134717],
        [118.868492254263, 32.0125713907483],
        [118.868541014618, 32.0125780675563],
        [118.868732580782, 32.012566639437],
        [118.868841456955, 32.0125673645282],
        [118.868976574771, 32.0125746162152],
        [118.869070453844, 32.0125720654824],
        [118.869096734551, 32.0125722405062],
        [118.869156822422, 32.0125694647922],
        [118.869179313588, 32.0125759664106],
        [118.869201684821, 32.0126047016424],
        [118.869186178487, 32.0126935647542],
        [118.869193065594, 32.0128080658432],
        [118.869192510216, 32.0129098661745],
        [118.86919198924, 32.0130053604978],
        [118.869179854563, 32.0131613771548],
        [118.869190250492, 32.0133240705021],
        [118.869185964264, 32.0134197772962],
        [118.86917071489, 32.0134547924615],
        [118.869159014503, 32.0135281642937],
        [118.869166174307, 32.0135953030259],
        [118.869165521059, 32.0137135723353],
        [118.869187426642, 32.0138416759025],
        [118.869153188005, 32.0138990608231],
        [118.868990969654, 32.0139203908971],
        [118.868768561862, 32.0139189097324],
        [118.868572541435, 32.0139176042992],
        [118.868557462941, 32.0139175038812],
        [118.868474555524, 32.013913750075],
      ];
      let i = 0;
      this.playInterval = setInterval(() => {
        pushDevcLocation({
          devcKey: 'uwb001',
          lat: gps[i][1],
          lng: gps[i][0],
        });
        if (i === gps.length - 1) {
          i = 0;
          return;
        }
        i++;
      }, 2000);

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