From 7224851bf14cab706d36f695331488941ed4aba6 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 31 Jul 2026 18:01:05 +0800
Subject: [PATCH] feat:去除dialog滚动条
---
applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue | 81 ++++++++++++++++++++++++----------------
1 files changed, 49 insertions(+), 32 deletions(-)
diff --git a/applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue b/applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue
index b2fa130..5713bd5 100644
--- a/applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue
+++ b/applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue
@@ -17,13 +17,14 @@
: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>
@@ -88,34 +89,17 @@
</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
@@ -130,7 +114,9 @@
</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"
@@ -163,7 +149,7 @@
import * as Cesium from 'cesium'
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
-import { MapTooltip } from '@/utils/cesium/shapeTools/Tooltip'
+import { MapTooltip } from '@ztzf/utils'
import equipment from '@/assets/images/dataCockpit/legend/equipment.png'
@@ -182,7 +168,7 @@
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')
@@ -254,7 +240,7 @@
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 = {
@@ -262,7 +248,7 @@
effectiveRangeKmIsNotNull: normalizedRange != null ? 1 : 2,
effectiveRangeKm: normalizedRange,
longitude,
- latitude
+ latitude,
}
formData.value.effectiveRangeKm = normalizedRange
delete payload.deviceId
@@ -272,7 +258,7 @@
saveOperationLog({
requestUri: route.path,
title: `${route.name || '侦测范围管理'}-${actionText}`,
- type: 1
+ type: 1,
})
ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
@@ -295,7 +281,7 @@
current: 1,
size: 200,
effectiveRangeKmIsNotNull: 2,
- isTrack: 1
+ isTrack: 1,
})
const records = res?.data?.data?.records ?? []
deviceOptions.value = records.map(item => ({
@@ -325,6 +311,7 @@
width: 40,
height: 56,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置图片底部对齐坐标点
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
label: {
text: `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`,
@@ -339,7 +326,7 @@
outlineWidth: 1,
outlineColor: Cesium.Color.WHITE,
pixelOffset: new Cesium.Cartesian2(0, -72),
- eyeOffset: new Cesium.Cartesian3(0, 0, -20),
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
})
} else {
@@ -347,6 +334,31 @@
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) {
@@ -380,7 +392,7 @@
material: Cesium.Color.fromCssColorString('#6b9ca8').withAlpha(0.6),
outline: true,
outlineColor: Cesium.Color.fromCssColorString('#6b9ca8').withAlpha(0.6),
- heightReference: Cesium.HeightReference.NONE,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
})
return
@@ -426,7 +438,9 @@
function handleMapClick(click) {
const pos = click.position
- const cartesian3 = viewer.camera.pickEllipsoid(pos, viewer.scene.globe.ellipsoid)
+ const ray = viewer.camera.getPickRay(pos)
+ if (!ray) return
+ const cartesian3 = viewer.scene.globe.pick(ray, viewer.scene)
if (!cartesian3) return
const carto = Cesium.Cartographic.fromCartesian(cartesian3)
const longitude = Number(Cesium.Math.toDegrees(carto.longitude).toFixed(6))
@@ -442,6 +456,8 @@
await nextTick()
initMap()
if (dialogMode.value === 'add') {
+ mapRef.value?.zoomToAdminBoundary?.()
+
await loadDeviceOptions()
formData.value = initForm()
return
@@ -464,7 +480,8 @@
const parsed = parseDeployLocation(location)
if (parsed) {
setMapPoint(parsed.longitude, parsed.latitude)
- viewer.flyTo(redPointEntity, { duration: 0 })
+
+ flyToRange(parsed.longitude, parsed.latitude, formData.value.effectiveRangeKm)
}
}
}
--
Gitblit v1.9.3