cesium-map-object/ruoyi-ui/src/views/dialogs/PlatformEditDialog.vue

<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>
        <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="位置">
            <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="speed">
            <el-input v-model="formData.speed" placeholder="请输入速度" suffix="km/h"></el-input>
          </el-form-item>

          <el-form-item label="油耗表" prop="fuelConsumption">
            <el-input-number
              v-model="formData.fuelConsumption"
              :min="0"
              :precision="2"
              placeholder="请输入油耗"
              style="width: 100%;"
              suffix="L/km"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="高度限制">
            <div class="altitude-inputs">
              <el-input-number
                v-model="formData.altitude.min"
                :min="0"
                placeholder="最低高度"
                style="width: 120px;"
                suffix="m"
              ></el-input-number>
              <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="威力区/扇区">
            <div class="sector-inputs">
              <el-input-number
                v-model="formData.sector.radius"
                :min="0"
                placeholder="半径"
                style="width: 100px;"
                suffix="km"
              ></el-input-number>
              <el-input-number
                v-model="formData.sector.angle"
                :min="0"
                :max="360"
                placeholder="角度"
                style="width: 100px;"
                suffix="°"
              ></el-input-number>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="savePlatform">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlatformEditDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    platform: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {
        name: '',
        location: {
          lat: '',
          lng: ''
        },
        speed: '',
        fuelConsumption: 0,
        altitude: {
          min: 0,
          max: 0
        },
        sector: {
          radius: 0,
          angle: 0
        }
      },
      rules: {
        name: [
          { 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) {
        this.initFormData();
      }
    },
    platform(newVal) {
      if (this.value && newVal) {
        this.initFormData();
      }
    }
  },
  methods: {
    initFormData() {
      // 初始化表单数据，如果平台有相关属性则使用，否则使用默认值
      this.formData = {
        name: this.platform.name || '',
        location: {
          lat: this.platform.lat || '',
          lng: this.platform.lng || ''
        },
        speed: this.platform.speed || '',
        fuelConsumption: this.platform.fuelConsumption || 0,
        altitude: {
          min: this.platform.minAltitude || 0,
          max: this.platform.maxAltitude || 0
        },
        sector: {
          radius: this.platform.sectorRadius || 0,
          angle: this.platform.sectorAngle || 0
        }
      };
    },
    closeDialog() {
      this.$emit('input', false);
    },
    savePlatform() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 发送保存事件，将更新后的数据传递给父组件
          this.$emit('save', {
            ...this.platform,
            ...this.formData,
            lat: this.formData.location.lat,
            lng: this.formData.location.lng,
            minAltitude: this.formData.altitude.min,
            maxAltitude: this.formData.altitude.max,
            sectorRadius: this.formData.sector.radius,
            sectorAngle: this.formData.sector.angle
          });
          this.closeDialog();
        }
      });
    }
  }
};
</script>

<style scoped>
.platform-edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.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;
}

@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,
.altitude-inputs,
.sector-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.location-separator,
.altitude-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>