吉安感知网项目-前端
shuishen
2026-01-12 5667f2b4fc7555ba678d5aef13b096cd38da64db
applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
@@ -2,7 +2,7 @@
 * @Author       : yuan
 * @Date         : 2026-01-07 15:17:54
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-08 17:04:11
 * @LastEditTime : 2026-01-09 16:54:31
 * @FilePath     : \applications\drone-command\src\views\dataCockpit\components\RightContainer.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
@@ -59,7 +59,7 @@
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'
import { deviceSearchApi, deviceStatisticsApi } from '@/api/dataCockpit'
const props = defineProps({
   collapsed: {
@@ -68,7 +68,7 @@
   }
})
const emit = defineEmits(['update:collapsed'])
const emit = defineEmits(['update:collapsed', 'update:onlineDevices'])
const collapsedModel = computed({
   get: () => props.collapsed,
@@ -79,13 +79,13 @@
   {
      id: 1,
      name: '侦测设备',
      val: 169,
      val: 0,
      logo: zcsbLogo
   },
   {
      id: 2,
      name: '反制设备',
      val: 169,
      val: 0,
      logo: fzsbLogo
   }
])
@@ -148,6 +148,7 @@
      const res = await deviceSearchApi(params)
      const records = res?.data?.data?.records ?? []
      counterDeviceStatusList.value = records.map(formatDeviceItem)
      emit('update:onlineDevices', records)
   } finally {
      const elapsed = Date.now() - startAt
      if (elapsed < minLoadingMs) {
@@ -159,7 +160,26 @@
onMounted(() => {
   fetchDeviceList()
   fetchDeviceStatistics()
})
const normalizeType = (value) => {
   if (value === 1 || value === '1') return '侦测设备'
   if (value === 2 || value === '2') return '反制设备'
   if (value === 'detect') return '侦测设备'
   if (value === 'counter') return '反制设备'
   return value
}
const fetchDeviceStatistics = async () => {
   const res = await deviceStatisticsApi()
   const list = res?.data?.data ?? []
   const map = new Map(list.map((item) => [normalizeType(item.type), item.count]))
   categoryList.value = categoryList.value.map((item) => ({
      ...item,
      val: map.has(item.name) ? map.get(item.name) : item.val
   }))
}
</script>
<style lang="scss" scoped>
@@ -247,17 +267,12 @@
   position: absolute;
   top: 50%;
   right: 357px;
   background: rgba(17, 23, 34, 0.8);
   border: 1px solid #333355;
   border-right: none;
   border-radius: 4px 0 0 4px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   z-index: 10;
   backdrop-filter: blur(5px);
   transform: translateY(-50%);
   .arrow {