feat:去除dialog滚动条

chenyao

2 hours ago 7224851bf14cab706d36f695331488941ed4aba6

 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)
      }
   }
}