1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/mobileWindow/index.vue

@@ -1,26 +1,68 @@
<template>
  <!-- 浮动弹窗  mobileWindow-->
  <div
    ref="mobile-mapContentContent"
    v-show="!MobileWindowsHide"
    id="mobile-map_content_content"
  >
    <div class="mobiletitle">{{ title }}</div>
    <div class="mobiletitle">
      {{ title }}
      <span
        class="mobile_audio"
        @click="openAudio"
        v-show="introduce && !video"
      >
        <!-- <i class="el-icon-video-play icon" v-show="!audioState"></i>
        <i class="el-icon-video-pause icon" v-show="audioState"></i> -->
        <img
          src="/img/icon/start-video.png"
          class="icon"
          alt=""
          v-show="!audioState"
        />
        <img
          src="/img/icon/close-video.png"
          class="icon"
          alt=""
          v-show="audioState"
        />
        <!-- <div id="bdtts_div_id">
          <audio id="tts_autio_id" autoplay="autoplay">
            <source
              id="tts_source_id"
              src="http://tts.baidu.com/text2audio?lan=zh&amp;ie=UTF-8&amp;spd=5&amp;per=1&amp;text=请输入文字"
              type="audio/mpeg"
            />
            <embed id="tts_embed_id" height="0" width="0" src="" />
          </audio>
        </div> -->
      </span>
    </div>
    <div class="mobilelabel-content">
      <div class="mobile-popup-imgs-heard">
        <div class="mobile-popup-imgs-h-close">
          <i class="el-icon-circle-close icon" @click="closeWindow"></i>
          <i class="el-icon-close icon" @click="closeWindow"></i>
        </div>
        <img :src="url" alt="" />
        <!-- <video :src="video" controls="controls" autoplay v-if="video"></video> -->
        <playVideo
          :src="video"
          controls="controls"
          autoplay
          v-if="video"
        ></playVideo>
        <!-- <img :src="url" alt="" v-show="url && !video" /> -->
        <!-- style="width: 100px; height: 100px" -->
        <el-image
          style="width: 100px; height: 100px"
          class="imgs"
          :src="url"
          id="mobileBigImgs"
          v-show="false"
          v-show="url && !video"
          :preview-src-list="srcList"
        >
          <!-- v-show="false" -->
        </el-image>
        <!-- <div>{{ query.query }}</div> -->
        <div class="mobileBig-center-our">
        <div class="mobileBig-center-our" v-show="!video">
          <div
            v-for="(item, index) in center"
            :key="index"
@@ -29,6 +71,12 @@
            <div class="m-c-title">{{ item.name }}：</div>
            <span class="m-c-center">{{ item.value }}</span>
          </div>
          <div
            class="mobileBig-center-introduce"
            style="padding-top: 10px"
            v-show="introduce"
            v-html="introduce"
          ></div>
        </div>
      </div>
      <div class="mobile-popup-control">
@@ -40,7 +88,11 @@
                : item.name == '图集'
                ? 'el-icon-data-board'
                : item.name == '去这'
                ? 'el-icon-finished'
                ? quzheD
                  ? 'el-icon-loading'
                  : 'el-icon-finished'
                : item.name == '视频' || item.name == '返回'
                ? 'el-icon-video-camera-solid'
                : ''
            "
            class="mobilePopupOurOnce_r_d_in"
@@ -63,33 +115,58 @@
export default {
  name: "mobileWindow",
  computed: {
    ...mapGetters(["MobileWindowsHide", "query", "MobileWindowChangeData"]),
    ...mapGetters([
      "MobileWindowsHide",
      "query",
      "MobileWindowChangeData",
      "audioState",
      // "areaLayerSelect",
    ]),
  },
  watch: {
    MobileWindowChangeData() {
      this.$store.dispatch("MSET_GETAUDIOBEGIN", "notOpen");
      this.quzheD = false;
      //数据更改
      //   this.fullscreenLoading = true;
      if (!this.MobileWindowsHide) {
        // console.log("地图点击弹窗数据请求参数", this.query);
        this.title = this.query.query.name;
        if (this.query.query.bgImg) {
          this.srcList = this.query.query.bgImg.split(",");
          this.url = this.srcList[0];
        }
        if (this.query.query.seebut) {
          this.seebut = this.query.query.seebut;
        this.video = ""; //清除视频
        this.seebut = []; //清除按钮
        let queryData = this.query.query;
        // console.log(queryData, 789);
        this.title = queryData.name;
        //判断是否显示操作按钮
        if (queryData.seebut) {
          this.seebut = queryData.seebut;
          if (queryData.from == "活动") {
            this.seebut = [];
            this.seebut.push({
              name: "图集",
            });
            this.seebut.push({
              name: "显示活动",
            });
            if (queryData.notAddGoOn == "notAddGoOn") {
              this.seebut.push({
                name: "去这",
              });
            }
          }
          for (let k in this.seebut) {
            if (this.seebut[k].name == "定位") {
              this.seebut.splice(k, k + 1);
            }
          }
          this.seebut.push({
            name: "去这",
          });
          if (queryData.notAddGoOn != "notAddGoOn") {
            this.seebut.push({
              name: "去这",
            });
          }
        } else {
          this.seebut = [
            {
              name: "实景",
            },
            // {
            //   name: "实景",
            // },
            {
              name: "图集",
            },
@@ -98,14 +175,62 @@
            },
          ];
        }
        //图集
        if (queryData.bgImg) {
          this.srcList = queryData.bgImg.split(",");
          this.url = this.srcList[0];
        } else {
          this.seebut = this.seebut.filter((res) => {
            return res.name != "图集";
          });
        }
        //视频
        if (queryData.video) {
          if (queryData.from == "labels") {
            this.seebut = [];
            this.video = queryData.video;
          } else {
            this.seebut.push({ name: "视频" });
          }
        }
        //全景
        if (queryData.panoramaurl) {
          this.panoramaurl = queryData.panoramaurl;
          this.seebut = this.seebut.filter((res) => {
            return res.name != "实景";
          });
          this.seebut.splice(0, 0, { name: "实景" });
        } else {
          this.panoramaurl = "";
          this.seebut = this.seebut.filter((res) => {
            return res.name != "实景";
          });
        }
        //中心内容
        this.center = [];
        for (let k in this.query.query) {
        for (let k in queryData) {
          for (let n in this.getCenter) {
            if (k == this.getCenter[n].name && this.query.query[k]) {
            if (
              k == this.getCenter[n].name &&
              queryData[k] &&
              queryData.from != "活动" &&
              this.getCenter[n].value == "地址"
            ) {
              this.center.push({
                name: this.getCenter[n].value,
                value: this.query.query[k] ? this.query.query[k] : "暂无",
                value: queryData[k] ? queryData[k] : "暂无",
              });
            }
            if (k == "introduce") {
              this.introduce = queryData[k];
              if (this.introduce) {
                setTimeout(() => {
                  let Str = document.querySelector(
                    ".mobileBig-center-introduce"
                  ).innerText;
                  this.$store.dispatch("MSET_GETAUDIO", Str); //加入语音
                }, 20);
              }
            }
          }
        }
@@ -127,44 +252,163 @@
          name: "address",
          value: "地址",
        },
        {
          name: "introduce",
          value: "详情",
        },
        // {
        //   name: "introduce",
        //   value: "详情",
        // },
      ],
      introduce: "暂无详情数据",
      title: "",
      fullscreenLoading: false,
      url: "/img/job/one.jpg",
      url: "",
      video: "",
      positions: "",
      srcList: [],
      seebut: [],
      center: [],
      panoramaurl: "",
      quzheD: false, //是否点击了去这，并不能再按，以及不应用路线导航
    };
  },
  methods: {
    //按钮点击事件
    openOnce(val) {
      let that = this;
      // console.log(val, this.onceData);
      that.routerS = [];
      let once = true;
      let query = this.query.query;
      // console.log(query);
      if (val == "去这") {
        if (that.quzheD) {
          console.log("不可点击");
          return;
        }
        that.quzheD = true;
        // return;
        //定位
        // console.log(this.query.query);
        // that.$store.commit("set_endPosition", this.query.query.lntLat);
        let doit = (now) => {
          if (now[0] == "失败") {
            that.quzheD = false;
            return;
          }
          let ints = {
            start: [+now[0], +now[1]],
            end: [+query.lntLat[0], +query.lntLat[1], 360],
            // start: [+query.lntLat[0], +query.lntLat[1], 360],
            // end: [114.031946, 27.621475],
            type: "driving",
            fn: function (datas) {
              //获取回调路径
              that.routerS.push(datas);
              that.quzheD = false;
              if (once) {
                once = false;
                //加载第一条线路
                that.$store.commit("set_choiceRouterS", 0);
                that.$store.dispatch("MSET_DRAWALINELAYER", [datas.Str, query]);
                that.$store.commit("cameraSetView", ints.start);
              }
            },
          };
          that.$store.dispatch("MSET_GOTOWHERE", ints);
        };
        that.$store.commit("GET_NOWPOSITION", (res) => {
          console.log(res);
          doit(res);
        });
      } else if (val == "实景") {
        console.log(this.panoramaurl, query);
        this.$store.commit("MSET_OPENMOBILEPANORAMA", this.panoramaurl);
        return;
        this.$store.commit(
          "MSET_OPENMOBILEPANORAMA",
          "https://www.kuleiman.com/110487/index.html?m=1"
        );
      } else if (val == "图集") {
        let imgsDom = document.getElementById("mobileBigImgs");
        imgsDom.click();
        if (imgsDom) {
          imgsDom.click();
        }
      } else if (val == "视频") {
        this.seebut[this.seebut.length - 1].name = "返回";
        this.video = this.query.query.video;
      } else if (val == "返回") {
        this.seebut[this.seebut.length - 1].name = "视频";
        this.video = "";
      } else if (val == "显示活动") {
        let addressOur = this.changeData(query, "addressname", "address");
        let lxOur = this.changeData(query, "lxname", "lx");
        console.log(addressOur, lxOur);
        that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
          lxOur,
          addressOur,
          query,
        ]);
      }
    },
    //修改数据
    changeData(data, name, value) {
      let arr = [];
      for (let k in data[name]) {
        arr.push({
          name: data[name][k],
          value:
            name == "lxname"
              ? data[value][k]
                  .split("(")[1]
                  .split(")")[0]
                  .split(",")
                  .join(";")
                  .split(" ")
                  .join(",")
              : [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],
        });
      }
      return arr;
    },
    closeWindow() {
      if (!this.MobileWindowsHide) {
        let that = this;
        this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
        if (window.select.overlay != undefined) {
          window.select.overlay.setStyle({
            material: window.select.color,
            outline: false,
          });

          that.$store.commit("mset_changeSelect", [undefined, undefined]);
        }
      }
    },
    openAudio() {
      if (this.introduce) {
        this.$store.dispatch("MSET_GETAUDIOBEGIN");
      }
    },
  },
};
</script>

<style>
</style>
<style lang="scss">
.mobile_audio {
  margin-left: 3px;
  .icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    float: right;
    position: relative;
    right: 8px;
  }
}
#bdtts_div_id {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: absolute;
  top: -50px;
  background-color: #fff;
}
</style>