<template>
|
<el-dialog v-model="visible" class="ztzf-page-map-view-dialog" :show-close="false" :close-on-click-modal="false"
|
destroy-on-close @closed="handleClosed">
|
<div class="dialog-container">
|
<div class="left-container">
|
<div class="leftMap ztzf-cesium" id="detectionRangeMap"></div>
|
</div>
|
|
<div class="right-container">
|
<div class="header">{{ formTitle }}</div>
|
|
<div class="dialog-container" v-if="dialogReadonly">
|
<el-row>
|
<el-col :span="24">
|
<div class="label">侦测设备</div>
|
<div class="val">{{ formData.deviceName || '-' }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">设备类型</div>
|
<div class="val">{{ getDeviceTypeLabel(formData.deviceType) }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">设备位置</div>
|
<div class="val">{{ formData.deployLocation || '-' }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">设备编号</div>
|
<div class="val">{{ formData.deviceSn || '-' }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">设备型号</div>
|
<div class="val">{{ formData.deviceModel || '-' }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">覆盖范围</div>
|
<div class="val">{{ formatRange(formData.effectiveRangeKm) }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<el-form v-else ref="formRef" class="dialog-form" :model="formData" :rules="rules" label-width="96px">
|
<el-form-item label="侦测设备" prop="deviceId">
|
<el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
|
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 class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
|
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 class="ztzf-data-cockpit-search-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 class="ztzf-data-cockpit-search-input" v-model="formData.deviceSn" placeholder="请输入"
|
clearable />
|
</el-form-item>
|
<el-form-item label="设备型号" prop="deviceModel">
|
<el-input class="ztzf-data-cockpit-search-input" v-model="formData.deviceModel"
|
placeholder="请输入" clearable />
|
</el-form-item>
|
<el-form-item label="覆盖范围" prop="effectiveRangeKm">
|
<el-input-number class="ztzf-data-cockpit-search-input" v-model="formData.effectiveRangeKm" :min="0" :precision="2" :controls="false"
|
placeholder="请输入" />
|
</el-form-item>
|
</el-form>
|
<div class="footer">
|
<el-button color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
|
<el-button color="#284FE3" v-if="!dialogReadonly" type="primary" :loading="submitting"
|
:disabled="submitting" @click="handleSubmit">
|
保存
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, inject, nextTick, ref } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import {
|
detectionRangeDetailApi,
|
detectionRangePageApi,
|
detectionRangeSubmitApi,
|
} from '@/api/detectionCountermeasure/detectionRange'
|
import { PublicCesium } from '@/utils/cesium/publicCesium'
|
import * as Cesium from 'cesium'
|
|
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 deviceOptions = ref([])
|
const dialogReadonly = computed(() => dialogMode.value === 'view')
|
let viewer
|
let redPointEntity
|
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'] }],
|
deployLocation: [{ 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 getDeviceTypeLabel (value) {
|
const list = dictObj?.deviceType ?? []
|
const target = list.find(item => item.dictKey === value)
|
return target?.dictValue ?? value ?? '-'
|
}
|
|
function formatRange (value) {
|
if (value == null || value === '') return '-'
|
return `${value}km`
|
}
|
|
// 关闭弹框
|
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()
|
viewer = null
|
redPointEntity = null
|
}
|
|
function setMapPoint (longitude, latitude) {
|
if (!viewer || longitude == null || latitude == null) return
|
if (!redPointEntity) {
|
redPointEntity = viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
point: {
|
color: Cesium.Color.RED,
|
pixelSize: 10,
|
},
|
label: {
|
text: `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`,
|
font: '14px',
|
fillColor: Cesium.Color.WHITE,
|
backgroundColor: Cesium.Color.BLACK.withAlpha(0.45),
|
backgroundPadding: new Cesium.Cartesian2(5, 5),
|
pixelOffset: new Cesium.Cartesian2(0, -20),
|
showBackground: true,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
outlineWidth: 1,
|
outlineColor: Cesium.Color.WHITE,
|
eyeOffset: new Cesium.Cartesian3(0, 0, -20),
|
},
|
})
|
} else {
|
redPointEntity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
|
redPointEntity.label.text = `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
|
}
|
}
|
|
function initMap () {
|
if (viewer) return
|
const publicCesiumInstance = new PublicCesium({
|
dom: 'detectionRangeMap',
|
flatMode: false,
|
terrain: true,
|
layerMode: 4,
|
boundary: false,
|
})
|
if (!dialogReadonly.value) {
|
publicCesiumInstance.addLeftClickEvent(null, handleMapClick)
|
}
|
viewer = publicCesiumInstance.getViewer()
|
}
|
|
function handleMapClick (click) {
|
const pos = click.position
|
const cartesian3 = viewer.camera.pickEllipsoid(pos, viewer.scene.globe.ellipsoid)
|
if (!cartesian3) return
|
const carto = Cesium.Cartographic.fromCartesian(cartesian3)
|
const longitude = Number(Cesium.Math.toDegrees(carto.longitude).toFixed(6))
|
const latitude = Number(Cesium.Math.toDegrees(carto.latitude).toFixed(6))
|
formData.value.deployLocation = `${longitude}, ${latitude}`
|
setMapPoint(longitude, latitude)
|
}
|
|
// 打开弹框
|
async function open ({ mode, row } = {}) {
|
dialogMode.value = mode || 'add'
|
visible.value = true
|
await nextTick()
|
initMap()
|
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 })
|
}
|
const location = formData.value.deployLocation
|
if (location) {
|
const [longitude, latitude] = location.split(',').map(item => Number(item.trim()))
|
if (!Number.isNaN(longitude) && !Number.isNaN(latitude)) {
|
setMapPoint(longitude, latitude)
|
}
|
}
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss"></style>
|
