Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

将EarthComp组件中，添加模型选项中的四种类型（区域、监控点、微波、雷达）单独抽离出来

master
Fuyuu 12 months ago
parent
2c885ab604
commit
a4acaeed2f
7 changed files with 3359 additions and 1351 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 287
      src/components/earthMap/Toolbar.vue
  2. 2714
      src/components/earthMap/toolbar/AddModelWin.vue
  3. 521
      src/components/earthMap/toolbar/AddMonitorPointCom.vue
  4. 638
      src/components/earthMap/toolbar/AddRadarCom.vue
  5. 542
      src/components/earthMap/toolbar/AddWaveCom.vue
  6. 1
      src/utils/earthMap/earthObj.ts
  7. 7
      src/views/earthMap/edit/EarthComp.vue

287
src/components/earthMap/Toolbar.vue
View File

@ -44,7 +44,6 @@
<p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
<img :src="drawShapeMilitaryIMG" />
</p>
</div>
</Window>
<div id="measurePopModal" class="popModal">
@ -74,6 +73,10 @@
<p @click="openCreateModel('addModelWin')">添加模型</p>
<p @click="openCreateModel('roamPathList')">路径巡检</p>
<p @click="openCreateModel('keyControlAreaList')">管控区域</p>
<p @click="addArea()">添加区域</p>
<p @click="addMonitorPoint()">添加监控点</p>
<p @click="addWave()">添加微波探测</p>
<p @click="addRadar()">添加雷达</p>
</ul>
</div>
<div class="mapBox">
@ -86,6 +89,12 @@
</li>
</ul>
</div>
<!-- 添加监控点 -->
<AddMonitorPointCom v-if="addMonitorPointComShow"></AddMonitorPointCom>
<!-- 添加微波 -->
<AddWaveCom v-if="addWaveComShow" :setLabelStatus="setLabelStatus"></AddWaveCom>
<!-- 添加雷达 -->
<AddRadarCom v-if="addRadarComShow" :setLabelStatus="setLabelStatus"></AddRadarCom>
<AddModelWin v-if="addModelWinShow" :setLabelStatus="setLabelStatus"></AddModelWin>
<RoamPathList v-if="roamPathListShow"></RoamPathList>
@ -123,6 +132,9 @@
import drawShapeIMG from '@/assets/earthMap/toolbar/drawShapeIMG.png';
import drawShapeMilitaryIMG from '@/assets/earthMap/toolbar/drawShapeMilitaryIMG.png';
import AddMonitorPointCom from '@/components/earthMap/toolbar/AddMonitorPointCom.vue';
import AddWaveCom from '@/components/earthMap/toolbar/AddWaveCom.vue';
import AddRadarCom from '@/components/earthMap/toolbar/AddRadarCom.vue';
// import mitt from '/@/utils/mitt';
import $mitt from '@/utils/earthMap/mitt';
import { defHttp } from '/@/utils/http/axios';
@ -146,6 +158,9 @@
DrawShape,
DrawShapeMilitary,
KeyControlAreaList,
AddMonitorPointCom,
AddWaveCom,
AddRadarCom,
},
setup(props) {
const { proxy }: any = getCurrentInstance();
@ -181,6 +196,12 @@
const drawShapePackage: any = ref(null);
const drawShapeMilitaryShow = ref(false);
// 监控点弹窗
const addMonitorPointComShow = ref(false);
// 微波弹窗
const addWaveComShow = ref(false);
// 雷达弹窗
const addRadarComShow = ref(false);
//计算属性
const title = computed(() => {
return '';
@ -234,9 +255,9 @@
warnInfoMan();
});
//调用绘画组件，res.show为展示状态,res为传递数据
$mitt.on('drawShapeShow', function (res:any) {
$mitt.on('drawShapeShow', function (res: any) {
drawShapeShow.value = res.show;
drawShapePackage.value = res
drawShapePackage.value = res;
});
}
//数据绑定
@ -946,17 +967,19 @@
//绘画图形
function drawShape() {
//基本绘图没有被使用中，则关闭
if(drawShapeMilitaryShow.value && store.shapeUsing == false)
{drawShapeMilitaryShow.value = false}
if (drawShapeMilitaryShow.value && store.shapeUsing == false) {
drawShapeMilitaryShow.value = false;
}
//清空数据
drawShapePackage.value = null
drawShapePackage.value = null;
drawShapeShow.value = !drawShapeShow.value;
}
//绘画图形-军事态势
function drawShapeMilitary() {
//基本绘图没有被使用中，则关闭
if(drawShapeShow.value && store.shapeUsing == false)
{drawShapeShow.value = false}
if (drawShapeShow.value && store.shapeUsing == false) {
drawShapeShow.value = false;
}
drawShapeMilitaryShow.value = !drawShapeMilitaryShow.value;
}
@ -1051,6 +1074,246 @@
// )
}
// 添加监控点
function addMonitorPoint() {
addMonitorPointComShow.value = true;
}
// 添加微波
function addWave() {
addWaveComShow.value = true;
}
// 添加雷达
function addRadar() {
addRadarComShow.value = true;
}
// 添加区域
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;
}
//销毁临时图形
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];
// 当前窗体的元素
const el = modelTool.$el;
//样式
el.children[2].style.padding = '0px';
el.children[2].style.transition = 'none';
// 取消按钮元素
const cancelBtn = el.children[3].children[0];
// 确认按钮元素
const okBtn = el.children[3].children[1];
// 设置确认按钮点击事件
okBtn.onclick = function () {
$mitt.emit('windowCancel');
// 提交对象
const submitData: any = {};
// 路径为空，无法提交
const poistions = currentModel.positions;
if (poistions.length <= 0) {
createMessage.warning('路径为空，无法创建', 2);
return;
}
// 模型名称
submitData.name = currentModel.name;
// 线段编码
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);
// 材质类型
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;
break;
}
// 提交区域数据
defHttp
.post({ url: '/military/msMapLine/add', params: submitData }, { isTransformResponse: false })
.then((response) => {
// 成功后挂载节点到树中
if (response.success) {
// 生成叶子节点
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);
} else {
throw '新增区域数据出错';
}
})
.catch((e) => {
createMessage.error('新增区域数据出错', 2);
});
};
// 取消按钮
cancelBtn.onclick = function () {
$mitt.off('windowCancel');
// 消耗当前窗体的dom节点
el.remove();
// 消耗当前创建的对象
currentModel.destroy();
};
});
return currentModel;
}
onBeforeUnmount(() => {
// vue程序销毁时，需要清理相关资源
proxy._disposers.forEach((d) => d());
@ -1061,7 +1324,6 @@
$mitt.off('warnInfoMan');
});
return {
show,
title,
@ -1121,7 +1383,14 @@
openCreateModel,
drawShape,
drawShapeMilitary,
addMonitorPoint,
addWave,
addRadar,
addArea,
addModelWinShow,
addMonitorPointComShow,
addWaveComShow,
addRadarComShow,
roamPathListShow,
keyControlAreaListShow,
notificationModelShow,

2714
src/components/earthMap/toolbar/AddModelWin.vue
View File

File diff suppressed because it is too large

521
src/components/earthMap/toolbar/AddMonitorPointCom.vue
View File

@ -0,0 +1,521 @@
<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 class="object-box">
<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%" />
</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">
<a-slider v-model:value="minimumPixelSize" :min="0" :max="256" :step="1" />
</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', !currentModel || positionEditing ? '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="Mask"></div>
</Window>
</div>
</template>
<script lang="ts">
import { onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed } 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 { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import $ from 'jquery';
export default defineComponent({
name: 'AddMonitorPointCom',
components: {
xbsjScale,
XbsjSelect,
upload,
XbsjColorButton,
Window,
},
props: {
title: {
type: String,
default: '添加监控点',
},
},
setup() {
const { proxy }: any = getCurrentInstance();
const { createMessage } = useMessage();
// 宽高
let widthCoefficient = ref(0.3);
let heightCoefficient = ref(0.5);
// 计算弹窗宽高定位
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;
});
// 窗口显示或隐藏
let winVisible = ref(true);
// 当前模型
let currentModel: any = ref(null);
// 是否更新模型
let isUpdateModel = ref(false);
// 取消还原数据
let revert = ref(null);
// 监控点名称
let name = ref('');
// 所属区域列表
let areaList = ref([]);
// 选中所属区域
let selectArea: any = ref(null);
// 像素大小
let minimumPixelSize = ref(80);
// 俯仰角度
let LngLatHeight = ref([0, 0, 0]);
// 旋转角度
let rotation = ref([0, 0, 0]);
// 开启旋转辅助
let rotationEditing = ref(false);
// 开启移动辅助
let positionEditing = ref(false);
// 缩放
let scale = ref([1, 1, 1]);
// 是否跟随鼠标状态
let creating = ref(false);
// 是否展开表单项
let expand = ref(true);
// 提交对象
let submitObject: any = ref({});
// 获取区域数据
function getAreas() {
const submitData: any = {
pageNo: 1,
pageSize: 999,
};
return defHttp
.get(
{
url: '/military/msMapLine/list',
params: submitData,
},
{ isTransformResponse: false }
)
.then((res) => {
if (res.success) {
areaList.value = res.result.records;
}
});
}
// 取消
function cancel() {
if (isUpdateModel.value) {
// 调用更新时的取消
updateClose();
} else {
// 调用创建时的取消
close();
}
//通过父组件v-if 关闭本组件
proxy.$parent.addMonitorPointComShow = false;
}
// 更新时的取消方法
function updateClose() {
// 还原数据
if (currentModel.value) {
currentModel.value.xbsjFromJSON(revert.value);
currentModel.value.editing = false;
currentModel.value.positionEditing = false;
currentModel.value.rotationEditing = false;
}
}
// 创建时的取消方法
function close() {
// 模型不为空时，销毁模型
if (currentModel.value) {
if (currentModel.value.addViewShedReturn) {
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn);
}
currentModel.value.editing = false;
currentModel.value.destroy();
}
}
// 确认
function ok() {
// 校验表单项
if (name.value == null || name.value.length <= 0) {
createMessage.warning('请填写监控点名称', 2);
return;
} else if (selectArea.value == null || selectArea.value.id <= 0) {
// 非区域类型，区域效验
createMessage.warning('请选择所属区域', 2);
return;
}
// 关闭编辑状态
currentModel.value.editing = false;
// 提交数据
submitData();
}
// 提交数据方法
function submitData() {
// 查找最后一个/所在位置
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 = '';
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 });
} else {
// 设置url为新增地址，设置方法为post
url = '/military/camera/site/add';
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false });
}
// 提交数据，等待回复
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 () {
finish();
});
}
// 提交完成
function finish() {
if (currentModel.value) {
// 释放当前模型的引用
currentModel.value.rotationEditing = false;
currentModel.value.positionEditing = false;
currentModel.value = null;
}
//通过父组件v-if 关闭本组件
proxy.$parent.addMonitorPointComShow = false;
}
// 修改属性状态,取反
function modelState(propName) {
proxy[propName] = !proxy[propName];
}
// 添加监控点模型（监控杆）
function addModel() {
// 创建模型
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;
// 绑定属性
bindModelProps(model);
// 设备像素
minimumPixelSize.value = 80;
return model;
}
// 绑定模型属性
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 moveNode(type) {
if (!isUpdateModel.value) {
return false;
}
const newNodel = 'node_' + selectArea.value.id;
const moveAreaNode = window.$earth.sceneTree.$refs[newNodel] || window.$earth.sceneTree.$refs['nodeSecondary_' + selectArea.value.id];
if (moveAreaNode) {
let moveNode = null;
if (type == 'Model') {
moveNode = moveAreaNode.children[0];
} else if (type == 'ld') {
moveNode = moveAreaNode;
} else {
moveNode = moveAreaNode.children[2];
}
}
return true;
}
onMounted(() => {
// 设置当前状态为添加
isUpdateModel.value = false;
// 获取区域数据
getAreas().then(() => {
// 折叠面板
expand.value = true;
// 创建并绑定模型
currentModel.value = addModel();
});
});
return {
widthCoefficient,
heightCoefficient,
width,
height,
top,
left,
winVisible,
currentModel,
name,
areaList,
selectArea,
minimumPixelSize,
LngLatHeight,
rotation,
rotationEditing,
positionEditing,
scale,
creating,
expand,
getAreas,
bindModelProps,
modelState,
cancel,
ok,
};
},
});
</script>
<style scoped>
.object-box {
width: 100%;
height: 86%;
label {
color: #ffffff;
}
}
:deep(.custom-item-box > div > input) {
width: 45% !important;
margin-right: 0% !important;
}
:deep(.custom-label) {
width: 15% !important;
display: flex;
align-items: center;
justify-content: flex-end;
color: #ffffff;
}
:deep(.object-box .custom-item) {
height: 10%;
margin-top: 2%;
}
:deep(.custom-item-box) {
padding-left: 5% !important;
width: 80% !important;
}
.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%;
}
.edit-model-btn {
cursor: pointer;
line-height: 5%;
}
.edit-model-btn-disable {
cursor: not-allowed;
}
</style>

638
src/components/earthMap/toolbar/AddRadarCom.vue
View File

@ -0,0 +1,638 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-10 15:19:50
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-11 15:50:45
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\toolbar\AddWaveCom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<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 class="object-box">
<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" />
</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>
</Window>
</div>
</template>
<script lang="ts">
import { onMounted, defineComponent, ref, getCurrentInstance, computed, watch } 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 { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { addViewShedRadar } from '@/utils/earthMap/earthObj';
export default defineComponent({
name: 'AddWaveCom',
components: {
xbsjScale,
XbsjSelect,
upload,
XbsjColorButton,
Window,
},
props: {
title: {
type: String,
default: '添加雷达',
},
setLabelStatus: {
type: Function,
default: null,
},
setIconByRef: {
type: Function,
default: null,
},
el: {
type: Object,
default: null,
},
},
setup(props) {
const { proxy }: any = getCurrentInstance();
const { createMessage } = useMessage();
// 宽高
let widthCoefficient = ref(0.3);
let heightCoefficient = ref(0.5);
// 计算弹窗宽高定位
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;
});
// 雷达名称
let name = ref('');
// 所属区域列表
let areaList = ref([]);
// 选中所属区域
let selectArea: any = ref(null);
// 主机设备列表
let hostDeviceList = ref([]);
// 选中的主机设备
let selectHostDevice: any = ref(null);
// 设备编码
let selectDeviceNum = ref(null);
// 上传图片文件
let uploadFile:any = ref(null);
// 上传图片路径
let previewImgUrl = ref('');
// 设置上传次数
let uploadFileCount = ref(1);
// 定时器
let timer: any = ref(null);
// 是否有更新模型
let isUpdateModel = ref(false);
// 取消还原数据
let revert = ref(null);
// 当前模型
let currentModel: any = ref(null);
// 俯仰角度
let LngLatHeight = ref([0, 0, 0]);
// 扫描颜色
let radarColor = ref({ rgba: { r: 0, g: 255, b: 0, a: 0.5 } });
// 法线偏移角度
let radarShifting = ref(1);
// 扫描范围
let radarRange = ref(100);
// 扫描半径
let radarRadius = ref(500);
// 雷达扫描编辑、取消使用
let radarOldObj: any = ref({});
// 提交对象
let submitObject: any = ref({});
// 窗口显示或隐藏
let winVisible = ref(true);
// 是否跟随鼠标状态
let creating = ref(false);
// 是否可见
let show = ref(false);
// 是否展开表单项
let expand = ref(true);
// 监听图片上传
watch(uploadFile, (newVal, _oldVal) => {
// 模拟表单提交的对象
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++;
}
}
});
});
// 获取区域数据
function getAreas() {
const submitData: any = {
pageNo: 1,
pageSize: 999,
};
return defHttp
.get(
{
url: '/military/msMapLine/list',
params: submitData,
},
{ isTransformResponse: false }
)
.then((res) => {
if (res.success) {
areaList.value = res.result.records;
}
});
}
// 获取主机设备
function getHostDeviceList() {
const url = '/military/dtDeviceInfo/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;
}
})
.catch(() => {
throw '获取主机信息错误';
});
}
// 名称修改的变化事件
function nameChange(model) {
// pin类型的名称变化时修改显示的文字
model.pinBuilder.extText = name.value;
}
// 修改属性状态,取反
function modelState(propName) {
proxy[propName] = !proxy[propName];
}
// 添加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];
//移入移出事件
pin.onmouseover = () => {
window.$earth.czm.viewer._container.style.cursor = 'pointer';
};
pin.onmouseout = () => {
window.$earth.czm.viewer._container.style.cursor = 'default';
};
// 绑定属性
bindPinProps(pin);
// 设置为不可见
show.value = false;
// 刷新窗体
modelState('creating');
return pin;
}
// 绑定模型属性
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'));
}
// 取消
function cancel() {
if (isUpdateModel.value) {
// 调用更新时的取消
updateClose();
} else {
// 调用创建时的取消
close();
}
//通过父组件v-if 关闭本组件
proxy.$parent.addRadarComShow = false;
}
// 更新时的取消方法
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 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.addViewShedReturn = undefined;
currentModel.value.editing = false;
currentModel.value.destroy();
}
}
// 确定
function ok() {
// pin类型图片效验
if (currentModel.value.imageUrl.length <= 0) {
createMessage.warning('需要先上传图片', 2);
return;
} else if (!selectHostDevice.value) {
createMessage.warning('主机设备不能为空', 2);
return;
} else if (!selectDeviceNum.value) {
createMessage.warning('设备编码不能为空', 2);
return;
} else if (selectArea.value == null || selectArea.value.id <= 0) {
// 非区域类型，区域效验
createMessage.warning('请选择所属区域', 2);
return;
}
// 关闭编辑状态
currentModel.value.editing = false;
// 提交数据
submitData();
}
// 提交数据方法
function submitData() {
const lastIndex = currentModel.value.imageUrl.lastIndexOf('/temp');
const ImgUrl = currentModel.value.imageUrl.substring(lastIndex + 1);
// 当前模型为Pin类型
// 更具创建时选择的模型类型判断，赋予模型类型标识
const labelAttr = 4; // 雷达字典编号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,
};
let request: any = null;
// 提交地址
let url = '';
if (isUpdateModel.value) {
// 设置url为编辑地址，设置方法为put 设置记录id
url = '/military/msMapLabel/editMapLabel';
// submitObject.value.mapLabel.id = props.eidtId;
request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false });
} else {
// 设置url为新增地址，设置方法为post
url = '/military/msMapLabel/addMapLabel';
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false });
}
const { setLabelStatus } = props;
// 提交数据，等待回复
request
.then(function (response) {
// 数据回复，并成功
if (response.success) {
// 设置显示节点的ref为 node_ref
const lineId = 'node_' + selectArea.value.id;
// const ldLineId = 'nodeSecondary_' + selectArea.value.id;
// 该区域的微波集合
const wbParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[2];
// 该区域的雷达集合
const ldParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[1];
// 创建叶子节点
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);
});
//是否为雷达
if (labelAttr == 4) {
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: '/military/RadarConfig/add', params: radarObj }, { isTransformResponse: false });
}
}
})
.then(function () {
finish();
});
}
// 提交完成
function finish() {
if (currentModel.value) {
// 释放当前模型的引用
currentModel.value.rotationEditing = false;
currentModel.value.positionEditing = false;
currentModel.value = null;
}
//通过父组件v-if 关闭本组件
proxy.$parent.addRadarComShow = false;
}
// 雷达扫描
function getRadarScan() {
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
let rgb = radarColor.value.rgba;
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);
}
//计算偏移角
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);
}
onMounted(() => {
// 设置当前状态为添加
isUpdateModel.value = false;
// 获取主机设备
getHostDeviceList().then(() => {
// 获取区域数据
getAreas().then(() => {
// 折叠面板
expand.value = true;
// 创建并绑定模型
currentModel.value = addPin();
});
});
});
return {
width,
height,
top,
left,
name,
areaList,
selectArea,
hostDeviceList,
selectHostDevice,
selectDeviceNum,
uploadFile,
previewImgUrl,
isUpdateModel,
LngLatHeight,
radarShifting,
radarColor,
radarRange,
radarRadius,
radarOldObj,
currentModel,
winVisible,
creating,
expand,
modelState,
getRadarScan,
nameChange,
cancel,
ok,
};
},
});
</script>
<style scoped>
.object-box {
width: 100%;
height: 86%;
label {
color: #ffffff;
}
}
:deep(.custom-item-box > div > input) {
width: 45% !important;
margin-right: 0% !important;
}
:deep(.custom-label) {
width: 16% !important;
display: flex;
align-items: center;
justify-content: flex-end;
color: #ffffff;
}
:deep(.object-box .custom-item) {
height: 10%;
margin-top: 2%;
}
:deep(.custom-item-box) {
padding-left: 5% !important;
width: 80% !important;
}
.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%;
}
.edit-model-btn {
cursor: pointer;
line-height: 5%;
}
.edit-model-btn-disable {
cursor: not-allowed;
}
.upload-box {
height: 100%;
width: 20%;
}
</style>

542
src/components/earthMap/toolbar/AddWaveCom.vue
View File

@ -0,0 +1,542 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-10 15:19:50
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-11 15:49:37
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\toolbar\AddWaveCom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<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 class="object-box">
<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" />
</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>
</Window>
</div>
</template>
<script lang="ts">
import { onMounted, defineComponent, ref, getCurrentInstance, computed, watch } 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 { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
export default defineComponent({
name: 'AddWaveCom',
components: {
xbsjScale,
XbsjSelect,
upload,
XbsjColorButton,
Window,
},
props: {
title: {
type: String,
default: '添加微波探测器',
},
setLabelStatus: {
type: Function,
default: null,
},
setIconByRef: {
type: Function,
default: null,
},
el: {
type: Object,
default: null,
},
},
setup(props) {
const { proxy }: any = getCurrentInstance();
const { createMessage } = useMessage();
// 宽高
let widthCoefficient = ref(0.3);
let heightCoefficient = ref(0.5);
// 计算弹窗宽高定位
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;
});
// 微波名称
let name = ref('');
// 所属区域列表
let areaList = ref([]);
// 选中所属区域
let selectArea: any = ref(null);
// 主机设备列表
let hostDeviceList = ref([]);
// 选中的主机设备
let selectHostDevice: any = ref(null);
// 设备编码
let selectDeviceNum = ref(null);
// 上传图片文件
let uploadFile: any = ref(null);
// 上传图片路径
let previewImgUrl = ref('');
// 设置上传次数
let uploadFileCount = ref(1);
// 是否有更新模型
let isUpdateModel = ref(false);
// 取消还原数据
let revert = ref(null);
// 当前模型
let currentModel: any = ref(null);
// 俯仰角度
let LngLatHeight = ref([0, 0, 0]);
// 提交对象
let submitObject: any = ref({});
// 窗口显示或隐藏
let winVisible = ref(true);
// 是否跟随鼠标状态
let creating = ref(false);
// 是否可见
let show = ref(false);
// 是否展开表单项
let expand = ref(true);
watch(uploadFile, (newVal, _oldVal) => {
// 模拟表单提交的对象
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++;
}
}
});
});
// 获取区域数据
function getAreas() {
const submitData: any = {
pageNo: 1,
pageSize: 999,
};
return defHttp
.get(
{
url: '/military/msMapLine/list',
params: submitData,
},
{ isTransformResponse: false }
)
.then((res) => {
if (res.success) {
areaList.value = res.result.records;
}
});
}
// 获取主机设备
function getHostDeviceList() {
const url = '/military/dtDeviceInfo/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;
}
})
.catch(() => {
throw '获取主机信息错误';
});
}
// 名称修改的变化事件
function nameChange(model) {
// pin类型的名称变化时修改显示的文字
model.pinBuilder.extText = name.value;
}
// 修改属性状态,取反
function modelState(propName) {
proxy[propName] = !proxy[propName];
}
// 添加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;
}
// 绑定模型属性
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'));
}
// 取消
function cancel() {
if (isUpdateModel.value) {
// 调用更新时的取消
updateClose();
} else {
// 调用创建时的取消
close();
}
//通过父组件v-if 关闭本组件
proxy.$parent.addWaveComShow = false;
}
// 更新时的取消方法
function updateClose() {
// 还原数据
if (currentModel.value) {
currentModel.value.xbsjFromJSON(revert.value);
currentModel.value.editing = false;
currentModel.value.positionEditing = false;
currentModel.value.rotationEditing = false;
}
}
// 创建时的取消方法
function close() {
// 模型不为空时，销毁模型
if (currentModel.value) {
if (currentModel.value.addViewShedReturn) {
window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn);
}
currentModel.value.editing = false;
currentModel.value.destroy();
}
}
// 确定
function ok() {
// pin类型图片效验
if (currentModel.value.imageUrl.length <= 0) {
createMessage.warning('需要先上传图片', 2);
return;
} else if (!selectHostDevice.value) {
createMessage.warning('主机设备不能为空', 2);
return;
} else if (!selectDeviceNum.value) {
createMessage.warning('设备编码不能为空', 2);
return;
} else if (selectArea.value == null || selectArea.value.id <= 0) {
// 非区域类型，区域效验
createMessage.warning('请选择所属区域', 2);
return;
}
// 关闭编辑状态
currentModel.value.editing = false;
// 提交数据
submitData();
}
// 提交数据方法
function submitData() {
const lastIndex = currentModel.value.imageUrl.lastIndexOf('/temp');
const ImgUrl = currentModel.value.imageUrl.substring(lastIndex + 1);
// 当前模型为Pin类型
// 更具创建时选择的模型类型判断，赋予模型类型标识
const labelAttr = 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,
};
let request: any = null;
// 提交地址
let url = '';
if (isUpdateModel.value) {
// 设置url为编辑地址，设置方法为put 设置记录id
url = '/military/msMapLabel/editMapLabel';
// submitObject.value.mapLabel.id = props.eidtId;
request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false });
} else {
// 设置url为新增地址，设置方法为post
url = '/military/msMapLabel/addMapLabel';
request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false });
}
const { setLabelStatus } = props;
// 提交数据，等待回复
request
.then(function (response) {
// 数据回复，并成功
if (response.success) {
// 设置显示节点的ref为 node_ref
const lineId = 'node_' + selectArea.value.id;
// const ldLineId = 'nodeSecondary_' + selectArea.value.id;
// 该区域的微波集合
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(() => {
// 微波新增一圆
wbParent.children.push(node);
// 提示用户
createMessage.success('添加成功！', 2);
});
}
})
.then(function () {
finish();
});
}
// 提交完成
function finish() {
if (currentModel.value) {
// 释放当前模型的引用
currentModel.value.rotationEditing = false;
currentModel.value.positionEditing = false;
currentModel.value = null;
}
//通过父组件v-if 关闭本组件
proxy.$parent.addWaveComShow = false;
}
onMounted(() => {
// 设置当前状态为添加
isUpdateModel.value = false;
// 获取主机设备
getHostDeviceList().then(() => {
// 获取区域数据
getAreas().then(() => {
// 折叠面板
expand.value = true;
// 创建并绑定模型
currentModel.value = addPin();
});
});
});
return {
width,
height,
top,
left,
name,
areaList,
selectArea,
hostDeviceList,
selectHostDevice,
selectDeviceNum,
uploadFile,
previewImgUrl,
isUpdateModel,
LngLatHeight,
currentModel,
winVisible,
creating,
expand,
modelState,
nameChange,
cancel,
ok,
};
},
});
</script>
<style scoped>
.object-box {
width: 100%;
height: 86%;
label {
color: #ffffff;
}
}
:deep(.custom-item-box > div > input) {
width: 45% !important;
margin-right: 0% !important;
}
:deep(.custom-label) {
width: 15% !important;
display: flex;
align-items: center;
justify-content: flex-end;
color: #ffffff;
}
:deep(.object-box .custom-item) {
height: 10%;
margin-top: 2%;
}
:deep(.custom-item-box) {
padding-left: 5% !important;
width: 80% !important;
}
.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%;
}
.edit-model-btn {
cursor: pointer;
line-height: 5%;
}
.edit-model-btn-disable {
cursor: not-allowed;
}
.upload-box {
height: 100%;
width: 20%;
}
</style>

1
src/utils/earthMap/earthObj.ts
View File

@ -764,6 +764,7 @@ export const addPin = (name, url, options) => {
if (options.far) {
objConfig.far = options.far;
}
pin.xbsjFromJSON(objConfig);
return pin;

7
src/views/earthMap/edit/EarthComp.vue
View File

@ -1979,7 +1979,7 @@
}
let pickedFeature = this._viewer.scene.pick(click.position);
console.log('点击的船只:', pickedFeature);
// console.log('点击的船只:', pickedFeature);
if (pickedFeature && pickedFeature.id) {
// 三维模型
@ -2052,16 +2052,19 @@
JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4'
) {
let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode;
console.log(pickedFeature.id._xbsjOwner);
console.log('点击雷达：', pickedFeature.id._xbsjOwner);
if (pickedFeature.id._xbsjOwner.addViewShedReturn) {
//显示/不显示雷达扫码效果
// pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show;
// console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn);
//清空当前雷达，并将该方法指向undefined(清空)
console.log('关闭扫描');
pickedFeature.id._xbsjOwner.addViewShedReturn.clear();
pickedFeature.id._xbsjOwner.addViewShedReturn = undefined;
} else {
console.log('打开扫描');
defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => {
if (res.success) {
if (res.result.records.length > 0) {

Write Preview
Loading…
Cancel
Save