汉化机场操作

Web/package-lock.json

@@ -25,6 +25,7 @@
         "vuex": "^4.1.0"
       },
       "devDependencies": {
+        "@types/lodash": "^4.17.7",
         "@types/node": "^18.15.0",
         "@vitejs/plugin-vue": "^5.0.0",
         "sass": "^1.77.0",
@@ -727,6 +728,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "18.19.42",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.19.42.tgz",

Web/package.json

@@ -28,6 +28,7 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.7",
     "@types/node": "^18.15.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "sass": "^1.77.0",
@@ -35,4 +36,4 @@
     "vite": "5.3.0",
     "vite-plugin-vconsole": "^2.1.0"
   }
-}
+}

Web/src/components/airport/icons/info_selected.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725866227895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64.64 128.32v680.896h887.36V128.32H64.64z m815.68 609.152H136.32V200h744v537.472z m-655.36 130.752h566.72v71.68H224.96v-71.68z" fill="#448ef7" p-id="1470"></path><path d="M262.592 428.16l129.408-118.912 48.512 52.8L311.04 480.96l-48.512-52.8z m277.12 121.792l129.408-118.976 48.512 52.8-129.408 118.912-48.512-52.736z m-209.536 4.16l266.368-244.864 48.512 52.8-266.368 244.8-48.512-52.736z" fill="#448ef7" p-id="1471"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725866227895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64.64 128.32v680.896h887.36V128.32H64.64z m815.68 609.152H136.32V200h744v537.472z m-655.36 130.752h566.72v71.68H224.96v-71.68z" fill="#00aeff" p-id="1470"></path><path d="M262.592 428.16l129.408-118.912 48.512 52.8L311.04 480.96l-48.512-52.8z m277.12 121.792l129.408-118.976 48.512 52.8-129.408 118.912-48.512-52.736z m-209.536 4.16l266.368-244.864 48.512 52.8-266.368 244.8-48.512-52.736z" fill="#448ef7" p-id="1471"></path></svg>

Web/src/components/airport/index.vue

@@ -70,10 +70,11 @@
         </div>
       </div>
       <div class="content-info-right">
-        <a-button type="text"
+        <a-button style="padding: 0;" type="text"
           :disabled="!(dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected)"
           @click.stop="onClickLookInfo">
-          <img :src="infoSrc">
+          <img :src="infoSelectedSrc" v-if="osdVisible.visible && osdVisible.sn === dock.sn">
+          <img :src="infoSrc" v-else>
         </a-button>
       </div>
     </div>
@@ -105,6 +106,7 @@ const store = useMyStore()
 const deviceInfo = computed(() => store.state.deviceState.deviceInfo);
 const dockInfo = computed(() => store.state.deviceState.dockInfo);
 const hmsInfo = computed(() => store.state.hmsInfo);
+const osdVisible = computed(() => store.state.osdVisible);
 
 // 飞行器告警信息
 const aircraftLogInfo = computed(() => {
@@ -229,8 +231,8 @@ const hangarLogInfo = computed(() => {
       align-items: center;
 
       img {
-        width: 14px;
-        height: 14px;
+        width: 16px;
+        height: 16px;
       }
     }
   }

Web/src/components/g-map/DeviceSettingBox.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="device-setting-wrapper">
-    <div class="device-setting-header">Device Property Set</div>
+    <div class="device-setting-header">
+      设备属性设置
+    </div>
     <div class="device-setting-box">
       <!-- 飞行器夜航灯 -->
       <div class="control-setting-item">
@@ -9,19 +11,18 @@
           <div class="item-status">{{ deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].value }}</div>
         </div>
         <div class="control-setting-item-right">
-          <DeviceSettingPopover
-            :visible="deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].popConfirm.visible"
+          <DeviceSettingPopover :visible="deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].popConfirm.visible"
             :loading="deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].popConfirm.loading"
             @confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)"
-            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)"
-          >
+            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)">
             <template #formContent>
               <div class="form-content">
                 <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].label }}:</span>
-                <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.nightLightsState" />
+                <a-switch checked-children="开" un-checked-children="关"
+                  v-model:checked="deviceSettingFormModel.nightLightsState" />
               </div>
             </template>
-            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)">Edit</a>
+            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.NIGHT_LIGHTS_MODE_SET].settingKey)">编辑</a>
           </DeviceSettingPopover>
         </div>
       </div>
@@ -32,12 +33,10 @@
           <div class="item-status">{{ deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].value }}</div>
         </div>
         <div class="control-setting-item-right">
-          <DeviceSettingPopover
-            :visible="deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].popConfirm.visible"
+          <DeviceSettingPopover :visible="deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].popConfirm.visible"
             :loading="deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].popConfirm.loading"
             @confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)"
-            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)"
-          >
+            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)">
             <template #formContent>
               <div class="form-content">
                 <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].label }}:</span>
@@ -45,7 +44,7 @@
                 m
               </div>
             </template>
-            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)">Edit</a>
+            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.HEIGHT_LIMIT_SET].settingKey)">编辑</a>
           </DeviceSettingPopover>
         </div>
       </div>
@@ -56,21 +55,21 @@
           <div class="item-status">{{ deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].value }}</div>
         </div>
         <div class="control-setting-item-right">
-          <DeviceSettingPopover
-            :visible="deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].popConfirm.visible"
+          <DeviceSettingPopover :visible="deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].popConfirm.visible"
             :loading="deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].popConfirm.loading"
             @confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)"
-            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)"
-          >
+            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)">
             <template #formContent>
               <div class="form-content">
                 <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].label }}:</span>
-                <a-switch style="margin-right: 10px;" checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.distanceLimitStatus.state" />
-                <a-input-number v-model:value="deviceSettingFormModel.distanceLimitStatus.distanceLimit" :min="15" :max="8000" />
+                <a-switch style="margin-right: 10px;" checked-children="开" un-checked-children="关"
+                  v-model:checked="deviceSettingFormModel.distanceLimitStatus.state" />
+                <a-input-number v-model:value="deviceSettingFormModel.distanceLimitStatus.distanceLimit" :min="15"
+                  :max="8000" />
                 m
               </div>
             </template>
-            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)">Edit</a>
+            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.DISTANCE_LIMIT_SET].settingKey)">编辑</a>
           </DeviceSettingPopover>
         </div>
       </div>
@@ -85,15 +84,17 @@
             :visible="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].popConfirm.visible"
             :loading="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].popConfirm.loading"
             @confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)"
-            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)"
-          >
+            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)">
             <template #formContent>
               <div class="form-content">
-                <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].label }}:</span>
-                <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.obstacleAvoidanceHorizon" />
+                <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].label
+                  }}:</span>
+                <a-switch checked-children="开" un-checked-children="关"
+                  v-model:checked="deviceSettingFormModel.obstacleAvoidanceHorizon" />
               </div>
             </template>
-            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)">Edit</a>
+            <a
+              @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_HORIZON].settingKey)">编辑</a>
           </DeviceSettingPopover>
         </div>
       </div>
@@ -108,15 +109,17 @@
             :visible="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].popConfirm.visible"
             :loading="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].popConfirm.loading"
             @confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)"
-            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)"
-          >
+            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)">
             <template #formContent>
               <div class="form-content">
-                <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].label }}:</span>
-                <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.obstacleAvoidanceUpside" />
+                <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].label
+                  }}:</span>
+                <a-switch checked-children="开" un-checked-children="关"
+                  v-model:checked="deviceSettingFormModel.obstacleAvoidanceUpside" />
               </div>
             </template>
-            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)">Edit</a>
+            <a
+              @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_UPSIDE].settingKey)">编辑</a>
           </DeviceSettingPopover>
         </div>
       </div>
@@ -131,15 +134,17 @@
             :visible="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].popConfirm.visible"
             :loading="deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].popConfirm.loading"
             @confirm="onConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)"
-            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)"
-          >
+            @cancel="onCancel(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)">
             <template #formContent>
               <div class="form-content">
-                <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].label }}:</span>
-                <a-switch checked-children="开" un-checked-children="关" v-model:checked="deviceSettingFormModel.obstacleAvoidanceDownside" />
+                <span class="form-label">{{ deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].label
+                  }}:</span>
+                <a-switch checked-children="开" un-checked-children="关"
+                  v-model:checked="deviceSettingFormModel.obstacleAvoidanceDownside" />
               </div>
             </template>
-            <a @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)">Edit</a>
+            <a
+              @click="onShowPopConfirm(deviceSetting[DeviceSettingKeyEnum.OBSTACLE_AVOIDANCE_DOWNSIDE].settingKey)">编辑</a>
           </DeviceSettingPopover>
         </div>
       </div>
@@ -176,16 +181,16 @@ watch(() => props.deviceInfo, (value) => {
   deep: true
 })
 
-function onShowPopConfirm (settingKey: DeviceSettingKeyEnum) {
+function onShowPopConfirm(settingKey: DeviceSettingKeyEnum) {
   deviceSetting.value[settingKey].popConfirm.visible = true
   deviceSettingFormModel.value = cloneDeep(deviceSettingFormModelFromOsd.value)
 }
 
-function onCancel (settingKey: DeviceSettingKeyEnum) {
+function onCancel(settingKey: DeviceSettingKeyEnum) {
   deviceSetting.value[settingKey].popConfirm.visible = false
 }
 
-async function onConfirm (settingKey: DeviceSettingKeyEnum) {
+async function onConfirm(settingKey: DeviceSettingKeyEnum) {
   deviceSetting.value[settingKey].popConfirm.loading = true
   const body = genDevicePropsBySettingKey(settingKey, deviceSettingFormModel.value)
   await setDeviceProps(props.sn, body)
@@ -202,22 +207,22 @@ const {
 </script>
 
 <style lang='scss' scoped>
-.device-setting-wrapper{
+.device-setting-wrapper {
   border-bottom: 1px solid #515151;
 
-  .device-setting-header{
+  .device-setting-header {
     font-size: 14px;
     font-weight: 600;
     padding: 10px 10px 0px;
   }
 
-  .device-setting-box{
+  .device-setting-box {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 4px 10px;
 
-    .control-setting-item{
+    .control-setting-item {
       width: 220px;
       height: 58px;
       display: flex;
@@ -227,11 +232,11 @@ const {
       margin: 4px 0;
       padding: 0 8px;
 
-      .control-setting-item-left{
+      .control-setting-item-left {
         display: flex;
         flex-direction: column;
 
-        .item-label{
+        .item-label {
           font-weight: 700;
         }
       }

Web/src/components/g-map/DockControlPanel.vue

@@ -1,43 +1,49 @@
 <template>
-<div class="dock-control-panel">
-  <!-- title -->
-  <div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between">
-    <span>Device Control<span class="fz12 pl15">{{ props.sn}}</span></span>
-    <span @click="closeControlPanel">
-    <CloseOutlined />
-    </span>
-  </div>
-  <!-- setting -->
-  <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox>
-  <!-- cmd -->
-  <div class="control-cmd-wrapper">
-    <div class="control-cmd-header">
-      Device Remote Debug
-      <a-switch class="debug-btn" checked-children="开" un-checked-children="关" v-model:checked="debugStatus" @change="onDeviceStatusChange"/>
+  <div class="dock-control-panel">
+    <!-- title -->
+    <div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between">
+      <span>
+        <span>
+          设备控制
+        </span>
+        <span class="fz12 pl15">
+          {{ props.sn }}
+        </span>
+      </span>
+      <span style="cursor: pointer;" @click="closeControlPanel">
+        <CloseOutlined />
+      </span>
     </div>
-    <div class="control-cmd-box">
-      <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
-        <div class="control-cmd-item-left">
+    <!-- setting -->
+    <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox>
+    <!-- cmd -->
+    <div class="control-cmd-wrapper">
+      <div class="control-cmd-header">
+        设备远程调试
+        <a-switch class="debug-btn" checked-children="开" un-checked-children="关" v-model:checked="debugStatus"
+          @change="onDeviceStatusChange" />
+      </div>
+      <div class="control-cmd-box">
+        <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
+          <div class="control-cmd-item-left">
             <div class="item-label">{{ cmdItem.label }}</div>
             <div class="item-status">{{ cmdItem.status }}</div>
-        </div>
-        <div class="control-cmd-item-right">
-            <a-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small" type="primary" @click="sendControlCmd(cmdItem, index)">
-            {{ cmdItem.operateText }}
+          </div>
+          <div class="control-cmd-item-right">
+            <a-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small"
+              type="primary" @click="sendControlCmd(cmdItem, index)">
+              {{ cmdItem.operateText }}
             </a-button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
-
 </template>
 
 <script setup lang="ts">
 import { defineProps, defineEmits, ref, watch } from 'vue'
-import {
-  CloseOutlined
-} from '@ant-design/icons-vue'
+import { CloseOutlined } from '@ant-design/icons-vue'
 import { useDockControl } from './use-dock-control'
 import { DeviceInfoType, EDockModeCode } from '/@/types/device'
 import { cmdList as baseCmdList, DeviceCmdItem } from '/@/types/device-cmd'
@@ -77,11 +83,11 @@ watch(() => props.deviceInfo, (value) => {
 const debugStatus = ref(props.deviceInfo.dock?.basic_osd?.mode_code === EDockModeCode.Remote_Debugging)
 const emit = defineEmits(['close-control-panel'])
 
-function closeControlPanel () {
+function closeControlPanel() {
   emit('close-control-panel', props.sn, debugStatus.value)
 }
 
-async function onDeviceStatusChange (status: boolean) {
+async function onDeviceStatusChange(status: boolean) {
   let result = false
   if (status) {
     result = await dockDebugOnOff(props.sn, true)
@@ -102,7 +108,7 @@ const {
   dockDebugOnOff
 } = useDockControl()
 
-async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
+async function sendControlCmd(cmdItem: DeviceCmdItem, index: number) {
   const success = await sendDockControlCmd({
     sn: props.sn,
     cmd: cmdItem.cmdKey,
@@ -116,7 +122,7 @@ async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
 </script>
 
 <style lang='scss' scoped>
-.dock-control-panel{
+.dock-control-panel {
   position: absolute;
   left: calc(100% + 10px);
   top: 0px;
@@ -126,28 +132,30 @@ async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
   color: #fff;
   border-radius: 2px;
 
-  .dock-control-panel-header{
+  .dock-control-panel-header {
+    padding: 10px;
     border-bottom: 1px solid #515151;
   }
 
-  .control-cmd-wrapper{
-    .control-cmd-header{
+  .control-cmd-wrapper {
+    .control-cmd-header {
       font-size: 14px;
       font-weight: 600;
       padding: 10px 10px 0px;
 
-      .debug-btn{
+      .debug-btn {
         margin-left: 10px;
-        border:1px solid #585858;
+        border: 1px solid #585858;
       }
     }
 
-    .control-cmd-box{
+    .control-cmd-box {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       padding: 4px 10px;
-      .control-cmd-item{
+
+      .control-cmd-item {
         width: 220px;
         height: 58px;
         display: flex;
@@ -157,11 +165,11 @@ async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
         margin: 4px 0;
         padding: 0 8px;
 
-        .control-cmd-item-left{
+        .control-cmd-item-left {
           display: flex;
           flex-direction: column;
 
-          .item-label{
+          .item-label {
             font-weight: 700;
           }
         }

Web/src/components/g-map/DroneControlPanel.vue

@@ -247,7 +247,7 @@
       </div>
     </div>
     <!-- 信息提示 -->
-    <DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel>
+    <!-- <DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel> -->
   </div>
 </template>
 

Web/src/components/onLineDevice/icons/info_selected.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725866227895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64.64 128.32v680.896h887.36V128.32H64.64z m815.68 609.152H136.32V200h744v537.472z m-655.36 130.752h566.72v71.68H224.96v-71.68z" fill="#448ef7" p-id="1470"></path><path d="M262.592 428.16l129.408-118.912 48.512 52.8L311.04 480.96l-48.512-52.8z m277.12 121.792l129.408-118.976 48.512 52.8-129.408 118.912-48.512-52.736z m-209.536 4.16l266.368-244.864 48.512 52.8-266.368 244.8-48.512-52.736z" fill="#448ef7" p-id="1471"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725866227895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64.64 128.32v680.896h887.36V128.32H64.64z m815.68 609.152H136.32V200h744v537.472z m-655.36 130.752h566.72v71.68H224.96v-71.68z" fill="#00aeff" p-id="1470"></path><path d="M262.592 428.16l129.408-118.912 48.512 52.8L311.04 480.96l-48.512-52.8z m277.12 121.792l129.408-118.976 48.512 52.8-129.408 118.912-48.512-52.736z m-209.536 4.16l266.368-244.864 48.512 52.8-266.368 244.8-48.512-52.736z" fill="#448ef7" p-id="1471"></path></svg>

Web/src/components/onLineDevice/index.vue

@@ -53,10 +53,11 @@
         </div>
       </div>
       <div class="content-info-right">
-        <a-button type="text"
+        <a-button style="padding: 0;" type="text"
           :disabled="!(deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected)"
           @click.stop="onClickLookInfo">
-          <img :src="infoSrc">
+          <img :src="infoSelectedSrc" v-if="osdVisible.visible && osdVisible.sn === device.sn">
+          <img :src="infoSrc" v-else>
         </a-button>
       </div>
     </div>
@@ -89,6 +90,7 @@ const props = withDefaults(defineProps<Props>(), {
 const store = useMyStore()
 
 const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
+const osdVisible = computed(() => store.state.osdVisible);
 
 // 设备原因
 const deviceReason = computed(() => {
@@ -198,8 +200,8 @@ const capacity = computed(() => {
       align-items: center;
 
       img {
-        width: 14px;
-        height: 14px;
+        width: 16px;
+        height: 16px;
       }
     }
   }