| | |
| | | <template> |
| | | <el-dialog |
| | | v-model="visible" |
| | | class="ztzf-page-map-view-dialog" |
| | | class="command-page-map-view-dialog" |
| | | :show-close="false" |
| | | :close-on-click-modal="false" |
| | | destroy-on-close |
| | |
| | | > |
| | | <div class="dialog-container"> |
| | | <div class="left-container"> |
| | | <div class="leftMap ztzf-cesium" id="detectionRangeMap"></div> |
| | | <CommonCesiumMap |
| | | ref="mapRef" |
| | | class="leftMap command-cesium" |
| | | :active="visible" |
| | | :flat-mode="false" |
| | | :terrain="true" |
| | | :layer-mode="4" |
| | | :boundary="false" |
| | | /> |
| | | </div> |
| | | |
| | | <div class="right-container"> |
| | |
| | | <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="ztzf-data-cockpit-select" |
| | | popper-class="ztzf-data-cockpit-select-popper" |
| | | class="command-data-cockpit-select" |
| | | popper-class="command-data-cockpit-select-popper" |
| | | v-model="formData.deviceId" |
| | | placeholder="请选择" |
| | | clearable |
| | |
| | | </el-form-item> |
| | | <el-form-item label="设备类型" prop="deviceType"> |
| | | <el-select |
| | | class="ztzf-data-cockpit-select" |
| | | popper-class="ztzf-data-cockpit-select-popper" |
| | | class="command-data-cockpit-select" |
| | | popper-class="command-data-cockpit-select-popper" |
| | | v-model="formData.deviceType" |
| | | placeholder="请选择" |
| | | clearable |
| | |
| | | </el-form-item> |
| | | <el-form-item label="设备位置" prop="deployLocation"> |
| | | <el-input |
| | | class="ztzf-data-cockpit-search-input" |
| | | class="command-data-cockpit-search-input" |
| | | v-model="formData.deployLocation" |
| | | disabled |
| | | placeholder="请选择位置" |
| | |
| | | </el-form-item> |
| | | <el-form-item label="设备编号" prop="deviceSn"> |
| | | <el-input |
| | | class="ztzf-data-cockpit-search-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="ztzf-data-cockpit-search-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="ztzf-data-cockpit-search-input" |
| | | class="command-data-cockpit-search-input" |
| | | v-model="formData.effectiveRangeKm" |
| | | :min="0" |
| | | :precision="2" |
| | |
| | | detectionRangePageApi, |
| | | detectionRangeSubmitApi, |
| | | } from '@/api/detectionCountermeasure/detectionRange' |
| | | import { PublicCesium } from '@/utils/cesium/publicCesium' |
| | | import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue' |
| | | import * as Cesium from 'cesium' |
| | | import deviceZcImg from '@/assets/images/dataCockpit/device-zc.svg' |
| | | |
| | |
| | | const submitting = ref(false) // 提交中 |
| | | const deviceOptions = ref([]) |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const mapRef = ref(null) |
| | | let viewer |
| | | let redPointEntity |
| | | let rangeCircleEntity |
| | |
| | | |
| | | function initMap() { |
| | | if (viewer) return |
| | | const publicCesiumInstance = new PublicCesium({ |
| | | dom: 'detectionRangeMap', |
| | | flatMode: false, |
| | | terrain: true, |
| | | layerMode: 4, |
| | | boundary: false, |
| | | }) |
| | | const map = mapRef.value?.getMap() |
| | | if (!map?.viewer) return |
| | | viewer = map.viewer |
| | | if (!dialogReadonly.value) { |
| | | publicCesiumInstance.addLeftClickEvent(null, handleMapClick) |
| | | map.publicCesium?.addLeftClickEvent?.(null, handleMapClick) |
| | | } |
| | | viewer = publicCesiumInstance.getViewer() |
| | | } |
| | | |
| | | function handleMapClick(click) { |