<template>
|
<el-dialog
|
v-model="visible"
|
class="command-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 command-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">覆盖范围(m)</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="110px">
|
<el-form-item label="侦测设备" prop="deviceId">
|
<el-select
|
class="command-data-cockpit-select"
|
popper-class="command-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="command-data-cockpit-select"
|
popper-class="command-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="command-data-cockpit-search-input"
|
v-model="formData.deployLocation"
|
disabled
|
placeholder="请选择位置"
|
>
|
<template #suffix>
|
<span class="suffix-action">地图选点</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="设备编号" prop="deviceSn">
|
<el-input
|
class="command-data-cockpit-search-input"
|
v-model="formData.deviceSn"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="设备型号" prop="deviceModel">
|
<el-input
|
class="command-data-cockpit-search-input"
|
v-model="formData.deviceModel"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="覆盖范围(m)" prop="effectiveRangeKm">
|
<el-input-number
|
class="command-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, watch } 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'
|
import deviceZcImg from '@/assets/images/dataCockpit/device-zc.svg'
|
|
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 = defineModel() // 弹框显隐
|
const dialogMode = ref('add') // 弹框模式
|
const submitting = ref(false) // 提交中
|
const deviceOptions = ref([])
|
const dialogReadonly = computed(() => dialogMode.value === 'view')
|
let viewer
|
let redPointEntity
|
let rangeCircleEntity
|
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}`
|
}
|
|
// 关闭弹框
|
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()
|
clearRangeCircle()
|
viewer = null
|
redPointEntity = null
|
rangeCircleEntity = null
|
}
|
|
function setMapPoint(longitude, latitude) {
|
if (!viewer || longitude == null || latitude == null) return
|
if (!redPointEntity) {
|
redPointEntity = viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
billboard: {
|
image: deviceZcImg, // 这里替换为你的图片路径或变量 deviceZcImg
|
width: 30, // 可选：设置图片宽度
|
height: 42, // 可选：设置图片高度
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置图片底部对齐坐标点
|
},
|
label: {
|
text: `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`,
|
font: '16px',
|
fillColor: Cesium.Color.WHITE,
|
backgroundColor: Cesium.Color.BLACK.withAlpha(0.45),
|
backgroundPadding: new Cesium.Cartesian2(5, 5),
|
showBackground: true,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
outlineWidth: 1,
|
outlineColor: Cesium.Color.WHITE,
|
pixelOffset: new Cesium.Cartesian2(0, -60),
|
eyeOffset: new Cesium.Cartesian3(0, 0, -20),
|
},
|
})
|
} else {
|
redPointEntity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
|
redPointEntity.label.text = `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
|
}
|
updateRangeCircle(longitude, latitude, formData.value.effectiveRangeKm)
|
}
|
|
function parseDeployLocation(value) {
|
if (!value) return null
|
const [longitude, latitude] = value.split(',').map(item => Number(item.trim()))
|
if (Number.isNaN(longitude) || Number.isNaN(latitude)) return null
|
return { longitude, latitude }
|
}
|
|
function clearRangeCircle() {
|
if (viewer && rangeCircleEntity) {
|
viewer.entities.remove(rangeCircleEntity)
|
}
|
}
|
|
function updateRangeCircle(longitude, latitude, range) {
|
if (!viewer || longitude == null || latitude == null) return
|
const rangeMeters = Number(range)
|
if (!Number.isFinite(rangeMeters) || rangeMeters <= 0) {
|
clearRangeCircle()
|
rangeCircleEntity = null
|
return
|
}
|
const position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
|
if (!rangeCircleEntity) {
|
rangeCircleEntity = viewer.entities.add({
|
position,
|
ellipse: {
|
semiMajorAxis: rangeMeters,
|
semiMinorAxis: rangeMeters,
|
material: Cesium.Color.fromCssColorString('#6b9ca8').withAlpha(0.6),
|
outline: true,
|
outlineColor: Cesium.Color.fromCssColorString('#6b9ca8').withAlpha(0.6),
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
},
|
})
|
return
|
}
|
rangeCircleEntity.position = position
|
rangeCircleEntity.ellipse.semiMajorAxis = rangeMeters
|
rangeCircleEntity.ellipse.semiMinorAxis = rangeMeters
|
}
|
|
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'
|
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.deployLocation = `${formData.value.longitude}, ${formData.value.latitude}`
|
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 parsed = parseDeployLocation(location)
|
if (parsed) {
|
setMapPoint(parsed.longitude, parsed.latitude)
|
viewer.flyTo(redPointEntity, { duration: 0 })
|
}
|
}
|
}
|
|
defineExpose({ open })
|
|
watch(
|
() => formData.value.effectiveRangeKm,
|
value => {
|
const parsed = parseDeployLocation(formData.value.deployLocation)
|
if (!parsed) return
|
updateRangeCircle(parsed.longitude, parsed.latitude, value)
|
}
|
)
|
</script>
|
|
<style scoped lang="scss"></style>
|
