feat:数据驾驶舱接口对接

shuishen

2026-01-09 6b82e8c63399005e65322f6d5d463f6e33fedbdc

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

@@ -26,9 +26,21 @@
            </div>
         </div>

         <div class="content">
            <RealEquipmentTemplate v-for="item in counterDeviceStatusList" :key="item.id" :data="item"
               @history="onHistory" @click="onCardClick" />
         <div
            class="content"
            v-loading="loading"
            element-loading-background="rgba(5, 5, 15, 0.6)"
            element-loading-text="加载中..."
         >
            <EmptyState v-if="!counterDeviceStatusList.length" />
            <RealEquipmentTemplate
               v-else
               v-for="item in counterDeviceStatusList"
               :key="item.id"
               :data="item"
               @history="onHistory"
               @click="onCardClick"
            />
         </div>
      </div>

@@ -44,8 +56,10 @@
import TitleTemplate from './templateComponents/TitleTemplate.vue'
import RealEquipmentTemplate from './templateComponents/RealEquipmentTemplate.vue'
import DeviceHistoryDialog from './DeviceHistoryDialog.vue'
import EmptyState from './EmptyState.vue'
import zcsbLogo from '@/assets/images/dataCockpit/zcsb.png'
import fzsbLogo from '@/assets/images/dataCockpit/fzsb.png'
import { deviceSearchApi } from '@/api/dataCockpit'

const props = defineProps({
   collapsed: {
@@ -76,39 +90,12 @@
   }
])

const counterDeviceStatusList = ref([
   {
      id: 'cd_001',
      name: '反制设备名称',
      actionText: '侦测中',
      actionType: 'detecting',       // detecting | jamming | idle
      type: '察打一体',
      battery: 100,                  // 电量 %
      azimuth: 14,                   // 方位角
      pitch: 14,                     // 俯仰角
      statusText: '在线',            // 状态
      vendor: '厂商名称',            // 厂商
      targetCount: 10,               // 侦测目标
      range: '1.2KM'                 // 有效范围
   },
   {
      id: 'cd_002',
      name: '反制设备名称',
      actionText: '信号干扰中',
      actionType: 'jamming',
      type: '察打一体',
      battery: 100,
      azimuth: 14,
      pitch: 14,
      statusText: '在线',
      vendor: '厂商名称',
      targetCount: 10,
      range: '1.2KM'
   }
])
const counterDeviceStatusList = ref([])

const historyVisible = ref(false)
const historyDevice = ref(null)
const loading = ref(false)
const minLoadingMs = 400

const onHistory = (item) => {
   historyDevice.value = item
@@ -122,6 +109,57 @@
const toggleCollapse = () => {
   collapsedModel.value = !collapsedModel.value
}

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

const formatDeviceItem = (item) => {
   const statusInfo = statusMap[item?.status] || { text: '-', actionType: '' }
   return {
      id: item.id,
      name: item.deviceName || item.deviceModel || '-',
      actionText: statusInfo.text,
      actionType: statusInfo.actionType,
      type: deviceTypeMap[item.deviceType] || item.deviceType || '-',
      batteryPct: item.batteryPct ?? 0,
      azimuth: item.azimuth ?? 0,
      elevation: item.elevation ?? 0,
      status: item.status ?? '-',
      manufacturer: item.manufacturer || '-',
      detectTargetCnt: item.detectTargetCnt ?? 0,
      effectiveRangeKm: item.effectiveRangeKm ?? 0
   }
}

const fetchDeviceList = async () => {
   const startAt = Date.now()
   loading.value = true
   try {
      const params = { current: 1, size: 20, deviceStatusList: '0' }
      const res = await deviceSearchApi(params)
      const records = res?.data?.data?.records ?? []
      counterDeviceStatusList.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(() => {
   fetchDeviceList()
})
</script>

<style lang="scss" scoped>
@@ -195,6 +233,7 @@
   overflow-y: auto;
}


.right-container {
   transition: transform 0.3s ease-in-out;
   position: relative;