From 7a9907d5ca96b8cb360b6902a3591634ff0cffcc Mon Sep 17 00:00:00 2001
From: sd <1504629600@qq.com>
Date: Thu, 22 Jan 2026 13:22:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E5=8F=AF?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue    |  11 +-
 ruoyi-ui/src/views/childRoom/LeftMenu.vue          | 201 ++++++++++--
 ruoyi-ui/src/views/childRoom/TopHeader.vue         |  77 ++++-
 ruoyi-ui/src/views/childRoom/index.vue             |  49 +--
 .../src/views/dialogs/ExternalParamsDialog.vue     | 289 +++++++++++++++++
 ruoyi-ui/src/views/dialogs/PowerZoneDialog.vue     | 341 +++++++++++++++++++++
 ruoyi-ui/src/views/dialogs/ScaleDialog.vue         | 223 ++++++++++++++
 7 files changed, 1138 insertions(+), 53 deletions(-)
 create mode 100644 ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue
 create mode 100644 ruoyi-ui/src/views/dialogs/PowerZoneDialog.vue
 create mode 100644 ruoyi-ui/src/views/dialogs/ScaleDialog.vue

diff --git a/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue
index f53a9c0..9acf607 100644
--- a/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue
+++ b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue
@@ -70,14 +70,14 @@ export default {
   position: absolute;
   top: 70px;
   right: 20px;
-  width: 40px;
+  width: 36px;
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 138, 255, 0.1);
   border-radius: 8px;
   z-index: 90;
   box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
-  padding: 15px 5px;
+  padding: 12px 2px;
   transition: all 0.3s ease;
   overflow: hidden;
   opacity: 1;
@@ -95,14 +95,15 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   cursor: pointer;
   color: #555;
-  font-size: 20px;
+  font-size: 16px;
   position: relative;
   transition: all 0.3s;
   border-radius: 4px;
-  padding: 0 5px;
+  padding: 0;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(5px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
diff --git a/ruoyi-ui/src/views/childRoom/LeftMenu.vue b/ruoyi-ui/src/views/childRoom/LeftMenu.vue
index a68353b..60706fe 100644
--- a/ruoyi-ui/src/views/childRoom/LeftMenu.vue
+++ b/ruoyi-ui/src/views/childRoom/LeftMenu.vue
@@ -1,34 +1,71 @@
 <template>
-  <div
-    class="floating-left-menu"
-    :class="{ 'hidden': isHidden }"
-    @mouseenter="showTooltip = true"
-    @mouseleave="showTooltip = false"
-  >
-    <!-- 隐藏按钮（>箭头）。 -->
-    <div class="hide-btn" @click="handleHide" title="隐藏菜单">
-      <i class="el-icon-arrow-left"></i>
-    </div>
+  <div>
+    <div
+      class="floating-left-menu"
+      :class="{ 'hidden': isHidden }"
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+    >
+      <!-- 隐藏按钮（>箭头）。 -->
+      <div class="hide-btn" @click="handleHide" title="隐藏菜单">
+        <i class="el-icon-arrow-left"></i>
+      </div>
 
-    <!-- 一级菜单 -->
-    <div class="menu-icons">
-      <div
-        v-for="item in menuItems"
-        :key="item.id"
-        class="menu-item"
-        :class="{ active: activeMenu === item.id }"
-        @click="handleSelectMenu(item)"
-        :title="item.name"
+      <!-- 一级菜单 -->
+      <draggable
+        v-model="localMenuItems"
+        class="menu-icons"
+        :options="dragOptions"
+        @end="onDragEnd"
       >
-        <i :class="item.icon"></i>
+        <div
+          v-for="item in localMenuItems"
+          :key="item.id"
+          class="menu-item"
+          :class="{ active: activeMenu === item.id, 'dragging': isDragging }"
+          @click="handleSelectMenu(item)"
+          @contextmenu.prevent="handleRightClick(item)"
+          :title="item.name"
+        >
+          <i :class="item.icon"></i>
+        </div>
+      </draggable>
+      
+      <!-- 新增按钮 -->
+      <div class="add-btn" @click="handleAdd" title="添加新菜单">
+        <i class="el-icon-plus"></i>
       </div>
     </div>
+    
+    <!-- 删除确认弹窗 -->
+    <el-dialog
+      title="确认删除"
+      :visible.sync="showDeleteDialog"
+      width="300px"
+      :modal="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="delete-dialog-content">
+        <i class="el-icon-warning" style="color: #E6A23C; font-size: 24px; margin-right: 10px;"></i>
+        <span>确定要删除菜单项 "{{ itemToDelete ? itemToDelete.name : '' }}" 吗？</span>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDeleteDialog = false" size="small">取消</el-button>
+        <el-button type="danger" @click="confirmDelete" size="small">删除</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
+
 export default {
   name: 'LeftMenu',
+  components: {
+    draggable
+  },
   props: {
     isHidden: {
       type: Boolean,
@@ -43,6 +80,31 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      localMenuItems: [],
+      isDragging: false,
+      showDeleteDialog: false,
+      itemToDelete: null,
+      dragOptions: {
+        animation: 200,
+        ghostClass: 'ghost-item',
+        chosenClass: 'chosen-item',
+        dragClass: 'dragging-item',
+        handle: '.menu-item',
+        delay: 0
+      }
+    }
+  },
+  watch: {
+    menuItems: {
+      handler(newVal) {
+        this.localMenuItems = [...newVal]
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   methods: {
     handleHide() {
       this.$emit('hide')
@@ -50,6 +112,34 @@ export default {
 
     handleSelectMenu(item) {
       this.$emit('select', item)
+    },
+
+    onDragEnd(evt) {
+      this.isDragging = false
+      this.$emit('update:menuItems', this.localMenuItems)
+      this.$emit('drag-end', this.localMenuItems)
+    },
+
+    handleAdd() {
+      this.$emit('add')
+    },
+
+    handleRightClick(item) {
+      this.itemToDelete = item
+      this.showDeleteDialog = true
+    },
+
+    confirmDelete() {
+      if (this.itemToDelete) {
+        const index = this.localMenuItems.findIndex(item => item.id === this.itemToDelete.id)
+        if (index > -1) {
+          this.localMenuItems.splice(index, 1)
+          this.$emit('update:menuItems', this.localMenuItems)
+          this.$emit('delete', this.itemToDelete)
+        }
+      }
+      this.showDeleteDialog = false
+      this.itemToDelete = null
     }
   }
 }
@@ -61,14 +151,14 @@ export default {
   position: absolute;
   top: 70px;
   left: 20px;
-  width: 40px;
+  width: 36px;
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 138, 255, 0.1);
   border-radius: 8px;
   z-index: 90;
   box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
-  padding: 15px 5px;
+  padding: 12px 2px;
   transition: all 0.3s ease;
   overflow: hidden;
   opacity: 1;
@@ -111,19 +201,24 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 40px;
-  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  cursor: grab;
   color: #555;
-  font-size: 20px;
+  font-size: 16px;
   position: relative;
   transition: all 0.3s;
   border-radius: 4px;
-  padding: 0 5px;
+  padding: 0;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(5px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.menu-item:active {
+  cursor: grabbing;
+}
+
 .menu-item:hover {
   background: rgba(0, 138, 255, 0.1);
   color: #008aff;
@@ -136,4 +231,58 @@ export default {
   color: #008aff;
   box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
 }
+
+.ghost-item {
+  opacity: 0.4;
+  background: rgba(0, 138, 255, 0.05);
+  border: 2px dashed rgba(0, 138, 255, 0.3);
+}
+
+.chosen-item {
+  background: rgba(0, 138, 255, 0.2);
+  color: #008aff;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.4);
+}
+
+.dragging-item {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 8px 20px rgba(0, 138, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.add-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  color: #555;
+  font-size: 16px;
+  position: relative;
+  transition: all 0.3s;
+  border-radius: 4px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-top: 10px;
+}
+
+.add-btn:hover {
+  background: rgba(0, 138, 255, 0.1);
+  color: #008aff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
+}
+
+.delete-dialog-content {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  font-size: 14px;
+  color: #606266;
+}
 </style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/childRoom/TopHeader.vue b/ruoyi-ui/src/views/childRoom/TopHeader.vue
index 870d0ad..6398f74 100644
--- a/ruoyi-ui/src/views/childRoom/TopHeader.vue
+++ b/ruoyi-ui/src/views/childRoom/TopHeader.vue
@@ -249,13 +249,46 @@
           <!-- 用户头像 -->
           <el-avatar :size="32" :src="userAvatar" class="user-avatar" />
         </div>
-    </div>
+      </div>
+      
+      <!-- 威力区弹窗 -->
+      <power-zone-dialog 
+        v-model="powerZoneDialogVisible" 
+        :power-zone="currentPowerZone"
+        @save="savePowerZone"
+      />
+      
+      <!-- 比例尺弹窗 -->
+      <scale-dialog 
+        v-model="scaleDialogVisible" 
+        :scale="currentScale"
+        @save="saveScale"
+      />
+      
+      <!-- 外部参数弹窗 -->
+      <external-params-dialog 
+        v-model="externalParamsDialogVisible" 
+        :external-params="currentExternalParams"
+        @save="saveExternalParams"
+        @import-airport="importAirport"
+        @import-route-data="importRoute"
+        @import-landmark="importLandmark"
+      />
   </div>
 </template>
 
 <script>
+import PowerZoneDialog from '../dialogs/PowerZoneDialog'
+import ScaleDialog from '../dialogs/ScaleDialog'
+import ExternalParamsDialog from '../dialogs/ExternalParamsDialog'
+
 export default {
   name: 'TopHeader',
+  components: {
+    PowerZoneDialog,
+    ScaleDialog,
+    ExternalParamsDialog
+  },
   props: {
     roomCode: {
       type: String,
@@ -281,6 +314,12 @@ export default {
   data() {
     return {
       activeTopNav: 'file',
+      powerZoneDialogVisible: false,
+      currentPowerZone: {},
+      scaleDialogVisible: false,
+      currentScale: {},
+      externalParamsDialogVisible: false,
+      currentExternalParams: {},
       topNavItems: [
         { id: 'file', name: '文件', icon: 'el-icon-document' },
         { id: 'edit', name: '编辑', icon: 'el-icon-edit' },
@@ -374,7 +413,8 @@ export default {
     },
     
     toggleScale() {
-      this.$emit('toggle-scale')
+      this.scaleDialogVisible = true
+      this.currentScale = {}
     },
     
     // 地图下拉菜单方法
@@ -392,7 +432,8 @@ export default {
     
     // 空域下拉菜单方法
     powerZone() {
-      this.$emit('power-zone')
+      this.powerZoneDialogVisible = true
+      this.currentPowerZone = {}
     },
     
     threatZone() {
@@ -426,7 +467,8 @@ export default {
     },
     
     externalParams() {
-      this.$emit('external-params')
+      this.externalParamsDialogVisible = true
+      this.currentExternalParams = {}
     },
     
     toggleAirport() {
@@ -456,6 +498,33 @@ export default {
     
     showOnlineMembersDialog() {
       this.$emit('show-online-members')
+    },
+    
+    // 威力区弹窗方法
+    savePowerZone(powerZone) {
+      this.$emit('save-power-zone', powerZone)
+    },
+    
+    // 比例尺弹窗方法
+    saveScale(scale) {
+      this.$emit('save-scale', scale)
+    },
+    
+    // 外部参数弹窗方法
+    saveExternalParams(externalParams) {
+      this.$emit('save-external-params', externalParams)
+    },
+    
+    importAirport(path) {
+      this.$emit('import-airport', path)
+    },
+    
+    importRoute(path) {
+      this.$emit('import-route-data', path)
+    },
+    
+    importLandmark(path) {
+      this.$emit('import-landmark', path)
     }
   }
 }
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index ecea06a..d775ab3 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -49,11 +49,11 @@
       @toggle-2d-3d="toggle2D3D"
       @toggle-ruler="toggleRuler"
       @toggle-grid="toggleGrid"
-      @toggle-scale="toggleScale"
+      @save-scale="saveScale"
       @load-terrain="loadTerrain"
       @change-projection="changeProjection"
       @load-aero-chart="loadAeroChart"
-      @power-zone="powerZone"
+      @save-power-zone="savePowerZone"
       @threat-zone="threatZone"
       @route-calculation="routeCalculation"
       @conflict-display="conflictDisplay"
@@ -61,7 +61,10 @@
       @coordinate-conversion="coordinateConversion"
       @page-layout="pageLayout"
       @data-storage-path="dataStoragePath"
-      @external-params="externalParams"
+      @save-external-params="saveExternalParams"
+      @import-airport="importAirport"
+      @import-route-data="importRouteData"
+      @import-landmark="importLandmark"
       @toggle-airport="toggleAirport"
       @toggle-landmark="toggleLandmark"
       @toggle-route="toggleRoute"
@@ -496,8 +499,10 @@ export default {
       this.$message.success('显示/隐藏网格');
     },
 
-    toggleScale() {
-      this.$message.success('显示/隐藏比例尺');
+    saveScale(scale) {
+      console.log('保存比例尺:', scale)
+      const scaleText = `${scale.scaleNumerator}:${scale.scaleDenominator}`
+      this.$message.success(`比例尺 "${scaleText}" 保存成功`);
     },
 
     // 地图下拉菜单方法
@@ -514,8 +519,9 @@ export default {
     },
 
     // 空域下拉菜单方法
-    powerZone() {
-      this.$message.success('威力区');
+    savePowerZone(powerZone) {
+      console.log('保存威力区:', powerZone)
+      this.$message.success(`威力区 "${powerZone.name}" 保存成功`);
     },
 
     threatZone() {
@@ -548,8 +554,24 @@ export default {
       this.$message.success('数据存储路径');
     },
 
-    externalParams() {
-      this.$message.success('外部参数');
+    saveExternalParams(externalParams) {
+      console.log('保存外部参数:', externalParams)
+      this.$message.success('外部参数保存成功');
+    },
+
+    importAirport(path) {
+      console.log('导入机场:', path)
+      this.$message.success('机场数据导入成功');
+    },
+
+    importRouteData(path) {
+      console.log('导入航路:', path)
+      this.$message.success('航路数据导入成功');
+    },
+
+    importLandmark(path) {
+      console.log('导入地标:', path)
+      this.$message.success('地标数据导入成功');
     },
 
     toggleAirport() {
@@ -624,15 +646,6 @@ export default {
       if (item.id === 'deduction') {
         // 点击推演按钮，显示/隐藏K时弹出框
         this.showKTimePopup = !this.showKTimePopup;
-        if (this.showKTimePopup) {
-          this.$message.info('显示推演时钟控制');
-        } else {
-          this.$message.info('隐藏推演时钟控制');
-        }
-      } else {
-        // 其他菜单的原有逻辑
-        this.$message.info(`选择菜单: ${item.name}`);
-
       }
     },
 
diff --git a/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue b/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue
new file mode 100644
index 0000000..58d9b7a
--- /dev/null
+++ b/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue
@@ -0,0 +1,289 @@
+<template>
+  <div v-if="value" class="external-params-dialog">
+    <div class="dialog-content">
+      <div class="dialog-header">
+        <h3>外部参数设置</h3>
+        <div class="close-btn" @click="closeDialog">×</div>
+      </div>
+      
+      <div class="dialog-body">
+        <el-form :model="formData" ref="formRef" label-width="100px" size="small">
+          <el-divider content-position="left">数据卡数据</el-divider>
+          
+          <el-form-item label="数据卡路径">
+            <el-input v-model="formData.dataCardPath" placeholder="请选择数据卡路径">
+              <el-button slot="append" icon="el-icon-folder-opened" @click="selectDataCardPath">浏览</el-button>
+            </el-input>
+          </el-form-item>
+          
+          <el-form-item label="数据格式">
+            <el-select v-model="formData.dataCardFormat" placeholder="请选择数据格式" style="width: 100%;">
+              <el-option label="XML" value="xml"></el-option>
+              <el-option label="JSON" value="json"></el-option>
+              <el-option label="CSV" value="csv"></el-option>
+              <el-option label="TXT" value="txt"></el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-divider content-position="left">GPS数据</el-divider>
+          
+          <el-form-item label="GPS数据源">
+            <el-select v-model="formData.gpsDataSource" placeholder="请选择GPS数据源" style="width: 100%;">
+              <el-option label="内置GPS" value="internal"></el-option>
+              <el-option label="外部GPS设备" value="external"></el-option>
+              <el-option label="网络GPS服务" value="network"></el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item label="GPS端口">
+            <el-input v-model="formData.gpsPort" placeholder="请输入GPS端口"></el-input>
+          </el-form-item>
+          
+          <el-form-item label="波特率">
+            <el-select v-model="formData.gpsBaudRate" placeholder="请选择波特率" style="width: 100%;">
+              <el-option label="9600" value="9600"></el-option>
+              <el-option label="19200" value="19200"></el-option>
+              <el-option label="38400" value="38400"></el-option>
+              <el-option label="57600" value="57600"></el-option>
+              <el-option label="115200" value="115200"></el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item label="刷新频率">
+            <el-input-number 
+              v-model="formData.gpsRefreshRate" 
+              :min="1" 
+              :max="60"
+              placeholder="请输入刷新频率"
+              style="width: 100%;"
+              suffix="秒"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-divider content-position="left">导入设置</el-divider>
+          
+          <el-form-item label="导入机场">
+            <div class="import-section">
+              <el-input v-model="formData.airportPath" placeholder="请选择机场数据文件">
+                <el-button slot="append" icon="el-icon-folder-opened" @click="selectAirportPath">浏览</el-button>
+              </el-input>
+              <el-button type="primary" size="small" @click="importAirport" style="margin-top: 8px;">导入机场</el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="导入航路">
+            <div class="import-section">
+              <el-input v-model="formData.routePath" placeholder="请选择航路数据文件">
+                <el-button slot="append" icon="el-icon-folder-opened" @click="selectRoutePath">浏览</el-button>
+              </el-input>
+              <el-button type="primary" size="small" @click="importRoute" style="margin-top: 8px;">导入航路</el-button>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="导入地标">
+            <div class="import-section">
+              <el-input v-model="formData.landmarkPath" placeholder="请选择地标数据文件">
+                <el-button slot="append" icon="el-icon-folder-opened" @click="selectLandmarkPath">浏览</el-button>
+              </el-input>
+              <el-button type="primary" size="small" @click="importLandmark" style="margin-top: 8px;">导入地标</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveExternalParams">保存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExternalParamsDialog',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    externalParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        dataCardPath: '',
+        dataCardFormat: 'xml',
+        gpsDataSource: 'internal',
+        gpsPort: '',
+        gpsBaudRate: '9600',
+        gpsRefreshRate: 1,
+        airportPath: '',
+        routePath: '',
+        landmarkPath: ''
+      }
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal && this.externalParams) {
+        this.initFormData();
+      }
+    },
+    externalParams(newVal) {
+      if (this.value && newVal) {
+        this.initFormData();
+      }
+    }
+  },
+  methods: {
+    initFormData() {
+      this.formData = {
+        dataCardPath: this.externalParams.dataCardPath || '',
+        dataCardFormat: this.externalParams.dataCardFormat || 'xml',
+        gpsDataSource: this.externalParams.gpsDataSource || 'internal',
+        gpsPort: this.externalParams.gpsPort || '',
+        gpsBaudRate: this.externalParams.gpsBaudRate || '9600',
+        gpsRefreshRate: this.externalParams.gpsRefreshRate || 1,
+        airportPath: this.externalParams.airportPath || '',
+        routePath: this.externalParams.routePath || '',
+        landmarkPath: this.externalParams.landmarkPath || ''
+      };
+    },
+    selectDataCardPath() {
+      this.$message.info('选择数据卡路径');
+    },
+    selectAirportPath() {
+      this.$message.info('选择机场数据文件');
+    },
+    selectRoutePath() {
+      this.$message.info('选择航路数据文件');
+    },
+    selectLandmarkPath() {
+      this.$message.info('选择地标数据文件');
+    },
+    importAirport() {
+      if (!this.formData.airportPath) {
+        this.$message.warning('请先选择机场数据文件');
+        return;
+      }
+      this.$message.success('机场数据导入成功');
+      this.$emit('import-airport', this.formData.airportPath);
+    },
+    importRoute() {
+      if (!this.formData.routePath) {
+        this.$message.warning('请先选择航路数据文件');
+        return;
+      }
+      this.$message.success('航路数据导入成功');
+      this.$emit('import-route', this.formData.routePath);
+    },
+    importLandmark() {
+      if (!this.formData.landmarkPath) {
+        this.$message.warning('请先选择地标数据文件');
+        return;
+      }
+      this.$message.success('地标数据导入成功');
+      this.$emit('import-landmark', this.formData.landmarkPath);
+    },
+    closeDialog() {
+      this.$emit('input', false);
+    },
+    saveExternalParams() {
+      this.$emit('save', {
+        ...this.externalParams,
+        ...this.formData
+      });
+      this.closeDialog();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.external-params-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 80px;
+  pointer-events: none;
+}
+
+.dialog-content {
+  position: relative;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: dialog-fade-in 0.3s ease;
+  pointer-events: auto;
+}
+
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.dialog-body {
+  padding: 20px;
+}
+
+.import-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid #e8e8e8;
+  gap: 10px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/dialogs/PowerZoneDialog.vue b/ruoyi-ui/src/views/dialogs/PowerZoneDialog.vue
new file mode 100644
index 0000000..0fd57a3
--- /dev/null
+++ b/ruoyi-ui/src/views/dialogs/PowerZoneDialog.vue
@@ -0,0 +1,341 @@
+<template>
+  <div v-if="value" class="power-zone-dialog">
+    <div class="dialog-content">
+      <div class="dialog-header">
+        <h3>威力区编辑</h3>
+        <div class="close-btn" @click="closeDialog">×</div>
+      </div>
+      
+      <div class="dialog-body">
+        <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="small">
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入威力区名称"></el-input>
+          </el-form-item>
+          
+          <el-form-item label="字体" prop="font">
+            <el-select v-model="formData.font" placeholder="请选择字体" style="width: 100%;">
+              <el-option label="微软雅黑" value="Microsoft YaHei"></el-option>
+              <el-option label="宋体" value="SimSun"></el-option>
+              <el-option label="黑体" value="SimHei"></el-option>
+              <el-option label="楷体" value="KaiTi"></el-option>
+              <el-option label="Arial" value="Arial"></el-option>
+              <el-option label="Times New Roman" value="Times New Roman"></el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item label="图形类型" prop="shapeType">
+            <el-radio-group v-model="formData.shapeType" @change="handleShapeChange">
+              <el-radio-button label="rectangle">矩形</el-radio-button>
+              <el-radio-button label="circle">圆形</el-radio-button>
+              <el-radio-button label="sector">扇形</el-radio-button>
+              <el-radio-button label="double180">双180°</el-radio-button>
+              <el-radio-button label="polygon">任意图形</el-radio-button>
+              <el-radio-button label="point">圆点</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          
+          <el-form-item label="位置" prop="location">
+            <div class="location-inputs">
+              <el-input v-model="formData.location.lat" placeholder="纬度" style="width: 120px;"></el-input>
+              <span class="location-separator">,</span>
+              <el-input v-model="formData.location.lng" placeholder="经度" style="width: 120px;"></el-input>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="半径" prop="radius" v-if="formData.shapeType === 'circle' || formData.shapeType === 'sector' || formData.shapeType === 'double180'">
+            <el-input-number 
+              v-model="formData.radius" 
+              :min="0" 
+              placeholder="请输入半径"
+              style="width: 100%;"
+              suffix="km"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="角度" prop="angle" v-if="formData.shapeType === 'sector'">
+            <el-input-number 
+              v-model="formData.angle" 
+              :min="0" 
+              :max="360"
+              placeholder="请输入角度"
+              style="width: 100%;"
+              suffix="°"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="方向" prop="direction" v-if="formData.shapeType === 'sector' || formData.shapeType === 'double180'">
+            <el-input-number 
+              v-model="formData.direction" 
+              :min="0" 
+              :max="360"
+              placeholder="请输入方向"
+              style="width: 100%;"
+              suffix="°"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="宽度" prop="width" v-if="formData.shapeType === 'rectangle'">
+            <el-input-number 
+              v-model="formData.width" 
+              :min="0" 
+              placeholder="请输入宽度"
+              style="width: 100%;"
+              suffix="km"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="高度" prop="height" v-if="formData.shapeType === 'rectangle'">
+            <el-input-number 
+              v-model="formData.height" 
+              :min="0" 
+              placeholder="请输入高度"
+              style="width: 100%;"
+              suffix="km"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="旋转角度" prop="rotation" v-if="formData.shapeType === 'rectangle'">
+            <el-input-number 
+              v-model="formData.rotation" 
+              :min="0" 
+              :max="360"
+              placeholder="请输入旋转角度"
+              style="width: 100%;"
+              suffix="°"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="填充颜色" prop="fillColor">
+            <el-color-picker v-model="formData.fillColor" show-alpha></el-color-picker>
+          </el-form-item>
+          
+          <el-form-item label="边框颜色" prop="borderColor">
+            <el-color-picker v-model="formData.borderColor" show-alpha></el-color-picker>
+          </el-form-item>
+          
+          <el-form-item label="边框宽度" prop="borderWidth">
+            <el-input-number 
+              v-model="formData.borderWidth" 
+              :min="0" 
+              :max="10"
+              placeholder="请输入边框宽度"
+              style="width: 100%;"
+              suffix="px"
+            ></el-input-number>
+          </el-form-item>
+          
+          <el-form-item label="透明度" prop="opacity">
+            <el-slider 
+              v-model="formData.opacity" 
+              :min="0" 
+              :max="1" 
+              :step="0.1"
+              style="width: 100%;"
+            ></el-slider>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="savePowerZone">保存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PowerZoneDialog',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    powerZone: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        font: 'Microsoft YaHei',
+        shapeType: 'circle',
+        location: {
+          lat: '',
+          lng: ''
+        },
+        radius: 0,
+        angle: 0,
+        direction: 0,
+        width: 0,
+        height: 0,
+        rotation: 0,
+        fillColor: 'rgba(255, 0, 0, 0.3)',
+        borderColor: 'rgba(255, 0, 0, 1)',
+        borderWidth: 2,
+        opacity: 0.3
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入威力区名称', trigger: 'blur' }
+        ],
+        font: [
+          { required: true, message: '请选择字体', trigger: 'change' }
+        ],
+        shapeType: [
+          { required: true, message: '请选择图形类型', trigger: 'change' }
+        ],
+        location: [
+          { required: true, message: '请输入位置', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal && this.powerZone) {
+        this.initFormData();
+      }
+    },
+    powerZone(newVal) {
+      if (this.value && newVal) {
+        this.initFormData();
+      }
+    }
+  },
+  methods: {
+    initFormData() {
+      this.formData = {
+        name: this.powerZone.name || '',
+        font: this.powerZone.font || 'Microsoft YaHei',
+        shapeType: this.powerZone.shapeType || 'circle',
+        location: {
+          lat: this.powerZone.lat || '',
+          lng: this.powerZone.lng || ''
+        },
+        radius: this.powerZone.radius || 0,
+        angle: this.powerZone.angle || 0,
+        direction: this.powerZone.direction || 0,
+        width: this.powerZone.width || 0,
+        height: this.powerZone.height || 0,
+        rotation: this.powerZone.rotation || 0,
+        fillColor: this.powerZone.fillColor || 'rgba(255, 0, 0, 0.3)',
+        borderColor: this.powerZone.borderColor || 'rgba(255, 0, 0, 1)',
+        borderWidth: this.powerZone.borderWidth || 2,
+        opacity: this.powerZone.opacity || 0.3
+      };
+    },
+    handleShapeChange() {
+    },
+    closeDialog() {
+      this.$emit('input', false);
+    },
+    savePowerZone() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$emit('save', {
+            ...this.powerZone,
+            ...this.formData,
+            lat: this.formData.location.lat,
+            lng: this.formData.location.lng
+          });
+          this.closeDialog();
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.power-zone-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 80px;
+  pointer-events: none;
+}
+
+.dialog-content {
+  position: relative;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: dialog-fade-in 0.3s ease;
+  pointer-events: auto;
+}
+
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.dialog-body {
+  padding: 20px;
+}
+
+.location-inputs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.location-separator {
+  color: #999;
+  margin: 0 5px;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid #e8e8e8;
+  gap: 10px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/dialogs/ScaleDialog.vue b/ruoyi-ui/src/views/dialogs/ScaleDialog.vue
new file mode 100644
index 0000000..4015c8e
--- /dev/null
+++ b/ruoyi-ui/src/views/dialogs/ScaleDialog.vue
@@ -0,0 +1,223 @@
+<template>
+  <div v-if="value" class="scale-dialog">
+    <div class="dialog-content">
+      <div class="dialog-header">
+        <h3>比例尺设置</h3>
+        <div class="close-btn" @click="closeDialog">×</div>
+      </div>
+      
+      <div class="dialog-body">
+        <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="small">
+          <el-form-item label="比例尺" prop="scale">
+            <div class="scale-inputs">
+              <el-input-number 
+                v-model="formData.scaleNumerator" 
+                :min="1" 
+                placeholder="分子"
+                style="width: 150px;"
+              ></el-input-number>
+              <span class="scale-separator">:</span>
+              <el-input-number 
+                v-model="formData.scaleDenominator" 
+                :min="1" 
+                placeholder="分母"
+                style="width: 150px;"
+              ></el-input-number>
+            </div>
+          </el-form-item>
+          
+          <el-form-item label="单位" prop="unit">
+            <el-select v-model="formData.unit" placeholder="请选择单位" style="width: 100%;">
+              <el-option label="米" value="m"></el-option>
+              <el-option label="千米" value="km"></el-option>
+              <el-option label="英尺" value="ft"></el-option>
+              <el-option label="英里" value="mi"></el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item label="显示位置" prop="position">
+            <el-select v-model="formData.position" placeholder="请选择显示位置" style="width: 100%;">
+              <el-option label="左下角" value="bottom-left"></el-option>
+              <el-option label="右下角" value="bottom-right"></el-option>
+              <el-option label="左上角" value="top-left"></el-option>
+              <el-option label="右上角" value="top-right"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveScale">保存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScaleDialog',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    scale: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        scaleNumerator: 1,
+        scaleDenominator: 1000,
+        unit: 'km',
+        position: 'bottom-right'
+      },
+      rules: {
+        scaleNumerator: [
+          { required: true, message: '请输入分子', trigger: 'blur' }
+        ],
+        scaleDenominator: [
+          { required: true, message: '请输入分母', trigger: 'blur' }
+        ],
+        unit: [
+          { required: true, message: '请选择单位', trigger: 'change' }
+        ],
+        position: [
+          { required: true, message: '请选择显示位置', trigger: 'change' }
+        ]
+      }
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal && this.scale) {
+        this.initFormData();
+      }
+    },
+    scale(newVal) {
+      if (this.value && newVal) {
+        this.initFormData();
+      }
+    }
+  },
+  methods: {
+    initFormData() {
+      this.formData = {
+        scaleNumerator: this.scale.scaleNumerator || 1,
+        scaleDenominator: this.scale.scaleDenominator || 1000,
+        unit: this.scale.unit || 'km',
+        position: this.scale.position || 'bottom-right'
+      };
+    },
+    closeDialog() {
+      this.$emit('input', false);
+    },
+    saveScale() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$emit('save', {
+            ...this.scale,
+            ...this.formData
+          });
+          this.closeDialog();
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.scale-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 80px;
+  pointer-events: none;
+}
+
+.dialog-content {
+  position: relative;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: dialog-fade-in 0.3s ease;
+  pointer-events: auto;
+}
+
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.dialog-body {
+  padding: 20px;
+}
+
+.scale-inputs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.scale-separator {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  margin: 0 5px;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid #e8e8e8;
+  gap: 10px;
+}
+</style>