From 42c9f118fffee7f5c705e66317e87f1267e888aa Mon Sep 17 00:00:00 2001
From: DIAMOND <276397553@qq.com>
Date: Fri, 5 Jan 2024 10:25:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8store=E5=AD=98=E5=82=A8XbsjEa?=
 =?UTF-8?q?rthUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/earthMap.ts                 |    1 +
 src/views/earthMap/edit/EarthComp copy.vue    | 2608 +++++++++++++++++
 src/views/earthMap/edit/EarthComp.vue         |   22 +
 src/views/earthMap/edit/EarthCompTest.vue     | 1904 ++++++++++++
 .../scene/model/sceneInfo/SenceInfo.vue       |   23 +-
 5 files changed, 4553 insertions(+), 5 deletions(-)
 create mode 100644 src/views/earthMap/edit/EarthComp copy.vue
 create mode 100644 src/views/earthMap/edit/EarthCompTest.vue

diff --git a/src/store/modules/earthMap.ts b/src/store/modules/earthMap.ts
index 23d88fa..a63e636 100644
--- a/src/store/modules/earthMap.ts
+++ b/src/store/modules/earthMap.ts
@@ -20,6 +20,7 @@ export const useEarthMapStore = defineStore({
     shapeShowList: <any>[], //绘画存储（临时）
     keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域
     shipDataList: <any>[], //船只数据列表
+    xbsjEarthUI: <any>null, //XbsjEarthUI
   }),
   getters: {
     getCustomPrimitiveList(): any {
diff --git a/src/views/earthMap/edit/EarthComp copy.vue b/src/views/earthMap/edit/EarthComp copy.vue
new file mode 100644
index 0000000..7987a30
--- /dev/null
+++ b/src/views/earthMap/edit/EarthComp copy.vue	
@@ -0,0 +1,2608 @@
+<!-- 
+    电子地图    
+    -编辑页面
+ -->
+
+
+<script lang="ts">
+
+
+
+  export default class EarthComp extends Vue {
+
+
+    mounted() {
+
+      //创建地球资源
+      this.createEarth();
+
+
+
+      
+    }
+   
+
+  
+
+
+
+    createEarth() {
+      let that = this;
+      XbsjEarthUI.create('earthContainer').then(async (earthUI: any) => {
+        // 设置全局变量，可调试
+        window.$uia = earthUI;
+        window.$earth = earthUI.earth;
+        earthUI.controls.mainBar.show = false; //隐藏主工具栏
+        earthUI.controls.statusBar.show = true; //状态栏
+        //图层管理
+        let sceneTree = earthUI.tools.sceneTree;
+        // 显示图层管理
+        sceneTree.show = true;
+        // 设置图层管理 ref 输入框的 回车 事件
+        // ref 输入框的
+        let sceneTreeInput = sceneTree._comp.$el.getElementsByClassName('xbsj-model-content-box')[0].children[1];
+        // 地图右键菜单和ref输入框控制
+        this.$nextTick(() => {
+          // 删除ref 的 输入框
+          sceneTreeInput.remove();
+          // ----右键菜单样式控制--start
+          // 选择需要观察变动的节点
+          const targetNode = document.getElementsByClassName('menu-box')[0];
+          // 观察器的配置（需要观察什么变动） 属性，子节点or后代节点
+          const config = { attributes: true, childList: false, subtree: false };
+          // 当观察到变动时执行的回调函数
+          const callback = function (mutationsList, observer) {
+            // 右键会弹出菜单的样式 此时可以活的菜单这个元素
+            const el = mutationsList[0].target;
+            // 菜单的展示属性
+            const elDisplay = el.style.display;
+            // 如果菜单的展示属性本来就是none 则什么也不做
+            if (elDisplay == 'none') {
+              return;
+            }
+            // 获取到菜单项的集合
+            const childList = el.children[0].children;
+            // 菜单长度
+            const liSize = childList.length;
+            // 当菜单为none时 不显示
+            if (liSize == 0) {
+              el.style.display = 'none';
+            } else {
+              // 长度大于零 但第一个元素是 添加文件夹时也不显示
+              const text = childList[0].textContent;
+              if ('添加文件夹 ' == text) {
+                el.style.display = 'none';
+              }
+            }
+          };
+          // 创建一个观察器实例并传入回调函数
+          const observer = new MutationObserver(callback);
+          // 以上述配置开始观察目标节点
+          observer.observe(targetNode, config);
+          // -----右键菜单控制----end
+        });
+        let XE = window.XE;
+        // ref 的 输入框
+        // 设置 回车 事件
+        sceneTreeInput.onkeydown = function (e) {
+          if (e.code === 'Enter') {
+            // 回车事件
+            that.changeRef(earthUI.earth.sceneTree.currentSelectedNode, sceneTree._comp.$data.refvalue, that.sceneTreeOldRefValue);
+          }
+        };
+        // 设置失去焦点事件
+        sceneTreeInput.onblur = function () {
+          that.changeRef(earthUI.earth.sceneTree.currentSelectedNode, sceneTree._comp.$data.refvalue, that.sceneTreeOldRefValue);
+        };
+        // 修改图层管理中，右键菜单的显示
+        sceneTree._comp.popContextMenu = ({ item, vueObject }) => {
+          that.sceneTreePopContextMenu({ item, vueObject }, earthUI);
+        };
+        earthUI.tools.featureProperty.disabled = true; //禁用对象属性面板
+
+        this._earthUI = earthUI;
+        this._earth = earthUI.earth;
+        this._earth.interaction.picking.enabled = true; // 全局打开点击事件权限
+        this._earth.czm.viewer.scene.globe.depthTestAgainstTerrain = true; //开启深度检测
+        this._earth.terrainEffect.subSurfaceEnabled = false; //开启地表透明模式
+
+        this._viewer = earthUI.earth.czm.viewer;
+        this._viewer.scene.fxaa = true; //图像改善
+        this._viewer.scene.globe.baseColor = Cesium.Color.BLACK;
+
+        //加载场景资源
+        //   console.log("this.sceneTree",this.sceneTree);
+        // console.log("window._CONFIG['earthMapURL']",window._CONFIG['earthMapURL']);
+        // console.log("window._CONFIG['satellite']",window._CONFIG['satellite']);
+
+        this.sceneTree.children[0].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url =
+          window._CONFIG['earthMapURL'] + window._CONFIG['satellite'];
+        this.sceneTree.children[1].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url =
+          window._CONFIG['earthMapURL'] + window._CONFIG['vector'];
+        this.sceneTree.children[2].czmObject.xbsjTerrainProvider.XbsjCesiumTerrainProvider.url =
+          window._CONFIG['earthMapURL'] + window._CONFIG['terrain'];
+        // this.sceneTree.children.push(this.areaB)
+
+        this._earth.sceneTree.root = {
+          expand: true,
+          title: '场景树',
+          children: [this.sceneTree],
+        };
+        // 监控相机数据
+        XE.MVVM.watch(this._earth.camera, 'position', () => {
+          this.cameraPositionChange(this);
+        });
+
+        //加载地图实时资源（无人机、车辆、人员、巡逻路线等）
+        // this.createRealTimeObj(earthUI)
+        //监听鼠标事件
+        this.listenMouseHandler(earthUI);
+
+
+        //加载地图线路资源
+        await this.createBBHLine(earthUI);
+
+        //创建工具栏
+        this.toolbarShow = true;
+      });
+    }
+    
+
+
+
+
+
+    /* 使用async/await 处理异步方法顺序执行。成功的操作放到try里，失败的放在catch里 */
+    async createBBHLine(earthUI = null) {
+      console.log('MyScene', this.userStore.userInfo?.sceneId);
+      let type = 1; //**
+
+      let models: any = {
+        ref: this.sceneInfo[0].sceneId,
+        expand: true,
+        title: this.sceneInfo[0].sceneName,
+        children: [],
+      };
+      for (let record of this.sceneInfo) {
+        if (record.sceneId == this.userStore.userInfo?.sceneId) {
+          continue;
+        }
+        models.children.push({
+          ref: record.sceneId,
+          expand: false,
+          title: record.sceneName,
+          children: [],
+        });
+      }
+
+      // console.log('models',models);
+
+      // 加载区域
+      // console.log("加载区域");
+      await this.getLineInfo(models, type);
+      // 加载站点
+      // console.log("加载站点");
+      await this.getCameraInfo(models, type);
+      // 加载雷达和微波
+      // console.log("加载雷达和微波");
+      const labelItems: any = await this.getLabelInfo(models, type);
+      //加载绘画资源
+      await drawInit();
+      //加载重点监控区域
+      await keyControlInit();
+
+      // 监听树的dom节点变化
+      // console.log("监听树的dom节点变化");
+      this.$nextTick(() => {
+        // ----树节点复选框控制--start
+        // 容器元素
+        const target1 = document.getElementById('earthContainer')?.children[0].children[0].children[4].children[2].children[0].children[0];
+        // 配置子元素变动时触发
+        const config1 = { attributes: false, childList: true, subtree: false };
+        // this的别称
+        const that = this;
+        // 回调事件
+        const callback1 = function (mutationsList, observer) {
+          for (const mutation of mutationsList) {
+            // 新增元素
+            const el = mutation.addedNodes[0];
+            // 删除元素时不触发
+            if (!el) {
+              continue;
+            }
+            // 样式设置1
+            const setClassEl1 = el.children[0].children[1];
+            // 样式设置2
+            const setClassEl2 = setClassEl1.children[0];
+
+            // 查找input元素
+            const inputEl = setClassEl2.querySelector('input');
+            // 移除input元素的禁用属性
+            inputEl.removeAttribute('disabled');
+            const item = el.__vue__.item;
+            // item.checkStatus = 'ignored'
+            // 从元素中拿到这个元素节点对象
+            const nodeObject = item._inner.sn;
+            // console.log("nodeObject",nodeObject);
+
+            // 记录ref
+            const ref = nodeObject.ref;
+            if (ref.startsWith('wbList') || ref.startsWith('ldList')) {
+              // 展开菜单图标元素
+              const iel = el.children[0].children[0];
+              iel.addEventListener('click', function (e) {
+                if (iel.className == 'xbsj-icon xbsj-icon-ios-arrow-forward XbsjVritualTreeItemExpandIcon') {
+                  console.log('收起菜单');
+                  return;
+                }
+                // 获取展开菜单下的元素并设置图标
+                let eventTarget;
+                // console.log(nodeObject.children);
+                for (let index in nodeObject.children) {
+                  if (index === '0') {
+                    eventTarget = el.nextElementSibling;
+                  } else {
+                    eventTarget = eventTarget.nextElementSibling;
+                  }
+                  const child = nodeObject.children[index];
+                  let customProp = JSON.parse(child.czmObject.customProp);
+                  if (that.hostDeviceMapById.has(customProp.deviceId)) {
+                    let device = that.hostDeviceMapById.get(customProp.deviceId);
+                    // 设置状态
+                    that.setLabelStatus(device, customProp.labelCode, child.ref, 2);
+                  }
+
+                  // 设置图标
+                  that.setIconByRef(child.ref, eventTarget);
+                }
+              });
+            }
+            if (nodeObject.czmObject && nodeObject.czmObject.xbsjType == 'Pin') {
+              that.setIconByRef(ref, el);
+            }
+            // ref不为空并且大于0时 设置为input的id属性
+            if (ref && ref.length > 0) {
+              inputEl.id = ref;
+            }
+            // 首次展开添加元素默认为true，显示展示的对象
+            if (that.nodeCheckedByRef.size <= 0) {
+              // item.checkStatus = 'checked'
+              inputEl.checked = true;
+              //***设置样式为选中 */
+              setClassChecked(setClassEl1, setClassEl2, item);
+              that.nodeCheckedByRef.set(ref, true);
+            } else {
+              // 之后的展开根据ref获取应该显示的状态是选中还是非选中
+              let checked = that.nodeCheckedByRef.get(ref);
+              if (checked == undefined) {
+                checked = true;
+                if (ref && ref.length > 0 && ref.startsWith('node_')) {
+                  // 分割ref
+                  const refSplit = ref.split('_');
+                  // 取出真实对象
+                  const readyNode = earthUI.earth.sceneTree.$refs[refSplit[1]];
+                  if (readyNode && readyNode.czmObject) {
+                    checked = readyNode.czmObject.show;
+                  }
+                } else {
+                  if (nodeObject && nodeObject.czmObject) {
+                    checked = nodeObject.czmObject.show;
+                  }
+                }
+                inputEl.checked = checked;
+                that.nodeCheckedByRef.set(ref, checked);
+                setClassEl(setClassEl, setClassEl2, checked, item);
+              } else {
+                setClassEl(setClassEl, setClassEl2, checked, item);
+              }
+            }
+            // 显示隐藏样式监听
+            classMutationObserver(setClassEl1, setClassEl2, that.nodeCheckedByRef, ref);
+            // input disabled属性监听
+            disabledMutationObserver(inputEl);
+            /**调整触发顺序，阻止默认的input change事件，并绑定自己的change事件 */
+            inputEl.addEventListener(
+              'change',
+              function (e) {
+                // 阻止其他同类型事件调用
+                e.stopImmediatePropagation();
+                // input元素获取
+                const el = e.target;
+                // 获取ref
+                const ref = el.id;
+                // 点击元素的earthSdk对象
+                const clickNode = earthUI.earth.sceneTree.$refs[ref];
+                // 真实的earthSdk对象
+                let readyNode: any = null;
+                // 当ref大于0，并且以node_开头时，此为虚假的对象
+                if (ref && ref.length > 0 && ref.startsWith('node_')) {
+                  // 分割ref
+                  const refSplit = ref.split('_');
+                  // 取出真实对象
+                  readyNode = earthUI.earth.sceneTree.$refs[refSplit[1]];
+                } else if (ref && ref.length > 0 && ref.startsWith('nodeSecondary_')) {
+                  // 分割ref
+                  const refSplit = ref.split('_');
+                  // 取出真实对象
+                  readyNode = earthUI.earth.sceneTree.$refs[refSplit[1]];
+                  let guid = readyNode.czmObject.pinXbsjGuid;
+                  let pin = window.$earth.getObject(guid);
+                  pin.show = !pin.show;
+                } else if (ref && ref.length > 0) {
+                  // 真实对象就是本身
+                  readyNode = clickNode;
+                }
+                // 控制子节点的状态同步
+                that.showOrHideChild(clickNode, earthUI, el.checked);
+                if (readyNode != null) {
+                  // 隐藏对象
+                  if (!el.checked) {
+                    if (readyNode && readyNode.czmObject) {
+                      readyNode.czmObject.show = false;
+                    }
+                    // 设置属性
+                    setClassNoChecked(setClassEl1, setClassEl2, item);
+                  } else {
+                    // 显示对象
+                    if (readyNode && readyNode.czmObject) {
+                      readyNode.czmObject.show = true;
+                    }
+                    // 设置属性
+                    setClassChecked(setClassEl1, setClassEl2, item);
+                  }
+                  // 设置属性
+                  setClassNoChecked(setClassEl1, setClassEl2, item);
+                } else {
+                  // 显示对象
+                  if (readyNode && readyNode.czmObject) {
+                    readyNode.czmObject.show = true;
+                  }
+                  // 设置属性
+                  setClassChecked(setClassEl1, setClassEl2, item);
+                }
+                // 记录当前节点状态
+                that.nodeCheckedByRef.set(ref, el.checked);
+              },
+              true
+            );
+          }
+        };
+        // 创建一个观察器实例并传入回调函数
+        const observer1 = new MutationObserver(callback1);
+        // 以上述配置开始观察目标节点
+        observer1.observe(target1, config1);
+        // 设置label的鼠标事件
+        labelItems.forEach((itemId) => {
+          if (window.$earth.sceneTree.$refs[itemId]) {
+            window.$earth.sceneTree.$refs[itemId].czmObject.onmouseover = () => {
+              this._viewer._container.style.cursor = 'pointer';
+            };
+            window.$earth.sceneTree.$refs[itemId].czmObject.onmouseout = () => {
+              this._viewer._container.style.cursor = 'default';
+            };
+          }
+        });
+      });
+      // 隐藏图层管理 "地图场景" 一栏
+      // document.getElementsByClassName('XbsjVritualTreeItem').item(0).style.display = 'none'
+      this._earth.sceneTree.root.children.splice(1, 0, models);
+    }
+
+    async createRealTimeObj(earthUI = null) {
+      let that = this;
+      let models = {
+        expand: true,
+        title: '地图实况',
+        children: [
+          {
+            expand: false,
+            title: '巡逻路线',
+            children: [],
+          },
+          {
+            expand: false,
+            title: '执勤巡逻',
+            children: [],
+          },
+          {
+            expand: false,
+            title: '预警/报警',
+            children: [],
+          },
+          {
+            expand: false,
+            title: 'AIS',
+            children: [],
+          },
+        ],
+      };
+      try {
+        await this.getAllModelInfo(models);
+        await this.getPatrolRouteInfo(models);
+        //添加对象到场景树
+        // this._earth.sceneTree.root.children.push(models);
+        this._earth.sceneTree.root.children.splice(1, 0, models);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+
+    //加载区域
+    getLineInfo(models, type) {
+      const that = this;
+      return new Promise((resolve, reject) => {
+        //请求线路信息
+        defHttp
+          .get(
+            {
+              url: this.url.queryLineList,
+              params: {
+                pageNo: 1,
+                pageSize: 99999,
+                sceneId: this.userStore.userInfo?.sceneId + '*',
+              },
+            },
+            { isTransformResponse: false }
+          )
+          .then(async (res) => {
+            // console.log('加载区域',res);
+
+            if (res.success) {
+              //一级区域
+              let parentArea: any = [];
+              //二级区域
+              let childArea: any = [];
+              res.result.records.forEach((data) => {
+                if (data.parentCode) {
+                  childArea.push(data);
+                } else {
+                  parentArea.push(data);
+                }
+              });
+              parentArea.forEach((data) => {
+                // console.log(data);
+
+                // data.sceneId
+                let updatedPositions: any = [];
+                let positionsData = JSON.parse(data.positions);
+                if (!positionsData) {
+                  positionsData = [];
+                }
+                updatedPositions = positionsData;
+
+                let lineOptions: any = {
+                  maxShowHeight: 30000,
+                  customProp: data.lineCode,
+                };
+                lineOptions.name = data.name;
+                lineOptions.xbsjType = 'Polyline';
+                lineOptions.width = data.width;
+                lineOptions.positions = updatedPositions;
+                lineOptions.loop = Boolean(data.isLoop);
+                lineOptions.depthTest = Boolean(data.isDepthCheck);
+                lineOptions.arcType = data.interpolation;
+                let material: any = {};
+                switch (data.materialType) {
+                  // 实线
+                  case 0:
+                    material.type = 'XbsjColorMaterial';
+                    material.XbsjColorMaterial = {};
+                    if (!data.color || data.color.length <= 0) {
+                      data.color = '[1,1,1,1]';
+                    }
+                    material.XbsjColorMaterial.color = JSON.parse(data.color);
+                    break;
+                  // 虚线
+                  case 1:
+                    material.type = 'XbsjPolylineDashMaterial';
+                    material.XbsjPolylineDashMaterial = {};
+                    material.XbsjPolylineDashMaterial.color = JSON.parse(data.color);
+                    material.XbsjPolylineDashMaterial.gapColor = JSON.parse(data.intervalColor);
+                    material.XbsjPolylineDashMaterial.dashLength = data.dashLength;
+                    material.XbsjPolylineDashMaterial.dashPattern = data.dashStyle;
+                    break;
+                  // 箭头线
+                  case 2:
+                    material.type = 'XbsjPolylineArrowMaterial';
+                    material.XbsjPolylineArrowMaterial = {};
+                    material.XbsjPolylineArrowMaterial.color = JSON.parse(data.color);
+                    break;
+                  // 轨迹线
+                  case 3:
+                    material.type = 'XbsjODLineMaterial';
+                    material.XbsjODLineMaterial = {};
+                    material.XbsjODLineMaterial.color = JSON.parse(data.color);
+                    material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame;
+                    break;
+                }
+                lineOptions.material = material;
+                let currentChildArea: any = [];
+                if (childArea.length) {
+                  childArea.forEach((element) => {
+                    let obj = {};
+                    if (data.id == element.parentCode) {
+                      obj = {
+                        expand: false,
+                        title: element.name,
+                        ref: 'nodeSecondary_' + element.id,
+                        children: [],
+                      };
+                      let updatedPositions: any = [];
+                      let positionsData = JSON.parse(element.positions);
+                      if (!positionsData) {
+                        positionsData = [];
+                      }
+                      updatedPositions = positionsData;
+                      let lineOptions: any = {
+                        maxShowHeight: 30000,
+                        customProp: element.lineCode,
+                      };
+                      lineOptions.name = element.name;
+                      lineOptions.xbsjType = 'Polyline';
+                      lineOptions.width = element.width;
+                      lineOptions.positions = updatedPositions;
+                      lineOptions.loop = Boolean(element.isLoop);
+                      lineOptions.depthTest = Boolean(element.isDepthCheck);
+                      lineOptions.arcType = element.interpolation;
+                      let material: any = {};
+                      switch (element.materialType) {
+                        // 实线
+                        case 0:
+                          material.type = 'XbsjColorMaterial';
+                          material.XbsjColorMaterial = {};
+                          if (!element.color || element.color.length <= 0) {
+                            element.color = '[1,1,1,1]';
+                          }
+                          material.XbsjColorMaterial.color = JSON.parse(element.color);
+                          break;
+                        // 虚线
+                        case 1:
+                          material.type = 'XbsjPolylineDashMaterial';
+                          material.XbsjPolylineDashMaterial = {};
+                          material.XbsjPolylineDashMaterial.color = JSON.parse(element.color);
+                          material.XbsjPolylineDashMaterial.gapColor = JSON.parse(element.intervalColor);
+                          material.XbsjPolylineDashMaterial.dashLength = element.dashLength;
+                          material.XbsjPolylineDashMaterial.dashPattern = element.dashStyle;
+                          break;
+                        // 箭头线
+                        case 2:
+                          material.type = 'XbsjPolylineArrowMaterial';
+                          material.XbsjPolylineArrowMaterial = {};
+                          material.XbsjPolylineArrowMaterial.color = JSON.parse(element.color);
+                          break;
+                        // 轨迹线
+                        case 3:
+                          material.type = 'XbsjODLineMaterial';
+                          material.XbsjODLineMaterial = {};
+                          material.XbsjODLineMaterial.color = JSON.parse(element.color);
+                          material.XbsjODLineMaterial.totoalFrameCount = element.cycleFrame;
+                          break;
+                      }
+
+                      let pos = [0, 0, 0];
+                      positionsData.forEach((element) => {
+                        pos[0] += element[0];
+                        pos[1] += element[1];
+                        pos[2] += element[2];
+                      });
+                      pos[0] = pos[0] / positionsData.length;
+                      pos[1] = pos[1] / positionsData.length;
+                      pos[2] = pos[2] / positionsData.length;
+                      let pinBuilder = {
+                        extTextFont: '30px 宋体',
+                        extTextPixelOffset: [-40, 10],
+                        fillColor: [0, 0.3450980392156863, 1, 0.9],
+                        outlineColor: [1, 1, 1, 1],
+                        extText: element.name,
+                      };
+                      let pin = addPin(element.name, hidePng, { position: pos, scale: 0.8, pinBuilder, far: 107374 });
+                      lineOptions.pinXbsjGuid = pin.xbsjGuid;
+                      lineOptions.material = material;
+                      that._earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: element.id });
+                      currentChildArea.push(obj);
+                      // 如果是总部
+                      if (type == 1) {
+                        this.nodeConfigByRef.set('nodeSecondary_' + element.id, obj);
+                      }
+                    }
+                  });
+                }
+
+                //配置信息
+                const node = {
+                  ref: 'node_' + data.id,
+                  expand: false,
+                  title: '<防区>' + data.name,
+                  children: [
+                    {
+                      expand: false,
+                      title: '监控点位',
+                      ref: 'monitor_' + window.guid(),
+                      children: [],
+                    },
+                    {
+                      expand: false,
+                      title: '雷达点位',
+                      ref: 'ldList_' + window.guid(),
+                      children: currentChildArea,
+                    },
+                    {
+                      expand: false,
+                      title: '微波点位',
+                      ref: 'wbList_' + window.guid(),
+                      children: [],
+                    },
+                  ],
+                };
+                if (data.sceneId == models.ref) {
+                  // console.log("当前场景下");
+
+                  //该防区为当前场景下
+                  //压入树
+                  models.children.push(node);
+                  this.nodeConfigByRef.set(node.ref, node);
+                  this.areaByNodeId.set(node.ref, data.sceneId);
+                  // return
+                } else {
+                  const childs = models.children;
+                  for (const child of childs) {
+                    if (child.ref == data.sceneId) {
+                      //该防区为子场景下
+                      // console.log("子场景下");
+                      child.children.push(node);
+                      this.nodeConfigByRef.set(node.ref, node);
+                      this.areaByNodeId.set(node.ref, data.sceneId);
+                    }
+                  }
+                }
+                //放进世界场景树
+                that._earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: data.id });
+              });
+              //加载二级区域模型
+              childArea.forEach((data) => {});
+              this.$nextTick(() => {
+                const divs = $('#earthContainer>div>div>div:nth-child(5)')
+                  .children('div')
+                  .eq(1)
+                  .children()
+                  .eq(0)
+                  .children()
+                  .eq(0)
+                  .children()
+                  .each((index, element) => {
+                    // const paddingLeft = $(element).children().eq(0).css('padding-left')
+                    $(element).css('display', 'none');
+                  });
+              });
+              // console.log("models",models);
+              resolve(models);
+            }
+          });
+      });
+    }
+
+    async setCamera(res, models, type) {
+      //根据经纬度算出该点地形高度
+      let posArr: any = [],
+        updatedPositions: any = [];
+      const that = this;
+      //地形是否开启
+      if (window.$earth.sceneTree.$refs.terrain.czmObject.show) {
+        res.forEach((data, index) => {
+          if (data.msCameraSiteList != null) {
+            data.msCameraSiteList.forEach((data, index) => {
+              posArr.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude));
+            });
+          }
+        });
+        var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, posArr);
+        updatedPositions = await window.Cesium.when(promise);
+      } else {
+        res.forEach((data, index) => {
+          if (data.msCameraSiteList != null) {
+            data.msCameraSiteList.forEach((data, index) => {
+              updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude, 0));
+            });
+          }
+        });
+      }
+      // console.log("根据经纬度算出该点地形高度",res);
+      // console.log("根据经纬度算出该点地形高度",updatedPositions);
+
+      //设置电线杆
+      res.forEach((data, index) => {
+        // console.log("data",data);
+
+        let siteConfig: any = null;
+        const lineId = data.id;
+        let childs: any = null;
+        if (type == 2) {
+          childs = models.children;
+          for (const child of childs) {
+            if ('node_' + data.id == child.ref) {
+              siteConfig = child.children[0];
+            }
+          }
+        } else {
+          const parentNode = that.nodeConfigByRef.get('node_' + data.id);
+          if (!parentNode) {
+            return;
+          }
+          childs = parentNode.children;
+          siteConfig = childs[0];
+          // console.log("parentNode",parentNode);
+        }
+        if (!siteConfig) {
+          return;
+        }
+        if (data.msCameraSiteList != null) {
+          data.msCameraSiteList.forEach((data, index) => {
+            // 判断电线杆状态
+            let num = 0;
+            if (data.msCameraSettingList != null) {
+              data.msCameraSettingList.forEach((data, index) => {
+                if (data.status == '3') {
+                  //1-在线，2-离线，3-异常
+                  num = num + 1;
+                }
+              });
+            }
+            let gltfStr;
+            if (!data.modelUrl) {
+              return;
+            }
+            let fileInfos = data.modelUrl.split('.');
+            if (num == 0) {
+              // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1];
+              gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1];
+            } else if (num < data.msCameraSettingList.length) {
+              let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R';
+              // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1];
+              gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1];
+            } else if (num == data.msCameraSettingList.length) {
+              let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'Y';
+              // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1];
+              gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1];
+            }
+            const modelConfig = {
+              ref: data.id,
+              name: lineId,
+              czmObject: {
+                name: data.sitename,
+                xbsjType: 'Model',
+                url: gltfStr,
+                // "color": [0.52, 0.6, 0.58, 1],
+                minimumPixelSize: data.minimumPixelSize,
+                // maximumScale: 0.02,
+                scale: data.scale,
+                xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1],
+                xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height],
+                xbsjRotation: [
+                  window.Cesium.Math.toRadians(data.yaw),
+                  window.Cesium.Math.toRadians(data.pitch),
+                  window.Cesium.Math.toRadians(data.roll),
+                ],
+                viewDistance: 150,
+                distanceDisplayCondition: [1.0, 30000.0],
+                customProp: data.id,
+              },
+            };
+
+            window.$earth.sceneTree.root.children.push(modelConfig);
+            //鼠标事件
+            window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => {
+              this._viewer._container.style.cursor = 'pointer';
+            };
+            window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => {
+              this._viewer._container.style.cursor = 'default';
+            };
+
+            this.$nextTick(() => {
+              const divs = $('#earthContainer>div>div>div:nth-child(5)')
+                .children('div')
+                .eq(1)
+                .children()
+                .eq(0)
+                .children()
+                .eq(0)
+                .children()
+                .each((index, element) => {
+                  $(element).css('display', 'none');
+                });
+            });
+            //加载相机
+            let cameraList: any = [];
+            if (data.msCameraSettingList) {
+              for (let camera of data.msCameraSettingList) {
+                let name = camera.cameraName;
+                const obj = {
+                  ref: 'camera_' + camera.id,
+                  expand: false,
+                  title: name,
+                  czmObject: {
+                    name: name,
+                    xbsjType: 'Model',
+                  },
+                };
+                // let id = camera.id
+                cameraList.push(obj);
+                // 默认设置为在线
+              }
+            }
+            // 杆
+            const node = {
+              ref: 'node_' + data.id,
+              title: data.sitename,
+              expand: false,
+              children: cameraList,
+            };
+            siteConfig.children.push(node);
+          });
+        }
+      });
+    }
+
+    // 加载雷达和微波
+    async getLabelInfo(models, type) {
+      return new Promise((resolve, reject) => {
+        //请求地图标志信息
+        defHttp.get({ url: this.url.queryLabelList }, { isTransformResponse: false }).then(async (res) => {
+          // console.log("请求地图标志信息",res);
+
+          if (res.success) {
+            const labelItems = await this.setLabel(res.result, models, type);
+            resolve(labelItems);
+          }
+        });
+      });
+    }
+    //地图标志信息
+    async setLabel(res, models, type) {
+      // console.log("res",res);
+      const that = this;
+      const args = { pageNo: 1, pageSize: 999 };
+      await defHttp
+        .get(
+          {
+            url: this.url.queryDeviceInfoList,
+            params: args,
+          },
+          { isTransformResponse: false }
+        )
+        .then((reponse) => {
+          if (reponse.success) {
+            // console.log("queryDeviceInfoList",reponse);
+            const hostDeviceList = reponse.result.records;
+            for (const hostDevice of hostDeviceList) {
+              that.hostDeviceMapById.set(hostDevice.id, hostDevice);
+            }
+            return that.hostDeviceMapById;
+          } else {
+            console.error('获取主机信息错误', reponse);
+          }
+        })
+        .catch(() => {
+          throw '获取主机信息错误';
+        });
+      //根据经纬度算出该点地形高度
+      let posArr: any = [],
+        updatedPositions: any = [];
+      res.forEach((data, index) => {
+        updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.mapLabel.labelLon, data.mapLabel.labelLat, data.mapLabel.labelHeight));
+      });
+      const labelItems: any = [];
+      //设置标志
+      res.forEach((data, index) => {
+        const item: any = data.mapLabel;
+        labelItems.push(item.id);
+        const objConfig3 = {
+          ref: item.id,
+          name: item.lineId,
+          czmObject: {
+            customProp: '{"labelAttr":' + item.labelAttr + ',"labelCode":"' + item.labelCode + '","deviceId":"' + data.deviceId + '"}',
+            name: item.labelName,
+            xbsjType: 'Pin',
+            imageUrl: window._CONFIG['staticDomainURL'] + '/' + item.labelImgUrl,
+            position: [updatedPositions[index].longitude, updatedPositions[index].latitude, Number(item.labelHeight)],
+            scale: item.labelAttr == 4 ? 1 : 0.7,
+            pinBuilder: {
+              extText: item.labelName,
+              extTextFont: '30px 楷体',
+              extTextPixelOffset: item.labelAttr == 4 ? [30, -20] : [15, -20],
+              fillColor: [1, 1, 1, 0.9],
+              outlineColor: [0, 0, 0, 0.9],
+            },
+            far: 25000,
+          },
+        };
+        if (item.labelAttr == 4) {
+          // console.log("雷达",item);
+          that.statusByNodeId.set(item.id, 1);
+          that.addLabelNodeToTree(item, models, objConfig3, type);
+        } else {
+          // console.log("微波",item);
+          that.statusByNodeId.set(item.id, -10);
+          that.addLabelNodeToTree(item, models, objConfig3, type);
+          const device = that.hostDeviceMapById.get(data.deviceId);
+          if (device) {
+            //参数3 2为查询状态
+            that.setLabelStatus(device, item.labelCode, item.id, 2);
+          }
+        }
+      });
+      return labelItems;
+    }
+
+    addLabelNodeToTree(item, models, objConfig3, type) {
+      const that = this;
+      //微波
+      if (item.labelAttr == 10) {
+        if (type == 2) {
+          let childs1 = models.children;
+          for (const child of childs1) {
+            if ('node_' + item.lineId == child.ref) {
+              child.children[2].children.push(objConfig3);
+            }
+          }
+        } else {
+          const parentNode = that.nodeConfigByRef.get('node_' + item.lineId);
+          if (!parentNode) {
+            return;
+          }
+          let childs2 = parentNode.children;
+          childs2[2].children.push(objConfig3);
+        }
+      }
+      //雷达
+      else if (item.labelAttr == 4) {
+        if (type == 2) {
+          let childs1 = models.children;
+          for (const child of childs1) {
+            if ('node_' + item.lineId == child.ref) {
+              child.children[1].children.push(objConfig3);
+            }
+          }
+        } else {
+          const parentNode = that.nodeConfigByRef.get('node_' + item.lineId);
+          if (!parentNode) {
+            return;
+          }
+          let childs2 = parentNode.children;
+          childs2[1].children.push(objConfig3);
+        }
+      }
+      //雷达（已弃用）
+      else if (item.labelAttr == 4) {
+        console.log('leida');
+
+        if (type == 2) {
+          let childs3 = models.children;
+          for (const child of childs3) {
+            for (const element of child.children[1].children) {
+              if ('nodeSecondary_' + item.lineId == element.ref) {
+                element.children.push(objConfig3);
+              }
+            }
+          }
+        } else {
+          const parentNode1 = that.nodeConfigByRef.get('nodeSecondary_' + item.lineId);
+          // console.log("nodeSecondary_",parentNode1);
+          if (!parentNode1) {
+            return;
+          }
+          const childs4 = parentNode1.children;
+          childs4.push(objConfig3);
+        }
+      }
+    }
+    
+
+    listenMouseHandler(earthUI = null) {
+      let that: any = this;
+      this._handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
+
+      //取消双击旋转事件
+      this._viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+      /* MOUSE事件（有性能问题，慎用！） */
+
+      /* 鼠标左键事件 */
+      {
+        this._handler.setInputAction((click: any) => {
+          if (typeof this._pin !== 'undefined') {
+            // 销毁指示线
+            this._pin.destroy();
+          }
+
+          let pickedFeature = this._viewer.scene.pick(click.position);
+          if (pickedFeature && pickedFeature.id) {
+            if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') {
+              //点击电线杆触发弹窗
+              this.cameraData.forEach((data) => {
+                if (!$.isEmptyObject(data.msCameraSiteList)) {
+                  if (!data.msCameraSiteList) {
+                    return;
+                  }
+                  data.msCameraSiteList.forEach((data) => {
+                    if (pickedFeature.id.customProp === data.id) {
+                      if ($('.cameraModal ul').length > 0) {
+                        $('.cameraModal ul').remove();
+                      }
+                      $('.cameraModal').append('<ul></ul>');
+                      if (!data.msCameraSettingList) return;
+                      // 将监控相机列表传入弹窗组件中
+                      this.cameraList = data.msCameraSettingList;
+                      // 将监控点位置传入弹窗组件中
+                      this.monitorPosition = pickedFeature.id._primitive.xbsjPosition;
+                      data.msCameraSettingList.forEach((data, index) => {
+                        let camera_img =
+                          data.type == '4'
+                            ? window._CONFIG['staticDomainURL'] + '/qiuji.png'
+                            : data.type == '3'
+                            ? window._CONFIG['staticDomainURL'] + '/qiangji.png'
+                            : window._CONFIG['staticDomainURL'] + '/qiangji.png';
+                        let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus';
+                        let rtspUrl = data.cameraCode;
+                        // 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain']
+                        $('.cameraModal ul').append(
+                          '<li><a class="openIframe" id="' +
+                            data.id +
+                            '" videoUrl="' +
+                            rtspUrl +
+                            '" cameraIP="' +
+                            data.ip +
+                            '" cameraUser="' +
+                            data.user +
+                            '" cameraPsd="' +
+                            data.password +
+                            '"><img src="' +
+                            camera_img +
+                            '" /><div class="' +
+                            cameraStatus +
+                            '">' +
+                            data.cameraName +
+                            '</div> </a></li>'
+                        );
+                      });
+                      cameraModal.style.left = click.position.x + -45 + 'px';
+                      cameraModal.style.top = click.position.y + -180 + 'px';
+                      this.cameraModalShow = true;
+                    }
+                  });
+                }
+              });
+            }
+            //雷达扫描范围
+            if (
+              pickedFeature.id._xbsjOwner &&
+              pickedFeature.id._xbsjOwner.customProp &&
+              JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4'
+            ) {
+              let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode;
+              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(清空)
+                pickedFeature.id._xbsjOwner.addViewShedReturn.clear();
+                pickedFeature.id._xbsjOwner.addViewShedReturn = undefined;
+              } else {
+                defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => {
+                  if (res.success) {
+                    if (res.result.records.length > 0) {
+                      let data = res.result.records[0];
+                      let rgb;
+                      if (data.customProp) {
+                        rgb = JSON.parse(data.customProp).color;
+                      }
+                      let radarRadius = data.workingRadius;
+                      let radarRange = data.elevation;
+                      let radarShifting = data.angularRadian;
+                      let left = Number(radarShifting) - Number(radarRange) / 2;
+                      //参数：经纬度、半径、起始角度（正北方向）、结束角度
+                      console.log('雷达扫描范围', data);
+
+                      //弧度转角度
+                      let degreePosition = radianToDegreeInLngLatHeight(
+                        pickedFeature.id._xbsjOwner.position[0],
+                        pickedFeature.id._xbsjOwner.position[1],
+                        0.1
+                      );
+                      //创建雷达扫描 深度
+                      // this._viewer.scene.globe.depthTestAgainstTerrain = true;
+                      let rader = new CircleScan(this._viewer);
+                      rader.add(degreePosition, null, radarRadius, 10000);
+                      pickedFeature.id._xbsjOwner.addViewShedReturn = rader;
+
+                      // 雷达扫描2
+                      // let rader2 = this._viewer.entities.add({
+                      //   position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109),
+                      //   name: '雷达扫描',
+                      //   ellipse: {
+                      //       semiMajorAxis: 5000.0,
+                      //       semiMinorAxis: 5000.0,
+                      //       material: new Cesium.RadarScanMaterialProperty({
+                      //           color: new Cesium.Color(1.0, 1.0, 0.0, 0.7),
+                      //           speed: 20.0,
+                      //       }),
+                      //       height: 20.0,
+                      //       heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+                      //       outline: true,
+                      //       outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
+                      //   }
+                      // })
+
+                      // pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar(
+                      //   pickedFeature.id._xbsjOwner.position,
+                      //   radarRadius,
+                      //   left,
+                      //   Number(radarRange) / 2 + Number(radarShifting),
+                      //   [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a]
+                      // );
+                    }
+                  }
+                });
+              }
+            }
+          } else {
+            //关闭所有气泡窗
+            that.cameraModalShow = false;
+            that.poiModalShow = false;
+          }
+          console.debug('点击到的模型', pickedFeature);
+        }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      }
+      /* 鼠标右键事件 */
+      {
+        this._handler.setInputAction((click) => {
+          // 判断点击位置是否有实体
+          //返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。
+          let pickedFeature = this._viewer.scene.pick(click.position);
+          // console.log("pick",pickedFeature);
+
+          let entity = pickedFeature && pickedFeature.id;
+          console.log('pick', pickedFeature);
+          console.log('entity', entity);
+          if (entity == undefined) {
+            return;
+          }
+          if (typeof pickedFeature !== 'undefined' && pickedFeature.id.xbsjType == 'Model') {
+            //点击电线杆触发弹窗
+            this.cameraData.forEach((data) => {
+              if (!$.isEmptyObject(data.msCameraSiteList)) {
+                if (!data.msCameraSettingList) {
+                  return;
+                }
+                data.msCameraSiteList.forEach((data) => {
+                  if (pickedFeature.id.customProp === data.id) {
+                    window.$uia.contextMenu.pop([
+                      {
+                        text: '监控视域分析属性',
+                        func: () => {
+                          let testConfig = {
+                            ref: 'testView',
+                            name: '雷达视域分析',
+                            position: [1.514482876761954, 0.8497520519403554, -0.7553906497788317],
+                            rotation: [4.535844766941594, 0.32288591161895097, 0],
+                            near: 1,
+                            far: 400,
+                            fovH: Math.PI / 3,
+                            fovV: Math.PI / 6,
+                            show: false,
+                          };
+                          let Viewshed = new window.XE.Obj.Viewshed(window.$earth);
+                          Viewshed.xbsjFromJSON(testConfig);
+                          window.$uia.showPropertyWindow(Viewshed);
+                        },
+                      },
+                    ]);
+                  }
+                });
+              }
+            });
+          }
+          //巡检监控视频
+          else if (typeof pickedFeature !== 'undefined' && entity._name == '视频图元') {
+            // console.log(pickedFeature)
+            // console.log("entity",entity)
+            window.$uia.contextMenu.pop([
+              {
+                text: '编辑',
+                func: () => {
+                  $mitt.emit('addRoamPathVideoClose');
+                  // store.commit('customPrimitive', entity.xbsjGuid);
+                  this.store.customPrimitive = entity.xbsjGuid;
+                  // 打开对应的创建巡检视频窗口
+                  this.$nextTick(() => {
+                    this.addRoamVideoShow = true;
+                  });
+                  // window.$uia.showPropertyWindow(
+                  //   {},
+                  //   {
+                  //     component: addroamVideo,
+                  //   }
+                  // );
+                },
+              },
+              {
+                text: '删除',
+                func: () => {
+                  window.$uia.confirm('确认删除?', () => {
+                    // console.log('confirmed')
+
+                    // axios({
+                    //   method: 'delete',
+                    //   url: '/military/msAreaCustomPrimitive/delete',
+                    //   params: { id: entity.id },
+                    // })
+                    defHttp
+                      .delete(
+                        {
+                          url: '/military/msAreaCustomPrimitive/delete',
+                          params: { id: entity.id },
+                        },
+                        { isTransformResponse: false, joinParamsToUrl: true }
+                      )
+                      .then((response) => {
+                        if (response.code == 200) {
+                          let customPrimitiveList = this.store.customPrimitiveList;
+                          // console.log("a",customPrimitiveList);
+                          customPrimitiveList.forEach((element, index) => {
+                            const model = window.$earth.getObject(element);
+                            // console.log("model.id",model.id);
+                            // console.log("entity.id",entity.id);
+                            if (model.id == entity.id) {
+                              let customPrimitive = customPrimitiveList.splice(index, 1)[0];
+                              model.destroy();
+                            }
+                          });
+                          // store.dispatch('asyncCustomPrimitive', customPrimitiveList);
+                          this.store.customPrimitiveList = customPrimitiveList;
+
+                          // notification.close("RoamVideoSet");
+                          // sessionStorage.setItem("RoamVideoSet", "false");
+                        } else {
+                          // Msg.error('删除失败');
+                          $mitt.emit('openNotification', { msg: '删除失败', dt: 2, type: 'error', top: '50px' });
+                          console.error('删除失败', response);
+                        }
+                      })
+                      .catch((res) => {
+                        console.error('错误', res);
+                      });
+                  });
+                },
+              },
+            ]);
+          }
+          //绘画图形
+          else if (typeof pickedFeature !== 'undefined' && entity.name == '绘画') {
+            // console.log("entity", entity);
+            window.$uia.contextMenu.pop([
+              {
+                text: '编辑',
+                func: () => {
+                  window.$uia.showPropertyWindow(entity);
+                  //记录编辑前信息
+                  let oldEntity = {
+                    depthTest: entity.depthTest, //深度检测
+                    color: [...entity.color], //颜色
+                    outline: {
+                      color: [...entity.outline.color], //边框颜色
+                      show: entity.outline.show, //边框显示
+                      width: entity.outline.width, //边框宽度
+                    },
+                    positions: [...entity.positions],
+                  };
+                  this.$nextTick(() => {
+                    // 主要ui窗口
+                    const mainUI = window.$uia._vm.$refs.mainUI;
+                    // 所有打开的ui窗口Ref值
+                    const windowsAttrList = Object.keys(mainUI.$refs);
+                    // 寻找当前窗体的工具对象
+                    const modelToolKey = windowsAttrList.filter((f) => f.indexOf(entity.guid) > -1)[0];
+                    const modelTool = mainUI.$refs[modelToolKey][0];
+                    // 当前窗体的元素
+                    const el = modelTool.$el;
+                    // this.cloneEl(el)
+                    // 样式
+                    el.style.width = '380px'; //宽度
+                    el.children[2].style.padding = '0px';
+                    el.children[2].style.transition = 'none';
+                    el.children[2].children[0].children[0].style.minWidth = '370px';
+                    // 关闭名称input
+                    el.children[2].children[0].children[0].children[0].style.display = 'none';
+                    // 关闭创建按钮
+                    el.children[2].children[0].children[0].children[1].children[0].children[1].style.display = 'none';
+                    // 关闭贴地
+                    el.children[2].children[0].children[0].children[2].children[0].style.display = 'none';
+                    // 关闭拉伸
+                    el.children[2].children[0].children[0].children[3].children[0].style.display = 'none';
+                    el.children[2].children[0].children[0].children[3].children[1].style.display = 'none';
+                    el.children[2].children[0].children[0].children[3].children[2].style.display = 'none';
+                    el.children[2].children[0].children[0].children[3].children[3].style.marginLeft = '8px';
+                    // 右上角关闭
+                    const cancelTopRightBtn = el.children[1].children[1];
+                    // 取消按钮元素
+                    const cancelBtn = el.children[3].children[0];
+                    // 确认按钮元素
+                    const okBtn = el.children[3].children[1];
+                    // 取消按钮
+                    cancelTopRightBtn.onclick = cancelBtn.onclick = function () {
+                      //恢复原来设置
+                      // console.log("oldEntity", oldEntity);
+                      // console.log("entity", entity);
+                      // entity.xbsjFromJSON(oldEntity)
+                      // entity = JSON.parse(oldEntity)
+                      entity.depthTest = oldEntity.depthTest;
+                      entity.color = oldEntity.color;
+                      entity.outline = oldEntity.outline;
+                      entity.positions = oldEntity.positions;
+                      entity.editing = false;
+                    };
+                    okBtn.onclick = function () {
+                      let params = {
+                        id: entity.customProp?.id,
+                        drawData: JSON.stringify(entity),
+                      };
+                      // console.log("submit", entity);
+                      defHttp
+                        .post(
+                          {
+                            url: '/military/dtMapDraw/edit',
+                            params: params,
+                          },
+                          { isTransformResponse: false }
+                        )
+                        .then((response) => {
+                          $mitt.emit('openNotification', { msg: '编辑成功', dt: 2, type: 'success', top: '50px' });
+                          // console.error('编辑成功', response);
+                        })
+                        .catch((response) => {
+                          $mitt.emit('openNotification', { msg: '编辑失败', dt: 2, type: 'error', top: '50px' });
+                          // console.error('删除失败', response);
+                        });
+                    };
+                  });
+                },
+              },
+              {
+                text: '删除',
+                func: () => {
+                  window.$uia.confirm('确认删除?', () => {
+                    defHttp
+                      .delete(
+                        {
+                          url: '/military/dtMapDraw/delete',
+                          params: { id: entity.customProp?.id },
+                        },
+                        { isTransformResponse: false, joinParamsToUrl: true }
+                      )
+                      .then((response) => {
+                        if (response.code == 200) {
+                          let shapeList = this.store.shapeList;
+                          shapeList.forEach((element, index) => {
+                            const model = window.$earth.getObject(element);
+                            if (model.id == entity.customProp?.id) {
+                              let shape = shapeList.splice(index, 1)[0];
+                              model.destroy();
+                            }
+                          });
+                          this.store.shapeList = shapeList;
+                        } else {
+                          $mitt.emit('openNotification', { msg: '删除失败', dt: 2, type: 'error', top: '50px' });
+                          console.error('删除失败', response);
+                        }
+                      })
+                      .catch((res) => {
+                        console.error('错误', res);
+                      });
+                  });
+                },
+              },
+            ]);
+          }
+        }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件
+      }
+     
+    }
+
+
+    // 图层管理-模型右键菜单
+    sceneTreePopContextMenu({ item, vueObject }, earthUI) {
+      let that: any = this;
+      let earth = window.$earth;
+      let XE = window.XE;
+      let sceneTree = earthUI.tools.sceneTree;
+      let sceneTreeComp = sceneTree._comp;
+      // 转换方法
+      let transform = window.Cesium.Math;
+      //右键之后设置当前 node
+      item._inner.sn.isSelected = true;
+      const el = vueObject.$el;
+      let baseItems = [
+        {
+          text: '克隆',
+          keys: '',
+          func: () => {
+            let sn: any = null;
+            if (item._inner.sn.ref.startsWith('node_')) {
+              const objectId = item._inner.sn.ref.split('_')[1];
+              sn = earth.sceneTree.$refs[objectId];
+            } else {
+              sn = item._inner.sn;
+            }
+            if (sn) {
+              let newSn: any = null;
+              let newSnData: any = null;
+              let index = 0;
+              if (sn.czmObject.xbsjType !== 'Polyline') {
+                index = that.cloneModel(sn);
+                newSn = sn.parent.children[index - 1];
+                newSnData = newSn.czmObject;
+                if (newSnData.xbsjType === 'Model') {
+                  that.$nextTick(() => {
+                    const divs = $('#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');
+                        }
+                      });
+                  });
+                }
+              }
+              // 保存数据到数据库中
+              that
+                .handleNodeType(sn)
+                // 传感器
+                .sensor(() => {
+                  // debugger
+                  // 设置 ref 属性 防止数据库中 eventSerialNum 重复
+                  newSn.ref += '_copy';
+                  // 发送请求 保存到数据库中
+                  let saveSensorModelParameter = {
+                    eventSerialNum: newSn.ref,
+                    lon: transform.toDegrees(newSnData.xbsjPosition[0]).toFixed(5),
+                    lat: transform.toDegrees(newSnData.xbsjPosition[1]).toFixed(5),
+                    height: newSnData.xbsjPosition[2].toFixed(2),
+                    yaw: transform.toDegrees(newSnData.xbsjRotation[0]).toFixed(2),
+                    pitch: transform.toDegrees(newSnData.xbsjRotation[1]).toFixed(2),
+                    roll: transform.toDegrees(newSnData.xbsjRotation[2]).toFixed(2),
+                    isShow: 1,
+                    modelType: '11',
+                    eventType: 1,
+                  };
+                  defHttp
+                    .post(
+                      {
+                        url: this.url.SaveSensorModel,
+                        params: saveSensorModelParameter,
+                      },
+                      { isTransformResponse: false }
+                    )
+                    // postAction(this.url.SaveSensorModel, saveSensorModelParameter)
+                    .then((res) => {
+                      if (res.success) {
+                        that.$message.success('克隆成功');
+                      } else {
+                        newSn.parent.children.splice(index, 1);
+                        that.$message.error('克隆失败: ', res.message ? res.message : '');
+                      }
+                    });
+                })
+                // 标志点 微波雷达回调
+                .markerPosition(() => {
+                  // debugger
+                  newSn.title += '_copy';
+                  let pinImage = newSnData.imageUrl;
+                  const staticDomainURL = window._CONFIG['staticDomainURL'] + '/';
+                  // 去除 image 地址中的 staticDomainURL 链接
+                  let imageUri = pinImage.substring(pinImage.indexOf(staticDomainURL) + staticDomainURL.length, pinImage.length);
+                  const jsonObj = JSON.parse(newSnData.customProp);
+                  const labelAttr = jsonObj.labelAttr;
+                  let savePinModelParameter = {
+                    mapLabel: {
+                      labelName: newSnData.name,
+                      labelLon: transform.toDegrees(newSnData.position[0]).toFixed(5),
+                      labelLat: transform.toDegrees(newSnData.position[1]).toFixed(5),
+                      labelHeight: newSnData.position[2].toFixed(2),
+                      labelImgUrl: imageUri,
+                      // 1 启用， 0 禁用
+                      labelStatus: 1,
+                      // 标记属性-> 3: 标记位置
+                      labelAttr: labelAttr,
+                      labelCode: '',
+                      lineId: newSn.name,
+                    },
+                    deviceId: jsonObj.deviceId,
+                  };
+                  defHttp
+                    .post(
+                      {
+                        url: this.url.saveMapLabel,
+                        params: savePinModelParameter,
+                      },
+                      { isTransformResponse: false }
+                    )
+                    // postAction(this.url.saveMapLabel, savePinModelParameter)
+                    .then((res) => {
+                      if (res.success) {
+                        // 修改 ref 成 数据库返回的 id
+                        newSn.ref = res.result;
+                        that.setIconByRef(newSn.ref, newSn.ref);
+                        newSn.czmObject.pinBuilder.extText = newSnData.name;
+                        jsonObj.labelCode = '';
+                        newSn.czmObject.customProp = JSON.stringify(jsonObj);
+                        // 保存成功
+                        that.$message.success('克隆成功');
+                      } else {
+                        newSn.parent.children.splice(index, 1);
+                        that.$message.error('克隆失败: ', res.message ? res.message : '');
+                      }
+                    })
+                    .catch((err) => {
+                      newSn.parent.children.splice(index, 1);
+                      that.$message.error('克隆失败');
+                    });
+                })
+                //区域回调
+                .polylineCallBack(() => {
+                  // debugger
+                  const currentModel = new window.XE.Obj.Polyline(window.$earth);
+                  const submitData: any = {};
+                  const poistions = sn.czmObject.positions;
+                  if (poistions.length <= 0) {
+                    return;
+                  }
+                  submitData.name = sn.czmObject.name + '_copy';
+                  submitData.lineCode = currentModel.guid;
+                  submitData.isLoop = Number(sn.czmObject.loop);
+                  submitData.isDepthCheck = Number(sn.czmObject.depthTest);
+                  submitData.width = sn.czmObject.width;
+                  submitData.interpolation = sn.czmObject.arcType;
+                  submitData.positions = JSON.stringify(poistions);
+                  switch (sn.czmObject.material.type) {
+                    // 实线
+                    case 'XbsjColorMaterial':
+                      submitData.materialType = 0;
+                      submitData.color = JSON.stringify(sn.czmObject.material.XbsjColorMaterial.color);
+                      submitData.intervalColor = null;
+                      submitData.dashLength = 0;
+                      submitData.dashStyle = 0;
+                      break;
+                    // 虚线
+                    case 'XbsjPolylineDashMaterial':
+                      submitData.materialType = 1;
+                      submitData.color = JSON.stringify(sn.czmObject.material.XbsjPolylineDashMaterial.color);
+                      submitData.intervalColor = JSON.stringify(sn.czmObject.material.XbsjPolylineDashMaterial.gapColor);
+                      submitData.dashLength = sn.czmObject.material.XbsjPolylineDashMaterial.dashLength;
+                      submitData.dashStyle = sn.czmObject.material.XbsjPolylineDashMaterial.dashPattern;
+                      break;
+                    // 箭头线
+                    case 'XbsjPolylineArrowMaterial':
+                      submitData.materialType = 2;
+                      submitData.color = JSON.stringify(sn.czmObject.material.XbsjPolylineArrowMaterial.color);
+                      submitData.intervalColor = null;
+                      submitData.dashLength = 0;
+                      submitData.dashStyle = 0;
+                      break;
+                    // 轨迹线
+                    case 'XbsjODLineMaterial':
+                      submitData.materialType = 3;
+                      submitData.color = JSON.stringify(sn.czmObject.material.XbsjODLineMaterial.color);
+                      submitData.intervalColor = null;
+                      submitData.dashLength = 0;
+                      submitData.dashStyle = 0;
+                      submitData.cycleFrame = sn.czmObject.material.XbsjODLineMaterial.totoalFrameCount;
+                      break;
+                  }
+                  defHttp
+                    .post(
+                      {
+                        url: this.url.saveMapLine,
+                        params: submitData,
+                      },
+                      { isTransformResponse: false }
+                    )
+                    // postAction(this.url.saveMapLine, submitData)
+                    .then((response) => {
+                      if (response.success) {
+                        currentModel.name = submitData.name;
+                        currentModel.loop = submitData.isLoop;
+                        currentModel.depthTest = submitData.isDepthCheck;
+                        currentModel.width = submitData.width;
+                        currentModel.arcType = submitData.interpolation;
+                        currentModel.positions = JSON.parse(submitData.positions);
+                        switch (sn.czmObject.material.type) {
+                          // 实线
+                          case 'XbsjColorMaterial':
+                            currentModel.material.type = 'XbsjColorMaterial';
+                            currentModel.material.color = submitData.color;
+                            break;
+                          // 虚线
+                          case 'XbsjPolylineDashMaterial':
+                            currentModel.material.type = 'XbsjPolylineDashMaterial';
+                            currentModel.material.color = submitData.color;
+                            currentModel.material.XbsjPolylineDashMaterial.gapColor = submitData.intervalColor;
+                            currentModel.material.XbsjPolylineDashMaterial.dashLength = submitData.dashLength;
+                            currentModel.material.XbsjPolylineDashMaterial.dashPattern = submitData.dashStyle;
+                            break;
+                          // 箭头线
+                          case 'XbsjPolylineArrowMaterial':
+                            currentModel.material.type = 'XbsjPolylineArrowMaterial';
+                            currentModel.material.XbsjPolylineArrowMaterial.color = submitData.color;
+                            break;
+                          // 轨迹线
+                          case 'XbsjODLineMaterial':
+                            currentModel.material.type = 'XbsjODLineMaterial';
+                            currentModel.material.XbsjODLineMaterial.color = submitData.color;
+                            currentModel.material.XbsjODLineMaterial.totoalFrameCount = submitData.cycleFrame;
+                            break;
+                        }
+                        const leaf = new XE.SceneTree.Leaf(currentModel);
+                        leaf.ref = response.result;
+                        sn.parent.children.push(leaf);
+                      } else {
+                        throw '克隆区域数据出错';
+                      }
+                    })
+                    .catch((e) => {
+                      currentModel.destroy();
+                      // $mitt.emit('openNotification', '克隆区域数据出错', 2, 'error', '50px')
+                      $mitt.emit('openNotification', { msg: '克隆区域数据出错', dt: 2, type: 'error', top: '50px' });
+                    });
+                })
+                //监控点
+                .modelCallback(() => {
+                  this.$message.warning('监控点不支持克隆');
+                })
+                .run();
+            }
+          },
+        },
+        {
+          text: '删除',
+          keys: '',
+          func: () => {
+            earthUI.confirm('确认删除图层?', () => {
+              try {
+                // debugger
+                let sn: any = null;
+                const ref = item._inner.sn.ref;
+                // update:-- 判断方式要修改
+                if (ref.startsWith('node_')) {
+                  const objectId = item._inner.sn.ref.split('_')[1];
+                  sn = earth.sceneTree.$refs[objectId];
+                } else {
+                  sn = item._inner.sn;
+                }
+                let id = sn.ref;
+                // 删除数据库中的数据
+                that
+                  .handleNodeType(sn)
+                  // 传感器
+                  .sensor(() => {
+                    // 发送请求 删除数据库中的数据
+                    that.handlerModelDelete(this.url.deleteSensor, { eventSerialNum: id });
+                  })
+                  // 标志点
+                  .markerPosition(() => {
+                    if (sn.czmObject.addViewShedReturn) {
+                      window.$earth.czm.viewer.entities.remove(sn.czmObject.addViewShedReturn);
+                    }
+                    if (sn.czmObject.customProp) {
+                      let prop = JSON.parse(sn.czmObject.customProp);
+                      if (prop.labelAttr == 4) {
+                        defHttp.delete(
+                          {
+                            url: '/military/RadarConfig/deleteByRadarCode',
+                            params: { radarCode: prop.labelCode },
+                          },
+                          { isTransformResponse: false, joinParamsToUrl: true }
+                        );
+                        // deleteAction("/military/RadarConfig/deleteByRadarCode", {radarCode: prop.labelCode}).then(res => {
+                        //   // console.log(res,'delete');
+                        // })
+                      }
+                    }
+                    this.handlerModelDelete(this.url.deleteMapLabel, {
+                      id: id,
+                    });
+                  })
+                  // 线
+                  .modelCallback(() => {
+                    that.handlerModelDelete(this.url.deleteSite, { id: id }).then(() => {
+                      sn.destroy();
+                      const node = item._inner.sn;
+                      const childList = node.parent.children;
+                      childList.splice(childList.indexOf(node), 1);
+                      node.destroy();
+                    });
+                  })
+                  .polylineCallBack(() => {
+                    const childList = item._inner.sn.children;
+
+                    for (const child of childList) {
+                      if (child.children.length > 0) {
+                        this.$message.warning('存在下级数据无法删除');
+                        throw '存在下级数据无法删除';
+                      }
+                    }
+                    that.handlerModelDelete(this.url.deleteMapLine, { id: id }).then(() => {
+                      const nodeRef = 'node_' + id;
+                      const node = $earth.sceneTree.$refs[nodeRef];
+                      const childList = node.parent.children;
+                      childList.splice(childList.indexOf(node), 1);
+                      node.destroy();
+                    });
+                  })
+                  .run();
+                const index = sn.parent.children.indexOf(sn);
+                sn.parent.children.splice(index, 1);
+              } catch (error) {}
+            });
+          },
+        },
+      ];
+      const bf = {
+        text: '布防/撤防',
+        keys: '',
+        func: () => {
+          const xbsjObject = item._inner.sn;
+          if (!xbsjObject || !xbsjObject.czmObject) return;
+          const jsonObj = JSON.parse(xbsjObject.czmObject.customProp);
+          const deviceId = jsonObj.deviceId;
+          if (!deviceId) {
+            console.error('主机设备为空');
+            return;
+          }
+          const labelCode = jsonObj.labelCode;
+          if (!labelCode) {
+            console.error('设备编码为null');
+            return;
+          }
+          const device = that.hostDeviceMapById.get(deviceId);
+          const ref = xbsjObject.ref;
+          if (device.deviceType_dictText.indexOf('微波探测器') > -1) {
+            if (ref && ref.length > 0) {
+              const state = that.statusByNodeId.get(ref);
+              if (state == 1) {
+                that.setLabelStatus(device, labelCode, ref, 0).then((response) => {
+                  that.setIconByRef(ref, el);
+                });
+              } else if (state == 0) {
+                that.setLabelStatus(device, labelCode, ref, 1).then((response) => {
+                  that.setIconByRef(ref, el);
+                });
+              } else {
+                that.$message.error('设备不在线');
+              }
+            }
+          } else if (device.deviceType_dictText.indexOf('雷达') > -1) {
+           
+          }
+        },
+      };
+      const selectRef = item._inner.sn.ref;
+      if (selectRef.startsWith('wbList') || selectRef.startsWith('nodeSecondary_')) {
+        baseItems = [
+          {
+            text: '一键布防',
+            keys: '',
+            func: () => {
+              that.setAllLabelStatus(selectRef, item, true);
+            },
+          },
+          {
+            text: '一键撤防',
+            keys: '',
+            func: () => {
+              that.setAllLabelStatus(selectRef, item, false);
+            },
+          },
+        ];
+        earthUI.contextMenu.pop(baseItems);
+        return;
+      } else if (selectRef.startsWith('monitor') || selectRef.startsWith('ldList')) {
+        earthUI.contextMenu.pop([]);
+        return;
+      } else if (item.level <= 2) {
+        if (!item._inner.sn.ref.startsWith('node_')) {
+          earthUI.contextMenu.pop([]);
+          return;
+        } else {
+          baseItems.splice(0, 1);
+        }
+      } else {
+        if (selectRef.startsWith('camera')) {
+          //   baseItems = [bf]
+          //   earthUI.contextMenu.pop(baseItems)
+          return;
+        } else if (!selectRef.startsWith('node_')) {
+          //站点
+          baseItems.unshift({
+            type: 'divider',
+          });
+          baseItems.unshift(bf);
+        }
+      }
+      let num = 2;
+      //判断定位的位置
+      if (
+        item.level <= 2 ||
+        selectRef.startsWith('monitor') ||
+        selectRef.startsWith('wbList') ||
+        selectRef.startsWith('ldList') ||
+        //站点
+        selectRef.startsWith('node_')
+      )
+        num = 0;
+      baseItems.splice(num, 0, {
+        text: '定位',
+        keys: '',
+        func: () => {
+          // const czmObject = item._inner.sn.czmObject
+          // czmObject.flyTo()
+          const ref = item._inner.sn.ref;
+          let czmObject: any = null;
+          if (ref.startsWith('node_')) {
+            const objectId = ref.split('_')[1];
+            const sn = earth.sceneTree.$refs[objectId];
+            czmObject = sn.czmObject;
+          } else {
+            const sn = item._inner.sn;
+            czmObject = sn.czmObject;
+          }
+
+          czmObject.flyTo();
+        },
+      });
+      baseItems.push(
+        ...[
+          {
+            type: 'divider',
+          },
+          {
+            text: '属性',
+            func: () => {
+              $mitt.emit('windowCancel');
+              // 属性面板
+              const mainUI = earthUI._vm.$refs.mainUI;
+              const areaCode = that.getAreaCode(item);
+              let sn: any = null;
+              if (item._inner.sn.ref.startsWith('node_')) {
+                const objectId = item._inner.sn.ref.split('_')[1];
+                sn = earth.sceneTree.$refs[objectId];
+                // window.XE.MVVM.watch(() => {
+                //   item._inner.sn.title = sn.title
+                // })
+
+                sn.czmObject.distanceDisplayCondition = [1.0, 30000.0];
+                if (sn.czmObject.xbsjType == 'Model') {
+                  const lineId = item.parent.parent._inner.sn.ref.split('_')[1];
+
+                  this.czmObject = sn.czmObject;
+                  this.node = item;
+                  this.type = 'jkd';
+                  this.lineId = lineId;
+                  this.areaCode = areaCode;
+                  this.areaByNodeIdModel = that.areaByNodeId;
+                  // this.addModelWinShow = true
+                  this.$nextTick(() => {
+                    this.addModelWinShow = true;
+                  });
+
+                  return;
+                }
+              } else {
+                sn = item._inner.sn;
+                if (sn.czmObject.xbsjType == 'Pin') {
+                  const jsonObj = JSON.parse(sn.czmObject.customProp);
+
+                  const lineId = jsonObj.labelAttr == 4 ? item.parent._inner.sn.ref.split('_')[1] : item.parent.parent._inner.sn.ref.split('_')[1];
+
+                  this.czmObject = sn.czmObject;
+                  this.node = item;
+                  this.type = jsonObj.labelAttr == 4 ? 'ld' : 'wb';
+                  this.lineId = lineId;
+                  this.areaCode = areaCode;
+                  this.eidtId = sn.ref;
+                  this.areaByNodeIdModel = that.areaByNodeId;
+                  // setLabelStatus: that.setLabelStatus, 已经有了
+                  //     setIconByRef: that.setIconByRef,
+                  (this.el = el),
+                    this.$nextTick(() => {
+                      this.addModelWinShow = true;
+                    });
+
+                  return;
+                }
+              }
+              let index = sn.parent.children.indexOf(sn);
+              let tempData = sn.czmObject.toAllJSON();
+              // 设置属性面板的确定按钮方法
+              // 显示属性面板
+              earthUI.showPropertyWindow(sn.czmObject);
+              that.$nextTick(() => {
+                // 模型窗口
+                const windowsAttrList = Object.keys(mainUI.$refs);
+                // 找到该模型设置属性窗口
+                const modelToolKey = windowsAttrList.filter((f) => f.indexOf(sn.czmObject.guid || sn.guid) > -1)[0];
+                const modelTool = mainUI.$refs[modelToolKey][0];
+                // 对应处理方法
+                that
+                  .handleNodeType(sn)
+                  // 感应器
+                  .sensor(() => {
+                    // 禁用模型名称编辑
+                    modelTool.$el.getElementsByClassName('xbsj-flatten')[0].children[0].children[1].setAttribute('disabled', 'disabled');
+                  })
+                  .default(() => {
+                    // 启用模型名称编辑
+                    modelTool.$el.getElementsByClassName('xbsj-flatten')[0].children[0].children[1].removeAttribute('disabled');
+                  })
+                  .run();
+
+                // modelTool
+                modelTool.ok = () => {
+                  // 确定时清除这个事件
+                  $mitt.off('windowCancel');
+                  // 保存前端数据
+                  const modelToolObj = modelTool._czmObj;
+                  if (!modelToolObj) {
+                    return;
+                  }
+                  modelToolObj.positionEditing = false;
+                  if (modelToolObj.isCreating) {
+                    modelToolObj.isCreating = false;
+                    const sceneObject = new XE.SceneTree.Leaf(modelToolObj);
+                    earthUI.addSceneObject(sceneObject);
+                  }
+
+                  // 保存到数据库
+                  that.propertiesWindowConfirm(modelTool, sn, index);
+                  // 关闭属性面板
+                  modelTool.close();
+                };
+                modelTool.cancel = () => {
+                  // 清除这个事件
+                  $mitt.off('windowCancel');
+                  // 关闭属性面板
+                  modelTool.close();
+                  let t = modelTool._czmObj;
+                  // 如果是创建的话，需要删除
+                  t && t.positionEditing === false && t.isCreating && t.isCreating === false && t.destroy();
+                  // 恢复之前的数据
+                  t && t.xbsjFromJSON(tempData);
+                };
+                $mitt.on('windowCancel', modelTool.cancel);
+                // 下面的代码，是切换属性面板里选项窗口， 必须
+                // 否侧 ok cancel 等方法执行是原本的方法而不是已经修改的方法
+                modelTool.tabShow = '3';
+                modelTool.tabShow = '1';
+              });
+            },
+          },
+        ]
+      );
+      // 右键菜单-重命名
+      // 先销毁之前的 on-change-title 事件
+      vueObject.$off('on-change-title', that.handleChangeTitle);
+      // 重命名时 on-change-title 事件
+      vueObject.$on('on-change-title', that.handleChangeTitle);
+
+      // 弹出右键菜单
+      earthUI.contextMenu.pop(baseItems);
+    }
+
+ 
+
+
+    // 属性面板确定按钮方法
+    propertiesWindowConfirm(propertiesWindow, sn, index) {
+      // 属性面板 所修改的模型
+      let model: any = null;
+      if (sn.ref && !sn.ref.startsWith('node_')) {
+        model = sn;
+      } else {
+        model = sn.parent.children[index];
+      }
+
+      let modelData = model.czmObject;
+      // 转换方法
+      let transform = window.Cesium.Math;
+
+      // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口
+      this.handleNodeType(sn)
+        // 传感器
+        .sensor(() => {
+          // 发送请求 保存模型属性
+          let editSensorParams = {
+            eventSerialNum: model.ref,
+            lon: transform.toDegrees(modelData.xbsjPosition[0]).toFixed(5),
+            lat: transform.toDegrees(modelData.xbsjPosition[1]).toFixed(5),
+            height: modelData.xbsjPosition[2].toFixed(2),
+            yaw: transform.toDegrees(modelData.xbsjRotation[0]).toFixed(2),
+            pitch: transform.toDegrees(modelData.xbsjRotation[1]).toFixed(2),
+            roll: transform.toDegrees(modelData.xbsjRotation[2]).toFixed(2),
+            isShow: 1,
+            // 传感器类型
+            modelType: '11',
+            // 事件类型
+            eventType: 1,
+          };
+          defHttp
+            .put(
+              {
+                url: this.url.updateSensor,
+                params: editSensorParams,
+              },
+              { isTransformResponse: false }
+            )
+            // putAction(this.url.updateSensor, editSensorParams)
+            .then((res) => {
+              if (res.success) {
+                this.$message.success('修改成功');
+              } else {
+                this.$message.error('修改失败: ', res.message);
+              }
+            });
+        })
+        // 站点
+        .modelCallback(() => {
+          let startNum = modelData.url.lastIndexOf('/') + 1;
+          let modelName = '';
+          if (startNum > 0) {
+            modelName = modelData.url.substring(startNum, modelData.url.length);
+          }
+          // 发送请求 保存模型属性
+          let editCameraSiteModelParameter = {
+            id: model.ref,
+            longitude: transform.toDegrees(modelData.xbsjPosition[0]).toFixed(6),
+            latitude: transform.toDegrees(modelData.xbsjPosition[1]).toFixed(6),
+            height: modelData.xbsjPosition[2],
+            yaw: transform.toDegrees(modelData.xbsjRotation[0]).toFixed(6),
+            pitch: transform.toDegrees(modelData.xbsjRotation[1]).toFixed(6),
+            roll: transform.toDegrees(modelData.xbsjRotation[2]).toFixed(6),
+            modelUrl: modelName,
+            sitename: modelData.name,
+          };
+          defHttp
+            .put(
+              {
+                url: this.url.updateSite,
+                params: editCameraSiteModelParameter,
+              },
+              { isTransformResponse: false }
+            )
+            // putAction(this.url.updateSite, editCameraSiteModelParameter)
+            .then((res) => {
+              if (res.success) {
+                modelData.pinBuilder.extText = modelData.name;
+                this.$message.success('修改成功');
+              } else {
+                this.$message.error('修改失败');
+              }
+            });
+        })
+        // 标志点
+        .markerPosition(() => {
+          let pinImage = modelData.imageUrl;
+          const staticDomainURL = window._CONFIG['staticDomainURL'] + '/';
+          // 去除 image 地址中的 staticDomainURL 链接
+          let imageUri = pinImage.substring(pinImage.indexOf(staticDomainURL) + staticDomainURL.length, pinImage.length);
+          let editPinModelParameter = {
+            id: model.ref,
+            labelName: modelData.name,
+            labelLon: transform.toDegrees(modelData.position[0]).toFixed(5),
+            labelLat: transform.toDegrees(modelData.position[1]).toFixed(5),
+            labelHeight: modelData.position[2].toFixed(2),
+            labelImgUrl: imageUri,
+          };
+          defHttp
+            .put(
+              {
+                url: this.url.updateMapLabel,
+                params: editPinModelParameter,
+              },
+              { isTransformResponse: false }
+            )
+            // putAction(this.url.updateMapLabel, editPinModelParameter)
+            .then((res) => {
+              if (res.success) {
+                modelData.pinBuilder.extText = modelData.name;
+                this.$message.success('修改成功');
+              } else {
+                this.$message.error('修改失败');
+              }
+            })
+            .catch((error) => {
+              this.$message.error('修改失败');
+            });
+        })
+        .polylineCallBack(() => {
+          const submitData: any = {};
+          const poistions = modelData.positions;
+          if (poistions.length <= 0) {
+            return;
+          }
+          submitData.id = model.ref;
+          submitData.name = modelData.name;
+          if (!modelData.customProp) {
+            submitData.lineCode = modelData.guid;
+          }
+
+          submitData.isLoop = Number(modelData.loop);
+          submitData.isDepthCheck = Number(modelData.depthTest);
+          submitData.width = modelData.width;
+          submitData.interpolation = modelData.arcType;
+          submitData.positions = JSON.stringify(poistions);
+          switch (modelData.material.type) {
+            // 实线
+            case 'XbsjColorMaterial':
+              submitData.materialType = 0;
+              // material.XbsjColorMaterial = {}
+              submitData.color = JSON.stringify(modelData.material.XbsjColorMaterial.color);
+              submitData.intervalColor = null;
+              submitData.dashLength = 0;
+              submitData.dashStyle = 0;
+              break;
+            // 虚线
+            case 'XbsjPolylineDashMaterial':
+              submitData.materialType = 1;
+              submitData.color = JSON.stringify(modelData.material.XbsjPolylineDashMaterial.color);
+              submitData.intervalColor = JSON.stringify(modelData.material.XbsjPolylineDashMaterial.gapColor);
+              submitData.dashLength = modelData.material.XbsjPolylineDashMaterial.dashLength;
+              submitData.dashStyle = modelData.material.XbsjPolylineDashMaterial.dashPattern;
+              // material.XbsjPolylineDashMaterial = {}
+              // material.XbsjPolylineDashMaterial.dashLength = data.dashLength
+              // material.XbsjPolylineDashMaterial.dashPattern = data.dashStyle
+              break;
+            // 箭头线
+            case 'XbsjPolylineArrowMaterial':
+              submitData.materialType = 2;
+              // material.XbsjPolylineArrowMaterial = {}
+              submitData.color = JSON.stringify(modelData.material.XbsjPolylineArrowMaterial.color);
+              submitData.intervalColor = null;
+              submitData.dashLength = 0;
+              submitData.dashStyle = 0;
+              break;
+            // 轨迹线
+            case 'XbsjODLineMaterial':
+              submitData.materialType = 3;
+              submitData.color = JSON.stringify(modelData.material.XbsjODLineMaterial.color);
+              submitData.intervalColor = null;
+              submitData.dashLength = 0;
+              submitData.dashStyle = 0;
+              submitData.cycleFrame = modelData.material.XbsjODLineMaterial.totoalFrameCount;
+
+              // material.XbsjODLineMaterial = {}
+              // material.XbsjODLineMaterial.color = JSON.parse(data.color)
+              // material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame
+              break;
+          }
+          defHttp
+            .put(
+              {
+                url: this.url.updateMapLine,
+                params: submitData,
+              },
+              { isTransformResponse: false }
+            )
+            // putAction(this.url.updateMapLine, submitData)
+            .then((res) => {
+              if (res.success) {
+                // $mitt.emit('openNotification', '修改成功', 2, 'info')
+                $mitt.emit('openNotification', { msg: '修改成功！', dt: 2, type: 'info', top: '50px' });
+                sn.title = submitData.name;
+                window.$earth.sceneTree.$refs['node_' + sn.ref].title = submitData.name;
+              } else {
+                // $mitt.emit('openNotification', '修改失败', 2, 'error', '50px')
+                $mitt.emit('openNotification', { msg: '修改失败', dt: 2, type: 'error', top: '50px' });
+              }
+            })
+            .catch((error) => {
+              // $mitt.emit('openNotification', '修改失败', 2, 'error', '50px')
+              $mitt.emit('openNotification', { msg: '修改失败', dt: 2, type: 'error', top: '50px' });
+            });
+        })
+        .run();
+    }
+
+
+    
+   
+   
+  }
+</script>
+
+<style>
+  .xbsj-model-box,
+  .detail-model,
+  .xbsj-modal-box {
+    background: linear-gradient(360deg, rgba(9, 39, 76, 0.9), rgba(9, 39, 76, 0.6)) !important;
+    /* border: 1px solid #2c58a6; */
+    box-shadow: 0 0 10px #2c58a6;
+  }
+
+  .xbsjSceneTreeBox {
+    left: initial !important;
+    width: 280px !important;
+    height: 600px !important;
+    right: 0 !important;
+    top: 0 !important;
+    background: -webkit-linear-gradient(270deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    background: -o-linear-gradient(270deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    background: -moz-linear-gradient(270deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    background: linear-gradient(270deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    box-shadow: none !important;
+  }
+
+  .xbsjSceneTreeBox .xbsj-model-close {
+    display: none;
+  }
+
+  .xbsjcesium + div {
+    background: -webkit-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    background: -o-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    background: -moz-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+    background: linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
+  }
+
+  .distance-legend {
+    background: RGBA(9, 39, 76, 0.8);
+  }
+
+  /* 标题 */
+  .earthUI_header header {
+    position: relative;
+    top: -3px;
+    height: 4rem;
+    background: url(../../../assets/earthMap/head_bg.png) no-repeat top center;
+    background-size: 100% 90%;
+  }
+
+  .earthUI_header p {
+    font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
+    color: #00ffe4;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  .earthUI_header header > p:first-child {
+    font-size: 1.1rem;
+    line-height: 28px;
+    padding-top: 0.5vh;
+    /* 文字间隔 */
+    letter-spacing: 5px;
+  }
+
+  .earthUI_header header > p:last-child {
+    font-family: Microsoft YaHei;
+    font-size: 0.8rem;
+    font-weight: 400;
+    /* 文字间隔 */
+    letter-spacing: 0.5px;
+  }
+
+  .quitBtn {
+    position: relative;
+    text-align: center;
+    font-size: 12px;
+    min-width: 100px;
+    width: 120px;
+    height: 30px;
+    padding: 0 7px;
+    margin-left: 100px;
+    line-height: 30px;
+    border-radius: 100px;
+    border: 1px solid #c9c9c9;
+    background-color: #fff;
+    color: #555;
+    cursor: pointer;
+    display: none;
+  }
+
+  /* 视频窗口 */
+  .videos {
+    display: none;
+    border: 1px solid #080808;
+    /*position: fixed;
+   right: 0;
+  bottom: 2px; */
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    width: 420px;
+    height: 380px;
+    -webkit-box-shadow: 0px 3px 3px #c8c8c8;
+    -moz-box-shadow: 0px 3px 3px #c8c8c8;
+    box-shadow: 0px 3px 3px #c8c8c8;
+  }
+
+  .vclose {
+    position: absolute;
+    right: 1%;
+    top: 1%;
+    border-radius: 100%;
+    cursor: pointer;
+  }
+
+  .videosSpan1 {
+    position: absolute;
+    left: 1%;
+    top: 1%;
+    color: #000;
+    font-size: 15px;
+    font-weight: bold;
+    font-family: 黑体;
+    border-radius: 100%;
+  }
+
+  .videosSpan2 {
+    position: absolute;
+    right: 1%;
+    bottom: 1%;
+    color: #000;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 黑体;
+    border-radius: 100%;
+  }
+
+  /* 相机状态点 */
+  .successStatus,
+  .offlineStatus,
+  .errorStatus {
+    position: relative;
+  }
+
+  .successStatus::before {
+    content: ' ';
+    position: absolute;
+    height: 7px;
+    width: 7px;
+    top: -60px;
+    left: 0;
+    /*transform: translateY(-50%);*/
+    border-radius: 50%;
+    background: rgb(0, 255, 0);
+  }
+
+  .offlineStatus::before {
+    content: ' ';
+    position: absolute;
+    height: 7px;
+    width: 7px;
+    top: -60px;
+    left: 0;
+    /*transform: translateY(-50%);*/
+    border-radius: 50%;
+    background: rgb(170, 170, 170);
+  }
+
+  .errorStatus::before {
+    content: ' ';
+    position: absolute;
+    height: 7px;
+    width: 7px;
+    top: -60px;
+    left: 0;
+    /*transform: translateY(-50%);*/
+    border-radius: 50%;
+    background: rgb(255, 0, 0);
+  }
+
+  /* 相机状态点 */
+
+  /* 电线杆气泡窗 */
+  .cameraModal {
+    margin: 20px auto;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: auto;
+    line-height: 25px;
+    color: white;
+    text-align: center;
+    font-size: 14px;
+    border: 1px solid rgb(255, 255, 255);
+    opacity: 0.9;
+    border-radius: 5px;
+    background: rgb(255, 255, 255);
+  }
+
+  .cameraModal::after {
+    /* 箭头靠下边 */
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 35px;
+    bottom: -15px;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 15px solid rgb(255, 255, 255);
+  }
+
+  .cameraModal ul {
+    margin: 20px;
+    padding: 0px;
+    list-style: none;
+  }
+
+  .cameraModal li {
+    float: left;
+    list-style-type: none;
+    display: inline;
+    margin: 5px;
+    width: 120px;
+    border: 2px solid #fff;
+  }
+
+  .cameraModal li:hover {
+    border-bottom-color: #00ffe4;
+  }
+
+  .cameraModal li > a {
+    color: rgb(19, 15, 15);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .cameraModal img {
+    width: 80px;
+    height: 60px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  .spinning {
+    position: absolute;
+    left: 50%;
+    top: 35%;
+    z-index: 999;
+  }
+
+  /* 电线杆气泡窗 */
+
+  /* 地标气泡窗 */
+  /*.poiModal {
+  margin: 20px auto;
+  padding: 5px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 160px;
+  width: 300px;
+  color: white;
+  text-align: center;
+  font-size: 14px;
+  border: 1px solid RGBA(12, 177, 177, 0.8);
+  border-radius: 5px;
+  filter: alpha(opacity=50);
+  background: RGBA(12, 177, 177, 0.9);
+}
+
+.poiModal::after {
+  !* 箭头靠下边 *!
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 140px;
+  bottom: -15px;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 15px solid RGBA(12, 177, 177, 0.8);
+}
+
+.poiModal-content {
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.2);
+  animation-name: modalopen;
+  animation-duration: 1s;
+}
+
+.poiModal-header h2 {
+  margin: 0;
+  color: white;
+}
+
+.poiModal-header {
+  line-height: 40px;
+}
+
+.poiModal-body {
+  text-align: left;
+  font-size: 16px;
+  padding-left: 5px;
+}
+
+.poiModal-body span {
+  color: #ffeb3b;
+}*/
+
+  /* 地标气泡窗 */
+  /* 地图切换按钮 */
+  .radioBtn {
+    position: absolute;
+    bottom: 40px;
+    right: 15px;
+  }
+
+  .radioBtn span {
+    transition: color 0.3s linear;
+  }
+
+  .radioBtn span:hover {
+    color: #00ffe4bb !important;
+    transition: color 0.3s linear;
+  }
+
+  .ant-radio-button-wrapper-checked {
+    background: #00ffe4bb !important;
+    border-color: #00ffe4 !important;
+  }
+
+  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+    background-color: #00ffe4 !important;
+  }
+
+  .earthChangeSpin {
+    position: absolute;
+    left: 45%;
+    top: 35%;
+  }
+
+  .ant-spin {
+    color: #00ffe4;
+  }
+
+  .ant-spin-dot-item {
+    background-color: #00ffe4;
+  }
+
+  /* 地图切换按钮 */
+  /* 比例尺和指南针属性 */
+  #distanceLegendDiv .distance-legend {
+    bottom: 80px !important;
+    background-color: rgba(9, 39, 76, 0.7) !important;
+  }
+
+  #navigationDiv > div {
+    top: unset !important;
+    /*去掉已有的top值使bottom生效 */
+    bottom: 120px !important;
+    right: 40px !important;
+  }
+
+  .compass-outer-ring-background {
+    border: 12px solid rgba(9, 39, 76, 0.7) !important;
+  }
+
+  .compass-gyro-background {
+    background-color: rgba(9, 39, 76, 0.7) !important;
+  }
+
+  /* 比例尺和指南针属性 */
+
+  body {
+    user-select: none;
+  }
+</style>
diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index bf75c42..1ecb62f 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -116,6 +116,7 @@
   import circleDot1 from '@/assets/earthMap/circleDot1.png';
   import circleDot3 from '@/assets/earthMap/circleDot3.png';
   import ship from '@/assets/images/ship.png';
+  import { onBeforeUnmount } from 'vue';
 
   class HandleNodeType {
     #sn;
@@ -528,6 +529,8 @@
 
     createEarth() {
       let that = this;
+      //使用store存储XbsjEarthUI
+      this.store.xbsjEarthUI = XbsjEarthUI;
       XbsjEarthUI.create('earthContainer').then(async (earthUI: any) => {
         // 设置全局变量，可调试
         window.$uia = earthUI;
@@ -4188,6 +4191,8 @@
     // 资源销毁
     beforeDestroy() {
       // vue程序销毁时，需要清理相关资源
+      console.log("vue程序销毁");
+      
       this._earth = this._earth && this._earth.destroy();
       this.websocketclose();
       //清除定时器
@@ -4195,6 +4200,23 @@
       clearInterval(this.timer2);
       clearInterval(this.alarmTrackClearTimer);
     }
+    // 资源销毁
+    destroy(){
+       // vue程序销毁时，需要清理相关资源
+       console.log("vue程序销毁",this._earth);
+      
+      
+      // this.websocketclose();
+      //清除定时器
+      clearInterval(this.timer);
+      clearInterval(this.timer2);
+      clearInterval(this.alarmTrackClearTimer);
+      // window.$uia.tools.sceneTree.destroy()
+      // this._earth = this._earth && this._earth.destroy();
+      //利用store.xbsjEarthUI 重新赋值 window.XbsjEarthUI 
+      window.XbsjEarthUI = this.store.xbsjEarthUI
+      this._earth = undefined;
+    }
   }
 </script>
 
diff --git a/src/views/earthMap/edit/EarthCompTest.vue b/src/views/earthMap/edit/EarthCompTest.vue
new file mode 100644
index 0000000..ed9008e
--- /dev/null
+++ b/src/views/earthMap/edit/EarthCompTest.vue
@@ -0,0 +1,1904 @@
+<!-- 
+    电子地图    
+    -编辑页面
+    --更换创建方式
+ -->
+<template>
+    <div>
+        <div id="earthContainer" ref="earthContainer" style="width: 100%; height: 100%; top: 300px"></div>
+        <div class="earthUI_header">
+            <header>
+                <p>{{ earthTitle }}</p>
+                <p>{{ realTime }}</p>
+            </header>
+        </div>
+        <div>
+            <a-radio-group default-value="satellite" button-style="solid" size="small" @change="radioChange"
+                class="radioBtn" v-show="radioBtnShow">
+                <a-radio-button value="satellite"> 卫星影像</a-radio-button>
+                <a-radio-button value="vector"> 矢量地图</a-radio-button>
+            </a-radio-group>
+            <a-spin size="large" tip="地图切换中，请稍候..." :spinning="earthChangeSpin" class="earthChangeSpin"></a-spin>
+        </div>
+
+        <!-- 预警列表 -->
+        <!-- <WarnInfoList /> -->
+
+        <!-- 电线杆弹窗 -->
+        <div id="cameraModal" class="cameraModal" v-show="cameraModalShow" ref="cameraModal">
+            <a-spin size="large" :spinning="spinning" class="spinning"></a-spin>
+            <a-button @click="roamPathSet()">视频融合</a-button>
+        </div>
+        <!-- 视频融合 -->
+        <VideoFusionWin v-if="VideoFusionWinShow" :cameraList="cameraList" :monitorPosition="monitorPosition"
+            :updateModel="toItemObj.updateModel" :isUpdate="toItemObj.isUpdate" :userSave="toItemObj.userSave">
+        </VideoFusionWin>
+        <!-- 地标弹窗 -->
+        <!-- <div id="poiModal" class="poiModal" v-show="poiModalShow" ref="poiModal">
+        <div class="poiModal-content">
+          <div class="poiModal-header"></div>
+          <div class="poiModal-body"></div>
+        </div>
+      </div>-->
+
+        <!-- 警示弹窗 -->
+        <video-split-screen />
+
+        <!-- 警示音频 -->
+        <audio ref="audio" loop>
+            <source src="@/assets/earthMap/audio/notify.mp3" />
+        </audio>
+
+        <!-- 云台控制弹窗 -->
+        <video-window :id="videoWindowProps.id" :visible.sync="videoWindowProps.visible" :title="videoWindowProps.title"
+            :videoUrl="videoWindowProps.videoUrl" :cameraIp="videoWindowProps.cameraIp"
+            :cameraUser="videoWindowProps.cameraUser" :cameraPwd="videoWindowProps.cameraPwd"
+            :isAlarm="videoWindowProps.isAlarm" :playRecord="videoWindowProps.playRecord"
+            :warnTime="videoWindowProps.warnTime" :warnEvent="videoWindowProps.warnEvent" />
+
+        <!-- 左侧操作栏 -->
+        <Toolbar v-if="toolbarShow" :setLabelStatus="setLabelStatus"></Toolbar>
+        <AddModelWin v-if="addModelWinShow" :setLabelStatus="setLabelStatus" :czmObject="czmObject" :node="node"
+            :type="type" :lineId="lineId" :areaCode="areaCode" :areaByNodeId="areaByNodeIdModel"
+            :setIconByRef="setIconByRef" :el="el" :eidtId="eidtId"></AddModelWin>
+        <AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, watch, nextTick, ref, reactive, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue';
+import sceneTree from '@/assets/earthMap/resjson/sc.json';
+import { defHttp } from '/@/utils/http/axios';
+import earthUtils from '@/utils/earthMap/earth';
+import _ from 'lodash';
+import $ from 'jquery';
+import { useUserStore } from '/@/store/modules/user';
+import { useEarthMapStore } from '/@/store/modules/earthMap';
+import Toolbar from '@/components/earthMap/Toolbar.vue';
+import AddModelWin from '@/components/earthMap/toolbar/AddModelWin.vue';
+import AddRoamVideo from '@/components/earthMap/toolbar/AddRoamVideo.vue';
+import VideoSplitScreen from '@/components/earthMap/VideoSplitScreen.vue';
+import VideoWindow from '@/components/earthMap/VideoWindow.vue';
+import WarnInfoList from '@/components/earthMap/WarnInfoList.vue';
+import { getRealTime } from '@/utils/date';
+import $mitt from '@/utils/earthMap/mitt';
+import { drawInit } from '@/utils/earthMap/earthDraw';
+import { keyControlInit } from '@/utils/earthMap/keyControlInit';
+import redFlag from '@/assets/earthMap/redFlag.png';
+import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj';
+import { drawAllShips } from '@/utils/earthMap/shipDraw';
+import hidePng from '@/assets/earthMap/hide.png';
+import alarmImg from '@/assets/earthMap/alarm.gif';
+import VideoFusionWin from './components/VideoFusionWin.vue';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+import circleDot2 from '@/assets/earthMap/circleDot2.png';
+import circleDot1 from '@/assets/earthMap/circleDot1.png';
+import circleDot3 from '@/assets/earthMap/circleDot3.png';
+
+const userStore = useUserStore();
+const store = useEarthMapStore();
+const { proxy } = getCurrentInstance();
+const { createMessage } = useMessage();
+const audio = ref() //警示音频组件
+const props = defineProps({
+
+});
+
+class HandleNodeType {
+    #sn;
+    #sensorCallback;
+    #modelCallback;
+    #markerPositionCallback;
+    #polylineCallBack;
+    #default;
+
+    constructor(sn) {
+        this.#sn = sn;
+    }
+
+    sensor(callback) {
+        this.#sensorCallback = callback;
+        return this;
+    }
+
+    // 模型回调
+    modelCallback(callback) {
+        this.#modelCallback = callback;
+        return this;
+    }
+
+    // 微波雷达回调
+    markerPosition(callback) {
+        this.#markerPositionCallback = callback;
+        return this;
+    }
+
+    // 区域回调
+    polylineCallBack(callback) {
+        this.#polylineCallBack = callback;
+        return this;
+    }
+
+    default(callback) {
+        this.#default = callback;
+        return this;
+    }
+
+    run() {
+        // 判断节点的类型
+        if (!this.#sn.czmObject) {
+            return null;
+        }
+        // 模型类型
+        let tempCondition = this.#sn.czmObject.xbsjType;
+        switch (tempCondition) {
+            case 'Model':
+                this.#modelCallback ? this.#modelCallback() : this.#default();
+                break;
+            case 'Pin':
+                this.#markerPositionCallback ? this.#markerPositionCallback() : this.#default();
+                break;
+            case 'Polyline':
+                this.#polylineCallBack ? this.#polylineCallBack() : this.#default();
+                break;
+            default:
+                this.#default ? this.#default() : null;
+        }
+    }
+}
+
+function setClassEl(setClassEl1, setClassEl2, checked) {
+    if (checked) {
+        setClassChecked(setClassEl1, setClassEl2);
+    } else {
+        setClassNoChecked(setClassEl1, setClassEl2);
+    }
+}
+
+function setClassChecked(setClassEl1, setClassEl2) {
+    // node.checkStatus = 'checked'
+    // node.disabled = ''
+    //***设置样式为选中 */
+    setClassEl1.className = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-checked xbsj-checkbox-default';
+    setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-checked';
+}
+
+function setClassNoChecked(setClassEl1, setClassEl2) {
+    // node.checkStatus = ''
+    // node.disabled = 'disabled'
+    // 设置为非选中
+    setClassEl1.className = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-disabled xbsj-checkbox-default';
+    setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-disabled';
+}
+
+function classMutationObserver(el, el1, checkedStauts, id) {
+    // 观察器的配置（需要观察什么变动） 属性，子节点or后代节点
+    const config = { attributes: true, childList: false, subtree: false };
+    const callback1 = function (mutationsList, observer) {
+        const checked = checkedStauts.get(id);
+        const oldClassName = el.className;
+        const trueClassName = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-checked xbsj-checkbox-default';
+        const noClassName = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-disabled xbsj-checkbox-default';
+        if (checked) {
+            if (oldClassName == trueClassName) {
+                return;
+            } else {
+                setClassChecked(el, el1);
+            }
+        } else {
+            if (oldClassName == noClassName) {
+                return;
+            } else {
+                setClassNoChecked(el, el1);
+            }
+        }
+    };
+    // 创建一个观察器实例并传入回调函数
+    const observer1 = new MutationObserver(callback1);
+    // 以上述配置开始观察目标节点
+    observer1.observe(el, config);
+}
+
+function disabledMutationObserver(el) {
+    const config = { attributes: true, childList: false, subtree: false };
+    const callback1 = function (mutationsList, observer) {
+        const el1 = mutationsList[0];
+        if (el1.attributeName == 'disabled') {
+            el.removeAttribute('disabled');
+        }
+    };
+    const observe1 = new MutationObserver(callback1);
+    // 以上述配置开始观察目标节点
+    observe1.observe(el, config);
+}
+
+// 地球对象
+let _earth: any = undefined;
+let _viewer: any = undefined;
+
+let earthTitle = '态势监控一张图';
+const realTime: any = ref('……');
+// 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
+
+_earthUI = undefined;
+_pin = undefined;
+let _handler: any = undefined;
+sceneTree: any = sceneTree;
+
+
+let url: any = {
+    queryLabelList: 'military/msMapLabel/queryLabelAndDeviceList',
+    queryLineList: 'military/msMapLine/list',
+    queryCameraInfo: 'military/camera/site/getCameraInfoForEarth',
+    queryAllModelInfo: 'military/msModelPosition/queryAllModelInfo',
+    queryPatrolRouteInfo: 'military/msPatrolLine/getLineDetail',
+    queryBayoneByParam: 'military/msBayonetStatistics/getBayoneByParam',
+    queryAisInfo: 'military/checkpoint/msAisInfo/list',
+    keepAlive: 'military/mapInfo/keepAlive',
+    //雷达扫描列表
+    radarList: '/military/RadarConfig/list',
+    // 删除模型
+    // 传感器
+    deleteSensor: '/military/msModelPosition/deleteByEventSerialNum',
+    // 站点
+    deleteSite: '/military/camera/site/delete',
+    // 标志点
+    deleteMapLabel: '/military/msMapLabel/delete',
+    updateMapLine: '/military/msMapLine/edit',
+    deleteMapLine: '/military/msMapLine/delete',
+    saveMapLine: '/military/msMapLine/add',
+    // 编辑 模型
+    // 传感器
+    updateSensor: '/military/msModelPosition/editByEventSerialNum',
+    // 站点
+    updateSite: '/military/camera/site/edit',
+
+    // 标志点
+    updateMapLabel: '/military/msMapLabel/edit',
+
+    // 模型 保存
+    // 传感器
+    SaveSensorModel: '/military/msModelPosition/add',
+    // 站点
+    saveCameraSiteModel: '/military/camera/site/add',
+    // 标志点
+    saveMapLabel: '/military/msMapLabel/addMapLabel',
+
+    // 通过 线路名称 查询 线路
+    queryMapLine: '/military/msMapLine/queryByName',
+    querySiteById: '/military/camera/site/queryById',
+    // 查询设备列表
+    queryDeviceInfoList: '/military/msDeviceInfo/list',
+    setDefenseArea: '/military/netty/microwaveDetector/defenceArea',
+    perimeterRegionList: '/third/api/perimeterRegionList',
+    perimeterControl: '/third/api/perimeterControl',
+    // 雷达重新发送报警信息
+    sendRadarAlarmByWebSocket: '/military/warn/sendRadarAlarmByWebSocket',
+};
+let cameraData: any = {};
+const cameraModalShow = ref(false);
+poiModalShow = false;
+let radioBtnShow = ref(true);
+glmId: any = [];
+let spinning = ref(false);
+let earthChangeSpin = ref(false);
+let websock: any = [];
+let timer: any = null; // 保活定时器
+let timer2: any = null; // 时间定时器
+// 报警清除-定时器
+let alarmTrackClearTimer: any = null;
+let videoWindowProps: any = ref({
+    visible: false,
+    isAlarm: false,
+    id: '',
+    title: '',
+    videoUrl: '',
+    cameraIp: '',
+    cameraUser: '',
+    cameraPwd: '',
+    playRecord: false,
+    warnTime: null,
+    warnEvent: {
+        happenTime: '',
+        happenLoc: '',
+        warnNum: 0,
+        warnLevel: 0,
+        warnType: 0,
+        warnContent: '',
+    },
+});
+// 图层管理- 模型 ref 旧值
+let sceneTreeOldRefValue = '';
+let sceneInfo: any = null;
+// 区域节点By Ref划分
+nodeConfigByRef = new Map();
+let nodeCheckedByRef = new Map();
+let areaByNodeId = new Map();
+let statusByNodeId = new Map();
+let imgByRef = new Map();
+let radarAlarmDataMap = new Map();
+wbUnifiedResponse = false;
+let hostDeviceMapById = new Map();
+let alarmInfoMap = new Map();
+toolbarShow = false;
+
+//addModelWin
+addModelWinShow = false;
+czmObject: any = null;
+node: any = null;
+type = '';
+lineId = '';
+areaCode = '';
+areaByNodeIdModel = '';
+el: any = null;
+eidtId: any = null;
+//addroamVideo
+addRoamVideoShow = false;
+
+// 控制窗口显示
+const VideoFusionWinShow = ref(false);
+//传到子组件的值
+toItemObj: any = {
+    updateModel: {},
+    isUpdate: true,
+    userSave: {},
+};
+// 节点值
+domKey: any = '';
+// 监控相机列表
+cameraList: any = [];
+// 监控相机位置
+monitorPosition: any = [];
+
+
+
+
+
+
+onMounted(async () => {
+    window.XE.ready().then(() => {
+        // 加载标绘插件
+        return window.XE.HTML.loadJS('/earthsdk/XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js');
+    }).then(async () => {
+        //地图初始化
+        await initMap()
+        //随机数
+        window.guid = guid;
+        //获取实时日期时间
+        getRealTime();
+        //初始化websocket
+        //  initWebSocket('domianURL')
+        //阻止浏览器右键事件
+        document.oncontextmenu = function (e) {
+            return false;
+        };
+
+        return true
+    }).then(() => {
+        //将回调延迟到下次 DOM 更新循环之后执行（针对由jq动态增加的元素绑定事件）
+        nextTick(() => {
+            {
+                //监控点击事件
+                $('.cameraModal').on('click', '.openIframe', function (e: any) {
+                    // web插件播放视频流
+                    videoWindowProps.value.id = $(this).attr('id');
+                    videoWindowProps.value.title = $(this).text();
+                    videoWindowProps.value.videoUrl = $(this).attr('videoUrl');
+                    videoWindowProps.value.cameraIp = $(this).attr('cameraIP');
+                    videoWindowProps.value.cameraUser = $(this).attr('cameraUser');
+                    videoWindowProps.value.cameraPwd = $(this).attr('cameraPsd');
+                    videoWindowProps.value.isAlarm = false;
+                    videoWindowProps.value.visible = true;
+                    videoWindowProps.value.playRecord = false;
+                });
+            }
+        });
+        return true
+    })
+        .then(() => {
+            // 轮询
+            {
+                //一个小时调用一次空接口，保持系统session不过期
+                timer = setInterval(() => {
+                    keepAlive();
+                }, 60 * 60 * 1000);
+
+                alarmTrackClearTimer = setInterval(() => {
+                    radarAlarmTimeOutCheck();
+                }, 6 * 1000);
+            }
+            return true
+        });
+
+})
+
+//地图初始化
+function initMap() {
+    _earth = new window.XE.Earth('earthContainer');
+    window.$earth = _earth;
+    window.$viewer = _viewer = window.$earth.czm.viewer;
+}
+
+//飞入方法
+async function fly() {
+    let position, rotation, viewDistance, duration;
+    const sceneId = userStore.userInfo?.sceneId;
+    await defHttp
+        .get(
+            {
+                url: '/military/msMapScene/list',
+                params: {
+                    pageNo: 1,
+                    pageSize: 999,
+                    sceneId: sceneId + '*',
+                    column: 'sceneId',
+                    order: 'asc',
+                },
+            },
+            { isTransformResponse: false }
+        )
+        .then((response) => {
+            console.log('fly', response);
+            // 设置岛屿信息为数组
+            sceneInfo = response.result.records;
+            return response.result.records;
+        })
+        .then((res) => {
+            //飞入 所属场景下的位置
+            position = [res[0].cameraLon, res[0].cameraLat, res[0].cameraAltitude];
+            rotation = [res[0].rotationX, res[0].rotationY, res[0].rotationZ];
+            viewDistance = res[0].viewDistance;
+            duration = res[0].duration;
+            _earth.camera.flyTo(position, viewDistance, rotation, duration);
+            // 地图复原事件
+            window.$flyTo = flyTo = () => {
+                _earth.camera.flyTo(position, viewDistance, rotation, duration);
+            };
+        });
+}
+
+
+/**
+ * 保存更改的ref到模型和后台数据中;
+ * @param {Object} model 当前模型
+ * @param {string} newRef 新的ref
+ * @param {string} oldRef 旧的ref
+ */
+const changeRef = _.debounce(function (model, newRef, oldRef) {
+    // 当数值改变时且旧值不等于空时，更新模型的ref
+    if (newRef !== oldRef && oldRef !== '') {
+        // 修改后台的数据
+        handleNodeType(model)
+            .sensor(() => {
+                defHttp
+                    .put(
+                        {
+                            url: url.updateSensor + `?eventSerialNum=${oldRef}`,
+                            params: { eventSerialNum: newRef },
+                        },
+                        { isTransformResponse: false }
+                    )
+                    .then((res) => {
+                        if (res.success) {
+                            // 设置保存的 ref
+                            sceneTreeOldRefValue = '';
+                            // 更新模型的名称
+                            model.title = newRef;
+                            createMessage.success('修改成功');
+                        } else {
+                            createMessage.error('修改失败: ' + res.message);
+                        }
+                    })
+                    .catch((err) => {
+                        createMessage.error('修改失败: ' + err);
+                    });
+            })
+            .modelCallback(() => {
+                // 传感器标志线不能修改ref，因为 ref 是后台数据库的ID;
+                createMessage.warn('无法修改传感器标志线的ref');
+            })
+            .run();
+    }
+}, 150);
+function handleNodeType(sn) {
+    return new HandleNodeType(sn);
+}
+// 随机数
+function guid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0,
+            v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+
+// 打开视频融合
+function roamPathSet() {
+    // 打开视频融合
+    VideoFusionWinShow.value = true;
+    // 关闭相机列表
+    cameraModalShow.value = false;
+}
+
+
+
+
+function listenMittHandler(earthUI = null) {
+
+    $mitt.on('winShow', function (e: any) {
+        VideoFusionWinShow.value = e;
+    });
+    //其他页面调用本页面的methods方法
+    $mitt.on('listenMouseHandler', function () {
+        listenMouseHandler();
+    });
+    $mitt.on('removeHandler', function () {
+        removeHandler();
+    });
+    $mitt.on('createBBHLine', function () {
+        createBBHLine();
+    });
+    $mitt.on('createRealTimeObj', function () {
+        createRealTimeObj();
+    });
+    $mitt.on('radioChangeBtnShow', function (callback) {
+        radioChangeBtnShow(callback);
+    });
+    $mitt.on('loadingStatus', function () {
+        loadingStatus();
+    });
+    $mitt.on('clearAlarmModel', (mittData: any) => {
+        let { isWarnEvent, eventSerialNum } = mittData;
+        // 清除告警模型
+        if (isWarnEvent) {
+            // 是告警事件 先去后台查询预警事件获取事件编号
+            let url = 'military/msWarnEvent/queryWarnEventDetailList';
+            let params = {
+                eventSerialNum: eventSerialNum,
+            };
+            defHttp.get({ url, params }, { isTransformResponse: false }).then((res) => {
+                if (res.success) {
+                    // 成功
+                    let data = res.result;
+                    for (const warnEventInfo of data) {
+                        clearAlarmModel(warnEventInfo.eventSerialNum);
+                    }
+                } else {
+                    // 失败
+                    console.log('失败');
+                    createMessage.error(res.message);
+                }
+            });
+        } else {
+            // 不是告警事件,直接清除
+            clearAlarmModel(eventSerialNum);
+        }
+    });
+    // 监听mqtt消息
+    $mitt.on('deviceCmd', (message: any) => {
+        drawAllShips(message);
+    });
+
+}
+
+
+
+// 告警模型显示/隐藏
+function showAlarmPin(show) {
+    alarmInfoMap.forEach((item, _index) => {
+        item.pin.show = show;
+        item.pin._div.hidden = !show;
+        item.scanline.show = !show;
+    });
+}
+// 重命名 on-change-title 事件 使用 lodash.debounce 函数(防抖)
+const handleChangeTitle = _.debounce(function (options) {
+    const sn = options.item._inner.sn;
+    const newTitle = options.title;
+
+    // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口
+    handleNodeType(sn)
+        // 感应器
+        .sensor(() => {
+            // 不支持修改名称
+            createMessage.warn('不支持修改感应器的名称');
+        })
+        // 传感器标志线
+        .modelCallback(() => {
+            // 发送请求 保存模型属性
+            let editCameraSiteModelParameter = {
+                id: sn.ref,
+                sitename: newTitle,
+            };
+            defHttp
+                .put(
+                    {
+                        url: url.updateSite,
+                        params: editCameraSiteModelParameter,
+                    },
+                    { isTransformResponse: false }
+                )
+                // putAction(this.url.updateSite, editCameraSiteModelParameter)
+                .then((res) => {
+                    if (res.success) {
+                        createMessage.success('修改成功');
+                    } else {
+                        createMessage.error('修改失败');
+                    }
+                })
+                .catch((error) => {
+                    createMessage.error('修改失败');
+                });
+        })
+        .markerPosition(() => {
+            // 发送请求 保存模型属性
+            let editPinModelParameter = {
+                id: sn.ref,
+                labelName: newTitle,
+            };
+            defHttp
+                .put(
+                    {
+                        url: url.updateMapLabel,
+                        params: editPinModelParameter,
+                    },
+                    { isTransformResponse: false }
+                )
+                // putAction(this.url.updateMapLabel, editPinModelParameter)
+                .then((res) => {
+                    if (res.success) {
+                        // 修改扩展文本
+                        sn.czmObject.pinBuilder.extText = newTitle;
+                        createMessage.success('修改成功');
+                    } else {
+                        createMessage.error('修改失败');
+                    }
+                })
+                .catch((error) => {
+                    createMessage.error('修改失败');
+                });
+        })
+        .run();
+}, 150);
+
+// 右键菜单删除按钮的删除方法
+function handlerModelDelete(url, params) {
+    // return deleteAction(url, params).then((res) => {
+    return defHttp
+        .delete(
+            {
+                url: url,
+                params: params,
+            },
+            { isTransformResponse: false, joinParamsToUrl: true }
+        )
+        .then((res) => {
+            if (res.success) {
+                createMessage.success('删除成功');
+            } else {
+                createMessage.error('删除失败');
+            }
+        });
+}
+
+// 获取当前实时时间
+function getRealTime() {
+    timer2 = setInterval(() => {
+        realTime.value = getRealTime();
+    }, 1000);
+}
+
+const cameraPositionChange = _.debounce(
+    (that) => {
+        let height = window.$earth.camera.position[2];
+        if (height < 100) {
+            // 相机高度小于1000米,告警显示扫描线
+            that.showAlarmPin(false);
+        } else if (height >= 100) {
+            // 相机高度大于1000米,告警显示图标
+            that.showAlarmPin(true);
+        }
+    },
+    500,
+    { maxWait: 1000 }
+);
+//设置按钮颜色状态
+function setIconByRef(ref, el) {
+    const status = statusByNodeId.get(ref);
+    if (status != undefined && status != null) {
+        let img = imgByRef.get(ref);
+        const icon = el.children[0].children[2];
+        if (!img) {
+            img = document.createElement('img');
+            imgByRef.set(ref, img);
+        }
+        if (icon.nodeName == 'I') {
+            icon.replaceWith(img);
+        }
+        if (status == 1) {
+            img.src = circleDot2;
+        } else if (status == 0) {
+            img.src = circleDot1;
+        } else {
+            img.src = circleDot3;
+        }
+        img.setAttribute('style', 'width:16px;height:16px;margin-top:7px');
+    }
+}
+
+function getRandomArr(arr, count) {
+    //从数组随机抽取元素
+    var shuffled = arr.slice(0),
+        i = arr.length,
+        min = i - count,
+        temp,
+        index;
+    while (i-- > min) {
+        //打乱数组
+        index = Math.floor((i + 1) * Math.random());
+        temp = shuffled[index];
+        shuffled[index] = shuffled[i];
+        shuffled[i] = temp;
+    }
+    return shuffled.slice(min);
+}
+
+function setLoginPoint(data: any) {
+    let position = [data.lon, data.lat, 0];
+    let rotation = [data.rotationX, data.rotationY, data.rotationZ];
+    let viewDistance = data.viewDistance;
+    let duration = data.duration ? data.duration : 1;
+    const leafConfig = {
+        name: '岛屿',
+        xbsjType: 'Pin',
+        // far: 2500000,
+        near: 3000000,
+        position: position,
+        // imageUrl: require('@/assets/redFlag.png'),
+        imageUrl: redFlag,
+        pinBuilder: {
+            extText: data.sceneName,
+            extTextFont: '30px 楷体',
+            extTextPixelOffset: [30, -40],
+            fillColor: [1, 1, 1, 0.9],
+            outlineColor: [0, 0, 0, 0.9],
+        },
+    };
+
+    const pin = new window.XE.Obj.Pin(window.$earth);
+    pin.xbsjFromJSON(leafConfig);
+    position[2] = data.altitude;
+    //鼠标事件
+    pin.onmouseover = () => {
+        _viewer._container.style.cursor = 'pointer';
+    };
+    pin.onmouseout = () => {
+        _viewer._container.style.cursor = 'default';
+    };
+    pin.onclick = function () {
+        _earth.camera.flyTo(position, viewDistance, rotation, duration);
+    };
+}
+
+
+//加载相机
+function getCameraInfo(models, type) {
+    return new Promise((resolve, reject) => {
+        //请求电线杆信息
+        defHttp.get({ url: url.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => {
+            if (res.success) {
+                // console.log("res",res);
+                setCamera(res.result, models, type);
+                cameraData = res.result;
+                resolve(models);
+            }
+        });
+    });
+}
+
+
+function getPatrolRouteInfo(models) {
+    return new Promise((resolve, reject) => {
+        //执勤巡逻路线
+        defHttp.get({ url: url.queryPatrolRouteInfo }, { isTransformResponse: false }).then(async (res) => {
+            if (res.success) {
+                res.result.forEach((data, index) => {
+                    //将路线上的点拼成坐标数组
+                    let positions: any = [];
+                    data.msLineConstList.forEach((data, index) => {
+                        positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height));
+                    });
+                    const objConfig = {
+                        ref: data.lineCode,
+                        czmObject: {
+                            name: data.lineName,
+                            xbsjType: 'Polyline',
+                            width: 2,
+                            material: {
+                                type: 'XbsjODLineMaterial',
+                                XbsjODLineMaterial: {
+                                    bgColor: [0.5, 0.5, 0.5, 1],
+                                    color: [0, 1, 0.11, 1],
+                                    totoalFrameCount: 200,
+                                },
+                            },
+                            positions: positions,
+                        },
+                    };
+                    models.children[0].children.push(objConfig);
+                });
+                resolve(models);
+            }
+        });
+    });
+}
+
+function removeHandler() {
+    _handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE); //移除鼠标事件
+    _handler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除鼠标事件
+}
+
+
+function radioChange(e) {
+    loadingStatus();
+    if (`${e.target.value}` == 'satellite') {
+        window.$earth.sceneTree.$refs.satellite.czmObject.show = true;
+        window.$earth.sceneTree.$refs.vector.czmObject.show = false;
+    } else if (`${e.target.value}` == 'vector') {
+        window.$earth.sceneTree.$refs.vector.czmObject.show = true;
+        window.$earth.sceneTree.$refs.satellite.czmObject.show = false;
+    }
+}
+
+function radioChangeBtnShow(callback) {
+    radioBtnShow.value = !radioBtnShow.value;
+    callback(radioBtnShow.value); //回调返回当前状态
+}
+function loadingStatus() {
+    earthChangeSpin.value = !earthChangeSpin.value; //加载状态
+    setTimeout(() => {
+        earthChangeSpin.value = !earthChangeSpin.value; //3秒后去除加载状态
+    }, 3000);
+}
+
+function keepAlive() {
+    defHttp.get({ url: url.keepAlive }, { isTransformResponse: false }).then((res) => { });
+}
+
+function closeClient() {
+    chrome.call('close');
+}
+
+
+function setLabelStatus(device, labelCode, id, code) {
+    const args = {
+        device: device,
+        code: code, // 命令码：0-撤防 1-布防 2-状态查询 3-其他预留
+        deviceType: 2, // 设备类型：1-探测主机 2-探测器 3-串口设备 4-预留
+        deviceSn: labelCode, // 设备条码
+    };
+    // console.log("device",device);
+
+    if (device.deviceType_dictText.indexOf('微波探测器') > -1) {
+        // console.log("微波探测器");
+
+        return (
+            defHttp
+                .post({ url: '/military/netty/microwaveDetector/maintenance', params: args }, { isTransformResponse: false })
+                // postAction('netty/microwaveDetector/maintenance', args)
+                .then((response) => {
+                    // console.log('response',response);
+
+                    if (response.success) {
+                        const status = response;
+                        statusByNodeId.set(id, status);
+                    } else {
+                        statusByNodeId.set(id, -10);
+                    }
+                    return response;
+                })
+                .catch((error) => {
+                    // console.log('error',error);
+                    statusByNodeId.set(id, -10);
+                    return error;
+                })
+        );
+    } else if (device.deviceType_dictText.indexOf('雷达') > -1) {
+        statusByNodeId.set(id, 1);
+        //雷达周界防区列表
+        return defHttp
+            .get({ url: url.perimeterRegionList, params: { regionType: 2 } }, { isTransformResponse: false })
+            .then(
+                (res) => {
+                    // console.log(res);
+                    if (res.success) {
+                        // (未测试)
+                        res.result.forEach((element) => {
+                            if (element.id == id) {
+                                // this.statusByNodeId.set(id, element.isOnline)
+                            }
+                        });
+                    } else {
+                        statusByNodeId.set(id, 1);
+                    }
+                    return res;
+                },
+                (err) => {
+                    statusByNodeId.set(id, 1);
+                    return err;
+                }
+            )
+            .catch((err) => {
+                statusByNodeId.set(id, 1);
+                return err;
+            });
+    }
+}
+function getAllModelInfo(models) {
+    return new Promise((resolve, reject) => {
+        //模型位置
+
+        defHttp.get({ url: url.queryAllModelInfo }, { isTransformResponse: false }).then(async (res) => {
+            if (res.success) {
+                res.result.forEach((data, index) => {
+                    let childrenConfig: any = {},
+                        objConfig: any = {},
+                        pathConfig: any = {},
+                        viewshedConfig: any = {},
+                        pinConfig: any = {};
+                    let positions: any = [],
+                        rotations: any = [];
+                    switch (data.modelType) {
+                        case 1: //无人机
+                            childrenConfig = {
+                                expand: false,
+                                title: '无人机_' + (index + 1) + '号',
+                                children: [],
+                            };
+                            objConfig = {
+                                ref: data.eventSerialNum,
+                                czmObject: {
+                                    name: '无人机',
+                                    xbsjType: 'Model',
+                                    url: window._CONFIG['staticDomainURL'] + '/uav.gltf',
+                                    minimumPixelSize: 1000,
+                                    maximumScale: 20,
+                                    xbsjPosition: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height),
+                                    distanceDisplayCondition: [10.0, 25000.0],
+                                },
+                            };
+                            childrenConfig.children.push(objConfig);
+                            // 加载视域
+                            viewshedConfig = {
+                                ref: 'viewshed_' + data.eventSerialNum,
+                                czmObject: {
+                                    xbsjType: 'Viewshed',
+                                    name: '视域',
+                                    position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height),
+                                    rotation: earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll),
+                                    near: 1.0,
+                                    far: 1500,
+                                    enabled: false,
+                                    show: false,
+                                },
+                            };
+                            childrenConfig.children.push(viewshedConfig);
+                            //加载历史轨迹
+                            data.msModelTrajectoryList.forEach((data, index) => {
+                                positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height));
+                                rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll));
+                            });
+                            pathConfig = {
+                                ref: 'path_' + data.eventSerialNum,
+                                czmObject: {
+                                    xbsjType: 'Path',
+                                    name: '轨迹',
+                                    positions: positions,
+                                    rotations: rotations,
+                                    enabled: false,
+                                    show: true,
+                                    loop: false,
+                                    showDirection: false,
+                                    playing: true,
+                                    loopPlay: true,
+                                    alwaysAlongThePath: true,
+                                    currentSpeed: 30,
+                                },
+                            };
+                            childrenConfig.children.push(pathConfig);
+                            //加入树
+                            models.children[1].children.push(childrenConfig);
+                            break;
+                        case 2: //执勤人员
+                            childrenConfig = {
+                                expand: false,
+                                title: '执勤人员_' + (index + 1) + '号',
+                                children: [],
+                            };
+                            objConfig = {
+                                ref: data.eventSerialNum,
+                                czmObject: {
+                                    xbsjType: 'GroundImage',
+                                    name: '执勤人员',
+                                    playing: true,
+                                    width: 90,
+                                    height: 90,
+                                    position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, 0),
+                                    imageUrls: [window._CONFIG['staticDomainURL'] + '/xunluo_point1.png', window._CONFIG['staticDomainURL'] + '/xunluo_point2.png'],
+                                },
+                            };
+                            childrenConfig.children.push(objConfig);
+                            //加载历史轨迹
+                            data.msModelTrajectoryList.forEach((data, index) => {
+                                positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height));
+                                rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll));
+                            });
+                            pathConfig = {
+                                ref: 'path_' + data.eventSerialNum,
+                                czmObject: {
+                                    xbsjType: 'Path',
+                                    name: '轨迹',
+                                    positions: positions,
+                                    rotations: rotations,
+                                    enabled: false,
+                                    show: true,
+                                    loop: false,
+                                    showDirection: false,
+                                    playing: true,
+                                    loopPlay: true,
+                                    alwaysAlongThePath: true,
+                                    currentSpeed: 30,
+                                },
+                            };
+                            childrenConfig.children.push(pathConfig);
+                            //加入树
+                            models.children[1].children.push(childrenConfig);
+                            break;
+                        case 3: //可疑人员
+                            childrenConfig = {
+                                expand: false,
+                                title: '可疑人员_' + (index + 1) + '号',
+                                children: [],
+                            };
+                            objConfig = {
+                                ref: data.eventSerialNum,
+                                czmObject: {
+                                    xbsjType: 'GroundImage',
+                                    name: '可疑人员',
+                                    playing: true,
+                                    width: 90,
+                                    height: 90,
+                                    position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, 0),
+                                    imageUrls: [window._CONFIG['staticDomainURL'] + '/keyi_point1.png', window._CONFIG['staticDomainURL'] + '/keyi_point2.png'],
+                                },
+                            };
+                            childrenConfig.children.push(objConfig);
+                            //加载历史轨迹
+                            data.msModelTrajectoryList.forEach((data, index) => {
+                                positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height));
+                                rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll));
+                            });
+                            pathConfig = {
+                                ref: 'path_' + data.eventSerialNum,
+                                czmObject: {
+                                    xbsjType: 'Path',
+                                    name: '轨迹',
+                                    positions: positions,
+                                    rotations: rotations,
+                                    enabled: false,
+                                    show: true,
+                                    loop: false,
+                                    showDirection: false,
+                                    playing: true,
+                                    loopPlay: true,
+                                    alwaysAlongThePath: true,
+                                    currentSpeed: 30,
+                                },
+                            };
+                            childrenConfig.children.push(pathConfig);
+                            //加入树
+                            models.children[2].children.push(childrenConfig);
+                            break;
+                        case 11: //传感器
+                            objConfig = {
+                                ref: data.eventSerialNum,
+                                czmObject: {
+                                    name: data.eventSerialNum,
+                                    xbsjType: 'Model',
+                                    url: window._CONFIG['staticDomainURL'] + '/zalan.gltf',
+                                    minimumPixelSize: 1000,
+                                    maximumScale: 0.01,
+                                    // xbsjPosition: [window.Cesium.Math.toRadians(data.lon), window.Cesium.Math.toRadians(data.lat), data.height],
+                                    xbsjPosition: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height),
+                                    xbsjRotation: earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll),
+                                    distanceDisplayCondition: [10.0, 25000.0],
+                                    customProp: data.eventSerialNum,
+                                    color: [0.08235294117647059, 1, 0, 1],
+                                    luminanceAtZenith: 2,
+                                },
+                            };
+                            //加入树
+                            models.children[0].children[0].children.push(objConfig);
+                            break;
+                        default:
+                    }
+                });
+                resolve(models);
+            }
+        });
+    });
+}
+// 控制子元素的显示或者隐藏
+function showOrHideChild(clickNode, earthUI, parentChecked) {
+    const childs = clickNode.children;
+    if (childs && childs.length > 0) {
+        for (const child of childs) {
+            const ref = child.ref;
+            const inputEl: any = document.getElementById(ref);
+            if (inputEl) {
+                inputEl.checked = parentChecked;
+                const event = new Event('change');
+                inputEl.dispatchEvent(event);
+            } else {
+                if (ref.startsWith('node_')) {
+                    const readyNode = earthUI.earth.sceneTree.$refs[ref.split('_')[1]];
+                    if (readyNode && readyNode.czmObject) {
+                        readyNode.czmObject.show = parentChecked;
+                    }
+                } else if (ref.startsWith('nodeSecondary_')) {
+                    const readyNode = earthUI.earth.sceneTree.$refs[ref.split('_')[1]];
+                    if (readyNode && readyNode.czmObject) {
+                        readyNode.czmObject.show = parentChecked;
+                        let guid = readyNode.czmObject.pinXbsjGuid;
+                        let pin = window.$earth.getObject(guid);
+                        pin.show = !pin.show;
+                    }
+                } else {
+                    if (child && child.czmObject) {
+                        child.czmObject.show = parentChecked;
+                    }
+                }
+                nodeCheckedByRef.set(ref, parentChecked);
+                showOrHideChild(child, earthUI, parentChecked);
+            }
+        }
+    }
+}
+
+
+
+/* websocket-start */
+function initWebSocket(configName) {
+    if ('WebSocket' in window) {
+        let url = '';
+        switch (configName) {
+            case 'domianURL': //接收后台模型数据
+                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+                // const userStore = useUserStore()
+                // const orgCode = userStore.userInfo?.orgCode;
+                // let userId = store.getters.userInfo.id;
+                let userId = userStore.userInfo?.id;
+                url = window._CONFIG[configName].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId;
+                // url = 'ws://127.0.0.1:5004'
+                websock[configName] = new WebSocket(url);
+                websock[configName].onopen = websocketonopen;
+                websock[configName].onerror = websocketonerror;
+                websock[configName].onmessage = websocketonmessage;
+                websock[configName].onclose = websocketclose;
+                break;
+            case 'clientURL': //调用客户端监控视频窗口
+                url = window._CONFIG['clientURL'];
+                websock[configName] = new WebSocket(url);
+                websock[configName].onopen = websocketonopen;
+                websock[configName].onerror = websocketonerror;
+                websock[configName].onclose = websocketclose;
+                break;
+            default:
+                console.log('websocket初始化失败');
+        }
+    } else {
+        console.log('当前浏览器不支持websocket，请更换浏览器！');
+    }
+}
+function websocketonopen(e) {
+    console.log('WebSocket连接成功');
+}
+function websocketonerror(e) {
+    console.log('WebSocket连接发生错误');
+}
+let loreadAlarmInfo = _.debounce(
+    (url, eventSerialNum) => {
+        defHttp
+            .get(
+                {
+                    url: url,
+                    params: eventSerialNum,
+                },
+                { isTransformResponse: false }
+            )
+            // getAction(url, {eventSerialNum: eventSerialNum})
+            .then((res) => {
+                if (!res.success) {
+                    console.log('重新发送websocket报警数据失败!');
+                } else {
+                    console.log('重新发送websocket报警数据成功!');
+                }
+            });
+    },
+    2000,
+    { maxWait: 3000, trailing: true }
+);
+async function websocketonmessage(e) {
+    //接收后端数据
+    var data = eval('(' + e.data + ')');
+    const cesium = window.Cesium;
+    // Cesium Math
+    const math = cesium.Math;
+    // earth
+    const earth = window.$earth;
+    //处理订阅信息
+    if (data.cmd == 'new_warn_info') {
+        //有新增的预警信息
+        //1.调起客户端窗体
+        // chrome.call("formactive");
+        //2.若警示界面打开着，则刷新列表
+        if ($('.infoList').css('visibility') == 'visible') {
+            $mitt.emit('getWarnData');
+        }
+        //3.弹出监控窗口或围栏信息
+        if (data.msgTxt != undefined && data.dealStatus == 1) {
+            $mitt.emit('listenerVideoNum', data.msgTxt);
+            //显示报警位置
+            window.$earth.sceneTree.$refs[data.labelCode].czmObject.color = [1, 0.09803921568627451, 0, 1];
+        } else if (data.msgTxt != undefined && data.dealStatus == 3) {
+            this.$notification.open({
+                key: 'fenceInfo',
+                message: '围栏信息通知',
+                description: data.msgTxt + '！',
+                duration: 0,
+            });
+        } else if (data.dealStatus == 2) {
+            //消除单个报警位置
+            window.$earth.sceneTree.$refs[data.labelCode].czmObject.color = [0.08235294117647059, 1, 0, 1];
+        } else if (data.dealStatus == 0) {
+            //消除所有报警位置
+            window.$earth.sceneTree.$refs.sensor.children.forEach((data, index) => {
+                data.czmObject.color = [0.08235294117647059, 1, 0, 1];
+            });
+        }
+
+        //4.提示音
+        if (data.dealStatus !== 2 && data.dealStatus !== 0) {
+            await audio.value.play();
+            setTimeout(() => {
+                audio.value.pause(); //N秒后暂停播放
+            }, data.alarmNum * 1000);
+        }
+    } else if (data.cmd == 'new_microwave_warn_info' || data.cmd == 'new_radar_warn_info' || data.cmd == 'new_video_warn_info') {
+        if (alarmInfoMap.has(data.serialNum)) {
+            return;
+        }
+        const evalString = `
+                if(p._div){
+                  return
+                }
+                let left=p.winPos[0];
+                let bottom=p.winPos[3];
+                const div = document.createElement('div');
+                div.style="position: absolute;left:"+left+"px;bottom:"+bottom+"px "
+                const img = document.createElement('img');
+                img.src="${alarmImg}";
+                img.style="width:60px;height:60px"
+                div.appendChild(img);
+                div.onclick=()=>{
+                  p.flyTo()
+                }
+                p._div = div;
+                const root=document.getElementById('earthContainer');
+                root.appendChild(div);
+                XE.MVVM.watch(p.winPos,() => {
+                  left=p.winPos[0]-30;
+                  bottom=p.winPos[3];
+                  div.style="position: absolute;left:"+left+"px;bottom:"+bottom+"px "
+              })
+          `;
+        const pinConfig: any = {
+            name: 'Pin1',
+            xbsjType: 'Pin',
+            position: [math.toRadians(data.lon), math.toRadians(data.lat), 0],
+            evalString: evalString,
+            // imageUrl: alarmImg,
+            isDivImage: true,
+            show: false,
+            far: 3000,
+        };
+        // scanline
+        const scanlineConfig: any = {
+            name: 'AlarmScanline',
+            xbsjType: 'Scanline',
+            position: [math.toRadians(data.lon), math.toRadians(data.lat), 0],
+            playing: true,
+            radius: 30,
+            timeDuration: 0.5,
+            color: [1, 0, 0, 1],
+            show: false,
+        };
+        const pin = new window.XE.Obj.Pin(window.$earth);
+        const scanline = new window.XE.Obj.Scanline(window.$earth);
+        //1、获取到世界坐标
+        let start = cesium.Cartesian3.fromDegrees(data.lon, data.lat, 0);
+        let height = await window.$earth.czm.viewer.scene.clampToHeightMostDetailed([start]).then(function (clampedCartesians) {
+            //2、获取到经纬高度
+            let ellipsoid = window.$earth.czm.viewer.scene.globe.ellipsoid;
+            let cartographic = ellipsoid.cartesianToCartographic(clampedCartesians[0]);
+            return cartographic.height;
+        });
+        if (height > 0) {
+            pinConfig.position[2] = height;
+        } else if (window.$earth.sceneTree.$refs.terrain.czmObject.show) {
+            height = await cesium.sampleTerrainMostDetailed(earth._viewer.terrainProvider, [start]).then((updatedPositions) => {
+                return updatedPositions[0].height ? updatedPositions[0].height : 0;
+            });
+            pinConfig.position[2] = height;
+        } else {
+            pinConfig.position[2] = 0;
+        }
+
+        // 保存报警类型到对象上
+        let customProp: any = {};
+        customProp.alarmType = data.cmd;
+        pinConfig.customProp = JSON.stringify(customProp);
+        scanlineConfig.customProp = JSON.stringify(customProp);
+        pin.xbsjFromJSON(pinConfig);
+        scanline.xbsjFromJSON(scanlineConfig);
+        // 判断现在相机的高度来显示报警相关模型
+        if (_earth.camera.position[2] < 100) {
+            // 隐藏 pin, 显示 scanline
+            pin._div.hidden = true;
+            scanline.show = true;
+        } else {
+            // 隐藏 scanline, 显示 pin
+            pin._div.hidden = false;
+            scanline.show = false;
+        }
+        scanline.flyTo();
+        alarmInfoMap.set(data.serialNum, { pin: pin, scanline: scanline, timestamp: Date.now() });
+        //报警弹窗
+        videoWindowProps.value.title = `实时报警窗口（${data.cameraName}）`;
+        videoWindowProps.value.videoUrl = data.cameraCode; //相机编码
+        videoWindowProps.value.isAlarm = true;
+        videoWindowProps.value.visible = true;
+        videoWindowProps.value.playRecord = false;
+
+        videoWindowProps.value.warnEvent.happenTime = data.happenTime;
+        videoWindowProps.value.warnEvent.happenLoc = `${Number(data.lon).toFixed(6)},${Number(data.lat).toFixed(6)}`;
+        videoWindowProps.value.warnEvent.warnNum = 1;
+        videoWindowProps.value.warnEvent.warnLevel = filterDictTextByCache('ms_warn_level', data.warnLevel);
+        videoWindowProps.value.warnEvent.warnType = filterDictTextByCache('ms_warn_type', data.warnType);
+        videoWindowProps.value.warnEvent.warnContent = data.warnContent;
+
+        //若警示界面打开着，则刷新列表
+        if ($('.infoList').css('visibility') == 'visible') {
+            $mitt.emit('getWarnData');
+        }
+
+        //提示音
+        await audio.value.play();
+        setTimeout(() => {
+            audio.value.pause(); //N秒后暂停播放
+        }, 3 * 1000);
+    } else if (data.cmd == 'earthMap_model_realtime_info') {
+        console.log(data);
+        console.log(radarAlarmDataMap);
+        // 雷达轨迹报警数据
+        const alarmContent = data.content;
+
+        if (radarAlarmDataMap.has(data.eventSerialNum)) {
+            // 存在雷达报警数据
+            let radarAlarmData = radarAlarmDataMap.get(data.eventSerialNum);
+            let targetMap = radarAlarmData.target;
+            if (targetMap.has(data.modelId)) {
+                // 存在目标数据
+                let targetData = targetMap.get(data.modelId);
+                let pathModel = targetData.path;
+                let groundImageModel = targetData.groundImage;
+                //更新目标数据
+                // 更新报警数据
+                let positionRadian = earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0);
+                // 更新路径
+                pathModel.positions.push(positionRadian);
+                groundImageModel.position = positionRadian;
+                if (pathModel.positions.length > 1) {
+                    pathModel.show = true;
+                    groundImageModel.show = true;
+                }
+            } else {
+                // 不存在目标数据
+                // 创建目标数据
+                let positionRadian = earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0);
+                // 路径
+                let pathModel = new window.XE.Obj.Path(window.$earth);
+                let pathConfig = {
+                    name: 'path',
+                    xbsjType: 'Path',
+                    positions: [positionRadian],
+                    loop: false,
+                    playing: true,
+                    width: 2,
+                    color: [1, 0, 0, 1],
+                    show: false,
+                    showDirection: false,
+                    currentSpeed: 30,
+                    alwaysAlongThePath: true,
+                    material: {
+                        type: 'Color',
+                        color: [1, 0, 0, 1],
+                    },
+                };
+                pathModel.xbsjFromJSON(pathConfig);
+                // 地面图片
+                let groundImageModel = new window.XE.Obj.GroundImage(window.$earth);
+                let imageUrls: any = [];
+                if (data.mainTarget) {
+                    imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point1.png');
+                    imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point2.png');
+                } else {
+                    imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point3.png');
+                    imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point4.png');
+                }
+                let groundImageConfig = {
+                    name: 'groundImage',
+                    xbsjType: 'GroundImage',
+                    position: positionRadian,
+                    width: 3,
+                    height: 3,
+                    playing: true,
+                    imageUrls: imageUrls,
+                    show: false,
+                };
+                groundImageModel.xbsjFromJSON(groundImageConfig);
+                // 保存目标数据
+                let targetData = {
+                    path: pathModel,
+                    groundImage: groundImageModel,
+                };
+                targetMap.set(data.modelId, targetData);
+            }
+            // 更新时间
+            const updateTime = Date.now();
+            radarAlarmData.timestamp = updateTime;
+            // 更新 pin 的时间
+            let alarm = alarmInfoMap.get(data.eventSerialNum);
+            if (alarm) {
+                alarm.timestamp = updateTime;
+            }
+        } else {
+            // 不存在报警数据
+            // 路径
+            let pathModel = new window.XE.Obj.Path(window.$earth);
+            let pathConfig = {
+                name: 'path',
+                xbsjType: 'Path',
+                positions: [earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0)],
+                loop: false,
+                playing: true,
+                width: 2,
+                color: [1, 0, 0, 1],
+                show: false,
+                showDirection: false,
+                currentSpeed: 30,
+                alwaysAlongThePath: true,
+                material: {
+                    type: 'Color',
+                    color: [1, 0, 0, 1],
+                },
+            };
+            // 地面图片
+            let groundImage = new window.XE.Obj.GroundImage(window.$earth);
+            let imageUrls: any = [];
+            if (data.mainTarget) {
+                imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point1.png');
+                imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point2.png');
+            } else {
+                imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point3.png');
+                imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point4.png');
+            }
+            let groundImageConfig = {
+                name: 'groundImage',
+                xbsjType: 'GroundImage',
+                playing: true,
+                width: 3,
+                height: 3,
+                position: earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0),
+                imageUrls: imageUrls,
+                show: false,
+            };
+            // 创建路径
+            groundImage.xbsjFromJSON(groundImageConfig);
+            // 创建地面图片
+            pathModel.xbsjFromJSON(pathConfig);
+
+            // 保存数据到map中
+            let target = {
+                path: pathModel,
+                groundImage: groundImage,
+                mainTarget: alarmContent.mainTarget,
+            };
+            let targetMap = new Map();
+            targetMap.set(data.modelId, target);
+            radarAlarmDataMap.set(data.eventSerialNum, {
+                target: targetMap,
+                timestamp: Date.now(),
+            });
+
+            if (!alarmInfoMap.has(data.eventSerialNum)) {
+                // 不存在告警信息(小灯或扫描线)时发送
+                // 事件编号到后台使其重新发送websocket报警数据
+                await new Promise((r) => setTimeout(r, 500));
+                if (!alarmInfoMap.has(data.eventSerialNum)) {
+                    console.log('发送websocket报警数据');
+                    loreadAlarmInfo(url.sendRadarAlarmByWebSocket, data.eventSerialNum);
+                }
+            }
+        }
+        if (videoWindowProps.value.visible) {
+            videoWindowProps.value.warnEvent.warnNum = radarAlarmDataMap.get(data.eventSerialNum).target.size;
+        }
+        // console.debug('雷达轨迹报警数据', radarAlarmDataMap);
+    } else if (data.cmd == '') {
+        earth.sceneTree.$refs[data.eventSerialNum].destroy();
+    } else if (data.cmd == 'eventPublish') {
+        window.getEventData();
+    }
+}
+function websocketclose(e) {
+    console.log('connection closed (' + e.code + ')');
+    createMessage.warn('websocket连接已断开', 3);
+}
+function websocketdosend(configName) {
+    //发送数据
+    spinning.value = !spinning.value; //加载状态
+    console.log('websock[configName]', websock[configName]);
+    let message = {
+        topic: 'Show_Single_Video',
+        msg: '192.168.1.65',
+    };
+    //readyState：0:正在连接中，1:已建立连接，2:连接正在关闭，3:连接已关闭或连接失败
+    if (websock[configName].readyState == 1) {
+        websock[configName].send(JSON.stringify(message));
+        spinning.value = !spinning.value; //加载状态
+        console.log('已发送');
+    } else {
+        //重新连接websocket
+        initWebSocket('clientURL');
+        setTimeout(function () {
+            if (websock[configName].readyState == 1) {
+                websock[configName].send(JSON.stringify(message));
+            }
+            spinning.value = !spinning.value; //加载状态
+        }, 3000);
+    }
+}
+/* websocket-end */
+
+
+function radarAlarmTimeOutCheck() {
+    const now = Date.now();
+    const timeout = 5 * 60 * 1000;
+    // 遍历报警数据
+    alarmInfoMap.forEach((value, key) => {
+        // 获取当前时间与报警时间的时间差
+        const timeDiff = now - value.timestamp;
+        // 如果时间差大于5分钟，则清除报警
+        if (timeDiff > timeout) {
+            // 清除报警，有雷达告警则清除雷达告警和雷达轨迹
+            clearAlarmModel(key);
+        }
+    });
+}
+function clearRadarAlarmModel(radarAlarmDataMap, eventNum) {
+    if (radarAlarmDataMap.has(eventNum)) {
+        let alarmData = radarAlarmDataMap.get(eventNum);
+        for (let target of alarmData.target) {
+            let pathModel = target.path;
+            let groundImageModel = target.groundImage;
+            // 销毁模型
+            pathModel && pathModel.destroy();
+            groundImageModel && groundImageModel.destroy();
+        }
+        radarAlarmDataMap.delete(eventNum);
+    }
+}
+function clearAlarmModel(eventNum) {
+    // let alarmInfoMapCopy = alarmInfoMap;
+    // let radarAlarmDataMapCopy = radarAlarmDataMap;
+    if (alarmInfoMap.has(eventNum)) {
+        let alarmData = alarmInfoMap.get(eventNum);
+        // 清除报警
+        alarmData.pin && alarmData.pin._div.remove();
+        alarmData.pin && alarmData.pin.destroy();
+        alarmData.scanline && alarmData.scanline.destroy();
+        alarmInfoMap.delete(eventNum);
+    }
+    clearRadarAlarmModel(radarAlarmDataMap, eventNum);
+}
+
+
+// 根据经纬度获取高度
+async function getHeigthByLonLat(lon = 88.8296258, lat = 27.4061859) {
+    var positions = [window.Cesium.Cartographic.fromDegrees(lon, lat)];
+    // var promise = Cesium.sampleTerrain(this._viewer.terrainProvider, 13, positions);
+    var promise = window.Cesium.sampleTerrainMostDetailed(_viewer.terrainProvider, positions);
+    return new Promise((resolve, reject) => {
+        window.Cesium.when(promise, function (updatedPositions) {
+            // updatedPositions[0].height ? updatedPositions[0].height : 0;
+            resolve(updatedPositions);
+        });
+    });
+    /* var terCartographic = new Cesium.Cartographic(1.5503694435245020004000376611976, 0.47832817936864542131039019315313, 0)
+    var terHigh = this._viewer.scene.globe.getHeight(terCartographic);
+    return terHigh; */
+}
+
+function cloneModel(modelObject: any) {
+    if (modelObject.czmObject.xbsjType === 'Model') {
+        const modelConfig = {
+            ref: '',
+            name: modelObject.name,
+            czmObject: {
+                name: modelObject.czmObject.name,
+                xbsjType: modelObject.czmObject.xbsjType,
+                url: modelObject.czmObject.url,
+                // "color": [0.52, 0.6, 0.58, 1],
+                minimumPixelSize: modelObject.czmObject.minimumPixelSize,
+                // maximumScale: 0.02,
+                scale: modelObject.czmObject.scale,
+                xbsjScale: [...modelObject.czmObject.xbsjScale],
+                xbsjPosition: [...modelObject.czmObject.xbsjPosition],
+                xbsjRotation: [...modelObject.czmObject.xbsjRotation],
+                viewDistance: 150,
+                distanceDisplayCondition: [1.0, 30000.0],
+            },
+        };
+        const index = modelObject.parent.children.push(modelConfig);
+        return index;
+        // const model = new window.XE.Obj.Model(window.$earth)
+        // model.xbsjFromJSON(modelConfig)
+        // const leaf = new window.XE.SceneTree.Leaf(model)
+        // window.$earth.sceneTree.root.push(leaf)
+    } else {
+        const objConfig3 = {
+            ref: '',
+            name: modelObject.name,
+            czmObject: {
+                customProp: modelObject.czmObject.customProp,
+                name: modelObject.czmObject.name,
+                xbsjType: modelObject.czmObject.xbsjType,
+                imageUrl: modelObject.czmObject.imageUrl,
+                position: [...modelObject.czmObject.position],
+                scale: modelObject.czmObject.scale,
+                pinBuilder: {
+                    extText: modelObject.czmObject.pinBuilder.extText,
+                    extTextFont: '30px 楷体',
+                    extTextPixelOffset: [30, -20],
+                    fillColor: [1, 1, 1, 0.9],
+                    outlineColor: [0, 0, 0, 0.9],
+                },
+                far: 1073741824,
+            },
+        };
+        const index = modelObject.parent.children.push(objConfig3);
+        return index;
+    }
+
+    // return model
+}
+function cloneShamNode(oldRef, id, title) {
+    const shamNode = window.$earth.sceneTree.$refs['node_' + oldRef];
+    const newShamNode = {
+        ref: 'node_' + id,
+        title: title,
+        expand: false,
+        children: [],
+    };
+    // that.currentModel = response.result
+    shamNode.parent.children.push(newShamNode);
+}
+function getAreaCode(item) {
+    const currentRef = item._inner.sn.ref;
+    if (!areaByNodeId.has(currentRef)) {
+        if (item.parent) {
+            return getAreaCode(item.parent);
+        }
+    } else {
+        return areaByNodeId.get(currentRef);
+    }
+}
+
+function setAllLabelStatus(selectRef, item, wbUnifiedResponse) {
+    //监控点
+    if (selectRef.startsWith('monitor')) {
+        let grandsons: any = [];
+        const childs = item.children;
+        for (const child of childs) {
+            const grandson1 = child.children;
+            if (grandson1 && grandson1.length > 0) {
+                grandsons = grandsons.concat(grandson1);
+            }
+        }
+        for (const grandson of grandsons) {
+            const xbsjObject = grandson._inner.sn;
+            const ref = xbsjObject.ref;
+            if (ref.startsWith('camera_')) {
+                const state = statusByNodeId.get(ref);
+                if (state == 1) {
+                    statusByNodeId.set(ref, 0);
+                    const img = imgByRef.get(ref);
+                    img.src = require('@/assets/earthMap/circleDot1.png');
+                } else if (state == 0) {
+                    statusByNodeId.set(ref, 1);
+                    const img = imgByRef.get(ref);
+                    img.src = require('@/assets/earthMap/circleDot1.png');
+                }
+            }
+        }
+    }
+    //微波
+    else if (selectRef.startsWith('wbList')) {
+        const parentNode = item.parent;
+        let areaCode = null;
+        if (parentNode) {
+            const falseNodeRef = item.parent._inner.sn.ref;
+            const nodeRef = falseNodeRef.split('_')[1];
+            const trueNode = window.$earth.sceneTree.$refs[nodeRef];
+            areaCode = trueNode.czmObject.customProp;
+        }
+        const childs1 = item.children;
+        if (!childs1 || childs1.length < 0) {
+            return;
+        }
+        const length = childs1.length;
+        let index = -1;
+        for (const child of childs1) {
+            index++;
+            let xbsjObject = child._inner.sn;
+            let jsonObj = JSON.parse(xbsjObject.czmObject.customProp);
+            let deviceId = jsonObj.deviceId;
+            let device = hostDeviceMapById.get(deviceId);
+            if (!device) {
+                console.error('主机设备为null');
+                continue;
+            }
+            const args = {
+                device: device,
+                isDefence: wbUnifiedResponse,
+                defenceArea: areaCode,
+                detectorList: null,
+            };
+            defHttp
+                .post(
+                    {
+                        url: url.setDefenseArea,
+                        params: args,
+                    }, { isTransformResponse: false }
+                )
+                .then((response) => {
+                    if (!response.success) {
+                        return;
+                    } else {
+                        for (let i = index; i < length; i++) {
+                            const child1 = childs1[i];
+                            const xbsjObject1 = child1._inner.sn;
+                            const ref1 = xbsjObject1.ref;
+                            if (ref1 && ref1.length > 0) {
+                                const state1 = statusByNodeId.get(ref1);
+                                if (state1 == 0 && wbUnifiedResponse) {
+                                    statusByNodeId.set(ref1, 1);
+                                    const img1 = imgByRef.get(ref1);
+                                    if (!img1) return;
+                                    img1.src = require('@/assets/earthMap/circleDot2.png');
+                                } else if (state1 == 1 && !wbUnifiedResponse) {
+                                    statusByNodeId.set(ref1, 0);
+                                    const img1 = imgByRef.get(ref1);
+                                    if (!img1) return;
+                                    img1.src = require('@/assets/earthMap/circleDot1.png');
+                                }
+                            }
+                        }
+                    }
+                    console.log(response);
+                });
+            break;
+        }
+    } else if (selectRef.startsWith('nodeSecondary')) {
+        const childs1 = item.children;
+        if (!childs1 || childs1.length < 0) {
+            return;
+        }
+        for (const child of childs1) {
+            let xbsjObject = child._inner.sn;
+            let jsonObj = JSON.parse(xbsjObject.czmObject.customProp);
+            let deviceId = jsonObj.deviceId;
+            let device = hostDeviceMapById.get(deviceId);
+            if (!device) {
+                console.error('主机设备为null');
+                continue;
+            }
+            let regionIdList: any = [];
+            if (item.children.length > 0) {
+                item.children.forEach((element) => {
+                    regionIdList.push(element._inner.sn.ref);
+                });
+            }
+            const args = {
+                regionIdList: regionIdList, // 周界防区区域ID列表（雷达设备列表的ID）
+                regionStatus: wbUnifiedResponse ? 1 : 0, // 布防状态 0 - 未布防 1 - 布防
+                defenceRule: {
+                    // 布防规则
+                    startTime: 'yyyy-MM-dd HH:mm:ss', // 布防开始时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss"
+                    endTime: 'yyyy-MM-dd HH:mm:ss', // 布防结束时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss"
+                    dailyCycle: true, // 每日循环布防 true - 是 false - 否
+                },
+            };
+            // putAction(this.url.perimeterControl,{})
+            console.log(device, statusByNodeId, xbsjObject);
+            let ref1 = xbsjObject.ref;
+            let state1 = statusByNodeId.get(ref1);
+            //一键布防撤防测试使用
+            if (wbUnifiedResponse) {
+                state1 = 0;
+            } else {
+                state1 = 1;
+            }
+            if (state1 == 0 && wbUnifiedResponse) {
+                statusByNodeId.set(ref1, 1);
+                const img1 = imgByRef.get(ref1);
+                if (!img1) return;
+                img1.src = require('@/assets/earthMap/circleDot2.png');
+            } else if (state1 == 1 && !wbUnifiedResponse) {
+                statusByNodeId.set(ref1, 0);
+                const img1 = imgByRef.get(ref1);
+                if (!img1) return;
+                console.log(img1);
+                img1.src = require('@/assets/earthMap/circleDot1.png');
+            }
+            //   break
+        }
+    }
+}
+
+
+
+// 资源销毁
+onBeforeUnmount(() => {
+    // vue程序销毁时，需要清理相关资源
+    _earth = _earth && _earth.destroy();
+    websocketclose(null);
+    //清除定时器
+    clearInterval(timer);
+    clearInterval(timer2);
+    clearInterval(alarmTrackClearTimer);
+}) 
+</script>
+
diff --git a/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue b/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
index 6505bbf..e990941 100644
--- a/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
+++ b/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue
@@ -119,13 +119,13 @@
       title="拾取中心坐标和相机数据" 
       :visible="mapVisible" 
       @ok="handleOk" 
-      @cancel="()=> mapVisible = false" 
+      @cancel="destroyed" 
       width="60vw" 
-      :destroyOnClose="true"
+      destroyOnClose
       wrapClassName="EarthMap">
-    <a-row>
+    <a-row style="height: 60vh;">
       <a-col :span="24">
-        <EarthComp />
+        <EarthComp ref="earth"/>
       </a-col>
     </a-row>
 
@@ -135,13 +135,26 @@
   </div>
 </template>
 <script setup>
-import { toRefs, ref, watch, computed, onMounted } from 'vue';
+import { toRefs, ref, watch, computed, onMounted, nextTick } from 'vue';
 import locationPng from '@/assets/images/getLocation.png';
 import EarthMapModal from '../MapModel/EarthMapModal.vue';
 import { defHttp } from '@/utils/http/axios';
 import { message } from 'ant-design-vue';
 import { EditOutlined } from '@ant-design/icons-vue';
 import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
+// import EarthComp from '@/views/earthMap/edit/EarthCompTest.vue';
+
+const earth = ref()
+function destroyed() {
+  console.log("earth",earth.value);
+  earth.value.destroy();
+  nextTick(()=>{
+    mapVisible.value = false
+  })
+  
+}
+
+
 
 // 新增场景
 const addScene = (params) => {