You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1719 lines
65 KiB
1719 lines
65 KiB
<template>
|
|
<div class="create-model-modal" v-if="winVisible">
|
|
<Window
|
|
:title="title"
|
|
@cancel="cancel"
|
|
@ok="ok"
|
|
:width="width"
|
|
:minWidth="600"
|
|
:height="height"
|
|
:left="left"
|
|
:top="top"
|
|
:floatright="false"
|
|
:footervisible="true"
|
|
v-show="!creating"
|
|
:expand="expand"
|
|
>
|
|
<div style="display: flex" class="custom-item" v-if="!isUpdateModel">
|
|
<label class="custom-label">模型类型:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjSelect id="model-select" title="name" :list="modelSelectList" v-model:value="selectModel" />
|
|
</div>
|
|
</div>
|
|
<div class="object-box" v-show="currentModel && currentModel.xbsjType == 'Model'">
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">名称:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">区域:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">像素大小:</label>
|
|
<div class="custom-item-box">
|
|
<!-- <XbsjSlider style="margin-top: 16px" :min="0" :max="256" :step="1" showTip="always"
|
|
v-model="minimumPixelSize">
|
|
</XbsjSlider> -->
|
|
<a-slider
|
|
v-model:value="minimumPixelSize"
|
|
:min="0"
|
|
:max="256"
|
|
:step="1"
|
|
:tooltipVisible="true"
|
|
v-if="currentModel && currentModel.xbsjType == 'Model'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">经纬度:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="LngLatHeight[0]" type="number" class="xyz-input" />
|
|
<input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" />
|
|
<input v-model="LngLatHeight[2]" type="number" class="xyz-input" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">旋转:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="rotation[0]" class="xyz-input" type="number" />
|
|
<input v-model="rotation[1]" class="xyz-input y-margin" type="number" />
|
|
<input v-model="rotation[2]" class="xyz-input" type="number" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">缩放:</label>
|
|
<div class="custom-item-box">
|
|
<xbsjScale v-model:scale="scale" style="height: 90%; width: 100%"></xbsjScale>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; justify-content: center" class="custom-item">
|
|
<button
|
|
@click="modelState('creating')"
|
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
|
|
:disabled="creating"
|
|
style="width: 20%"
|
|
>
|
|
拾取
|
|
</button>
|
|
<button
|
|
@click="currentModel.positionEditing = true"
|
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
|
|
:disabled="creating"
|
|
style="width: 20%"
|
|
>
|
|
移动
|
|
</button>
|
|
<button
|
|
@click="modelState('rotationEditing')"
|
|
:class="['xbsj-button', 'edit-model-btn', !currentModel || rotationEditing ? 'edit-model-btn-disable' : '']"
|
|
:disabled="rotationEditing"
|
|
style="width: 20%"
|
|
>
|
|
旋转
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="object-box" v-show="currentModel && currentModel.xbsjType == 'Pin' && selectModel.value == 'ld'">
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">名称:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">区域:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">主机设备:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjSelect title="deviceName" :list="hostDeviceList" v-model:value="selectHostDevice" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">设备编码:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="selectDeviceNum" class="name-input" style="height: 90%; width: 100%" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; height: 20%" class="custom-item">
|
|
<label class="custom-label">上传图标:</label>
|
|
<div class="custom-item-box">
|
|
<div class="upload-box">
|
|
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" ref="pinIconUpload" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">经纬度:</label>
|
|
<div class="custom-item-box">
|
|
<!-- <XbsjLngLatHeight v-model="LngLatHeight" style="height: 90%; width: 100%"></XbsjLngLatHeight> -->
|
|
<input v-model="LngLatHeight[0]" type="number" class="xyz-input" />
|
|
<input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" />
|
|
<input v-model="LngLatHeight[2]" type="number" class="xyz-input" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">扫描颜色:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjColorButton style="height: 30px" v-model:color="radarColor"> </XbsjColorButton>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">法线偏移角度:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="radarShifting" type="number" class="xyz-input" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">扫描范围:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="radarRange" type="number" class="xyz-input" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">扫描半径:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="radarRadius" type="number" class="xyz-input" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: center" class="custom-item">
|
|
<button
|
|
@click="modelState('creating')"
|
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
|
|
:disabled="creating"
|
|
style="width: 20%; display: flex; align-items: center; justify-content: center"
|
|
>
|
|
拾取
|
|
</button>
|
|
<button
|
|
@click="currentModel.editing = true"
|
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
|
|
:disabled="creating"
|
|
style="width: 20%; display: flex; align-items: center; justify-content: center"
|
|
>
|
|
移动
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="object-box" v-show="currentModel && currentModel.xbsjType == 'Pin' && selectModel.value == 'wb'">
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">名称:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">区域:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">主机设备:</label>
|
|
<div class="custom-item-box">
|
|
<XbsjSelect title="deviceName" :list="hostDeviceList" v-model:value="selectHostDevice" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">设备编码:</label>
|
|
<div class="custom-item-box">
|
|
<input v-model="selectDeviceNum" class="name-input" style="height: 90%; width: 100%" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; height: 20%" class="custom-item">
|
|
<label class="custom-label">上传图标:</label>
|
|
<div class="custom-item-box">
|
|
<div class="upload-box">
|
|
<upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" ref="pinIconUpload" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="custom-item">
|
|
<label class="custom-label">经纬度:</label>
|
|
<div class="custom-item-box">
|
|
<!-- <XbsjLngLatHeight v-model="LngLatHeight" style="height: 90%; width: 100%"></XbsjLngLatHeight> -->
|
|
<input v-model="LngLatHeight[0]" type="number" class="xyz-input" />
|
|
<input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" />
|
|
<input v-model="LngLatHeight[2]" type="number" class="xyz-input" />
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: center" class="custom-item">
|
|
<button
|
|
@click="modelState('creating')"
|
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
|
|
:disabled="creating"
|
|
style="width: 20%; display: flex; align-items: center; justify-content: center"
|
|
>
|
|
拾取
|
|
</button>
|
|
<button
|
|
@click="currentModel.editing = true"
|
|
:class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
|
|
:disabled="creating"
|
|
style="width: 20%; display: flex; align-items: center; justify-content: center"
|
|
>
|
|
移动
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="Mask" v-show="currentModel == null"></div>
|
|
</Window>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch, createVNode, render } from 'vue';
|
|
import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue';
|
|
import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue';
|
|
import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue';
|
|
import upload from '/@/components/earthMap/components/upload.vue';
|
|
import Window from '@/components/earthMap/components/Window.vue';
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import seneIdTreeSelect from '/@/components/earthMap/components/seneIdTreeSelect.vue';
|
|
import $mitt from '@/utils/earthMap/mitt';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import $ from 'jquery';
|
|
import { addModel, addPin, addViewShed, addViewShedRadar } from '@/utils/earthMap/earthObj';
|
|
export default defineComponent({
|
|
name: 'AddModelWin',
|
|
components: { xbsjScale, XbsjSelect, upload, XbsjColorButton, Window },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '创建元素',
|
|
},
|
|
setLabelStatus: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
czmObject: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
node: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
lineId: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
areaCode: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
areaByNodeId: {
|
|
type: Map,
|
|
default: null,
|
|
},
|
|
setIconByRef: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
el: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
eidtId: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
setup(props, ctx) {
|
|
const { proxy }: any = getCurrentInstance();
|
|
const { createMessage } = useMessage();
|
|
// const $mitt = mitt();
|
|
const userStore = useUserStore();
|
|
let expand = ref(true); //是否展开
|
|
let radarColor = ref({ rgba: { r: 0, g: 255, b: 0, a: 0.5 } });
|
|
let radarRange = ref(0);
|
|
let radarRadius = ref(0);
|
|
|
|
//法线偏移角度
|
|
let radarShifting = ref(0);
|
|
//雷达扫描编辑、取消使用
|
|
let radarOldObj: any = ref({});
|
|
let radarUrl = ref({
|
|
list: '/military/RadarConfig/list',
|
|
add: '/military/RadarConfig/add',
|
|
edit: '/military/RadarConfig/edit',
|
|
delete: '/military/RadarConfig/delete',
|
|
});
|
|
|
|
let heightCoefficient = ref(0.5); // 高
|
|
let widthCoefficient = ref(0.3); // 宽
|
|
let currentModel: any = ref(null); // 当前模型
|
|
let isUpdateModel = ref(false); // 是否有更新模型
|
|
let modelSelectList = ref([
|
|
{
|
|
id: 'qy',
|
|
name: '区域',
|
|
type: 'qy',
|
|
value: 'qy',
|
|
},
|
|
{
|
|
id: 'jkd',
|
|
name: '监控点',
|
|
type: 'jkd',
|
|
value: 'jkd',
|
|
},
|
|
{
|
|
id: 'wb',
|
|
name: '微波',
|
|
type: 'wb',
|
|
value: 'wb',
|
|
},
|
|
{
|
|
id: 'ld',
|
|
name: '雷达',
|
|
type: 'ld',
|
|
value: 'ld',
|
|
},
|
|
]); //模型类型列表
|
|
let selectModel: any = ref({ name: '请选择创建类型' }); // 选中模型类型
|
|
let name = ref(''); // 模型名称
|
|
let LngLatHeight = ref([0, 0, 0]); // 俯仰角度
|
|
let rotation = ref([0, 0, 0]); // 旋转角度
|
|
let scale = ref([1, 1, 1]); // 缩放
|
|
let creating = ref(false); // 是否跟随鼠标状态
|
|
let show = ref(false); // // 是否可见
|
|
let rotationEditing = ref(false); // 开启旋转辅助
|
|
let winVisible = ref(true); // 窗口显示或隐藏
|
|
let areaList = ref([]); // 区域列表
|
|
let previewImgUrl = ref(''); // 上传图片路径
|
|
let uploadFile = ref(null); // 上传图片文件
|
|
let selectArea: any = ref(null); // 选中区域
|
|
let submitObject: any = ref({}); // 提交对象
|
|
let isFristChangeMethod = ref(true);
|
|
let revert = ref(null); // 取消还原数据
|
|
let islands = ref([]); // 岛屿列表
|
|
let minimumPixelSize = ref(80); // 最大像素大小
|
|
let hostDeviceList = ref([]); // 主机设备列表
|
|
let selectHostDevice: any = ref(null);
|
|
let deviceNumList = ref([]); // 设备编码列表
|
|
let selectDeviceNum = ref(null); // 提交对象
|
|
let timer: any = ref(null); //定时器
|
|
// 设置上传次数
|
|
let uploadFileCount = ref(1);
|
|
//ref
|
|
let pinIconUpload = ref(); //定时器
|
|
|
|
//computed
|
|
const width = computed(() => {
|
|
return window.outerWidth * widthCoefficient.value;
|
|
});
|
|
const height = computed(() => {
|
|
return window.outerHeight * heightCoefficient.value;
|
|
});
|
|
const top = computed(() => {
|
|
return window.outerHeight * ((1.0 - heightCoefficient.value - 0.15) / 2);
|
|
});
|
|
const left = computed(() => {
|
|
return (window.outerWidth * (1.0 - widthCoefficient.value)) / 2;
|
|
});
|
|
|
|
//watch
|
|
// watch(radarColor,(newVal, oldVal)=>{
|
|
// getRadarScan()
|
|
// })
|
|
// watch(radarRange,(newVal, oldVal)=>{
|
|
// getRadarScan()
|
|
// })
|
|
// watch(radarRadius,(newVal, oldVal)=>{
|
|
// getRadarScan()
|
|
// })
|
|
// watch(radarShifting,(newVal, oldVal)=>{
|
|
// getRadarScan()
|
|
// })
|
|
//监听多个值
|
|
watch([radarColor, radarRange, radarRadius, radarShifting], () => {
|
|
getRadarScan();
|
|
});
|
|
|
|
watch(uploadFile, (newVal, oldVal) => {
|
|
// console.log("uploadFile-newVal",newVal);
|
|
|
|
// 模拟表单提交的对象
|
|
let formData = new FormData();
|
|
// 设置上传目录为temp
|
|
formData.append('biz', 'temp');
|
|
// 设置上传文件
|
|
formData.append('file', newVal);
|
|
// 进行上传等待响应
|
|
defHttp.post({ url: '/sys/common/upload', params: formData }, { isTransformResponse: false }).then((response) => {
|
|
// 响应并成功操作
|
|
if (response.success) {
|
|
// 设置图片显示地址
|
|
let imageUrl = '/dt/sys/common/static/' + response.message;
|
|
// 设置img dom元素src预览地址
|
|
previewImgUrl.value = imageUrl;
|
|
// 设置地图中pin的图片地址
|
|
currentModel.value.imageUrl = imageUrl;
|
|
if (!isUpdateModel.value && uploadFileCount.value == 1) {
|
|
// 设置pin展示
|
|
show.value = true;
|
|
// 设置为编辑状态
|
|
creating.value = true;
|
|
// 上传次数变成2
|
|
uploadFileCount.value++;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// watchEffect(()=>{
|
|
// console.log('uploadFile.value',uploadFile.value);
|
|
// })
|
|
|
|
watch(selectModel, (newVal, oldVal) => {
|
|
// console.log("selectModel",newVal);
|
|
// debugger
|
|
/**
|
|
* 防止重复打开drawShape组件，所以每次变更选项时，都进行关闭操作
|
|
*/
|
|
$mitt.emit('drawShapeShow', { show: false });
|
|
// 更新状态，什么也不做
|
|
if (isUpdateModel.value) {
|
|
return;
|
|
}
|
|
// 选中类型空了，什么也不做
|
|
if (!selectModel.value.value) {
|
|
return;
|
|
}
|
|
// 当前对象不为空时，释放掉这个对象，并清理上传图片
|
|
if (currentModel.value) {
|
|
currentModel.value.destroy();
|
|
currentModel.value = null;
|
|
pinIconUpload.value?.clear();
|
|
}
|
|
if (newVal.value == 'wb' || newVal.value == 'ld') {
|
|
getHostDeviceList();
|
|
}
|
|
// 登录人部门信息
|
|
// let orgCode = Vue.ls.get(USER_INFO).orgCode
|
|
let orgCode: any = userStore.userInfo?.orgCode;
|
|
if (orgCode.length <= 3) {
|
|
orgCode = undefined;
|
|
}
|
|
// this 别称
|
|
// const that = this
|
|
// 在取得区域数据后，进行模型的创建操作
|
|
getAreas(orgCode)
|
|
.then(() => {
|
|
try {
|
|
if (selectModel.value.value === 'jkd') {
|
|
// console.log("jkd");
|
|
expand.value = true; // 折叠面板
|
|
currentModel.value = addModel();
|
|
// console.log(" currentModel.value", currentModel.value);
|
|
} else if (selectModel.value.value === 'qy') {
|
|
expand.value = false; // 折叠面板
|
|
currentModel.value = addArea();
|
|
// currentModel.value = addPolyline();
|
|
// console.log(" currentModel.value", currentModel.value);
|
|
} else {
|
|
expand.value = true; // 折叠面板
|
|
currentModel.value = addPin();
|
|
}
|
|
} catch (e) {
|
|
// 无关紧要的语法错误，不影响运行
|
|
// console.log(that.currentModel)
|
|
// console.error(e)
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
// 提示用户加载数据出现了问题
|
|
createMessage.error('加载区域数据出错', 2);
|
|
});
|
|
});
|
|
|
|
onMounted(() => {
|
|
//监听关闭方法 关闭本组件
|
|
$mitt.on('windowCancel', cancel);
|
|
// debugger
|
|
// 传入属性
|
|
// const props = this.getBind()
|
|
// 当传入属性的更新对象为空时，什么也不做
|
|
if (!props.czmObject) {
|
|
return;
|
|
}
|
|
const areaCode = props.areaCode;
|
|
// 设置当前选中的元素，模拟用户操作，切换窗体元素
|
|
selectModel.value = { value: props.type };
|
|
// 设置当前状态为更新
|
|
isUpdateModel.value = props.czmObject ? true : false;
|
|
getHostDeviceList().then(() => {
|
|
// 获取到区域数据后在进行操作
|
|
// getAreas(Vue.ls.get(USER_INFO).orgCode).then(() => {
|
|
getAreas(userStore.userInfo?.orgCode).then(() => {
|
|
// 区域数据加载完后
|
|
nextTick(() => {
|
|
try {
|
|
// 记录回溯数据
|
|
revert.value = props.czmObject.toAllJSON();
|
|
// 设置当前模型为传入模型
|
|
currentModel.value = props.czmObject;
|
|
// console.log('currentModel.value',currentModel.value);
|
|
} catch (e) {
|
|
// 抛出异常 因为源码proxy 没有set方法没有返回true
|
|
// 设置当前选中的元素，模拟用户操作，切换窗体元素
|
|
selectModel.value = { value: props.type };
|
|
}
|
|
// 设置页面加载后的初始数据
|
|
updateValueSet(props);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
//组件销毁前 关闭mitt
|
|
$mitt.emit('drawShapeShow', { show: false });
|
|
$mitt.off('windowCancel');
|
|
$mitt.off('addAreaFinished');
|
|
});
|
|
// 取消方法
|
|
function cancel() {
|
|
if (isUpdateModel.value) {
|
|
// 调用更新时的取消
|
|
updateClose();
|
|
} else {
|
|
// 调用创建时的取消
|
|
close();
|
|
}
|
|
|
|
//通过父组件v-if 关闭本组件
|
|
proxy.$parent.addModelWinShow = false;
|
|
}
|
|
|
|
// 创建时的取消方法
|
|
function close() {
|
|
// 模型不为空时，消耗模型
|
|
if (currentModel.value) {
|
|
if (currentModel.value.addViewShedReturn) {
|
|
console.log('window.$earth.czm.viewer.entities', window.$earth.czm.viewer.entities);
|
|
|
|
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn);
|
|
}
|
|
currentModel.value.editing = false;
|
|
currentModel.value.destroy();
|
|
}
|
|
}
|
|
|
|
// 更新时取消
|
|
function updateClose() {
|
|
// 还原数据
|
|
if (currentModel.value) {
|
|
currentModel.value.xbsjFromJSON(revert.value);
|
|
if (Object.keys(radarOldObj.value).length > 0) {
|
|
radarColor.value.rgba = radarOldObj.value.color;
|
|
radarRadius.value = radarOldObj.value.radarRadius;
|
|
radarRange.value = radarOldObj.value.radarRange;
|
|
radarShifting.value = radarOldObj.value.radarShifting;
|
|
}
|
|
currentModel.value.editing = false;
|
|
currentModel.value.positionEditing = false;
|
|
currentModel.value.rotationEditing = false;
|
|
}
|
|
}
|
|
|
|
function finish() {
|
|
if (currentModel.value) {
|
|
// 释放当前模型的引用
|
|
currentModel.value.rotationEditing = false;
|
|
currentModel.value.positionEditing = false;
|
|
currentModel.value = null;
|
|
}
|
|
//通过父组件v-if 关闭本组件
|
|
proxy.$parent.addModelWinShow = false;
|
|
}
|
|
/**
|
|
* 确认方法
|
|
*/
|
|
function ok() {
|
|
// debugger
|
|
// $mitt.off('windowCancel')
|
|
// console.log('selectArea.value',selectArea.value);
|
|
// console.log('selectArea.value.id',selectArea.value.id);
|
|
// console.log('currentModel.value',currentModel.value);
|
|
|
|
// 不允许选择模型为空
|
|
if (!selectModel.value.value) {
|
|
return;
|
|
} else if (name.value == null || name.value.length <= 0) {
|
|
// 名称效验
|
|
createMessage.warning('需要先填写名称', 2);
|
|
return;
|
|
} else if (currentModel.value.xbsjType == 'Pin' && currentModel.value.imageUrl.length <= 0) {
|
|
// pin类型图片效验
|
|
createMessage.warning('需要先上传图片', 2);
|
|
return;
|
|
} else if (currentModel.value.xbsjType == 'Pin' && !selectHostDevice.value) {
|
|
createMessage.warning('主机设备不能为空', 2);
|
|
return;
|
|
} else if (currentModel.value.xbsjType == 'Pin' && !selectDeviceNum.value) {
|
|
createMessage.warning('设备编码不能为空', 2);
|
|
return;
|
|
}
|
|
//***************************************************
|
|
else if (currentModel.value.xbsjType !== 'Polyline' && (selectArea.value == null || selectArea.value.id <= 0)) {
|
|
// 非区域类型，区域效验
|
|
createMessage.warning('需要先选择区域', 2);
|
|
return;
|
|
}
|
|
currentModel.value.editing = false;
|
|
// 提交数据
|
|
submitData();
|
|
}
|
|
// 绑定模型属性
|
|
function bindModelProps(model) {
|
|
// 绑定位移
|
|
model.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', model, 'xbsjPosition'));
|
|
// 绑定角度
|
|
model.disposers.push(window.XE.MVVM.bindRotation(proxy, 'rotation', model, 'xbsjRotation'));
|
|
// 绑定缩放
|
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'scale', model, 'xbsjScale'));
|
|
// 绑定编辑状态
|
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'creating', model, 'creating'));
|
|
// 绑定旋转状态
|
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'rotationEditing', model, 'rotationEditing'));
|
|
// 绑定最小像素
|
|
model.disposers.push(window.XE.MVVM.bind(proxy, 'minimumPixelSize', model, 'minimumPixelSize'));
|
|
}
|
|
|
|
// 添加模型
|
|
function addModel() {
|
|
// debugger
|
|
// 创建模型
|
|
const model = new window.XE.Obj.Model(window.$earth);
|
|
// 设置视距
|
|
model.distanceDisplayCondition = [1, 30000];
|
|
// 设置模型地址
|
|
model.url = window._CONFIG['domianURL'] + '/sys/common/static/dxgG.gltf';
|
|
// 设置缩放倍数
|
|
model.scale = 0.03;
|
|
// model.creating = true
|
|
// 绑定属性
|
|
bindModelProps(model);
|
|
minimumPixelSize.value = 80;
|
|
// 切换为创建状态
|
|
// modelState('creating');
|
|
// model.flyTo()
|
|
return model;
|
|
}
|
|
|
|
function bindPinProps(pin) {
|
|
pin.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', pin, 'position'));
|
|
pin.disposers.push(window.XE.MVVM.bind(proxy, 'creating', pin, 'creating'));
|
|
pin.disposers.push(window.XE.MVVM.bind(proxy, 'show', pin, 'show'));
|
|
}
|
|
|
|
// 添加pin
|
|
function addPin() {
|
|
// 创建pin
|
|
const pin = new window.XE.Obj.Pin(window.$earth);
|
|
// 设置缩放
|
|
pin.scale = 0.8;
|
|
// 设置url
|
|
pin.imageUrl = '';
|
|
// 设置最大可视距离
|
|
pin.far = 1073741824;
|
|
// 设置显示文字样式
|
|
pin.pinBuilder.extTextFont = '30px 楷体';
|
|
pin.pinBuilder.extTextPixelOffset = [30, -20];
|
|
pin.pinBuilder.fillColor = [1, 1, 1, 0.9];
|
|
pin.pinBuilder.outlineColor = [0, 0, 0, 0.9];
|
|
// 绑定属性
|
|
bindPinProps(pin);
|
|
// 设置为不可见
|
|
show.value = false;
|
|
// 刷新窗体
|
|
modelState('creating');
|
|
modelState('creating');
|
|
return pin;
|
|
}
|
|
|
|
// 创建区域
|
|
/**
|
|
* @abstract 需要调用 drawShape组件 进行绘图，提取当中的坐标点position
|
|
* 处理完数据再使用 addPolyline方法 window.XE.Obj.Polyline 创建线段
|
|
*
|
|
* @abstract
|
|
* $mitt.emit('drawShapeShow') 打开drawShape组件显示
|
|
* @abstract
|
|
* $mitt.emit('addAreaFinished') 接受传回来的临时图形
|
|
*/
|
|
function addArea() {
|
|
$mitt.emit('drawShapeShow', { show: true, title: '创建区域工具', from: 'addArea' });
|
|
$mitt.on('addAreaFinished', (t: any) => {
|
|
console.log('addAreaFinished', t);
|
|
//t 为drawShape传过来的临时图形
|
|
t.creating = true;
|
|
// 监控t数据，完成创建后调用后续方法
|
|
window.XE.MVVM.watch(t, 'creating', (n: any) => {
|
|
// console.log('creating', n);
|
|
if (n == false) {
|
|
//面
|
|
let positions: any = [];
|
|
if (t._polygon) {
|
|
positions = t._polygon._polyline.positions;
|
|
}
|
|
//线
|
|
else if (t._polyline) {
|
|
positions = t._polyline.positions;
|
|
} else {
|
|
positions = t.positions;
|
|
// console.error("图形错误");
|
|
}
|
|
//销毁临时图形
|
|
t.destroy();
|
|
/**
|
|
* 控制时序，处理完数据再调用方法 addPolyline
|
|
* 否则会出现在数据滞后在图形创建时，导致数据错误
|
|
*
|
|
*/
|
|
nextTick(() => {
|
|
addPolyline(positions);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
/**
|
|
* @params 需要调用 addArea 方法进行绘图，获取坐标点position
|
|
*/
|
|
function addPolyline(positions: any = null) {
|
|
// 关闭此窗体
|
|
cancel();
|
|
// 创建区域
|
|
const currentModel = new window.XE.Obj.Polyline(window.$earth);
|
|
// 设置配置参数
|
|
const objConfig = {
|
|
positions: positions,
|
|
};
|
|
// 插入数据
|
|
currentModel.xbsjFromJSON(objConfig);
|
|
// console.log('currentModel', currentModel);
|
|
// 获取地图ui对象
|
|
const earthUI = window.$uia;
|
|
// 打开一个区域编辑ui窗体
|
|
earthUI.showPropertyWindow(currentModel);
|
|
nextTick(() => {
|
|
// 主要ui窗口
|
|
const mainUI = earthUI._vm.$refs.mainUI;
|
|
// 所有打开的ui窗口Ref值
|
|
const windowsAttrList = Object.keys(mainUI.$refs);
|
|
// 寻找当前窗体的工具对象
|
|
const modelToolKey = windowsAttrList.filter((f) => f.indexOf(currentModel.guid) > -1)[0];
|
|
const modelTool = mainUI.$refs[modelToolKey][0];
|
|
// console.log("modelTool",modelTool);
|
|
|
|
// 当前窗体的元素
|
|
const el = modelTool.$el;
|
|
// console.log("el",el);
|
|
// this.cloneEl(el)
|
|
//样式
|
|
el.children[2].style.padding = '0px';
|
|
el.children[2].style.transition = 'none';
|
|
// 加入循环周期输入框
|
|
// let divCustom = document.createElement("div");
|
|
// divCustom.setAttribute("data-v-74b863e5", "");
|
|
// divCustom.setAttribute("class", "flatten");
|
|
// divCustom.innerHTML =
|
|
// `
|
|
// <label data-v-74b863e5="">循环周期</label>
|
|
// <input data-v-74b863e5="" placeholder="循环周期(帧)" id="cycleFrame" type="number" style="float: left;">
|
|
// `;
|
|
// let fatherNode = el.children[2].children[0].children[0]
|
|
// let insertBeforeWhich = el.children[2].children[0].children[0].children[1];
|
|
// fatherNode.insertBefore(divCustom,insertBeforeWhich);
|
|
//加入区域场景选择器
|
|
let divCustom = document.createElement("div");
|
|
divCustom.setAttribute("data-v-74b863e5", "");
|
|
divCustom.setAttribute("class", "flatten");
|
|
divCustom.setAttribute("style", "display: flex; margin-bottom: 20px;");
|
|
// divCustom.setAttribute("style", "position: relative;");
|
|
divCustom.innerHTML =
|
|
`
|
|
<label data-v-74b863e5="">所属区域</label>
|
|
`
|
|
let instance: ReturnType<typeof createVNode> | null = null;
|
|
// 创建虚拟节点,传入模型的数据
|
|
instance = createVNode(seneIdTreeSelect,{currentModel});
|
|
// 渲染
|
|
render(instance, divCustom);
|
|
// 父节点
|
|
let fatherNode = el.children[2].children[0].children[0]
|
|
// 插入位置
|
|
let insertBeforeWhich = el.children[2].children[0].children[0].children[1];
|
|
fatherNode.insertBefore(divCustom,insertBeforeWhich);
|
|
|
|
// 取消按钮元素
|
|
const cancelBtn = el.children[3].children[0];
|
|
// 确认按钮元素
|
|
const okBtn = el.children[3].children[1];
|
|
// 设置确认按钮点击事件
|
|
okBtn.onclick = function () {
|
|
// console.log("currentModel",currentModel);
|
|
// return
|
|
// 判断所属区域
|
|
if (!currentModel.sceneId) {
|
|
createMessage.warning('请选择所属区域', 2);
|
|
return;
|
|
}
|
|
//关闭多余窗口
|
|
$mitt.emit('windowCancel');
|
|
// 提交对象
|
|
const submitData: any = {};
|
|
// 路径为空，无法提交
|
|
const poistions = currentModel.positions;
|
|
if (poistions.length <= 0) {
|
|
createMessage.warning('路径为空，无法创建', 2);
|
|
return;
|
|
}
|
|
// 模型名称
|
|
submitData.name = currentModel.name;
|
|
// 场景区域
|
|
submitData.sceneId = currentModel.sceneId;
|
|
// 线段编码
|
|
submitData.lineCode = currentModel.guid;
|
|
// 首尾相连属性
|
|
submitData.isLoop = Number(currentModel.loop);
|
|
// 深度检查
|
|
submitData.isDepthCheck = Number(currentModel.depthTest);
|
|
// 宽度
|
|
submitData.width = currentModel.width;
|
|
// 插值方式
|
|
submitData.interpolation = currentModel.arcType;
|
|
// 路径数组
|
|
submitData.positions = JSON.stringify(poistions);
|
|
// 材质
|
|
submitData.material = JSON.stringify(currentModel.material)
|
|
// 材质类型
|
|
switch (currentModel.material.type) {
|
|
// 实线
|
|
case 'XbsjColorMaterial':
|
|
// 实线材质0
|
|
submitData.materialType = 0;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color);
|
|
// 以下为没有属性，所以赋予默认值
|
|
submitData.intervalColor = null;
|
|
submitData.dashLength = 0;
|
|
submitData.dashStyle = 0;
|
|
break;
|
|
// 虚线
|
|
case 'XbsjPolylineDashMaterial':
|
|
// 虚线材质1
|
|
submitData.materialType = 1;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color);
|
|
// 间隔颜色
|
|
submitData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor);
|
|
// 虚线长度
|
|
submitData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength;
|
|
// 虚线样式
|
|
submitData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern;
|
|
break;
|
|
// 箭头线
|
|
case 'XbsjPolylineArrowMaterial':
|
|
// 箭头线2
|
|
submitData.materialType = 2;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color);
|
|
// 以下为没有的属性
|
|
submitData.intervalColor = null;
|
|
submitData.dashLength = 0;
|
|
submitData.dashStyle = 0;
|
|
break;
|
|
// 轨迹线
|
|
case 'XbsjODLineMaterial':
|
|
// 轨迹线
|
|
submitData.materialType = 3;
|
|
// 线段颜色
|
|
submitData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color);
|
|
// 没有的属性
|
|
submitData.intervalColor = null;
|
|
submitData.dashLength = 0;
|
|
submitData.dashStyle = 0;
|
|
// 循环周期
|
|
submitData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount;
|
|
|
|
// material.XbsjODLineMaterial = {}
|
|
// material.XbsjODLineMaterial.color = JSON.parse(data.color)
|
|
// material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame
|
|
break;
|
|
}
|
|
// 提交区域数据
|
|
defHttp
|
|
.post({ url: '/military/msMapLine/add', params: submitData }, { isTransformResponse: false })
|
|
.then((response) => {
|
|
// 成功后挂载节点到树中
|
|
if (response.success) {
|
|
// 记录id
|
|
currentModel.id = response.result;
|
|
// 设置父节点
|
|
const parent = window.$earth.sceneTree.$refs[currentModel.sceneId];
|
|
// 生成叶子节点
|
|
const leaf = new window.XE.SceneTree.Leaf(currentModel);
|
|
// 设置叶子节点标识
|
|
leaf.ref = response.result;
|
|
// 挂载上树
|
|
window.$earth.sceneTree.root.children.push(leaf);
|
|
// 隐藏叶子节点的dom节点
|
|
nextTick(() => {
|
|
$('#earthContainer>div>div>div:nth-child(5)')
|
|
.children('div')
|
|
.eq(1)
|
|
.children()
|
|
.eq(0)
|
|
.children()
|
|
.eq(0)
|
|
.children()
|
|
.each((index, element) => {
|
|
if (index <= 1) {
|
|
return;
|
|
}
|
|
const paddingLeft = $(element).children().eq(0).css('padding-left');
|
|
if (paddingLeft === '10px') {
|
|
$(element).css('display', 'none');
|
|
}
|
|
});
|
|
});
|
|
// 生成显示在树上的节点，此为虚假的节点，关联关系为ref一个为 node_ref 一个为ref
|
|
const node = {
|
|
ref: 'node_' + response.result,
|
|
title: '<防区>'+ currentModel.name,
|
|
expand: false,
|
|
children: [
|
|
{
|
|
expand: false,
|
|
title: '监控点位',
|
|
ref: 'monitor_' + window.guid(),
|
|
children: [],
|
|
},
|
|
{
|
|
expand: false,
|
|
title: '雷达点位',
|
|
ref: 'ldList_' + window.guid(),
|
|
children: [],
|
|
},
|
|
{
|
|
expand: false,
|
|
title: '微波点位',
|
|
ref: 'wbList_' + window.guid(),
|
|
children: [],
|
|
},
|
|
],
|
|
};
|
|
// 挂载并显示到树上
|
|
// window.$earth.sceneTree.$refs.areas.children.push(node);
|
|
parent.children.push(node);
|
|
// 提示用户
|
|
createMessage.success('添加成功！', 2);
|
|
} else {
|
|
throw '新增区域数据出错';
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
createMessage.error('新增区域数据出错', 2);
|
|
});
|
|
};
|
|
// 取消按钮
|
|
cancelBtn.onclick = function () {
|
|
$mitt.off('windowCancel');
|
|
// 消耗当前窗体的dom节点
|
|
el.remove();
|
|
// 消耗当前创建的对象
|
|
// console.log("currentModel",currentModel);
|
|
currentModel.destroy();
|
|
};
|
|
});
|
|
|
|
return currentModel;
|
|
}
|
|
|
|
// 修改属性状态,取反
|
|
function modelState(propName) {
|
|
// propName.value = !propName.value
|
|
proxy[propName] = !proxy[propName];
|
|
}
|
|
function submitModel() {
|
|
if (selectModel.value.value === 'jkd') {
|
|
}
|
|
}
|
|
|
|
// 名称修改的变化事件
|
|
function nameChange(model) {
|
|
if (model.xbsjType == 'Model') {
|
|
} else if (model.xbsjType == 'Pin') {
|
|
// pin类型的名称变化时修改显示的文字
|
|
model.pinBuilder.extText = name.value;
|
|
}
|
|
}
|
|
|
|
// 获取区域数据
|
|
function getAreas(area) {
|
|
const submitData: any = {
|
|
pageNo: 1,
|
|
pageSize: 999,
|
|
};
|
|
if (area) {
|
|
submitData.sysOrgCode = area + '*';
|
|
}
|
|
return defHttp
|
|
.get({ url: '/military/msMapLine/list', params: submitData }, { isTransformResponse: false })
|
|
.then((response) => {
|
|
if (response.success) {
|
|
const labelAttr = selectModel.value.value == 'ld' ? 4 : 10; // 雷达字典编号4 微波字典编号10
|
|
//过滤区域（雷达为二级区域，其它为一级）
|
|
areaList.value = response.result.records.filter((item) => {
|
|
if (labelAttr == 4) {
|
|
return item.parentCode != null;
|
|
} else {
|
|
return item.parentCode == null;
|
|
}
|
|
});
|
|
} else {
|
|
throw '加载区域数据出错';
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
|
|
function getHostDeviceList() {
|
|
const url = '/military/msDeviceInfo/list';
|
|
const args = { pageNo: 1, pageSize: 999 };
|
|
|
|
return defHttp
|
|
.get({ url, params: args }, { isTransformResponse: false })
|
|
.then((reponse) => {
|
|
if (reponse.success) {
|
|
hostDeviceList.value = reponse.result.records;
|
|
// console.log(reponse)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
throw '获取主机信息错误';
|
|
});
|
|
}
|
|
|
|
// 提交数据方法
|
|
function submitData() {
|
|
// 判断当前模型为模型所提交的数据
|
|
if (currentModel.value.xbsjType == 'Model') {
|
|
// 查找最后一个/所在位置
|
|
let startNum = currentModel.value.url.lastIndexOf('/') + 1;
|
|
// 获取出模型名称 监控点
|
|
let modelName = '';
|
|
if (startNum > -1) {
|
|
modelName = currentModel.value.url.substring(startNum, currentModel.value.url.length);
|
|
}
|
|
submitObject.value = {
|
|
id: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
sitecode: null,
|
|
sitename: name.value, // 名称
|
|
longitude: LngLatHeight.value[0], // x坐标
|
|
latitude: LngLatHeight.value[1], // y坐标
|
|
height: LngLatHeight.value[2], // z坐标
|
|
yaw: rotation.value[0], // x旋转
|
|
pitch: rotation.value[1], // y旋转
|
|
roll: rotation.value[2], // z旋转
|
|
lineId: selectArea.value.id ? selectArea.value.id : null, // 防区id
|
|
state: 1, // 数据状态
|
|
modelUrl: modelName, // 模型url地址
|
|
scale: currentModel.value.scale ? currentModel.value.scale : 1, // 整体缩放比例 默认1
|
|
xyzScale: scale.value.toString(), // xyz缩放比例
|
|
minimumPixelSize: minimumPixelSize.value, // 最小像素大小
|
|
};
|
|
let request: any = null;
|
|
let url, // 提交地址
|
|
method = ''; // 提交方法类型
|
|
if (isUpdateModel.value) {
|
|
// 设置url为编辑地址，设置方法为put 设置记录id
|
|
url = '/military/camera/site/edit';
|
|
submitObject.value.id = currentModel.value.customProp;
|
|
request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false });
|
|
// request = putAction(url, submitObject.value)
|
|
} else {
|
|
// 设置url为新增地址，设置方法为post
|
|
url = '/military/camera/site/add';
|
|
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false });
|
|
// request = postAction(url, this.submitObject)
|
|
}
|
|
// 提交数据，等待回复
|
|
request
|
|
.then(function (response) {
|
|
// 数据回复，并成功
|
|
if (response.success) {
|
|
// 设置显示节点的ref为 node_ref
|
|
const lineId = 'node_' + selectArea.value.id;
|
|
// 当前处于新增状态
|
|
if (!isUpdateModel.value) {
|
|
// 设置父节点
|
|
const parent = window.$earth.sceneTree.$refs[lineId].children[0];
|
|
// 真实的叶子节点
|
|
let node = new window.XE.SceneTree.Leaf(currentModel.value);
|
|
// 设置叶子节点的ref
|
|
node.ref = response.result;
|
|
// 将id存入customProp属性中
|
|
currentModel.value.customProp = response.result;
|
|
// 设置树中显示文
|
|
node.title = name.value;
|
|
// 设置节点的name，用来存储,区域id。name属性不在模型树上显示，故而只用作数据储存功能
|
|
node.name = selectArea.value.id;
|
|
// 将此节点添加到树中
|
|
window.$earth.sceneTree.root.children.push(node);
|
|
// 移除真实叶子节点显示的dom
|
|
nextTick(() => {
|
|
$('#earthContainer>div>div>div:nth-child(5)')
|
|
.children('div')
|
|
.eq(1)
|
|
.children()
|
|
.eq(0)
|
|
.children()
|
|
.eq(0)
|
|
.children()
|
|
.each((index, element) => {
|
|
if (index <= 1) {
|
|
return;
|
|
}
|
|
const paddingLeft = $(element).children().eq(0).css('padding-left');
|
|
if (paddingLeft === '10px') {
|
|
$(element).css('display', 'none');
|
|
}
|
|
});
|
|
});
|
|
// 虚假的节点
|
|
const shamNode = {
|
|
ref: 'node_' + response.result, // 设置节点ref
|
|
title: name.value, // 设置节点显示文字
|
|
expand: false,
|
|
children: [],
|
|
};
|
|
// 树中加入并显示该节点
|
|
parent.children.push(shamNode);
|
|
// 提示用户
|
|
createMessage.success('添加成功！', 2);
|
|
} else {
|
|
//当前处于更新状态
|
|
// 获取更新的虚假节点
|
|
const shamNode = window.$earth.sceneTree.$refs['node_' + submitObject.value.id];
|
|
// 更新虚假节点的显示文字
|
|
shamNode.title = name.value;
|
|
// 设置name属性
|
|
currentModel.value.name = name.value;
|
|
moveNode('Model');
|
|
// 提示用户
|
|
createMessage.success('修改成功！', 2);
|
|
}
|
|
}
|
|
})
|
|
.then(function () {
|
|
// 清空当前模型的引用
|
|
// currentModel.value = null
|
|
// 隐藏窗体
|
|
// winVisible.value = false
|
|
//通过父组件v-if 关闭本组件
|
|
// proxy.$parent.addModelWinShow = false
|
|
finish();
|
|
});
|
|
} else if (currentModel.value.xbsjType == 'Pin') {
|
|
const lastIndex = currentModel.value.imageUrl.lastIndexOf('/temp');
|
|
const ImgUrl = currentModel.value.imageUrl.substring(lastIndex + 1);
|
|
// 当前模型为Pin类型
|
|
// 更具创建时选择的模型类型判断，赋予模型类型标识
|
|
const labelAttr = selectModel.value.value == 'ld' ? 4 : 10; // 雷达字典编号4 微波字典编号10
|
|
submitObject.value = {
|
|
mapLabel: {
|
|
id: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
sysOrgCode: null,
|
|
labelAttr: labelAttr, // 类型标识
|
|
labelName: name.value, // 名称
|
|
lineId: selectArea.value?.id ? selectArea.value.id : null, // 所属区域
|
|
labelLon: LngLatHeight.value[0], // x坐标
|
|
labelLat: LngLatHeight.value[1], // y坐标
|
|
labelHeight: LngLatHeight.value[2], // z坐标
|
|
labelImgUrl: ImgUrl, // 设置url
|
|
labelStatus: 1, // 启动:1 不启用 0
|
|
labelCode: selectDeviceNum.value,
|
|
cameraId: null,
|
|
cameraName: null,
|
|
pan: 0,
|
|
tile: 0,
|
|
zoom: 0,
|
|
placements: null,
|
|
},
|
|
deviceId: selectHostDevice.value.id,
|
|
};
|
|
// console.log("submitObject.value",submitObject.value);
|
|
// let radarObj = {
|
|
// radarCode: selectDeviceNum.value,
|
|
// elevation: Number(radarRange.value),
|
|
// workingRadius: Number(radarRadius.value),
|
|
// angularRadian: Number(radarShifting.value),
|
|
// customProp: JSON.stringify({ color: radarColor.value.rgba })
|
|
// }
|
|
// console.log("radarObj",radarObj);
|
|
// debugger
|
|
let request: any = null;
|
|
let url1, // 提交地址
|
|
method1 = ''; // 提交方法类型
|
|
const { eidtId } = props;
|
|
if (isUpdateModel.value) {
|
|
// 设置url为编辑地址，设置方法为put 设置记录id
|
|
url1 = 'military/msMapLabel/editMapLabel';
|
|
submitObject.value.mapLabel.id = props.eidtId;
|
|
// console.log('props.eidtId,',props.eidtId);
|
|
|
|
request = defHttp.put({ url: url1, params: submitObject.value }, { isTransformResponse: false });
|
|
// request = putAction(url1, this.submitObject.value)
|
|
} else {
|
|
// 设置url为新增地址，设置方法为post
|
|
url1 = 'military/msMapLabel/addMapLabel';
|
|
request = defHttp.post({ url: url1, params: submitObject.value }, { isTransformResponse: false });
|
|
// request = postAction(url1, this.submitObject.value)
|
|
}
|
|
// const props = this.getBind()
|
|
const { setLabelStatus, setIconByRef, el } = props;
|
|
// 提交pin数据，等待响应
|
|
request
|
|
.then((response) => {
|
|
// 响应，并成功
|
|
if (response.success) {
|
|
// 记录虚假节点的Ref
|
|
const lineId = 'node_' + selectArea.value.id;
|
|
const ldLineId = 'nodeSecondary_' + selectArea.value.id;
|
|
// 创建状态下
|
|
if (!isUpdateModel.value) {
|
|
// 该区域的微波集合
|
|
const wbParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[2];
|
|
// 该区域的雷达集合
|
|
const ldParent = window.$earth.sceneTree.$refs[ldLineId];
|
|
// 创建叶子节点
|
|
let node = new window.XE.SceneTree.Leaf(currentModel.value);
|
|
// 设置节点显示名称
|
|
node.title = name.value;
|
|
// 设置节点ref
|
|
node.ref = response.result;
|
|
// name属性用来记录区域id
|
|
node.name = submitObject.value.lineId;
|
|
// 用户属性用来记录标志类型
|
|
currentModel.value.customProp =
|
|
'{"labelAttr":' + labelAttr + ',"labelCode":"' + selectDeviceNum.value + '","deviceId":"' + selectHostDevice.value.id + '"}';
|
|
setLabelStatus(selectHostDevice.value, selectDeviceNum.value, node.ref, 2).finally(() => {
|
|
if (labelAttr == 4) {
|
|
// 雷达新增一圆
|
|
ldParent.children.push(node);
|
|
} else {
|
|
// 微波新增一圆
|
|
wbParent.children.push(node);
|
|
}
|
|
// 提示用户
|
|
createMessage.success('添加成功！', 2);
|
|
});
|
|
} else {
|
|
const node = window.$earth.sceneTree.$refs[eidtId];
|
|
node.title = name.value;
|
|
// 用户属性用来记录标志类型
|
|
currentModel.value.customProp =
|
|
'{"labelAttr":' + labelAttr + ',"labelCode":"' + selectDeviceNum.value + '","deviceId":"' + selectHostDevice.value.id + '"}';
|
|
setLabelStatus(selectHostDevice.value, selectDeviceNum.value, node.ref, 2).finally(() => {
|
|
const hasMoveNode = moveNode(selectModel.value.value);
|
|
if (!hasMoveNode) {
|
|
setIconByRef(node.ref, el);
|
|
}
|
|
});
|
|
// 提示用户
|
|
createMessage.success('编辑成功！', 2);
|
|
//-----------------------
|
|
}
|
|
//是否为雷达
|
|
if (labelAttr == 4) {
|
|
//编辑(存在雷达扫描)
|
|
if (Object.keys(radarOldObj.value).length > 0) {
|
|
let radarObj = {
|
|
id: radarOldObj.value.id,
|
|
radarCode: selectDeviceNum.value,
|
|
elevation: Number(radarRange.value),
|
|
workingRadius: Number(radarRadius.value),
|
|
angularRadian: Number(radarShifting.value),
|
|
customProp: JSON.stringify({ color: radarColor.value.rgba }),
|
|
};
|
|
defHttp
|
|
.put({ url: radarUrl.value.edit, params: radarObj }, { isTransformResponse: false })
|
|
// putAction(that.radarUrl.edit, radarObj)
|
|
.then((res) => {
|
|
// console.log(res,'edit');
|
|
});
|
|
} else {
|
|
let radarObj = {
|
|
radarCode: selectDeviceNum.value,
|
|
elevation: Number(radarRange.value),
|
|
workingRadius: Number(radarRadius.value),
|
|
angularRadian: Number(radarShifting.value),
|
|
customProp: JSON.stringify({ color: radarColor.value.rgba }),
|
|
};
|
|
defHttp
|
|
.post({ url: radarUrl.value.add, params: radarObj }, { isTransformResponse: false })
|
|
// postAction(that.radarUrl.add, radarObj)
|
|
.then((res) => {
|
|
// console.log(res,'add');
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
createMessage.error(response.message, 2);
|
|
currentModel.value.destroy();
|
|
}
|
|
})
|
|
.then(() => {
|
|
// 释放当前模型的引用
|
|
// currentModel.value = null
|
|
// 关闭窗体
|
|
// winVisible.value = false
|
|
//通过父组件v-if 关闭本组件
|
|
// proxy.$parent.addModelWinShow = false
|
|
finish();
|
|
});
|
|
}
|
|
}
|
|
|
|
// 更新状态初始值赋予
|
|
function updateValueSet(props) {
|
|
// debugger
|
|
// 设置name为模型的name
|
|
name.value = currentModel.value.name;
|
|
// 是否存在当前区域
|
|
const hasArea = areaList.value.filter((item: any) => {
|
|
return item.id == props.lineId;
|
|
});
|
|
// 存在当前区域
|
|
if (hasArea.length > 0) {
|
|
// 设置选中区域
|
|
selectArea.value = hasArea[0];
|
|
}
|
|
// 类型为监控点时
|
|
if (props.type == 'jkd') {
|
|
// 绑定属性
|
|
bindModelProps(currentModel.value);
|
|
} else {
|
|
previewImgUrl.value = currentModel.value.imageUrl;
|
|
// console.log('previewImgUrl.value',previewImgUrl.value);
|
|
|
|
const jsonObj = JSON.parse(currentModel.value.customProp);
|
|
const hasHostDevice = hostDeviceList.value.filter((item: any) => {
|
|
return item.id == jsonObj.deviceId;
|
|
});
|
|
if (hasHostDevice && hasHostDevice.length > 0) {
|
|
selectHostDevice.value = hasHostDevice[0];
|
|
} else {
|
|
console.log('没有找到已选择的主机设备');
|
|
}
|
|
const labelCode = jsonObj.labelCode;
|
|
if (labelCode && labelCode != 'null') {
|
|
selectDeviceNum.value = labelCode;
|
|
//初始雷达扫描属性值
|
|
if (jsonObj.labelAttr == 4) {
|
|
defHttp.get({ url: radarUrl.value.list, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => {
|
|
if (res.success) {
|
|
if (res.result.records.length > 0) {
|
|
let data = res.result.records[0];
|
|
radarOldObj.value = {
|
|
id: data.id,
|
|
radarRadius: data.workingRadius,
|
|
radarRange: data.elevation,
|
|
radarShifting: data.angularRadian,
|
|
};
|
|
if (data.customProp) {
|
|
radarColor.value.rgba = JSON.parse(data.customProp).color;
|
|
radarOldObj.value.color = JSON.parse(data.customProp).color;
|
|
}
|
|
radarRadius.value = data.workingRadius;
|
|
radarRange.value = data.elevation;
|
|
radarShifting.value = data.angularRadian;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 绑定属性
|
|
bindPinProps(currentModel.value);
|
|
}
|
|
}
|
|
|
|
// 克隆dom对象，未调用方法
|
|
function cloneEl(el) {
|
|
const selectNode = el.children[2].children[0].children[0].children[5];
|
|
const parent = selectNode.parentElement;
|
|
const cloneNode = selectNode.cloneNode(true);
|
|
cloneNode.children[0].children[0].innerHTML = '岛屿';
|
|
const inputEl = cloneNode.children[0].children[1];
|
|
const context = cloneNode.children[0].children[3];
|
|
const scope = context.attributes[0];
|
|
inputEl.value = '';
|
|
inputEl.onclick = function () {
|
|
const disState = context.style.display;
|
|
if (disState == 'none') {
|
|
context.style.display = 'block';
|
|
} else {
|
|
context.style.display = 'none';
|
|
}
|
|
};
|
|
const selectItemText = '';
|
|
defHttp.get({ url: '/military/msMapScene/list', params: { pageNo: 1, pageSize: 999 } }, { isTransformResponse: false }).then((response) => {
|
|
const records = response.result.records;
|
|
const fragment = new DocumentFragment();
|
|
for (const record of records) {
|
|
const itemEl = document.createElement('div');
|
|
itemEl.onclick = function () {
|
|
inputEl.value = record.sceneName;
|
|
islands.value = record;
|
|
context.style.display = 'none';
|
|
};
|
|
itemEl.id = record.sysOrgCode;
|
|
itemEl.setAttribute(scope.name, '');
|
|
itemEl.innerHTML = `<span ${scope.name} >${record.sceneName}</span>`;
|
|
fragment.append(itemEl);
|
|
}
|
|
context.innerHTML = '';
|
|
context.append(fragment);
|
|
const beforeNode = el.children[2].children[0].children[0].children[4];
|
|
parent.insertBefore(cloneNode, beforeNode);
|
|
});
|
|
}
|
|
|
|
function moveNode(type) {
|
|
if (!isUpdateModel.value) {
|
|
return false;
|
|
}
|
|
// 传入属性
|
|
// const props = this.getBind()
|
|
if (props.lineId == selectArea.value.id) {
|
|
return false;
|
|
}
|
|
// const areaByNodeId = props.areaByNodeId
|
|
const currentNode = props.node._inner.sn;
|
|
const newNodel = 'node_' + selectArea.value.id;
|
|
const moveAreaNode = window.$earth.sceneTree.$refs[newNodel] || window.$earth.sceneTree.$refs['nodeSecondary_' + this.selectArea.id];
|
|
if (moveAreaNode) {
|
|
let moveNode = null;
|
|
if (type == 'Model') {
|
|
moveNode = moveAreaNode.children[0];
|
|
} else if (type == 'ld') {
|
|
moveNode = moveAreaNode;
|
|
} else {
|
|
moveNode = moveAreaNode.children[2];
|
|
}
|
|
const index = moveNode.children.length + 1;
|
|
currentNode.moveTo(moveNode, index);
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function getRadarScan() {
|
|
if (timer.value) clearTimeout(timer.value);
|
|
timer.value = setTimeout(() => {
|
|
let rgb = radarColor.value.rgba;
|
|
if (currentModel.value.addViewShedReturn) {
|
|
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn);
|
|
}
|
|
//计算偏移角
|
|
let left = Number(radarShifting.value) - Number(radarRange.value) / 2;
|
|
currentModel.value.addViewShedReturn = addViewShedRadar(
|
|
currentModel.value.position,
|
|
radarRadius.value,
|
|
left,
|
|
Number(radarRange.value) / 2 + Number(radarShifting.value),
|
|
[rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a]
|
|
);
|
|
}, 300);
|
|
}
|
|
|
|
return {
|
|
radarColor,
|
|
radarRange,
|
|
radarRadius,
|
|
radarShifting,
|
|
radarOldObj,
|
|
radarUrl,
|
|
heightCoefficient,
|
|
widthCoefficient,
|
|
currentModel,
|
|
isUpdateModel,
|
|
modelSelectList,
|
|
selectModel,
|
|
name,
|
|
LngLatHeight,
|
|
rotation,
|
|
scale,
|
|
creating,
|
|
show,
|
|
rotationEditing,
|
|
winVisible,
|
|
areaList,
|
|
previewImgUrl,
|
|
uploadFile,
|
|
selectArea,
|
|
submitObject,
|
|
isFristChangeMethod,
|
|
revert,
|
|
islands,
|
|
minimumPixelSize,
|
|
hostDeviceList,
|
|
selectHostDevice,
|
|
deviceNumList,
|
|
selectDeviceNum,
|
|
timer,
|
|
width,
|
|
height,
|
|
top,
|
|
left,
|
|
cancel,
|
|
close,
|
|
updateClose,
|
|
ok,
|
|
bindModelProps,
|
|
addModel,
|
|
bindPinProps,
|
|
addPin,
|
|
addPolyline,
|
|
addArea,
|
|
modelState,
|
|
submitModel,
|
|
nameChange,
|
|
getAreas,
|
|
getHostDeviceList,
|
|
submitData,
|
|
updateValueSet,
|
|
cloneEl,
|
|
moveNode,
|
|
getRadarScan,
|
|
pinIconUpload,
|
|
uploadFileCount,
|
|
expand,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.custom-item-box > div > input) {
|
|
width: 45% !important;
|
|
margin-right: 0% !important;
|
|
}
|
|
|
|
:deep(.custom-item-box) {
|
|
padding-left: 5% !important;
|
|
width: 80% !important;
|
|
}
|
|
|
|
:deep(.xbsjselect) {
|
|
height: 100% !important;
|
|
}
|
|
|
|
:deep(.xbsjselect-selectdiv) {
|
|
left: 0px !important;
|
|
top: 0px !important;
|
|
height: 90% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
line-height: 0% !important;
|
|
justify-content: space-between !important;
|
|
padding-left: 5px !important;
|
|
}
|
|
|
|
:deep(.xbsjselect-selectButton) {
|
|
margin-top: 0%;
|
|
}
|
|
|
|
:deep(.custom-label) {
|
|
width: 15% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: #ffffff;
|
|
}
|
|
|
|
:deep(.custom-item) {
|
|
height: 8%;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
:deep(.xbsjselect-selectOption) {
|
|
width: 100% !important;
|
|
min-height: auto !important;
|
|
}
|
|
|
|
.edit-model-btn {
|
|
cursor: pointer;
|
|
line-height: 5%;
|
|
}
|
|
|
|
.edit-model-btn-disable {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.object-box {
|
|
width: 100%;
|
|
height: 86%;
|
|
|
|
label {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.container-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
:deep(.object-box .custom-item) {
|
|
height: 10%;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.Mask {
|
|
width: 100%;
|
|
height: 80%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 0%;
|
|
display: block;
|
|
}
|
|
|
|
.name-input {
|
|
height: 90%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 3px;
|
|
border: none;
|
|
color: #ddd;
|
|
padding: 5px;
|
|
outline: none;
|
|
}
|
|
|
|
.xyz-input {
|
|
height: 90%;
|
|
width: 30%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 3px;
|
|
border: none;
|
|
color: #ddd;
|
|
padding: 5px;
|
|
outline: none;
|
|
}
|
|
|
|
.y-margin {
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
.upload-box {
|
|
height: 100%;
|
|
width: 20%;
|
|
}
|
|
</style>
|
|
|