web_qp_phone_ui/src/components/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">
      <div class="indexesList">
        <div class="listContent">
          <div class="header"></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>
          </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">
      <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>

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

    <!-- 事项库 -->
    <van-popup v-model:show="showEventState" class="event_popup" :style="{
      background: 'transparent',
    }" :close-on-click-overlay="false" :closed="hideEventListDailog">
      <div class="event_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>

    <!-- 视频帮办 -->
    <van-popup v-model:show="videoHelpShow" class="videoHelp">
      <iframe :src="videoHelpUrl"></iframe>
      <div class="close" @click="videoHelpShow = false"></div>
    </van-popup>
  </div>
</template>

<script>
import { get, postform } from "../utils/request.js";
// import api from "@/api/content";
// 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,
      videoHelpShow: false,
      videoHelpUrl: "",
    };
  },
  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.forEach((item) => {
            if (
              (item.link_ck || item.jsfs_ck) &&
              (item.link_ws || item.jsfs_ws)
            ) {
              this.eventData.data.push(item);
            }
          });
        } else {
          this.eventData.message = res.message;
        }
      });
      // api.getEventStore(params_).then(
      //   (res) => {
      //     if (!this.showEventState) {
      //       this.showEventState = true;
      //     }
      //     if (res.code == 200) {
      //       this.eventData.data = res.content;
      //     } else {
      //       this.eventData.message = res.message;
      //     }
      //   },
      //   function (err) {
      //     console.log(err);
      //   }
      // );
    },
    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: "10pt 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: "10pt 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.$toast({
          message: "当前选项暂不支持跳转",
        });
        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);
        }
      });
      // api.getEventStoreJumpUrl(params).then(
      //   (res) => {
      //     if (res.code == 200) {
      //       // window.open(res.content[0].login_url); // 在safari中失效
      //       that.setCLJ(res.content[0].login_url);
      //     }
      //   },
      //   function (error) {
      //     console.log(error);
      //     that.tipsShow = true;
      //     setTimeout(() => {
      //       that.tipsShow = false;
      //     }, 1500);
      //   }
      // );
    },

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

      // this.$stroe.commit("changeJumpUrl", url);
      // this.$store.commit("changeJumpUrl", url);
      // this.$store.commit("changeIframeJudge", true);

      if (this.$store.state.IsPC) {
        let openUrl = url;
        window.open(openUrl, "_blank");
      } else {
        window.location.href = url;
      }
    },

    // 点位触发事件
    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;
          // });
          get(item.json).then((arr) => {
            that.doThingFirst = arr;
            that.doThingShow = true;
          });
          break;
        case 6:
          // 打开iframe

          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;
          }
          // this.videoHelpUrl = item.url;
          // this.videoHelpShow = 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;
        }
      },
    },
    videoHelpShow(newVal, oldVal) {
      if (!newVal) {
        this.videoHelpUrl = "";
      }
    },
  },
};
</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;
  top: 70px;
  z-index: 1;

  .func {
    // border-radius: 20px;
    // background: #f3f3f1;
    overflow: hidden;

    li {
      width: 100px;
      height: 100px;
      font-size: 14px;
      line-height: 50px;
      text-align: center;
      overflow: hidden;
      font-weight: bold;
      position: relative;
      margin-bottom: 10px;

      // &::after {
      //   content: "";
      //   height: 2px;
      //   width: calc(100% - 8px);
      //   position: absolute;
      //   background: #ddd0ba;
      //   bottom: 1px;
      //   left: 4px;
      // }
      // &:first-child {
      // }
      // &:last-child {
      //   border-bottom: 0px solid #ddd0ba;
      //   &::after {
      //     display: none;
      //   }
      // }
      p {
        // width: 30px;
        // height: 30px;
        // margin-left: 10px;
        // margin-top: 10px;
        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: 80vw;
    height: 80vw;

    .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: 447.36px;
          height: 41.04px;
          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: calc(100% - 61px);
          overflow: hidden;
          overflow-y: auto;

          .first_content {
            overflow: hidden;

            .title {
              color: #ffffff;
              font-size: 32px;
            }
          }

          li {
            width: calc(50% - 40px);
            height: 64px;
            margin: 5px calc(25% - 155px);
            float: left;
            line-height: 64px;
            text-align: center;
            font-size: 32px;
            color: #fefeff;
            position: relative;
            background: #ffffff33;
            border-radius: 2px;
            // &:nth-child(2n) {
            //   margin-right: 0px;
            // }

            // &:nth-child(2n-1) {
            //   margin-left: 0px;
            // }
          }
        }
      }
    }

    .close {
      width: 32px;
      height: 32px;
      margin: 8px 8px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }

  :deep(.point_popup) {
    width: 80vw;
    height: 80vw;

    .pointInfoContent {
      width: 100%;
      height: 100%;
      font-size: 32px;
      padding: 32px 32px;
      box-sizing: border-box;
      line-height: 64px;
      color: #ffffff;
      background: #33333366;
      border-radius: 2px;

      div {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
    }

    .close {
      width: 32px;
      height: 32px;
      margin: 8px 8px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }

  :deep(.plane_popup) {
    width: 80vw;
    height: 80vw;

    .image_header {
      color: #dbdbdb;
      font-size: 30px;
      height: 56px;
      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 16px;
          margin-right: 16px;
          height: 56px;
          box-sizing: border-box;

          &.active {
            border-bottom: 4px solid #ffc125;
            color: #ffffff;
          }
        }
      }
    }

    .image_container {
      display: block;
      height: 540px;
      width: 100%;
      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: 32px;
      height: 32px;
      margin: 8px 8px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }

  :deep(.event_popup) {
    width: 80vw;
    height: 80vw;

    .event_container_event {
      padding: 1.5rem 1rem;
      height: calc(100% - 3rem);
      width: calc(100% - 3rem);
      margin-left: 0.5rem;
      background: rgba(0, 0, 0, 0.4);
      // border-radius: 1rem;
      position: absolute;

      p {
        color: #ffffff;
        margin: 0.5rem 0;
        font-size: 1rem;
        font-weight: bold;
      }

      .paramsBox {
        max-width: calc(100% - 20px);
        font-size: 1rem;
        color: #666;
        position: relative;
        display: flex;
        align-self: center;

        input {
          color: #333;
        }

        .paramBtu {
          margin: 0rem 0.3rem;
          padding: 0.2rem 0.3rem;
          color: #ffffff;
          font-size: 1.2rem;
          background: #1fb4ffaa;
          border-radius: 0.3rem;
        }
      }

      .eventDataList {
        max-height: calc(100% - 3rem);
        overflow-x: hidden;

        p {
          padding-bottom: 2px;
          border-bottom: 1px solid #fff;
          /* 1.设置宽度 */
          // background-color: #ffffff32;
          line-height: 30px;
          /* 2.设置旧版弹性盒 */
          display: -webkit-box;
          /* 3. 控制行数*/
          -webkit-line-clamp: 2;
          /* 4. 设置子元素的排列方式  垂直排列*/
          -webkit-box-orient: vertical;
          /* 5.溢出隐藏 */
          overflow: hidden;
        }

        .eventMessage {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-content: center;
        }
      }

      .bottomToPageBox {
        width: calc(100% - 2rem);
        position: absolute;
        bottom: 0.5rem;
        line-height: 1rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #dbdbdb;

        div {
          padding: 0.2rem 0.3rem;
          border-radius: 0.1rem;
        }

        .toPageBtu {
          color: #1fb4ff;
          text-decoration: underline;
          background-color: #1fb4ff64;
        }

        .unToPageBtu {
          color: #ccc;
          background-color: #cccccc64;
        }
      }
    }

    .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) {
    .help_container {
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: auto;
      width: 100%;
      height: 100%;
      // background: url(~@/assets/img/tool/indexes_background.png) center center /
      //   100% 100% no-repeat;
      background: #33333366;
      border-radius: 2px;

      .header {
        // color: #c8b487;
        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: 80vw;
    height: 80vw;

    .content {
      width: 100%;
      height: 100%;
      font-size: 32px;
      padding: 32px 32px;
      box-sizing: border-box;
      line-height: 64px;
      color: #ffffff;
      background: #33333366;
      border-radius: 2px;

      .doThingFirstContent {
        width: 100%;
        height: 100%;

        .header {
          text-align: center;
          height: 64px;
          letter-spacing: 64px;
          text-indent: 64px;
        }

        .list {
          height: calc(100% - 30px);
          overflow: hidden;
          overflow-y: auto;

          li {
            width: calc(50% - 32px - 60px);
            height: 64px;
            margin: 5px calc(25% - 120px);
            float: left;
            line-height: 64px;
            text-align: center;
            font-size: 32px;
            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: 64px;
          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: 64px;
              line-height: 64px;
              padding: 10px 0px;
              margin: 0px 16px;
              font-size: 32px;
              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;

                .van-cell__title {
                  font-size: 32px;
                  line-height: 40px;
                }

                .van-cell__right-icon:before {
                  color: #ffffff;
                }
              }

              .van-collapse-item__content {
                background: transparent;
                padding-top: 0px;
                padding-bottom: 0px;

                li {
                  height: 56px;
                  line-height: 56px;
                  font-size: 32px;
                  color: #ffffff;
                  border-bottom: 1px solid rgba(235, 237, 240);
                  text-indent: 20px;
                }
              }

              :deep(.van-collapse-item--border:after) {
                border-top: 0px;
              }
            }
          }
        }
      }
    }

    .close {
      width: 32px;
      height: 32px;
      margin: 8px 8px;
      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
      position: absolute;
      top: 0px;
      right: 0px;
    }

    .back {
      width: 40px;
      height: 40px;
      margin: 8px 8px;
      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(.videoHelp) {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform: none;

  iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
  }

  .close {
    width: 64px;
    height: 64px;
    margin: 10px 30px;
    background: #c5c5c5 url(~@/assets/img/tool/close.png) center center / 60% 60% no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999;
    border-radius: 32px;
  }
}
</style>