<template>
|
<el-dialog
|
v-model="visible"
|
:title="dialogTitle"
|
class="detection-range-dialog"
|
destroy-on-close
|
@closed="handleClosed"
|
>
|
<div class="dialog-body">
|
<div class="dialog-map">
|
<DeviceMapContainer
|
:online-devices="mapDevices"
|
:show-layer-control="false"
|
container-id="detection-range-map"
|
/>
|
<div class="map-toolbar">
|
<button class="map-btn" type="button" aria-label="编辑范围"></button>
|
<button class="map-btn" type="button" aria-label="定位设备"></button>
|
</div>
|
<div class="map-mini-controls">
|
<button class="map-mini-btn" type="button" aria-label="放大">+</button>
|
<button class="map-mini-btn" type="button" aria-label="缩小">-</button>
|
</div>
|
</div>
|
<div class="dialog-form">
|
<div class="form-title">{{ formTitle }}</div>
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="84px" :disabled="dialogReadonly">
|
<el-form-item label="侦测设备" prop="deviceId">
|
<el-select v-model="formData.deviceId" placeholder="请选择" clearable @change="handleDeviceChange">
|
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="设备类型" prop="deviceType">
|
<el-select v-model="formData.deviceType" placeholder="请选择" clearable>
|
<el-option
|
v-for="item in dictObj.deviceType"
|
:key="item.dictKey"
|
:label="item.dictValue"
|
:value="item.dictKey"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="设备位置" prop="deployLocation">
|
<el-input v-model="formData.deployLocation" placeholder="请选择位置">
|
<template #suffix>
|
<span class="suffix-action">地图选点</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="设备编号" prop="deviceSn">
|
<el-input v-model="formData.deviceSn" placeholder="请输入" clearable />
|
</el-form-item>
|
<el-form-item label="设备型号" prop="deviceModel">
|
<el-input v-model="formData.deviceModel" placeholder="请输入" clearable />
|
</el-form-item>
|
<el-form-item label="覆盖范围" prop="effectiveRangeKm">
|
<el-input-number
|
v-model="formData.effectiveRangeKm"
|
:min="0"
|
:precision="2"
|
:controls="false"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<template v-if="!dialogReadonly" #footer>
|
<el-button @click="handleCancel">取消</el-button>
|
<el-button type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit">保存</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, inject, ref } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import DeviceMapContainer from '@/components/map-container/device-map-container.vue'
|
import {
|
detectionRangeDetailApi,
|
detectionRangePageApi,
|
detectionRangeSubmitApi,
|
} from '@/api/detectionCountermeasure/detectionRange'
|
|
const initForm = () => ({
|
deviceId: '', // 侦测设备ID
|
deviceName: '', // 侦测设备
|
deviceType: '', // 设备类型
|
deployLocation: '', // 设备位置
|
deviceSn: '', // 设备编号
|
deviceModel: '', // 设备型号
|
effectiveRangeKm: null, // 覆盖范围
|
})
|
|
const dictObj = inject('dictObj')
|
const emit = defineEmits(['success'])
|
const formRef = ref(null) // 表单实例
|
const formData = ref(initForm()) // 表单数据
|
const visible = ref(false) // 弹框显隐
|
const dialogMode = ref('add') // 弹框模式
|
const submitting = ref(false) // 提交中
|
const mapDevices = ref([])
|
const deviceOptions = ref([])
|
const dialogReadonly = computed(() => dialogMode.value === 'view')
|
const dialogTitle = computed(() => {
|
if (dialogMode.value === 'edit') {
|
return '编辑'
|
} else if (dialogMode.value === 'view') {
|
return '查看'
|
}
|
return '新增'
|
})
|
const formTitle = computed(() => {
|
if (dialogMode.value === 'edit') {
|
return '编辑侦测范围'
|
}
|
if (dialogMode.value === 'view') {
|
return '查看侦测范围'
|
}
|
return '新增侦测范围'
|
})
|
|
const rules = {
|
deviceId: [{ required: true, message: '请选择侦测设备', trigger: ['blur', 'change'] }],
|
deviceType: [{ required: true, message: '请选择设备类型', trigger: ['blur', 'change'] }],
|
effectiveRangeKm: [{ required: true, message: '请输入覆盖范围', trigger: ['blur', 'change'] }],
|
}
|
|
function handleDeviceChange(value) {
|
const target = deviceOptions.value.find(item => item.value === value)
|
const raw = target?.raw
|
if (!raw) return
|
formData.value.deviceId = raw.id ?? formData.value.deviceId
|
formData.value.deviceName = raw.deviceName ?? formData.value.deviceName
|
formData.value.deviceType = raw.deviceType ?? formData.value.deviceType
|
formData.value.deviceModel = raw.deviceModel ?? formData.value.deviceModel
|
formData.value.deviceSn = raw.deviceSn ?? raw.deviceSn ?? raw.deviceNo ?? formData.value.deviceCode
|
formData.value.deployLocation =
|
raw.deployLocation ?? raw.address ?? raw.location ?? raw.deployAddress ?? formData.value.deployLocation
|
}
|
|
// 关闭弹框
|
function handleCancel() {
|
visible.value = false
|
}
|
|
// 提交新增/编辑
|
async function handleSubmit() {
|
const isValid = await formRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
submitting.value = true
|
try {
|
const payload = {
|
...formData.value,
|
id: formData.value.id || formData.value.deviceId || undefined,
|
effectiveRangeKmIsNotNull: formData.value.effectiveRangeKm ? 1 : 2,
|
}
|
delete payload.deviceId
|
await detectionRangeSubmitApi(payload)
|
ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
// 加载详情
|
async function loadDetail(id) {
|
if (!id) return null
|
const res = await detectionRangeDetailApi({ id })
|
return res?.data?.data ?? null
|
}
|
|
async function loadDeviceOptions() {
|
const res = await detectionRangePageApi({
|
current: 1,
|
size: 200,
|
effectiveRangeKmIsNotNull: 2,
|
})
|
const records = res?.data?.data?.records ?? []
|
deviceOptions.value = records.map(item => ({
|
label: item.deviceName ?? '-',
|
value: item.id ?? '',
|
raw: item,
|
}))
|
}
|
|
// 关闭后重置
|
function handleClosed() {
|
formData.value = initForm()
|
}
|
|
// 打开弹框
|
async function open({ mode, row } = {}) {
|
dialogMode.value = mode || 'add'
|
visible.value = true
|
if (dialogMode.value === 'add') {
|
await loadDeviceOptions()
|
formData.value = initForm()
|
return
|
}
|
formData.value = row
|
if (dialogMode.value !== 'add') {
|
const detail = await loadDetail(row?.id)
|
formData.value = detail ?? row
|
}
|
formData.value.deviceId = formData.value.id ?? formData.value.deviceId
|
await loadDeviceOptions()
|
const currentName = formData.value.deviceName
|
const currentId = formData.value.deviceId
|
if (currentId && !deviceOptions.value.some(item => item.value === currentId)) {
|
deviceOptions.value.unshift({ label: currentName || '-', value: currentId })
|
}
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss">
|
.detection-range-dialog {
|
:deep(.el-dialog) {
|
width: 1100px;
|
background: #071833;
|
border-radius: 8px;
|
}
|
|
:deep(.el-dialog__header) {
|
border-bottom: 1px solid rgba(70, 110, 180, 0.35);
|
}
|
}
|
|
.dialog-body {
|
display: flex;
|
gap: 16px;
|
min-height: 560px;
|
}
|
|
.dialog-map {
|
position: relative;
|
flex: 1;
|
min-height: 520px;
|
border-radius: 8px;
|
overflow: hidden;
|
border: 1px solid rgba(70, 110, 180, 0.35);
|
background: #031024;
|
}
|
|
.map-toolbar {
|
position: absolute;
|
top: 16px;
|
right: 16px;
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
z-index: 2;
|
}
|
|
.map-btn {
|
width: 34px;
|
height: 34px;
|
border-radius: 6px;
|
border: 1px solid rgba(80, 120, 180, 0.6);
|
background: rgba(7, 18, 44, 0.9);
|
cursor: pointer;
|
}
|
|
.map-mini-controls {
|
position: absolute;
|
left: 16px;
|
bottom: 16px;
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
z-index: 2;
|
}
|
|
.map-mini-btn {
|
width: 28px;
|
height: 28px;
|
border-radius: 4px;
|
border: 1px solid rgba(80, 120, 180, 0.6);
|
background: rgba(7, 18, 44, 0.9);
|
color: #cfe3ff;
|
cursor: pointer;
|
}
|
|
.dialog-form {
|
width: 300px;
|
padding: 12px 12px 0;
|
border-radius: 8px;
|
background: linear-gradient(180deg, rgba(10, 28, 58, 0.95), rgba(6, 16, 34, 0.95));
|
border: 1px solid rgba(70, 110, 180, 0.35);
|
color: #d7e7ff;
|
}
|
|
.form-title {
|
font-size: 14px;
|
font-weight: 600;
|
margin-bottom: 12px;
|
letter-spacing: 1px;
|
}
|
|
:deep(.el-form-item__label) {
|
color: rgba(210, 230, 255, 0.85);
|
}
|
|
:deep(.el-input__wrapper),
|
:deep(.el-select__wrapper),
|
:deep(.el-input-number .el-input__wrapper) {
|
background: rgba(7, 20, 44, 0.85);
|
border: 1px solid rgba(80, 120, 190, 0.45);
|
box-shadow: none;
|
}
|
|
:deep(.el-input__inner) {
|
color: #d5e6ff;
|
}
|
|
.suffix-action {
|
font-size: 12px;
|
color: #7fb6ff;
|
cursor: pointer;
|
}
|
</style>
|
