| | |
| | | <template> |
| | | <el-dialog class="ztzf-page-map-view-dialog" v-model="visible" :show-close="false" :close-on-click-modal="false"> |
| | | <el-dialog class="command-page-map-view-dialog" v-model="visible" :show-close="false" :close-on-click-modal="false"> |
| | | <div class="dialog-container"> |
| | | <div class="left-container"> |
| | | <div class="leftMap ztzf-cesium" id="mapContainer"></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"> |
| | | <div class="header"> |
| | |
| | | </el-row> |
| | | |
| | | <div class="detail-title">关联区域</div> |
| | | <div class="ztzf-table-container"> |
| | | <div class="ztzf-table-content"> |
| | | <el-table class="ztzf-data-cockpit-table" ref="areaTableRef" :data="areaList" row-key="id"> |
| | | <div class="command-table-container"> |
| | | <div class="command-table-content"> |
| | | <el-table class="command-data-cockpit-table" ref="areaTableRef" :data="areaList" row-key="id"> |
| | | <el-table-column prop="areaName" label="区域名称" /> |
| | | <el-table-column prop="areaType" label="区域类型"> |
| | | <template v-slot="{ row }"> |
| | |
| | | <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" |
| | | label-width="96px"> |
| | | <el-form-item label="场景名称" prop="sceneName"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.sceneName" maxlength="50" |
| | | <el-input class="command-data-cockpit-search-input" v-model="formData.sceneName" maxlength="50" |
| | | placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="指挥点位置" prop="longitude"> |
| | | <div class="val">{{ formatLocation(formData) }}</div> |
| | | </el-form-item> |
| | | <el-form-item label="场景类型" prop="sceneType"> |
| | | <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper" |
| | | <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper" |
| | | v-model="formData.sceneType" placeholder="请选择" clearable> |
| | | <el-option v-for="item in dictObj.sceneType" :key="item.dictKey" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="负责人" prop="defenseLeader"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.defenseLeader" maxlength="50" |
| | | <el-input class="command-data-cockpit-search-input" v-model="formData.defenseLeader" maxlength="50" |
| | | placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="负责人电话" prop="leaderPhone"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.leaderPhone" maxlength="50" |
| | | <el-input class="command-data-cockpit-search-input" v-model="formData.leaderPhone" maxlength="50" |
| | | placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="设备模式" prop="deviceMode"> |
| | | <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper" |
| | | <el-select class="command-data-cockpit-select" popper-class="command-data-cockpit-select-popper" |
| | | v-model="formData.deviceMode" placeholder="请选择" clearable> |
| | | <el-option v-for="item in dictObj.deviceMode" :key="item.dictKey" :label="item.dictValue" |
| | | :value="item.dictKey" /> |
| | |
| | | 关联区域 |
| | | </div> |
| | | |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="searchName" placeholder="请输入" |
| | | <el-input class="command-data-cockpit-search-input" v-model="searchName" placeholder="请输入" |
| | | clearable></el-input> |
| | | </div> |
| | | |
| | | <el-form-item prop="areaDivideIds" label-width="0"> |
| | | <el-table class="ztzf-data-cockpit-table" ref="areaTableRef" |
| | | <el-table class="command-data-cockpit-table" ref="areaTableRef" |
| | | :data="areaList.filter(item => item.areaName.includes(searchName))" row-key="id" |
| | | @selection-change="handleAreaSelectionChange"> |
| | | <el-table-column type="selection" width="55" :reserve-selection="true" /> |
| | |
| | | import { ElMessage } from 'element-plus' |
| | | import { fwDefenseSceneDetailApi, fwDefenseSceneSubmitApi } from './sceneConfigApi' |
| | | import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils' |
| | | import { PublicCesium } from '@/utils/cesium/publicCesium' |
| | | import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue' |
| | | import * as Cesium from 'cesium' |
| | | import { fwAreaDivideListApi } from '../partition/partitionApi' |
| | | import { DrawPolygon } from '@/utils/cesium/DrawPolygon' |
| | |
| | | const areaList = ref([]) // 关联区域列表 |
| | | const selectedAreaRows = ref([]) //选中列表 |
| | | const dictObj = inject('dictObj') |
| | | const mapRef = ref(null) |
| | | let viewer |
| | | let redPointEntity |
| | | let leftClickBound = false |
| | | |
| | | const rules = { |
| | | sceneName: fieldRules(true, 50), |
| | |
| | | let geometricSource |
| | | // 初始化地图实例 |
| | | function initMap () { |
| | | const publicCesiumInstance = new PublicCesium({ |
| | | dom: 'mapContainer', |
| | | flatMode: false, |
| | | terrain: true, |
| | | layerMode: 4, |
| | | boundary: false, |
| | | }) |
| | | if (!readonly.value) { |
| | | publicCesiumInstance.addLeftClickEvent(null, LeftClickEvent) |
| | | if (viewer) return |
| | | const map = mapRef.value?.getMap() |
| | | if (!map?.viewer) return |
| | | viewer = map.viewer |
| | | if (!readonly.value && !leftClickBound) { |
| | | map.publicCesium?.addLeftClickEvent?.(null, LeftClickEvent) |
| | | leftClickBound = true |
| | | } |
| | | viewer = publicCesiumInstance.getViewer() |
| | | geometricSource = new Cesium.CustomDataSource('geometricSource') |
| | | viewer.dataSources.add(geometricSource) |
| | | if (!geometricSource) { |
| | | geometricSource = new Cesium.CustomDataSource('geometricSource') |
| | | viewer.dataSources.add(geometricSource) |
| | | } |
| | | } |
| | | |
| | | function LeftClickEvent (click) { |