From 8554660258ada70b5acd363cec9c16db7578a6d2 Mon Sep 17 00:00:00 2001
From: wxs <211789910@qq.com>
Date: Thu, 29 Jan 2026 17:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=9C=B0=E5=9B=BE=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=9A=84=E9=81=AE=E7=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/device-manage/index.vue   | 342 +++++++++++-------
 .../home/components/twin-situation/index.vue  |   4 +-
 .../Skyeye-sys-ui/src/views/home/index.vue    |   2 +-
 3 files changed, 210 insertions(+), 138 deletions(-)

diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/device-manage/index.vue b/frontend/Skyeye-sys-ui/src/views/home/components/device-manage/index.vue
index 321a055..bd5b040 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/components/device-manage/index.vue
+++ b/frontend/Skyeye-sys-ui/src/views/home/components/device-manage/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="twin-situation" >
+  <div class="twin-situation">
     <!--  资源列表  -->
     <dt-card
       :class="{
         'resource-list': true,
-        'resource-list__large': isIconModeLarge
+        'resource-list__large': isIconModeLarge,
       }"
       icon="ri-send-plane-line"
       title="可用资源"
@@ -19,30 +19,50 @@
           可用资源
         </span>
       </template>
-<!--      <template v-slot:command>-->
-<!--        <el-tooltip-->
-<!--          effect="dark"-->
-<!--          content="详情"-->
-<!--          placement="bottom"-->
-<!--        >-->
-<!--          <i class="ri-eye-2-line" @click="toggleRightShow"></i>-->
-<!--        </el-tooltip>-->
-<!--      </template>-->
+      <!--      <template v-slot:command>-->
+      <!--        <el-tooltip-->
+      <!--          effect="dark"-->
+      <!--          content="详情"-->
+      <!--          placement="bottom"-->
+      <!--        >-->
+      <!--          <i class="ri-eye-2-line" @click="toggleRightShow"></i>-->
+      <!--        </el-tooltip>-->
+      <!--      </template>-->
       <div class="resource-list__content">
-        <div v-for="item in resourceList.data" :key="item.id" class="resource-item" @click.stop="resourceClick(item)">
-          <span class="device-status" :class="item.status ? 'device-status__online' : ''"></span>
+        <div
+          v-for="item in resourceList.data"
+          :key="item.id"
+          class="resource-item"
+          @click.stop="resourceClick(item)"
+        >
+          <span
+            class="device-status"
+            :class="item.status ? 'device-status__online' : ''"
+          ></span>
           <span class="icon"><i class="ri-dv-line"></i></span>
-          <span class="device-name">{{item.name}}</span>
-          <span class="battery" :class="getDeviceBatteryClass(item.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{item.battery}}%</span>
-          <span class="fly-height"><i class="ri-expand-vertical-line"></i>{{item.flyHeight}}m</span>
-          <span class="device-location"><i class="ri-map-pin-line"></i>{{item.lon}},{{item.lat}}</span>
-          <i class="iconfont icon-zhuizong device-lock" @click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"></i>
+          <span class="device-name">{{ item.name }}</span>
+          <span
+            class="battery"
+            :class="getDeviceBatteryClass(item.battery)"
+            style="opacity: 0"
+            ><i class="ri-battery-saver-line"></i>{{ item.battery }}%</span
+          >
+          <span class="fly-height"
+            ><i class="ri-expand-vertical-line"></i>{{ item.flyHeight }}m</span
+          >
+          <span class="device-location"
+            ><i class="ri-map-pin-line"></i>{{ item.lon }},{{ item.lat }}</span
+          >
+          <i
+            class="iconfont icon-zhuizong device-lock"
+            @click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"
+          ></i>
         </div>
       </div>
     </dt-card>
 
     <!--  任务列表  -->
-<!--    <dt-card
+    <!--    <dt-card
       :class="{
         'task-list': true,
         'task-list__large': isIconModeLarge
@@ -60,21 +80,21 @@
           任务列表
         </span>
       </template> -->
-<!--      <template v-slot:command>-->
-<!--        <el-tooltip-->
-<!--          effect="dark"-->
-<!--          content="上传精处理图片"-->
-<!--          placement="top"-->
-<!--        >-->
-<!--          <i class="ri-upload-2-line" @click.stop="showUpload"></i>-->
-<!--        </el-tooltip>-->
-<!--      </template>-->
-      <!--
+    <!--      <template v-slot:command>-->
+    <!--        <el-tooltip-->
+    <!--          effect="dark"-->
+    <!--          content="上传精处理图片"-->
+    <!--          placement="top"-->
+    <!--        >-->
+    <!--          <i class="ri-upload-2-line" @click.stop="showUpload"></i>-->
+    <!--        </el-tooltip>-->
+    <!--      </template>-->
+    <!--
       <div class="task-list__content">
         <div v-for="(item, index) in taskList.data" :key="item.id" class="task-item">
           <div class="left-part">-->
-<!--            <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
-<!--            <div class="execute-info" @click="openTaskLineDetail(item)">
+    <!--            <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
+    <!--            <div class="execute-info" @click="openTaskLineDetail(item)">
               <span class="execute-type-icon" :class="'execute-state-' + item.status"><i class="ri-dv-line"></i></span>
               <span class="task-execute">{{ item.name }}</span>
             </div>
@@ -118,18 +138,21 @@
               <i class="ri-repeat-line" @click.stop="reRunTask(item, index)"></i>
 
             </el-tooltip>-->
-<!--            <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
-<!--            <i class="el-icon-close delete-task" @click.stop="deleteTask(item)"></i>-->
-<!--          </div>
+    <!--            <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
+    <!--            <i class="el-icon-close delete-task" @click.stop="deleteTask(item)"></i>-->
+    <!--          </div>
         </div>
       </div>
     </dt-card>
 -->
     <!-- 图片上传   -->
-    <pictures-upload v-if="uploadPictureInfo.visible" :visible.sync="uploadPictureInfo.visible"></pictures-upload>
+    <pictures-upload
+      v-if="uploadPictureInfo.visible"
+      :visible.sync="uploadPictureInfo.visible"
+    ></pictures-upload>
 
     <!--  气象预警  -->
-<!--
+    <!--
     <right-slide class="weather-info-wrap">
       <dt-card
         :class="{
@@ -168,7 +191,7 @@
 -->
 
     <!--  雷达图  -->
-<!--
+    <!--
     <right-slide class="radar-info-wrap">
       <dt-card
         :class="{
@@ -200,9 +223,9 @@
     <right-slide class="detail-info-wrap" v-if="detailInfo.visible">
       <dt-card
         :class="{
-        'detail-info': true,
-        'detail-info__large': isIconModeLarge
-      }"
+          'detail-info': true,
+          'detail-info__large': isIconModeLarge,
+        }"
         icon="iconfont icon-target"
         title="详细信息"
         v-if="detailInfo.visible"
@@ -214,13 +237,29 @@
         <div class="detail-info__content">
           <div class="base-info">
             <!--    无人机      -->
-            <div class="uav-item" >
-              <span class="device-status" :class="getDeviceSignalClass(detailInfo.baseInfo.signal)"></span>
+            <div class="uav-item">
+              <span
+                class="device-status"
+                :class="getDeviceSignalClass(detailInfo.baseInfo.signal)"
+              ></span>
               <span class="icon"><i class="ri-dv-line"></i></span>
               <span class="device-name">{{ detailInfo.baseInfo.name }}</span>
-              <span class="battery" :class="getDeviceBatteryClass(detailInfo.baseInfo.battery)" style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailInfo.baseInfo.battery}}%</span>
-              <span class="fly-height"><i class="ri-expand-vertical-line"></i>{{detailInfo.baseInfo.flyHeight}}m</span>
-              <span class="device-location"><i class="ri-map-pin-line"></i>{{detailInfo.baseInfo.lon}},{{detailInfo.baseInfo.lat}}</span>
+              <span
+                class="battery"
+                :class="getDeviceBatteryClass(detailInfo.baseInfo.battery)"
+                style="opacity: 0"
+                ><i class="ri-battery-saver-line"></i
+                >{{ detailInfo.baseInfo.battery }}%</span
+              >
+              <span class="fly-height"
+                ><i class="ri-expand-vertical-line"></i
+                >{{ detailInfo.baseInfo.flyHeight }}m</span
+              >
+              <span class="device-location"
+                ><i class="ri-map-pin-line"></i>{{ detailInfo.baseInfo.lon }},{{
+                  detailInfo.baseInfo.lat
+                }}</span
+              >
               <i class="el-icon-info device-lock" @click="showUavMore"></i>
             </div>
           </div>
@@ -235,21 +274,36 @@
           <!--        </div>-->
           <div class="picture-list">
             <div>回传图像：</div>
-            <div v-for="item in detailInfo.pictureList" :key="item.createTime" class="picture-list-item">
+            <div
+              v-for="item in detailInfo.pictureList"
+              :key="item.createTime"
+              class="picture-list-item"
+            >
               <div class="picture-item-image">
                 <el-image
                   style="width: 40px; height: 40px"
                   :src="item.url"
-                  :preview-src-list="[item.url]">
+                  :preview-src-list="[item.url]"
+                >
                 </el-image>
               </div>
               <div class="picture-item-info">
-                <div>拍摄任务：{{item.taskName}} | 拍摄载荷：{{item.loaderName}}</div>
-                <div>拍摄时间：{{item.createTime}}</div>
+                <div>
+                  拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
+                    item.loaderName
+                  }}
+                </div>
+                <div>拍摄时间：{{ item.createTime }}</div>
               </div>
               <div class="picture-command">
-                <i class="iconfont icon-dt-icon-dingwei" @click="lockHistoryPicture(item)"></i>
-                <i class="iconfont icon-quanjushijiao-copy" @click="toggleHistoryPicture(item)"></i>
+                <i
+                  class="iconfont icon-dt-icon-dingwei"
+                  @click="lockHistoryPicture(item)"
+                ></i>
+                <i
+                  class="iconfont icon-quanjushijiao-copy"
+                  @click="toggleHistoryPicture(item)"
+                ></i>
               </div>
             </div>
           </div>
@@ -257,12 +311,11 @@
       </dt-card>
     </right-slide>
 
-
     <!--  详情  -->
     <dt-card
       :class="{
         'detail-uav': true,
-        'detail-uav__large': isIconModeLarge
+        'detail-uav__large': isIconModeLarge,
       }"
       icon="iconfont icon-target"
       title="详细信息"
@@ -274,59 +327,92 @@
     >
       <div class="detail-uav__content">
         <div class="image-info">
-          <img :src="detailUav.baseInfo.url" alt="">
+          <img :src="detailUav.baseInfo.url" alt="" />
           <div class="status-info">
             <div>
-              <span :class="detailUav.baseInfo.status ? 'uav-status-online' : 'uav-status-offline'"></span>
-              <span>{{detailUav.baseInfo.status ? '在线' : '离线'}}</span>
-<!--              <span style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailUav.baseInfo.battery}}%</span>-->
-              <span><i class="ri-expand-vertical-line"></i>{{detailUav.baseInfo.flyHeight}}m</span>
-<!--              <span><i class="ri-expand-horizontal-line"></i>{{detailUav.baseInfo.flyWidth}}m</span>-->
+              <span
+                :class="
+                  detailUav.baseInfo.status
+                    ? 'uav-status-online'
+                    : 'uav-status-offline'
+                "
+              ></span>
+              <span>{{ detailUav.baseInfo.status ? '在线' : '离线' }}</span>
+              <!--              <span style="opacity: 0;"><i class="ri-battery-saver-line"></i>{{detailUav.baseInfo.battery}}%</span>-->
+              <span
+                ><i class="ri-expand-vertical-line"></i
+                >{{ detailUav.baseInfo.flyHeight }}m</span
+              >
+              <!--              <span><i class="ri-expand-horizontal-line"></i>{{detailUav.baseInfo.flyWidth}}m</span>-->
             </div>
             <div>
-              <span>{{detailUav.baseInfo.longitude}}</span>
-              <span>{{detailUav.baseInfo.latitude}}</span>
-              <i class="iconfont icon-zhuizong" @click.stop="flyToTarget(detailUav.baseInfo.longitude, detailUav.baseInfo.latitude, detailUav.baseInfo.flyHeight)"></i>
+              <span>{{ detailUav.baseInfo.longitude }}</span>
+              <span>{{ detailUav.baseInfo.latitude }}</span>
+              <i
+                class="iconfont icon-zhuizong"
+                @click.stop="
+                  flyToTarget(
+                    detailUav.baseInfo.longitude,
+                    detailUav.baseInfo.latitude,
+                    detailUav.baseInfo.flyHeight
+                  )
+                "
+              ></i>
             </div>
           </div>
         </div>
         <div class="other-info">
-          <el-collapse v-model="detailUav.activeNames" @change="handleUavDetailCollapse">
-<!--            <el-collapse-item title="基本信息" name="1">-->
-<!--              <div class="uav-span-wrap"><span>名称：</span><span>{{detailUav.basicsInfo.name}}</span></div>-->
-<!--              <div class="uav-span-wrap"><span>分组：</span><span>{{detailUav.basicsInfo.group}}</span></div>-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item title="任务信息" name="2">-->
-<!--              <div class="target-task-item" v-for="item in detailUav.taskList" :key="item.id">-->
-<!--                <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
-<!--                <div class="task-info">-->
-<!--                  <i :class="item.typeIcon"></i>-->
-<!--                  <span class="task-name">{{ item.taskName }}</span>-->
-<!--                  <span :class="{ 'task-finish': item.isFinish }">{{-->
-<!--                      item.uavCompletionName-->
-<!--                    }}</span>-->
-<!--                </div>-->
-<!--                <div class="task-time">{{item.taskTime}}</div>-->
-<!--              </div>-->
-<!--            </el-collapse-item>-->
+          <el-collapse
+            v-model="detailUav.activeNames"
+            @change="handleUavDetailCollapse"
+          >
+            <!--            <el-collapse-item title="基本信息" name="1">-->
+            <!--              <div class="uav-span-wrap"><span>名称：</span><span>{{detailUav.basicsInfo.name}}</span></div>-->
+            <!--              <div class="uav-span-wrap"><span>分组：</span><span>{{detailUav.basicsInfo.group}}</span></div>-->
+            <!--            </el-collapse-item>-->
+            <!--            <el-collapse-item title="任务信息" name="2">-->
+            <!--              <div class="target-task-item" v-for="item in detailUav.taskList" :key="item.id">-->
+            <!--                <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
+            <!--                <div class="task-info">-->
+            <!--                  <i :class="item.typeIcon"></i>-->
+            <!--                  <span class="task-name">{{ item.taskName }}</span>-->
+            <!--                  <span :class="{ 'task-finish': item.isFinish }">{{-->
+            <!--                      item.uavCompletionName-->
+            <!--                    }}</span>-->
+            <!--                </div>-->
+            <!--                <div class="task-time">{{item.taskTime}}</div>-->
+            <!--              </div>-->
+            <!--            </el-collapse-item>-->
             <el-collapse-item title="状态信息" name="3">
               <el-tabs v-model="detailUav.activeTab">
                 <el-tab-pane label="DEV" name="DEV">
-                  <div class="uav-span-wrap" v-for="item in detailUav.statusInfo.dev" :key="item.name">
-                    <span>{{item.name}}：</span>
-                    <span>{{item.value}}{{item.unit}}</span>
+                  <div
+                    class="uav-span-wrap"
+                    v-for="item in detailUav.statusInfo.dev"
+                    :key="item.name"
+                  >
+                    <span>{{ item.name }}：</span>
+                    <span>{{ item.value }}{{ item.unit }}</span>
                   </div>
                 </el-tab-pane>
                 <el-tab-pane label="GPS" name="GPS">
-                  <div class="uav-span-wrap" v-for="item in detailUav.statusInfo.gps" :key="item.name">
-                    <span>{{item.name}}：</span>
-                    <span>{{item.value}}{{item.unit}}</span>
+                  <div
+                    class="uav-span-wrap"
+                    v-for="item in detailUav.statusInfo.gps"
+                    :key="item.name"
+                  >
+                    <span>{{ item.name }}：</span>
+                    <span>{{ item.value }}{{ item.unit }}</span>
                   </div>
                 </el-tab-pane>
                 <el-tab-pane label="IMU" name="IMU">
-                  <div class="uav-span-wrap" v-for="item in detailUav.statusInfo.imu" :key="item.name">
-                    <span>{{item.name}}：</span>
-                    <span>{{item.value}}{{item.unit}}</span>
+                  <div
+                    class="uav-span-wrap"
+                    v-for="item in detailUav.statusInfo.imu"
+                    :key="item.name"
+                  >
+                    <span>{{ item.name }}：</span>
+                    <span>{{ item.value }}{{ item.unit }}</span>
                   </div>
                 </el-tab-pane>
               </el-tabs>
@@ -347,21 +433,36 @@
             </el-collapse-item>
             <el-collapse-item title="回传图像" name="5">
               <div class="back-image">
-                <div v-for="item in detailInfo.pictureList" :key="item.time" class="picture-list-item">
+                <div
+                  v-for="item in detailInfo.pictureList"
+                  :key="item.time"
+                  class="picture-list-item"
+                >
                   <div class="picture-item-image">
                     <el-image
                       style="width: 40px; height: 40px"
                       :src="item.url"
-                      :preview-src-list="[item.url]">
+                      :preview-src-list="[item.url]"
+                    >
                     </el-image>
                   </div>
                   <div class="picture-item-info">
-                    <div>拍摄任务：{{item.taskName}} | 拍摄载荷：{{item.loaderName}}</div>
-                    <div>拍摄时间：{{item.time}}</div>
+                    <div>
+                      拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
+                        item.loaderName
+                      }}
+                    </div>
+                    <div>拍摄时间：{{ item.time }}</div>
                   </div>
                   <div class="picture-command">
-                    <i class="iconfont icon-dt-icon-dingwei" @click="lockHistoryPicture(item)"></i>
-                    <i class="iconfont icon-quanjushijiao-copy" @click="toggleHistoryPicture(item)"></i>
+                    <i
+                      class="iconfont icon-dt-icon-dingwei"
+                      @click="lockHistoryPicture(item)"
+                    ></i>
+                    <i
+                      class="iconfont icon-quanjushijiao-copy"
+                      @click="toggleHistoryPicture(item)"
+                    ></i>
                   </div>
                 </div>
               </div>
@@ -371,7 +472,6 @@
       </div>
     </dt-card>
 
-
     <dt-dialog
       :title="taskLineDetail.title"
       top="20vh"
@@ -380,53 +480,25 @@
       append-to-body
     >
       <div class="task-line-detail">
-        <el-table
-          :data="taskLineDetail.data"
-          height="100%"
-          style="width: 100%"
-        >
-          <el-table-column
-            type="index"
-            width="50">
+        <el-table :data="taskLineDetail.data" height="100%" style="width: 100%">
+          <el-table-column type="index" width="50"> </el-table-column>
+          <el-table-column prop="startLon" label="起点经度"> </el-table-column>
+          <el-table-column prop="startLat" label="起点纬度"> </el-table-column>
+          <el-table-column prop="startHeight" label="起点相对高度">
           </el-table-column>
-          <el-table-column
-            prop="startLon"
-            label="起点经度">
+          <el-table-column prop="startAlt" label="起点海拔高度">
           </el-table-column>
-          <el-table-column
-            prop="startLat"
-            label="起点纬度">
+          <el-table-column prop="endLon" label="终点经度"> </el-table-column>
+          <el-table-column prop="endLat" label="终点纬度"> </el-table-column>
+          <el-table-column prop="endHeight" label="终点相对高度">
           </el-table-column>
-          <el-table-column
-            prop="startHeight"
-            label="起点相对高度">
-          </el-table-column>
-          <el-table-column
-            prop="startAlt"
-            label="起点海拔高度">
-          </el-table-column>
-          <el-table-column
-            prop="endLon"
-            label="终点经度">
-          </el-table-column>
-          <el-table-column
-            prop="endLat"
-            label="终点纬度">
-          </el-table-column>
-          <el-table-column
-            prop="endHeight"
-            label="终点相对高度">
-          </el-table-column>
-          <el-table-column
-            prop="endAlt"
-            label="终点海拔高度">
+          <el-table-column prop="endAlt" label="终点海拔高度">
           </el-table-column>
         </el-table>
       </div>
-
     </dt-dialog>
 
-    <dt-loading :visible="loadingCount > 0"></dt-loading>
+    <!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
   </div>
 </template>
 <script src="./index.js"></script>
diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue
index 72f9566..261398a 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue
+++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue
@@ -92,7 +92,7 @@
                 </div>
                 <div class="task-time">{{ item.beginTime }}</div>
               </div>
-              <div class="right-part" >
+              <div class="right-part">
                 <el-tooltip
                   effect="dark"
                   :content="item.check ? '隐藏' : '显示'"
@@ -526,7 +526,7 @@
       </div>
     </dt-dialog>
 
-    <dt-loading :visible="loadingCount > 0"></dt-loading>
+    <!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
   </div>
 </template>
 <script src="./index.js"></script>
diff --git a/frontend/Skyeye-sys-ui/src/views/home/index.vue b/frontend/Skyeye-sys-ui/src/views/home/index.vue
index 7fbd891..7ef1f60 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/index.vue
+++ b/frontend/Skyeye-sys-ui/src/views/home/index.vue
@@ -61,7 +61,7 @@
     <info-bar v-if="menus.situation.active || menus.taskManage.active" />
 
     <!--  遮罩  -->
-    <dt-loading :visible="loadingCount > 0"></dt-loading>
+    <!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
   </div>
 </template>
 <script src="./index.js"></script>