feat:新增事件列表---点位上图及调用

shuishen

2025-04-16 0fd2c8cdc1f95d6f03c804f0062340134cace01d

 src/views/SignMachineNest/SignMachineNest.vue

@@ -1,98 +1,119 @@
<template>
  <MachineLeft></MachineLeft>
  <MachineRight></MachineRight>
   <MachineLeft></MachineLeft>
   <MachineRight></MachineRight>
</template>

<script setup>
import MachineLeft from '@/views/SignMachineNest/MachineLeft/MachineLeft.vue'
import MachineRight from '@/views/SignMachineNest/MachineRight/MachineRight.vue';
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket';
import { getWebsocketUrl } from '@/websocket/util/config';
import { EBizCode } from '@/utils/staticData/enums.js';
import { EModeCode } from '@/utils/staticData/device.js';
import { useStore } from 'vuex';
import { getDeviceDetail, getFlightStatistics } from '@/api/home/machineNest';
import MachineRight from '@/views/SignMachineNest/MachineRight/MachineRight.vue'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
import { getWebsocketUrl } from '@/websocket/util/config'
import { EBizCode } from '@/utils/staticData/enums.js'
import { EModeCode } from '@/utils/staticData/device.js'
import { useStore } from 'vuex'
import { getDeviceDetail, getFlightStatistics, getEventList } from '@/api/home/machineNest'

import { useSingleDroneMap } from '@/hooks/useSingleDroneMap/useSingleDroneMap'

const store = useStore();
let connectWs = ref(null);
const store = useStore()
let connectWs = ref(null)
// 单个机巢信息
const singleUavHome = computed(() => store.state.home.singleUavHome);
const singleUavHome = computed(() => store.state.home.singleUavHome)
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)

let osdVisible = ref({});
let osdVisible = ref({})

let workspaceId = ref('');
let workspaceId = ref('')
// 进入单个机巢开始连接ws
const createWsConntect = () => {
  let webSorketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId.value;
  // 监听ws 消息
  connectWs.value = useConnectWebSocket(messageHandler, webSorketUrl);
};
   let webSorketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId.value
   // 监听ws 消息
   connectWs.value = useConnectWebSocket(messageHandler, webSorketUrl)
}

const messageHandler = (result) => {
  let payload = JSON.parse(result) // 为了兼容聊天消息
  if (!payload) return
  switch (payload.biz_code) {
    case EBizCode.GatewayOsd: {
      store.commit('setGatewayInfo', payload.data)
      break
    }
    case EBizCode.DeviceOsd: {
      // console.log(payload, 'DeviceOsd')
      store.commit('setDeviceInfo', payload)
      store.commit('setWsMessage', payload)
      break
    }
    case EBizCode.DockOsd: {
      store.commit('setDockOnfo', payload.data)
      break
    }
    default:
          break
  }
};
const messageHandler = result => {
   let payload = JSON.parse(result) // 为了兼容聊天消息
   if (!payload) return
   switch (payload.biz_code) {
      case EBizCode.GatewayOsd: {
         store.commit('setGatewayInfo', payload.data)
         break
      }
      case EBizCode.DeviceOsd: {
         // console.log(payload, 'DeviceOsd')
         store.commit('setDeviceInfo', payload)
         store.commit('setWsMessage', payload)
         break
      }
      case EBizCode.DockOsd: {
         store.commit('setDockOnfo', payload.data)
         break
      }
      default:
         break
   }
}

// 单机巢初始化及事件撒点
const { init, initEventLayer, initDroneEntity } = useSingleDroneMap({
   eventApi: getEventList,
   eventApiParams: {
      device_sn: singleUavHome.value.device_sn,
   },
})

// 获取单个机巢信息
const getSingleDetails = () => {
  getDeviceDetail(singleUavHome.value.device_sn).then((res) => {
    if (res.data.code !== 0) return;
    const result = res.data.data;
    const child = result.children;
    // 对应store 里面数据结构
    osdVisible.value.sn = child?.device_sn || ''
    osdVisible.value.callsign = child?.nickname || '--'
    osdVisible.value.model = EModeCode.Disconnected || ''
    osdVisible.value.visible = true
    osdVisible.value.gateway_sn = result?.device_sn || ''
    osdVisible.value.is_dock = true
    osdVisible.value.gateway_callsign = result?.callsign || '--'
    osdVisible.value.payloads = child?.payloads_list || []
    osdVisible.value.device_domain = child.domain || 0
    osdVisible.value.device_sub_type = child.sub_type || 1
    osdVisible.value.device_type = child.type || 0
    // osdVisible.value.latest_wayline_job = result?.latest_wayline_job || {}
    store.commit('setOsdVisibleInfo', osdVisible.value);
    store.commit('setSelectedWorkSpaceId', result.workspace_id);
    workspaceId.value = result.workspace_id;
    createWsConntect();
  });
};
   getDeviceDetail(singleUavHome.value.device_sn).then(res => {
      if (res.data.code !== 0) return
      const result = res.data.data

      initDroneEntity({
         lng: result.longitude,
         lat: result.latitude,
         status: result.status,
      })

      const child = result.children
      // 对应store 里面数据结构
      osdVisible.value.sn = child?.device_sn || ''
      osdVisible.value.callsign = child?.nickname || '--'
      osdVisible.value.model = EModeCode.Disconnected || ''
      osdVisible.value.visible = true
      osdVisible.value.gateway_sn = result?.device_sn || ''
      osdVisible.value.is_dock = true
      osdVisible.value.gateway_callsign = result?.callsign || '--'
      osdVisible.value.payloads = child?.payloads_list || []
      osdVisible.value.device_domain = child.domain || 0
      osdVisible.value.device_sub_type = child.sub_type || 1
      osdVisible.value.device_type = child.type || 0
      // osdVisible.value.latest_wayline_job = result?.latest_wayline_job || {}
      store.commit('setOsdVisibleInfo', osdVisible.value)
      store.commit('setSelectedWorkSpaceId', result.workspace_id)
      workspaceId.value = result.workspace_id
      createWsConntect()
   })
}

// 获取机巢统计数据 提供给左右侧组件使用
const getMachineData = () => {
  getFlightStatistics(singleUavHome.value.device_sn).then(res => {
    if (res.data.code !== 0) return;
    const result = res.data.data;
    store.commit('setSingleTotal', result);
  })
};
   getFlightStatistics(singleUavHome.value.device_sn).then(res => {
      if (res.data.code !== 0) return
      const result = res.data.data
      store.commit('setSingleTotal', result)
   })
}

onMounted(() => {
  getSingleDetails();
  getMachineData();
});
   nextTick(() => {
      init()
   })
   initEventLayer()
   getSingleDetails()
   getMachineData()
})

onUnmounted(() => {
  connectWs?.value?.close();
});
   connectWs?.value?.close()
})
</script>