<template>
  <div class="toolbar">
    <Window
      :title="title"
      :width="65"
      :minWidth="65"
      :height="520"
      :left="0"
      :top="0"
      @cancel="cancel"
      :floatright="false"
      :showCancelButton="false"
      :footervisible="false"
      :showcloseButton="false"
      id="toolbarWindow"
      v-show="show"
      class="barbox"
    >
      <div class="tbImg">
        <p class="tb-img-p" :title="isFullScren ? '缩小' : '全屏'" @click="screen">
          <img :src="isFullScren ? exitfullscreen : fullscreen" />
        </p>
        <p id="mapScene" class="tb-img-p" title="地图场景" @click="openPopModal('mapSceneModal', $event)">
          <img id="mapSceneImg" :src="mapchange" />
        </p>
        <p title="地图放大" class="tb-img-p" @click="mapZoom('in')"><img :src="zoomin" /></p>
        <p title="地图缩小" class="tb-img-p" @click="mapZoom('out')"><img :src="zoomout" /></p>
        <p title="地图复原" class="tb-img-p" @click="resetEarth"><img :src="reset" /></p>
        <p id="measure" class="tb-img-p" title="测量工具" @click="openPopModal('measurePopModal', $event)">
          <img id="measureImg" :src="celiang" />
        </p>
        <p title="二三维转换" class="tb-img-p" @click="twoTothreeD"><img :src="twothreeDchange" /></p>
        <p title="添加模型" class="tb-img-p" @click="openPopModal('addPopModal', $event)">
          <img :src="specialEffects" />
        </p>
        <p title="报警信息" class="tb-img-p" @click="warnInfoMan"><img :src="warnInfo" /></p>
        <p title="事件通报" class="tb-img-p alarm" @click="retrospect">
          <img :src="eventNotif" />
          <span class="divright">{{ eventDataNum }}</span>
        </p>
        <p title="工具箱" class="tb-img-p alarm" @click="drawShape">
          <img :src="drawShapeIMG" />
        </p>
        <p title="态势工具" class="tb-img-p alarm" @click="drawShapeMilitary">
          <img :src="drawShapeMilitaryIMG" />
        </p>
       
      </div>
    </Window>
    <div id="measurePopModal" class="popModal">
      <ul>
        <p @click="measureMentType = 'POINT'">位置测量</p>
        <p @click="measureMentType = 'SPACE_DISTANCE'">距离测量</p>
        <p @click="measureMentType = 'TRIANGLE_DISTANCE'">三角测量</p>
        <p @click="measureMentType = 'SPACE_AREA'">面积测量</p>
        <p @click="clearResults">清空测量结果</p>
      </ul>
    </div>
    <div id="mapSceneModal" class="popModal" style="top: 85px; height: 405px; width: 150px">
      <ul>
        <p @click="layerMan">图层管理(开启)</p>
        <p @click="mapMan">地图切换(开启)</p>
        <p @click="compass">指北针(开启)</p>
        <p @click="scale">比例尺(开启)</p>
        <p @click="terrainDepth">地形深度检测(开启)</p>
        <p @click="keyboardRoam">键盘漫游(开启)</p>
        <p @click="terrainDEM">地形高程(开启)</p>
        <p @click="viewAngle">视角管理器</p>
        <p @click="capture">场景截图</p>
      </ul>
    </div>
    <div id="addPopModal" class="popModal" style="top: 355px">
      <ul>
        <p @click="openCreateModel('addModelWin')">添加模型</p>
        <p @click="openCreateModel('roamPathList')">路径巡检</p>
        <p @click="openCreateModel('keyControlAreaList')">管控区域</p>
      </ul>
    </div>
    <div class="mapBox">
      <ul>
        <li v-for="item in imageryskin" :key="item" @click="selectMap(item)">
          <div class="mapBoxBack" :class="{ highlight: selected == item.name }">
            <img :src="item.imgUrl" /><br />
            <span>{{ item.name }}</span>
          </div>
        </li>
      </ul>
    </div>

    <AddModelWin v-if="addModelWinShow" :setLabelStatus="setLabelStatus"></AddModelWin>
    <RoamPathList v-if="roamPathListShow"></RoamPathList>
    <KeyControlAreaList v-if="keyControlAreaListShow"></KeyControlAreaList>
    <NotificationModel v-if="notificationModelShow"></NotificationModel>
    <WarnList v-if="WarnListShow"></WarnList>
    <DrawShape v-if="drawShapeShow" :drawShapePackage="drawShapePackage"></DrawShape>
    <DrawShapeMilitary v-if="drawShapeMilitaryShow"></DrawShapeMilitary>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, onMounted, onBeforeMount, getCurrentInstance, onBeforeUnmount, nextTick, watch } from 'vue';
  import Window from '@/components/earthMap/components/Window.vue';
  import AddModelWin from '@/components/earthMap/toolbar/AddModelWin.vue';
  import RoamPathList from '@/components/earthMap/RoamPathList.vue';
  import KeyControlAreaList from '@/components/earthMap/KeyControlAreaList.vue';
  import NotificationModel from '@/components/earthMap/toolbar/NotificationModel.vue';
  import DrawShape from '@/components/earthMap/toolbar/DrawShape.vue';
  import DrawShapeMilitary from '@/components/earthMap/toolbar/DrawShapeMilitary.vue';
  import WarnList from '@/components/earthMap/toolbar/WarnList.vue';
  import fullscreen from '@/assets/earthMap/toolbar/fullscreen.png';
  import exitfullscreen from '@/assets/earthMap/toolbar/exitfullscreen.png';
  import twothreeDchange from '@/assets/earthMap/toolbar/23Dchange.png';
  import mapchange from '@/assets/earthMap/toolbar/mapchange.png';
  import zoomin from '@/assets/earthMap/toolbar/zoomin.png';
  import zoomout from '@/assets/earthMap/toolbar/zoomout.png';
  import reset from '@/assets/earthMap/toolbar/reset.png';
  import celiang from '@/assets/earthMap/toolbar/celiang.png';
  import specialEffects from '@/assets/earthMap/toolbar/specialEffects.png';
  import warnInfo from '@/assets/earthMap/toolbar/warning.png';
  import history from '@/assets/earthMap/toolbar/history.png';
  import eventNotif from '@/assets/earthMap/toolbar/evnetNotif.png';
  import jianbianseRed from '@/assets/earthMap/toolbar/jianbianseRed.jpg';
  import drawShapeIMG from '@/assets/earthMap/toolbar/drawShapeIMG.png';
  import drawShapeMilitaryIMG from '@/assets/earthMap/toolbar/drawShapeMilitaryIMG.png';

  // import mitt from '/@/utils/mitt';
  import $mitt from '@/utils/earthMap/mitt';
  import { defHttp } from '/@/utils/http/axios';
  import $ from 'jquery';
  import { useUserStore } from '/@/store/modules/user';
  import { useEarthMapStore } from '/@/store/modules/earthMap';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'Toolbar',
    props: {
      flyTo: Function,
      setLabelStatus: Function,
    },
    components: {
      Window,
      AddModelWin,
      RoamPathList,
      NotificationModel,
      WarnList,
      DrawShape,
      DrawShapeMilitary,
      KeyControlAreaList,
    },
    setup(props) {
      const { proxy }: any = getCurrentInstance();
      // const { userInfo } = useUserStore();
      const userStore = useUserStore();
      const store = useEarthMapStore();
      const { createMessage } = useMessage();
      let _viewer = ref();
      let show = ref(true);
      let modalVisible = ref(false);
      let isFullScren = ref(false);
      let sceneMode3D = ref(true);
      let measureMentType = ref('NONE');
      let imageryskin = ref([]);

      let url = ref({
        SendList: '/military/msCaseNotificationSend/list',
        list: '/military/msCaseNotification/list',
      });
      let selected = ref('天地图-卫星');
      let mapObj_ = ref({ ref: 'tdtwx' });
      let orgCode = ref();
      let eventData: any = ref([]);

      // const mitter = mitt();
      //ref
      const addModelWinShow = ref(false);
      const roamPathListShow = ref(false);
      const keyControlAreaListShow = ref(false);
      const notificationModelShow = ref(false);
      const WarnListShow = ref(false);
      const drawShapeShow = ref(false);
      const drawShapePackage: any = ref(null);
      const drawShapeMilitaryShow = ref(false);

      //计算属性
      const title = computed(() => {
        return '';
      });
      // const getEventNum = computed(() => {
      //   let i = 0
      //   eventData.value.forEach((element: any) => {
      //     if (element.readFlag == 0) i++
      //   })
      //   return i
      // });

      let eventDataNum = ref(0);
      // watch(()=>eventData,()=>{
      //   console.log("eventData",eventData.value);

      //   let i = 0
      //   eventData.value.forEach((element: any) => {
      //     if (element.readFlag == 0) i++
      //   })
      //   return eventDataNum.value = i

      // },{ deep:true })

      onBeforeMount(() => {
        _viewer.value = window.$uia._earth._czm.viewer;
      });

      onMounted(() => {
        // console.log("asdsdfsdfsdfsdfsdf");

        // proxy.$message.info('请先创建路径！')
        getEventData();
        window.getEventData = getEventData;
        {
          //由于vue全屏时监听不到esc事件，所以页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发
          document.addEventListener('fullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
          document.addEventListener('mozfullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
          document.addEventListener('webkitfullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
          document.addEventListener('msfullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
        }
        {
          //其他页面调用本页面的methods方法
          $mitt.on('warnInfoMan', function () {
            warnInfoMan();
          });
          //调用绘画组件，res.show为展示状态,res为传递数据
          $mitt.on('drawShapeShow', function (res:any) {
            drawShapeShow.value = res.show;
            drawShapePackage.value = res
          });
        }
        //数据绑定
        //disposers 用来收集资源销毁函数，并在析构时自动调用！
        {
          proxy._disposers = [];
          proxy._disposers.push(window.XE.MVVM.bind(proxy, 'measureMentType', window.$earth.analyzation.measurement, 'type'));
        }
        {
          //全局点击事件
          document.addEventListener('click', (e: any) => {
            // 在不是按钮和按钮里的图片按下时清除菜单
            if (e.target.nodeName === 'IMG') {
              if (!e.target.parentElement.classList.contains('tb-img-p')) {
                closePopModal('all');
              }
            } else if (!e.target.classList.contains('tb-img-p')) {
              closePopModal('all');
            }
          });
        }
        {
          //   orgCode.value = Vue.ls.get(USER_INFO).orgCode
          orgCode.value = userStore.userInfo?.orgCode;
        }
      });

      //methods
      function getEventData() {
        let userId = localStorage.getItem('userName');
        //发布事件通报
        return defHttp
          .get({ url: url.value.list, params: { publishStatus: 1, noticeUsers: '*' + userId + '*' } }, { isTransformResponse: false })
          .then((res) => {
            if (res.code == 200 && res.result.records.length != 0) {
              return res.result.records;
            }
          })
          .then((arr) => {
            //接收事件通报
            return defHttp.get({ url: url.value.SendList, params: { userId } }, { isTransformResponse: false }).then((res) => {
              if (res.code == 200 && res.result.records.length != 0) {
                let eventData: any = [];
                res.result.records.forEach((element) => {
                  delete element.createTime;
                  arr.forEach((item: any) => {
                    if (item.id == element.caseId) {
                      item = Object.assign(item, element);
                      eventData.push(item);
                    }
                  });
                });
                eventData.value = arrSort(eventData);
                let i = 0;
                eventData.value.forEach((element: any) => {
                  if (element.readFlag == 0) {
                    i++;
                  }
                });
                eventDataNum.value = i;

                localStorage.setItem('eventData', JSON.stringify(eventData.value));
                return eventData.value;
              }
            });
          });
      }

      function arrSort(eventData) {
        //排序
        eventData.sort(function (a, b) {
          let value1 = a.readFlag;
          let value2 = b.readFlag;
          //时序
          if (value1 == value2) return new Date(b.createTime).getTime() - new Date(a.createTime).getTime();
          //已读在后面
          return value1 - value2;
        });
        return eventData;
      }

      function click() {
        window.$uia.language = window.$uia.language === 'zh' ? 'en' : 'zh';
      }

      function cancel() {
        proxy.$parent.destroyTool(proxy);
      }

      function screen() {
        let el = document.documentElement;
        if (isFullScren.value) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (el.requestFullscreen) {
            el.requestFullscreen();
          } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
          } else if (el.webkitRequestFullScreen) {
            el.webkitRequestFullScreen();
          } else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
          }
        }
      }

      function layerMan() {
        window.$uia.tools.sceneTree.show = !window.$uia.tools.sceneTree.show; //图层管理
        let layerMgmt: any = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[0];
        window.$uia.tools.sceneTree.show === true ? (layerMgmt.innerText = '图层管理(开启)') : (layerMgmt.innerText = '图层管理(关闭)');
      }

      function mapMan() {
        $mitt.emit('radioChangeBtnShow', (isShow) => {
          let mapSwitch = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[1];
          isShow === true ? (mapSwitch.innerText = '地图切换(开启)') : (mapSwitch.innerText = '地图切换(关闭)');
        });
      }

      function compass() {
        //指北针显隐控制
        window.$earth.camera.navigator.showCompass = !window.$earth.camera.navigator.showCompass;
        let compass = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[2];
        window.$earth.camera.navigator.showCompass === true ? (compass.innerText = '指北针(开启)') : (compass.innerText = '指北针(关闭)');
      }

      function scale() {
        //比例尺显隐控制
        window.$earth.camera.navigator.showDistanceLegend = !window.$earth.camera.navigator.showDistanceLegend;
        let scale = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[3];
        window.$earth.camera.navigator.showDistanceLegend === true ? (scale.innerText = '比例尺(开启)') : (scale.innerText = '比例尺(关闭)');
      }

      function capture() {
        window.$uia.saveScreenToFile(window.$uia.earth.czm.viewer.canvas.width, window.$uia.earth.czm.viewer.canvas.height, '场景截图.png');
      }

      function viewAngle() {
        window.$uia.tools.cameraViewManager.show = !window.$uia.tools.cameraViewManager.show;
      }

      function selectMap(item) {
        selected.value = item.name;
        if (!$.isEmptyObject(mapObj_.value) && item.ref == mapObj_.value.ref) {
          return;
        }
        /* window.$earth.sceneTree.$refs.tdtwx.czmObject.show = false;
      window.$earth.sceneTree.$refs.bdha.czmObject.show = false;
      window.$earth.sceneTree.$refs.gdsl.czmObject.show = false;
      window.$earth.sceneTree.$refs.gdwx.czmObject.show = false;
      window.$earth.sceneTree.$refs.sjgkdt.czmObject.show = false; */

        switch (item.ref) {
          case 'tdtwx':
            // this.mapObj_ = window.$earth.sceneTree.$refs.tdtwxsj;
            break;
          case 'bdha':
            // $mitt.emit('openNotification', '暂未开放该地图！', 2, 'warning')
            $mitt.emit('openNotification', { msg: '暂未开放该地图！', dt: 2, type: 'warning' });
            // this.mapObj_ = window.$earth.sceneTree.$refs.bdha;
            break;
          case 'gdsl':
            // $mitt.emit('openNotification', '暂未开放该地图！', 2, 'warning')
            $mitt.emit('openNotification', { msg: '暂未开放该地图！', dt: 2, type: 'warning' });
            // this.mapObj_ = window.$earth.sceneTree.$refs.gdsl;
            break;
          case 'gdwx':
            // $mitt.emit('openNotification', '暂未开放该地图！', 2, 'warning')
            $mitt.emit('openNotification', { msg: '暂未开放该地图！', dt: 2, type: 'warning' });
            // this.mapObj_ = window.$earth.sceneTree.$refs.gdwx;
            break;
          case 'sjgkdt':
            // $mitt.emit('openNotification', '暂未开放该地图！', 2, 'warning')
            $mitt.emit('openNotification', { msg: '暂未开放该地图！', dt: 2, type: 'warning' });
            // this.mapObj_ = window.$earth.sceneTree.$refs.sjgkdt;
            break;
          default:
        }
        // this.mapObj_.czmObject.show = true;
      }

      function terrainDepth() {
        //开启深度检测
        window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain = !window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain;
        let terrainDepth = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[4];
        window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain === true
          ? (terrainDepth.innerText = '地形深度检测(开启)')
          : (terrainDepth.innerText = '地形深度检测(关闭)');
      }

      function keyboardRoam() {
        // 禁用键盘漫游
        window.$earth.camera.immersion.enabled = !window.$earth.camera.immersion.enabled;
        let keyboardRoam = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[5];
        window.$earth.camera.immersion.enabled === true ? (keyboardRoam.innerText = '键盘漫游(开启)') : (keyboardRoam.innerText = '键盘漫游(关闭)');
      }

      function terrainDEM() {
        $mitt.emit('loadingStatus');
        window.$earth.sceneTree.$refs.terrain.czmObject.show = !window.$earth.sceneTree.$refs.terrain.czmObject.show;
        //重建地图实体
        window.$earth.sceneTree.root.children.splice(1, window.$earth.sceneTree.root.children.length);
        $mitt.emit('createBBHLine');
        let terrainDEM = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[6];
        window.$earth.sceneTree.$refs.terrain.czmObject.show === true
          ? (terrainDEM.innerText = '地形高程(开启)')
          : (terrainDEM.innerText = '地形高程(关闭)');
      }

      function resetEarth() {
        // const { flyTo } = this.getBind()
        window.$flyTo && window.$flyTo();

        // const position = [1.304199165585534, 0.6508221071225061, 5424.505407431675]
        // const rotation = [2.306666386463268, -0.41595416600851376, 0.0026186853829388568]
        // window.$earth.camera.flyTo(position, 0, rotation, 5) // 定点飞入
      }

      function clearResults() {
        console.log('clearResults');
        window.$earth && window.$earth.analyzation.measurement.clearResults();
        window.$earth && window.$earth.analyzation.cutFillComputing.clearResults();
        window.$earth && window.$earth.analyzation.cutFillComputingOld.clearResults();
        window.$earth.analyzation.cutFillComputing.positions = [];
        measureMentType.value = 'NONE';
      }

      function drawWall(staticPosition: any) {
        let alp = 1;
        let num = 0;
        //绘制墙
        let _entity = _viewer.value.entities.add({
          // id: "wall1",
          name: 'wall',
          wall: {
            show: true,
            positions: staticPosition,
            material: new window.Cesium.ImageMaterialProperty({
              image: jianbianseRed,
              transparent: true,
              color: new window.Cesium.CallbackProperty(function () {
                if (num % 2 === 0) {
                  alp -= 0.055;
                } else {
                  alp += 0.055;
                }
                if (alp <= 0.3) {
                  num++;
                } else if (alp >= 1) {
                  num++;
                }
                return window.Cesium.Color.WHITE.withAlpha(alp); //entity的颜色透明 并不影响材质，并且 entity也会透明
              }, false),
            }),
          },
        });
      }
      /*
     添加雷达扫描线
     viewer
     cartographicCenter 扫描中心
     radius  半径 米
     scanColor 扫描颜色
     duration 持续时间 毫秒
           */
      function addRadarScanPostStage(viewer, cartographicCenter, radius, scanColor, duration) {
        var _Cartesian3Center = window.Cesium.Cartographic.toCartesian(cartographicCenter);
        var _Cartesian4Center = new window.Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);

        var _CartographicCenter1 = new window.Cesium.Cartographic(
          cartographicCenter.longitude,
          cartographicCenter.latitude,
          cartographicCenter.height + 500
        );
        var _Cartesian3Center1 = window.Cesium.Cartographic.toCartesian(_CartographicCenter1);
        var _Cartesian4Center1 = new window.Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);

        var _CartographicCenter2 = new window.Cesium.Cartographic(
          cartographicCenter.longitude + window.Cesium.Math.toRadians(0.001),
          cartographicCenter.latitude,
          cartographicCenter.height
        );
        var _Cartesian3Center2 = window.Cesium.Cartographic.toCartesian(_CartographicCenter2);
        var _Cartesian4Center2 = new window.Cesium.Cartesian4(_Cartesian3Center2.x, _Cartesian3Center2.y, _Cartesian3Center2.z, 1);
        var _RotateQ = new window.Cesium.Quaternion();
        var _RotateM = new window.Cesium.Matrix3();

        var _time = new Date().getTime();

        var _scratchCartesian4Center = new window.Cesium.Cartesian4();
        var _scratchCartesian4Center1 = new window.Cesium.Cartesian4();
        var _scratchCartesian4Center2 = new window.Cesium.Cartesian4();
        var _scratchCartesian3Normal = new window.Cesium.Cartesian3();
        var _scratchCartesian3Normal1 = new window.Cesium.Cartesian3();

        var ScanPostStage = new window.Cesium.PostProcessStage({
          // name: "radar",
          fragmentShader: getRadarScanShader(),
          uniforms: {
            u_scanCenterEC: function () {
              return window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
            },
            u_scanPlaneNormalEC: function () {
              var temp = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
              var temp1 = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
              _scratchCartesian3Normal.x = temp1.x - temp.x;
              _scratchCartesian3Normal.y = temp1.y - temp.y;
              _scratchCartesian3Normal.z = temp1.z - temp.z;

              window.Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
              return _scratchCartesian3Normal;
            },
            u_radius: radius,
            u_scanLineNormalEC: function () {
              var temp = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
              var temp1 = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
              var temp2 = window.Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center2, _scratchCartesian4Center2);

              _scratchCartesian3Normal.x = temp1.x - temp.x;
              _scratchCartesian3Normal.y = temp1.y - temp.y;
              _scratchCartesian3Normal.z = temp1.z - temp.z;

              window.Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);

              _scratchCartesian3Normal1.x = temp2.x - temp.x;
              _scratchCartesian3Normal1.y = temp2.y - temp.y;
              _scratchCartesian3Normal1.z = temp2.z - temp.z;

              var tempTime = ((new Date().getTime() - _time) % duration) / duration;
              window.Cesium.Quaternion.fromAxisAngle(_scratchCartesian3Normal, tempTime * window.Cesium.Math.PI * 2, _RotateQ);
              window.Cesium.Matrix3.fromQuaternion(_RotateQ, _RotateM);
              window.Cesium.Matrix3.multiplyByVector(_RotateM, _scratchCartesian3Normal1, _scratchCartesian3Normal1);
              window.Cesium.Cartesian3.normalize(_scratchCartesian3Normal1, _scratchCartesian3Normal1);
              return _scratchCartesian3Normal1;
            },
            u_scanColor: scanColor,
          },
        });
        viewer.scene.postProcessStages.add(ScanPostStage);

        return ScanPostStage;
      }

      function getRadarScanShader() {
        //雷达扫描线效果Shader
        let scanSegmentShader =
          'uniform sampler2D colorTexture;\n' +
          'uniform sampler2D depthTexture;\n' +
          'varying vec2 v_textureCoordinates;\n' +
          'uniform vec4 u_scanCenterEC;\n' +
          'uniform vec3 u_scanPlaneNormalEC;\n' +
          'uniform vec3 u_scanLineNormalEC;\n' +
          'uniform float u_radius;\n' +
          'uniform vec4 u_scanColor;\n' +
          'vec4 toEye(in vec2 uv, in float depth)\n' +
          ' {\n' +
          ' vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n' +
          ' vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n' +
          ' posInCamera =posInCamera / posInCamera.w;\n' +
          ' return posInCamera;\n' +
          ' }\n' +
          'bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n' +
          '{\n' +
          'vec3 v01 = testPt - ptOnLine;\n' +
          'normalize(v01);\n' +
          'vec3 temp = cross(v01, lineNormal);\n' +
          'float d = dot(temp, u_scanPlaneNormalEC);\n' +
          'return d > 0.5;\n' +
          '}\n' +
          'vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n' +
          '{\n' +
          'vec3 v01 = point -planeOrigin;\n' +
          'float d = dot(planeNormal, v01) ;\n' +
          'return (point - planeNormal * d);\n' +
          '}\n' +
          'float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n' +
          '{\n' +
          'vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\n' +
          'return length(tempPt - ptOnLine);\n' +
          '}\n' +
          'float getDepth(in vec4 depth)\n' +
          '{\n' +
          'float z_window = czm_unpackDepth(depth);\n' +
          'z_window = czm_reverseLogDepth(z_window);\n' +
          'float n_range = czm_depthRange.near;\n' +
          'float f_range = czm_depthRange.far;\n' +
          'return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n' +
          '}\n' +
          'void main()\n' +
          '{\n' +
          'gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n' +
          'float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n' +
          'vec4 viewPos = toEye(v_textureCoordinates, depth);\n' +
          'vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n' +
          'float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n' +
          'float twou_radius = u_radius * 2.0;\n' +
          'if(dis < u_radius)\n' +
          '{\n' +
          'float f0 = 1.0 -abs(u_radius - dis) / u_radius;\n' +
          'f0 = pow(f0, 64.0);\n' +
          'vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\n' +
          'float f = 0.0;\n' +
          'if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz))\n' +
          '{\n' +
          'float dis1= length(prjOnPlane.xyz - lineEndPt);\n' +
          'f = abs(twou_radius -dis1) / twou_radius;\n' +
          'f = pow(f, 3.0);\n' +
          '}\n' +
          'gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);\n' +
          '}\n' +
          '}\n';
        return scanSegmentShader;
      }

      function clearObj(obj, type) {
        //删除cesium对象
        switch (type) {
          case 'postProcessStages':
            _viewer.value.postProcessStages.removeAll();
            /* var stages = this._viewer.postProcessStages._stages;
          for (var i = 0; i < stages.length; i++) {
            if (stages[i]._name === obj) {
              this._viewer.postProcessStages.remove(stages[i]);
            }
          } */
            break;
          case 'entities':
            // console.log('viewer.entities._entities._array', this._viewer.entities._entities._array);
            var entitys = _viewer.value.entities._entities._array;
            for (var i = 0; i < entitys.length; i++) {
              if (entitys[i]._name === obj) {
                _viewer.value.entities.remove(entitys[i]);
                i--;
              }
            }
            break;
          case 'ref':
            for (var key in window.$earth.sceneTree.root.children) {
              if (window.$earth.sceneTree.root.children[key].ref == obj) {
                window.$earth.sceneTree.root.children.splice(key, 1);
              }
            }
            break;
          case 'primitives':
            if (obj == 'uav') {
              _viewer.value.entities.remove(window._uavRealTimePath);
              window._uavPrimitive.destroy();
              window.$earth.camera.immersion.enabled = true; // 禁用键盘漫游
              document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[3].innerHTML = '键盘漫游(开启)';
            }
            break;
          default:
        }
      }

      function warnInfoMan() {
        WarnListShow.value = !WarnListShow.value;
        //显隐控制
        // $('.infoList').css('visibility') == 'hidden'
        //   ? $('.infoList').css({ visibility: 'visible', opacity: 1 })
        //   : $('.infoList').css({ visibility: 'hidden', opacity: 0 })
        // if ($('.infoList').css('visibility') == 'visible') {
        //   console.log(proxy);
        //   $mitt.emit('getWarnData')
        //   $mitt.emit('getDealData', 'visible')
        // } else {
        //   $mitt.emit('getDealData', 'hidden')
        // }
        $mitt.emit('radioChangeBtnShow', (isShow) => {
          let mapSceneModalOptions: any = document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children;
          if (isShow) {
            mapSceneModalOptions[1].innerText = '地图切换(开启)';
            mapSceneModalOptions[2].innerText = '指北针(开启)';
            mapSceneModalOptions[3].innerText = '比例尺(开启)';
          } else {
            mapSceneModalOptions[1].innerText = '地图切换(关闭)';
            mapSceneModalOptions[2].innerText = '指北针(关闭)';
            mapSceneModalOptions[3].innerText = '比例尺(关闭)';
          }
        });
        window.$uia.controls.statusBar.show = !window.$uia.controls.statusBar.show; //状态栏显隐控制  $(".xbsjcesium + div").toggle(1200);
        window.$earth.camera.navigator.showCompass = !window.$earth.camera.navigator.showCompass; //指北针显隐控制
        window.$earth.camera.navigator.showDistanceLegend = !window.$earth.camera.navigator.showDistanceLegend; //比例尺显隐控制
      }

      function twoTothreeD() {
        if (sceneMode3D.value) {
          /* if (window.$earth != undefined) {
          window.$earth.destroy();
          window.$earth = undefined;
        } */
          //清除鼠标事件
          $mitt.emit('removeHandler');
          //清除地图实体
          /* this._viewer.postProcessStages.removeAll();
        this._viewer.entities.removeAll();
        this._viewer.scene.primitives.removeAll();
        this._viewer.scene.groundPrimitives.removeAll(); */
          window.$earth.sceneTree.root.children.splice(1, window.$earth.sceneTree.root.children.length);
          //切换二维
          _viewer.value.scene.morphTo2D(0);
        } else {
          //重建地图实体
          $mitt.emit('createBBHLine');
          // callUtil.$emit('createRealTimeObj');
          $mitt.emit('listenMouseHandler');
          //切换三维
          _viewer.value.scene.morphTo3D(0);
          // const position = earthUtils.degreeToRadianInLngLatHeight(113.50458, 22.10551, 0)
          // const rotation = earthUtils.degreeToRadianInLngLatHeight(358.84, -51.29, 359.99)
          // window.$earth.camera.flyTo(position, 18000, rotation, 5) // 定点飞入
        }
        sceneMode3D.value = !sceneMode3D.value;
      }

      function mapZoom(type) {
        // 获取当前镜头位置的笛卡尔坐标
        let cameraPosition = _viewer.value.camera.position;
        // 获取当前坐标系标准
        let ellipsoid = _viewer.value.scene.globe.ellipsoid;
        // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
        let cartographic = ellipsoid.cartesianToCartographic(cameraPosition);
        // 获取镜头的高度
        let height = cartographic.height;
        // 根据上面当前镜头的位置，获取该中心位置的经纬度坐标和角度
        let centerLon = parseFloat(window.Cesium.Math.toDegrees(cartographic.longitude).toFixed(8));
        let centerLat = parseFloat(window.Cesium.Math.toDegrees(cartographic.latitude).toFixed(8));
        let heading = parseFloat(window.Cesium.Math.toDegrees(_viewer.value.camera.heading).toFixed(2));
        let pitch = parseFloat(window.Cesium.Math.toDegrees(_viewer.value.camera.pitch).toFixed(2));
        let roll = parseFloat(window.Cesium.Math.toDegrees(_viewer.value.camera.roll).toFixed(2));

        switch (type) {
          case 'in':
            _viewer.value.camera.flyTo({
              destination: window.Cesium.Cartesian3.fromDegrees(centerLon, centerLat, height / 1.8),
              orientation: {
                heading: window.Cesium.Math.toRadians(heading),
                pitch: window.Cesium.Math.toRadians(pitch),
                roll: window.Cesium.Math.toRadians(roll),
              },
              duration: 1.0,
            });
            break;
          case 'out':
            _viewer.value.camera.flyTo({
              destination: window.Cesium.Cartesian3.fromDegrees(centerLon, centerLat, height * 1.8),
              orientation: {
                heading: window.Cesium.Math.toRadians(heading),
                pitch: window.Cesium.Math.toRadians(pitch),
                roll: window.Cesium.Math.toRadians(roll),
              },
              duration: 1.0,
            });
            break;
          default:
        }
      }

      function addUAV(uav_position) {
        window.$earth.camera.immersion.enabled = false; // 禁用键盘漫游
        let keyboardRoam = (document.getElementById('mapSceneModal').getElementsByTagName('ul')[0].children[5].innerText = '键盘漫游(关闭)');

        //控制鼠标焦点在该模型上
        var canvas = _viewer.value.canvas;
        canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
        canvas.addEventListener('click', function () {
          canvas.focus();
        });
        canvas.focus();
        //画实时路径
        var pathPosition = new window.Cesium.SampledPositionProperty();
        window._uavRealTimePath = _viewer.value.entities.add({
          position: pathPosition,
          name: 'path',
          path: {
            show: true,
            leadTime: 0,
            trailTime: 60,
            width: 10,
            resolution: 1,
            material: new window.Cesium.PolylineGlowMaterialProperty({
              glowPower: 0.2,
              taperPower: 0.2,
              color: window.Cesium.Color.PALEGOLDENROD,
            }),
          },
        });

        var scene = _viewer.value.scene;
        var camera = _viewer.value.camera;
        var controller = scene.screenSpaceCameraController;
        var r = 0;
        var center = new window.Cesium.Cartesian3();

        var hpRoll = new window.Cesium.HeadingPitchRoll();
        var hpRange = new window.Cesium.HeadingPitchRange();
        var speed = 7;
        var deltaRadians = window.Cesium.Math.toRadians(3.0);

        var position = window.Cesium.Cartesian3.fromDegrees(121.533469, 31.224765, 300.0);
        var speedVector = new window.Cesium.Cartesian3();
        var fixedFrameTransform = window.Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
        window._uavPrimitive = scene.primitives.add(
          window.Cesium.Model.fromGltf({
            id: 'plane',
            url: window._CONFIG['staticDomainURL'] + '/uav.gltf',
            modelMatrix: window.Cesium.Transforms.headingPitchRollToFixedFrame(
              uav_position,
              hpRoll,
              window.Cesium.Ellipsoid.WGS84,
              fixedFrameTransform
            ),
            minimumPixelSize: 1000,
            maximumScale: 10,
          })
        );
        //监听键盘事件
        document.addEventListener('keydown', function (e) {
          switch (e.keyCode) {
            case 40:
              if (e.shiftKey) {
                // speed down
                speed = Math.max(--speed, 1);
              } else {
                // pitch down
                hpRoll.pitch -= deltaRadians;
                if (hpRoll.pitch < -window.Cesium.Math.TWO_PI) {
                  hpRoll.pitch += window.Cesium.Math.TWO_PI;
                }
              }
              break;
            case 38:
              if (e.shiftKey) {
                // speed up
                speed = Math.min(++speed, 100);
              } else {
                // pitch up
                hpRoll.pitch += deltaRadians;
                if (hpRoll.pitch > window.Cesium.Math.TWO_PI) {
                  hpRoll.pitch -= window.Cesium.Math.TWO_PI;
                }
              }
              break;
            case 39:
              if (e.shiftKey) {
                // roll right
                hpRoll.roll += deltaRadians;
                if (hpRoll.roll > window.Cesium.Math.TWO_PI) {
                  hpRoll.roll -= window.Cesium.Math.TWO_PI;
                }
              } else {
                // turn right
                hpRoll.heading += deltaRadians;
                if (hpRoll.heading > window.Cesium.Math.TWO_PI) {
                  hpRoll.heading -= window.Cesium.Math.TWO_PI;
                }
              }
              break;
            case 37:
              if (e.shiftKey) {
                // roll left until
                hpRoll.roll -= deltaRadians;
                if (hpRoll.roll < 0.0) {
                  hpRoll.roll += window.Cesium.Math.TWO_PI;
                }
              } else {
                // turn left
                hpRoll.heading -= deltaRadians;
                if (hpRoll.heading < 0.0) {
                  hpRoll.heading += window.Cesium.Math.TWO_PI;
                }
              }
              break;
            default:
          }
        });

        _viewer.value.scene.preUpdate.addEventListener(function (scene, time) {
          speedVector = window.Cesium.Cartesian3.multiplyByScalar(window.Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
          position = window.Cesium.Matrix4.multiplyByPoint(window._uavPrimitive.modelMatrix, speedVector, position);
          pathPosition.addSample(window.Cesium.JulianDate.now(), position);
          window.Cesium.Transforms.headingPitchRollToFixedFrame(
            position,
            hpRoll,
            window.Cesium.Ellipsoid.WGS84,
            fixedFrameTransform,
            window._uavPrimitive.modelMatrix
          );
        });
      }

      function retrospect() {
        // // 打开对应的创建模型窗口
        // this.$root.$earthUI.showPropertyWindow(
        //   {},
        //   {
        //     component: notificationModel,
        //   }
        // )
        notificationModelShow.value = !notificationModelShow.value;
      }

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

      function openPopModal(id, e) {
        let popModal = document.getElementById(id);
        let node = e.target;
        if (node.nodeName === 'IMG') {
          node = node.parentNode;
        }
        // 清除所有的选中状态除了当前点击的
        closePopModal('ignoreMe', popModal, node);

        let nodeClassList = node.classList;
        // 鼠标点击的p节点存在 tbImgHover 类侧删除，不存在侧添加，显示/隐藏 点击边框
        nodeClassList.contains('tbImgHover') ? nodeClassList.remove('tbImgHover') : nodeClassList.add('tbImgHover');

        // 气泡框
        let popModalDisplay = popModal.style.display;
        // 气泡框已经显示侧隐藏，不存在侧显示
        if (popModalDisplay === '') {
          popModal.style.display = 'none';
        }
        popModalDisplay === 'block' ? (popModal.style.display = 'none') : (popModal.style.display = 'block');
      }

      function closePopModal(type, menu = null, button = null) {
        let popModalList = document.getElementsByClassName('popModal');
        let tbImgHoverList = document.getElementsByClassName('tbImgHover');
        switch (type) {
          case 'all':
            // 关闭所有
            // 关闭按钮点击效果
            for (const tbImgHoverListElement of tbImgHoverList) {
              tbImgHoverListElement.classList.remove('tbImgHover');
            }
            // 关闭所有气泡框
            for (const popModalListElement of popModalList) {
              popModalListElement.style.display = 'none';
            }
            break;
          case 'ignoreMe':
            // 忽略当前点击的
            for (const taImgHoverElement of tbImgHoverList) {
              if (taImgHoverElement !== button) {
                taImgHoverElement.classList.remove('tbImgHover');
              }
            }
            for (const popModalElement of popModalList) {
              if (popModalElement !== menu) {
                popModalElement.style.display = 'none';
              }
            }
            break;
          default:
            let popModal = document.getElementById(menu);
            button.classList.remove('tbImgHover');
            popModal.style.display = 'none';
            break;
        }
      }

      function openCreateModel(type) {
        // let com = null
        $mitt.emit('windowCancel');
        switch (type) {
          case 'addModelWin':
            // $mitt.emit('windowCancel')
            // com = addModelWin
            // console.log("proxy");
            addModelWinShow.value = true;
            break;
          case 'roamPathList':
            //   $mitt.emit('windowCancel')
            //   com = roamPathList
            roamPathListShow.value = true;
            break;
          case 'keyControlAreaList':
            keyControlAreaListShow.value = true;
            break;
        }
        // const props = this.getBind()
        // const { setLabelStatus } = props
        // // 打开对应的创建模型窗口
        // this.$root.$earthUI.showPropertyWindow(
        //   {
        //     setLabelStatus,
        //   },
        //   {
        //     // component: addModelModal,
        //     component: com,
        //   }
        // )
      }

      onBeforeUnmount(() => {
        // vue程序销毁时，需要清理相关资源
        proxy._disposers.forEach((d) => d());
        proxy._disposers.length = 0;
        _viewer.value = _viewer.value && _viewer.value.destroy();
        window._uavRealTimePath = undefined;
        window._uavPrimitive = undefined;
        $mitt.off('warnInfoMan');
      });


      return {
        show,
        title,
        fullscreen,
        exitfullscreen,
        twothreeDchange,
        mapchange,
        zoomin,
        zoomout,
        reset,
        celiang,
        specialEffects,
        warnInfo,
        history,
        eventNotif,
        drawShapeIMG,
        _viewer,
        modalVisible,
        isFullScren,
        sceneMode3D,
        measureMentType,
        imageryskin,
        url,
        selected,
        mapObj_,
        orgCode,
        eventData,
        // getEventNum,
        eventDataNum,
        getEventData,
        click,
        cancel,
        screen,
        layerMan,
        mapMan,
        compass,
        scale,
        capture,
        viewAngle,
        selectMap,
        terrainDepth,
        keyboardRoam,
        terrainDEM,
        resetEarth,
        clearResults,
        getRadarScanShader,
        drawWall,
        addRadarScanPostStage,
        clearObj,
        twoTothreeD,
        warnInfoMan,
        mapZoom,
        addUAV,
        retrospect,
        openPopModal,
        closePopModal,
        openCreateModel,
        drawShape,
        drawShapeMilitary,
        addModelWinShow,
        roamPathListShow,
        keyControlAreaListShow,
        notificationModelShow,
        WarnListShow,
        drawShapeShow,
        drawShapePackage,
        drawShapeMilitaryShow,
        drawShapeMilitaryIMG,
      };
    },
  });
</script>

<style>
  .barbox {
    left: 0 !important;
    top: 0 !important;
    height: 600px !important;
    width: 65px !important;
  }

  .toolbar > .xbsj-model-box {
    background: -webkit-linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
    background: -o-linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
    background: -moz-linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
    background: linear-gradient(90deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.1)) !important;
    box-shadow: none !important;
  }

  /* .toolbar .xbsj-model-close {
  display: none ;
} */

  /* .toolbar .xbsj-model-header .xbsj-model-arrow {
  right: 25px;
} */
  #toolbarWindow .xbsj-model-header .xbsj-model-arrow {
    right: 25px;
  }

  .tbImg p {
    width: 45px;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    text-align: center;
    font-size: 0px !important;
  }

  .tbImg p:hover {
    cursor: pointer;
    background: url('../../assets/earthMap/toolbar/nav_bg_act.png') no-repeat;
    background-size: 100% 100% !important;
    color: #00ffe4 !important;
  }

  .tbImg img {
    width: 28px;
    margin: 4px;
    align-items: center;
    display: inline-block;
  }

  .tbImgHover {
    background: url('../../assets/earthMap/toolbar/nav_bg_act.png') no-repeat;
    background-size: 100% 100% !important;
    color: #00ffe4 !important;
  }

  .alarm {
    position: relative;
    /*width: 60px;*/
    /*height: 60px;*/
    /*margin: 60px;*/
  }

  .divright {
    position: absolute;
    left: 60%;
    color: white;
    font-size: 10px;
    background-color: red;
    width: 17px;
    height: 17px;
    line-height: 16px;
    text-align: center;
    border-radius: 24px;
  }

  /* 气泡窗 */
  .popModal {
    margin: 20px auto;
    padding: 5px;
    position: absolute;
    left: 65px;
    top: 265px;

    width: 100px;
    line-height: 40px;
    color: white;
    text-align: center;
    font-size: 14px;
    /* border-radius: 5px; */
    filter: alpha(opacity=50);
    opacity: 0.8;
    border: 1px solid RGBA(12, 177, 177, 0.9);
    background: RGBA(12, 177, 177, 0.9);
    display: none;
  }

  .popModal::after {
    /* 箭头靠下边 */
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 10px;
    left: -15px;
    border-left: 20px solid transparent;
    border-top: 15px solid RGBA(12, 177, 177, 1);
  }

  .popModal > ul p {
    cursor: pointer;
    margin-bottom: 0.3em !important;
  }

  .popModal > ul p:hover {
    background-color: RGBA(12, 222, 222, 1);
  }

  /* 地图切换列表 */
  .mapBox {
    width: 620px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    color: #dddddd;
    border-radius: 10px;
    font-size: 14px;
    font-family: 宋体;
    background: RGBA(9, 39, 76, 0.7);
    display: none;
  }

  .mapBox ul {
    display: flex;
  }

  .mapBox li {
    list-style: none;
    height: 134px;
    cursor: pointer;
  }

  .mapBox .mapBoxBack {
    border: 2px solid;
    border-radius: 4px;
    background: gray;
    margin: 10px;
  }

  .mapBox .mapBoxBack img {
    width: 100px;
    height: 100px;
  }

  .mapBox .mapBoxBack span {
    display: inline-block;
    width: 100px;
    text-align: center;
  }

  .mapBox .highlight {
    border: 2px solid #00ffe4;
  }

  .mapBoxBack:hover {
    border: 2px solid #00ffe4;
  }

  #createModelSvg {
    height: 32px;
    width: 32px;
  }

  .xbsjEarthPanel {
    display: flex;
  }
</style>
