| | |
| | | * @Author : yuan |
| | | * @Date : 2026-01-07 15:17:54 |
| | | * @LastEditors : yuan |
| | | * @LastEditTime : 2026-01-08 17:04:11 |
| | | * @LastEditTime : 2026-01-31 15:47:40 |
| | | * @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:allDevices']) |
| | | |
| | | 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 historyVisible = ref(false) |
| | | const historyDevice = ref(null) |
| | | const loading = ref(false) |
| | | const loading = ref(true) |
| | | const minLoadingMs = 400 |
| | | |
| | | const onHistory = (item) => { |
| | |
| | | azimuth: item.azimuth ?? 0, |
| | | elevation: item.elevation ?? 0, |
| | | status: item.status ?? '-', |
| | | workMode: item.workMode ?? '-', |
| | | manufacturer: item.manufacturer || '-', |
| | | detectTargetCnt: item.detectTargetCnt ?? 0, |
| | | effectiveRangeKm: item.effectiveRangeKm ?? 0 |
| | |
| | | const startAt = Date.now() |
| | | loading.value = true |
| | | try { |
| | | const params = { current: 1, size: 20, deviceStatusList: '0' } |
| | | const params = { current: 1, size: 9999, deviceStatusList: '0,1,2' } |
| | | const res = await deviceSearchApi(params) |
| | | const records = res?.data?.data?.records ?? [] |
| | | counterDeviceStatusList.value = records.map(formatDeviceItem) |
| | | let onlineData = records.filter(item => String(item.status) === '0') |
| | | counterDeviceStatusList.value = onlineData.map(formatDeviceItem) |
| | | emit('update:allDevices', 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> |
| | |
| | | |
| | | .val { |
| | | margin-top: 10px; |
| | | font-family: DIN, DIN; |
| | | font-family: DinAB; |
| | | font-weight: bold; |
| | | font-size: 22px; |
| | | color: #FFFFFF; |
| | |
| | | position: relative; |
| | | |
| | | &.collapsed { |
| | | transform: translateX(100%); |
| | | transform: translateX(calc(100% + 17px + 32px)); |
| | | } |
| | | } |
| | | |
| | | .collapse-btn { |
| | | 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; |
| | | bottom: 454px; |
| | | right: 300px; |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #fff; |
| | | z-index: 10; |
| | | backdrop-filter: blur(5px); |
| | | transform: translateY(-50%); |
| | | transform: translateY(50%); |
| | | |
| | | .arrow { |
| | | width: 24px; |
| | | height: 24px; |
| | | width: 36px; |
| | | height: 36px; |
| | | background: url('@/assets/images/dataCockpit/right-btn.png') center / 100% 100% no-repeat; |
| | | } |
| | | |