| | |
| | | :terrain="true" |
| | | :layer-mode="4" |
| | | :boundary="false" |
| | | :zoom-to-boundary="dialogMode === 'add'" |
| | | /> |
| | | </div> |
| | | |
| | | <div class="right-container"> |
| | | <div class="header"> |
| | | <span>{{ formTitle }}</span> |
| | | |
| | | |
| | | <el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon> |
| | | </div> |
| | | |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="设备位置" prop="deployLocation"> |
| | | <el-input |
| | | class="command-input" |
| | | v-model="formData.deployLocation" |
| | | disabled |
| | | placeholder="请选择位置" |
| | | > |
| | | <el-input class="command-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-input" |
| | | v-model="formData.deviceSn" |
| | | disabled |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | <el-input class="command-input" v-model="formData.deviceSn" disabled placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="设备型号" prop="deviceModel"> |
| | | <el-input |
| | | class="command-input" |
| | | v-model="formData.deviceModel" |
| | | disabled |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | <el-input class="command-input" v-model="formData.deviceModel" disabled placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="覆盖范围(m)" prop="effectiveRangeKm"> |
| | | <el-input-number |
| | |
| | | v-model="formData.effectiveRangeKm" |
| | | :min="0" |
| | | :precision="0" |
| | | :step="1" |
| | | :controls="false" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="footer"> |
| | | <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel"> |
| | | {{ dialogReadonly ? '关闭' : '取消' }} |
| | | </el-button> |
| | | <el-button |
| | | color="#284FE3" |
| | | v-if="!dialogReadonly" |
| | |
| | | import * as Cesium from 'cesium' |
| | | import { saveOperationLog } from '@ztzf/apis' |
| | | import { useRoute } from 'vue-router' |
| | | import { MapTooltip } from '@ztzf/utils' |
| | | |
| | | import equipment from '@/assets/images/dataCockpit/legend/equipment.png' |
| | | |
| | |
| | | const formRef = ref(null) // 表单实例 |
| | | const formData = ref(initForm()) // 表单数据 |
| | | const visible = defineModel() // 弹框显隐 |
| | | const dialogMode = ref('add') // 弹框模式 |
| | | const dialogMode = ref('') // 弹框模式 |
| | | const submitting = ref(false) // 提交中 |
| | | const deviceOptions = ref([]) |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | |
| | | let viewer |
| | | let redPointEntity |
| | | let rangeCircleEntity |
| | | let mouseMoveBound = false |
| | | let mapTooltip |
| | | let publicCesium |
| | | const tooltipEventKey = 'detection-range-point-tip' |
| | | const formTitle = computed(() => { |
| | | if (dialogMode.value === 'edit') { |
| | | return '编辑侦测范围' |
| | |
| | | |
| | | function formatRange(value) { |
| | | if (value == null || value === '') return '-' |
| | | return `${value}` |
| | | const normalized = normalizeRange(value) |
| | | return normalized == null ? '-' : `${normalized}` |
| | | } |
| | | |
| | | function normalizeRange(value) { |
| | | const numeric = Number(value) |
| | | if (!Number.isFinite(numeric)) return null |
| | | return Math.trunc(numeric) |
| | | } |
| | | |
| | | // 关闭弹框 |
| | |
| | | if (!isValid) return |
| | | submitting.value = true |
| | | try { |
| | | const {longitude, latitude} = parseDeployLocation(formData.value.deployLocation) |
| | | const { longitude, latitude } = parseDeployLocation(formData.value.deployLocation) |
| | | const normalizedRange = normalizeRange(formData.value.effectiveRangeKm) |
| | | |
| | | const payload = { |
| | | id: formData.value.id || formData.value.deviceId || undefined, |
| | | effectiveRangeKmIsNotNull: formData.value.effectiveRangeKm ? 1 : 2, |
| | | effectiveRangeKm: formData.value.effectiveRangeKm, |
| | | effectiveRangeKmIsNotNull: normalizedRange != null ? 1 : 2, |
| | | effectiveRangeKm: normalizedRange, |
| | | longitude, |
| | | latitude |
| | | latitude, |
| | | } |
| | | formData.value.effectiveRangeKm = normalizedRange |
| | | delete payload.deviceId |
| | | await detectionRangeSubmitApi(payload) |
| | | |
| | |
| | | saveOperationLog({ |
| | | requestUri: route.path, |
| | | title: `${route.name || '侦测范围管理'}-${actionText}`, |
| | | type: 1 |
| | | type: 1, |
| | | }) |
| | | |
| | | ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功') |
| | |
| | | current: 1, |
| | | size: 200, |
| | | effectiveRangeKmIsNotNull: 2, |
| | | isTrack: 1, |
| | | }) |
| | | const records = res?.data?.data?.records ?? [] |
| | | deviceOptions.value = records.map(item => ({ |
| | |
| | | viewer = null |
| | | redPointEntity = null |
| | | rangeCircleEntity = null |
| | | clearPointTooltip() |
| | | } |
| | | |
| | | function setMapPoint(longitude, latitude) { |
| | |
| | | redPointEntity.label.text = `${longitude.toFixed(6)}, ${latitude.toFixed(6)}` |
| | | } |
| | | updateRangeCircle(longitude, latitude, formData.value.effectiveRangeKm) |
| | | } |
| | | |
| | | function flyToRange(longitude, latitude, range) { |
| | | if (!viewer || longitude == null || latitude == null) return |
| | | const rangeMeters = Number(range) |
| | | if (Number.isFinite(rangeMeters) && rangeMeters > 0) { |
| | | const center = Cesium.Cartesian3.fromDegrees(longitude, latitude) |
| | | const radius = Math.max(rangeMeters, 1000) |
| | | const sphere = new Cesium.BoundingSphere(center, radius) |
| | | |
| | | viewer.camera.flyToBoundingSphere(sphere, { |
| | | duration: 0, |
| | | offset: new Cesium.HeadingPitchRange(viewer.camera.heading, Cesium.Math.toRadians(-90), radius * 1.8), |
| | | }) |
| | | return |
| | | } |
| | | viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, 2000), |
| | | orientation: { |
| | | heading: viewer.camera.heading, |
| | | pitch: Cesium.Math.toRadians(-65), |
| | | roll: 0, |
| | | }, |
| | | duration: 0, |
| | | }) |
| | | } |
| | | |
| | | function parseDeployLocation(value) { |
| | |
| | | const map = mapRef.value?.getMap() |
| | | if (!map?.viewer) return |
| | | viewer = map.viewer |
| | | publicCesium = map.publicCesium |
| | | if (!dialogReadonly.value) { |
| | | map.publicCesium?.addLeftClickEvent?.(null, handleMapClick) |
| | | ensurePointTooltip() |
| | | } |
| | | } |
| | | |
| | | function ensurePointTooltip() { |
| | | if (!viewer || !publicCesium || mouseMoveBound) return |
| | | mapTooltip ||= new MapTooltip(viewer, { offset: { x: 28, y: 24 } }) |
| | | publicCesium.addMouseHandler?.( |
| | | null, |
| | | movement => { |
| | | if (!visible.value || dialogReadonly.value) return |
| | | mapTooltip?.show('点击地图选择设备位置', movement.endPosition) |
| | | }, |
| | | tooltipEventKey |
| | | ) |
| | | mouseMoveBound = true |
| | | } |
| | | |
| | | function clearPointTooltip() { |
| | | mapTooltip?.hide() |
| | | if (publicCesium && mouseMoveBound) { |
| | | publicCesium.removeMouseHandler?.(tooltipEventKey) |
| | | mouseMoveBound = false |
| | | } |
| | | } |
| | | |
| | |
| | | // 打开弹框 |
| | | async function open({ mode, row } = {}) { |
| | | dialogMode.value = mode || 'add' |
| | | clearPointTooltip() |
| | | await nextTick() |
| | | initMap() |
| | | if (dialogMode.value === 'add') { |
| | | mapRef.value?.zoomToAdminBoundary?.() |
| | | |
| | | await loadDeviceOptions() |
| | | formData.value = initForm() |
| | | return |
| | |
| | | const parsed = parseDeployLocation(location) |
| | | if (parsed) { |
| | | setMapPoint(parsed.longitude, parsed.latitude) |
| | | viewer.flyTo(redPointEntity, { duration: 0 }) |
| | | |
| | | flyToRange(parsed.longitude, parsed.latitude, formData.value.effectiveRangeKm) |
| | | } |
| | | } |
| | | } |
| | |
| | | watch( |
| | | () => formData.value.effectiveRangeKm, |
| | | value => { |
| | | const normalized = normalizeRange(value) |
| | | if (value != null && normalized == null) { |
| | | formData.value.effectiveRangeKm = null |
| | | return |
| | | } |
| | | if (value != null && normalized !== value) { |
| | | formData.value.effectiveRangeKm = normalized |
| | | return |
| | | } |
| | | const parsed = parseDeployLocation(formData.value.deployLocation) |
| | | if (!parsed) return |
| | | updateRangeCircle(parsed.longitude, parsed.latitude, value) |
| | | updateRangeCircle(parsed.longitude, parsed.latitude, normalized) |
| | | } |
| | | ) |
| | | </script> |