From 29691ec15056f163b369923cb59d2c3ef50539c0 Mon Sep 17 00:00:00 2001
From: DIAMOND <276397553@qq.com>
Date: Fri, 19 Jan 2024 09:07:04 +0800
Subject: [PATCH] =?UTF-8?q?1.AddModelWin=20=E5=8C=BA=E5=9F=9F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=20=E5=82=A8=E5=AD=98=E6=9D=90=E8=B4=A8material?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2.修改ApiTreeSelect，菜单渲染父节点。getPopupContainer，默认渲染到 body 上，如果遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
3.AddModelWin  折现属性面板新增选项 场景选择器
---
 .../Form/src/components/ApiTreeSelect.vue     |  3 +-
 src/components/earthMap/Toolbar.vue           | 25 +++++-
 .../earthMap/components/seneIdTreeSelect.vue  | 90 +++++++++++++++++++
 .../earthMap/toolbar/AddModelWin.vue          | 42 ++++++++-
 src/views/earthMap/edit/EarthComp.vue         |  4 +-
 .../msMapLine/components/MsMapLineForm.vue    | 16 ++--
 6 files changed, 163 insertions(+), 17 deletions(-)
 create mode 100644 src/components/earthMap/components/seneIdTreeSelect.vue

diff --git a/src/components/Form/src/components/ApiTreeSelect.vue b/src/components/Form/src/components/ApiTreeSelect.vue
index 5cd8168..947df5b 100644
--- a/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/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>
diff --git a/src/components/earthMap/Toolbar.vue b/src/components/earthMap/Toolbar.vue
index 592dec3..290c6ae 100644
--- a/src/components/earthMap/Toolbar.vue
+++ b/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) {
               // 实线
diff --git a/src/components/earthMap/components/seneIdTreeSelect.vue b/src/components/earthMap/components/seneIdTreeSelect.vue
new file mode 100644
index 0000000..f67995c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/earthMap/toolbar/AddModelWin.vue b/src/components/earthMap/toolbar/AddModelWin.vue
index d74f4da..b60486d 100644
--- a/src/components/earthMap/toolbar/AddModelWin.vue
+++ b/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) {
               // 实线
diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index 0d45a43..eb75460 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -310,8 +310,8 @@ import { nextTick } from 'vue';
       },
        //后台区域管理事件
       msMapLineHandler: {
-        type: Boolean,
-        default: false,
+        type: Object,
+        default: null,
       },
       //后台监控点位管理事件
       msCameraSiteHandle: {
diff --git a/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue b/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue
index 77690d3..3de364d 100644
--- a/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue
+++ b/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)
   })