From 0ab7e0941d27bbf2ce867116c3f91e65735d206c Mon Sep 17 00:00:00 2001
From: helloxujingliang <3225043@qq.com>
Date: Tue, 1 Jul 2025 14:17:05 +0800
Subject: [PATCH 1/6] merge

---
 src/views/demo/workmanagement/workplan/components/map.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/demo/workmanagement/workplan/components/map.vue b/src/views/demo/workmanagement/workplan/components/map.vue
index aaacbef..d31b066 100644
--- a/src/views/demo/workmanagement/workplan/components/map.vue
+++ b/src/views/demo/workmanagement/workplan/components/map.vue
@@ -58,7 +58,6 @@ watch(
 )
 
 
-
 // 航线预览：生成点
 const generatePreviewPoint = (placemark)=>{
 

From 08bdfaa7dcb5060737ed1b361570a66e3aff3262 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Wed, 9 Jul 2025 15:31:07 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=B0=83=E6=8E=A7=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/Airport/DeviceControl/index.vue    | 380 ++++++++++++++++--
 .../device/Airport/DeviceControl/util.ts      |  56 +++
 2 files changed, 408 insertions(+), 28 deletions(-)
 create mode 100644 src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts

diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
index 84738e6..a2ecdbc 100644
--- a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
@@ -1,37 +1,309 @@
 <template>
-  <div style="margin-bottom: 10px;">
-    <div style="display: flex;align-items: center;">
-      <span style="margin-right: 10px;">远程调试</span>
+  <div class="open-control-div">
+    <div class="control-content">
+      <span class="open-title">远程调试</span>
       <a-switch :checked="props.deviceInfoList[props.controlSN].mode_code == 2" @change="openDebug"/>
     </div>
   </div>
-  <div style="margin-bottom: 10px;">机场控制</div>
-  <div style="margin-bottom: 20px;">
-    <div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
-      <div style="display: flex;align-items: center;">
-        <div :style="`width: 21px;height: 21px;background-color: ${props.deviceInfoList[props.controlSN].cover_state == 1? 'green': 'red'};margin-right: 8px;`"></div>
+  <div class="setting-control-title">机场控制</div>
+  <div class="setting-control-list">
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="tabler:drone" style="font-size: 21px;"/>
+        </div>
         <div>
-          <div style="line-height: 22px;">{{getCoverState(props.deviceInfoList[props.controlSN].cover_state)}}</div>
-          <div style="line-height: 22px;">舱盖</div>
+          <div class="show-span">
+            {{
+              modeCodeOptions[props.deviceInfoList[props.controlSN].mode_code]
+            }}
+          </div>
+          <div class="show-span">机场系统</div>
         </div>
       </div>
-      <div style="display: flex;align-items: center;">
-        <a-button style="width: 70px;height: 30px;" @click="openCoverState" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}</a-button>
+      <div class="button-div">
+        <a-button class="control-button" @click="changeState('device_reboot')" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">重启</a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="tabler:capture" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              getCoverState(props.deviceInfoList[props.controlSN].cover_state)
+            }}
+          </div>
+          <div class="show-span">舱盖</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeState(props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close')"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          {{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="streamline:travel-hotel-air-conditioner-heating-ac-air-hvac-cool-cooling-cold-hot-conditioning" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              props.deviceInfoList[props.controlSN].air_conditioner && airConditionerStateOptions[props.deviceInfoList[props.controlSN].air_conditioner.air_conditioner_state]
+            }}
+          </div>
+          <div class="show-span">空调</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button 
+          v-if="props.deviceInfoList[props.controlSN]?.air_conditioner.air_conditioner_state != 0"
+          class="control-button"
+          @click="changeState('air_conditioner_mode_switch',0)"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          停止
+        </a-button>
+        <a-dropdown v-else placement="bottom">
+          <a-button class="control-button">开启</a-button>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item @click="changeState('air_conditioner_mode_switch',1)">制冷</a-menu-item>
+              <a-menu-item @click="changeState('air_conditioner_mode_switch',2)">制热</a-menu-item>
+              <a-menu-item @click="changeState('air_conditioner_mode_switch',3)">除湿</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="material-symbols:volume-off" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              silentModeOptions[props.deviceInfoList[props.controlSN].silent_mode]
+            }}
+          </div>
+          <div class="show-span">静音模式</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click=""
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          {{props.deviceInfoList[props.controlSN].silent_mode == 0? '开启': '关闭'}}
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="mdi:alarm-light-outline" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              alarmStateOptions[props.deviceInfoList[props.controlSN].alarm_state]
+            }}
+          </div>
+          <div class="show-span">机场声光报警</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeState('alarm_state_switch',props.deviceInfoList[props.controlSN].alarm_state == 0? 1: 0)"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          {{props.deviceInfoList[props.controlSN].alarm_state == 0? '开启': '关闭'}}
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              props.deviceInfoList[props.controlSN].storage && 
+                `${(props.deviceInfoList[props.controlSN].storage.used / 1000 / 1024).toFixed(1)}/${(props.deviceInfoList[props.controlSN].storage.total / 1000 / 1024).toFixed(1)}GB`
+            }}
+          </div>
+          <div class="show-span">机场存储</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeState('device_format')"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          格式化
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="icon-park-outline:storage-card-one" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">--</div>
+          <div class="show-span">机场增强图传</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click=""
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          设置
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="carbon:certificate-check" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">解禁证书</div>
+          <div class="show-span">限飞解禁证书</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click=""
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          设置
+        </a-button>
       </div>
     </div>
   </div>
-  <div style="margin-bottom: 10px;">飞行器控制</div>
-  <div>
-    <div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
-      <div style="display: flex;align-items: center;">
-        <div :style="`width: 21px;height: 21px;background-color: ${props.deviceInfoList[props.controlSN].sub_device.device_online_status == 1? 'green': 'red'};margin-right: 8px;`"></div>
+  <div class="setting-control-title">飞行器控制</div>
+  <div class="setting-control-list">
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="material-symbols:power-settings-new" style="font-size: 21px;"/>
+        </div>
         <div>
-          <div style="line-height: 22px;">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? "关机": "开机"}}</div>
-          <div style="line-height: 22px;">飞行器电源</div>
+          <div class="show-span">
+            {{
+              deviceOnlineStatusOptions[props.deviceInfoList[props.controlSN].sub_device.device_online_status]
+            }}
+          </div>
+          <div class="show-span">飞行器电源</div>
         </div>
       </div>
-      <div style="display: flex;align-items: center;">
-        <a-button style="width: 70px;height: 30px;" @click="openDeviceOnline" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}</a-button>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeDeviceState(props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close')"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          {{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="mdi:battery-high" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              droneChargeStateOptions[props.deviceInfoList[props.controlSN].drone_charge_state.state]
+            }}
+          </div>
+          <div class="show-span">飞行器充电</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeDeviceState(props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? 'charge_open': 'charge_close')"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          {{props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? '充电': '停止'}}
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="mdi:signal-4g" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              fourgLinkStateOptions[props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"]]
+            }}
+          </div>
+          <div class="show-span">增强图传</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN].wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          {{props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"] == 0? '开启': '关闭'}}
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            --
+          </div>
+          <div class="show-span">飞行器存储</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click="changeDeviceState('drone_format')"
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          格式化
+        </a-button>
+      </div>
+    </div>
+    <div class="control-item">
+      <div class="info-div">
+        <div class="icon">
+          <Icon icon="ph:sim-card-duotone" style="font-size: 21px;"/>
+        </div>
+        <div>
+          <div class="show-span">
+            {{
+              linkWorkmodeOptions[props.deviceInfoList[props.controlSN].wireless_link.link_workmode]
+            }}
+          </div>
+          <div class="show-span">飞行器增强图传</div>
+        </div>
+      </div>
+      <div class="button-div">
+        <a-button
+          class="control-button"
+          @click=""
+          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
+          设置
+        </a-button>
       </div>
     </div>
   </div>
@@ -41,6 +313,9 @@
 import { defineProps } from "vue"
 import { clientPublish } from '@/utils/mqtt'
 import { buildGUID } from '@/utils/uuid';
+import Icon from '@/components/Icon/Icon.vue';
+import { modeCodeOptions, deviceOnlineStatusOptions, coverStateOptions, airConditionerStateOptions, silentModeOptions,
+   alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions } from './util'
 const props = defineProps(['deviceInfoList', 'controlSN'])
 
 const openDebug = () => {
@@ -60,28 +335,77 @@ const getCoverState = (value) => {
   }
   return options[value]
 }
-const openCoverState = () => {
+const changeState = (method,action?) => {
   let publishUrl = `thing/product/${props.controlSN}/services`
   let params = {
-    method: props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close',
+    method: method,
     bid: buildGUID(),
     tid: buildGUID(),
     timestamp: new Date().getTime(),
-    data: null,
+    data: action? { action }: null,
   };
   clientPublish(publishUrl,params)
 }
-const openDeviceOnline = () => {
+const changeDeviceState = (method, action?, type?) => {
   let publishUrl = `thing/product/${props.controlSN}/services`
   let params = {
-    method: props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close',
+    method,
     bid: buildGUID(),
     tid: buildGUID(),
     timestamp: new Date().getTime(),
-    data: null,
+    data: type? { [type]: action }: action? { action }: null,
   };
   clientPublish(publishUrl,params)
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.open-control-div{
+  margin-bottom: 10px;
+  .control-content{
+    display: flex;
+    align-items: center;
+    .open-title{
+      margin-right: 10px;
+    }
+  }
+}
+.setting-control-title{
+  margin-bottom: 10px;
+}
+.setting-control-list{
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  .control-item{
+    width: 252px;
+    height: 58px;
+    background-color: #f7f9fa;
+    padding-left: 8px;
+    padding-right: 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .info-div{
+    display: flex;
+    align-items: center;
+    .icon{
+      width: 21px;
+      height: 21px;
+      margin-right: 8px;
+    }
+    .show-span{
+      line-height: 22px;
+    }
+  }
+  .button-div{
+    display: flex;
+    align-items: center;
+    .control-button{
+      width: 70px;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts b/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
new file mode 100644
index 0000000..0253b72
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
@@ -0,0 +1,56 @@
+export const modeCodeOptions = {
+  0: '空闲中',
+  1: '现场调试',
+  2: '远程调试',
+  3: '固件升级中',
+  4: '作业中',
+  5: '待标定',
+}
+export const deviceOnlineStatusOptions = {
+  0: '关机',
+  1: '开机'
+}
+export const coverStateOptions = {
+  0: '关闭',
+  1: '打开',
+  2: '半开',
+  3: '舱盖状态异常',
+}
+export const airConditionerStateOptions = {
+  0: '空闲模式(无制冷、制热、除湿等)',
+  1: '制冷模式',
+  2: '制热模式',
+  3: '除湿模式',
+  4: '制冷退出模式',
+  5: '制热退出模式',
+  6: '除湿退出模式',
+  7: '制冷准备模式',
+  8: '制热准备模式',
+  9: '除湿准备模式',
+  10: '风冷准备中',
+  11: '风冷中',
+  12: '风冷退出中',
+  13: '除雾准备中',
+  14: '除雾中',
+  15: '除雾退出中',
+}
+export const silentModeOptions = {
+  0: '非静音模式',
+  1: '静音模式',
+}
+export const alarmStateOptions = {
+  0: '关闭',
+  1: '开启',
+}
+export const droneChargeStateOptions = {
+  0: '空闲',
+  1: '充电中',
+}
+export const fourgLinkStateOptions = {
+  0: '断开',
+  1: '连接',
+}
+export const linkWorkmodeOptions = {
+  0: 'SDR 模式',
+  1: '4G 融合模式',
+}
\ No newline at end of file

From 4608a87a9e2f354a46c46c30542111fde8f66c7f Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Wed, 9 Jul 2025 15:39:00 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=B0=83=E6=8E=A7=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/workmanagement/device/Airport/DeviceControl/index.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
index a2ecdbc..9c343e9 100644
--- a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
@@ -70,7 +70,7 @@
           :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
           停止
         </a-button>
-        <a-dropdown v-else placement="bottom">
+        <a-dropdown v-else placement="bottom" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
           <a-button class="control-button">开启</a-button>
           <template #overlay>
             <a-menu>

From c253ac6aca138d5aa8f719737885239951684ff9 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Wed, 9 Jul 2025 17:30:43 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=BF=90=E7=BB=B4-=E6=9C=BA=E5=9C=BA?=
 =?UTF-8?q?=E8=AF=A6=E7=BB=86=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/Airport/DeviceControl/index.vue    | 105 +++++++++++++++++-
 .../device/Airport/DeviceControl/util.ts      |  26 ++++-
 2 files changed, 124 insertions(+), 7 deletions(-)

diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
index 9c343e9..6a329ed 100644
--- a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
@@ -1,4 +1,78 @@
 <template>
+  <div class="setting-control-title">机场</div>
+  <div class="setting-control-list" style="gap: 0px;">
+    <div class="show-info-item">
+      <div class="info-value">{{ (props.deviceInfoList[props.controlSN].acc_time / 60 / 60 / 24).toFixed(1) }}天</div>
+      <div class="info-label">累计运行时长</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].job_number }}次</div>
+      <div class="info-label">作业架次</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ (props.deviceInfoList[props.controlSN].position_state.gps_number + props.deviceInfoList[props.controlSN].position_state.rtk_number) }}个</div>
+      <div class="info-label">机场搜星</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ sourceTypeOptions[props.deviceInfoList[props.controlSN]?.rtcm_info?.source_type] || '--'}}</div>
+      <div class="info-label">标定状态</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN].working_voltage / 1000).toFixed(1)}V` || '--'}}</div>
+      <div class="info-label">供电电压</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ qualityOptions[props.deviceInfoList[props.controlSN]?.network_state?.quality] || '--'}}</div>
+      <div class="info-label">网络</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ isConfiguredOptions[props.deviceInfoList[props.controlSN]?.alternate_land_point?.is_configured] || '--'}}</div>
+      <div class="info-label">备降点</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">--</div>
+      <div class="info-label">进离场航线</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ airConditionerStateOptions[props.deviceInfoList[props.controlSN]?.air_conditioner?.air_conditioner_state] || '--'}}</div>
+      <div class="info-label">空调状态</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].voltage / 1000).toFixed(1)}V` || '--' }}</div>
+      <div class="info-label">蓄电池电压</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].temperature}℃` || '--' }}</div>
+      <div class="info-label">蓄电池温度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].temperature }}℃</div>
+      <div class="info-label">舱内温度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].humidity }}%RH</div>
+      <div class="info-label">舱内湿度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].environment_temperature }}℃</div>
+      <div class="info-label">舱外温度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ rainfallOptions[props.deviceInfoList[props.controlSN].rainfall] }}</div>
+      <div class="info-label">雨量</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].wind_speed }}m/s</div>
+      <div class="info-label">风速</div>
+    </div>
+  </div>
+  <!-- <div class="setting-control-title">飞行器</div>
+  <div class="setting-control-list" style="gap: 0px;">
+    <div class="show-info-item">
+      <div class="info-value">{{ (props.deviceInfoList[props.controlSN].acc_time / 60 / 60 / 24).toFixed(1) }}天</div>
+      <div class="info-label">累计运行时长</div>
+    </div>
+  </div> -->
   <div class="open-control-div">
     <div class="control-content">
       <span class="open-title">远程调试</span>
@@ -233,9 +307,9 @@
       <div class="button-div">
         <a-button
           class="control-button"
-          @click="changeDeviceState(props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? 'charge_open': 'charge_close')"
+          @click="changeDeviceState(props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? 'charge_open': 'charge_close')"
           :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
-          {{props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? '充电': '停止'}}
+          {{props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? '充电': '停止'}}
         </a-button>
       </div>
     </div>
@@ -247,7 +321,7 @@
         <div>
           <div class="show-span">
             {{
-              fourgLinkStateOptions[props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"]]
+              fourgLinkStateOptions[props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state']]
             }}
           </div>
           <div class="show-span">增强图传</div>
@@ -256,9 +330,9 @@
       <div class="button-div">
         <a-button
           class="control-button"
-          @click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN].wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
+          @click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
           :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
-          {{props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"] == 0? '开启': '关闭'}}
+          {{props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state'] == 0? '开启': '关闭'}}
         </a-button>
       </div>
     </div>
@@ -315,7 +389,8 @@ import { clientPublish } from '@/utils/mqtt'
 import { buildGUID } from '@/utils/uuid';
 import Icon from '@/components/Icon/Icon.vue';
 import { modeCodeOptions, deviceOnlineStatusOptions, coverStateOptions, airConditionerStateOptions, silentModeOptions,
-   alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions } from './util'
+   alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions, sourceTypeOptions, qualityOptions,
+   isConfiguredOptions, rainfallOptions } from './util'
 const props = defineProps(['deviceInfoList', 'controlSN'])
 
 const openDebug = () => {
@@ -407,5 +482,23 @@ const changeDeviceState = (method, action?, type?) => {
       height: 30px;
     }
   }
+  .show-info-item{
+    width: 190px;
+    height: 79px;
+    .info-value{
+      display: flex;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+    }
+    .info-label{
+      display: flex;
+      justify-content: center;
+      font-size: 14px;
+      line-height: 20px;
+      color: rgba(0,0,0,0.8);
+    }
+  }
 }
 </style>
diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts b/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
index 0253b72..f66c9c1 100644
--- a/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
@@ -17,7 +17,7 @@ export const coverStateOptions = {
   3: '舱盖状态异常',
 }
 export const airConditionerStateOptions = {
-  0: '空闲模式(无制冷、制热、除湿等)',
+  0: '空闲模式',
   1: '制冷模式',
   2: '制热模式',
   3: '除湿模式',
@@ -53,4 +53,28 @@ export const fourgLinkStateOptions = {
 export const linkWorkmodeOptions = {
   0: 'SDR 模式',
   1: '4G 融合模式',
+}
+export const sourceTypeOptions = {
+  0: '未标定',
+  1: '自收敛标定',
+  2: '手动标定',
+  3: '网络RTK标定',
+}
+export const qualityOptions = {
+  0: '无信号',
+  1: '差',
+  2: '较差',
+  3: '一般',
+  4: '较好',
+  5: '好',
+}
+export const isConfiguredOptions = {
+  0: '未设置',
+  1: '已设置',
+}
+export const rainfallOptions = {
+  0: '无雨',
+  1: '小雨',
+  2: '中雨',
+  3: '大雨',
 }
\ No newline at end of file

From 8fd23c9669f412a038d78bd275f182f7658fe5ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Wed, 9 Jul 2025 17:35:55 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=B7=AF=E5=BE=84=E5=B1=95=E7=A4=BA=E3=80=81=E6=A0=87?=
 =?UTF-8?q?=E6=B3=A8=E3=80=81=E4=BD=9C=E4=B8=9A=E5=8C=BA=E5=9F=9F-?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=89=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/system/mediaLibrary/index.vue  |    8 -
 .../demo/system/mediaLibrary/path/index.vue   |    6 +-
 .../system/mediaLibrary/path/json/area.json   |  164 +--
 .../system/mediaLibrary/path/pathAreaInfo.vue |   54 +-
 .../system/mediaLibrary/path/pathLeftMenu.vue |    6 +-
 .../demo/system/mediaLibrary/path/pathMap.vue | 1055 +++++++++++++++--
 6 files changed, 1031 insertions(+), 262 deletions(-)

diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 7f8975f..2b59b5f 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -283,7 +283,6 @@
   import { columns, searchFormSchema } from './modal.data';
   import dayjs from 'dayjs';
   import { cloneDeep } from 'lodash-es';
-  import dataJson from './data.json';
 
   const { createConfirm, createMessage } = useMessage();
 
@@ -447,13 +446,6 @@
         // },
       ],
     },
-    {
-      id: '4',
-      name: '新建计划1 2025-06-11 16:28:23 (UTC+08)',
-      createtime: '2025-06-11 16:28:23',
-      type: 'folder',
-      children: dataJson,
-    },
     // {
     //   id: '4',
     //   name: '模型',
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index 86becd0..30486ff 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -139,7 +139,7 @@
   const allMarkDataList = ref(markJson);
   // 设置当前展示的标注信息
   function setNowShowMarkData(value) {
-    if (value) {
+    if (value.id) {
       markInfoShow.value = true;
     } else {
       markInfoShow.value = false;
@@ -173,7 +173,7 @@
 
   // 设置当前展示的区域信息
   function setNowShowAreaData(value) {
-    if (value) {
+    if (value.id) {
       areaInfoShow.value = true;
     } else {
       areaInfoShow.value = false;
@@ -202,7 +202,7 @@
 
   // 设置当前展示的图片
   function setNowShowImageData(value) {
-    if (value) {
+    if (value.id) {
       imageInfoShow.value = true;
     } else {
       imageInfoShow.value = false;
diff --git a/src/views/demo/system/mediaLibrary/path/json/area.json b/src/views/demo/system/mediaLibrary/path/json/area.json
index 7c2a68f..f9bd1f1 100644
--- a/src/views/demo/system/mediaLibrary/path/json/area.json
+++ b/src/views/demo/system/mediaLibrary/path/json/area.json
@@ -1,4 +1,31 @@
 [
+  {
+    "id": "84b09cdc-8138-461a-9008-2ac2fd2dabe1",
+    "name": "fence-2025-07-09 10:58",
+    "status": "enable",
+    "type": "dfence",
+    "content": {
+      "type": "Feature",
+      "geometry": {
+        "type": "Circle",
+        "radius": 25.98278531053457,
+        "coordinates": [
+          113.94260619946274,
+          22.581532991805254
+        ]
+      },
+      "properties": {
+        "color": "#00FF00"
+      }
+    },
+    "area_hash": "enable_dfence_602389930bf13745ad901786a991ee0a",
+    "created_time": 1752029923657,
+    "created_by": "1921832882836627456",
+    "created_nickname": "17854119262",
+    "updated_time": 1752029923657,
+    "updated_by": "1921832882836627456",
+    "updated_nickname": "17854119262"
+  },
   {
     "id": "f8a1ba2f-3d75-45e3-8c37-c305b8a8a18f",
     "name": "noland-2025-07-03 09:37",
@@ -43,82 +70,7 @@
     "created_time": 1751506632716,
     "created_by": "1921832882836627456",
     "created_nickname": "17854119262",
-    "updated_time": 1751506632716,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "4b312405-a1f9-4326-b7ad-f684912931c7",
-    "name": "fence-2025-07-03 09:36",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Circle",
-        "radius": 15.568918453415524,
-        "coordinates": [
-          113.94244540081064,
-          22.581260697110643
-        ]
-      },
-      "properties": {
-        "color": "#00FF00"
-      }
-    },
-    "area_hash": "enable_dfence_cec1fe6f1bdf6ba3de183332ec941336",
-    "created_time": 1751506620283,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751699622015,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "5ef9074f-332e-4c2c-8caf-0d5e9c2d4bb0",
-    "name": "fence-2025-07-03 09:36",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.94217071448199,
-              22.580710270949893
-            ],
-            [
-              113.94234419200872,
-              22.580557223329823
-            ],
-            [
-              113.94234708696375,
-              22.580804244635136
-            ],
-            [
-              113.942101324811,
-              22.580866002541086
-            ],
-            [
-              113.94217071448199,
-              22.580710270949893
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#00FF00",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_dfence_491bd3ba995a30b943fce12cd277f319",
-    "created_time": 1751506610758,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506610758,
+    "updated_time": 1752051379960,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
@@ -149,58 +101,10 @@
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
-  {
-    "id": "8fb48c63-b840-448d-b331-0e0dd505cdb2",
-    "name": "nfz-2025-07-03 09:36",
-    "status": "enable",
-    "type": "nfz",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.94081757610996,
-              22.581070072300122
-            ],
-            [
-              113.94103442563689,
-              22.580927765651026
-            ],
-            [
-              113.94117610149931,
-              22.581056645867445
-            ],
-            [
-              113.94095925169468,
-              22.58111303220476
-            ],
-            [
-              113.94081757610996,
-              22.581070072300122
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#FF0000",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_nfz_069b0cdcae471e9849ff2af1c407cb63",
-    "created_time": 1751506590102,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506590102,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
   {
     "id": "53d34e36-83a1-4f27-9379-59916ac22f94",
     "name": "作业区",
-    "status": "disable",
+    "status": "enable",
     "type": "dfence",
     "content": {
       "type": "Feature",
@@ -240,18 +144,18 @@
         "color": "#00FF00"
       }
     },
-    "area_hash": "disable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
+    "area_hash": "enable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
     "created_time": 1747035695040,
     "created_by": "",
     "created_nickname": "",
-    "updated_time": 1751700024743,
+    "updated_time": 1751870133102,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
   {
     "id": "189b2247-a5be-49ef-83cb-768056a00ed6",
     "name": "限飞区",
-    "status": "disable",
+    "status": "enable",
     "type": "nfz",
     "content": {
       "type": "Feature",
@@ -291,11 +195,11 @@
         "clampToGround": true
       }
     },
-    "area_hash": "disable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
+    "area_hash": "enable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
     "created_time": 1747035694853,
     "created_by": "",
     "created_nickname": "",
-    "updated_time": 1751700027203,
+    "updated_time": 1751870135023,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   }
diff --git a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
index 4587dc2..dc63429 100644
--- a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
@@ -10,9 +10,9 @@
           <div
             v-if="props.nowShowAreaData.type == 'noland'"
             :style="{
-              width: '13px',
-              height: '13px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
+              width: '15px',
+              height: '15px',
+              background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
               'margin-left': '2px',
               'margin-right': '12px',
             }"
@@ -81,21 +81,21 @@
         <div class="markTitle">水平距离</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent"> m</div>
+        <div class="markContent"> {{ distance.toFixed(1) }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
         <div class="markTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> ㎡</div>
+        <div class="markContent"> {{ area.toFixed(2) }}㎡</div>
       </a-col>
       <!-- 水平周长 -->
       <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
         <div class="markTitle">水平周长</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
-        <div class="markContent"> m</div>
+        <div class="markContent"> {{ distance2 }}m</div>
       </a-col>
       <!-- 半径 -->
       <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
@@ -166,6 +166,8 @@
 </template>
 <script lang="ts" setup>
   import { ref, watch, nextTick } from 'vue';
+  import * as mars3d from 'mars3d';
+  import * as Cesium from 'mars3d-cesium';
   import {
     CloseOutlined,
     DeleteOutlined,
@@ -267,10 +269,50 @@
     emits('deleteArea', props.nowShowAreaData);
   }
 
+  // 水平距离
+  const distance = ref(0);
+  async function getDistance() {
+    distance.value = mars3d.MeasureUtil.getSurfaceDistance(
+      props.nowShowAreaData.content.geometry.coordinates[0],
+    );
+  }
+
+  // 水平面积
+  const area = ref(0);
+  async function getArea() {
+    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
+      let radius = props.nowShowAreaData.content.geometry.radius;
+      area.value = Math.PI * radius * radius;
+    } else {
+      area.value = mars3d.MeasureUtil.getSurfaceArea(
+        props.nowShowAreaData.content.geometry.coordinates[0],
+      );
+    }
+  }
+
+  // 水平周长
+  const distance2 = ref(0);
+  async function getDistance2() {
+    distance.value = mars3d.MeasureUtil.getDistance(
+      props.nowShowAreaData.content.geometry.coordinates[0],
+      true,
+    );
+  }
+
   watch(
     () => props.nowShowAreaData,
     () => {
       nowAreaData.value = props.nowShowAreaData;
+      // 水平面积
+      getArea();
+      if (props.nowShowAreaData.type == 'noland') {
+        // 水平距离
+        getDistance();
+      }
+      if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
+        // 水平距离
+        getDistance2();
+      }
     },
     {
       deep: true,
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index d0c5e96..209f35f 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -284,9 +284,9 @@
                 <div
                   v-if="show.type == 'noland'"
                   :style="{
-                    width: '13px',
-                    height: '13px',
-                    outline: `2px solid ${show.content.properties.color}`,
+                    width: '15px',
+                    height: '15px',
+                    background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
                     'margin-right': '6px',
                   }"
                 />
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index 5a41c02..9bf3e7f 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -1,11 +1,126 @@
 <template>
-  <div ref="vChartRef" id="mars3d-container" class="mars3d-container"></div>
+  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
+    <div class="markButtons">
+      <div
+        :class="mapDrawType == 'drawPoint' ? 'button_choose' : 'button_nochoose'"
+        @click="drawPoint"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorPoint = color"
+              >
+                <CheckOutlined v-if="drawColorPoint == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <AntDesignOutlined
+            :style="{
+              color: drawColorPoint,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+      <div
+        :class="mapDrawType == 'drawPolyline' ? 'button_choose' : 'button_nochoose'"
+        @click="drawPolyline"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorPolyline = color"
+              >
+                <CheckOutlined v-if="drawColorPolyline == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <ExpandAltOutlined
+            :style="{
+              color: drawColorPolyline,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+      <div
+        :class="mapDrawType == 'drawPolygon' ? 'button_choose' : 'button_nochoose'"
+        @click="drawPolygon"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorPolygon = color"
+              >
+                <CheckOutlined v-if="drawColorPolygon == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <BorderOutlined
+            :style="{
+              color: drawColorPolygon,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+      <div
+        :class="mapDrawType == 'drawCricle' ? 'button_choose' : 'button_nochoose'"
+        @click="drawCricle"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorCricle = color"
+              >
+                <CheckOutlined v-if="drawColorCricle == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <LogoutOutlined
+            :style="{
+              color: drawColorCricle,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted, defineEmits } from 'vue';
   import * as mars3d from 'mars3d';
   import * as Cesium from 'mars3d-cesium';
   import { circle, rect, triangle } from './svg';
+  import {
+    CheckOutlined,
+    AntDesignOutlined,
+    ExpandAltOutlined,
+    BorderOutlined,
+    LogoutOutlined,
+  } from '@ant-design/icons-vue';
+
   const props = defineProps([
     'allMarkDataList',
     'nowShowMarkData',
@@ -23,13 +138,15 @@
 
   const vChartRef: any = ref<HTMLElement>();
   let map: mars3d.Map; // 地图对象
-  let graphicLayers = new mars3d.layer.GraphicLayer();
+  let graphicLayers = new mars3d.layer.GraphicLayer({
+    isAutoEditing: true,
+  });
   // 地图标注
   // 地图标注-点
   let mark_PointGraphicData: any = [];
   // 地图标注-线
   let mark_LineStringGraphicData: any = [];
-  // 地图标注-区域
+  // 地图标注-多边形
   let mark_PolygonGraphicData: any = [];
   // 地图标注-圈
   let mark_CircleGraphicData: any = [];
@@ -44,6 +161,18 @@
   // 地图照片-展示图片
   let image_imageGraphicData: any = [];
 
+  // 地图作业区域
+  // 地图作业区域-禁降区-线
+  let area_noland_LineStringGraphicData: any = [];
+  // 地图作业区域-作业区-多边形
+  let area_dfence_PolygonGraphicData: any = [];
+  // 地图作业区域-作业区-圈
+  let area_dfence_CircleGraphicData: any = [];
+  // 地图作业区域-限飞区-多边形
+  let area_nfz_PolygonGraphicData: any = [];
+  // 地图作业区域-限飞区-圈
+  let area_nfz_CircleGraphicData: any = [];
+
   onMounted(() => {
     initMap();
   });
@@ -273,9 +402,27 @@
       ],
       layers: [],
     });
-    showAllImageDataList();
+    // 图层
+    map.addLayer(graphicLayers);
     showAllMarkDataList();
+    showAllImageDataList();
+    showAllAreaDataList();
     handlerLocation([118.2958779, 35.1342553]);
+    // 监听地图点击事件
+    map.on(mars3d.EventType.click, function (event) {
+      if (!event.czmObject) {
+        // 地图标注-恢复默认
+        if (props.nowShowMarkData.id) {
+          markRestoreDefault();
+          emits('setNowShowMarkData', {});
+        }
+        // // 地图作业区域-恢复默认
+        // if (props.nowShowAreaData.id) {
+        //   areaRestoreDefault();
+        //   emits('setNowShowAreaData', {});
+        // }
+      }
+    });
   };
 
   // 地图标注--------------------------------------------------------------------
@@ -294,8 +441,6 @@
     mark_CircleGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    // 图层
-    map.addLayer(graphicLayers);
     // 图层数据
     mark_PointGraphicData = [];
     mark_LineStringGraphicData = [];
@@ -304,6 +449,64 @@
     // 地图标注-遍历
     props.allMarkDataList.forEach((item, index) => {
       let content = item.resource.content;
+      // 地图标注-点
+      if (content.geometry.type == 'Point') {
+        let pointGraphic = new mars3d.graphic.BillboardEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            image: 'https://data.mars3d.cn/img/marker/mark-red.png',
+            clampToGround: false,
+            scale: 1,
+            label: {
+              text: `${item.name}`,
+              font_size: content.properties.font_size,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+              pixelOffset: [25, 0],
+            },
+          },
+        });
+        // 监听mouseover事件
+        pointGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            pointGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        pointGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            pointGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        pointGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          markRestoreDefault();
+          pointGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowMarkData', item);
+        });
+        // 将点对象 添加到图层中
+        graphicLayers.addGraphic(pointGraphic);
+        // 数据
+        mark_PointGraphicData.push(pointGraphic);
+      }
       // 地图标注-线
       if (content.geometry.type == 'LineString') {
         let lineGraphic = new mars3d.graphic.PolylineEntity({
@@ -312,9 +515,6 @@
           style: {
             color: Cesium.Color.fromCssColorString(content.properties.color),
             width: content.properties.line_width,
-            outlineColor: '#ffffff',
-            outlineWidth: 2,
-            outline: false,
             label: {
               text: `${item.name}`,
               font_size: content.properties.font_size,
@@ -327,61 +527,13 @@
               pixelOffset: [25, -5],
             },
           },
-          // 用于恢复默认
-          defaultColor: Cesium.Color.fromCssColorString(content.properties.color),
-          defaultWidth: content.properties.line_width,
+          hasEdit: true,
+          drawShowMeasure: true,
         });
-        if (content.properties.line_start_cap != 0) {
-          // 获取起点和终点
-          const positions = lineGraphic.options.positions;
-          if (positions.length >= 2) {
-            const start = positions[0];
-            const end = positions[positions.length - 1];
-
-            const image = new Image();
-            image.crossOrigin = 'Anonymous';
-            // 将SVG字符串转换为Data URL
-            if (content.properties.line_start_cap == 1) {
-              image.src = svgToDataURL(triangle.replace('#000000', content.properties.color));
-            } else if (content.properties.line_start_cap == 2) {
-              image.src = svgToDataURL(rect.replace('#000000', content.properties.color));
-            } else if (content.properties.line_start_cap == 3) {
-              image.src = svgToDataURL(circle.replace('#000000', content.properties.color));
-            }
-            image.onload = () => {
-              // 创建Canvas元素
-              const canvas = document.createElement('canvas');
-              canvas.width = content.properties.line_width * 5;
-              canvas.height = content.properties.line_width * 5;
-              // 获取Canvas绘图上下文
-              const ctx = canvas.getContext('2d');
-              // 在Canvas上绘制图片
-              ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-              // 将Canvas内容转换为图片的数据URL
-              const dataURL_svg = canvas.toDataURL('image/png');
-
-              const startIcon = new mars3d.graphic.BillboardEntity({
-                position: start,
-                style: {
-                  image: dataURL_svg,
-                  scale: 0.5,
-                  rotation: 0,
-                },
-              });
-              graphicLayers.addGraphic(startIcon);
-            };
-          }
-        }
-
         // 监听mouseover事件
         lineGraphic.on(mars3d.EventType.mouseOver, function () {
           if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
             lineGraphic.setStyle({
-              color: Cesium.Color.fromCssColorString(content.properties.color + 'cc'),
-              width: content.properties.line_width,
-              outlineColor: '#ffffff',
-              outlineWidth: 2,
-              outline: true,
               label: {
                 color: content.properties.color,
               },
@@ -392,10 +544,6 @@
         lineGraphic.on(mars3d.EventType.mouseOut, function () {
           if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
             lineGraphic.setStyle({
-              color: Cesium.Color.fromCssColorString(content.properties.color),
-              width: content.properties.line_width,
-              outlineWidth: 0,
-              outline: false,
               label: {
                 color: '#000000',
               },
@@ -406,25 +554,11 @@
         lineGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
           markRestoreDefault();
-          lineGraphic.show = false;
-          let distanceMeasure = new mars3d.graphic.DistanceMeasure({
-            id: item.id,
-            positions: content.geometry.coordinates,
-            style: {
-              color: '#ff0000',
-              width: 3,
-              clampToGround: true,
-              // outline: true,
-              // outlineColor: '',
-              label: {
-                font_size: 18,
-                color: '#ffffff',
-                outline: true,
-                outlineColor: '#000000',
-              },
+          lineGraphic.setStyle({
+            label: {
+              color: content.properties.color,
             },
           });
-          graphicLayers.addGraphic(distanceMeasure);
           emits('setNowShowMarkData', item);
         });
         // 将线对象 添加到图层中
@@ -432,20 +566,163 @@
         // 数据
         mark_LineStringGraphicData.push(lineGraphic);
       }
+      // 地图标注-多边形
+      if (content.geometry.type == 'Polygon') {
+        let polygonGraphic = new mars3d.graphic.PolygonEntity({
+          id: item.id,
+          positions: content.geometry.coordinates,
+          style: {
+            color: content.properties.color,
+            fill: false,
+            width: content.properties.line_width,
+            outlineColor: content.properties.color,
+            outlineWidth: 2,
+            outline: true,
+            clampToGround: content.properties.clampToGround,
+            label: {
+              text: `${item.name}`,
+              font_size: content.properties.font_size,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        polygonGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            polygonGraphic.setStyle({
+              // color: Cesium.Color.fromCssColorString('#ffffff00'),
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        polygonGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            polygonGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        polygonGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          markRestoreDefault();
+          polygonGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowMarkData', item);
+        });
+        // 将形状对象 添加到图层中
+        graphicLayers.addGraphic(polygonGraphic);
+        // 数据
+        mark_PolygonGraphicData.push(polygonGraphic);
+      }
+      // 地图标注-圆
+      if (content.geometry.type == 'Circle') {
+        let circleGraphic = new mars3d.graphic.CircleEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            radius: content.geometry.radius,
+            fill: false,
+            outlineColor: content.properties.color,
+            outlineWidth: 4,
+            outline: true,
+            clampToGround: content.properties.clampToGround,
+            label: {
+              text: `${item.name}`,
+              font_size: content.properties.font_size,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        circleGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            circleGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        circleGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            circleGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        circleGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          markRestoreDefault();
+          circleGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowMarkData', item);
+        });
+        // 将圆对象 添加到图层中
+        graphicLayers.addGraphic(circleGraphic);
+        // 数据
+        mark_CircleGraphicData.push(circleGraphic);
+      }
     });
   };
-
   // 地图标注-恢复默认
   function markRestoreDefault() {
+    // 点-恢复默认
+    for (let i = 0; i < mark_PointGraphicData.length; i++) {
+      let pointGraphic = mark_PointGraphicData[i];
+      pointGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
     // 线-恢复默认
     for (let i = 0; i < mark_LineStringGraphicData.length; i++) {
       let lineGraphic = mark_LineStringGraphicData[i];
-      let defaultColor = lineGraphic.options.defaultColor;
-      let defaultWidth = lineGraphic.options.defaultWidth;
       lineGraphic.setStyle({
-        color: defaultColor,
-        width: defaultWidth,
-        outline: false,
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 矩形-恢复默认
+    for (let i = 0; i < mark_PolygonGraphicData.length; i++) {
+      let polygonGraphic = mark_PolygonGraphicData[i];
+      polygonGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 圆形-恢复默认
+    for (let i = 0; i < mark_CircleGraphicData.length; i++) {
+      let circleGraphic = mark_CircleGraphicData[i];
+      circleGraphic.setStyle({
         label: {
           color: '#000000',
         },
@@ -457,25 +734,6 @@
     return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
   }
 
-  // 计算一个简单的三角形（假设面向正北）
-  function createTrianglePoints(center, size = 10) {
-    const heading = 0; // 正北方向（单位：弧度）
-    const h = Math.PI / 2 - heading;
-    return [
-      Cesium.Cartesian3.add(center, new Cesium.Cartesian3(0, size, 0), new Cesium.Cartesian3()),
-      Cesium.Cartesian3.add(
-        center,
-        new Cesium.Cartesian3(-size * 0.4, -size * 0.7, 0),
-        new Cesium.Cartesian3(),
-      ),
-      Cesium.Cartesian3.add(
-        center,
-        new Cesium.Cartesian3(size * 0.4, -size * 0.7, 0),
-        new Cesium.Cartesian3(),
-      ),
-    ];
-  }
-
   // 地图照片--------------------------------------------------------------------
   // 地图照片-初始化-遍历展示
   const showAllImageDataList = async () => {
@@ -492,8 +750,6 @@
     image_imageGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    // 图层
-    map.addLayer(graphicLayers);
     // 图层数据
     image_bottomPointGraphicData = [];
     image_flightointGraphicData = [];
@@ -559,6 +815,7 @@
                 scale: 1,
                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
               },
+              hasEdit: false,
             });
             if (index + 1 < props.allImageDataList.length) {
               const afterItem = props.allImageDataList[index + 1];
@@ -579,6 +836,7 @@
                 verticalOrigin: Cesium.VerticalOrigin.CENTER,
                 rotation: rotation,
               },
+              hasEdit: false,
               show: false,
             });
             // 地面点到展示图片的线
@@ -593,6 +851,7 @@
                 width: 1, // 线宽
                 clampToGround: false,
               },
+              hasEdit: false,
               // 用于恢复默认
               defaultPosition: position,
               // 地形高度
@@ -619,6 +878,7 @@
                   show: false,
                 },
               },
+              hasEdit: false,
               // 用于恢复默认
               defaultImage: dataURL1,
               // 用于外侧修改图片
@@ -702,7 +962,6 @@
       }
     });
   };
-
   // 地图照片-恢复默认
   function imageRestoreDefault() {
     // 飞行点
@@ -736,7 +995,6 @@
       });
     }
   }
-
   // 地图照片-右侧图片模块修改当前显示图片
   function setNowShowImageByRight() {
     setTimeout(() => {
@@ -786,7 +1044,530 @@
     }, 500);
   }
 
-  //
+  // 地图作业区域--------------------------------------------------------------------
+  // 地图作业区域-初始化-遍历展示
+  function showAllAreaDataList() {
+    // 删除旧数据
+    area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_dfence_PolygonGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_dfence_CircleGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_nfz_PolygonGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_nfz_CircleGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    // 图层数据
+    area_noland_LineStringGraphicData = [];
+    // 地图作业区域-作业区-多边形
+    area_dfence_PolygonGraphicData = [];
+    // 地图作业区域-作业区-圈
+    area_dfence_CircleGraphicData = [];
+    // 地图作业区域-限飞区-多边形
+    area_nfz_PolygonGraphicData = [];
+    // 地图作业区域-限飞区-圈
+    area_nfz_CircleGraphicData = [];
+
+    props.allAreaDataList.forEach((item, index) => {
+      let content = item.content;
+      // 地图作业区域-禁降区-线
+      if (item.type == 'noland' && content.geometry.type == 'Polyline') {
+        let nolandLineGraphic = new mars3d.graphic.PolylineEntity({
+          positions: content.geometry.coordinates[0],
+          style: {
+            clampToGround: content.properties.clampToGround,
+            width: 10,
+            materialType: mars3d.MaterialType.LineCross,
+            materialOptions: {
+              color: content.properties.color, // 中心线颜色
+              dashLength: 36, // 十字长度
+              maskLength: 10, // 空隙间隔长度
+              centerPower: 0.1, // 中心宽百分比
+              dashPower: 0.2, // 虚线百分比
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+              pixelOffset: [25, -5],
+            },
+          },
+        });
+        // 监听mouseover事件
+        nolandLineGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nolandLineGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        nolandLineGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nolandLineGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        nolandLineGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          nolandLineGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 禁降区-线 添加到图层中
+        graphicLayers.addGraphic(nolandLineGraphic);
+        // 数据
+        area_noland_LineStringGraphicData.push(nolandLineGraphic);
+      }
+      // 地图作业区域-作业区-多边形
+      if (item.type == 'dfence' && content.geometry.type == 'Polygon') {
+        let dfence_PolygonGraphic = new mars3d.graphic.PolygonEntity({
+          id: item.id,
+          positions: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            fill: false,
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        dfence_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_PolygonGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        dfence_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_PolygonGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        dfence_PolygonGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          dfence_PolygonGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 作业区-圈 添加到图层中
+        graphicLayers.addGraphic(dfence_PolygonGraphic);
+        // 数据
+        area_dfence_PolygonGraphicData.push(dfence_PolygonGraphic);
+      }
+      // 地图作业区域-作业区-圈
+      if (item.type == 'dfence' && content.geometry.type == 'Circle') {
+        let dfence_CircleGraphic = new mars3d.graphic.CircleEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            radius: content.geometry.radius,
+            fill: false,
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        dfence_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_CircleGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        dfence_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_CircleGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        dfence_CircleGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          dfence_CircleGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 作业区-圈 添加到图层中
+        graphicLayers.addGraphic(dfence_CircleGraphic);
+        // 数据
+        area_dfence_CircleGraphicData.push(dfence_CircleGraphic);
+      }
+      // 地图作业区域-限飞区-多边形
+      if (item.type == 'nfz' && content.geometry.type == 'Polygon') {
+        let nfz_PolygonGraphic = new mars3d.graphic.PolygonEntity({
+          id: item.id,
+          positions: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            color: Cesium.Color.fromCssColorString(content.properties.color + '33'),
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        nfz_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_PolygonGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        nfz_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_PolygonGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        nfz_PolygonGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          nfz_PolygonGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 作业区-圈 添加到图层中
+        graphicLayers.addGraphic(nfz_PolygonGraphic);
+        // 数据
+        area_nfz_PolygonGraphicData.push(nfz_PolygonGraphic);
+      }
+      // 地图作业区域-限飞区-圈
+      if (item.type == 'nfz' && content.geometry.type == 'Circle') {
+        let nfz_CircleGraphic = new mars3d.graphic.CircleEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            radius: content.geometry.radius,
+            color: Cesium.Color.fromCssColorString(content.properties.color + '33'),
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        nfz_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_CircleGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        nfz_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_CircleGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        nfz_CircleGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          nfz_CircleGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 限飞区-圈 添加到图层中
+        graphicLayers.addGraphic(nfz_CircleGraphic);
+        // 数据
+        area_nfz_CircleGraphicData.push(nfz_CircleGraphic);
+      }
+    });
+  }
+  // 地图作业区域-恢复默认
+  function areaRestoreDefault() {
+    // 作业区-多边形-恢复默认
+    for (let i = 0; i < area_noland_LineStringGraphicData.length; i++) {
+      let nolandLineGraphic = area_noland_LineStringGraphicData[i];
+      nolandLineGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 作业区-多边形-恢复默认
+    for (let i = 0; i < area_dfence_PolygonGraphicData.length; i++) {
+      let dfence_PolygonGraphic = area_dfence_PolygonGraphicData[i];
+      dfence_PolygonGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 作业区-圈-恢复默认
+    for (let i = 0; i < area_dfence_CircleGraphicData.length; i++) {
+      let dfence_CircleGraphic = area_dfence_CircleGraphicData[i];
+      dfence_CircleGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 限飞区-多边形-恢复默认
+    for (let i = 0; i < area_nfz_PolygonGraphicData.length; i++) {
+      let nfz_PolygonGraphic = area_nfz_CircleGraphicData[i];
+      nfz_PolygonGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 限飞区-圈-恢复默认
+    for (let i = 0; i < area_nfz_CircleGraphicData.length; i++) {
+      let nfz_CircleGraphic = area_nfz_CircleGraphicData[i];
+      nfz_CircleGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+  }
+
+  // 地图绘制--------------------------------------------------------------------
+  const mapDrawFlag = ref(false);
+  const mapDrawType: any = ref('');
+  const drawColorPoint = ref('#2D8CF0');
+  const drawColorPolyline = ref('#2D8CF0');
+  const drawColorPolygon = ref('#2D8CF0');
+  const drawColorCricle = ref('#2D8CF0');
+
+  // 地图绘制-点
+  async function drawPoint() {
+    if (mapDrawType.value == 'drawPoint') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPoint';
+    const graphic = await graphicLayers.startDraw({
+      type: 'billboardP',
+      style: {
+        image: 'https://data.mars3d.cn/img/marker/mark-red.png',
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        label: {
+          text: '可以同时支持文字',
+          font_size: 26,
+          color: drawColorPoint.value,
+          outline: true,
+          outlineColor: '#000000',
+          pixelOffsetY: -60,
+        },
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图绘制-线
+  async function drawPolyline() {
+    if (mapDrawType.value == 'drawPolyline') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPolyline';
+    const graphic = await graphicLayers.startDraw({
+      type: 'polylineP',
+      style: {
+        pixelSize: 12,
+        color: '#3388ff',
+        label: {
+          text: '可以同时支持文字',
+          font_size: 20,
+          color: '#ffffff',
+          outline: true,
+          outlineColor: '#000000',
+          pixelOffsetY: -20,
+        },
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图绘制-形状
+  async function drawPolygon() {
+    if (mapDrawType.value == 'drawPolygon') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPolygon';
+    const graphic = await graphicLayers.startDraw({
+      type: 'polygonP',
+      style: {
+        color: '#ffff00',
+        opacity: 0.5,
+        outline: true,
+        outlineColor: '#ffffff',
+        outlineWidth: 2.0,
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图绘制-形状
+  async function drawCricle() {
+    if (mapDrawType.value == 'drawCricle') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawCricle';
+    const graphic = await graphicLayers.startDraw({
+      type: 'circleP',
+      style: {
+        color: '#ffff00',
+        opacity: 0.6,
+        outline: true,
+        outlineColor: '#ffffff',
+        outlineWidth: 2.0,
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
 
   // 图斑定位
   const handlerLocation = (lngLat) => {
@@ -799,10 +1580,60 @@
     handlerLocation,
   });
 </script>
-<style scoped>
+<style lang="less" scoped>
   .mars3d-container {
+    position: relative;
     width: 100%;
     height: 100%;
-    background: red;
+  }
+
+  .markButtons {
+    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    top: 10%;
+    right: 1%;
+    width: 30px;
+    height: 123px;
+    gap: 1px;
+  }
+
+  .button_nochoose {
+    background: #ffffff;
+    z-index: 200;
+    width: 30px;
+    height: 30px;
+    // border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      border: 2px solid #2b85e4;
+      outline: 1px solid #2b85e4;
+    }
+  }
+  .button_choose {
+    background: linear-gradient(to bottom left, #2b85e4 10px, transparent 1px), #ffffff;
+    background-size:
+      100% 100%,
+      auto;
+    z-index: 200;
+    width: 30px;
+    height: 30px;
+    // border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: 2px solid #2b85e4;
+  }
+
+  .popoverClass {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
   }
 </style>

From 5b791749563f8f8bc1550c19783fec65a8b2976d Mon Sep 17 00:00:00 2001
From: helloxujingliang <3225043@qq.com>
Date: Thu, 10 Jul 2025 09:19:27 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E9=95=BF=E5=85=89=E5=8D=AB=E6=98=9F?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE,=E8=88=AA=E7=BA=BF=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB,=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../airlinemanagement/index.vue               | 201 ++++++++++++++++++
 .../workplan/components/airLineList.vue       |   6 +-
 .../demo/workmanagement/workplan/index.vue    |   4 +-
 3 files changed, 207 insertions(+), 4 deletions(-)
 create mode 100644 src/views/demo/workmanagement/airlinemanagement/index.vue

diff --git a/src/views/demo/workmanagement/airlinemanagement/index.vue b/src/views/demo/workmanagement/airlinemanagement/index.vue
new file mode 100644
index 0000000..c84802a
--- /dev/null
+++ b/src/views/demo/workmanagement/airlinemanagement/index.vue
@@ -0,0 +1,201 @@
+<template>
+    <div>
+        <div style="width:100%;height: calc( 100vh - 80px);" >
+            <Map :workPlanFormShow="workPlanFormShow" :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere" :wayline="wayline" :waylineInfo="waylineInfo"></Map>
+        </div>
+
+        <!-- 航线库 -->
+        <div v-if="ariLineShow" style="width:566px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
+            <airLineList :title="'航线管理'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
+        </div>
+
+        <!-- 新建航线 -->
+        <div v-if="createAirLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
+            <createAirLine @createAirLine="handlerCreateAirRoute"  @cancle="cancleCreateAirLine"></createAirLine>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" setup>
+import {ref,watch} from 'vue';
+import airLineList from '../workplan/components/airLineList.vue';
+import createAirLine from '../workplan/components/createAirLine.vue'
+import Map from '../workplan/components/map.vue'
+import AirPolygon from './components/airPolygon.vue';
+import {getAirLine} from '@/api/sys/workplan';
+
+import JSZip from 'jszip';
+import axios from 'axios';
+
+import { XMLParser, XMLBuilder } from 'fast-xml-parser';
+
+const airRoute = ref({})
+
+const flyToTherePosition = ref({
+    lng:null,
+    lat:null,
+    alt:null,
+})
+
+
+const flyToThere = (e)=>{
+    console.log(e);
+}
+const planListShow = ref(true);
+const workPlanFormShow = ref(false);
+const ariLineShow = ref(true);
+const aircraftShow = ref(false);
+const createAirLineShow = ref(false);
+
+const selectAriLine = ()=> {
+    ariLineShow.value = true;
+    aircraftShow.value = false;
+}
+
+const selectAircraft = ()=>{
+    aircraftShow.value = true;
+    ariLineShow.value = false;
+}
+
+const cancleCraete = ()=>{
+    workPlanFormShow.value = false;
+    ariLineShow.value = false;
+    aircraftShow.value = false;
+    planListShow.value = true;
+}
+
+const checkedAriLine = ref({});
+
+const checkAriLine = (item)=>{
+    if(item){
+        ariLineShow.value = false;
+        checkedAriLine.value = item;
+    }
+}
+
+const checkedDronePort = ref({});
+
+const checkDronePort = (item)=>{
+    if(item){
+        aircraftShow.value = false;
+        checkedDronePort.value = item;
+    }
+}
+
+const formData = ref(null);
+
+const toCreateWorkPlan = (data)=> {
+    formData.value = data;
+    planListShow.value = false;
+    workPlanFormShow.value = true;
+}
+
+// 创建航线
+const handlerCreateAirLine = ()=>{
+    createAirLineShow.value = true;
+}
+
+const cancleCreateAirLine = ()=>{
+    createAirLineShow.value = false;
+}
+
+const handlerCreateAirRoute = (info)=>{
+    console.log("info",info);
+    workPlanFormShow.value = false;
+    ariLineShow.value = false;
+    aircraftShow.value = false;
+    planListShow.value = false;
+    createAirLineShow.value = false;
+    airRoute.value = info
+}
+
+
+const successCreatePlan = ()=>{
+    workPlanFormShow.value = false;
+    ariLineShow.value = false;
+    aircraftShow.value = false;
+    planListShow.value = true;
+}
+
+
+
+// 保存航线后退出
+const exitDraw = ()=>{
+    planListShow.value = false;
+    workPlanFormShow.value = true;
+    ariLineShow.value = true;
+}
+
+
+
+
+// 预览航线
+const wayline = ref({});
+const waylineInfo = ref(null)
+const previewAirLine =async (line,type) => {
+    let info =await getAirLine({airLineId:type.value?.id});
+    if(info){
+        wayline.value = line;
+        waylineInfo.value = info;
+    }
+}
+
+// 查看航线详情
+const planDetail =async (item) => {
+    formData.value = item;
+    console.log("formData",formData.value?.airLineId);
+
+    let info =await getAirLine({airLineId : formData.value?.airLineId});
+    if(info){
+        // wayline.value = line;
+        waylineInfo.value = info;
+        wayline.value = await airLineDetail(info);
+    }
+
+    workPlanFormShow.value =  true;
+}
+
+
+// 获取wpml文件
+
+const currentPreviewWayLine = ref(null);
+
+const airLineDetail =async (item) => {
+
+    currentPreviewWayLine.value = item;
+
+    try{
+        let response  =  await axios.get(item.wpml,{responseType: 'arraybuffer'});
+        // 解压kmz文件
+        let xmlStr =await extractKmz(response.data);
+        let xmlData = xmlStr.replace(/wpml:/g,"");
+        const parser = new XMLParser();
+        const jsonObj = parser.parse(xmlData);
+        return jsonObj.kml.Document;
+        
+    }catch(e){
+        console.error(e);
+    }
+
+    
+}
+
+// 解压航线文件
+const extractKmz = async (kmzBlob)=>{
+
+    const zip = new JSZip();
+
+    const contents = await zip.loadAsync(kmzBlob);
+    
+    // 查找.wmpl文件
+    for (const [filename, file] of Object.entries(contents.files)) {
+        if (filename.toLowerCase().endsWith('.wpml')) {
+            return await file.async('text');
+        }
+    }
+    
+    throw new Error('KMZ文件中未找到WMPL文件');
+}
+
+
+</script>
diff --git a/src/views/demo/workmanagement/workplan/components/airLineList.vue b/src/views/demo/workmanagement/workplan/components/airLineList.vue
index 87761ea..73ad00f 100644
--- a/src/views/demo/workmanagement/workplan/components/airLineList.vue
+++ b/src/views/demo/workmanagement/workplan/components/airLineList.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="title">
-            <LeftOutlined @click="checkAriLine(null)" /> &nbsp; 选择航线
+            <LeftOutlined @click="checkAriLine(null)" v-show="props.title=='选择航线'" /> &nbsp; {{props.title}}
         </div>
         <div class="filter-container">
             
@@ -184,12 +184,14 @@
 </template>
 <script lang="ts" setup>
     import { ExclamationCircleOutlined,PlusOutlined,FileAddOutlined,LeftOutlined,ImportOutlined,MoreOutlined,EditOutlined,InboxOutlined } from '@ant-design/icons-vue';
-    import {ref,defineEmits,createVNode} from 'vue'
+    import {ref,defineEmits,defineProps,createVNode} from 'vue'
     
     import { getAirLineList,uploadXmlFile,deleteAirLine,addAirLine} from '@/api/sys/workplan';
     import { Modal, message } from 'ant-design-vue';
     const emit = defineEmits(["checkAriLine","createAirLine","previewAirLine"])
 
+    const props = defineProps(["title"])
+
     import {templateTypeOptions} from '../waylineConfig/index';
 
     import JSZip from 'jszip';
diff --git a/src/views/demo/workmanagement/workplan/index.vue b/src/views/demo/workmanagement/workplan/index.vue
index aa08f67..a5be9d1 100644
--- a/src/views/demo/workmanagement/workplan/index.vue
+++ b/src/views/demo/workmanagement/workplan/index.vue
@@ -15,8 +15,8 @@
         </div>
 
         <!-- 航线库 -->
-        <div v-if="ariLineShow" style="width:566px;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
-            <airLineList @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
+        <div v-if="ariLineShow"  style="width:566px;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
+            <airLineList :title="'选择航线'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
         </div>
 
         <!-- 飞行器 -->