refactor: 抽取 DockStatusDialog 机巢状态弹窗

src/components/DockStatusDialog.vue

@@ -0,0 +1,147 @@
+<template>
+  <t-dialog
+    :visible="visible"
+    :header="title"
+    width="700px"
+    destroy-on-close
+    :footer="false"
+    dialog-class-name="dock-status-dialog"
+    @update:visible="onVisibleUpdate"
+    @close="emit('close')"
+  >
+    <div class="dock-status-body">
+      <div class="dock-status-grid">
+        <div>
+          <span>设备连接</span>
+          <strong :class="{ 'green-text': summary.online }">{{ summary.connection }}</strong>
+          <small>{{ summary.connectionHint }}</small>
+        </div>
+        <div>
+          <span>无人机状态</span>
+          <strong>{{ summary.drone }}</strong>
+          <small>{{ summary.droneHint }}</small>
+        </div>
+        <div>
+          <span>舱门状态</span>
+          <strong>{{ summary.door }}</strong>
+          <small>{{ summary.doorHint }}</small>
+        </div>
+        <div>
+          <span>充电模块</span>
+          <strong :class="{ 'green-text': chargeActive }">{{ summary.charge }}</strong>
+          <small>{{ summary.chargeHint }}</small>
+        </div>
+        <div>
+          <span>控制模式</span>
+          <strong>{{ summary.mode }}</strong>
+          <small>{{ summary.modeHint }}</small>
+        </div>
+        <div>
+          <span>当前告警</span>
+          <strong :class="{ 'green-text': !summary.alarmCount }">{{ summary.alarm }}</strong>
+          <small>{{ summary.alarmHint }}</small>
+        </div>
+      </div>
+
+      <section class="dock-state-section">
+        <div class="dock-state-heading">
+          <h4>状态</h4>
+          <span>PLC 实时反馈 · {{ updatedText }}</span>
+        </div>
+        <div class="dock-state-board">
+          <article>
+            <h5>舱门状态</h5>
+            <ul>
+              <li :class="{ active: board.leftClosed }"><i></i>左顶门关</li>
+              <li :class="{ active: board.leftOpen }"><i></i>左顶门开</li>
+              <li :class="{ active: board.rightClosed }"><i></i>右顶门关</li>
+              <li :class="{ active: board.rightOpen }"><i></i>右顶门开</li>
+            </ul>
+          </article>
+          <article>
+            <h5>杆件状态</h5>
+            <ul>
+              <li :class="{ active: board.lrTight }"><i></i>左右归中闭合</li>
+              <li :class="{ active: board.lrLoose }"><i></i>左右归中打开</li>
+              <li :class="{ active: board.fbTight }"><i></i>前后归中闭合</li>
+              <li :class="{ active: board.fbLoose }"><i></i>前后归中打开</li>
+            </ul>
+          </article>
+          <article>
+            <h5>系统状态</h5>
+            <ul>
+              <li :class="{ active: board.emergencyStop }"><i :class="{ warning: board.emergencyStop }"></i>急停</li>
+              <li :class="{ active: board.autoMode }"><i></i>自动模式</li>
+              <li :class="{ active: board.noAlarm }"><i></i>无报警</li>
+              <li :class="{ active: board.resetDone }"><i></i>复位完成</li>
+            </ul>
+          </article>
+          <article>
+            <h5>充电与在位</h5>
+            <ul>
+              <li :class="{ active: board.charging }"><i></i>充电中</li>
+              <li :class="{ active: board.chargeIdle }"><i></i>充电空闲</li>
+              <li :class="{ active: board.dronePresent }"><i></i>无人机在位</li>
+              <li :class="{ active: board.powerOnline }"><i></i>电源在线</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+    </div>
+  </t-dialog>
+</template>
+
+<script setup>
+defineProps({
+  visible: { type: Boolean, default: false },
+  title: { type: String, default: '机巢' },
+  summary: {
+    type: Object,
+    default: () => ({
+      online: false,
+      connection: '--',
+      connectionHint: '',
+      drone: '--',
+      droneHint: '',
+      door: '--',
+      doorHint: '',
+      charge: '--',
+      chargeHint: '',
+      mode: '--',
+      modeHint: '',
+      alarmCount: 0,
+      alarm: '--',
+      alarmHint: '',
+    }),
+  },
+  chargeActive: { type: Boolean, default: false },
+  updatedText: { type: String, default: '刚刚' },
+  board: {
+    type: Object,
+    default: () => ({
+      leftClosed: false,
+      leftOpen: false,
+      rightClosed: false,
+      rightOpen: false,
+      lrTight: false,
+      lrLoose: false,
+      fbTight: false,
+      fbLoose: false,
+      emergencyStop: false,
+      autoMode: false,
+      noAlarm: false,
+      resetDone: false,
+      charging: false,
+      chargeIdle: false,
+      dronePresent: false,
+      powerOnline: false,
+    }),
+  },
+})
+
+const emit = defineEmits(['update:visible', 'close'])
+
+function onVisibleUpdate(next) {
+  emit('update:visible', next)
+}
+</script>

src/views/MonitorView/MonitorView.vue

@@ -116,95 +116,15 @@
   </section>
 
 
-  <t-dialog
+  <DockStatusDialog
     v-model:visible="dockStatusOpen"
-    :header="dockStatusTitle"
-    width="700px"
-    destroy-on-close
-    :footer="false"
-    dialog-class-name="dock-status-dialog"
+    :title="dockStatusTitle"
+    :summary="dockStatusSummary"
+    :charge-active="chargeTone"
+    :updated-text="dockStatusUpdatedText"
+    :board="dockStatusBoard"
     @close="closeDockStatus"
-  >
-    <div class="dock-status-body">
-      <div class="dock-status-grid">
-        <div>
-          <span>设备连接</span>
-          <strong :class="{ 'green-text': dockStatusSummary.online }">{{ dockStatusSummary.connection }}</strong>
-          <small>{{ dockStatusSummary.connectionHint }}</small>
-        </div>
-        <div>
-          <span>无人机状态</span>
-          <strong>{{ dockStatusSummary.drone }}</strong>
-          <small>{{ dockStatusSummary.droneHint }}</small>
-        </div>
-        <div>
-          <span>舱门状态</span>
-          <strong>{{ dockStatusSummary.door }}</strong>
-          <small>{{ dockStatusSummary.doorHint }}</small>
-        </div>
-        <div>
-          <span>充电模块</span>
-          <strong :class="{ 'green-text': chargeTone }">{{ dockStatusSummary.charge }}</strong>
-          <small>{{ dockStatusSummary.chargeHint }}</small>
-        </div>
-        <div>
-          <span>控制模式</span>
-          <strong>{{ dockStatusSummary.mode }}</strong>
-          <small>{{ dockStatusSummary.modeHint }}</small>
-        </div>
-        <div>
-          <span>当前告警</span>
-          <strong :class="{ 'green-text': !dockStatusSummary.alarmCount }">{{ dockStatusSummary.alarm }}</strong>
-          <small>{{ dockStatusSummary.alarmHint }}</small>
-        </div>
-      </div>
-
-      <section class="dock-state-section">
-        <div class="dock-state-heading">
-          <h4>状态</h4>
-          <span>PLC 实时反馈 · {{ selectedDock?.updated || record?.updated || '刚刚' }}</span>
-        </div>
-        <div class="dock-state-board">
-          <article>
-            <h5>舱门状态</h5>
-            <ul>
-              <li :class="{ active: isClosed(doorValue('left')) }"><i></i>左顶门关</li>
-              <li :class="{ active: doorValue('left') === 'open' }"><i></i>左顶门开</li>
-              <li :class="{ active: isClosed(doorValue('right')) }"><i></i>右顶门关</li>
-              <li :class="{ active: doorValue('right') === 'open' }"><i></i>右顶门开</li>
-            </ul>
-          </article>
-          <article>
-            <h5>杆件状态</h5>
-            <ul>
-              <li :class="{ active: isTight(centeringValue('leftRight')) }"><i></i>左右归中闭合</li>
-              <li :class="{ active: centeringValue('leftRight') === 'loose' }"><i></i>左右归中打开</li>
-              <li :class="{ active: isTight(centeringValue('frontBack')) }"><i></i>前后归中闭合</li>
-              <li :class="{ active: centeringValue('frontBack') === 'loose' }"><i></i>前后归中打开</li>
-            </ul>
-          </article>
-          <article>
-            <h5>系统状态</h5>
-            <ul>
-              <li :class="{ active: isTrue(rt('emergencyStop')) }"><i :class="{ warning: isTrue(rt('emergencyStop')) }"></i>急停</li>
-              <li :class="{ active: isAutoMode }"><i></i>自动模式</li>
-              <li :class="{ active: !dockStatusSummary.alarmCount }"><i></i>无报警</li>
-              <li :class="{ active: isTrue(rt('resetDone', 'resetComplete')) }"><i></i>复位完成</li>
-            </ul>
-          </article>
-          <article>
-            <h5>充电与在位</h5>
-            <ul>
-              <li :class="{ active: chargeTone }"><i></i>充电中</li>
-              <li :class="{ active: String(rt('chargingState') || '').toLowerCase() === 'idle' }"><i></i>充电空闲</li>
-              <li :class="{ active: isTrue(rt('dronePresent')) }"><i></i>无人机在位</li>
-              <li :class="{ active: isTrue(rt('powerOnline', 'powerOn')) }"><i></i>电源在线</li>
-            </ul>
-          </article>
-        </div>
-      </section>
-    </div>
-  </t-dialog>
+  />
 </template>
 
 <script setup>
@@ -218,6 +138,7 @@ import mapHelper from '@/core/mapHelper'
 import mapConfig, { MAP_STYLES, MAP_OVERVIEW, MAP_VIEW } from '@/config/map'
 import { applyChineseLabels } from '@/utils/mapLabels'
 import MonitorDetailPanel from '@/components/MonitorDetailPanel.vue'
+import DockStatusDialog from '@/components/DockStatusDialog.vue'
 import DockDeviceCard from '@/components/DockDeviceCard.vue'
 import { getLivePlayURL, heartbeatLive, joinLive, leaveLive } from '@/api/live'
 import request from '@/utils/http'
@@ -1177,6 +1098,33 @@ const dockStatusSummary = computed(() => {
   }
 })
 
+const dockStatusUpdatedText = computed(() => selectedDock.value?.updated || record.value?.updated || '刚刚')
+
+const dockStatusBoard = computed(() => {
+  const left = doorValue('left')
+  const right = doorValue('right')
+  const lr = centeringValue('leftRight')
+  const fb = centeringValue('frontBack')
+  return {
+    leftClosed: isClosed(left),
+    leftOpen: left === 'open',
+    rightClosed: isClosed(right),
+    rightOpen: right === 'open',
+    lrTight: isTight(lr),
+    lrLoose: lr === 'loose',
+    fbTight: isTight(fb),
+    fbLoose: fb === 'loose',
+    emergencyStop: isTrue(rt('emergencyStop')),
+    autoMode: isAutoMode.value,
+    noAlarm: !dockStatusSummary.value.alarmCount,
+    resetDone: isTrue(rt('resetDone', 'resetComplete')),
+    charging: chargeTone.value,
+    chargeIdle: String(rt('chargingState') || '').toLowerCase() === 'idle',
+    dronePresent: isTrue(rt('dronePresent')),
+    powerOnline: isTrue(rt('powerOnline', 'powerOn')),
+  }
+})
+
 function openDockStatus() {
   if (!selectedId.value) return
   dockStatusOpen.value = true
@@ -1489,7 +1437,4 @@ async function runCommand(title, desc) {
 .device-select-checkbox :deep(.t-checkbox__input) {
   margin: 0;
 }
-.dock-status-body {
-  padding: 13px 18px 15px;
-}
 </style>