| | |
| | | * @Author : yuan |
| | | * @Date : 2026-01-07 15:17:54 |
| | | * @LastEditors : yuan |
| | | * @LastEditTime : 2026-01-09 16:54:31 |
| | | * @LastEditTime : 2026-01-31 15:47:40 |
| | | * @FilePath : \applications\drone-command\src\views\dataCockpit\components\RightContainer.vue |
| | | * @Description : |
| | | * Copyright 2026 OBKoro1, All Rights Reserved. |
| | |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['update:collapsed', 'update:onlineDevices']) |
| | | const emit = defineEmits(['update:collapsed', 'update:allDevices']) |
| | | |
| | | const collapsedModel = computed({ |
| | | get: () => props.collapsed, |
| | |
| | | |
| | | 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) |
| | | emit('update:onlineDevices', records) |
| | | 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) { |
| | |
| | | |
| | | .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; |
| | | bottom: 454px; |
| | | right: 300px; |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #fff; |
| | | z-index: 10; |
| | | 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; |
| | | } |
| | | |