Browse Source

1.AddModelWin 区域管理功能新增字段 储存材质material

2.修改ApiTreeSelect,菜单渲染父节点。getPopupContainer,默认渲染到 body 上,如果遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。
3.AddModelWin  折现属性面板新增选项 场景选择器
master
DIAMOND 11 months ago
parent
commit
29691ec150
  1. 3
      src/components/Form/src/components/ApiTreeSelect.vue
  2. 25
      src/components/earthMap/Toolbar.vue
  3. 90
      src/components/earthMap/components/seneIdTreeSelect.vue
  4. 42
      src/components/earthMap/toolbar/AddModelWin.vue
  5. 4
      src/views/earthMap/edit/EarthComp.vue
  6. 16
      src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue

3
src/components/Form/src/components/ApiTreeSelect.vue

@ -1,5 +1,6 @@
<template>
<a-tree-select v-bind="getAttrs" @change="handleChange" :placeholder=placeholder allow-clear>
<a-tree-select v-bind="getAttrs" @change="handleChange" :placeholder=placeholder allow-clear
:getPopupContainer="(triggerNode) => triggerNode.parentNode">
<template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data || {}"></slot>
</template>

25
src/components/earthMap/Toolbar.vue

@ -1145,7 +1145,7 @@
});
window.XE.MVVM.watch(t, 'positions', (n: any) => {
console.log('positions', n);
// console.log('positions', n);
});
});
}
@ -1153,17 +1153,34 @@
* @params 需要调用 addArea 方法进行绘图获取坐标点position
* @params msMapLineHandler标识 后台区域管理调用
*/
function addPolyline(positions: any = null, msMapLineHandler =null) {
function addPolyline(positions: any = null, msMapLineHandler:any =null) {
// console.log('positions', positions);
//
// cancel();
//
const currentModel = new window.XE.Obj.Polyline(window.$earth);
//
const objConfig = {
const objConfig: any = {
positions: positions,
};
/**
* 后台区域管理调用
* */
// if (typeof msMapLineHandler === 'object' && Object.keys(msMapLineHandler).length != 0) {
// console.log("");
// //
// //
// objConfig.loop = msMapLineHandler.isLoop;
// objConfig.depthTest = msMapLineHandler.isDepthCheck;
// objConfig.width = msMapLineHandler.width;
// objConfig.arcType = msMapLineHandler.interpolation;
// objConfig.positions = JSON.parse(msMapLineHandler.positions);
// objConfig.material = JSON.parse(msMapLineHandler.material);
// }
//
currentModel.xbsjFromJSON(objConfig);
// console.log('currentModel', currentModel);
@ -1221,6 +1238,8 @@
submitData.interpolation = currentModel.arcType;
//
submitData.positions = JSON.stringify(poistions);
//
submitData.material = JSON.stringify(currentModel.material)
//
switch (currentModel.material.type) {
// 线

90
src/components/earthMap/components/seneIdTreeSelect.vue

@ -0,0 +1,90 @@
<!--
seneIdTreeSelect.vue
场景ID树选择组件
电子地图专用
功能概述原生的折现属性面板 添加一个场景选择器功能用于决定防区添加到哪个区域下
-->
<template>
<ApiTreeSelect :api="sceneIdTree" v-model:value="currentModel.sceneId" placeholder="请选择所属区域" :disabled="disabled">
</ApiTreeSelect>
</template>
<script lang="ts" setup>
import type { ModalProps } from '/@/components/Modal';
import { ref, defineComponent, computed, unref, onMounted, nextTick, getCurrentInstance } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { Modal, Spin, Input, ConfigProvider } from 'ant-design-vue';
import { useLocale } from '/@/locales/useLocale';
import { ApiTreeSelect } from '/@/components/Form';
import $mitt from '@/utils/earthMap/mitt';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const { createMessage } = useMessage()
const { proxy }: any = getCurrentInstance();
const props = defineProps({
disabled: {
type: Boolean,
default: false,
},
currentModel: {
type: Object,
default: {},
}
})
onMounted(()=>{
console.log("currentModelaaaaaa",props.currentModel);
// console.log("currentModelaaaaaa",props);
// console.log("proxy",proxy);
})
//
const sceneIdTree = () => defHttp.get<Recordable[]>
({
url: "/military/msMapScene/queryTreeByCode",
params: {
sceneId: userStore.userInfo?.sceneId + "*"
}
}).then(res => { return [res]; })
;
</script>
<style scoped lang="less">
:deep(.ant-select-selector){
background-color: rgba(0,0,0,.5) !important
}
:deep(.ant-select-selection-placeholder){
color: #ddd !important;
}
:deep(.ant-select-arrow){
color: #474747 !important;
}
:deep(.ant-select-dropdown){
background-color: #8a8a8a !important;
color: #ddd !important;
}
:deep(.ant-select-tree){
background-color: #8a8a8a !important;
color: #ddd !important;
}
:deep(.ant-select-tree .ant-select-tree-node-content-wrapper:hover){
background: #6b6b6b;
}
:deep(.ant-select-selection-item){
color: #ddd !important;
}
</style>

42
src/components/earthMap/toolbar/AddModelWin.vue

@ -250,7 +250,7 @@
</template>
<script lang="ts">
import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue';
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';
@ -258,7 +258,7 @@
import Window from '@/components/earthMap/components/Window.vue';
import { useUserStore } from '/@/store/modules/user';
import { defHttp } from '/@/utils/http/axios';
// import mitt from '/@/utils/mitt';
import seneIdTreeSelect from '/@/components/earthMap/components/seneIdTreeSelect.vue';
import $mitt from '@/utils/earthMap/mitt';
import { useMessage } from '/@/hooks/web/useMessage';
import $ from 'jquery';
@ -786,7 +786,7 @@
};
//
currentModel.xbsjFromJSON(objConfig);
console.log('currentModel', currentModel);
// console.log('currentModel', currentModel);
// ui
const earthUI = window.$uia;
// ui
@ -803,16 +803,50 @@
//
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("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
$mitt.emit('windowCancel');
//
const submitData: any = {};
@ -837,6 +871,8 @@
submitData.interpolation = currentModel.arcType;
//
submitData.positions = JSON.stringify(poistions);
//
submitData.material = JSON.stringify(currentModel.material)
//
switch (currentModel.material.type) {
// 线

4
src/views/earthMap/edit/EarthComp.vue

@ -310,8 +310,8 @@ import { nextTick } from 'vue';
},
//
msMapLineHandler: {
type: Boolean,
default: false,
type: Object,
default: null,
},
//
msCameraSiteHandle: {

16
src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue

@ -96,10 +96,10 @@
</a-form>
<a-modal title="绘制区域" :visible="mapVisible" @ok="destroyed" @cancel="destroyed" width="60vw" destroyOnClose wrapClassName="EarthMap">
<a-row style="height: 60vh;">
<a-modal title="绘制区域" style="top: 20px" :visible="mapVisible" @ok="destroyed" @cancel="destroyed" width="80vw" destroyOnClose wrapClassName="EarthMap">
<a-row style="height: 80vh;">
<a-col :span="24">
<EarthComp ref="earth" :msMapLineHandler=true />
<EarthComp ref="earth" :msMapLineHandler="formData.id ? formData: {}"/>
</a-col>
</a-row>
</a-modal>
@ -108,7 +108,7 @@
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, computed, onMounted, watch } from 'vue';
import { ref, reactive, nextTick, computed, onMounted, watch, onBeforeUnmount } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
@ -123,8 +123,6 @@ import { useUserStore } from '/@/store/modules/user';
import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
import locationPng from '@/assets/images/getLocation.png';
import $mitt from '@/utils/earthMap/mitt';
import { onBeforeUnmount } from 'vue';
import { toRaw } from 'vue';
const userStore = useUserStore();
//
@ -173,7 +171,7 @@ const validatorRules = {
interpolation: [{ required: true, message: '请选择插值方式!' },],
color: [{ required: true, message: '请输入颜色!' },],
// intervalColor: [{ required: true, message: '!' },],
cycleFrame: [{ required: true, message: '请输入循环周期!' },],
// cycleFrame: [{ required: true, message: '!' },],
isLoop: [{ required: true, message: '请选择是否首尾相连!' },],
isDepthCheck: [{ required: true, message: '请选择是否深度检测!' },],
width: [{ required: true, message: '请输入宽度!' },],
@ -357,6 +355,8 @@ function areaAssign(currentModel) {
formData.interpolation = currentModel.arcType
//
formData.positions = JSON.stringify(currentModel.positions)
//
formData.material = JSON.stringify(currentModel.material)
//
switch (currentModel.material.type) {
// 线
@ -415,7 +415,7 @@ function areaAssign(currentModel) {
}
onMounted(() => {
$mitt.on('toMsMapLineForm', (currentModel: any) => {
// console.log("currentModel", currentModel);
console.log("currentModel", currentModel);
//
areaAssign(currentModel)
})

Loading…
Cancel
Save