图片更换等，逻辑修改

shuishen

2022-04-13 75c50fbce61fcd54295ea4347ebf516990b583ee

 src/components/mobileLeftNav/index.vue

@@ -22,7 +22,7 @@
</template>

<script>
import { mapGetters } from "vuex";
import { mapGetters } from 'vuex'
import {
  // getListdoor, //出入
  // getListaed, //AED
@@ -30,105 +30,108 @@
  getListarchitecture, // 全景
  getListarchitecture1, // 标签
  getListroad, // 道路
  getListcat, // 出入-AED-停车场
} from "@/api/mobile/piont/index";
import { getListVideo } from "@/api/mobile/monitor/index";
    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;
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",
    name: 'mobileLeftNav',
  watch: {
    iconHide() {
      if (this.iconHide) {
        this.icons = "el-icon-d-arrow-left";
        this.navStyle.right = "-51px";
        this.imgStyle.right = "6px";
        iconHide: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode) {
                    this.icons = 'el-icon-d-arrow-left'
                    this.navStyle.right = '-51px'
                    this.imgStyle.right = '6px'
      } else {
        this.icons = "el-icon-d-arrow-right";
        this.navStyle.right = "0px";
        this.imgStyle.right = "0";
                    this.icons = 'el-icon-d-arrow-right'
                    this.navStyle.right = '0px'
                    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;
                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;
                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;
                        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"]),
        ...mapGetters(['iconHide', 'dimensionData', 'seeRight'])
  },
  data() {
    return {
      icons: "el-icon-d-arrow-right",
            icons: 'el-icon-d-arrow-right',
      navStyle: {
        right: "0px",
                right: '0px'
      },
      imgStyle: {
        right: "0",
                right: '0'
      },
      leftNavData: [
        {
          flag: true,
          label: "标签",
                    label: '标签',
          // img: "/img/leftnav/tag.png",
          img: "/img/leftnav/tag-checked.png",
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
                    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: 'https://map.hit.edu.cn/images/tarrow_xq.png'
          // imgSrc: "img/mobile/pink.png",
        },
        {
          flag: false,
          label: "道路",
          img: "/img/leftnav/way.png",
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer',
          methods: getListroad,
          imgSrc: "img/mobile/green.png",
                    imgSrc: 'img/mobile/green.png'
        },
        {
          flag: false,
          label: "实景",
          img: "/img/leftnav/scene.png",
          normal: "/img/leftnav/scene.png",
          checked: "/img/leftnav/scene-checked.png",
          layer: "sceneLayer",
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer',
          methods: getListarchitecture,
          imgSrc: "img/leftnav/map-panorama.png",
                    imgSrc: 'img/leftnav/map-panorama.png'
          // imgSrc: "img/mobile/blue.png",
        },
        {
          flag: false,
          label: "监控",
          img: "/img/leftnav/monitor.png",
          normal: "/img/leftnav/monitor.png",
          checked: "/img/leftnav/monitor-checked.png",
          layer: "videoLayer",
                    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/leftnav/map-monitor.png'
          // imgSrc: "img/mobile/blue.png",
        },
        // {
@@ -143,42 +146,42 @@
        // },
        {
          flag: false,
          label: "AED",
          img: "/img/leftnav/aed.png",
          normal: "/img/leftnav/aed.png",
          checked: "/img/leftnav/aed-checked.png",
          layer: "aedLayer",
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    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/leftnav/map-aed.png',
          // imgSrc: "img/mobile/pink.png",
          notShow: true,
                    notShow: true
        },
        {
          flag: false,
          label: "停车",
          img: "/img/leftnav/park.png",
          normal: "/img/leftnav/park.png",
          checked: "/img/leftnav/park-checked.png",
          layer: "parkLayer",
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    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: 'https://map.hit.edu.cn/images/p-biao.png'
          // imgSrc: "img/mobile/popcorn.png",
        },
        {
          flag: false,
          label: "出入",
          img: "/img/leftnav/come.png",
          normal: "/img/leftnav/come.png",
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    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/leftnav/map-activity.png'
          // imgSrc: "img/mobile/purple.png",
        },
      ],
                }
            ]
      //   viewer: null,
      //   tagLayer: null,
      //   wayLayer: null,
@@ -188,43 +191,43 @@
      //   aedLayer: null,
      //   parkLayer: null,
      //   comeLayer: null,
    };
        }
  },
  created() {},
  mounted() {},
  methods: {
    changeIconHide() {
      const isif = this.iconHide;
      this.$store.commit("MSET_ICONHIDE", !isif);
            const isif = this.iconHide
            this.$store.commit('MSET_ICONHIDE', !isif)
    },
    leftNavClick(item) {
      // console.log(123132);
      // 判断并关闭已开启标签
      const lnd = this.leftNavData;
            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;
                    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;
                    this.leftNavData[k].flag = false
                    this.leftNavData[k].img = this.leftNavData[k].normal
                    window[this.leftNavData[k].layer].show = false
        }
      }

      item.flag = !item.flag;
            item.flag = !item.flag
      if (item.flag == true) {
        item.img = item.checked;
        window[item.layer].show = true;
                item.img = item.checked
                window[item.layer].show = true
        // console.log("飞入");
        // this.flyTo(item);
        this.$store.dispatch("closeMobileWindowsDom"); // 关闭弹窗
                this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
      } else {
        item.img = item.normal;
        window[item.layer].show = false;
                item.img = item.normal
                window[item.layer].show = false
      }
    },
    // flyTo(item) {
@@ -255,47 +258,47 @@
    //   });
    // },
    initialize() {
      var that = this;
      global.viewer.scene.globe.depthTestAgainstTerrain = false;
      window.tagLayer = new global.DC.HtmlLayer("tagLayer");
      global.viewer.addLayer(tagLayer);
            var that = this
            global.viewer.scene.globe.depthTestAgainstTerrain = false
            window.tagLayer = new global.DC.HtmlLayer('tagLayer')
            global.viewer.addLayer(tagLayer)

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

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

      window.videoLayer = new global.DC.HtmlLayer("videoLayer");
      global.viewer.addLayer(videoLayer);
            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);
            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.aedLayer = new global.DC.HtmlLayer('aedLayer')
            global.viewer.addLayer(aedLayer)

      window.parkLayer = new global.DC.HtmlLayer("parkLayer");
      global.viewer.addLayer(parkLayer);
            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);
            window.comeLayer = new global.DC.HtmlLayer('comeLayer')
            global.viewer.addLayer(comeLayer)

      const ourNum = that.leftNavData.length;
            const ourNum = that.leftNavData.length
      for (let n = 0; n < ourNum; n++) {
        const ourD = this.leftNavData[n];
        const d = ourD.type ? { lifetype: ourD.type } : {};
                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;
                    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 == "标签") {
                        if (ourD.label == '标签') {
              dom = `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
@@ -305,8 +308,8 @@
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "道路") {
                    `
                        } 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>
@@ -319,8 +322,8 @@
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "实景") {
                    `
                        } 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>
@@ -329,8 +332,8 @@
                            <div>${data[k].mechanismname}</div>
                            <img src="/img/leftnav/map-panorama.png" alt="">
                        </div>
                        `;
            } else if (ourD.label == "AED") {
                        `
                        } else if (ourD.label == 'AED') {
              dom = `
                        <div class="mobiletag-entitys-box">
                            <div class="tag-content">
@@ -340,8 +343,8 @@
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "停车") {
                    `
                        } else if (ourD.label == '停车') {
              dom = `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="${data[k].mechanismname}">
@@ -355,8 +358,8 @@
                                </div>
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "出入") {
                    `
                        } else if (ourD.label == '出入') {
              dom = `
                        <div class="mobiletag-entitys-box-pink">
                            <div class="tag-content">
@@ -366,16 +369,16 @@
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `;
            } else if (ourD.label == "监控") {
                    `
                        } 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);
                        const divIcon = new global.DC.DivIcon(position[k], dom)
            // 订阅事件
            divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
              // console.log(data[k]);
@@ -383,29 +386,29 @@
                name:
                  data[k].mechanismname ||
                  data[k].roadname ||
                  (ourD.label == "监控" ? "监控" : "无显示名字"),
                                    (ourD.label == '监控' ? '监控' : '无显示名字'),
                bgImg: data[k].tpurl,
                video: data[k].videourl || "",
                from: "labels",
                                video: data[k].videourl || '',
                                from: 'labels',
                introduce: data[k].introduce,
                panoramaurl: data[k].panoramaurl,
              };
                                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].addOverlay(divIcon) // 加入图标
          }
          window[that.leftNavData[n].layer].positions = position;
          if (that.leftNavData[n].layer == "tagLayer") {
                    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;
                        window[that.leftNavData[n].layer].show = false
          }
        });
                })
      }
      // setTimeout(() => {
      //   this.tagLayer.show = false;
@@ -413,31 +416,31 @@
    },
    changePoiton(data) {
      // console.log(data);
      const list = [];
      const num = data.length;
            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));
                list.push(new global.DC.Position(data[i].jd, data[i].wd, 0))
      }
      return list;
            return list
    },
    mobileOpenImgs1() {
      const imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
            const imgsDom = document.getElementById('mobileBigImgs')
            imgsDom.click()
    },
    goOn1() {},
    openPopupS(position, lntLat, query) {
      const that = this;
            const that = this
      // 定制化窗体
      const d = {
        position,
        lntLat,
        query: { ...(query || {}), position, lntLat },
        useJWD: true, // 仅使用经纬度
      };
      that.$store.dispatch("setMobileWindows", d);
    },
  },
};
                useJWD: true // 仅使用经纬度
            }
            that.$store.dispatch('setMobileWindows', d)
        }
    }
}
</script>

<style scoped lang="scss">