| | |
| | | * @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. |
| | |
| | | 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: { |
| | |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['update:collapsed']) |
| | | const emit = defineEmits(['update:collapsed', 'update:onlineDevices']) |
| | | |
| | | const collapsedModel = computed({ |
| | | get: () => props.collapsed, |
| | |
| | | { |
| | | id: 1, |
| | | name: '侦测设备', |
| | | val: 169, |
| | | val: 0, |
| | | logo: zcsbLogo |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: '反制设备', |
| | | val: 169, |
| | | val: 0, |
| | | logo: fzsbLogo |
| | | } |
| | | ]) |
| | |
| | | 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) { |
| | |
| | | |
| | | 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> |
| | |
| | | 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 { |