feat:数据驾驶舱接口对接

shuishen

2026-01-09 6b82e8c63399005e65322f6d5d463f6e33fedbdc

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

@@ -7,7 +7,7 @@
            <div class="category-item" v-for="(item, ind) in categoryList" :key="ind"
               @click="activeIdModel = item.id" :class="{ active: activeIdModel === item.id }">
               {{ item.name }}
               <span class="badge">{{ item.badge }}</span>
               <span class="badge" v-if="item.badge">{{ item.badge }}</span>
            </div>
         </div>

@@ -27,6 +27,8 @@
import RealWarning from './RealWarning.vue'
import EquipmentWarning from './EquipmentWarning.vue'
import HistoryWarning from './HistoryWarning.vue'
import { alarmStatisticsApi } from '@/api/dataCockpit'
import { onMounted } from 'vue'

const props = defineProps({
   activeId: {
@@ -55,19 +57,19 @@
   {
      id: 1,
      name: '实时告警',
      badge: 8,
      badge: 0,
      component: RealWarning
   },
   {
      id: 2,
      name: '设备告警',
      badge: 8,
      badge: 0,
      component: EquipmentWarning
   },
   {
      id: 3,
      name: '历史告警',
      badge: 8,
      badge: 0,
      component: HistoryWarning
   }
])
@@ -79,6 +81,24 @@
const toggleCollapse = () => {
   collapsedModel.value = !collapsedModel.value
}

const updateBadges = async () => {
   const res = await alarmStatisticsApi()
   const data = res?.data?.data || {}
   const realTotal = data.realTimeAlarmCount ?? 0
   const historyTotal = data.historyAlarmCount ?? 0
   const deviceTotal = data.deviceAlarmCount ?? 0
   categoryList.value = categoryList.value.map((item) => {
      if (item.id === 1) return { ...item, badge: realTotal }
      if (item.id === 2) return { ...item, badge: deviceTotal }
      if (item.id === 3) return { ...item, badge: historyTotal }
      return item
   })
}

onMounted(() => {
   updateBadges()
})
</script>

<style lang="scss" scoped>
@@ -170,13 +190,12 @@
         position: absolute;
         top: 16px;
         right: 4px;
         min-width: 16px;
         height: 16px;
         line-height: 16px;
         min-width: 18px;
         line-height: 18px;
         font-size: 12px;
         color: #FFFFFF;
         background: #FF3B30;
         border-radius: 9px;
         border-radius: 50%;
         text-align: center;
         box-shadow: 0px 2px 6px rgba(255, 59, 48, 0.6);
         pointer-events: none;