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

src/components/earthMap/Toolbar.vue

@@ -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)
+        if (drawShapeMilitaryShow.value && store.shapeUsing == false) {
-          {drawShapeMilitaryShow.value = false}
+          drawShapeMilitaryShow.value = false;
+        }
         //清空数据
-        drawShapePackage.value = null
+        drawShapePackage.value = null;
         drawShapeShow.value = !drawShapeShow.value;
       }
       //绘画图形-军事态势
       function drawShapeMilitary() {
         //基本绘图没有被使用中，则关闭
-        if(drawShapeShow.value && store.shapeUsing == false)
+        if (drawShapeShow.value && store.shapeUsing == false) {
-          {drawShapeShow.value = 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,

src/components/earthMap/toolbar/AddMonitorPointCom.vue

@@ -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>

src/components/earthMap/toolbar/AddRadarCom.vue

@@ -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>

src/components/earthMap/toolbar/AddWaveCom.vue

@@ -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>

src/utils/earthMap/earthObj.ts

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

src/views/earthMap/edit/EarthComp.vue

@@ -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) {