From d71e8c3c9214e4d6e6fe45a0445772659e1d603c Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Wed, 26 Aug 2026 17:27:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E9=A1=B5=E6=A8=A1=E6=9D=BF=E7=BB=93=E6=9E=84=EF=BC=8C=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E6=9C=BA=E5=B7=A2=E7=8A=B6=E6=80=81=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

弹窗从设备列表内部移回根模板，补全被截断的 markup。
---
 src/views/MonitorView/MonitorView.vue | 190 +++++++++++++-------------
 1 file changed, 95 insertions(+), 95 deletions(-)

diff --git a/src/views/MonitorView/MonitorView.vue b/src/views/MonitorView/MonitorView.vue
index 288ded5..1c0ff1d 100644
--- a/src/views/MonitorView/MonitorView.vue
+++ b/src/views/MonitorView/MonitorView.vue
@@ -60,101 +60,7 @@
               最后在线 {{ dock.updated }}<span>网络中断</span>
             </div>
           </article>
-        
-  <div class="modal-backdrop" :class="{ open: dockStatusOpen }" :aria-hidden="!dockStatusOpen" @click.self="closeDockStatus">
-    <div class="modal dock-status-dialog" role="dialog" aria-modal="true" aria-labelledby="dockStatusTitle">
-      <header class="dock-status-header">
-        <div>
-          <span>机巢运行状态</span>
-          <h3 id="dockStatusTitle">{{ dockStatusTitle }}</h3>
-        </div>
-        <button class="icon-button" type="button" title="关闭详情" @click="closeDockStatus">
-          <svg><use href="#i-x" /></svg>
-        </button>
-      </header>
-      <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>
-    </div>
-  </div>
-
-</template>
+        </template>
 
         <div v-if="!filteredDocks.length" class="table-empty" style="height:120px;display:grid;place-items:center;color:var(--muted);font-size:10px">暂无匹配设备</div>
       </div>
@@ -357,6 +263,100 @@
       <div v-else class="table-empty" style="height:100%;display:grid;place-items:center;color:var(--muted);font-size:11px">请在左侧选择设备</div>
     </aside>
   </section>
+
+
+  <div class="modal-backdrop" :class="{ open: dockStatusOpen }" :aria-hidden="!dockStatusOpen" @click.self="closeDockStatus">
+    <div class="modal dock-status-dialog" role="dialog" aria-modal="true" aria-labelledby="dockStatusTitle">
+      <header class="dock-status-header">
+        <div>
+          <span>机巢运行状态</span>
+          <h3 id="dockStatusTitle">{{ dockStatusTitle }}</h3>
+        </div>
+        <button class="icon-button" type="button" title="关闭详情" @click="closeDockStatus">
+          <svg><use href="#i-x" /></svg>
+        </button>
+      </header>
+      <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>
+    </div>
+  </div>
 </template>
 
 <script setup>