You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
365 lines
11 KiB
365 lines
11 KiB
<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>
|
|
|