+

liuyg

2022-01-25 16a732559eec96fadee78102915801f9904cdf9a

+

 src/components/mobileActivity/index.vue

@@ -1,15 +1,339 @@
<template>
  <div id="mobileActivity">
    <div class="mobileActivity_in">showActivity</div>
  <div
    id="mobileActivity"
    :style="{ height: height + 'px' }"
    :class="[openValue ? 'isOpens' : 'notOpens']"
    v-if="showActivity"
  >
    <div class="mobileActivity_heard">
      <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
      <div class="mobileActivity_close" @click="closeActivity">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="mobileActivity_in">
      <!-- <el-button type="primary" @click="init">open</el-button>
      <el-button type="success" @click="closeInit">close</el-button> -->
      <div class="mobileActivity_insmall">
        <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
        <el-image
          class="mobileActivity_insmallimg"
          :src="useData.url"
          :preview-src-list="useData.srcList"
        ></el-image>
        <div class="mobileActivity_insmallxiangqing">
          <div
            class="mobileActivity_insmallxiangqingIn"
            v-for="(item, index) in useData.smallData"
            :key="index"
          >
            <span class="mobileActivity_insmallxiangqingIn_s">{{
              item.lable
            }}</span
            >: {{ item.value }}
          </div>
        </div>
      </div>
      <div class="mobileActivity_detailed">
        <div
          class="mobileActivity_detailedIn"
          v-for="(item, index) in useData.detailedData"
          :key="index"
        >
          <span class="mobileActivity_insmallxiangqingIn_s">{{
            item.lable
          }}</span
          >: {{ item.value }}
        </div>
      </div>
    </div>
    <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
      <ul>
        <li
          v-for="(item, index) in leftNavData"
          :key="index"
          @click="mobileActivityCoutrolClick(item)"
          v-show="!item.notShow"
        >
          <img :src="item.img" alt="" />
          <span>{{ item.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moveWindow from "./move";
export default {
  name: "mobileActivity",
  computed: {
    ...mapGetters(["showActivity"]),
    ...mapGetters([
      "showActivity",
      "showActivityData",
      "drawALineLayerMany",
      "drawAPointLayerMany",
    ]),
  },
  data() {
    let heig = 135;
    let bottom = 150;
    return {
      useHeight: heig,
      height: heig,
      useBottom: bottom,
      bottom: bottom,
      openValue: false,
      domMove: null,
      start: 0,
      end: 0,
      hdTitle: "",
      // url: "",
      // srcList: [],
      useData: {},
      leftNavData: [
        {
          flag: true,
          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",
          imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
          // imgSrc: "img/mobile/pink.png",
          layer: "drawALineLayerMany",
        },
        {
          flag: true,
          label: "标点",
          img: "/img/leftnav/way-checked.png",
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
          imgSrc: "img/mobile/green.png",
          layer: "drawAPointLayerMany",
        },
        // {
        //   flag: false,
        //   label: "实景",
        //   img: "/img/leftnav/scene.png",
        //   normal: "/img/leftnav/scene.png",
        //   checked: "/img/leftnav/scene-checked.png",
        //   layer: "sceneLayer",
        //   imgSrc: "img/leftnav/map-panorama.png",
        //   // imgSrc: "img/mobile/blue.png",
        // },
      ],
    };
  },
  watch: {
    //   openValue() {
    //     if (this.openValue) {
    //       let windowHeight = document.body.clientHeight;
    //       this.height = windowHeight / 2;
    //     } else {
    //       this.height = this.useHeight;
    //     }
    //   },
    showActivity() {
      if (this.showActivity) {
        this.inToInit(); //初始化
        this.hdTitle = this.showActivityData.name;

        console.log(this.showActivityData);
        //new窗口对象
        let that = this;
        let windowHeight = document.body.clientHeight;
        this.doData(this.showActivityData); //使用数据
        // 获取最大高度避免数据过少，空格多
        // let heard = document.querySelector(".mobileActivity_heard");
        // let ins = document.querySelector(".mobileActivity_in");
        // console.log(heard, ins, 77777);
        this.checkDom("querySelector", ".mobileActivity_heard", (head) => {
          this.checkDom("querySelector", ".mobileActivity_in", (ins) => {
            console.log((head.offsetHeight + ins.offsetHeight) / 4);
            doit(head.offsetHeight + ins.offsetHeight);
          });
        });
        // return;
        let doit = (maxheights) => {
          this.domMove = new moveWindow({
            id: "mobileActivity",
            minHeight: that.useHeight,
            maxHeight: maxheights || windowHeight / 2,
            critical: maxheights / 4,
            fn: function (res) {
              that.height = +res.height;
              that.bottom = +res.height + 15;
              console.log(+res.height, "=======");
              if (res.state != "on") {
                that.openValue = res.state;
              }
            },
          });
          this.domMove.init();
          // console.log(this.domMove);
          //转移···添加点和线
          let addressOur = this.changeData(
            this.useData.query,
            "addressname",
            "address"
          );
          let lxOur = this.changeData(this.useData.query, "lxname", "lx");
          // console.log(addressOur, lxOur);
          that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
            lxOur,
            addressOur,
            this.useData.query,
            function () {
              that.domMove.opens(false, true);
            },
          ]);
        };
      }
    },
  },
  mounted() {},
  methods: {
    inToInit() {
      //初始化
      this.openValue = false;
      this.height = this.useHeight;
      this.bottom = this.useBottom;
      for (let k in this.leftNavData) {
        this.leftNavData[k].flag = true;
        this.leftNavData[k].img = this.leftNavData[k].checked;
      }
    },
    //处理主数据
    doData(val) {
      let srcList = val.opendata.tpurl.split(",");
      this.useData = {
        data: val,
        url: srcList[0],
        srcList: srcList,
        smallData: [
          {
            lable: "主办方",
            value: val.opendata.sponsor,
          },
          {
            lable: "承办方",
            value: val.opendata.undertake,
          },
        ],
        detailedData: [
          {
            lable: "活动时间",
            value: val.opendata.time,
          },
          {
            lable: "活动详情",
            value: val.opendata.context,
          },
        ],
        query: {
          name: val.opendata.hdname,
          bgImg: val.opendata.tpurl,
          from: "活动",
          websiteUrl: val.opendata.websiteurl,
          telePhone: val.opendata.telephone,
          introduce: val.opendata.context,
          video: val.opendata.videourl,
          // buts: ["定位"],
          //活动添加的字段
          addressname: val.opendata.addressname.split(";"),
          address: val.opendata.address.split(";"),
          lxname: val.opendata.lxname.split(";"),
          lx: val.opendata.lx.split(";"),
          lntLat: [
            val.opendata.address.split(";")[0].split(",")[0],
            val.opendata.address.split(";")[0].split(",")[1],
          ],
          panoramaurl: val.opendata.panoramaurl, //全景
        },
      };
    },
    //启动监听事件
    init() {
      this.domMove.init();
    },
    //关闭监听事件
    closeInit() {
      this.domMove.closeInit();
    },
    //控制线路和点的显影
    mobileActivityCoutrolClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
      } else {
        item.img = item.normal;
      }
      this.$store.commit("showLineOrPoint", {
        layer: item.layer,
        flag: item.flag,
      });
    },
    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;
    },
    closeActivity() {
      this.$store.commit("set_showActivity", { state: false });
      if (this.domMove) {
        this.closeInit();
      }
      //关闭路线和点的图层
      this.$store.commit("removePolylineMany");
      //关闭随地图弹窗
      this.$store.dispatch("closeMobileWindowsDom");
    },
    checkDom(methods, name, fn) {
      //  声明定时器
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        // let dom = that.$refs[name];
        let dom = document[methods](name);
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>
@@ -17,11 +341,167 @@
<style lang="scss">
#mobileActivity {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  // height: 50px;
  background-color: #fff;
  z-index: 999;
  transition: height 0.1s;
  border-radius: 15px 15px 0 0;
  .mobileActivity_heard {
    height: 35px;
    border-radius: 15px 15px 0 0;
    width: 100%;
    background-color: #409eff;
    color: #fff;
    border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
    box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
    .mobileActivity_title {
      width: 100%;
      height: 100%;
      line-height: 35px;
      text-indent: 1rem;
    }
    .mobileActivity_close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 25px;
    }
  }
  .mobileActivity_in {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 5px;
    .mobileActivity_insmall {
      background-color: #fff;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .mobileActivity_insmallimg {
        width: 90px;
        height: 90px;
      }
      .mobileActivity_insmallxiangqing {
        width: calc(100% - 110px);
        height: 94px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        .mobileActivity_insmallxiangqingIn {
          width: 100%;
        }
      }
    }
    .mobileActivity_detailed {
      background-color: rgba(202, 202, 202, 0.2);
      padding: 3px 0 0 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .mobileActivity_detailedIn {
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        margin: 0 0 3px 0;
      }
    }
    .mobileActivity_insmallxiangqingIn_s {
      font-weight: 600;
    }
  }
}

.notOpens {
  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 10px);
    border-radius: 5px;
  }
}

.isOpens {
  &::after {
    content: "";
    display: block;
    width: 13px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 12px);
    border-radius: 5px;
    transform: rotate(30deg);
  }
  &::before {
    content: "";
    display: block;
    width: 13px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 4px);
    border-radius: 5px;
    transform: rotate(-30deg);
  }
}
.mobileActivity_coutrol {
  position: fixed;
  bottom: 150px;
  left: 0px;
  z-index: 200;
  background-color: #fff;
  border-radius: 0 17px 17px 0;
  transition: all 0.18s;
  ul {
    position: relative;
    top: 3px;
  }
  li {
    margin-bottom: 6px;
    font-weight: 400;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    font-size: 0;
    cursor: pointer;

    img {
      position: relative;
      transition: all 0.5s;
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-right: 10px;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #2f2f2f;
    }
  }
}
</style>

 src/components/mobileActivity/move.js

New file
@@ -0,0 +1,166 @@
class moveWindow {
  constructor(data) {
    this.id = data.id;
    this.start = 0;
    this.end = 0;
    this.domHeight = 0;
    this.domMove = null;
    this.openValue = false;
    this.useHeight = data.minHeight;
    this.maxHeight = data.maxHeight;
    this.height = data.minHeight;
    this.critical = data.critical;
    let that = this;
    this.fn =
      data.fn ||
      function (res) {
        console.log("未设置回调函数");
        console.log(res);
      };

    this.ListenerTouchmove = function (window) {
      let moseHeight = window.changedTouches[0].clientY;
      //   let windowHeight = document.body.clientHeight; //屏幕宽度
      let endOn = moseHeight;
      let cha = +that.domHeight + that.start - +endOn;
      if (cha >= that.maxHeight) {
        cha = that.maxHeight;
      } else if (cha <= that.useHeight) {
        cha = that.useHeight;
      }
      let d = {
        state: "on",
        height: cha,
      };
      that.fn(d);
    };
    this.ListenerTouchstart = function (window) {
      let moseHeight = window.changedTouches[0].clientY;
      that.start = moseHeight;
      that.domHeight = document
        .getElementById(that.id)
        .style.cssText.split("px")[0]
        .split("height:")[1];
    };
    this.ListenerTouchend = function (window) {
      let moseHeight = window.changedTouches[0].clientY;
      that.end = moseHeight;
      let cha, states;
      if (that.end >= that.start) {
        states = false; //方向
        cha = that.end - that.start;
      } else {
        states = true; //方向
        cha = that.start - that.end;
      }
      if (cha >= that.critical) {
        //高
        that.opens(states, true); //程度
      } else if (cha < that.critical) {
        //低
        that.opens(states, false); //程度
      }
    };
    return this;
  }
  //启动监听事件
  init() {
    // this.domMove = document.getElementById(this.id);
    let that = this;
    this.checkDom(that.id, (dom) => {
      //检测是否有dom
      that.domMove = dom;
      that.domMove.addEventListener("touchmove", that.ListenerTouchmove);
      // 结束位置靠滑动距离判断
      that.domMove.addEventListener("touchstart", that.ListenerTouchstart);
      that.domMove.addEventListener("touchend", that.ListenerTouchend);
    });
  }
  //关闭监听事件
  closeInit() {
    this.domMove = document.getElementById(this.id);
    this.domMove.removeEventListener("touchmove", this.ListenerTouchmove);
    // 结束位置靠滑动距离判断
    this.domMove.removeEventListener("touchstart", this.ListenerTouchstart);
    this.domMove.removeEventListener("touchend", this.ListenerTouchend);
  }
  //输出事件
  opens(val, chengdu) {
    if (chengdu) {
      this.openValue = val;
      if (val) {
        this.height = this.maxHeight;
      } else {
        this.height = this.useHeight;
      }
    } else {
      this.height = this.domHeight;
    }
    let d = {
      state: this.openValue,
      height: this.height,
    };
    // console.log(val, this.height);
    this.fn(d);
  }
  changeHeight() {
    //抛出切换方法
    this.openValue = !this.openValue;
    if (this.openValue) {
      this.height = this.maxHeight;
    } else {
      this.height = this.useHeight;
    }
    let d = {
      state: this.openValue,
      height: this.height,
    };
    // console.log(val, this.height);
    this.fn(d);
  }
  checkDom(name, fn) {
    //  声明定时器
    var timer = null;
    //  检查dom是否执行完成
    function checkDom() {
      // let dom = that.$refs[name];
      let dom = document.getElementById(name);
      if (dom) {
        //  执行dom加载完成后的操作
        //  清除定时器
        if (!timer) {
          clearTimeout(timer);
        }
        if (fn) {
          //回调函数
          fn(dom);
          return;
        } else {
          return dom;
        }
      } else {
        //  自我调用
        timer = setTimeout(checkDom, 100);
      }
    }
    //  首次执行
    checkDom();
  }
  // 结束位置是一半判断
  //  domMove.addEventListener("touchend", function (window) {
  //   let moseHeight = window.changedTouches[0].clientY;
  //   let windowHeight = document.body.clientHeight;
  //   let cha = windowHeight - moseHeight;
  //   console.log(cha, "最后位置");
  //   let centerPoint =
  //     (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight;
  //   if (cha >= centerPoint) {
  //     cha = windowHeight / 2;
  //   } else if (cha < centerPoint) {
  //     cha = that.useHeight;
  //   }
  //   that.height = cha;
  // });
}

export default moveWindow;

 src/components/mobileCortrolButtom/index.vue

@@ -20,9 +20,9 @@
    <div class="m-l-inbut" @click="openBigPopupAfter">
      <i class="el-icon-menu"></i>
    </div>
    <div class="m-l-inbut" @click="openActivity">
    <!-- <div class="m-l-inbut" @click="openActivity">
      <i class="el-icon-s-opportunity"></i>
    </div>
    </div> -->
    <!-- <div class="m-l-inbut" @click="goOn"><i class="el-icon-location"></i></div> -->
  </div>
</template>

 src/components/mobileHD/mobileHD.vue

New file
@@ -0,0 +1,20 @@
<template>
  <div class="activeHD">活动窗口</div>
</template>

<script>
export default {
  name: "mobileHD",
};
</script>

<style lang="scss">
.activeHD {
  width: 100%;
  height: 50px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>

 src/components/mobileLeftNav/index.vue

@@ -288,7 +288,7 @@
              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}
                                 ${data[k].roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
@@ -300,12 +300,11 @@
              //    ${data[k].mechanismname}
              // </div>
              dom = `
                        <div  class="way-entitys-box mobile-way-entitys-box">
                            <div  class="way-sign-box ">
                                <img src="img/leftnav/map-panorama.png">
                            </div>
                        <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">
@@ -345,15 +344,11 @@
                    `;
            } else if (ourD.label == "监控") {
              dom = `
                        <div class="mobiletag-entitys-box-pink">
                            <div class="tag-content">
                              监控
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        <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 that.DC.DivIcon(position[k], dom);
            //订阅事件

 src/components/mobilePopupOurAfter/index.vue

@@ -3,17 +3,21 @@
    class="mobilePopupOurAfter"
    :class="{ ismBigPopupAfter: mBigPopupAfter }"
  >
    <!-- v-show="mBigPopupAfter" -->
    <!-- v-if="mBigPopupAfter" -->
    <div class="m_p_a_heard">
      <div><i class="el-icon-menu icon"></i></div>
      社区列表
      <div @click="closeBigPopupAfter"><i class="el-icon-close icon"></i></div>
    </div>
    <div class="m_p_a_center">
      <div class="m_p_a_center_group">
        <div
          class="m_p_a_center_once"
          :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
          v-for="(item, index) in choiceDataUp"
          @click="openBigPopup(item)"
          @click="item.name ? openBigPopup(item) : ''"
          :key="index"
        >
          <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
@@ -22,9 +26,38 @@
      </div>
      <div class="m_p_a_center_group">
        <div
          class="m_p_a_center_once"
          :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
          v-for="(item, index) in choiceDataDown"
          @click="openBigPopup(item)"
          @click="item.name ? openBigPopup(item) : ''"
          :key="index"
        >
          <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
          <div class="m_p_a_c_o_down">{{ item.seeName || item.name }}</div>
        </div>
      </div>
      <div
        class="m_p_a_heard m_p_a_hdheard"
        style="justify-content: center"
        v-show="avtivityData.length > 0 && useHD"
      >
        活动列表
      </div>
      <div
        class="m_p_a_center_group"
        v-for="(act, index) in avtivityData"
        :key="index"
        v-show="avtivityData.length > 0 && useHD"
      >
        <div
          :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
          v-for="(item, index) in act"
          @click="item.name ? openHDPopup(item) : ''"
          :key="index"
        >
          <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
@@ -54,6 +87,7 @@
} from "@/api/mobile/livingFacilities/index"; // 生活设施
// import { getListdoor } from "@/api/mobile/outIn/index"; //出入口
// import { getListparking } from "@/api/mobile/stop/index"; //停车场
import { getActivity } from "@/api/mobile/hd/hd"; //活动
export default {
  name: "mobilePopupOurAfter",
  computed: {
@@ -83,11 +117,6 @@
      ],
      choiceDataDown: [
        {
          name: "文化风景",
          opendata: "openData4",
          icon: "el-icon-s-opportunity",
        },
        {
          name: "出入口",
          opendata: "openData5",
          icon: "el-icon-s-promotion",
@@ -97,11 +126,28 @@
          opendata: "openData6",
          icon: "el-icon-s-flag",
        },
        {
          // name: "文化风景",
          name: "活动",
          opendata: "openData4",
          icon: "el-icon-s-opportunity",
        },
      ],
      avtivityData: [
        // [
        //   {
        //     name: "活动",
        //     opendata: "openData4",
        //     icon: "el-icon-s-opportunity",
        //   },
        //   {},
        //   {},
        // ],
      ],
      openData1: [
        // { name: "党群机构", type: 1, method: getList },
        // { name: "职能部处", type: 2, method: getList },
        // { name: "直属及附属单位", type: 3, method: getList },
        { name: "直属及附属单位", type: 3, method: getList },
        // { name: "教学与科研机构", type: 4, method: getList },
        { name: "其他机构", type: 5, method: getList },
      ],
@@ -131,7 +177,7 @@
      openData3: [
        // { name: "食堂餐厅", type: 1, method: getListLifeOnce },
        // { name: "购物超市", type: 2, method: getListLifeOnce },
        // { name: "社区医疗", type: 3, method: getListLifeOnce },
        { name: "社区医疗", type: 3, method: getListLifeOnce },
        // { name: "邮寄快递", type: 4, method: getListLifeOnce },
        // { name: "社区浴室", type: 5, method: getListLifeOnce },
        // // { name: "圈存机", type: 6, method: getListLifeOnce },
@@ -142,14 +188,81 @@
        { name: "停车场", type: 11, method: getListLifeOnce },
        { name: "出入口", type: 12, method: getListLifeOnce },
      ],
      openData4: [
        // { name: "文化风景", type: 5, method: getChildNavList }
        { name: "活动", type: 1, method: getActivity },
      ],
      openData6: [{ name: "停车场", type: 11, method: getListLifeOnce }],
      openData5: [{ name: "出入口", type: 12, method: getListLifeOnce }],
      openData4: [{ name: "文化风景", type: 5, method: getChildNavList }],
      useHD: false,
    };
  },
  mounted() {},
  mounted() {
    this.getActivitys();
    if (this.useHD) {
      this.choiceDataDown[3] = { name: "" };
    }
  },
  methods: {
    //活动点击事件
    openHDPopup(val) {
      console.log(val);
      //开启底部弹窗  关闭本弹窗
      let d = {
        state: true,
        value: val,
      };
      this.$store.commit("set_showActivity", d);
      this.closeBigPopupAfter();
    },
    //获取活动数据
    getActivitys() {
      let that = this;
      getActivity().then((res) => {
        const data = res.data.data.records;
        let datas = [...data];
        let num = datas.length;
        //划分出每组3个的二维数组
        let many = parseInt(num / 3); //整数组
        let over = parseInt(num % 3); //余数组
        //赋值整数组
        let integers = [];
        let i = 0;
        for (let index = 0; index < many; index++) {
          let integersins = [];
          for (let indexs = 0; indexs < 3; indexs++) {
            integersins.push({
              name: datas[i].hdname,
              opendata: datas[i],
              icon: "el-icon-s-opportunity",
            });
            i++;
          }
          integers.push(integersins);
        }
        //赋值余数组
        let integersOvers = [];
        for (let overI = 0; overI < over; overI++) {
          integersOvers.push({
            name: datas[i].hdname,
            opendata: datas[i],
            icon: "el-icon-s-opportunity",
          });
          i++;
        }
        let lastOver = 3 - over;
        for (let overM = 0; overM < lastOver; overM++) {
          integersOvers.push({ data: "not" });
        }
        integers.push(integersOvers);
        that.avtivityData = integers;
      });
    },
    openBigPopup(val) {
      if (val.name == "活动" && !this.useHD) {
        this.openHDPopup(this.avtivityData[0][0]);
        return;
      }
      const d = {
        main: this[val.opendata],
        qurey: val.name,
@@ -176,7 +289,8 @@
  // left: 13.5%;
  left: -1000px;
  width: 75%;
  height: 25%;
  height: auto;
  min-height: 155px;
  background-color: #fff;
  box-shadow: 0px 0px 5px #29baf1;
  transition: all 0.5s;
@@ -204,6 +318,7 @@
    height: 35px;
    box-sizing: border-box;
    padding: 5px 15px;
    color: #fff;
    @extend .flexCenter;
    justify-content: space-between;
    background-color: #29baf1;
@@ -217,18 +332,23 @@
      color: #fff;
    }
  }
  .m_p_a_hdheard {
    margin: 5px 0;
  }
  .m_p_a_center {
    width: 100%;
    height: calc(100% - 35px);
    // height: calc(100% - 35px);
    height: auto;
    @extend .flexCenter;
    flex-direction: column;
    padding: 5px 0;
    .m_p_a_center_group {
      width: 100%;
      height: 40%;
      height: auto;
      @extend .flexCenter;
      .m_p_a_center_once {
        width: 30%;
        height: 100%;
        height: 50px;
        // background-image: linear-gradient(#29baf1, #28bbf06c);
        // background-color: #a40000;
        background-color: #29baf1;
@@ -241,6 +361,9 @@
        // background-image: linear-gradient(#09b7fc, #28bbf0a4);
        // }
      }
      .m_p_a_center_once_notblue {
        background-color: #fff !important;
      }
    }
  }
}

 src/components/mobileWindow/index.vue

@@ -253,28 +253,35 @@
      let query = this.query.query;
      // console.log(query);
      if (val == "去这") {
        // return;
        //定位
        // console.log(this.query.query);
        // that.$store.commit("set_endPosition", this.query.query.lntLat);
        let ints = {
          // start: [114.039946, 27.628475],
          // end: that.query.query.lntLat,
          start: [+query.lntLat[0], +query.lntLat[1], 360],
          end: [114.031946, 27.621475],
          type: "driving",
          fn: function (datas) {
            //获取回调路径
            that.routerS.push(datas);
            if (once) {
              once = false;
              //加载第一条线路
              that.$store.commit("set_choiceRouterS", 0);
              that.$store.dispatch("MSET_DRAWALINELAYER", [datas.Str, query]);
              that.$store.commit("cameraSetView", ints.start);
            }
          },
        let doit = (now) => {
          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);
              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.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);

 src/components/mobilemap/index.vue

@@ -27,7 +27,7 @@
    <!-- 退出活动 -->
    <mobileCloseRouterMany></mobileCloseRouterMany>
    <!-- 活动窗口 -->
    <!-- <mobileActivity></mobileActivity> -->
    <mobileActivity></mobileActivity>
    <!-- 盖住左下角 -->
    <div class="cover_mobileMap">智慧社区</div>
  </div>
@@ -798,6 +798,8 @@
        //   });
        // }, 2000);
      }
      viewer.scene.screenSpaceCameraController._minimumZoomRate = 3000;
      viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
      if (false) {
        //镜头改变示例
        // viewer.scene.screenSpaceCameraController.enableZoom = false; //控制视角缩放

 src/router/axios.js

@@ -6,11 +6,21 @@
 * isToken是否需要token
 */
import axios from "axios";

let httpName = window.location.hostname;
let url =
  window.location.hostname.indexOf("192.168") != -1
    ? "http://" + httpName + "/apis"
    : "https://" + httpName + "/apis";
// setTimeout(() => {
//   console.log("https://" + httpName + "/apis");
//   console.log(httpName.indexOf(".io"), " httpName");
// }, 3000);
const service = axios.create({
  //   baseURL: 'http://192.168.0.107:83',
  // baseURL: 'http://192.168.0.107:80',
  baseURL: "http://171.34.197.243:790",
  baseURL: "http://171.34.197.243:790", //正常接口
  // baseURL: "https://6e78efa6.cpolar.io/apis", //https接口
  // baseURL: url, //https接口
  // baseURL: 'http://s16s652780.51mypc.cn/api',
  timeout: 600000, // request timeout
});

 src/store/getters.js

@@ -31,6 +31,7 @@
  choiceRouterS: (state) => state.mobile.choiceRouterS, // 当前选择路径

  showActivity: (state) => state.mobile.showActivity, // 显影活动弹窗
  showActivityData: (state) => state.mobile.showActivityData, // 活动弹窗数据
  isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany, // 显影活动弹窗
};


 src/store/index.js

@@ -1,24 +1,26 @@
import Vue from 'vue'
import Vuex from 'vuex'
import Vue from "vue";
import Vuex from "vuex";

import viewer from './modules/viewer'
import popupParams from './modules/popupParams'
import navigation from './modules/navigation'
import search from './modules/search'
import mobile from './modules/mobile'
import getters from './getters'
import viewer from "./modules/viewer";
import popupParams from "./modules/popupParams";
import navigation from "./modules/navigation";
import search from "./modules/search";
import mobile from "./modules/mobile";
import mobilePosition from "./modules/mobilePosition";
import getters from "./getters";

Vue.use(Vuex)
Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        viewer,
        popupParams,
        mobile,
        navigation,
        search
    },
    getters
})
  modules: {
    mobile,
    mobilePosition,
    viewer,
    popupParams,
    navigation,
    search,
  },
  getters,
});

export default store
export default store;

 src/store/modules/mobile.js

@@ -68,9 +68,12 @@
    isendPosition: false, //传送终点经纬度--感应数据
    routerS: [], //所有路径
    choiceRouterS: 0, //当前选择路径

    showActivity: false, //是否显示活动弹窗
    showActivityData: {}, //活动内容

    drawALineLayerMany: null, //活动路线图层
    drawAPointLayerMany: null, //活动点图层
    isOpenDrawALineMany: null, //是否开启活动
  },
  mutations: {
@@ -294,6 +297,15 @@
        state.drawALineLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
      if (state.drawAPointLayerMany) {
        state.drawAPointLayerMany.remove();
        state.drawAPointLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
    },
    //显影线路或者点
    showLineOrPoint(state, val) {
      state[val.layer].show = val.flag;
    },
    //传送终点数据
    set_endPosition(state, data) {
@@ -307,6 +319,13 @@
    //活动窗口是否显示
    set_showActivity(state, data) {
      state.showActivity = data;
      if (data.state) {
        state.showActivityData = data.value;
        state.showActivity = data.state;
      } else {
        state.showActivityData = {};
        state.showActivity = data.state;
      }
    },
    mset_changeSelect(state, data) {
      state.select.overlay = data[0];
@@ -831,18 +850,20 @@
        speed: 10,
      });
      let material1 = new global.DC.PolylineImageTrailMaterialProperty({
        color: global.DC.Color(255, 0, 0),
        color: red,
        speed: 60,
        image: "img/icon/right.png",
        repeat: { x: 320, y: 1 },
      });
      let drawALineLayerMany = new global.DC.VectorLayer("manyLinePointLayer");
      state.mviewer.addLayer(drawALineLayerMany);
      let drawAPointLayerMany = new global.DC.HtmlLayer("manyPointPointLayer");
      state.mviewer.addLayer(drawAPointLayerMany);
      //多条线
      for (let k in Strs) {
        let polyline = new global.DC.Polyline(Strs[k].value); //加入绘画点
        polyline.setStyle({
          width: 3,
          width: 6,
          material: material1,
          clampToGround: true,
        });
@@ -867,49 +888,67 @@
        let post = point[k].value;
        let position = new global.DC.Position(post[0], post[1]);

        let billboard = new global.DC.Billboard(
        // let billboard = new global.DC.Billboard(
        //   position,
        //   // "img/dingwei/dingwei1.png"
        //   "img/icon/activity.png"
        // ); //加入绘画点
        // billboard.setStyle({
        //   pixelOffset: { x: 0, y: -17 }, //偏移像素
        // });
        // //订阅事件
        // billboard.on(global.DC.MouseEventType.CLICK, (e) => {
        //   // console.log(e);
        //   // return;
        //   // 定制化窗体
        //   let position = e.position,
        //     lntLat = [e.overlay._position._lng, e.overlay._position._lat];
        //   let windowData = {
        //     position,
        //     lntLat,
        //     query: {
        //       ...(value[2] || {}),
        //       position,
        //       lntLat,
        //       notAddGoOn: "notAddGoOn",
        //     },
        //     useJWD: true, //仅使用经纬度
        //   };
        //   dispatch("setMobileWindows", windowData);
        // });
        // drawALineLayerMany.addOverlay(billboard);
        // let Labels = new global.DC.Label(position, point[k].name);
        // Labels.setStyle({
        //   font: "16px sans-serif", // CSS 字体设置
        //   scale: 1, //比例
        //   fillColor: white, //文字颜色
        //   showBackground: true, //是否显示背景
        //   backgroundColor: blue, //背景颜色
        //   // outlineColor: white, //边框颜色
        //   // outlineWidth: 1, //边框大小，
        //   pixelOffset: { x: 0, y: -47 }, //偏移像素
        // });
        let Labels = new global.DC.DivIcon(
          // new this.DC.Position(Number(item[0]), Number(item[1]), 0),
          position,
          "img/dingwei/dingwei1.png"
        ); //加入绘画点
        billboard.setStyle({
          pixelOffset: { x: 0, y: -17 }, //偏移像素
        });
        //订阅事件
        billboard.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          let windowData = {
            position,
            lntLat,
            query: {
              ...(value[2] || {}),
              position,
              lntLat,
              notAddGoOn: "notAddGoOn",
            },
            useJWD: true, //仅使用经纬度
          };
          dispatch("setMobileWindows", windowData);
        });
        drawALineLayerMany.addOverlay(billboard);
        let Labels = new global.DC.Label(position, point[k].name);
        Labels.setStyle({
          font: "16px sans-serif", // CSS 字体设置
          scale: 1, //比例
          fillColor: white, //文字颜色
          showBackground: true, //是否显示背景
          backgroundColor: blue, //背景颜色
          // outlineColor: white, //边框颜色
          // outlineWidth: 1, //边框大小，
          pixelOffset: { x: 0, y: -47 }, //偏移像素
        });
          `
              <div class="point-entitys-box">
                  <div class="point-logo">
                      <img src="/img/icon/activity.png">
                  </div>
                  <div class="point-title">
                      ${point[k].name}
                  </div>
              </div>
          `
        );
        //订阅事件
        Labels.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          if (value[3]) {
            value[3]();
          }
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
@@ -921,11 +960,12 @@
          };
          dispatch("setMobileWindows", windowData);
        });
        drawALineLayerMany.addOverlay(Labels);
        drawAPointLayerMany.addOverlay(Labels);
        // console.log(point[k]);
      }
      state.drawALineLayerMany = drawALineLayerMany;
      state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
      state.drawAPointLayerMany = drawAPointLayerMany;
      // state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
  },

 src/store/modules/mobilePosition.js

New file
@@ -0,0 +1,33 @@
const mobilePosition = {
  state: {},
  mutations: {
    GET_NOWPOSITION(state, val) {
      let outData =
        val ||
        function (res) {
          console.log(res);
        };
      if (navigator.geolocation) {
        console.log("支持navigator.geolocation-111111111111111");
        try {
          navigator.geolocation.getCurrentPosition(function (position) {
            console.log(position);
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            console.log("成功返回经纬度信息");
            console.log(lon, lat);
            outData([lon, lat]);
          });
        } catch {
          console.log("支持navigator.geolocation-需要HTTPS");
        }
      } else {
        console.log("不支持navigator.geolocation");
        return "不支持navigator.geolocation";
      }
    },
  },
  actions: {},
};

export default mobilePosition;