新增、编辑、删除平台，编辑平台弹窗的样式

ruoyi-ui/src/views/cesiumMap/ContextMenu.vue

@@ -4,8 +4,6 @@
       <div class="menu-item" @click="handleDelete">
         <span class="menu-icon">🗑️</span>
         <span>删除</span>
-        <span>删除</span>
-<!--   111     -->
       </div>
     </div>
 

ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue

@@ -3,10 +3,9 @@
     <div class="tooltip-content">
       {{ content }}
     </div>
-    <span>删除</span>
   </div>
 </template>
-<!--   111     -->
+
 <script>
 export default {
   name: 'HoverTooltip',

ruoyi-ui/src/views/childRoom/RightPanel.vue

@@ -178,8 +178,13 @@
                     <div class="platform-name">{{ platform.name }}</div>
                     <div class="platform-type">{{ platform.type }}</div>
                   </div>
-                  <div class="platform-status">
+                  <div class="platform-action" style="margin-left: auto; padding-right: 10px;">
-                    <span class="status-dot" :class="platform.status"></span>
+                    <i
+                      class="el-icon-delete"
+                      title="删除平台"
+                      style="color: #F56C6C; cursor: pointer;"
+                      @click.stop="$emit('delete-platform', platform)"
+                    ></i>
                   </div>
                 </div>
               </div>
@@ -204,8 +209,8 @@
                     <div class="platform-name">{{ platform.name }}</div>
                     <div class="platform-type">{{ platform.type }}</div>
                   </div>
-                  <div class="platform-status">
+                  <div class="platform-action" style="margin-left: auto; padding-right: 10px;">
-                    <span class="status-dot" :class="platform.status"></span>
+                    <i class="el-icon-delete" title="删除平台" style="color: #F56C6C; cursor: pointer;" @click.stop="$emit('delete-platform', platform)"></i>
                   </div>
                 </div>
               </div>
@@ -230,8 +235,8 @@
                     <div class="platform-name">{{ platform.name }}</div>
                     <div class="platform-type">{{ platform.type }}</div>
                   </div>
-                  <div class="platform-status">
+                  <div class="platform-action" style="margin-left: auto; padding-right: 10px;">
-                    <span class="status-dot" :class="platform.status"></span>
+                    <i class="el-icon-delete" title="删除平台" style="color: #F56C6C; cursor: pointer;" @click.stop="$emit('delete-platform', platform)"></i>
                   </div>
                 </div>
               </div>

ruoyi-ui/src/views/childRoom/index.vue

@@ -141,6 +141,7 @@
       @resolve-conflict="resolveConflict"
       @run-conflict-check="runConflictCheck"
       @open-platform-dialog="openPlatformDialog"
+      @delete-platform="handleDeletePlatform"
       @open-import-dialog="showImportDialog = true"
     />
     <!-- 左下角工具面板 -->
@@ -298,7 +299,7 @@ import TopHeader from './TopHeader'
 import { listScenario,addScenario,delScenario} from "@/api/system/scenario";
 import { listRoutes, getRoutes, addRoutes,delRoutes } from "@/api/system/routes";
 import { updateWaypoints } from "@/api/system/waypoints";
-import { listLib,addLib } from "@/api/system/lib";
+import { listLib,addLib,delLib} from "@/api/system/lib";
 import PlatformImportDialog from "@/views/dialogs/PlatformImportDialog.vue";
 export default {
   name: 'MissionPlanningView',
@@ -555,13 +556,27 @@ export default {
         console.error("查找失败！账本内IDs:", waypointsList.map(w => w.id));
       }
     },
+    /** 删除平台库数据 */
+    handleDeletePlatform(platform) {
+      // 安全确认：防止误操作
+      this.$modal.confirm('是否确认删除名称为 "' + platform.name + '" 的平台数据？').then(() => {
+        // 调用后端接口删除
+        return delLib(platform.id);
+      }).then(() => {
+        // 删除成功后的反馈
+        this.$modal.msgSuccess("删除成功");
+        //重新分拣列表，让页面上的卡片消失
+        this.getPlatformList();
+      }).catch(() => {
+      });
+    },
     // 显示在线成员弹窗
     showOnlineMembersDialog() {
       this.showOnlineMembers = true;
     },
     // 平台编辑弹窗相关方法
     openPlatformDialog(platform) {
-      this.selectedPlatform = platform;
+      this.selectedPlatform = JSON.parse(JSON.stringify(platform));
       this.showPlatformDialog = true;
     },
     /** 从数据库查询并分拣平台库数据 */
@@ -576,6 +591,7 @@ export default {
             id: item.id,
             name: item.name,
             type: item.type,
+            specsJson: item.specsJson,
             imageUrl: item.iconUrl || '',
             icon: item.iconUrl ? '' : 'el-icon-picture-outline',
             status: 'ready'
@@ -619,9 +635,13 @@ export default {
         console.error("上传出错：", err);
       });
     },
-    updatePlatform(updatedPlatform) {
+    updatePlatform() {
-      // 这里可以添加实际的更新逻辑
+      // 刷新平台列表
-      this.$message.success('平台更新成功');
+      this.getPlatformList();
+      // 提示成功
+      this.$modal.msgSuccess('平台配置更新成功');
+      // 关闭弹窗
+      this.showPlatformDialog = false;
     },
     // 航线编辑弹窗相关方法
     openRouteDialog(route) {

ruoyi-ui/src/views/dialogs/PlatformEditDialog.vue

@@ -1,207 +1,278 @@
 <template>
   <div v-if="value" class="platform-edit-dialog">
-    <!-- 遮罩层 -->
     <div class="dialog-overlay" @click="closeDialog"></div>
-
-    <!-- 弹窗内容 -->
     <div class="dialog-content">
       <div class="dialog-header">
-        <h3>平台编辑</h3>
+        <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 :model="formData" :rules="rules" ref="formRef" label-width="100px" size="small">
-          <!-- 基本信息 -->
+          <el-form-item label="平台图标">
+            <el-upload
+              class="avatar-uploader"
+              :action="uploadImgUrl"
+              :headers="headers"
+              :show-file-list="false"
+              :on-success="handleUploadSuccess"
+              name="file"
+            >
+              <div class="upload-preview-box">
+                <img v-if="formData.imageUrl" :src="formatImg(formData.imageUrl)" class="avatar-img" />
+                <i v-else class="el-icon-plus avatar-icon"></i>
+                <div class="upload-text">更换图标</div>
+              </div>
+            </el-upload>
+          </el-form-item>
+
           <el-form-item label="名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入平台名称"></el-input>
           </el-form-item>
 
-          <el-form-item label="位置">
+          <el-form-item label="类型">
-            <div class="location-inputs">
+            <el-select v-model="formData.type" placeholder="选择类型" style="width: 100%;">
-              <el-input v-model="formData.location.lat" placeholder="纬度" style="width: 120px;"></el-input>
+              <el-option label="空中" value="Air"></el-option>
-              <span class="location-separator">,</span>
+              <el-option label="海上" value="Sea"></el-option>
-              <el-input v-model="formData.location.lng" placeholder="经度" style="width: 120px;"></el-input>
+              <el-option label="地面" value="Ground"></el-option>
-            </div>
+            </el-select>
           </el-form-item>
 
-          <el-form-item label="速度" prop="speed">
+          <p class="group-title-new">性能规格</p>
-            <el-input v-model="formData.speed" placeholder="请输入速度" suffix="km/h"></el-input>
+          <div class="specs-container">
+            <el-form-item label="巡航速度">
+              <div class="input-with-del">
+                <el-input v-model="specs.speed" placeholder="km/h"></el-input>
+                <el-button type="text" icon="el-icon-close" class="del-icon" @click="specs.speed = ''"></el-button>
+              </div>
             </el-form-item>
 
-          <el-form-item label="油耗表" prop="fuelConsumption">
+            <el-form-item label="单位油耗">
-            <el-input-number
+              <div class="input-with-del">
-              v-model="formData.fuelConsumption"
+                <el-input-number v-model="specs.fuelConsumption" :precision="2" style="width: 100%"></el-input-number>
-              :min="0"
+                <el-button type="text" icon="el-icon-close" class="del-icon" @click="specs.fuelConsumption = 0"></el-button>
-              :precision="2"
+              </div>
-              placeholder="请输入油耗"
-              style="width: 100%;"
-              suffix="L/km"
-            ></el-input-number>
             </el-form-item>
 
             <el-form-item label="高度限制">
-            <div class="altitude-inputs">
+              <div class="input-with-del">
-              <el-input-number
+                <div class="range-row">
-                v-model="formData.altitude.min"
+                  <el-input-number v-model="specs.minAlt" placeholder="最低" controls-position="right"></el-input-number>
-                :min="0"
+                  <span>~</span>
-                placeholder="最低高度"
+                  <el-input-number v-model="specs.maxAlt" placeholder="最高" controls-position="right"></el-input-number>
-                style="width: 120px;"
+                  <span class="unit-text">m</span>
-                suffix="m"
+                </div>
-              ></el-input-number>
+                <el-button type="text" icon="el-icon-close" class="del-icon" @click="resetAlt"></el-button>
-              <span class="altitude-separator">~</span>
-              <el-input-number
-                v-model="formData.altitude.max"
-                :min="0"
-                placeholder="最高高度"
-                style="width: 120px;"
-                suffix="m"
-              ></el-input-number>
               </div>
             </el-form-item>
 
-          <el-form-item label="威力区/扇区">
+            <el-form-item label="威力扇区">
-            <div class="sector-inputs">
+              <div class="input-with-del">
-              <el-input-number
+                <div class="range-row">
-                v-model="formData.sector.radius"
+                  <el-input-number v-model="specs.radius" placeholder="半径" controls-position="right"></el-input-number>
-                :min="0"
+                  <span class="unit-text">km /</span>
-                placeholder="半径"
+                  <el-input-number v-model="specs.angle" :max="360" placeholder="角度" controls-position="right"></el-input-number>
-                style="width: 100px;"
+                  <span class="unit-text">°</span>
-                suffix="km"
+                </div>
-              ></el-input-number>
+                <el-button type="text" icon="el-icon-close" class="del-icon" @click="resetSector"></el-button>
-              <el-input-number
-                v-model="formData.sector.angle"
-                :min="0"
-                :max="360"
-                placeholder="角度"
-                style="width: 100px;"
-                suffix="°"
-              ></el-input-number>
               </div>
             </el-form-item>
+          </div>
+
+          <div style="display: flex; justify-content: space-between; align-items: center; margin: 25px 0 10px;">
+            <p class="group-title-new" style="margin: 0;">扩展参数</p>
+            <div class="add-prop-container">
+              <el-button
+                type="primary"
+                plain
+                size="mini"
+                icon="el-icon-plus"
+                @click="addProp"
+              >添加扩展参数</el-button>
+            </div>
+          </div>
+
+          <div v-for="(item, index) in customProps" :key="index" class="custom-prop-row">
+            <el-input v-model="item.key" placeholder="属性名" style="width: 35%"></el-input>
+            <el-input v-model="item.value" placeholder="属性值" style="width: 50%"></el-input>
+            <i class="el-icon-delete delete-prop-icon" @click="removeProp(index)"></i>
+          </div>
         </el-form>
       </div>
 
-      <div class="dialog-footer">
+      <div class="dialog-footer-new" style="display: flex; justify-content: center; gap: 40px; padding-top: 10px; padding-bottom: 20px;">
-        <el-button @click="closeDialog">取消</el-button>
+        <el-button size="medium" @click="closeDialog" style="width: 120px; border-radius: 20px;">取 消</el-button>
-        <el-button type="primary" @click="savePlatform">保存</el-button>
+        <el-button size="medium" type="primary" @click="savePlatform" style="width: 120px; border-radius: 20px;">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getToken } from "@/utils/auth";
+import { updateLib } from "@/api/system/lib";
+
 export default {
   name: 'PlatformEditDialog',
   props: {
-    value: {
+    value: { type: Boolean, default: false },
-      type: Boolean,
+    platform: { type: Object, default: () => ({}) }
-      default: false
-    },
-    platform: {
-      type: Object,
-      default: () => ({})
-    }
   },
   data() {
     return {
+      // 上传相关配置
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
+      headers: { Authorization: "Bearer " + getToken() },
+      // 基础一级字段
       formData: {
         name: '',
-        location: {
+        type: '',
-          lat: '',
+        imageUrl: ''
-          lng: ''
       },
+      //固定的性能参数
+      specs: {
         speed: '',
         fuelConsumption: 0,
-        altitude: {
+        minAlt: 0,
-          min: 0,
+        maxAlt: 0,
-          max: 0
-        },
-        sector: {
         radius: 0,
         angle: 0
-        }
       },
+      //动态自定义属性数组
+      customProps: [],
       rules: {
-        name: [
+        name: [{ required: true, message: '请输入平台名称', trigger: 'blur' }]
-          { required: true, message: '请输入平台名称', trigger: 'blur' }
-        ],
-        speed: [
-          { required: true, message: '请输入速度', trigger: 'blur' },
-          { type: 'number', message: '速度必须为数字', trigger: 'blur' }
-        ],
-        fuelConsumption: [
-          { type: 'number', message: '油耗必须为数字', trigger: 'blur' }
-        ]
       }
     };
   },
   watch: {
     value(newVal) {
-      if (newVal && this.platform) {
+      if (newVal) {
-        this.initFormData();
+        console.log("子组件接收到的原始数据:", this.platform);
-      }
+        this.$nextTick(() => {
-    },
-    platform(newVal) {
-      if (this.value && newVal) {
           this.initFormData();
+        });
       }
     }
   },
   methods: {
+    // 初始化数据，拆解 JSON
     initFormData() {
-      // 初始化表单数据，如果平台有相关属性则使用，否则使用默认值
+      // 基础字段回显
       this.formData = {
         name: this.platform.name || '',
-        location: {
+        type: this.platform.type || '',
-          lat: this.platform.lat || '',
+        imageUrl: this.platform.imageUrl || ''
-          lng: this.platform.lng || ''
+      };
-        },
+      let rawSpecs = {};
-        speed: this.platform.speed || '',
+      try {
-        fuelConsumption: this.platform.fuelConsumption || 0,
+        // 解析 JSON 字符串
-        altitude: {
+        rawSpecs = this.platform.specsJson ? JSON.parse(this.platform.specsJson) : {};
-          min: this.platform.minAltitude || 0,
+      } catch (e) {
-          max: this.platform.maxAltitude || 0
+        console.error("JSON解析失败", e);
-        },
+        rawSpecs = {};
-        sector: {
-          radius: this.platform.sectorRadius || 0,
-          angle: this.platform.sectorAngle || 0
       }
+      // 填充固定参数：使用 ?? (空值合并) 确保 0 也能被正确回显
+      this.specs = {
+        speed: rawSpecs.speed ?? '',
+        fuelConsumption: rawSpecs.fuelConsumption ?? 0,
+        minAlt: rawSpecs.minAlt ?? 0,
+        maxAlt: rawSpecs.maxAlt ??  0,
+        radius: rawSpecs.radius ??  0,
+        angle: rawSpecs.angle ?? 0
       };
+
+      // 提取自定义参数：排除掉固定键名以及系统生成的冗余键名
+      const fixedKeys = [
+        'speed', 'fuelConsumption', 'minAlt', 'maxAlt', 'radius', 'angle',
+        'minAltitude', 'maxAltitude', 'sectorRadius', 'sectorAngle',
+        'origin', 'createTime'
+      ];
+      this.customProps = Object.keys(rawSpecs)
+        .filter(key => !fixedKeys.includes(key))
+        .map(key => ({
+          key: key,
+          value: rawSpecs[key]
+        }));
     },
-    closeDialog() {
+
-      this.$emit('input', false);
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      if (res.code === 200) {
+        this.formData.imageUrl = res.fileName; // 拿到相对路径
+        this.$message.success("图标上传成功");
+      }
     },
+
     savePlatform() {
       this.$refs.formRef.validate((valid) => {
         if (valid) {
-          // 发送保存事件，将更新后的数据传递给父组件
+          // 封装 specs_json 逻辑
-          this.$emit('save', {
+          const finalSpecs = {};
-            ...this.platform,
+          // 过滤掉空值，只保留有用的参数
-            ...this.formData,
+          Object.keys(this.specs).forEach(key => {
-            lat: this.formData.location.lat,
+            const val = this.specs[key];
-            lng: this.formData.location.lng,
+            if (val !== '' && val !== null && val !== undefined) {
-            minAltitude: this.formData.altitude.min,
+              finalSpecs[key] = val;
-            maxAltitude: this.formData.altitude.max,
+            }
-            sectorRadius: this.formData.sector.radius,
+          });
-            sectorAngle: this.formData.sector.angle
+          // 加上自定义参数
+          this.customProps.forEach(item => {
+            if (item.key && item.value) finalSpecs[item.key] = item.value;
           });
+          // 组装发往后端的完整数据包
+          const postData = {
+            id: this.platform.id,
+            name: this.formData.name,
+            type: this.formData.type,
+            iconUrl: this.formData.imageUrl,
+            specsJson: JSON.stringify(finalSpecs)
+          };
+          updateLib(postData).then(response => {
+            // 若依自带的消息通知
+            this.$modal.msgSuccess("修改成功");
+            // 通知父组件
+            this.$emit('save');
             this.closeDialog();
+          }).catch(err => {
+            console.error("更新失败：", err);
+          });
         }
       });
+    },
+
+    addProp() { this.customProps.push({ key: '', value: '' }); },
+    removeProp(index) { this.customProps.splice(index, 1); },
+    closeDialog() { this.$emit('input', false); },
+
+    // 图片显示逻辑
+    formatImg(url) {
+      if (!url) return '';
+      const backendUrl = process.env.VUE_APP_BACKEND_URL;
+      return backendUrl + url.replace(/\/+/g, '/').replace('/dev-api', '');
+    },
+
+    resetAlt() {
+      this.specs.minAlt = 0;
+      this.specs.maxAlt = 0;
+    },
+    resetSector() {
+      this.specs.radius = 0;
+      this.specs.angle = 0;
     }
   }
 };
 </script>
 
 <style scoped>
+/* 1. 弹窗核心容器：增加圆角，优化阴影 */
 .platform-edit-dialog {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1000;
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,83 +284,179 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(4px);
 }
 
 .dialog-content {
   position: relative;
   background: white;
-  border-radius: 8px;
+  border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  width: 90%;
+  width: 550px;
-  max-width: 500px;
+  max-height: 85vh;
-  max-height: 90vh;
+  display: flex;
-  overflow-y: auto;
+  flex-direction: column;
+  overflow: hidden;
   animation: dialog-fade-in 0.3s ease;
 }
 
 @keyframes dialog-fade-in {
-  from {
+  from { opacity: 0; transform: translateY(-20px); }
-    opacity: 0;
+  to { opacity: 1; transform: translateY(0); }
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }
 
+/*  页眉页脚：彻底删掉分割线 */
 .dialog-header {
+  padding: 20px 25px 5px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
+  border-bottom: 1px solid #f2f2f2;
-  border-bottom: 1px solid #e8e8e8;
 }
 
 .dialog-header h3 {
-  margin: 0;
+  font-weight: bold;
-  font-size: 16px;
-  font-weight: 600;
   color: #333;
 }
 
-.close-btn {
+.dialog-footer-new {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  padding: 15px 0 30px; /* 增加底部留白，更自然 */
+}
+
+/* 3. 主体内容与滚动条 */
+.dialog-body {
+  padding: 10px 25px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.dialog-body::-webkit-scrollbar {
+  width: 6px;
+}
+.dialog-body::-webkit-scrollbar-thumb {
+  background: #e0e0e0;
+  border-radius: 10px;
+}
+
+/*  分组标题 */
+.group-title-new {
+  font-size: 13px;
+  font-weight: bold;
+  color: #333;
+  padding: 4px 12px;
+  border-radius: 4px;
+  display: inline-block;
+  margin: 15px 0 10px;
+  border-left: 3px solid #1890ff;
+}
+
+/* 5. 图标预览：强制左对齐 */
+.avatar-uploader {
+  line-height: 0;
+}
+
+.upload-preview-box {
+  width: 64px;
+  height: 64px;
+  border: 2px dashed #e0e0e0;
+  border-radius: 8px;
+  margin: 0; /* 关键：确保与下方输入框对齐 */
+  cursor: pointer;
+  position: relative;
+  transition: 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-preview-box:hover {
+  border-color: #409EFF;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.avatar-icon {
   font-size: 20px;
   color: #999;
-  cursor: pointer;
-  transition: color 0.3s;
 }
 
-.close-btn:hover {
+.upload-text {
-  color: #666;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 10px;
+  text-align: center;
+  opacity: 0;
+  transition: 0.3s;
 }
 
-.dialog-body {
+.upload-preview-box:hover .upload-text {
-  padding: 20px;
+  opacity: 1;
 }
 
-.location-inputs,
+.input-with-del {
-.altitude-inputs,
-.sector-inputs {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 
-.location-separator,
+.range-row {
-.altitude-separator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.unit-text {
   color: #999;
-  margin: 0 5px;
+  font-size: 12px;
+  white-space: nowrap;
 }
 
-.dialog-footer {
+.custom-prop-row {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  gap: 12px;
-  padding: 16px 20px;
+  margin-bottom: 12px;
-  border-top: 1px solid #e8e8e8;
+  padding-left: 100px;
-  gap: 10px;
+}
+
+.delete-prop-icon {
+  color: #F56C6C;
+  cursor: pointer;
+  font-size: 18px;
+  transition: 0.2s;
+}
+
+.delete-prop-icon:hover {
+  transform: scale(1.2);
+}
+
+.close-btn {
+  font-size: 22px;
+  color: #999;
+  cursor: pointer;
+}
+
+.add-prop-container {
+  padding-left: 100px;
+  margin-bottom: 15px;
+}
+
+.dialog-footer-new {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 10px 0 25px;
+  border-top: none;
 }
 </style>

ruoyi-ui/vue.config.js

@@ -22,6 +22,7 @@ const port = process.env.port || process.env.npm_config_port || 80 // 端口
 const cesiumSource = 'node_modules/cesium/Build/Cesium'
 
 module.exports = {
+
   // 部署生产环境和开发环境下的URL。
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
   outputDir: 'dist',