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

<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: {
    degreesToDMS(decimalDegrees) {
      const degrees = Math.floor(decimalDegrees)
      const minutesDecimal = (decimalDegrees - degrees) * 60
      const minutes = Math.floor(minutesDecimal)
      const seconds = ((minutesDecimal - minutes) * 60).toFixed(2)
      return `${degrees}°${minutes}'${seconds}"`
    },
    dmsToDegrees(dms) {
      const match = dms.match(/^(-?\d+)°(\d+)'([\d.]+)"$/)
      if (!match) return null
      const degrees = parseFloat(match[1])
      const minutes = parseFloat(match[2])
      const seconds = parseFloat(match[3])
      const sign = degrees < 0 ? -1 : 1
      return sign * (Math.abs(degrees) + minutes / 60 + seconds / 3600)
    },
    initFormData() {
      this.formData = {
        name: this.powerZone.name || '',
        font: this.powerZone.font || 'Microsoft YaHei',
        shapeType: this.powerZone.shapeType || 'circle',
        location: {
          lat: this.powerZone.lat ? this.degreesToDMS(this.powerZone.lat) : '',
          lng: this.powerZone.lng ? this.degreesToDMS(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) {
          const latDegrees = this.dmsToDegrees(this.formData.location.lat);
          const lngDegrees = this.dmsToDegrees(this.formData.location.lng);
          
          if (latDegrees === null || lngDegrees === null) {
            this.$message.error('请输入有效的度分秒格式！格式：39°54\'33.48"');
            return;
          }
          
          this.$emit('save', {
            ...this.powerZone,
            ...this.formData,
            lat: latDegrees,
            lng: lngDegrees
          });
          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>