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

<template>
  <pannel class="fence-location-container">
    <template v-slot:title>
      围栏闯禁事件
    </template>
    <template v-slot:action>

    </template>
    <template v-slot:content>
       <div>
        <socket-message :onMessage="onMessage" :ws="ws"></socket-message>
      </div>
    </template>
  </pannel>
</template>

<script>

import { listFenceVioEvt } from '@/api/bd/fenceVioEvt';
import SocketMessage from '@/components/WebsocketMessage/index.vue';
import Pannel from '@/views/bd/pannel/index.vue';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import dayjs from 'dayjs';

export default {
  name: 'fenceVioEvt',
  components: {
    SocketMessage,
    Pannel,
  },
  data() {
    return {
      evtList: [],
      fp: null,
      ws: null,
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
  },
  created() {

  },
  mounted() {
    this.getFenceVioEvtList();
    this.getFingerprint();
  },
  methods: {
    dayjs,
    async getFenceVioEvtList() {
      const { rows } = await listFenceVioEvt({
        pageNum: 1,
        pageSize: 10,
      });
      this.evtList = rows;
    },
    async getFingerprint() {
      // 初始化FingerprintJS
      const fp = await FingerprintJS.load();
      // 获取访问者的指纹
      const result = await fp.get();
      // 配置
      const {
        osCpu,
        webGlBasics,
        languages,
        audioBaseLatency,
        reducedTransparency,
        vendor,
        vendorFlavors,
        fonts,
        fontPreferences,
        plugins,
        forcedColors,
        domBlockers,
        pdfViewerEnabled,
        audio,
        canvas,
        webGlExtensions,
        math,
        ...components
      } = result.components;
      const extendedComponents = {
        ...components,
      };
      const fingerprintId = FingerprintJS.hashComponents(extendedComponents);
      this.ws = `/ws/evt/${fingerprintId}`;
    },
    onMessage(a) {
      const data = JSON.parse(a.data);
      this.$notify({
        title: '警告',
        message: `${data.msg.fenceName}发生闯禁事件。`,
        type: 'warning',
      });
      this.getFenceVioEvtList();
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />