feat:数据驾驶舱接口对接

shuishen

2026-01-09 6b82e8c63399005e65322f6d5d463f6e33fedbdc

 applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue

@@ -9,44 +9,83 @@
 * 2026-01-08 09:29:07
-->
<template>
   <div class="equipment-warning">
      <EquipmentTemplate v-for="(item, ind) in equipmentWarningData" :key="ind" :data="item" @click="onCardClick" />
   <div
      class="equipment-warning"
      v-loading="loading"
      element-loading-background="rgba(5, 5, 15, 0.6)"
      element-loading-text="加载中..."
   >
      <EmptyState v-if="!equipmentWarningData.length" />
      <EquipmentTemplate
         v-else
         v-for="(item, ind) in equipmentWarningData"
         :key="ind"
         :data="item"
         @click="onCardClick"
      />
   </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import EquipmentTemplate from './templateComponents/EquipmentTemplate.vue'
import { deviceSearchApi } from '@/api/dataCockpit'
import EmptyState from './EmptyState.vue'

const equipmentWarningData = ref([
   {
      id: 'dev_001',
      name: '反制设备名称',
      status: '离线',
      statusType: 'offline', // offline | fault | online
      type: '察打一体',
      vendor: '厂商名称',
      azimuth: 14,          // 方位角(°)
      pitch: 14,            // 俯仰角(°)
      range: '1.2KM',       // 有效范围
      model: 'TDOAX1A',     // 设备型号
      longitude: 113.877571,
      latitude: 22.547155
   },
   {
      id: 'dev_002',
      name: '反制设备名称',
      status: '故障',
      statusType: 'fault',
      type: '察打一体',
      vendor: '厂商名称',
      azimuth: 14,
      pitch: 14,
      range: '1.2KM',
      model: 'TDOAX1A',
      longitude: 113.877571,
      latitude: 22.547155
const equipmentWarningData = ref([])
const loading = ref(false)
const minLoadingMs = 400

const statusMap = {
   0: { text: '在线', statusType: 'online' },
   1: { text: '离线', statusType: 'offline' },
   2: { text: '故障', statusType: 'fault' },
   3: { text: '报废', statusType: 'offline' }
}
const deviceTypeMap = {
   1: '便捷侦测箱',
   2: '反制枪',
   3: '察打一体'
}

const formatDeviceItem = (item) => {
   const statusInfo = statusMap[item?.status] || { text: '-', statusType: '' }
   return {
      id: item.id,
      name: item.deviceName || item.deviceModel || '-',
      status: statusInfo.text,
      statusType: statusInfo.statusType,
      type: deviceTypeMap[item.deviceType] || item.deviceType || '-',
      manufacturer: item.manufacturer || '-',
      azimuth: item.azimuth ?? 0,
      pitch: item.elevation ?? 0,
      range: item.effectiveRangeKm ?? 0,
      model: item.deviceModel || '-',
      longitude: item.longitude ?? '-',
      latitude: item.latitude ?? '-'
   }
])
}

const fetchDeviceWarning = async () => {
   const startAt = Date.now()
   loading.value = true
   try {
      const params = { current: 1, size: 20, deviceStatusList: '1,2,3' }
      const res = await deviceSearchApi(params)
      const records = res?.data?.data?.records ?? []
      equipmentWarningData.value = records.map(formatDeviceItem)
   } finally {
      const elapsed = Date.now() - startAt
      if (elapsed < minLoadingMs) {
         await new Promise((resolve) => setTimeout(resolve, minLoadingMs - elapsed))
      }
      loading.value = false
   }
}

onMounted(() => {
   fetchDeviceWarning()
})

const onCardClick = (item) => {
   console.log('点击设备卡片：', item.id)
@@ -58,4 +97,5 @@
   width: 100%;
   height: 100%;
}
</style>

</style>