Merge branch 'master' of http://192.168.0.105:10010/r/school-web

shuishen

2022-03-18 bf58722dfd03ea1513f3acc7331d4d4403fca76e

 src/components/mobileLeftNav/index.vue

@@ -1,7 +1,7 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
  <div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="iconHide = !iconHide">
    <div class="m-left-coutrol" @click="changeIconHide">
      <i :class="icons"></i>
    </div>
    <ul>
@@ -9,46 +9,38 @@
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
        v-show="!item.notShow"
      >
        <img :style="[imgStyle]" :src="item.img" alt="" />
        <img :style="[imgStyle]" :src="item.img" alt />
        <span>{{ item.label }}</span>
      </li>
    </ul>
    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow1"
      id="mobile-map_MP1"
    >
      <div class="mobile-popup-imgs-heard">
        <img :src="url1" alt="" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url1"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList1"
        >
        </el-image>
        南门口
      </div>
      <div class="mobile-popup-control">
        <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs1"
          >图集</el-link
        >
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-map-location">实景</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-aim" @click="goOn1">去这</el-link>
      </div>
    </div>
    <!-- 地图图标弹窗↑ -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  // getListdoor, //出入
  // getListaed, //AED
  // getListparking, //停车场
  getListarchitecture, // 全景
  getListarchitecture1, // 标签
  getListroad, // 道路
  getListcat, // 出入-AED-停车场
} from "@/api/mobile/piont/index";
import { getListVideo } from "@/api/mobile/monitor/index";

window.tagLayer = null;
window.wayLayer = null;
window.sceneLayer = null;
window.videoLayer = null;
window.activityLayer = null;
window.aedLayer = null;
window.parkLayer = null;
window.comeLayer = null;
export default {
  name: "mobileLeftNav",
  computed: {},
  watch: {
    iconHide() {
      if (this.iconHide) {
@@ -61,45 +53,48 @@
        this.imgStyle.right = "0";
      }
    },
    seeRight() {
      if (this.seeRight) {
        this.leftNavData[0].flag = false;
        this.leftNavData[0].img = this.leftNavData[0].checked;
        window[this.leftNavData[0].layer].show = true;
      } else {
        const lnd = this.leftNavData;
        for (const k in lnd) {
          if (window[this.leftNavData[k].layer]._show) {
            // console.log(lnd[k].label, "所有开启");
            this.leftNavData[k].flag = false;
            this.leftNavData[k].img = this.leftNavData[k].normal;
            window[this.leftNavData[k].layer].show = false;
          }
        }
      }
    },
  },
  computed: {
    ...mapGetters(["iconHide", "dimensionData", "seeRight"]),
  },
  data() {
    return {
      popupWindow1: false,
      url1: "/img/job/one.jpg",
      srcList1: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      icons: "el-icon-d-arrow-right",
      iconHide: false,
      navStyle: {
        right: "0px",
      },
      imgStyle: {
        right: "0",
      },
      //   coutrolStyle: {
      //     position: " absolute",
      //     left: "-26px",
      //     top: "114px",
      //     right: "auto",
      //     width: "25px",
      //     height: "60px",
      //     backgroundColor: "#fff",
      //     borderRadius: "10px",
      //     display: "flex",
      //     alignItems: "center",
      //     justifyContent: "center",
      //     transition: "left 3s",
      //   },
      leftNavData: [
        {
          flag: false,
          flag: true,
          label: "标签",
          img: "/img/leftnav/tag.png",
          // img: "/img/leftnav/tag.png",
          img: "/img/leftnav/tag-checked.png",
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
          methods: getListarchitecture1,
          imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
          // imgSrc: "img/mobile/pink.png",
        },
        {
          flag: false,
@@ -108,6 +103,8 @@
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
          methods: getListroad,
          imgSrc: "img/mobile/green.png",
        },
        {
          flag: false,
@@ -116,15 +113,31 @@
          normal: "/img/leftnav/scene.png",
          checked: "/img/leftnav/scene-checked.png",
          layer: "sceneLayer",
          methods: getListarchitecture,
          imgSrc: "img/leftnav/map-panorama.png",
          // imgSrc: "img/mobile/blue.png",
        },
        {
          flag: false,
          label: "活动",
          img: "/img/leftnav/activity.png",
          normal: "/img/leftnav/activity.png",
          checked: "/img/leftnav/activity-checked.png",
          layer: "activityLayer",
          label: "监控",
          img: "/img/leftnav/monitor.png",
          normal: "/img/leftnav/monitor.png",
          checked: "/img/leftnav/monitor-checked.png",
          layer: "videoLayer",
          methods: getListVideo,
          imgSrc: "/img/leftnav/map-monitor.png",
          // imgSrc: "img/mobile/blue.png",
        },
        // {
        //   flag: false,
        //   label: "活动",
        //   img: "/img/leftnav/activity.png",
        //   normal: "/img/leftnav/activity.png",
        //   checked: "/img/leftnav/activity-checked.png",
        //   layer: "activityLayer",
        //   methods: getListdoor,
        //   imgSrc: "img/mobile/brown.png",
        // },
        {
          flag: false,
          label: "AED",
@@ -132,6 +145,11 @@
          normal: "/img/leftnav/aed.png",
          checked: "/img/leftnav/aed-checked.png",
          layer: "aedLayer",
          methods: getListcat,
          type: 9,
          imgSrc: "img/leftnav/map-aed.png",
          // imgSrc: "img/mobile/pink.png",
          notShow: true,
        },
        {
          flag: false,
@@ -140,6 +158,10 @@
          normal: "/img/leftnav/park.png",
          checked: "/img/leftnav/park-checked.png",
          layer: "parkLayer",
          methods: getListcat,
          type: 11,
          imgSrc: "https://map.hit.edu.cn/images/p-biao.png",
          // imgSrc: "img/mobile/popcorn.png",
        },
        {
          flag: false,
@@ -148,211 +170,274 @@
          normal: "/img/leftnav/come.png",
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
          methods: getListcat,
          type: 12,
          imgSrc: "img/leftnav/map-activity.png",
          // imgSrc: "img/mobile/purple.png",
        },
      ],
      viewer: null,
      DC: null,
      tagLayer: null,
      wayLayer: null,
      sceneLayer: null,
      activityLayer: null,
      aedLayer: null,
      parkLayer: null,
      comeLayer: null,
      //   viewer: null,
      //   tagLayer: null,
      //   wayLayer: null,
      //   sceneLayer: null,
      //   videoLayer: null,
      //   activityLayer: null,
      //   aedLayer: null,
      //   parkLayer: null,
      //   comeLayer: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  created() {},
  mounted() {},
  methods: {
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 121.0493 + Math.random() * 0.5;
        const lat = 31.2583 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    changeIconHide() {
      const isif = this.iconHide;
      this.$store.commit("MSET_ICONHIDE", !isif);
    },
    leftNavClick(item) {
      // console.log(item);
      this.popupWindow1 = false;
      // console.log(123132);
      // 判断并关闭已开启标签
      const lnd = this.leftNavData;
      for (const k in lnd) {
        // console.log(this[this.leftNavData[k].layer]);
        if (lnd[k].label == item.label) {
          // console.log(lnd[k].label, "当前点击");
          continue;
        }
        if (window[this.leftNavData[k].layer]._show) {
          // console.log(lnd[k].label, "所有开启");
          this.leftNavData[k].flag = false;
          this.leftNavData[k].img = this.leftNavData[k].normal;
          window[this.leftNavData[k].layer].show = false;
        }
      }

      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
        this[item.layer].show = true;
        window[item.layer].show = true;
        // console.log("飞入");
        // this.flyTo(item);
        this.$store.dispatch("closeMobileWindowsDom"); // 关闭弹窗
      } else {
        item.img = item.normal;
        this[item.layer].show = false;
        window[item.layer].show = false;
      }
    },
    initialize(viewer) {
    // flyTo(item) {
    //   const that = this;
    //   const posi = this[item.layer].positions[0];
    //   // console.log(posi);
    //   const lntLat =
    //     that.dimensionData.pitch == -45
    //       ? [posi.lng + 0.00917, posi.lat - 0.0188, 500]
    //       : [posi.lng + 0.01197, posi.lat - 0.00055, 500];
    //   // that.mviewer.camera.flyTo({
    //   //   destination: Cesium.Cartesian3.fromDegrees(
    //   //     lntLat[0],
    //   //     lntLat[1],
    //   //     lntLat[2]
    //   //   ),
    //   // });
    //   // return;
    //   this.$store.dispatch("mapFlyTo", {
    //     // 飞入
    //     lntLat: lntLat,
    //     // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
    //     // lntLat: [121.50492752204283, 31.21567802276832, 2530],
    //     heading: that.dimensionData.heading,
    //     pitch: that.dimensionData.pitch,
    //     roll: that.dimensionData.roll,
    //     noOpen: true,
    //   });
    // },
    initialize() {
      var that = this;
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
      this.tagLayer = new this.DC.HtmlLayer("tagLayer");
      viewer.addLayer(this.tagLayer);
      this.wayLayer = new this.DC.HtmlLayer("wayLayer");
      viewer.addLayer(this.wayLayer);
      this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);
      global.viewer.scene.globe.depthTestAgainstTerrain = false;
      window.tagLayer = new global.DC.HtmlLayer("tagLayer");
      global.viewer.addLayer(tagLayer);

      this.aedLayer = new this.DC.VectorLayer("aedLayer");
      viewer.addLayer(this.aedLayer);
      window.wayLayer = new global.DC.HtmlLayer("wayLayer");
      global.viewer.addLayer(wayLayer);

      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
      viewer.addLayer(this.parkLayer);
      this.comeLayer = new this.DC.VectorLayer("comeLayer");
      viewer.addLayer(this.comeLayer);
      // sceneLayer = new global.DC.VectorLayer("sceneLayer");
      window.sceneLayer = new global.DC.HtmlLayer("sceneLayer");
      global.viewer.addLayer(sceneLayer);

      const positions1 = this.generatePosition(50);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
      window.videoLayer = new global.DC.HtmlLayer("videoLayer");
      global.viewer.addLayer(videoLayer);

      // activityLayer = new global.DC.VectorLayer("activityLayer");
      window.activityLayer = new global.DC.HtmlLayer("activityLayer");
      global.viewer.addLayer(activityLayer);

      // aedLayer = new global.DC.VectorLayer("aedLayer");
      window.aedLayer = new global.DC.HtmlLayer("aedLayer");
      global.viewer.addLayer(aedLayer);

      window.parkLayer = new global.DC.HtmlLayer("parkLayer");
      global.viewer.addLayer(parkLayer);

      // comeLayer = new global.DC.VectorLayer("comeLayer");
      window.comeLayer = new global.DC.HtmlLayer("comeLayer");
      global.viewer.addLayer(comeLayer);

      const ourNum = that.leftNavData.length;
      for (let n = 0; n < ourNum; n++) {
        const ourD = this.leftNavData[n];
        const d = ourD.type ? { lifetype: ourD.type } : {};
        ourD.methods(d).then((res) => {
          let dom;
          const data = res.data.data;
          const position = that.changePoiton(data);
          const num = data.length;
          for (let k = 0; k < num; k++) {
            if (ourD.label == "标签") {
              dom = `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `
        );
        this.tagLayer.addOverlay(divIcon);
        //订阅事件1
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          that.popupWindow1 = true;
          // 定制化窗体
          var divForms = new DC.mobileDivForms(viewer, {
            domId: "mobilePopup",
            title: "成教楼  ",
            className: "mobilePopup",
            content: document.getElementById("mobile-map_MP1"),
            position: [e.position],
          });
          viewer.zoomToPosition(
            new DC.Position(
              e.overlay._position._lng,
              e.overlay._position._lat - 0.012,
              1530,
              0,
              -45
            )
          );
        });
      });

      const positions2 = this.generatePosition(50);
      positions2.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                    `;
            } else if (ourD.label == "道路") {
              // <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
              //    ${data[k].mechanismname}
              // </div>
              dom = `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                工建街
                                 ${data[k].roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
        );
        this.wayLayer.addOverlay(divIcon);
      });

      const positions3 = this.generatePosition(50);
      positions3.forEach((item) => {
        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        this.sceneLayer.addOverlay(billboard);
      });

      const positions4 = this.generatePosition(10);
      positions4.forEach((item, index) => {
        const label = new this.DC.Label(item, "建筑AED");
        label.setStyle({
          fillColor: this.DC.Color.ORANGERED,
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.aedLayer.addOverlay(label);

        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];

        this.aedLayer.addOverlay(billboard);
      });

      const positions5 = this.generatePosition(120);
      positions5.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                    `;
            } else if (ourD.label == "实景") {
              // <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
              //    ${data[k].mechanismname}
              // </div>
              dom = `
                        <div class="scene-entitys-box">
                            <div>${data[k].mechanismname}</div>
                            <img src="/img/leftnav/map-panorama.png" alt="">
                        </div>
                        `;
            } else if (ourD.label == "AED") {
              dom = `
                        <div class="mobiletag-entitys-box">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "停车") {
              dom = `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            <div class="park-title" alt="${data[k].mechanismname}">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `
        );
        this.parkLayer.addOverlay(divIcon);
      });

      const positions6 = this.generatePosition(10);
      positions6.forEach((item, index) => {
        const label = new this.DC.Label(item, "123");
        label.setStyle({
          fillColor: this.DC.Color.PURPLE,
          outlineColor: this.DC.Color.WHITE, // 边框颜色
          outlineWidth: 2, // 边框大小，
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
                    `;
            } else if (ourD.label == "出入") {
              dom = `
                        <div class="mobiletag-entitys-box-pink">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "监控") {
              dom = `
                        <div class="monitor-entitys-box">
                            <div>${data[k].mechanismname}</div>
                            <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
                        </div>
                        `;
            }
            const divIcon = new global.DC.DivIcon(position[k], dom);
            // 订阅事件
            divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
              // console.log(data[k]);
              const d = {
                name:
                  data[k].mechanismname ||
                  data[k].roadname ||
                  (ourD.label == "监控" ? "监控" : "无显示名字"),
                bgImg: data[k].tpurl,
                video: data[k].videourl || "",
                from: "labels",
                introduce: data[k].introduce,
                panoramaurl: data[k].panoramaurl,
              };
              // 定制化窗体
              that.openPopupS(
                e.position,
                [e.overlay._position._lng, e.overlay._position._lat],
                d
              );
            });
            window[that.leftNavData[n].layer].addOverlay(divIcon); // 加入图标
          }
          window[that.leftNavData[n].layer].positions = position;
          if (that.leftNavData[n].layer == "tagLayer") {
            // that.leftNavData[n].img = that.leftNavData[n].checked;
          } else {
            window[that.leftNavData[n].layer].show = false;
          }
        });
        this.comeLayer.addOverlay(label);

        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];

        this.comeLayer.addOverlay(billboard);
      });

      this.tagLayer.show = false;
      this.wayLayer.show = false;
      this.sceneLayer.show = false;
      this.aedLayer.show = false;
      this.parkLayer.show = false;
      this.comeLayer.show = false;
      }
      // setTimeout(() => {
      //   this.tagLayer.show = false;
      // }, 500);
    },
    changePoiton(data) {
      // console.log(data);
      const list = [];
      const num = data.length;
      for (let i = 0; i < num; i++) {
        list.push(new global.DC.Position(data[i].jd, data[i].wd, 0));
      }
      return list;
    },
    mobileOpenImgs1() {
      let imgsDom = document.getElementById("mobileBigImgs");
      const imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
    goOn1() {},
    openPopupS(position, lntLat, query) {
      const that = this;
      // 定制化窗体
      const d = {
        position,
        lntLat,
        query: { ...(query || {}), position, lntLat },
        useJWD: true, // 仅使用经纬度
      };
      that.$store.dispatch("setMobileWindows", d);
    },
  },
};
</script>

<style scoped lang='scss'>
<style scoped lang="scss">
.m-left-nav {
  position: fixed;
  bottom: 30px;
@@ -364,7 +449,7 @@
  .m-left-coutrol {
    position: absolute;
    left: -24px;
    top: 96px;
    top: 79px;
    width: 25px;
    height: 60px;
    background-color: #fff;
@@ -412,4 +497,7 @@
    }
  }
}
.nones {
  display: none;
}
</style>