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"
    >
      <!-- 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="{
        height: '460px',
        width: '100%',
        top: '55%',
        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_"
                    >
                      {{ item_.name }}
                    </li>
                  </ul>
                </van-collapse-item>
                <span
                  class="item"
                  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="{
        height: '460px',
        width: '100%',
        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"
          /><span
            class="paramBtu"
            @click="reSetParam()"
          >重置</span>
          <span
            class="paramBtu"
            @click="getEventData()"
          >查询</span>
        </div>
        <div class="eventDataList">
          <div class="eventMessage">
            <span
              v-show="eventData.message"
              style="font-size: 1rem; color: #ccc"
            >{{ eventData.message }}</span>
          </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>
        <div class="bottomToPageBox">
          <div
            :class="eventData.params.page > 1 ? 'toPageBtu' : 'unToPageBtu'"
            @click="changePage(-1)"
          >上一页</div>
          <div>第{{ eventData.params.page }}页</div>
          <div
            :class="!eventData.message ? 'toPageBtu' : 'unToPageBtu'"
            @click="changePage(1)"
          >下一页</div>
        </div>
      </div>
    </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: [],
        message: "",
        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,
    };
  },
  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: {
    // 工具栏点击事件
    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;
    },
    // 事项库跳转
    windowOpenNewPage(linkUrl) {
      if (linkUrl) {
        window.location.href = linkUrl;
      }
    },
    // 上一页，下一页
    changePage(num) {
      if (this.eventData.params.page + num > 0) {
        this.eventData.params.page += num;
        this.showEvent();
      }
    },
    // 事项库查询条件重置
    reSetParam() {
      this.eventData.params.where = "";
      this.eventData.params.page = 1;
      this.eventData.params.pageSize = 20;
      this.showEvent();
    },
    getEventData() {
      this.eventData.data = [];
      this.eventData.params.page = 1;
      this.eventData.params.pageSize = 20;
      this.showEvent();
    },
    // 展示事项库弹窗
    showEvent() {
      this.eventData.message = "";
      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;
        }
      });
    },
    hideEventListDailog() {
      this.showEventState = false;
      this.funcList[5].active = false;
    },
    hidePlaneInfoDailog() {
      this.planeShow = false;
      this.funcList[4].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]);
      }
      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;
    },

    // 复位
    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;
    },

    // 点位触发事件
    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:
          // 跳转
          window.location.href = 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;
  top: 35px;
  z-index: 1;
  .func {
    // border-radius: 20px;
    // background: #f3f3f1;
    overflow: hidden;
    li {
      width: 50px;
      height: 50px;
      font-size: 14px;
      line-height: 20px;
      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: 394px;
    height: 500px;
    .indexesList {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 34px);
      // background: url(~@/assets/img/tool/indexes_background.png) center center /
      //   100% 100% no-repeat;
      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;
        }
        // .title_container {
        //   height: 36px;
        //   width: 100%;
        //   ul {
        //     display: block;
        //     margin: 0 auto;
        //     height: 36px;
        //     width: fit-content;
        //     li {
        //       width: 75px;
        //       height: 30px;
        //       line-height: 30px;
        //       float: left;
        //       margin: 0 5px;
        //       text-align: center;
        //       font-size: 18px;
        //       border-radius: 5px;
        //       color: #c8b487;
        //       background: #f3f3f1;
        //       &.active {
        //         color: #ffffff;
        //         background: #c9b57d;
        //       }
        //       &:first-child {
        //         margin-left: 0px;
        //       }
        //       &:last-child {
        //         margin-right: 0px;
        //       }
        //     }
        //   }
        // }
        .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;
            // &::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;
            //   }
            // }
            &: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: url(~@/assets/img/tool/indexes_background.png) center center /
      //   100% 100% no-repeat;
      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) {
    .plane_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;
        }
      }
    }
    .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: 32px;
          box-sizing: border-box;
          &.active {
            border-bottom: 2px solid #ffc125;
            color: #ffffff;
          }
        }
      }
    }
    .image_container {
      display: block;
      // width: 394px;
      height: 280px;
      width: 100%;
      // height: 100%;
      margin: 0 auto;
      position: relative;
      // background: url(~@/assets/img/plane/plane_background.png) center center /
      //   100% 100% no-repeat;
      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) {
    .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: 394px;
    height: 450px;
    .content {
      width: 100%;
      height: 100%;
      font-size: 20px;
      padding: 25px 0px;
      box-sizing: border-box;
      line-height: 30px;
      color: #ffffff;
      // background: url(~@/assets/img/tool/indexes_background.png) center center /
      //   100% 100% no-repeat;
      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: 50px;
            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;
              }
            }
            // &:nth-child(2n) {
            //   margin-right: 0px;
            // }
            // &:nth-child(2n-1) {
            //   margin-left: 0px;
            // }
          }
        }
      }
      .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: 14px;
              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__right-icon:before {
                  color: #ffffff;
                }
              }
              .van-collapse-item__content {
                background: transparent;
                padding-top: 0px;
                padding-bottom: 0px;
                li {
                  height: 40px;
                  line-height: 40px;
                  color: #ffffff;
                  border-bottom: 1px solid rgba(235, 237, 240);
                  text-indent: 20px;
                }
              }
              :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%;
  }
}
</style>