web_qp_phone_ui/src/components2/Tool.vue

<template>
  <div class="tool">
    <ul class="func">
      <li
        v-for="(item, index) in funcList"
        :key="index"
        :class="{ active: item.active }"
        @click="toolClickHandle(item)"
      >
        <p></p>
        <!-- {{ item.label }} -->
      </li>
    </ul>
    <div
      :class="{ help: true, active: helpActive }"
      v-show="false"
      @click="showHelp"
    ></div>

    <!-- 展示索引页面 -->
    <van-popup
      v-model:show="indexesShow"
      :class="'indexesListContent'"
      :style="{ background: 'transparent' }"
      :close-on-click-overlay="false"
      :closed="hideIndexesInfoDailog"
    >
      <!-- closeable
      close-icon="close" -->
      <div class="indexesList">
        <!-- <div class="header">
          <span>青浦行政服务中心</span>
        </div> -->
        <div class="listContent">
          <div class="header">
            <!-- <span>青浦行政服务中心</span> -->
          </div>
          <!-- <div class="title_container">
            <ul>
              <li
                v-for="(item, index) in cameraInfo"
                :key="index"
                :class="{ active: item.active }"
                @click="changeFloor(item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div> -->
          <div class="list_container">
            <div>
              <div
                class="first_content"
                v-for="(item, index) in cameraInfo"
                :key="index"
              >
                <div class="title">{{ item.name }}</div>
                <ul>
                  <li
                    v-for="(item_, index_) in item.children"
                    :key="index_"
                    :class="{ active: item_.active }"
                    @click="changeView(item_)"
                  >
                    {{ item_.name }}
                  </li>
                </ul>
              </div>
            </div>
            <!-- <ul>
              <li
                v-for="(item, index) in cameraInfoChildren"
                :key="index"
                :class="{ active: item.active }"
                @click="changeView(item)"
              >
                {{ item.name }}
              </li>
            </ul> -->
          </div>
        </div>
      </div>
      <div
        class="close"
        @click="hideIndexesInfoDailog"
      ></div>
    </van-popup>

    <!-- 展示点位文字信息 -->
    <van-popup
      v-model:show="pointShow"
      class="point_popup"
      :style="{ background: 'transparent' }"
      :close-on-click-overlay="false"
      :closed="hidePointInfoDailog"
    >
      <div class="pointInfoContent">
        <div v-html="pointInfos"></div>
      </div>
      <div
        class="close"
        @click="hidePointInfoDailog"
      ></div>
    </van-popup>

    <!-- 展示平面图 -->
    <van-popup
      v-model:show="planeShow"
      class="plane_popup"
      :style="{ background: 'transparent' }"
      :close-on-click-overlay="false"
      :closed="hidePlaneInfoDailog"
    >
      <!--      :style="{
        height: '460px',
        width: '100%',
        top: '55%',
        background: 'transparent',
      }" -->
      <div class="plane_container">
        <div class="image_container">
          <ul>
            <li
              v-for="(item, index) in planeArr"
              :key="index"
              v-show="item.active"
            >
              <img
                :src="item.src"
                alt=""
              />
            </li>
            <div
              class="close"
              @click="hidePlaneInfoDailog"
            ></div>
          </ul>
        </div>
        <div class="image_header">
          <ul>
            <li
              v-for="(item, index) in planeArr"
              :key="index"
              :class="{ active: item.active }"
              @click="choosePlane(index)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </van-popup>

    <!-- 展示帮助 -->
    <van-popup
      v-model:show="helpShow"
      class="help_popup"
      :style="{
        height: '180px',
        width: '75%',
        top: '50%',
        background: 'transparent'
      }"
      :close-on-click-overlay="false"
      :closed="hideHelpInfoDailog"
    >
      <div class="help_container">
        <div class="header">提示</div>
        <div class="content">
          1. 选择模型中“ <span></span> ”可以移动，支持360°旋转
          <div>2. 使用工具栏内“索引”功能，可快速切换场景</div>
        </div>
      </div>
      <div
        class="close"
        @click="hideHelpInfoDailog"
      ></div>
    </van-popup>

    <!-- 展示点位可办事项 -->
    <van-popup
      v-model:show="doThingShow"
      class="doThing_popup"
      :style="{ background: 'transparent' }"
      :close-on-click-overlay="false"
      :closed="hidePointInfoDailog"
    >
      <div class="content">
        <div
          class="doThingFirstContent"
          v-if="doThingFirst.length != 0 && Object.getOwnPropertyNames(doThingSecond).length == 0"
        >
          <div class="header">部门</div>
          <div class="list">
            <ul>
              <li
                v-for="(item, index) in doThingFirst"
                :key="index"
                @click="chooseDBSecond(item)"
              >
                <span>{{ item.unit }}</span>
                <span v-if="item.chiles">({{ item.chiles.length }})</span>
              </li>
            </ul>
          </div>
        </div>
        <div
          class="doThingSecondContent"
          v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"
        >
          <div class="header">青浦区{{ doThingSecond.unit }}</div>
          <div class="list">
            <van-collapse
              v-model="activeNames"
              accordion
            >
              <div
                v-for="(item, index) in doThingSecond.chiles"
                :key="index"
              >
                <van-collapse-item
                  :title="item.name"
                  :name="index + 1 + ''"
                  v-if="item.chiles[0].name.length != 0"
                >
                  <ul>
                    <li
                      v-for="(item_, index_) in item.chiles"
                      :key="index_"
                      @click="searchInfoAndJump(item_)"
                    >
                      {{ item_.name }}
                    </li>
                  </ul>
                </van-collapse-item>
                <span
                  class="item"
                  @click="searchInfoAndJump(item.chiles[0])"
                  v-else
                >
                  {{ item.name }}
                </span>
              </div>
            </van-collapse>
          </div>
        </div>
      </div>

      <div
        class="close"
        @click="closeDoThingPopup"
      ></div>
      <!-- v-if="Object.getOwnPropertyNames(doThingSecond).length == 0" -->
      <div
        class="back"
        @click="backDoThingPopup"
        v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"
      ></div>
    </van-popup>

    <!-- 事项库 -->
    <van-popup
      v-model:show="showEventState"
      class="plane_popup"
      :style="{
        background: 'transparent'
      }"
      :close-on-click-overlay="false"
      :closed="hideEventListDailog"
    >
      <div class="plane_container_event">
        <div
          class="close"
          @click="hideEventListDailog"
        ></div>
        <div class="paramsBox">
          关键字：<input
            type="text"
            v-model="eventData.params.where"
          /> 当前页：<input
            type="number"
            v-model="eventData.params.page"
          />
          每页数：<input
            type="number"
            v-model="eventData.params.pageSize"
          />
          <div class="paramBtuBox">
            <div
              class="paramBtu"
              @click="reSetParam()"
            >重置</div>
            <div
              class="paramBtu"
              @click="showEvent()"
            >查询</div>
          </div>
        </div>

        <p
          v-for="(item, index) in eventData.data"
          :key="'event_' + index"
        >
          <span
            v-if="(item.link_ck || item.jsfs_ck) && (item.link_ws || item.jsfs_ws)"
            @click="windowOpenNewPage(item.link_ws || item.jsfs_ws)"
          >{{ item.link_ck || item.jsfs_ck }}</span>
        </p>
      </div>
    </van-popup>

    <van-popup
      v-model:show="tipsShow"
      class="tips"
    ><van-icon
        name="warning-o"
        style="color:red;margin-right:5px"
      />当前选项暂不支持跳转</van-popup>
  </div>
</template>

<script>
import { postform } from "../utils/request.js";
export default {
  data() {
    return {
      indexesTitleShow: false,
      indexesTitleStr: "",
      funcList: [],
      viewClickHandle: null,
      indexesShow: false,
      pointShow: false,
      planeShow: false,
      showEventState: false, // 事项库弹窗显示状态
      eventData: {
        url: systemConfig.eventUrl,
        data: [],
        params: {
          tableName: "ywtb_auditfwzn",
          page: 1,
          pageSize: 20,
          where: "",
        },
      },
      helpShow: false,
      doThingShow: false,
      pointInfos: "",
      doThingFirst: [],
      doThingSecond: {},
      Exection: null,
      cameraInfo: systemConfig.pointInfo.camera,
      mark: systemConfig.pointInfo.mark,
      positionPoint: systemConfig.positionPoint,
      cameraInfoChildren: [],
      planeArr: [
        {
          name: "一层1F",
          src: "./static/images/plane/plane1.png",
          active: true,
        },
        {
          name: "二层2F",
          src: "./static/images/plane/plane2.png",
          active: false,
        },
        {
          name: "三层3F",
          src: "./static/images/plane/plane3.png",
          active: false,
        },
      ],
      activeNames: "0",
      helpActive: false,
      tipsShow: false,
    };
  },
  mounted() {
    let that = this;
    this.funcList = [
      {
        label: "热点",
        changeActive: true,
        active: true,
        clickFunc: this.loadPoint,
      },
      {
        label: "索引",
        changeActive: true,
        active: false,
        clickFunc: this.showIndexes,
      },
      {
        label: "漫游",
        changeActive: true,
        active: false,
        clickFunc: this.lookaround,
      },
      {
        label: "复位",
        changeActive: false,
        active: false,
        clickFunc: this.setViewDefaultlocation,
      },
      {
        label: "平面图",
        changeActive: true,
        active: false,
        clickFunc: this.showPlane,
      },
      // {
      //   label: "事项库",
      //   changeActive: true,
      //   active: false,
      //   clickFunc: this.showEvent,
      // },
    ];
    window.cancelLookAround = this.cancelLookAround;
    setTimeout(() => {
      that.loadPoint(that.funcList[0]);
      that.loadPositionPoint();
    }, 1000);
  },
  methods: {
    // 事项库跳转
    windowOpenNewPage(linkUrl) {
      if (linkUrl) {
        window.location.href = linkUrl;
      }
    },
    // 工具栏点击事件
    toolClickHandle(item) {
      if (item.changeActive) item.active = !item.active;
      item.clickFunc(item);
    },

    // 暂无功能的提示
    undefinedFunction() {
      this.$toast("功能暂未开通");
    },

    // 展示索引弹窗
    showIndexes() {
      this.cameraInfo = this.cameraInfo.map(function (tdd) {
        tdd.active = false;
        return tdd;
      });
      this.cameraInfo[0].active = true;
      this.cameraInfoChildren = this.cameraInfo[0].children;
      this.indexesShow = true;
    },
    // 索引页面关闭
    hideIndexesInfoDailog() {
      this.indexesShow = false;
      this.funcList[1].active = false;
    },
    // 展示平面图弹窗
    showPlane() {
      this.planeShow = true;
    },
    hidePlaneInfoDailog() {
      this.planeShow = false;
      this.funcList[4].active = false;
    },
    // 事项库查询条件重置
    reSetParam() {
      this.eventData.params.where = "";
      this.eventData.params.page = 1;
      this.eventData.params.pageSize = 20;
      this.showEvent();
    },
    // 展示事项库弹窗
    showEvent() {
      let params_ = Object.assign({}, this.eventData.params);
      if (params_.where) {
        params_.where =
          "link_ck like '%" +
          params_.where +
          "%' or jsfs_ck like '%" +
          params_.where +
          "%'";
      }
      if (params_.page > 0) {
        params_.page -= 1;
      }
      postform(this.eventData.url, params_).then((res) => {
        if (!this.showEventState) {
          this.showEventState = true;
        }
        if (res.code == 200) {
          this.eventData.data = res.content;
        } else {
          this.eventData.message = res.message;
        }
      });
    },
    hideEventListDailog() {
      this.showEventState = false;
      this.funcList[5].active = false;
    },
    // 帮助弹窗
    showHelp() {
      this.helpShow = true;
    },
    hideHelpInfoDailog() {
      this.helpShow = false;
    },

    // 漫游
    lookaround(item) {
      let that = this;
      // 清除场景激活
      clearSceneActive();
      this.$store.commit("changeFenceng", true);
      hideTitle();
      // 关闭热点
      if (this.funcList[0].active == true) {
        this.funcList[0].active = false;
        this.funcList[0].clickFunc(this.funcList[0]);
      }
      // 叫号隐藏
      if (closeJH) closeJH();
      if (hideJH) hideJH();

      closeHull(0);
      unbindLimitCameraFunc();
      if (!item.active) {
        this.cancelLookAround();
        return;
      }

      let options = {
        lng: 121.12275503870025,
        lat: 31.153914277622604,
        pitch: -35,
        height: 140,
      };
      // rotateCamera({lng:121.12275503870025, lat:31.153914277622604, pitch: -35, height: 140});
      // // 相机绕点环绕飞行
      // function rotateCamera(options){
      var position = Cesium.Cartesian3.fromDegrees(
        options.lng,
        options.lat,
        0.0
      );
      // 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
      var pitch = Cesium.Math.toRadians(options.pitch);
      // 给定飞行一周所需时间，比如30s, 那么每秒转动度数
      var angle = 360 / systemConfig.roveTime;
      // 给定相机距离点多少距离飞行
      var distance = options.height;
      var startTime = Cesium.JulianDate.fromDate(new Date());

      var stopTime = Cesium.JulianDate.addSeconds(
        startTime,
        30,
        new Cesium.JulianDate()
      );

      globalVariable.viewer.clock.startTime = startTime.clone(); // 开始时间
      globalVariable.viewer.clock.stopTime = stopTime.clone(); // 结速时间
      globalVariable.viewer.clock.currentTime = startTime.clone(); // 当前时间
      globalVariable.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
      globalVariable.viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
      // 相机的当前heading
      var initialHeading = globalVariable.viewer.camera.heading;
      this.Exection = function TimeExecution() {
        // 当前已经过去的时间，单位s
        var delTime = Cesium.JulianDate.secondsDifference(
          globalVariable.viewer.clock.currentTime,
          globalVariable.viewer.clock.startTime
        );
        // 根据过去的时间，计算偏航角的变化
        var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;

        globalVariable.viewer.camera.lookAt(
          position,
          new Cesium.HeadingPitchRange(heading, pitch, distance)
        );

        if (
          Cesium.JulianDate.compare(
            globalVariable.viewer.clock.currentTime,
            globalVariable.viewer.clock.stopTime
          ) >= 0
        ) {
          that.cancelLookAround();
        }
      };
      globalVariable.viewer.clock.onTick.addEventListener(that.Exection);
    },
    cancelLookAround() {
      this.$store.commit("changeFenceng", false);
      returnDefault();
      if (this.Exection) {
        globalVariable.viewer.clock.onTick.removeEventListener(this.Exection);
        this.Exection = null;
        globalVariable.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      }
      bindLimitCameraFunc();
      this.funcList[2].active = false;
      // 叫号显示
      if (showJH) showJH();
      if (openJH) openJH();
    },

    // 复位
    setViewDefaultlocation(time) {
      // 清除场景激活
      clearSceneActive();
      // 取消漫游
      this.cancelLookAround();
      showTitle("大门");
      return new Promise((resolve, reject) => {
        this.$flyTo({
          lon: systemConfig.mapDefault.center.lon,
          lat: systemConfig.mapDefault.center.lat,
          h: systemConfig.mapDefault.height,
          heading: systemConfig.mapDefault.heading,
          pitch: systemConfig.mapDefault.pitch,
          roll: systemConfig.mapDefault.roll,
          time: 1,
          pitchAdjustHeight: 1000,
          callback: function () {},
        }).then(() => {
          resolve();
        });
      });
    },

    // 加载点位
    loadPoint(param) {
      let that = this;
      // function getGuid() {
      //   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
      //     /[xy]/g,
      //     function (c) {
      //       var r = (Math.random() * 16) | 0,
      //         v = c == "x" ? r : (r & 0x3) | 0x8;
      //       return v.toString(16);
      //     }
      //   );
      // }
      // return;
      if (param.active) {
        if (globalVariable.hotMarkerArr.length == 0) {
          this.mark.map(function (item, index) {
            // item.name;
            // item.param.lon;
            // item.param.lat;
            // item.param.h;
            // item.type;
            let position = Cesium.Cartesian3.fromDegrees(
              item.param.lon,
              item.param.lat,
              // item.param.lat,
              item.param.h
            );
            let id = "entity_" + index;
            if (item.img.indexOf("gif") > -1) {
              let entity = globalVariable.viewer.entities.add({
                id: id,
                position: position,
                // billboard: {
                //   width: item.sizeW,
                //   height: item.sizeH,
                //   scale: 1.0,
                //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                //   pixelOffset: new Cesium.Cartesian2(0, 0),
                //   scaleByDistance: new Cesium.NearFarScalar(20, 0.6, 30, 0.8),
                // },
                // point: {
                //   show: true, //是否显示，默认显示
                //   pixelSize: 15,
                // },
                label: {
                  text: item.name,
                  font: "15pt Source Han Sans CN", //字体样式
                  fillColor: Cesium.Color.WHITE, //字体颜色
                  backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                  showBackground: true, //是否显示背景颜色
                  style: Cesium.LabelStyle.FILL, //label样式
                  outlineWidth: 2,
                  outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                  pixelOffset: new Cesium.Cartesian2(0, -20), //偏移
                },
              });
              entity.infos = item;
              entity.callback = that.pointClickHandle;
              globalVariable.point_positions[id] = entity;
              globalVariable.hotMarkerArr.push(entity);
              // that.analysisImage(item.img, entity);
            } else {
              let entity = globalVariable.viewer.entities.add({
                id: id,
                position: position,
                // billboard: {
                //   image: item.img,
                //   width: item.sizeW,
                //   height: item.sizeH,
                //   scale: 1.0,
                //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                //   pixelOffset: new Cesium.Cartesian2(0, 0),
                // },
                label: {
                  text: item.name,
                  font: "15pt Source Han Sans CN", //字体样式
                  fillColor: Cesium.Color.WHITE, //字体颜色
                  backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                  showBackground: true, //是否显示背景颜色
                  style: Cesium.LabelStyle.FILL, //label样式
                  outlineWidth: 2,
                  outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                  pixelOffset: new Cesium.Cartesian2(0, 23), //偏移
                },
              });
              entity.infos = item;
              entity.callback = that.pointClickHandle;
              globalVariable.point_positions[id] = entity;
              globalVariable.hotMarkerArr.push(entity);
            }
            // that.addGIF2(item, position, id);
          });
        } else {
          if (globalVariable.hotMarkerArr.length > 0)
            globalVariable.hotMarkerArr.map(function (item) {
              item.show = true;
            });
        }
      } else {
        if (globalVariable.hotMarkerArr.length > 0)
          globalVariable.hotMarkerArr.map(function (item) {
            item.show = false;
          });
      }
      return;
      globalVariable.viewer.scene.postRender.addEventListener(function () {
        globalVariable.hotMarkerArr.map(function (item) {
          var canvasPosition =
            globalVariable.viewer.scene.cartesianToCanvasCoordinates(
              item._position._value,
              new Cesium.Cartesian2()
            );
          if (
            Cesium.defined(canvasPosition) &&
            !isNaN(canvasPosition.x) &&
            !isNaN(canvasPosition.y)
          ) {
            document.getElementsByClassName(item.id)[0].style.display = "block";
            if (!document.getElementsByClassName(item.id)) return;
            document.getElementsByClassName(item.id)[0].style.top = `${
              canvasPosition.y - 15
            }px`;
            document.getElementsByClassName(item.id)[0].style.left = `${
              canvasPosition.x - 15
            }px`;
          } else {
            document.getElementsByClassName(item.id)[0].style.display = "none";
          }
        });
      });
    },

    addGIF2(item, position, id) {
      let c = globalVariable.viewer.scene.cartesianToCanvasCoordinates(
        position,
        new Cesium.Cartesian2()
      );
      //创建一个div
      var div = document.createElement("div");
      //为div创建属性class = "test"
      var divattr = document.createAttribute("class");
      divattr.value = "hotpoint image " + id;
      //把属性class = "test"添加到div
      div.setAttributeNode(divattr);

      document.getElementById("cesiumContainer").appendChild(div);
      //创建一个值为test的按钮
      var img = document.createElement("img");
      var imgAttr = document.createAttribute("src");
      imgAttr.value = item.img;
      img.style.width = "100%";
      img.style.height = "100%";
      img.setAttributeNode(imgAttr);

      div.appendChild(img);

      div.style.position = "absolute";
      div.style.width = "30px";
      div.style.height = "30px";
      div.style.top = `${c.y - 15}px`;
      div.style.left = `${c.x - 15}px`;
    },

    // 关闭可办事项
    closeDoThingPopup() {
      this.doThingShow = false;
      this.doThingFirst = [];
      this.doThingSecond = {};
    },
    // 返回至可办事项一级菜单
    backDoThingPopup() {
      this.doThingSecond = {};
    },
    // 选择可办事项展示
    chooseDBSecond(item) {
      this.doThingSecond = item;
    },
    // 可办事项地址查询并跳转
    searchInfoAndJump(item) {
      let that = this;
      if (item.executeNumber.length < 6) {
        // this.$message({
        //   type: "info",
        //   messsage: "当前选项无法跳转！",
        // });
        this.tipsShow = true;
        setTimeout(() => {
          that.tipsShow = false;
        }, 1500);
        return;
      }
      let params = {
        page: 0,
        pageSize: 10,
        tableName: "ywtb_auditfwzn",
        where: "item_code = '" + item.executeNumber + "'",
      };
      postform(this.eventData.url, params).then((res) => {
        if (res.code == 200) {
          // window.open(res.content[0].login_url); // 在safari中失效
          that.setCLJ(res.content[0].login_url);
        }
      });
    },

    // 页面跳转（为了结局在safari浏览器中无法跳转的问题）
    setCLJ(url) {
      let dom = document.createElement("a");
      dom.setAttribute("href", url);
      document.body.appendChild(dom);
      dom.click();
      setTimeout(() => {
        document.body.removeChild(dom);
      }, 100);
    },

    // 点位触发事件
    pointClickHandle(item) {
      let that = this;
      switch (item.type) {
        case 1:
          // 弹窗
          let strTo = ``;
          item.text.map(function (str) {
            strTo += str + "<br>";
          });
          this.pointInfos = strTo;
          this.pointShow = true;
          break;
        case 2:
          // 跳转
          if (this.$store.state.IsPC) {
            let openUrl = item.pc_url ? item.pc_url : item.url;
            window.open(openUrl, "_blank");
          } else {
            window.location.href = item.pc_url ? item.pc_url : item.url;
          }
          break;
        case 3:
          break;
        case 4:
          // 点位触发camera转换
          this.$flyTo({
            lon: item.camera.lon,
            lat: item.camera.lat,
            h: item.camera.h,
            heading: item.camera.heading,
            pitch: item.camera.pitch,
            roll: item.camera.roll,
            time: 1,
            pitchAdjustHeight: 1000,
            details: item,
            callback: function (item) {
              // closeHull(item.camera.sceneType);
              showTitle(item.details.areaName);
            },
          }).then(() => {});
          break;
        case 5:
          $.getJSON(item.json, function (arr) {
            that.doThingFirst = arr;
            that.doThingShow = true;
          });
          break;
        default:
          break;
      }
    },

    // 加载跳转点位
    loadPositionPoint() {
      let that = this;

      this.positionPoint.map(function (item, index) {
        // console.log(
        //   item.areaName +
        //     "：" +
        //     Cesium.Math.toDegrees(item.lon) +
        //     ", " +
        //     Cesium.Math.toDegrees(item.lat)
        // );
        let id = "jump_" + index;
        let entity = globalVariable.viewer.entities.add({
          id: id,
          position: Cesium.Cartesian3.fromRadians(item.lon, item.lat, item.h),
          billboard: {
            image: "./static/images/position_point.png",
            width: 36,
            height: 18,
            scale: 1.0,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, 0),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              15
            ),
          },
          // label: {
          //   text: item.areaName != "" ? item.areaName : "" + (index + 1),
          //   // text: "" + (index + 1),
          //   font: "10pt Source Han Sans CN", //字体样式
          //   fillColor: Cesium.Color.WHITE, //字体颜色
          //   backgroundColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
          //   showBackground: false, //是否显示背景颜色
          //   style: Cesium.LabelStyle.FILL, //label样式
          //   outlineWidth: 2,
          //   outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
          //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
          //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
          //   pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
          // },
        });
        entity.infos = item;
        entity.callback = that.jumpPositionEvent;
        globalVariable.point_positions[id] = entity;
        globalVariable.jumpPointArr.push(entity);
      });
    },

    // 跳转事件触发
    jumpPositionEvent(item) {
      showTitle(item.areaName);
      this.$flyTo({
        lon: Cesium.Math.toDegrees(item.lon),
        lat: Cesium.Math.toDegrees(item.lat),
        h: item.viewH,
        heading: Cesium.Math.toDegrees(globalVariable.viewer.camera.heading),
        pitch: 0, // globalVariable.viewer.camera.pitch,
        roll: 0, // globalVariable.viewer.camera.roll,
        time: 1,
        pitchAdjustHeight: 1000,
        details: item,
        callback: function () {},
      }).then(() => {
        // resolve();
      });
    },

    // 解析图片
    analysisImage(src, entity) {
      // return new Promise((resolve, reject) => {
      // if (src.indexOf("gif") > -1) {
      let can = document.createElement("canvas");
      let gif = gifler(src);
      gif.animate(can);
      gif.frames(can, function (ctx, frame) {
        // console.log(frame.buffer.toDataURL());
        entity.billboard.image = new Cesium.CallbackProperty(() => {
          // console.log(frame.buffer.toDataURL());
          return frame.buffer.toDataURL();
        }, false);
        // resolve(d);
      });
      // } else {
      //   resolve(src);
      // }
      // });
    },

    // 切换视角
    changeView(item) {
      // 清除场景激活
      clearSceneActive();
      this.cancelLookAround();
      if (item.lon == null) {
        this.$toast("暂无当前位置信息");
        return;
      }
      if (item.showTitle) {
        showTitle(item.name);
      }

      this.$flyTo({
        lon: item.lon,
        lat: item.lat,
        h: item.h,
        heading: item.heading,
        pitch: item.pitch,
        roll: item.roll,
        time: 1,
        pitchAdjustHeight: 1000,
        details: item,
        callback: function (item) {
          closeHull(item.details.sceneType);
        },
      });

      this.indexesShow = false;
      this.funcList[1].active = false;
    },

    // 切换索引楼层
    changeFloor(item) {
      this.cameraInfo = this.cameraInfo.map(function (tdd) {
        tdd.active = false;
        return tdd;
      });
      item.active = true;
      this.cameraInfoChildren = item.children;
    },

    hidePointInfoDailog() {
      this.pointShow = false;
    },

    // 切换楼层
    choosePlane(index) {
      this.planeArr = this.planeArr.map(function (item, ind) {
        if (index == ind) {
          item.active = true;
        } else {
          item.active = false;
        }
        return item;
      });
    },
  },

  watch: {
    helpShow: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.helpActive = true;
        } else {
          this.helpActive = false;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (orientation: landscape) {
  .tool {
    position: absolute;
    right: 15px;
    top: 20px !important;
    z-index: 1;
  }
}

.tool {
  position: absolute;
  right: 15px !important;
  top: 35px !important;
  z-index: 1;
  .func {
    overflow: hidden;
    li {
      width: 30px;
      height: 30px;
      overflow: hidden;
      font-weight: bold;
      position: relative;
      margin-bottom: 6px;
      p {
        width: 100%;
        height: 100%;
      }
      &:nth-child(1) {
        p {
          background: url(~@/assets/img/tool/new_tb/hotpoint.png) center
            center/100% 100% no-repeat;
        }
        &.active p {
          background: url(~@/assets/img/tool/new_tb/hotpoint_active.png) center
            center/100% 100% no-repeat;
        }
      }
      &:nth-child(2) {
        p {
          background: url(~@/assets/img/tool/new_tb/indexes.png) center
            center/100% 100% no-repeat;
        }
        &.active p {
          background: url(~@/assets/img/tool/new_tb/indexes_active.png) center
            center/100% 100% no-repeat;
        }
      }
      &:nth-child(3) {
        p {
          background: url(~@/assets/img/tool/new_tb/pan.png) center center/100%
            100% no-repeat;
        }
        &.active p {
          background: url(~@/assets/img/tool/new_tb/pan_active.png) center
            center/100% 100% no-repeat;
        }
      }
      &:nth-child(4) {
        p {
          background: url(~@/assets/img/tool/new_tb/reposition.png) center
            center/100% 100% no-repeat;
        }
        &.active p {
          background: url(~@/assets/img/tool/new_tb/reposition_active.png)
            center center/100% 100% no-repeat;
        }
      }
      &:nth-child(5) {
        p {
          background: url(~@/assets/img/tool/new_tb/plan.png) center center/100%
            100% no-repeat;
        }
        &.active p {
          background: url(~@/assets/img/tool/new_tb/plan_active.png) center
            center/100% 100% no-repeat;
        }
      }
      &:nth-child(6) {
        p {
          background: url(~@/assets/img/tool/new_tb/event_library.png) center
            center/100% 100% no-repeat;
        }
        &.active p {
          background: url(~@/assets/img/tool/new_tb/event_library_active.png)
            center center/100% 100% no-repeat;
        }
      }
    }
  }
  .help {
    width: 50px;
    height: 50px;
    background: url(~@/assets/img/tool/new_tb/help.png) center center / 100%
      100% no-repeat;
    &.active {
      background: url(~@/assets/img/tool/new_tb/help_active.png) center
        center/100% 100% no-repeat;
    }
  }

  :deep(.indexesListContent) {
    width: 394px;
    height: 380px;
    .indexesList {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 34px);
      background: #33333366;
      border-radius: 2px;
      .listContent {
        padding: 5px 20px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        .header {
          width: 265.2px;
          height: 22.8px;
          overflow: hidden;
          position: relative;
          text-align: center;
          color: #ffffff;
          margin: 21px auto;
          background: url(~@/assets/img/tool/indexes_header.png) center center /
            100% 100% no-repeat;
        }
        .list_container {
          width: 100%;
          // height: 50px;
          height: calc(100% - 61px);
          overflow: hidden;
          overflow-y: auto;
          .first_content {
            overflow: hidden;
            .title {
              color: #ffffff;
              font-size: 20px;
            }
          }
          li {
            width: 150px;
            height: 50px;
            margin: 5px calc(50% - 150px);
            float: left;
            line-height: 50px;
            text-align: center;
            font-size: 15px;
            color: #fefeff;
            position: relative;
            background: #ffffff33;
            border-radius: 2px;
            &:nth-child(2n) {
              margin-right: 0px;
            }
            &:nth-child(2n-1) {
              margin-left: 0px;
            }
          }
        }
      }
    }
    .close {
      width: 16px;
      height: 16px;
      margin: 4px 4px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
        no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }
  :deep(.point_popup) {
    width: 394px;
    height: 380px;

    .pointInfoContent {
      width: 100%;
      height: 100%;
      font-size: 20px;
      padding: 20px 25px;
      box-sizing: border-box;
      line-height: 30px;
      color: #ffffff;
      background: #33333366;
      border-radius: 2px;
      div {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
    }
    .close {
      width: 16px;
      height: 16px;
      margin: 4px 4px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
        no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }
  :deep(.plane_popup) {
    width: 394px;
    height: 380px;
    .plane_container {
      width: 100%;
      &_event {
        padding: 1.5rem 1rem;
        width: calc(100% - 2rem);
        max-height: calc(100% - 3rem);
        overflow-x: hidden;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 1rem;
        position: absolute;
        p {
          color: #ffffff;
          margin: 0.5rem 0;
          font-size: 1.2rem;
          font-weight: bold;
        }
        .paramsBox {
          max-width: calc(100% - 20px);
          font-size: 1rem;
          color: #dbdbdb;
          position: relative;
          input {
            color: #333;
          }
          .paramBtuBox {
            display: flex;
            justify-content: flex-end;
            .paramBtu {
              margin: 0.2rem 0.6rem;
              padding: 0.3rem 0.5rem;
              color: #ffffff;
              font-size: 1.2rem;
              background: #1fb4ffaa;
              border-radius: 0.3rem;
            }
          }
        }
      }
    }
    .image_header {
      color: #dbdbdb;
      font-size: 16px;
      height: 32px;
      background: rgba(0, 0, 0, 0.4);
      margin-top: 10px;
      ul {
        display: block;
        width: fit-content;
        height: 32px;
        margin: 0 auto;
        li {
          float: left;
          padding: 5px 10px;
          margin-right: 10px;
          height: 28px;
          box-sizing: border-box;
          font-size: 12px;
          &.active {
            border-bottom: 2px solid #ffc125;
            color: #ffffff;
          }
        }
      }
    }
    .image_container {
      display: block;
      width: 394px;
      height: 280px;
      margin: 0 auto;
      position: relative;
      background: #33333366;
      border-radius: 2px;
      ul {
        display: block;
        width: 100%;
        height: 100%;
        li {
          display: block;
          width: 100%;
          height: 100%;
          padding: 10px 10px;
          box-sizing: border-box;
          img {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            object-fit: contain;
          }
        }
      }
    }
    .close {
      width: 16px;
      height: 16px;
      margin: 4px 4px;
      margin-right: 10px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
        no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }
  :deep(.help_popup) {
    width: 394px;
    height: 380px;
    .help_container {
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: auto;
      width: 100%;
      height: 100%;
      background: #33333366;
      border-radius: 2px;
      .header {
        color: #ffffff;
        font-size: 18px;
        margin-top: 10px;
        text-align: center;
        font-weight: bold;
      }
      .content {
        color: #ffffff;
        font-size: 16px;
        line-height: 32px;
        padding: 0 15px;
        span {
          display: inline-block;
          background: #1fb4ff;
          width: 16px;
          height: 16px;
          border-radius: 16px;
        }
      }
    }
    .close {
      width: 16px;
      height: 16px;
      margin: 4px 4px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
        no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }
  :deep(.doThing_popup) {
    width: 394px;
    height: 380px;
    .content {
      width: 100%;
      height: 100%;
      font-size: 20px;
      padding: 25px 0px;
      box-sizing: border-box;
      line-height: 30px;
      color: #ffffff;
      background: #33333366;
      border-radius: 2px;
      .doThingFirstContent {
        width: 100%;
        height: 100%;
        .header {
          text-align: center;
          height: 30px;
          letter-spacing: 30px;
          text-indent: 30px;
        }
        .list {
          height: calc(100% - 30px);
          overflow: hidden;
          overflow-y: auto;
          li {
            width: 150px;
            height: 50px;
            margin: 5px calc(25% - 75px);
            float: left;
            line-height: 48.05px;
            text-align: center;
            font-size: 15px;
            color: #fefeff;
            position: relative;
            &::after {
              content: "";
              height: 2px;
              width: 120px;
              position: absolute;
              background: url(~@/assets/img/tool/indexes_point_bottom.png)
                center center / 100% 100% no-repeat;
              bottom: 0px;
              left: 15px;
            }
            &.active {
              color: #ffc44d;
              background: url(~@/assets/img/tool/indexes_point_active.png)
                center center / 100% 100% no-repeat;
              &::after {
                display: none;
              }
            }
          }
        }
      }
      .doThingSecondContent {
        width: 100%;
        height: 100%;
        .header {
          text-align: center;
          height: 30px;
          letter-spacing: 8px;
          text-indent: 8px;
        }
        .list {
          height: calc(100% - 30px);
          overflow: hidden;
          overflow-y: auto;
          .van-collapse {
            .item {
              display: inline-block;
              width: calc(100% - 32px);
              height: 24px;
              line-height: 24px;
              padding: 10px 0px;
              margin: 0px 16px;
              font-size: 12px;
              position: relative;
              border-bottom: 1px solid #ffffff;
            }
            .van-collapse-item {
              .van-cell {
                background: transparent;
                color: #ffffff;
                margin: 0px 16px;
                padding: 10px 0px;
                width: calc(100% - 32px);
                border-bottom: 1px solid #ffffff;
                font-size: 12px;
                .van-cell__right-icon:before {
                  color: #ffffff;
                }
                .van-cell__title {
                  line-height: 20.75px;
                }
              }
              .van-collapse-item__content {
                background: transparent;
                padding-top: 0px;
                padding-bottom: 0px;
                margin: 0px 16px;
                padding: 0 0;
                li {
                  min-height: 20.75px;
                  line-height: 20.75px;
                  padding: 10px 0px;
                  color: #ffffff;
                  border-bottom: 1px solid rgba(235, 237, 240);
                  text-indent: 20px;
                  font-size: 12px;
                }
              }
              :deep(.van-collapse-item--border:after) {
                border-top: 0px;
              }
            }
          }
        }
      }
    }
    .close {
      width: 16px;
      height: 16px;
      margin: 4px 4px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
        no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .back {
      width: 24px;
      height: 24px;
      background: url(~@/assets/img/tool/back.png) center center / 100% 100%
        no-repeat;
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: 50px;
    }
  }
}
:deep(.hotpoint) {
  img {
    width: 100%;
    height: 100%;
  }
}
:deep(.tips) {
  font-size: 8px;
  padding: 5px 5px;
  border-radius: 2px;
  top: 4vh;
  left: 14vh;
}
</style>