+,请求数据，弹框显示，优化代码长度

liuyg

2021-12-21 81773ab04fd259e893c2d7f08dbdc9be772d01c4

+,请求数据，弹框显示，优化代码长度

 src/api/mobile/livingFacilities/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-20 17:05:16
 * @Last Modified time: 2021-12-21 09:57:32
 */
// 生活设施
import request from '@/router/axios'
@@ -25,3 +25,75 @@
    })
}

//医疗
export const getListmedical = (params) => { //获取生活设施
    return request({
        url: 'blade-medical/medical/list',
        method: 'get',
        params: params
    })
}

//快递
export const getListmail = (params) => { //获取生活设施
    return request({
        url: 'blade-mail/mail/list',
        method: 'get',
        params: params
    })
}

//浴室
export const getListbathroom = (params) => { //获取生活设施
    return request({
        url: 'blade-bathroom/bathroom/list',
        method: 'get',
        params: params
    })
}

//打字复印
export const getListduplicate = (params) => { //获取生活设施
    return request({
        url: 'blade-duplicate/duplicate/list',
        method: 'get',
        params: params
    })
}

//银行网点
export const getListnetwork = (params) => { //获取生活设施
    return request({
        url: 'blade-network/network/list',
        method: 'get',
        params: params
    })
}

//AED
export const getListaed = (params) => { //获取生活设施
    return request({
        url: 'blade-aed/aed/list',
        method: 'get',
        params: params
    })
}

//通讯
export const getListsignal = (params) => { //获取生活设施
    return request({
        url: 'blade-signal/signal/list',
        method: 'get',
        params: params
    })
}

// //停车场
// export const getListnetwork = (params) => { //获取生活设施
//     return request({
//         url: 'blade-parking/parking/list',
//         method: 'get',
//         params: params
//     })
// }


 src/api/mobile/stop/index.js

New file
@@ -0,0 +1,19 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-21 10:00:12
 */
// 停车场
import request from '@/router/axios'



export const getListparking = (params) => { //获取生活设施
    return request({
        url: 'blade-parking/parking/list',
        method: 'get',
        params: params
    })
}


 src/components/mobileCortrol/index.vue

@@ -23,59 +23,13 @@
  },
  methods: {
    zoomIn(val) {
      let that = this;
      // console.log(val);
      // 121.49592752204283 31.23567802276832
      this.mviewer.zoomToPosition(
        new that.DC.Position(
          121.49592752204283,
          31.23567802276832 - 0.012,
          2530,
          0,
          -45
        )
      );
      // let camera = this.mviewer.camera;
      // // console.log(camera.moveStart());
      // // this.mviewer.getImageryLayerInfo().then((res) => {
      // //   console.log(res);
      // // });
      // var ellipsoid = this.mviewer.scene.globe.ellipsoid;
      // var cartesian3 = DC.Namespace.Cesium.cartesian3(
      //   camera.position.x,
      //   camera.position.y,
      //   camera.position.z
      // );
      // // // var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
      // // // var lat = Cesium.Math.toDegrees(cartograhphic.latitude);
      // // // var lng = Cesium.Math.toDegrees(cartograhpinc.longitude);
      // // // var alt = cartographic.height;
      // console.log(cartesian3);
      // let position = camera.position;
      // for (let k in position) {
      //   if (k == "x" || k == "y" || k == "z") {
      //     console.log(k, " : ", position[k]);
      //   }
      // }
      // if (val == "+") {
      //   camera.position.x -= 614.8521;
      //   camera.position.y -= 1002.9298;
      //   camera.position.z += 682.3683;
      // } else if (val == "-") {
      //   camera.position.x += 614.8521;
      //   camera.position.y += 1002.9298;
      //   camera.position.z -= 682.3683;
      // }
      // camera.flyTo({
      //   destination: position,
      //   orientation: {
      //     heading: camera.heading,
      //     pitch: camera.pitch,
      //     roll: camera.roll,
      //   },
      //   duration: 0.5,
      //   convert: false,
      // });
      this.$store.dispatch("mapFlyTo", {
        //飞入
        lntLat: [121.50492752204283, 31.21567802276832, 2530],
        heading: 0,
        pitch: -45,
        roll: 0,
      });
    },
  },
};
@@ -86,7 +40,7 @@
  position: fixed;
  left: 20px;
  top: 87px;
  z-index: 201 !important;
  z-index: 20 !important;
  .m-l-inbut {
    width: 35px;
    height: 35px;

 src/components/mobileCortrolButtom/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="m-left-mobileCortrolButtom">
    <div class="m-l-inbut"><i class="el-icon-s-help"></i></div>
    <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div>
    <div class="m-l-inbut">
      <!-- <i class="el-icon-s-flag"></i> -->
      <el-dropdown trigger="click" @command="handleCommand">
@@ -34,6 +34,24 @@
    return {
      DC: "",
      tabTable: [],
      ccData: [
        {
          lnt: 115.87071885,
          lat: 28.74382592,
        },
        {
          lnt: 121.50266534548483,
          lat: 31.24357506330159,
        },
        {
          lnt: 121.56405019,
          lat: 31.20845211,
        },
        {
          lnt: 121.55500463461836,
          lat: 31.257934074839717,
        },
      ],
    };
  },
  computed: {
@@ -45,19 +63,21 @@
  },
  mounted() {},
  methods: {
    mubiao() {
      let that = this;
      //测试fllyTo
    },
    handleCommand(command) {
      let that = this;
      console.log(command, "定位");
      // 定位
      // this.mviewer.zoomToPosition(
      //   new that.DC.Position(
      //     command.position[0],
      //     command.position[1] - 0.012,
      //     1530,
      //     0,
      //     -45
      //   )
      // );
      this.$store.dispatch("mapFlyTo", {
        //飞入
        lntLat: [command.lnt, command.lat, 2530],
        heading: 0,
        pitch: -45,
        roll: 0,
      });
    },
    openBigPopupAfter() {
      this.$store.commit("MSET_BIGPOPUPAFTER", true);
@@ -77,16 +97,28 @@
      // });
    },
    getStreet() {
      let that = this;
      getListarc().then((res) => {
        let title = [];
        res.data.data.forEach((item) => {
        const data = res.data.data;
        for (let k = 0; k < data.length; k++) {
          title.push({
            title: item.dictValue,
            title: data[k].dictValue,
            flag: false,
            key: item.dictKey,
            key: data[k].dictKey,
            child: [],
            lnt: that.ccData[k].lnt,
            lat: that.ccData[k].lat,
          });
        });
        }
        // res.data.data.forEach((item) => {
        //   title.push({
        //     title: item.dictValue,
        //     flag: false,
        //     key: item.dictKey,
        //     child: [],
        //   });
        // });
        this.tabTable = title;
        this.$store.commit("MSET_POPUPTABLENAME", title);
      });

 src/components/mobilePopupOur/index.vue

@@ -78,12 +78,7 @@
</template>

<script>
import { getList } from "@/api/mobile/orgnav/index";
import { getListarc, getChildNavList } from "@/api/mobile/public/arc";
import {
  getListlivingFacilitiesr,
  getListsupermarket,
} from "@/api/mobile/livingFacilities/index";
import { getListarc } from "@/api/mobile/public/arc"; //头部下标签页数据
import { mapGetters } from "vuex";
export default {
  computed: {
@@ -95,89 +90,61 @@
      searchLabel: "",
      choiceValue: "",
      choiceKey: "",
      choiceMethod: "",
      choiceData: [],
      tabTable: [],
      fullscreenLoading: false,
      activeName: "1",
      choiceMain: "",
      onlyData: [],
      OURAPI_FORLIFE: {},
    };
  },
  mounted() {
    this.fullscreenLoading = true;
    if (this.mBigPopup.search) {
      //搜索事件
      this.searchLabel = this.mBigPopup.value;
      // console.log("查询搜索结果", this.mBigPopup.value);
      this.fullscreenLoading = false;
      this.choiceMain = "搜索";
      return;
    }
    this.choiceMain = this.popupOurOpenData.qurey;
    this.choiceData = this.popupOurOpenData.main;
    this.choiceMain = this.popupOurOpenData.qurey; // 进入的主题：列：机构单位，校园建筑
    this.choiceData = this.popupOurOpenData.main; //带入数据  包括name、type、method

    this.choiceValue = this.popupOurOpenData.main[0].name;
    this.choiceKey = this.popupOurOpenData.main[0].type;
    this.$store.commit("MSET_BIGPOPUPAFTER", false);
    this.choiceMethod = this.popupOurOpenData.main[0].method;

    this.$store.commit("MSET_BIGPOPUPAFTER", false); //关闭前一个弹窗
    // console.log("请求对应街道接口", this.popupOurOpenData);
    if (this.choiceMain == "校园建筑") {
      //校园建筑：加入街道的选择
      this.getDataCampus();
    } else if (this.choiceMain == "机构单位") {
      this.getInstitutional(this.choiceKey);
    } else if (this.choiceMain == "生活设施") {
      // 加入所有请求接口函数
      this.OURAPI_FORLIFE = {
        1: getListlivingFacilitiesr,
        2: getListsupermarket,
        3: getListlivingFacilitiesr,
        4: getListlivingFacilitiesr,
        5: getListlivingFacilitiesr,
        6: getListlivingFacilitiesr,
        7: getListlivingFacilitiesr,
        8: getListlivingFacilitiesr,
        9: getListlivingFacilitiesr,
        10: getListlivingFacilitiesr,
      };
      this.getDatalivingFacilities();
    } else if (this.choiceMain == "文化风景") {
      console.log(this.choiceKey, " : ", this.choiceMain);
      this.fullscreenLoading = false;
    } else if (this.choiceMain == "出入口") {
      console.log(this.choiceKey, " : ", this.choiceMain);
      this.fullscreenLoading = false;
    } else if (this.choiceMain == "停车场") {
      console.log(this.choiceKey, " : ", this.choiceMain);
      this.fullscreenLoading = false;
    }
    this.getDataHeardDown();
  },
  methods: {
    handleClick(tab, event) {
      //头下部标签
      this.fullscreenLoading = true;
      if (this.choiceMain == "校园建筑") {
        this.getListCampus(this.activeName, this.choiceKey);
      } else if (this.choiceMain == "生活设施") {
        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
      }
      this.getOutList(this.activeName, this.choiceKey);
    },
    choiceIt(command) {
      //头部下拉菜单
      this.fullscreenLoading = true;
      this.choiceValue = command.name;
      this.choiceKey = command.type;
      console.log("请求对应头部下拉菜单接口", command);
      if (this.choiceMain == "校园建筑") {
        this.getListCampus(this.activeName, this.choiceKey);
      } else if (this.choiceMain == "机构单位") {
        this.getInstitutional(this.choiceKey);
      } else if (this.choiceMain == "生活设施") {
        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
      }
      this.choiceMethod = command.method; //更改请求
      // console.log("请求对应头部下拉菜单接口", command);
      this.getOutList(this.activeName, this.choiceKey);
    },
    closeBigPopup() {
      this.$store.commit("MSET_BIGPOPUP", false);
    },
    //"生活设施"↓
    getDatalivingFacilities(data) {
      let that = this;
    getDataHeardDown() {
      if (this.choiceMain == "机构单位") {
        //不请求头部标签页数据
        this.getOutList(this.activeName, this.choiceKey);
        return;
      }
      //获取头下部标签页
      getListarc().then((res) => {
        let title = [];
        res.data.data.forEach((item) => {
@@ -189,173 +156,66 @@
          });
        });
        this.tabTable = title;

        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
        this.getOutList(this.activeName, this.choiceKey);
      });
    },
    getListlivingFacilities(campus, type) {
    //请求
    getOutList(campus, type) {
      let that = this;
      this.OURAPI_FORLIFE[type]({ campus: campus }).then((res) => {
        const data = res.data.data.records;
        // console.log(data);
        // return;
      this.choiceMethod({ campus: campus, type: type }).then((res) => {
        const data = res.data.data;
        let outList = [];
        data.forEach((item) => {
          let icon = item.tpurl.split(",");
          outList.push({
            name: item.mechanismname,
            lntLat: [item.jd, item.wd],
            alt: item.gd,
            heading: item.heading,
            pitch: item.pitch,
            roll: item.roll,
            bgImg: item.tpurl,
            icon: icon,
            from: this.choiceMain,
            QRImg: item.codeurl,
            websiteUrl: item.websiteurl,
            telePhone: item.telephone,
            buts:
              that.mBigPopup.name == "校园建筑" ||
              that.mBigPopup.name == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
        if (this.choiceMain == "校园建筑") {
          // 校园建筑使用该id获取具体信息
          data.forEach((item) => {
            let icon = item.tpurl.split(",");
            outList.push({
              id: item.id,
              name: item.mechanismname,
              icon: icon,
              from: this.choiceMain,
              buts:
                this.mBigPopup.name == "校园建筑" ||
                this.mBigPopup.name == "文化风景"
                  ? ["定位", "实景", "图集"]
                  : ["定位"],
            });
          });
        });
        } else {
          //正常获取全部数据
          data.records.forEach((item) => {
            let icon = item.tpurl.split(",");
            outList.push({
              name: item.mechanismname,
              lntLat: [item.jd, item.wd],
              alt: item.gd,
              heading: item.heading,
              pitch: item.pitch,
              roll: item.roll,
              bgImg: item.tpurl,
              icon: icon,
              from: this.choiceMain,
              QRImg: item.codeurl,
              websiteUrl: item.websiteurl,
              telePhone: item.telephone,
              address: item.address,
              introduce: item.introduce,
              buts:
                that.mBigPopup.name == "校园建筑" ||
                that.mBigPopup.name == "文化风景"
                  ? ["定位", "实景", "图集"]
                  : ["定位"],
            });
          });
        }
        that.fullscreenLoading = false;
        if (this.choiceMain == "机构单位") {
          that.onlyData = outList;
          return;
        }
        that.tabTable[+campus - 1].child = outList;
      });
    },
    //"生活设施"↑

    //""机构单位""↓
    getInstitutional(type) {
      let that = this;
      // console.log(type);
      getList({ type: type }).then((res) => {
        const data = res.data.data;
        let outList = [];
        data.records.forEach((item) => {
          let icon = item.tpurl.split(",");
          outList.push({
            name: item.mechanismname,
            lntLat: [item.jd, item.wd],
            alt: item.gd,
            heading: item.heading,
            pitch: item.pitch,
            roll: item.roll,
            bgImg: item.tpurl,
            icon: icon,
            from: this.choiceMain,
            QRImg: item.codeurl,
            websiteUrl: item.websiteurl,
            telePhone: item.telephone,
            buts:
              that.mBigPopup.name == "校园建筑" ||
              that.mBigPopup.name == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
          });
        });
        that.fullscreenLoading = false;
        that.onlyData = outList;
      });
    },
    //""机构单位""↑
    //"校园建筑"↓
    getDataCampus() {
      getListarc().then((res) => {
        let title = [];
        res.data.data.forEach((item) => {
          title.push({
            title: item.dictValue,
            flag: false,
            key: item.dictKey,
            child: [],
          });
        });
        this.tabTable = title;
        this.getListCampus(this.activeName, this.choiceKey);
      });
    },
    getListCampus(campus, type) {
      let that = this;
      getChildNavList({ campus: campus, type: type }).then((res) => {
        const data = res.data.data;
        let outList = [];
        data.forEach((item) => {
          let icon = item.tpurl.split(",");
          outList.push({
            id: item.id,
            name: item.mechanismname,
            icon: icon,
            from: this.choiceMain,
            buts:
              this.mBigPopup.name == "校园建筑" ||
              this.mBigPopup.name == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
          });
        });
        that.fullscreenLoading = false;
        that.tabTable[+campus - 1].child = outList;
      });
    },
    //"校园建筑"↑
  },
};
</script>

<style lang="scss" scoped>
#mobilePopupOur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 300;
  .m_p_heard {
    width: 100%;
    height: 50px;
    background-color: #a40000;
    .m_p_h_break {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        font-size: 22px;
        color: #fff;
      }
    }
    .m_p_h_center {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-dropdown-link {
        color: #fff;
      }
    }
  }
  .m_p_center {
    width: 100%;
    height: calc(100% - 50px);
    // border: 1px solid red
    box-sizing: border-box;
    .m_p_c_tableIn {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
</script>

 src/components/mobilePopupOurAfter/index.vue

@@ -32,6 +32,20 @@
</template>

<script>
import { getList } from "@/api/mobile/orgnav/index"; //机构单位
import { getChildNavList } from "@/api/mobile/public/arc"; //校园建筑
import {
  getListlivingFacilitiesr,
  getListsupermarket,
  getListmedical,
  getListmail,
  getListbathroom,
  getListduplicate,
  getListnetwork,
  getListaed,
  getListsignal,
} from "@/api/mobile/livingFacilities/index"; //生活设施
import { getListparking } from "@/api/mobile/stop/index"; //停车场
export default {
  name: "mobilePopupOurAfter",
  data() {
@@ -72,36 +86,40 @@
        },
      ],
      openData1: [
        { name: "党群机构", type: 1 },
        { name: "职能部处", type: 2 },
        { name: "直属及附属单位", type: 3 },
        { name: "教学与科研机构", type: 4 },
        { name: "其他机构", type: 5 },
        { name: "党群机构", type: 1, method: getList },
        { name: "职能部处", type: 2, method: getList },
        { name: "直属及附属单位", type: 3, method: getList },
        { name: "教学与科研机构", type: 4, method: getList },
        { name: "其他机构", type: 5, method: getList },
      ],
      openData2: [
        { name: "行政办公", type: 1 },
        { name: "教学科研", type: 2 },
        { name: "校内场馆", type: 3 },
        { name: "宿舍公寓", type: 4 },
        { name: "文化风景", type: 5 },
        { name: "家属住宅", type: 6 },
        { name: "其他楼宇", type: 7 },
        { name: "行政办公", type: 1, method: getChildNavList },
        { name: "教学科研", type: 2, method: getChildNavList },
        { name: "校内场馆", type: 3, method: getChildNavList },
        { name: "宿舍公寓", type: 4, method: getChildNavList },
        { name: "文化风景", type: 5, method: getChildNavList },
        { name: "家属住宅", type: 6, method: getChildNavList },
        { name: "其他楼宇", type: 7, method: getChildNavList },
      ],
      openData3: [
        { name: "食堂餐厅", type: 1 },
        { name: "购物超市", type: 2 },
        { name: "校内医疗", type: 3 },
        { name: "邮寄快递", type: 4 },
        { name: "学生浴室", type: 5 },
        { name: "圈存机", type: 6 },
        { name: "打字复印", type: 7 },
        { name: "AED", type: 8 },
        { name: "银行网点", type: 9 },
        { name: "通信营业厅", type: 10 },
        { name: "食堂餐厅", type: 1, method: getListlivingFacilitiesr },
        { name: "购物超市", type: 2, method: getListsupermarket },
        { name: "校内医疗", type: 3, method: getListmedical },
        { name: "邮寄快递", type: 4, method: getListmail },
        { name: "学生浴室", type: 5, method: getListbathroom },
        // { name: "圈存机", type: 6 ,method:getListlivingFacilitiesr},
        { name: "打字复印", type: 7, method: getListduplicate },
        { name: "AED", type: 8, method: getListaed },
        { name: "银行网点", type: 9, method: getListnetwork },
        { name: "通信营业厅", type: 10, method: getListsignal },
      ],
      openData4: [{ name: "文化风景", type: 1 }],
      openData5: [{ name: "出入口", type: 1 }],
      openData6: [{ name: "停车场", type: 1 }],
      openData4: [
        { name: "文化风景", type: 1, method: getListlivingFacilitiesr },
      ],
      openData5: [
        { name: "出入口", type: 1, method: getListlivingFacilitiesr },
      ],
      openData6: [{ name: "停车场", type: 1, method: getListparking }],
    };
  },
  mounted() {},

 src/components/mobilePopupOurOnce/index.vue

@@ -23,7 +23,15 @@
        <div class="mobilePopupOurOnce_r_down">
          <div v-for="(item, index) in seebut" :key="index">
            <el-link
              icon="el-icon-map-location"
              :icon="
                item.name == '实景'
                  ? 'el-icon-place'
                  : item.name == '图集'
                  ? 'el-icon-data-board'
                  : item.name == '定位'
                  ? 'el-icon-map-location'
                  : ''
              "
              class="mobilePopupOurOnce_r_d_in"
              @click="openOnce(item.name)"
              >{{ item.name }}</el-link
@@ -48,17 +56,13 @@
  name: "mobilePopupOurOnce",
  created() {
    this.DC = global.DC;
    // console.log(this.onceData);
    if (this.onceData.icon) {
      this.srcList = this.onceData.icon;
      this.icon = this.srcList[0];
    }
    if (this.onceData.from == "校园建筑") {
      this.getOnceCampus(this.onceData.id);
    } else if (
      this.onceData.from == "机构单位" ||
      this.onceData.from == "生活设施"
    ) {
    } else {
      this.ourData = this.onceData;
    }
  },
@@ -111,7 +115,6 @@
          "https://www.kuleiman.com/110487/index.html?m=1"
        );
      } else if (val == "图集") {
        console.log(this.srcList);
        let imgsDom = document.getElementById("mobileBigImgs" + this.icon + "");
        imgsDom.click();
      }
@@ -120,7 +123,6 @@
    getOnceCampus(id) {
      getChildNavDetail({ id: id }).then((res) => {
        var result = res.data.data[0].list;
        // console.log(result);
        let d = {
          name: result.mechanismname,
          lntLat: [result.jd, result.wd],
@@ -132,6 +134,7 @@
          QRImg: result.codeurl,
          websiteUrl: result.websiteurl,
          telePhone: result.telephone,
          address: result.address,
        };
        this.ourData = d;
      });

 src/components/mobileWindow/index.vue

@@ -4,41 +4,55 @@
    v-show="!MobileWindowsHide"
    id="mobile-map_content_content"
  >
    <div class="mobile-popup-imgs-heard">
      <img :src="url" alt="" />
      <el-image
        style="width: 100px; height: 100px"
        :src="url"
        id="mobileBigImgs"
        v-show="false"
        :preview-src-list="srcList"
      >
      </el-image>
      <!-- <div>{{ query.query }}</div> -->
      <div class="mobileBig-center-our">
        <div
          v-for="(item, index) in center"
          :key="index"
          class="mobileBig-center"
    <div class="mobiletitle">{{ title }}</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>
        </div>
        <img :src="url" alt="" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList"
        >
          <div class="m-c-title">{{ item.name }}：</div>
          <span class="m-c-center">{{ item.value }}</span>
        </el-image>
        <!-- <div>{{ query.query }}</div> -->
        <div class="mobileBig-center-our">
          <div
            v-for="(item, index) in center"
            :key="index"
            class="mobileBig-center"
          >
            <div class="m-c-title">{{ item.name }}：</div>
            <span class="m-c-center">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mobile-popup-control">
      <div v-for="(item, index) in seebut" :key="index">
        <el-link
          icon="el-icon-map-location"
          class="mobilePopupOurOnce_r_d_in"
          @click="openOnce(item.name)"
          >{{ item.name }}</el-link
        >
        <el-divider
          direction="vertical"
          class="mobilePopupOurOnce_r_d_in"
          v-if="index != seebut.length - 1"
        ></el-divider>
      <div class="mobile-popup-control">
        <div v-for="(item, index) in seebut" :key="index">
          <el-link
            :icon="
              item.name == '实景'
                ? 'el-icon-place'
                : item.name == '图集'
                ? 'el-icon-data-board'
                : item.name == '去这'
                ? 'el-icon-finished'
                : ''
            "
            class="mobilePopupOurOnce_r_d_in"
            @click="openOnce(item.name)"
            >{{ item.name }}</el-link
          >
          <el-divider
            direction="vertical"
            class="mobilePopupOurOnce_r_d_in"
            v-if="index != seebut.length - 1"
          ></el-divider>
        </div>
      </div>
    </div>
  </div>
@@ -71,11 +85,23 @@
          this.seebut.push({
            name: "去这",
          });
        } else {
          this.seebut = [
            {
              name: "实景",
            },
            {
              name: "图集",
            },
            {
              name: "去这",
            },
          ];
        }
        this.center = [];
        for (let k in this.query.query) {
          for (let n in this.getCenter) {
            if (k == this.getCenter[n].name) {
            if (k == this.getCenter[n].name && this.query.query[k]) {
              this.center.push({
                name: this.getCenter[n].value,
                value: this.query.query[k] ? this.query.query[k] : "暂无",
@@ -97,6 +123,14 @@
          name: "telePhone",
          value: "电话",
        },
        {
          name: "address",
          value: "地址",
        },
        {
          name: "introduce",
          value: "详情",
        },
      ],
      title: "",
      fullscreenLoading: false,
@@ -104,12 +138,7 @@
      positions: "",
      srcList: [],
      seebut: [],
      center: [
        {
          name: "网址",
          value: "123",
        },
      ],
      center: [],
    };
  },
  methods: {
@@ -119,12 +148,20 @@
      if (val == "去这") {
        //定位
      } else if (val == "实景") {
        this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
        this.$store.commit(
          "MSET_OPENMOBILEPANORAMA",
          "https://www.kuleiman.com/110487/index.html?m=1"
        );
      } else if (val == "图集") {
        let imgsDom = document.getElementById("mobileBigImgs");
        imgsDom.click();
      }
    },
    closeWindow() {
      if (!this.MobileWindowsHide) {
        this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
      }
    },
  },
};
</script>

 src/components/mobilemap/index.vue

@@ -184,7 +184,7 @@
          that.$store.commit("MSET_ICONHIDE", true);
        }
        if (!that.MobileWindowsHide) {
          that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
          // that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
        }
        // if (!that.MobileWindowsHideFixed) {
        //   that.$store.dispatch("CLOSE_WIDOWFIXED"); //关闭固定弹窗
@@ -219,8 +219,8 @@
      viewer.use(new DC.Measure());

      tileset.setStyle(style);
      // layer.addOverlay(tileset);
      // viewer.flyTo(tileset);
      layer.addOverlay(tileset);
      viewer.flyTo(tileset);

      tileset.on(DC.MouseEventType.CLICK, (e) => {
        // that.popupFlag = true
@@ -229,7 +229,7 @@
        viewer.scene.globe.depthTestAgainstTerrain = false;

        // console.log(document.getElementById("mobile-map_content_content"));
        console.log(e);
        // console.log(e);

        // 定制化窗体
        that.openPopupS(e.position, [e.wgs84Position.lng, e.wgs84Position.lat]);
@@ -258,7 +258,7 @@
      let d = {
        position,
        lntLat,
        query: { ...(query || {}), position, lntLat },
        query: { ...(query || {}), introduce: position, address: lntLat },
        useJWD: true, //仅使用经纬度
      };
      that.$store.dispatch("setMobileWindows", d);

 src/mobileDivForms/mobileDivForms.js

@@ -74,11 +74,12 @@

        var el = $("<div class=''></div>")

        var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
        var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)
        // var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
        // var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)

        el.append(titleDiv)
        el.append(labelContent)
        // el.append(titleDiv)
        // el.append(labelContent)
        el.append(this._content)

        el.attr('id', id)


 src/store/modules/mobile.js

@@ -62,7 +62,9 @@
        },
    },
    actions: {
        setMobileWindows({ state, commit, }, data) {//打开随地图移动窗口，暂不使用
        setMobileWindows({ state, commit, dispatch }, data) {//打开随地图移动窗口
            // 关闭前一个弹窗？
            dispatch("closeMobileWindowsDom");
            if (data.useJWD) {
                var ellipsoid = state.mviewer.scene.globe.ellipsoid;
                var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
@@ -82,10 +84,31 @@
                content: document.getElementById("mobile-map_content_content"),
                position: [data.position],
            });
            commit("MSET_MOBILEWINDOWSHIDE", false)
            state.mviewer.zoomToPosition(
                new global.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
            // commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
            // dispatch("CHANGETOC3", { // 转换坐标
            //     lnt: data.lntLat[0],
            //     lat: data.lntLat[1]
            // }).then(res => {
            // console.log(res)

            //基于高度基础设置
            // h：1530
            // lnt： + 0.01187 x轴
            // Lat + 0.0108 y轴
            let Position = new global.DC.Position(//转坐标
                +data.lntLat[0] + 0.01187,
                +data.lntLat[1] - 0.0108,
                1530,
                0,
                -45
            );
            dispatch("mapFlyTo", {//飞入
                lntLat: [Position.lng, Position.lat, Position.alt],
                heading: Position.heading,
                pitch: Position.pitch,
                roll: Position.roll,
            })
            // })
            commit("MSET_POPUPDOM", popupsDom)
        },
        closeMobileWindowsDom({ state, commit }) {
@@ -98,7 +121,7 @@
            var ellipsoid = state.mviewer.scene.globe.ellipsoid;
            var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
                data.lnt,
                data.lat - 0.0004,
                data.lat - 0.00006,
                data.alt || "90.648862227"
            );
            var position = ellipsoid.cartographicToCartesian(cartographic);
@@ -124,6 +147,59 @@
        //加入当时的选点
        JOIN_POINT({ state, commit }, data) {

        },
        //flyTo
        mapFlyTo({ state, commit, dispatch }, data) {
            state.mviewer.camera.flyTo({
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    data.lntLat[0] - 0.012, data.lntLat[1],
                    data.lntLat[2] || 15000.0
                ),
                // destination: data.res,
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(data.heading),
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(data.pitch),
                    // heading: data.heading,
                    // pitch: data.pitch,
                    roll: data.roll
                },
                duration: 2,   //定位的时间间隔
                complete: () => {//完成后的回调
                    setTimeout(() => {
                        !state.MobileWindowsHide ||
                            commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
                    }, 0);
                }
            });
            //官网flyto使用方法
            // 1. Fly to a position with a top-down view
            // viewer.camera.flyTo({
            //     destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
            // });

            // // 2. Fly to a Rectangle with a top-down view
            // viewer.camera.flyTo({
            //     destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
            // });

            // // 3. Fly to a position with an orientation using unit vectors.
            // viewer.camera.flyTo({
            //     destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
            //     orientation : {
            //         direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
            //         up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
            //     }
            // });

            // // 4. Fly to a position with an orientation using heading, pitch and roll.
            // viewer.camera.flyTo({
            //     destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
            //     orientation : {
            //         heading : Cesium.Math.toRadians(175.0),
            //         pitch : Cesium.Math.toRadians(-35.0),
            //         roll : 0.0
            //     }
            // });
        }
    }
}

 src/styles/mobile/popup.scss

@@ -3,11 +3,12 @@
    align-items: center;
    justify-content: center;
}
//随地图移动弹窗
#mobile-map_popup_content {
    //弹窗
    width: 100%;
    position: fixed;
    z-index: 999;
    z-index: 100;
    left: -1000px;
    box-sizing: border-box;
    #mobilePopup {
@@ -18,18 +19,10 @@
        background-color: #fff;
        border-radius: 10px;
        position: relative;
        &::before {
            content: "";
            width: 0px;
            height: 0px;
            border: 8px solid #ebebeb;
            position: absolute;
            bottom: -8px;
            left: calc(50% - 8px);
            transform: rotate(45deg);
        }

        .mobiletitle {
            width: calc(90% - 1px);
            // width: calc(90% - 1px);
            width: 100%;
            height: 35px;
            background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
@@ -43,6 +36,19 @@
            height: auto;
            // 内容样式
            .mobile-popup-imgs-heard {
                .mobile-popup-imgs-h-close {
                    width: 35px;
                    height: 35px;
                    background-color: #f7f7f7;
                    position: absolute;
                    @extend .centersFlex;
                    border-radius: 100px;
                    right: 0;
                    top: 0;
                    .icon {
                        font-size: 25px;
                    }
                }
                width: 100%;
                padding: 10px;
                text-align: justify;
@@ -66,7 +72,7 @@
                        }
                        .m-c-center {
                            width: 75%;
                            text-indent: 2em;
                            // text-indent: 2em;
                            word-wrap: break-word;
                            line-height: 25px;
                        }
@@ -83,11 +89,23 @@
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                &::before {
                    content: "";
                    width: 0px;
                    height: 0px;
                    border: 8px solid #ebebeb;
                    position: absolute;
                    bottom: -8px;
                    left: calc(50% - 8px);
                    transform: rotate(45deg);
                }
            }
        }
    }
}

//地图基础样式更改
$controllerw: 35px !important;
#mobile-viewer-container {
    // 继承类
@@ -262,3 +280,56 @@
        }
    }
}

//全屏弹窗
#mobilePopupOur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 300;
    .m_p_heard {
        width: 100%;
        height: 50px;
        background-color: #a40000;
        .m_p_h_break {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon {
                font-size: 22px;
                color: #fff;
            }
        }
        .m_p_h_center {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            .el-dropdown-link {
                color: #fff;
            }
        }
    }
    .m_p_center {
        width: 100%;
        height: calc(100% - 50px);
        // border: 1px solid red
        box-sizing: border-box;
        .m_p_c_tableIn {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
}