From ca8852c31155c7af2ca5a80964874141fc12ccb2 Mon Sep 17 00:00:00 2001
From: wxs <211789910@qq.com>
Date: Mon, 2 Feb 2026 17:48:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=89=A7=E8=A1=8C=E4=B8=AD?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E7=9A=84=E9=9D=A2=E6=9D=BF=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/twin-situation/index.js   |  13 +-
 .../home/components/twin-situation/index.scss |  16 +-
 .../home/components/twin-situation/index.vue  | 149 +++++++++---------
 .../Skyeye-sys-ui/src/views/home/index.js     |   7 +-
 .../Skyeye-sys-ui/src/views/home/index.scss   |  12 ++
 .../Skyeye-sys-ui/src/views/home/index.vue    |   6 +-
 6 files changed, 119 insertions(+), 84 deletions(-)

diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js
index bbd8651..7dada03 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js
+++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js
@@ -475,6 +475,12 @@ export default {
           historyPictureList = []
         }
       }
+    },
+    'detailUav.visible': {
+      handler: function (nv) {
+        this.$emit('sar-change', nv)
+      },
+      immediate: true,
     }
   },
   created() {
@@ -1110,8 +1116,8 @@ export default {
             // 测试
             // this.addUavToScene(item)
           })
-          this.detailUav.id = data[0].id
-          this.detailUav.visible = true
+          this.detailUav.id = data.length ? data[0].id : 1
+          this.detailUav.visible = data.length ? true : false
           taskListResource = data
           this.taskList.data = list
           if (this.taskList.data.length) {
@@ -1557,7 +1563,7 @@ export default {
       }).then(res => {
         stopTaskFly({ id: info.id }).then(res => {
           if (res.data.code === 200) {
-            info.status = 2
+            // info.status = 2
             this.getTaskList()
             this.$message.success('任务已结束！')
             this.removeTaskTarget(info.id)
@@ -2738,7 +2744,6 @@ export default {
       console.log('SAR波形', JSON.parse(info.body))
       let data = JSON.parse(info.body)
       console.log('id对比', this.detailUav.id, data.payloadId);
-      // && this.detailUav.id === data.payloadId
       if (this.detailUav.visible && this.detailUav.id === data.jobId) {
         let channel1False = []
         let channel1Real = []
diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss
index 15c67e6..474342a 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss
+++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss
@@ -405,6 +405,14 @@
     height: calc(100vh - 620px);
   }
 
+  .detail-uav-wrap {
+    width: 430px;
+    position: fixed;
+    bottom: 5px;
+    right: 10px;
+    height: calc(100vh - 60px);
+  }
+
   .detail-info {
     width: 460px;
     //position: fixed;
@@ -1174,8 +1182,8 @@
 
 
   .detail-uav {
-    width: 460px;
-    position: fixed;
+    width: 410px;
+    // position: fixed;
     top: 60px;
     //bottom: 5px;
     right: 10px;
@@ -1185,6 +1193,10 @@
     transition: 0.2s ease-in-out;
     z-index: 2;
 
+    ::v-deep .dt-card__header {
+      display: none;
+    }
+
     .detail-uav__content {
       padding-right: 8px;
       box-sizing: border-box;
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 a8752eb..6c0669e 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
@@ -77,10 +77,7 @@
             >
               <div class="left-part">
                 <!--            <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
-                <div
-                  class="execute-info"
-                  @click.stop="openTaskLineDetail(item)"
-                >
+                <div class="execute-info">
                   <span
                     class="execute-type-icon"
                     :class="'execute-state-' + item.status"
@@ -344,74 +341,75 @@
     </right-slide>
 
     <!--  详情  -->
-    <dt-card
-      :class="{
-        'detail-uav': true,
-        'detail-uav__large': isIconModeLarge,
-      }"
-      icon="iconfont icon-target"
-      title="详细信息"
-      v-if="detailUav.visible"
-      :visible.sync="detailUav.visible"
-      :scroll="true"
-      :showClose="true"
-      :showDivider="false"
-    >
-      <div class="detail-uav__content">
-        <div class="other-info">
-          <el-collapse
-            v-model="detailUav.activeNames"
-            @change="handleUavDetailCollapse"
-          >
-            <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>
-                </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>
-                </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>
-                </el-tab-pane>
-              </el-tabs>
-            </el-collapse-item>
-            <el-collapse-item title="波形信息" name="4">
-              <div class="wave-chart">
-                <dt-multiple-analysis
-                  ref="uavDetailChart"
-                  :data="detailUav.chart.data"
-                  :legend="detailUav.chart.legend"
-                  :tooltip="detailUav.chart.tooltip"
-                  :title="detailUav.chart.title"
-                  :grid="detailUav.chart.grid"
-                  :xAxis="detailUav.chart.xAxis"
-                  :yAxis="detailUav.chart.yAxis"
-                ></dt-multiple-analysis>
-              </div>
-            </el-collapse-item>
-            <!-- <el-collapse-item title="回传图像" name="5">
+    <right-slide class="detail-uav-wrap" v-if="detailUav.visible">
+      <dt-card
+        :class="{
+          'detail-uav': true,
+          'detail-uav__large': isIconModeLarge,
+        }"
+        icon="iconfont icon-target"
+        title="详细信息"
+        v-if="detailUav.visible"
+        :visible.sync="detailUav.visible"
+        :scroll="true"
+        :showClose="true"
+        :showDivider="false"
+      >
+        <div class="detail-uav__content">
+          <div class="other-info">
+            <el-collapse
+              v-model="detailUav.activeNames"
+              @change="handleUavDetailCollapse"
+            >
+              <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>
+                  </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>
+                  </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>
+                  </el-tab-pane>
+                </el-tabs>
+              </el-collapse-item>
+              <el-collapse-item title="波形信息" name="4">
+                <div class="wave-chart">
+                  <dt-multiple-analysis
+                    ref="uavDetailChart"
+                    :data="detailUav.chart.data"
+                    :legend="detailUav.chart.legend"
+                    :tooltip="detailUav.chart.tooltip"
+                    :title="detailUav.chart.title"
+                    :grid="detailUav.chart.grid"
+                    :xAxis="detailUav.chart.xAxis"
+                    :yAxis="detailUav.chart.yAxis"
+                  ></dt-multiple-analysis>
+                </div>
+              </el-collapse-item>
+              <!-- <el-collapse-item title="回传图像" name="5">
               <div class="back-image">
                 <div
                   v-for="item in detailInfo.pictureList"
@@ -447,10 +445,11 @@
                 </div>
               </div>
             </el-collapse-item> -->
-          </el-collapse>
+            </el-collapse>
+          </div>
         </div>
-      </div>
-    </dt-card>
+      </dt-card>
+    </right-slide>
 
     <dt-dialog
       :title="taskLineDetail.title"
diff --git a/frontend/Skyeye-sys-ui/src/views/home/index.js b/frontend/Skyeye-sys-ui/src/views/home/index.js
index 47b8f6b..6ee06bc 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/index.js
+++ b/frontend/Skyeye-sys-ui/src/views/home/index.js
@@ -443,7 +443,8 @@ export default {
         visible: false,
         data: [],
         boatTypeLegend: []
-      }
+      },
+      moveInfoBar: false
     }
   },
   computed: {
@@ -1522,7 +1523,9 @@ export default {
       }
     },
     //#endregion
-
+    sarChange(val) {
+      this.moveInfoBar = val
+    },
 
     //#region ais船
     getAisData() {
diff --git a/frontend/Skyeye-sys-ui/src/views/home/index.scss b/frontend/Skyeye-sys-ui/src/views/home/index.scss
index 01f284d..85dfbae 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/index.scss
+++ b/frontend/Skyeye-sys-ui/src/views/home/index.scss
@@ -66,6 +66,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 5px 10px;
+
   .message-title {
     height: 30px;
     display: flex;
@@ -74,16 +75,19 @@
     box-sizing: border-box;
     border-bottom: 1px solid $--color-black-3;
     margin-bottom: 4px;
+
     >span {
       font-size: 14px;
       color: $--color-text-1;
     }
+
     >i {
       font-size: 16px;
       color: $--color-text-1;
       cursor: pointer;
     }
   }
+
   .message-body {
     //height: 50px;
 
@@ -95,10 +99,12 @@
       padding: 0 5px;
       position: relative;
       width: 100%;
+
       .el-textarea {
         flex: 1;
         margin: 0 10px;
       }
+
       >i {
         font-size: 14px;
         color: $--color-text-1;
@@ -106,12 +112,14 @@
         margin-top: 10px;
       }
     }
+
     .message-send {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 10px;
+
       .el-button {
         margin: 0 10px;
       }
@@ -124,3 +132,7 @@
     width: 100%;
   }
 }
+
+.info-bar-show {
+  right: 430px;
+}
diff --git a/frontend/Skyeye-sys-ui/src/views/home/index.vue b/frontend/Skyeye-sys-ui/src/views/home/index.vue
index 7ef1f60..3eae45f 100644
--- a/frontend/Skyeye-sys-ui/src/views/home/index.vue
+++ b/frontend/Skyeye-sys-ui/src/views/home/index.vue
@@ -37,6 +37,7 @@
       ref="twinSituation"
       v-if="menus.situation.active"
       :visible.sync="menus.situation.active"
+      @sar-change="sarChange"
     ></twin-situation>
     <task-manage
       v-if="menus.taskManage.active"
@@ -58,8 +59,11 @@
       v-if="menus.userList.active"
       :visible.sync="menus.userList.active"
     ></user-list>
-    <info-bar v-if="menus.situation.active || menus.taskManage.active" />
 
+    <info-bar
+      :class="{ 'info-bar-show': moveInfoBar }"
+      v-if="menus.situation.active || menus.taskManage.active"
+    />
     <!--  遮罩  -->
     <!-- <dt-loading :visible="loadingCount > 0"></dt-loading> -->
   </div>