飞行控制页面优化、解决拖拽导致文本框不能输入问题

src/views/demo/workmanagement/flightoperation/index.vue

@@ -172,7 +172,7 @@
     console.log(value);
     cameraType.value = value;
   };
-  const msgData = ref();
+  const msgData = ref({});
   const changeSelect = async (value?: any) => {
     // 页面初始化
     // 机场直播
@@ -211,9 +211,6 @@
           airPort.value.latitude = rs.data.latitude;
           airPort.value.longitude = rs.data.longitude;
         }
-        // relative_alternate_land_point 都是0
-        // self_converge_coordinate 飞不飞没什么变化
-        // alternate_land_point 都是0
         if (topic == topicUAVUrl) {
           if (rs.data.latitude && rs.data.longitude) {
             uavTrack.value = rs.data;

src/views/demo/workmanagement/flightoperation/src/AirportInformation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="airport-information" v-if="airportVal">
+  <div class="airport-information">
     <div class="title"
       >机场信息：<span v-if="flighttask_step_code">
         <template v-if="flighttask_step_code == 0">作业准备中</template>
@@ -16,8 +16,6 @@
     <div class="content">
       <div class="content-title">
         {{ time }}
-        <!-- 获取不到摄像头的内容 -->
-        <!-- <span>机场摄像头未开</span> -->
       </div>
       <div class="content-item">
         <div class="item-div" title="风速">
@@ -68,9 +66,6 @@
           @click="emits('changeLive')"
           >机场直播</a-button
         >
-        <!-- <a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
-          >远程调试</a-button
-        > -->
       </div>
     </div>
   </div>
@@ -118,6 +113,12 @@
         // console.log(val);
         flighttask_step_code.value = val.message.data.flighttask_step_code;
         time.value = timestampToFormattedDate(val.message.timestamp);
+      } else if (
+        val.topic == 'thing/product/' + airPort.sn + '/osd' &&
+        val.message.data.drone_charge_state
+      ) {
+        airportVal.value = val.message.data;
+        time.value = timestampToFormattedDate(val.message.timestamp);
       }
     },
   );

src/views/demo/workmanagement/flightoperation/src/AirportLive.vue

@@ -93,6 +93,7 @@
   };
   const stopTid = buildGUID();
   const closeLive = () => {
+    emits('changeAirportLive');
     const querys = {
       bid: buildGUID(),
       method: 'live_stop_push',
@@ -103,7 +104,6 @@
       },
     };
     servicesTopic(querys);
-    emits('changeAirportLive');
   };
   const reloadLive = () => {
     player.src(live_info.url + liveCode.value + '.flv');

src/views/demo/workmanagement/flightoperation/src/FlightControl.vue

@@ -45,32 +45,76 @@
         <div class="content-info">
           <div class="info-item">
             <!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
-            <div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up')">
-              <img src="@/assets/images/flightoperation/top.png" alt="" />
+            <div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up', '上升')">
+              <img
+                src="@/assets/images/flightoperation/top-active.png"
+                alt=""
+                v-if="selectName == '上升'"
+              />
+              <img src="@/assets/images/flightoperation/top.png" alt="" v-else />
             </div>
-            <div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up')">
-              <img src="@/assets/images/flightoperation/right.png" alt="" />
+            <div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up', '右旋转')">
+              <img
+                src="@/assets/images/flightoperation/right-active.png"
+                alt=""
+                v-if="selectName == '右旋转'"
+              />
+              <img src="@/assets/images/flightoperation/right.png" alt="" v-else />
             </div>
-            <div class="info-item-bottom" title="下降" @click="changeDRC('throttle', 'down')">
-              <img src="@/assets/images/flightoperation/bottom.png" alt="" />
+            <div
+              class="info-item-bottom"
+              title="下降"
+              @click="changeDRC('throttle', 'down', '下降')"
+            >
+              <img
+                src="@/assets/images/flightoperation/bottom-active.png"
+                alt=""
+                v-if="selectName == '下降'"
+              />
+              <img src="@/assets/images/flightoperation/bottom.png" alt="" v-else />
             </div>
-            <div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down')">
-              <img src="@/assets/images/flightoperation/left.png" alt="" />
+            <div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down', '左旋转')">
+              <img
+                src="@/assets/images/flightoperation/left-active.png"
+                alt=""
+                v-if="selectName == '左旋转'"
+              />
+              <img src="@/assets/images/flightoperation/left.png" alt="" v-else />
             </div>
           </div>
           <div class="info-item">
             <!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
-            <div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up')">
-              <img src="@/assets/images/flightoperation/top.png" alt="" />
+            <div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up', '前进')">
+              <img
+                src="@/assets/images/flightoperation/top-active.png"
+                alt=""
+                v-if="selectName == '前进'"
+              />
+              <img src="@/assets/images/flightoperation/top.png" alt="" v-else />
             </div>
-            <div class="info-item-right" title="右移" @click="changeDRC('roll', 'up')">
-              <img src="@/assets/images/flightoperation/right.png" alt="" />
+            <div class="info-item-right" title="右移" @click="changeDRC('roll', 'up', '右移')">
+              <img
+                src="@/assets/images/flightoperation/right-active.png"
+                alt=""
+                v-if="selectName == '右移'"
+              />
+              <img src="@/assets/images/flightoperation/right.png" alt="" v-else />
             </div>
-            <div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down')">
-              <img src="@/assets/images/flightoperation/bottom.png" alt="" />
+            <div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down', '后退')">
+              <img
+                src="@/assets/images/flightoperation/bottom-active.png"
+                alt=""
+                v-if="selectName == '后退'"
+              />
+              <img src="@/assets/images/flightoperation/bottom.png" alt="" v-else />
             </div>
-            <div class="info-item-left" title="左移" @click="changeDRC('roll', 'down')">
-              <img src="@/assets/images/flightoperation/left.png" alt="" />
+            <div class="info-item-left" title="左移" @click="changeDRC('roll', 'down', '左移')">
+              <img
+                src="@/assets/images/flightoperation/left-active.png"
+                alt=""
+                v-if="selectName == '左移'"
+              />
+              <img src="@/assets/images/flightoperation/left.png" alt="" v-else />
             </div>
           </div>
         </div>
@@ -129,6 +173,7 @@
   const airportVal: any = ref({
     mode_code: 0,
   });
+  const selectName = ref('');
   const bid = buildGUID();
   //修改redis用户锁
   const changeRedisUser = (val: boolean) => {
@@ -153,7 +198,7 @@
   // 一键起飞
   const takeOff = () => {
     if (isLocked.value) {
-      createMessage.success('当前有用户正在操作，请稍后再试');
+      createMessage.warning('当前有用户正在操作，请稍后再试');
       return;
     }
 
@@ -166,7 +211,7 @@
     //   createConnection();
     // }
     if (isLocked.value) {
-      createMessage.success('当前有用户正在操作，请稍后再试');
+      createMessage.warning('当前有用户正在操作，请稍后再试');
       return;
     }
     if (flightGrab.value) {
@@ -212,11 +257,16 @@
     });
   };
   const seq = ref(1);
-  const changeDRC = (type, value) => {
+  const changeDRC = (type, value, name) => {
+    selectName.value = name;
+    setTimeout(() => {
+      selectName.value = '';
+    }, 2000);
     if (!modeEnter.value) {
       createMessage.warning('请先进入指令飞行控制');
       return;
     }
+    createMessage.info(name + '指令已发送');
     seq.value = seq.value + 1;
     let data = {
       roll: 1024,
@@ -449,8 +499,6 @@
           width: 36px;
         }
         .info-item-top {
-          width: 40px;
-          height: 40px;
           position: absolute;
           top: 8px;
           left: 20px;
@@ -460,16 +508,12 @@
           }
         }
         .info-item-right {
-          width: 40px;
-          height: 40px;
           position: absolute;
           top: 30px;
-          right: 33px;
+          right: 36px;
           cursor: pointer;
         }
         .info-item-bottom {
-          width: 40px;
-          height: 40px;
           position: absolute;
           bottom: 0px;
           left: 21px;
@@ -479,11 +523,9 @@
           }
         }
         .info-item-left {
-          width: 40px;
-          height: 40px;
           position: absolute;
           top: 30px;
-          left: 0px;
+          left: -2px;
           cursor: pointer;
         }
       }

src/views/demo/workmanagement/flightoperation/src/FlyToForm.vue

@@ -7,6 +7,7 @@
     :isActive="true"
     :parentLimitation="true"
     :isResizable="false"
+    @clicked="activateEv"
   >
     <div class="takeoff-information">
       <div class="title"
@@ -84,6 +85,9 @@
       },
     ],
   });
+  const activateEv = (e) => {
+    e.target.focus();
+  };
   const takeOff = () => {
     if (
       data.points[0].latitude == null ||

src/views/demo/workmanagement/flightoperation/src/LoadControl.vue

@@ -243,7 +243,7 @@
     //   createConnection();
     // }
     if (isLocked.value) {
-      createMessage.success('当前有用户正在操作，请稍后再试');
+      createMessage.warning('当前有用户正在操作，请稍后再试');
       return;
     }
     if (grabBtn.value) {

src/views/demo/workmanagement/flightoperation/src/TakeOffForm.vue

@@ -7,6 +7,7 @@
     :isActive="true"
     :parentLimitation="true"
     :isResizable="false"
+    @clicked="activateEv"
   >
     <div class="takeoff-information">
       <div class="title"
@@ -31,8 +32,11 @@
         </div>
         <div class="content-edit">
           目标点高度
-          <div>
+          <div style="display: flex; flex-direction: column; align-items: center">
             <a-input v-model:value="data.target_height" />
+            <span style="margin-top: 4px; font-size: 12px; color: #f2762d"
+              >右击目标点，选择按轴平移，拖动Z轴</span
+            >
           </div>
         </div>
         <div class="content-edit">
@@ -201,6 +205,9 @@
       }
     },
   );
+  const activateEv = (e) => {
+    e.target.focus();
+  };
   const takeOff = () => {
     if (
       data.target_latitude == null ||