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

<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-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: 20,
        unit: 'km'
      },
      rules: {
        scaleNumerator: [
          { required: true, message: '请输入分子', trigger: 'blur' }
        ],
        scaleDenominator: [
          { required: true, message: '请输入分母', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请选择单位', trigger: 'change' }
        ]
      }
    };
  },
  watch: {
    value(newVal) {
      if (newVal && this.scale) {
        this.initFormData();
      }
    },
    scale(newVal) {
      if (this.value && newVal) {
        this.initFormData();
      }
    },
    'formData.unit'(newVal) {
      if (this.value) {
        this.$emit('unit-change', newVal);
      }
    }
  },
  methods: {
    initFormData() {
      this.formData = {
        scaleNumerator: this.scale.scaleNumerator || 1,
        scaleDenominator: this.scale.scaleDenominator || 20,
        unit: this.scale.unit || 'km'
      };
    },
    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: 400px;
  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: 12px 16px;
  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: 16px;
}

.quick-scale-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-scale-buttons .el-button {
  margin: 0;
}

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