From 29be5ef316fd2f1de6adbfe1277b31c5264adbf8 Mon Sep 17 00:00:00 2001 From: xiaosi <2652281683@qq.com> Date: Mon, 31 Aug 2026 14:23:13 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96=20MonitorDetailP?= =?UTF-8?q?anel=20=E5=8F=B3=E4=BE=A7=E8=AF=A6=E6=83=85=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MonitorDetailPanel.vue | 289 +++++++++++++++++++++++++ src/views/MonitorView/MonitorView.vue | 298 ++++++++++---------------- 2 files changed, 404 insertions(+), 183 deletions(-) create mode 100644 src/components/MonitorDetailPanel.vue diff --git a/src/components/MonitorDetailPanel.vue b/src/components/MonitorDetailPanel.vue new file mode 100644 index 0000000..422ea8e --- /dev/null +++ b/src/components/MonitorDetailPanel.vue @@ -0,0 +1,289 @@ + + + diff --git a/src/views/MonitorView/MonitorView.vue b/src/views/MonitorView/MonitorView.vue index 73062e3..cf5ae62 100644 --- a/src/views/MonitorView/MonitorView.vue +++ b/src/views/MonitorView/MonitorView.vue @@ -91,186 +91,28 @@ - + @@ -375,7 +217,7 @@ import commonRefs from '@/utils/commonRefs' import mapHelper from '@/core/mapHelper' import mapConfig, { MAP_STYLES, MAP_OVERVIEW, MAP_VIEW } from '@/config/map' import { applyChineseLabels } from '@/utils/mapLabels' -import LivePlayer from '@/components/LivePlayer.vue' +import MonitorDetailPanel from '@/components/MonitorDetailPanel.vue' import DockDeviceCard from '@/components/DockDeviceCard.vue' import { getLivePlayURL, heartbeatLive, joinLive, leaveLive } from '@/api/live' import request from '@/utils/http' @@ -407,7 +249,7 @@ const isAdmin = computed(() => userStore.isAdmin()) const selectedId = ref(null) const live = reactive({ session: null, dockId: '', playUrl: '', heartbeatTimer: null }) -const livePlayerRef = ref(null) +const detailPanelRef = ref(null) const filter = ref('all') const search = ref('') @@ -989,6 +831,96 @@ const livePhaseText = computed(() => { }) const canFullscreenLive = computed(() => !!live.playUrl && !live.playUrl.startsWith('fake://')) +const detailHeader = computed(() => { + const asset = selectedAsset.value + if (!asset) return null + return { + kindLabel: isDrone.value ? '无人机设备' : '机巢设备', + name: asset.name, + location: asset.location, + status: asset.status, + statusClass: asset.statusClass, + isDrone: isDrone.value, + } +}) + +const detailRelation = computed(() => { + if (!isDrone.value || !selectedAsset.value) return null + return { + parentId: selectedAsset.value.parent || null, + parentName: selectedDroneParentName.value, + } +}) + +const detailLiveView = computed(() => ({ + playUrl: live.playUrl, + phase: live.session?.phase, + active: !!live.session, + phaseText: livePhaseText.value, + canFullscreen: canFullscreenLive.value, + cameraLabel: isDrone.value ? '无人机图传' : '机巢摄像头', +})) + +const detailDockStatus = computed(() => { + if (isDrone.value) return null + return { + droneBattery: selectedDrone.value?.battery || '--', + chargeText: chargeText(rt('chargingState')), + chargeActive: chargeTone.value, + doorSummary: doorSummary.value, + controlMode: dockControlMode.value, + } +}) + +const detailFlightStatus = computed(() => { + if (!isDrone.value || !selectedAsset.value) return null + return { + missionState: droneMissionState.value, + battery: record.value?.battery || '--', + altitudeText: displayWithUnit(selectedAsset.value.altitude, 'm'), + speedText: displayWithUnit(selectedAsset.value.speed, 'm/s', 1), + satellitesText: displayWithUnit(selectedAsset.value.satellites, '颗'), + } +}) + +const detailMission = computed(() => { + if (!isDrone.value) return null + const detail = missionDetail.value + return { + hasMission: detail.hasMission, + name: detail.name, + route: detail.route, + progressText: detail.progressText, + progressWidth: detail.progressWidth, + waypointText: detail.waypointText, + elapsedText: detail.elapsedText, + distanceText: detail.distanceText, + canOpenDetail: !!detail.taskId, + } +}) + +const detailEnvironment = computed(() => ({ + updatedText: selectedDock.value?.updated || record.value?.updated || '刚刚', + hasData: hasEnvironment.value, + outsideTemperatureText: displayWithUnit(selectedDockEnvironment.value?.outsideTemperature, '℃'), + windSpeedText: displayWithUnit(selectedDockEnvironment.value?.windSpeed, 'm/s'), + rainfallText: rainfallText(selectedDockEnvironment.value), +})) + +const detailActions = computed(() => ({ + visible: !isAdmin.value, + isDrone: isDrone.value, + isFlying: isFlying.value, + statusText: buttonStatusText, + activeTitle: commandProgress.status ? commandProgress.buttonTitle : '', + dockExtra: dockExtraCommands, + droneExtra: droneExtraCommands, +})) + +function onDetailCommand({ title, desc }) { + runCommand(title, desc) +} + function toggleLive() { if (live.session) closeLive() else openLive() @@ -999,7 +931,7 @@ function fullscreenLive() { ui.toast('当前无可全屏播放的视频流') return } - const ok = livePlayerRef.value?.requestFullscreen?.() + const ok = detailPanelRef.value?.livePlayerRef?.requestFullscreen?.() if (!ok) ui.toast('当前浏览器不支持全屏') }