dt-admin-pc-v2/src/views/earthMap/edit/EarthComp.vue

<!-- 
    电子地图    
    -编辑页面
 -->
<template>
  <div>
    <div id="earthContainer" ref="earthContainer" style="width: 100%; height: 100%; top: 300px"></div>
    <div class="earthUI_header" v-if="PropsEarthHeaderShow">
      <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>
    <!-- AIS信息显示窗口 -->
    <AISInfoWindow v-if="AISInfoWindowShow"></AISInfoWindow>
  </div>
</template>

<script lang="ts">
  import { Options, Vue } from 'vue-class-component';
  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 AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue';
  import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue';
  import { getRealTime } from '@/utils/date';
  import $mitt from '@/utils/earthMap/mitt';
  import { drawInit } from '@/utils/earthMap/earthDraw';
  import { guid } from '@/utils/earthMap/guid';
  import HandleNodeType from '@/utils/earthMap/handleNodeType';
  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 { CircleScan }  from '@/utils/earthMap/radarEntity'
  import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'

  import circleDot2 from '@/assets/earthMap/circleDot2.png';
  import circleDot1 from '@/assets/earthMap/circleDot1.png';
  import circleDot3 from '@/assets/earthMap/circleDot3.png';

 
  const { createMessage } = useMessage();
  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);
  }

  @Options({
    components: {
      Toolbar,
      VideoSplitScreen,
      VideoWindow,
      WarnInfoList,
      AddModelWin,
      AddRoamVideo,
      VideoFusionWin,
      AISInfoDetail,
      AISInfoWindow,
    },
    props: {
    //全部显示
    all: {
      type: Boolean,
      default: false
    },
    //头部显示
    earthHeaderShow: {
      type: Boolean,
      default: false
    },
    //图层显示
    sceneTreeShow:{
      type: Boolean,
      default: false
    },
    //状态栏
    statusBarShow:{
      type: Boolean,
      default: true
    },
    //主工具栏
    mainBar:{
      type: Boolean,
      default: false
    },
    //监听事件
    listenMouseHandlerOpen:{
      type: Boolean,
      default: false
    },
    //监听mitt
    listenMittHandlerOpen:{
      type: Boolean,
      default: false
    },
    //地图路线资源
    createBBHLineOpen:{
      type: Boolean,
      default: false
    },
    //加载区域
    getLineInfoShow:{
      type: Boolean,
      default: false
    },
    //加载站点
    getCameraInfoShow:{
      type: Boolean,
      default: false
    },
    //加载微波和雷达
    getLabelInfoShow:{
      type: Boolean,
      default: false
    },
    //加载绘图
    drawInitShow:{
      type: Boolean,
      default: false
    },
    //加载重点监控区域
    keyControlInitShow:{
      type: Boolean,
      default: false
    },
},
  })
  export default class EarthComp extends Vue {
    /**
     * 资源创建
     */
    userStore = useUserStore();
    store = useEarthMapStore();

    earthTitle = '态势监控一张图';
    realTime = '……';
    // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
    _earth = undefined;
    _earthUI = undefined;
    _viewer = undefined;
    _pin = undefined;
    _handler = undefined;
    //  sceneTree= require('@/assets/earthMap/resjson/sc.json'),
    //   sceneTree= new URL(`@/assets/earthMap/resjson/sc.json`, import.meta.url).href,
    sceneTree: any = sceneTree;
    // areaB= require('@/assets/earthMap/resjson/area_b.json'),
    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',
    };
    cameraData: any = {};
    cameraModalShow = false;
    poiModalShow = false;
    radioBtnShow = true;
    glmId: any = [];
    spinning = false;
    earthChangeSpin = false;
    websock: any = [];
    timer: any = null; // 保活定时器
    timer2: any = null; // 时间定时器
    // 报警清除-定时器
    alarmTrackClearTimer: any = null;
    videoWindowProps: any = {
      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 旧值
    sceneTreeOldRefValue = '';
    sceneInfo: any = null;
    // 区域节点By Ref划分
    nodeConfigByRef = new Map();
    nodeCheckedByRef = new Map();
    areaByNodeId = new Map();
    statusByNodeId = new Map();
    imgByRef = new Map();
    radarAlarmDataMap = new Map();
    wbUnifiedResponse = false;
    hostDeviceMapById = new Map();
    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;

    // 控制窗口显示
    VideoFusionWinShow = false;
    //传到子组件的值
    toItemObj: any = {
      updateModel: {},
      isUpdate: true,
      userSave: {},
    };
    // 节点值
    domKey: any = '';
    // 监控相机列表
    cameraList: any = [];
    // 监控相机位置
    monitorPosition: any = [];

    //处理props  由于从父组件传来props，为作区分其他变量，则采用首字母大写命名
    PropsEarthHeaderShow = this.earthHeaderShow
    PropsSceneTreeShow = this.sceneTreeShow
    PropsListenMouseHandlerOpen = this.listenMouseHandlerOpen
    PropsListenMittHandlerOpen = this.listenMittHandlerOpen
    PropsCreateBBHLineOpen = this.createBBHLineOpen
    PropsGetLineInfoShow = this.getLineInfoShow
    PropsGetCameraInfoShow = this.getCameraInfoShow
    PropsGetLabelInfoShow = this.getLabelInfoShow
    PropsDrawInitShow = this.drawInitShow
    PropsKeyControlInitShow = this.keyControlInitShow
    ///////////////////////////////////////////////////////////////////////////
    //AIS信息窗口显示
    AISInfoWindowShow = false;
    ship_guid = '123456';

    mounted() {
      let that = this;
      //随机数
      window.guid = guid;
      //创建地球资源
      this.createEarth();
      //获取实时日期时间
      this.getRealTime();
      //初始化websocket
      //  this.initWebSocket('domianURL')
      //阻止浏览器右键事件
      document.oncontextmenu = function (e) {
        return false;
      };

      {
        //将回调延迟到下次 DOM 更新循环之后执行（针对由jq动态增加的元素绑定事件）
        this.$nextTick(() => {
          {
            //监控点击事件
            $('.cameraModal').on('click', '.openIframe', function (e: any) {
              // web插件播放视频流
              let videoWindowProps = that.videoWindowProps;
              videoWindowProps.id = $(this).attr('id');
              videoWindowProps.title = $(this).text();
              videoWindowProps.videoUrl = $(this).attr('videoUrl');
              videoWindowProps.cameraIp = $(this).attr('cameraIP');
              videoWindowProps.cameraUser = $(this).attr('cameraUser');
              videoWindowProps.cameraPwd = $(this).attr('cameraPsd');
              videoWindowProps.isAlarm = false;
              videoWindowProps.visible = true;
              videoWindowProps.playRecord = false;
            });
          }
          // 轮询
          {
            //一个小时调用一次空接口，保持系统session不过期
            this.timer = setInterval(() => {
              this.keepAlive();
            }, 60 * 60 * 1000);

            this.alarmTrackClearTimer = setInterval(() => {
              this.radarAlarmTimeOutCheck();
            }, 6 * 1000);
          }
        });
      }
    }
    
    // 打开视频融合
    roamPathSet() {
      // 打开视频融合
      this.VideoFusionWinShow = true;
      // 关闭相机列表
      this.cameraModalShow = false;
    }

    // 控制子元素的显示或者隐藏
    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;
              }
            }
            this.nodeCheckedByRef.set(ref, parentChecked);
            this.showOrHideChild(child, earthUI, parentChecked);
          }
        }
      }
    }
    // 告警模型显示/隐藏
    showAlarmPin(show) {
      this.alarmInfoMap.forEach((item, _index) => {
        item.pin.show = show;
        item.pin._div.hidden = !show;
        item.scanline.show = !show;
      });
    }
    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 }
    );

    createEarth() {
      let that = this;
      //使用store存储XbsjEarthUI
      this.store.xbsjEarthUI = XbsjEarthUI;
    //处理props
    if(this.all){
      this.PropsEarthHeaderShow = true
      this.PropsSceneTreeShow = true
      this.PropsListenMouseHandlerOpen = true
      this.PropsListenMittHandlerOpen = true
      this.PropsCreateBBHLineOpen = true
      this.PropsGetLineInfoShow = true
      this.PropsGetCameraInfoShow = true
      this.PropsGetLabelInfoShow = true
      this.PropsDrawInitShow = true
      this.PropsKeyControlInitShow = true
     }
      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 = this.PropsSceneTreeShow;
        // 设置图层管理 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)

      //监听鼠标事件
      if (this.PropsListenMouseHandlerOpen)
        this.listenMouseHandler(earthUI);

      //监听mitt
      if (this.PropsListenMittHandlerOpen)
        this.listenMittHandler(earthUI);

      // 飞入方法
      await this.fly();

      //加载地图线路资源
      if (this.PropsCreateBBHLineOpen)
        await this.createBBHLine(earthUI);

        //创建工具栏
        this.toolbarShow = true;
      });
    }
    //飞入方法
    async fly() {
      let position, rotation, viewDistance, duration;
      const sceneId = this.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);
          // 设置岛屿信息为数组
          this.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;
          this._earth.camera.flyTo(position, viewDistance, rotation, duration);
          // 地图复原事件
          window.$flyTo = this.flyTo = () => {
            this._earth.camera.flyTo(position, viewDistance, rotation, duration);
          };
        });
    }

    setLoginPoint(data) {
      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 = () => {
        this._viewer._container.style.cursor = 'pointer';
      };
      pin.onmouseout = () => {
        this._viewer._container.style.cursor = 'default';
      };
      pin.onclick = function () {
        this._earth.camera.flyTo(position, viewDistance, rotation, duration);
      };
    }

    //设置按钮颜色状态
    setIconByRef(ref, el) {
      const status = this.statusByNodeId.get(ref);
      if (status != undefined && status != null) {
        let img = this.imgByRef.get(ref);
        const icon = el.children[0].children[2];
        if (!img) {
          img = document.createElement('img');
          this.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');
      }
    }

    /* 使用async/await 处理异步方法顺序执行。成功的操作放到try里，失败的放在catch里 */
    async createBBHLine(earthUI = null) {
      console.log('MyScene', this.userStore.userInfo?.sceneId);
      let labelItems: any = undefined
      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("加载区域");
      if (this.PropsGetLineInfoShow)
        await this.getLineInfo(models, type);

      // 加载站点
      // console.log("加载站点");
      if (this.PropsGetCameraInfoShow)
        await this.getCameraInfo(models, type);

      // 加载雷达和微波
      // console.log("加载雷达和微波");
      if (this.PropsGetLabelInfoShow)
        labelItems = await this.getLabelInfo(models, type);

       //加载绘画资源
    if (this.PropsDrawInitShow)
      await drawInit();

      //加载重点监控区域
    if (this.PropsKeyControlInitShow)
      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);
            }
          });
      });
    }
    //加载相机
    getCameraInfo(models, type) {
      return new Promise((resolve, reject) => {
        //请求电线杆信息
        defHttp.get({ url: this.url.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => {
          if (res.success) {
            // console.log("res",res);
            this.setCamera(res.result, models, type);
            this.cameraData = res.result;
            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);
        }
      }
    }

    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;
                this.statusByNodeId.set(id, status);
              } else {
                this.statusByNodeId.set(id, -10);
              }
              return response;
            })
            .catch((error) => {
              // console.log('error',error);
              this.statusByNodeId.set(id, -10);
              return error;
            })
        );
      } else if (device.deviceType_dictText.indexOf('雷达') > -1) {
        this.statusByNodeId.set(id, 1);
        //雷达周界防区列表
        return defHttp
          .get({ url: this.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 {
                this.statusByNodeId.set(id, 1);
              }
              return res;
            },
            (err) => {
              this.statusByNodeId.set(id, 1);
              return err;
            }
          )
          .catch((err) => {
            this.statusByNodeId.set(id, 1);
            return err;
          });
      }
    }

    getAllModelInfo(models) {
      return new Promise((resolve, reject) => {
        //模型位置

        defHttp.get({ url: this.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);
                  /* // 显示当前坐标
                    pinConfig = {
                      "ref": "pin_" + data.eventSerialNum,
                      "czmObject": {
                        "xbsjType": "Pin",
                        "name": "当前位置",
                        "position": earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height),
                        "evalString": "const width = 430;\nconst height = 70;\nfunction createLabelCanvas(p) {\n  if (p._labelDiv) {\n    p._earth.czm.viewer.container.removeChild(p._labelDiv);\n    p._labelDiv = undefined;\n  }\n  const labelDiv = document.createElement('div');\n  labelDiv.style = 'width:'+width+'px;height: '+height+'px;position: absolute; pointer-events: none;'\n\n  p._earth.czm.viewer.container.appendChild(labelDiv);\n  p._labelDiv = labelDiv;\n\n  var dis = XE.MVVM.watch(() => {\n    labelDiv.style.display = p.enabled ? 'block' : 'none';\n  });\n\n  p.disposers.push(() => {\n    if (p._labelDiv) {\n      p._earth.czm.viewer.container.removeChild(p._labelDiv);\n      p._labelDiv = undefined;\n    }\n    dis();\n  });\n\n  const labelCanvas = document.createElement('canvas');\n  labelCanvas.style = 'width: 100%;height: 100%;';\n\n  labelCanvas.width = width;\n  labelCanvas.height = height;\n  labelDiv.appendChild(labelCanvas);\n  return labelCanvas;\n}\n\nfunction createDrawFunc(p) {\n  const labelCanvas = createLabelCanvas(p);\n  const ctx = labelCanvas.getContext('2d');\n\n  function draw(w) {\n    ctx.clearRect(0, 0, width, height);\n\n    ctx.save();\n    ctx.lineWidth = 2;\n    ctx.strokeStyle = 'rgb(31, 255,255)';\n    ctx.beginPath();\n    ctx.moveTo(width, height);\n    ctx.lineTo(width-height, 22);\n    ctx.lineTo(0, 22);\n    ctx.stroke();\n    ctx.restore();\n    ctx.font = \"15px console\"; \n    ctx.fillStyle = 'rgb(255, 255, 0)';\n    ctx.fillText('" +
                          "经度：" + data.lon + "/" + "纬度：" + data.lat + "/" + "高度：" + data.height + "', 0, 20);\n    ctx.restore();\n  }\n\n  p._dDraw = draw;\n}\n\ncreateDrawFunc(p);\n\nlet d = 0;\nlet c = 0;\np._dDraw(c);\nconst preUpdateListener = p._earth.czm.scene.preUpdate.addEventListener(() => {\n  if (d !== c) {\n    c += (d - c) * 0.1;\n    if (Math.abs(c - d) < 0.1) {\n      c = d;\n    }\n    p._dDraw(c);\n  }\n});\np.disposers.push(() => preUpdateListener && preUpdateListener());\n\nconst container = p._earth.czm.viewer.container;\nconst unwatch = XE.MVVM.watch(() => [...p.winPos], winPos => {\n  if (p._labelDiv) {\n    p._labelDiv.style.left = (winPos[0] -  p._labelDiv.clientWidth) + 'px';\n    p._labelDiv.style.bottom = winPos[3]+'px';\n  } \n});\np.disposers.push(() => {\n  unwatch && unwatch();\n});",
                        "isDivImage": true,
                        "pinBuilder": {},
                        "far": 25000
                      }
                    };
                    childrenConfig.children.push(pinConfig); */
                  //加入树
                  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);
          }
        });
      });
    }

    getPatrolRouteInfo(models) {
      return new Promise((resolve, reject) => {
        //执勤巡逻路线
        defHttp.get({ url: this.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);
          }
        });
      });
    }

    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);
          console.log('点击的船只:', pickedFeature);

          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.xbsjType && pickedFeature.id.name.includes('船') && pickedFeature.id.xbsjType === 'Model') {
              this.AISInfoWindowShow = true;
              // 赋值船只场景id
              this.ship_guid = pickedFeature.id.guid;
            }
            //雷达扫描范围
            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;
          }
        }, 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 {
                          createMessage.error('修改失败', 2);
                          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) => {
                          createMessage.success('编辑成功', 2);
                        })
                        .catch((response) => {
                          createMessage.error('编辑失败', 2);
                        });
                    };
                  });
                },
              },
              {
                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 {
                          createMessage.error('删除失败', 2);
                          console.error('删除失败', response);
                        }
                      })
                      .catch((res) => {
                        console.error('错误', res);
                      });
                  });
                },
              },
            ]);
          }
        }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件
      }
      /* picked事件 */
      {
        /* let canvasbox = this._viewer.canvas, pickPosition = {}, cameraModal = this.$refs.cameraModal;//操作cameraModal组件
          canvasbox.onclick = e => {
            pickPosition.x = e.offsetX;
            pickPosition.y = e.offsetY;
            var picked = this._viewer.scene.pick(pickPosition);
            console.log("picked", picked);
            if (picked !== undefined && picked.id !== undefined) {
              console.log(e)
            } else {
              that.cameraModalShow = false;
            }
          } */
      }
    }

    listenMittHandler(earthUI = null) {
      let that = this;
      {
        $mitt.on('winShow', function (e: any) {
          that.VideoFusionWinShow = e;
        });
        //其他页面调用本页面的methods方法
        $mitt.on('listenMouseHandler', function () {
          that.listenMouseHandler();
        });
        $mitt.on('removeHandler', function () {
          that.removeHandler();
        });
        $mitt.on('createBBHLine', function () {
          that.createBBHLine();
        });
        $mitt.on('createRealTimeObj', function () {
          that.createRealTimeObj();
        });
        $mitt.on('radioChangeBtnShow', function (callback) {
          that.radioChangeBtnShow(callback);
        });
        $mitt.on('loadingStatus', function () {
          that.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) {
                  this.clearAlarmModel(warnEventInfo.eventSerialNum);
                }
              } else {
                // 失败
                console.log('失败');
                createMessage.error(res.message);
              }
            });
          } else {
            // 不是告警事件,直接清除
            this.clearAlarmModel(eventSerialNum);
          }
        });
        // 监听mqtt消息
        $mitt.on('deviceCmd', (message: any) => {
          drawAllShips(message);
        });
      }
    }

    removeHandler() {
      this._handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE); //移除鼠标事件
      this._handler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除鼠标事件
    }

    radioChange(e) {
      this.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;
      }
    }

    radioChangeBtnShow(callback) {
      this.radioBtnShow = !this.radioBtnShow;
      callback(this.radioBtnShow); //回调返回当前状态
    }

    loadingStatus() {
      this.earthChangeSpin = !this.earthChangeSpin; //加载状态
      setTimeout(() => {
        this.earthChangeSpin = !this.earthChangeSpin; //3秒后去除加载状态
      }, 3000);
    }

    keepAlive() {
      defHttp.get({ url: this.url.keepAlive }, { isTransformResponse: false }).then((res) => {});
    }

    closeClient() {
      chrome.call('close');
    }

    /* websocket-start */
    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 = this.userStore.userInfo?.id;
            url = window._CONFIG[configName].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId;
            // url = 'ws://127.0.0.1:5004'
            this.websock[configName] = new WebSocket(url);
            this.websock[configName].onopen = this.websocketonopen;
            this.websock[configName].onerror = this.websocketonerror;
            this.websock[configName].onmessage = this.websocketonmessage;
            this.websock[configName].onclose = this.websocketclose;
            break;
          case 'clientURL': //调用客户端监控视频窗口
            url = window._CONFIG['clientURL'];
            this.websock[configName] = new WebSocket(url);
            this.websock[configName].onopen = this.websocketonopen;
            this.websock[configName].onerror = this.websocketonerror;
            this.websock[configName].onclose = this.websocketclose;
            break;
          default:
            console.log('websocket初始化失败');
        }
        // console.log('url', url)
      } else {
        console.log('当前浏览器不支持websocket，请更换浏览器！');
      }
    }
    websocketonopen(e) {
      console.log('WebSocket连接成功');
    }
    websocketonerror(e) {
      console.log('WebSocket连接发生错误');
    }
    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 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 this.$refs.audio.play();
          setTimeout(() => {
            this.$refs.audio.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 (this.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 = {
          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 = {
          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 = {};
        customProp.alarmType = data.cmd;
        pinConfig.customProp = JSON.stringify(customProp);
        scanlineConfig.customProp = JSON.stringify(customProp);
        pin.xbsjFromJSON(pinConfig);
        scanline.xbsjFromJSON(scanlineConfig);
        // 判断现在相机的高度来显示报警相关模型
        if (this._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();
        this.alarmInfoMap.set(data.serialNum, { pin: pin, scanline: scanline, timestamp: Date.now() });
        //报警弹窗
        this.videoWindowProps.title = `实时报警窗口（${data.cameraName}）`;
        this.videoWindowProps.videoUrl = data.cameraCode; //相机编码
        this.videoWindowProps.isAlarm = true;
        this.videoWindowProps.visible = true;
        this.videoWindowProps.playRecord = false;

        this.videoWindowProps.warnEvent.happenTime = data.happenTime;
        this.videoWindowProps.warnEvent.happenLoc = `${Number(data.lon).toFixed(6)},${Number(data.lat).toFixed(6)}`;
        this.videoWindowProps.warnEvent.warnNum = 1;
        this.videoWindowProps.warnEvent.warnLevel = filterDictTextByCache('ms_warn_level', data.warnLevel);
        this.videoWindowProps.warnEvent.warnType = filterDictTextByCache('ms_warn_type', data.warnType);
        this.videoWindowProps.warnEvent.warnContent = data.warnContent;

        //若警示界面打开着，则刷新列表
        if ($('.infoList').css('visibility') == 'visible') {
          $mitt.emit('getWarnData');
        }

        //提示音
        await this.$refs.audio.play();
        setTimeout(() => {
          this.$refs.audio.pause(); //N秒后暂停播放
        }, 3 * 1000);
      } else if (data.cmd == 'earthMap_model_realtime_info') {
        console.log(data);
        console.log(this.radarAlarmDataMap);
        // 雷达轨迹报警数据
        const alarmContent = data.content;

        if (this.radarAlarmDataMap.has(data.eventSerialNum)) {
          // 存在雷达报警数据
          let radarAlarmData = this.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 = this.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);
          this.radarAlarmDataMap.set(data.eventSerialNum, {
            target: targetMap,
            timestamp: Date.now(),
          });

          if (!this.alarmInfoMap.has(data.eventSerialNum)) {
            // 不存在告警信息(小灯或扫描线)时发送
            // 事件编号到后台使其重新发送websocket报警数据
            await new Promise((r) => setTimeout(r, 500));
            if (!this.alarmInfoMap.has(data.eventSerialNum)) {
              console.log('发送websocket报警数据');
              this.loreadAlarmInfo(this.url.sendRadarAlarmByWebSocket, data.eventSerialNum);
            }
          }
        }
        if (this.videoWindowProps.visible) {
          this.videoWindowProps.warnEvent.warnNum = this.radarAlarmDataMap.get(data.eventSerialNum).target.size;
        }
        // console.debug('雷达轨迹报警数据', this.radarAlarmDataMap);
      } else if (data.cmd == '') {
        earth.sceneTree.$refs[data.eventSerialNum].destroy();
      } else if (data.cmd == 'eventPublish') {
        window.getEventData();
      }
    }
    websocketclose(e) {
      console.log('connection closed (' + e.code + ')');
      createMessage.warn('websocket连接已断开', 3);
    }
    websocketdosend(configName) {
      //发送数据
      this.spinning = !this.spinning; //加载状态
      console.log('this.websock[configName]', this.websock[configName]);
      let that = this;
      let message = {
        topic: 'Show_Single_Video',
        msg: '192.168.1.65',
      };
      //readyState：0:正在连接中，1:已建立连接，2:连接正在关闭，3:连接已关闭或连接失败
      if (that.websock[configName].readyState == 1) {
        that.websock[configName].send(JSON.stringify(message));
        that.spinning = !that.spinning; //加载状态
        console.log('已发送');
      } else {
        //重新连接websocket
        this.initWebSocket('clientURL');
        setTimeout(function () {
          if (that.websock[configName].readyState == 1) {
            that.websock[configName].send(JSON.stringify(message));
          }
          that.spinning = !that.spinning; //加载状态
        }, 3000);
      }
    }
    /* websocket-end */
    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);
    }
    // 根据经纬度获取高度
    async 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(this._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; */
    }
    cloneModel(modelObject) {
      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
    }
    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);
    }
    getAreaCode(item) {
      const currentRef = item._inner.sn.ref;
      if (!this.areaByNodeId.has(currentRef)) {
        if (item.parent) {
          return this.getAreaCode(item.parent);
        }
      } else {
        return this.areaByNodeId.get(currentRef);
      }
    }
    setAllLabelStatus(selectRef, item, wbUnifiedResponse) {
      const that = this;
      //监控点
      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 = that.statusByNodeId.get(ref);
            if (state == 1) {
              that.statusByNodeId.set(ref, 0);
              const img = that.imgByRef.get(ref);
              img.src = require('@/assets/earthMap/circleDot1.png');
            } else if (state == 0) {
              that.statusByNodeId.set(ref, 1);
              const img = that.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 = that.hostDeviceMapById.get(deviceId);
          if (!device) {
            console.error('主机设备为null');
            continue;
          }
          const args = {
            device: device,
            isDefence: wbUnifiedResponse,
            defenceArea: areaCode,
            detectorList: null,
          };
          defHttp
            .post(
              {
                url: this.url.setDefenseArea,
                params: args,
              },
              { isTransformResponse: false }
            )
            // postAction(this.url.setDefenseArea, args)
            .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 = that.statusByNodeId.get(ref1);
                    if (state1 == 0 && wbUnifiedResponse) {
                      that.statusByNodeId.set(ref1, 1);
                      const img1 = that.imgByRef.get(ref1);
                      if (!img1) return;
                      img1.src = require('@/assets/earthMap/circleDot2.png');
                    } else if (state1 == 1 && !wbUnifiedResponse) {
                      that.statusByNodeId.set(ref1, 0);
                      const img1 = that.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 = that.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, that.statusByNodeId, xbsjObject);
          let ref1 = xbsjObject.ref;
          let state1 = that.statusByNodeId.get(ref1);
          //一键布防撤防测试使用
          if (wbUnifiedResponse) {
            state1 = 0;
          } else {
            state1 = 1;
          }
          if (state1 == 0 && wbUnifiedResponse) {
            that.statusByNodeId.set(ref1, 1);
            const img1 = that.imgByRef.get(ref1);
            if (!img1) return;
            img1.src = require('@/assets/earthMap/circleDot2.png');
          } else if (state1 == 1 && !wbUnifiedResponse) {
            that.statusByNodeId.set(ref1, 0);
            const img1 = that.imgByRef.get(ref1);
            if (!img1) return;
            console.log(img1);
            img1.src = require('@/assets/earthMap/circleDot1.png');
          }
          //   break
        }
      }
    }

    // 图层管理-模型右键菜单
    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) {
                        createMessage.success('克隆成功');
                      } else {
                        newSn.parent.children.splice(index, 1);
                        createMessage.error('克隆成功:'+ 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);
                        // 保存成功
                        createMessage.success('克隆成功');
                      } else {
                        newSn.parent.children.splice(index, 1);
                        createMessage.error('克隆失败'+ res.message);
                      }
                    })
                    .catch((err) => {
                      newSn.parent.children.splice(index, 1);
                      createMessage.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();
                      createMessage.error('克隆区域数据出错', 3);
                    });
                })
                //监控点
                .modelCallback(() => {
                  createMessage.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) {
                        createMessage.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 {
                createMessage.error('设备不在线');
              }
            }
          } else if (device.deviceType_dictText.indexOf('雷达') > -1) {
            // console.log("leida");
            //处理单个雷达布防撤防
            //参数
            // {
            //   "regionIdList": [
            // 2
            //   ], // 周界防区区域ID列表（雷达设备列表的ID）
            //   "regionStatus": 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,{})
          }
        },
      };
      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;
                  });

                  //////////////////////////
                  // 只有组件中有getBind属性才能传递属性
                  // this._earthUI.showPropertyWindow(
                  //   {
                  //     czmObject: sn.czmObject,
                  //     node: item,
                  //     type: 'jkd',
                  //     lineId: lineId,
                  //     areaCode: areaCode,
                  //     areaByNodeId: that.areaByNodeId,
                  //   },
                  //   {
                  //     // component: addModelModal,
                  //     component: addModelWin,
                  //   }
                  // )
                  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;
                    });

                  // 只有组件中有getBind属性才能传递属性
                  // this._earthUI.showPropertyWindow(
                  //   {
                  //     czmObject: sn.czmObject,
                  //     node: item,
                  //     type: jsonObj.labelAttr == 4 ? 'ld' : 'wb',
                  //     lineId: lineId,
                  //     areaCode: areaCode,
                  //     areaByNodeId: that.areaByNodeId,
                  //     eidtId: sn.ref,
                  //     setLabelStatus: that.setLabelStatus,
                  //     setIconByRef: that.setIconByRef,
                  //     el: el,
                  //   },
                  //   {
                  //     // component: addModelModal,
                  //     component: addModelWin,
                  //   }
                  // )
                  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);
    }

    // 重命名 on-change-title 事件 使用 lodash.debounce 函数(防抖)
    handleChangeTitle = _.debounce(function (options) {
      const sn = options.item._inner.sn;
      const newTitle = options.title;

      // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口
      this.handleNodeType(sn)
        // 感应器
        .sensor(() => {
          // 不支持修改名称
          createMessage.warning('不支持修改感应器的名称');
        })
        // 传感器标志线
        .modelCallback(() => {
          // 发送请求 保存模型属性
          let editCameraSiteModelParameter = {
            id: sn.ref,
            sitename: newTitle,
          };
          defHttp
            .put(
              {
                url: this.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: this.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);

    // 右键菜单删除按钮的删除方法
    handlerModelDelete(url, params) {
      return defHttp
        .delete(
          {
            url: url,
            params: params,
          },
          { isTransformResponse: false, joinParamsToUrl: true }
        )
        .then((res) => {
          if (res.success) {
            createMessage.success('删除成功');
          } else {
            createMessage.error('删除失败');
            console.log('asdasdasd');
          }
        });
    }

    // 属性面板确定按钮方法
    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 }
            )
            .then((res) => {
              if (res.success) {
                createMessage.success('修改成功');
              } else {
                createMessage.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;
                createMessage.success('修改成功');
              } else {
                createMessage.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;
                createMessage.success('修改成功');
              } else {
                createMessage.error('修改失败');
              }
            })
            .catch((error) => {
              createMessage.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 }
            )
            .then((res) => {
              if (res.success) {
                createMessage.success('修改成功！', 2);
                sn.title = submitData.name;
                window.$earth.sceneTree.$refs['node_' + sn.ref].title = submitData.name;
              } else {
                createMessage.error('修改失败', 2);
              }
            })
            .catch((error) => {
              createMessage.error('修改失败', 2);
            });
        })
        .run();
    }

    /**
     * 保存更改的ref到模型和后台数据中;
     * @param {Object} model 当前模型
     * @param {string} newRef 新的ref
     * @param {string} oldRef 旧的ref
     */
    changeRef = _.debounce(function (model, newRef, oldRef) {
      // 当数值改变时且旧值不等于空时，更新模型的ref
      if (newRef !== oldRef && oldRef !== '') {
        // 修改后台的数据
        this.handleNodeType(model)
          .sensor(() => {
            defHttp
              .put(
                {
                  url: this.url.updateSensor + `?eventSerialNum=${oldRef}`,
                  params: { eventSerialNum: newRef },
                },
                { isTransformResponse: false }
              )
              // putAction(this.url.updateSensor + `?eventSerialNum=${oldRef}`, {eventSerialNum: newRef})
              .then((res) => {
                if (res.success) {
                  // 设置保存的 ref
                  this.sceneTreeOldRefValue = '';
                  // 更新模型的名称
                  model.title = newRef;
                  createMessage.success('修改成功');
                } else {
                  createMessage.error('修改失败: ' + res.message);
                }
              })
              .catch((err) => {
                createMessage.error('修改失败: ' + err);
              });
          })
          .modelCallback(() => {
            // 传感器标志线不能修改ref，因为 ref 是后台数据库的ID;
            createMessage.warning('无法修改传感器标志线的ref');
          })
          .run();
      }
    }, 150);

    radarAlarmTimeOutCheck() {
      const now = Date.now();
      const timeout = 5 * 60 * 1000;
      // 遍历报警数据
      this.alarmInfoMap.forEach((value, key) => {
        // 获取当前时间与报警时间的时间差
        const timeDiff = now - value.timestamp;
        // 如果时间差大于5分钟，则清除报警
        if (timeDiff > timeout) {
          // 清除报警，有雷达告警则清除雷达告警和雷达轨迹
          this.clearAlarmModel(key);
        }
      });
    }
    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);
      }
    }
    clearAlarmModel(eventNum) {
      let alarmInfoMap = this.alarmInfoMap;
      let radarAlarmDataMap = this.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();
        this.alarmInfoMap.delete(eventNum);
      }
      this.clearRadarAlarmModel(radarAlarmDataMap, eventNum);
    }

    //调用方法
    handleNodeType(sn) {
      return new HandleNodeType(sn);
    }
    // 获取当前实时时间
    getRealTime() {
      this.timer2 = setInterval(() => {
        this.realTime = getRealTime();
      }, 1000);
    }
    // 资源销毁
    beforeDestroy() {
      // vue程序销毁时，需要清理相关资源
      console.log("vue程序销毁");
      
      this._earth = this._earth && this._earth.destroy();
      this.websocketclose();
      //清除定时器
      clearInterval(this.timer);
      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>

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