修改执行中任务的面板交互逻辑

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.id = data.length ? data[0].id : 1
-          this.detailUav.visible = true
+          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 = []

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;
+    width: 410px;
-    position: fixed;
+    // 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;

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
+                <div class="execute-info">
-                  class="execute-info"
-                  @click.stop="openTaskLineDetail(item)"
-                >
                   <span
                     class="execute-type-icon"
                     :class="'execute-state-' + item.status"
@@ -344,6 +341,7 @@
     </right-slide>
 
     <!--  详情  -->
+    <right-slide class="detail-uav-wrap" v-if="detailUav.visible">
       <dt-card
         :class="{
           'detail-uav': true,
@@ -451,6 +449,7 @@
           </div>
         </div>
       </dt-card>
+    </right-slide>
 
     <dt-dialog
       :title="taskLineDetail.title"

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() {

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;
+}

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>