+增加弹窗间互联，加入接口数据

liuyg

2021-12-20 f63b411abc9a9cc86a415242875169a5ea5aed1a

+增加弹窗间互联，加入接口数据

 src/api/mobile/livingFacilities/index.js

New file
@@ -0,0 +1,27 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-20 17:05:16
 */
// 生活设施
import request from '@/router/axios'


//食堂餐厅
export const getListlivingFacilitiesr = (params) => { //获取生活设施
    return request({
        url: 'blade-restaurant/restaurant/list',
        method: 'get',
        params: params
    })
}
//超市
export const getListsupermarket = (params) => { //获取生活设施
    return request({
        url: 'blade-supermarket/supermarket/list',
        method: 'get',
        params: params
    })
}


 src/api/mobile/orgnav/index.js

New file
@@ -0,0 +1,16 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-20 11:57:07
 */
// 党群机构
import request from '@/router/axios'

export const getList = (params) => { //获取党群机构
    return request({
        url: 'blade-mechanism/mechanism/list',
        method: 'get',
        params: params
    })
}

 src/api/mobile/public/arc.js

New file
@@ -0,0 +1,32 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-20 13:29:50
 */
// 校区
import request from '@/router/axios'

export const getListarc = (params) => {
    return request({
        url: '/blade-system/dict-biz/dictionary?code=campus',
        method: 'get',
        params: params
    })
}

export const getChildNavList = (params) => {
    return request({
        url: '/blade-architecture/architecture/selectList',
        method: 'get',
        params: params
    })
}

export const getChildNavDetail = (params) => {
    return request({
        url: '/blade-architecture/architecture/selectInArchite',
        method: 'get',
        params: params
    })
}

 src/components/mobileCortrolButtom/index.vue

@@ -9,10 +9,10 @@
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in flagList"
            v-for="(item, index) in tabTable"
            :key="index"
            :command="item"
            >{{ item.name }}</el-dropdown-item
            >{{ item.title }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
@@ -27,29 +27,13 @@
<script>
import { mapGetters } from "vuex";
import { getIp, getUsers } from "@/api/mobile/ip/index";
import { getListarc } from "@/api/mobile/public/arc";
export default {
  name: "mobileCortrolButtom",
  data() {
    return {
      DC: "",
      flagList: [
        {
          name: "西东大街",
          position: [121.49500690245499, 31.23791479409691],
        },
        {
          name: "长江路",
          position: [121.52498934134815, 31.227021231622302],
        },
        {
          name: "科技园",
          position: [121.48624368075255, 31.197575925580797],
        },
        {
          name: "逸夫楼",
          position: [121.52391709005656, 31.276115901927575],
        },
      ],
      tabTable: [],
    };
  },
  computed: {
@@ -57,6 +41,7 @@
  },
  created() {
    this.DC = global.DC;
    this.getStreet();
  },
  mounted() {},
  methods: {
@@ -64,15 +49,15 @@
      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.mviewer.zoomToPosition(
      //   new that.DC.Position(
      //     command.position[0],
      //     command.position[1] - 0.012,
      //     1530,
      //     0,
      //     -45
      //   )
      // );
    },
    openBigPopupAfter() {
      this.$store.commit("MSET_BIGPOPUPAFTER", true);
@@ -91,6 +76,21 @@
      //   console.log(res);
      // });
    },
    getStreet() {
      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.$store.commit("MSET_POPUPTABLENAME", title);
      });
    },
  },
};
</script>

 src/components/mobileGoTo/index.vue

@@ -15,7 +15,6 @@
    ...mapGetters([
      "openmobileGoTo",
      "mviewer",
      "DC",
      "query",
      "MobileWindowChangeData",
    ]),

 src/components/mobileLeftNav/index.vue

@@ -184,6 +184,7 @@
      viewer.addLayer(this.comeLayer);

      const positions1 = this.generatePosition(50);
      // console.log(positions1);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,

 src/components/mobilePanorama/index.vue

@@ -1,8 +1,14 @@
<template>
  <div v-show="openmobilePanorama" class="mobilePanorama">
  <div v-if="openmobilePanorama" class="mobilePanorama">
    <div class="mobilePanorama-close" @click="closeMobilePanorama">
      <i class="el-icon-error icon"></i>
    </div>
    <iframe
      :src="openmobilePanorama"
      width="100%"
      height="100%"
      frameborder="0"
    ></iframe>
  </div>
</template>

@@ -13,6 +19,14 @@
  computed: {
    ...mapGetters(["openmobilePanorama"]),
  },
  // watch: {
  //   openmobilePanorama() {
  //     // console.log(this.openmobilePanorama);
  //     if (this.openmobilePanorama) {
  //       console.log("开启全景");
  //     }
  //   },
  // },
  data() {
    return {};
  },
@@ -34,6 +48,8 @@
  z-index: 1000;
  background-color: #fff;
  .mobilePanorama-close {
    background-color: rgba($color: #fff, $alpha: 0.6);
    border-radius: 1000px;
    position: absolute;
    right: 5px;
    top: 5px;

 src/components/mobilePopupOur/index.vue

@@ -17,7 +17,7 @@
              <el-dropdown-item
                v-for="(item, index) in choiceData"
                :key="index"
                :command="item.name"
                :command="item"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
@@ -26,12 +26,33 @@
      </div>
    </div>
    <div class="m_p_center">
      <el-tabs v-model="activeName" @tab-click="handleClick">
      <div
        class="m_p_c_tableIn"
        style="padding-top: 10px"
        v-if="tabTable.length <= 0"
      >
        <el-empty
          v-show="onlyData.length == 0"
          description="暂无数据"
        ></el-empty>
        <mobilePopupOurOnce
          v-for="(citem, cindex) in onlyData"
          :key="citem.bgImg + ''"
          :ends="onlyData.length - 1 == cindex"
          :onceData="citem"
        ></mobilePopupOurOnce>
        <div v-show="onlyData.length != 0">
          <el-divider content-position="left">
            <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
          </el-divider>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
        <el-tab-pane
          v-for="(item, index) in tabTable"
          :key="index"
          :label="item.label"
          :name="item.value"
          :label="item.title"
          :name="item.key"
        >
          <div class="m_p_c_tableIn">
            <el-empty
@@ -40,7 +61,7 @@
            ></el-empty>
            <mobilePopupOurOnce
              v-for="(citem, cindex) in item.child"
              :key="cindex"
              :key="citem.icon + ''"
              :ends="item.child.length - 1 == cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
@@ -57,257 +78,230 @@
</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 { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["mBigPopup"]),
    ...mapGetters(["mBigPopup", "popupOurOpenData"]),
  },
  name: "mobilePopupOur",
  data() {
    return {
      searchLabel: "",
      choiceValue: "",
      choiceData: [
        {
          name: "党群机构",
          value: "1",
        },
        {
          name: "职能部门",
          value: "2",
        },
        {
          name: "其他机构",
          value: "3",
        },
      ],
      tabTable: [
        {
          label: "西东大街",
          value: "first",
          child: [
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
          ],
        },
        {
          label: "长江路",
          value: "second",
          child: [
            {
              name: "电力部门1",
              icon: "",
              position: [121.49190702133591, 31.234911741858513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门1",
              icon: "",
              position: [121.49907021413591, 31.234911741895513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆1",
              icon: "",
              position: [121.49901024133591, 31.234911749581513],
              buts: ["定位"],
            },
          ],
        },
        {
          label: "科技园",
          value: "third",
          child: [],
        },
        {
          label: "逸夫楼",
          value: "fourth",
          child: [],
        },
      ],
      choiceKey: "",
      choiceData: [],
      tabTable: [],
      fullscreenLoading: false,
      activeName: "first",
      activeName: "1",
      choiceMain: "",
      onlyData: [],
      OURAPI_FORLIFE: {},
    };
  },
  // watch: {
  //   mBigPopup() {
  //     console.log(this.mBigPopup.name);
  //     this.choiceValue = this.mBigPopup.name;
  //   },
  // },
  mounted() {
    this.fullscreenLoading = true;
    setTimeout(() => {
      if (this.mBigPopup.search) {
        this.searchLabel = this.mBigPopup.value;
        console.log("查询搜索结果", this.mBigPopup.value);
        this.fullscreenLoading = false;
        return;
      }
      this.choiceValue = this.mBigPopup.name;
    if (this.mBigPopup.search) {
      this.searchLabel = this.mBigPopup.value;
      // console.log("查询搜索结果", this.mBigPopup.value);
      this.fullscreenLoading = false;
      this.$store.commit("MSET_BIGPOPUPAFTER", false);
      console.log("请求对应街道接口");
    }, 500);
    // this.choiceValue = this.choiceData[0].name;
      this.choiceMain = "搜索";
      return;
    }
    this.choiceMain = this.popupOurOpenData.qurey;
    this.choiceData = this.popupOurOpenData.main;
    this.choiceValue = this.popupOurOpenData.main[0].name;
    this.choiceKey = this.popupOurOpenData.main[0].type;
    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;
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
    },
    choiceIt(name) {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.choiceValue = name;
        this.fullscreenLoading = false;
        console.log("请求对应头部下拉菜单接口");
      }, 500);
      if (this.choiceMain == "校园建筑") {
        this.getListCampus(this.activeName, this.choiceKey);
      } else if (this.choiceMain == "生活设施") {
        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用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定位请求函数
      }
    },
    closeBigPopup() {
      this.$store.commit("MSET_BIGPOPUP", false);
    },
    //"生活设施"↓
    getDatalivingFacilities(data) {
      let that = this;
      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.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
      });
    },
    getListlivingFacilities(campus, type) {
      let that = this;
      this.OURAPI_FORLIFE[type]({ campus: campus }).then((res) => {
        const data = res.data.data.records;
        // console.log(data);
        // return;
        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 == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
          });
        });
        that.fullscreenLoading = false;
        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>

 src/components/mobilePopupOurAfter/index.vue

@@ -41,35 +41,77 @@
        {
          name: "机构单位",
          icon: "el-icon-s-cooperation",
          opendata: "openData1",
        },
        {
          name: "校园建筑",
          opendata: "openData2",
          icon: "el-icon-s-management",
        },
        {
          name: "生活设施",
          opendata: "openData3",
          icon: "el-icon-s-flag",
        },
      ],
      choiceDataDown: [
        {
          name: "文化风景",
          opendata: "openData4",
          icon: "el-icon-s-opportunity",
        },
        {
          name: "出入口",
          opendata: "openData5",
          icon: "el-icon-s-promotion",
        },
        {
          name: "停车场",
          opendata: "openData6",
          icon: "el-icon-s-flag",
        },
      ],
      openData1: [
        { name: "党群机构", type: 1 },
        { name: "职能部处", type: 2 },
        { name: "直属及附属单位", type: 3 },
        { name: "教学与科研机构", type: 4 },
        { name: "其他机构", type: 5 },
      ],
      openData2: [
        { name: "行政办公", type: 1 },
        { name: "教学科研", type: 2 },
        { name: "校内场馆", type: 3 },
        { name: "宿舍公寓", type: 4 },
        { name: "文化风景", type: 5 },
        { name: "家属住宅", type: 6 },
        { name: "其他楼宇", type: 7 },
      ],
      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 },
      ],
      openData4: [{ name: "文化风景", type: 1 }],
      openData5: [{ name: "出入口", type: 1 }],
      openData6: [{ name: "停车场", type: 1 }],
    };
  },
  mounted() {},
  methods: {
    openBigPopup(val) {
      let d = {
        main: this[val.opendata],
        qurey: val.name,
      };
      this.$store.commit("MSET_POPUPOUROPENDATA", d);
      this.$store.commit("MSET_BIGPOPUP", val);
    },
    closeBigPopupAfter() {

 src/components/mobilePopupOurOnce/index.vue

@@ -8,7 +8,15 @@
      }"
    >
      <div class="mobilePopupOurOnce_left">
        <img src="img/cc/cc.png" alt="" />
        <img :src="icon" alt="" :key="icon" />
        <el-image
          style="width: 100px; height: 100px"
          :src="icon"
          :id="'mobileBigImgs' + icon + ''"
          v-show="false"
          :preview-src-list="srcList"
        >
        </el-image>
      </div>
      <div class="mobilePopupOurOnce_right">
        <div class="mobilePopupOurOnce_r_up">{{ onceData.name }}</div>
@@ -34,15 +42,32 @@

<script>
import { mapGetters } from "vuex";
import { getChildNavDetail } from "@/api/mobile/public/arc";
export default {
  props: ["onceData", "ends"],
  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 == "生活设施"
    ) {
      this.ourData = this.onceData;
    }
  },
  data() {
    return {
      DC: "",
      icon: "",
      srcList: [],
      ourData: {},
    };
  },
  computed: {
@@ -60,24 +85,58 @@
  },
  methods: {
    openOnce(val) {
      if (!this.ourData.name) {
        console.log("数据传输失败");
        return;
      }
      let that = this;
      console.log(val, this.onceData);
      if (val == "定位") {
        this.$store.commit("MSET_BIGPOPUP", false);
        //随地图移动窗口
        this.$store.commit("MSET_BIGPOPUP", false); //关闭全屏弹窗
        setTimeout(() => {
          // 定制化窗体
          //   // 定制化窗体
          let d = {
            position: {},
            lntLat: that.onceData.lntLat,
            query: this.onceData,
            lntLat: that.ourData.lntLat,
            query: { ...this.ourData, seebut: this.seebut },
            useJWD: true, //仅使用经纬度
          };
          that.popupsDom = that.$store.dispatch("setMobileWindows", d);
        }, 500);
        //固定窗口
        // that.$store.dispatch("SET_OPENWIDOWFIXED", d);
      } 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 == "图集") {
        console.log(this.srcList);
        let imgsDom = document.getElementById("mobileBigImgs" + this.icon + "");
        imgsDom.click();
      }
    },
    //"校园建筑"↓
    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],
          alt: result.gd,
          heading: result.heading,
          pitch: result.pitch,
          roll: result.roll,
          bgImg: result.tpurl,
          QRImg: result.codeurl,
          websiteUrl: result.websiteurl,
          telePhone: result.telephone,
        };
        this.ourData = d;
      });
    },
    //"校园建筑"↑
  },
};
</script>
@@ -102,6 +161,10 @@
      width: 32%;
      height: 100%;
      @extend .flexCenter;
      img {
        width: 100px;
        height: 80px;
      }
    }
    .mobilePopupOurOnce_right {
      width: 68%;

 src/components/mobileWindow/index.vue

@@ -14,19 +14,32 @@
        :preview-src-list="srcList"
      >
      </el-image>
      <div>{{ query.query }}</div>
      <!-- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑 -->
      <!-- <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 class="mobile-popup-control">
      <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
        >图集</el-link
      >
      <el-divider direction="vertical"></el-divider>
      <el-link icon="el-icon-map-location" @click="openMobilePanorama"
        >实景</el-link
      >
      <el-divider direction="vertical"></el-divider>
      <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
      <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>
    </div>
  </div>
</template>
@@ -42,35 +55,75 @@
    MobileWindowChangeData() {
      //   this.fullscreenLoading = true;
      if (!this.MobileWindowsHide) {
        // setTimeout(() => {
        // this.fullscreenLoading = false;
        console.log("地图点击弹窗数据请求参数", this.query);
        // console.log("地图点击弹窗数据请求参数", this.query.lntLat[0]);
        // console.log("地图点击弹窗数据请求参数", this.query.lntLat[1]);
        // }, 500);
        // 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;
          for (let k in this.seebut) {
            if (this.seebut[k].name == "定位") {
              this.seebut.splice(k, k + 1);
            }
          }
          this.seebut.push({
            name: "去这",
          });
        }
        this.center = [];
        for (let k in this.query.query) {
          for (let n in this.getCenter) {
            if (k == this.getCenter[n].name) {
              this.center.push({
                name: this.getCenter[n].value,
                value: this.query.query[k] ? this.query.query[k] : "暂无",
              });
            }
          }
        }
      }
    },
  },
  data() {
    return {
      getCenter: [
        {
          name: "websiteUrl",
          value: "网址",
        },
        {
          name: "telePhone",
          value: "电话",
        },
      ],
      title: "",
      fullscreenLoading: false,
      url: "/img/job/one.jpg",
      positions: "",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      srcList: [],
      seebut: [],
      center: [
        {
          name: "网址",
          value: "123",
        },
      ],
    };
  },
  methods: {
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
    goOn() {},
    openMobilePanorama() {
      console.log(11);
      this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
    openOnce(val) {
      let that = this;
      // console.log(val, this.onceData);
      if (val == "去这") {
        //定位
      } else if (val == "实景") {
        this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
      } else if (val == "图集") {
        let imgsDom = document.getElementById("mobileBigImgs");
        imgsDom.click();
      }
    },
  },
};

 src/components/mobileWindowFixed/index.vue

New file
@@ -0,0 +1,132 @@
<template>
  <div
    ref="mobile-mapContentContent-fixed"
    v-show="!MobileWindowsHideFixed"
    id="mobile-map_content_content-fixed"
  >
    <div class="mobiletitle-close-fixed" @click="close">
      <i class="el-icon-circle-close icon"></i>
    </div>
    <div class="mobiletitle-fixed">{{ title || "暂无数据" }}</div>
    <div class="mobile-popup-imgs-heard-fixed">
      <img :src="url" alt="" />
      <el-image
        style="width: 100px; height: 100px"
        :src="url"
        id="mobileBigImgsFixed"
        v-show="false"
        :preview-src-list="srcList"
      >
      </el-image>
      <!-- <div>{{ query.query }}</div> -->
      <div
        v-for="(item, index) in center"
        :key="index"
        class="mobileBig-center-fiexd"
      >
        <div class="m-c-f-title">{{ item.name }}：</div>
        <div class="m-c-f-center">{{ item.value }}</div>
      </div>
    </div>
    <div class="mobile-popup-control-fixed">
      <div v-for="(item, index) in seebut" :key="index" class="m-p-c-f-once">
        <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 mobilePopupOurOnce_r_d_in-gan"
          v-if="index != seebut.length - 1"
        ></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "mobileWindowFixed",
  computed: {
    ...mapGetters([
      "MobileWindowsHideFixed",
      "query",
      "MobileWindowChangeDataFixed",
    ]),
  },
  watch: {
    MobileWindowChangeDataFixed() {
      console.log(this.query);
      if (!this.MobileWindowsHideFixed) {
        this.center = [];
        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;
          for (let k in this.seebut) {
            if (this.seebut[k].name == "定位") {
              this.seebut.splice(k, k + 1);
            }
          }
          this.seebut.push({
            name: "去这",
          });
        }
        for (let k in this.query.query) {
          if (k == "websiteurl") {
            this.center.push({
              name: "网址",
              value: this.query.query[k],
            });
          }
        }
      }
    },
  },
  data() {
    return {
      title: "",
      fullscreenLoading: false,
      url: "/img/job/one.jpg",
      positions: "",
      srcList: [],
      seebut: [],
      center: [
        {
          name: "网址",
          value: "123",
        },
      ],
    };
  },
  methods: {
    close() {
      if (!this.MobileWindowsHideFixed) {
        this.$store.dispatch("CLOSE_WIDOWFIXED"); //关闭固定弹窗
      }
    },
    openOnce(val) {
      let that = this;
      // console.log(val, this.onceData);
      if (val == "去这") {
        //定位
      } else if (val == "实景") {
        this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
      } else if (val == "图集") {
        let imgsDom = document.getElementById("mobileBigImgsFixed");
        imgsDom.click();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

 src/components/mobilemap/index.vue

@@ -1,9 +1,11 @@
/* eslint-disable camelcase */
<template>
  <div id="mobile-viewer-container">
    <!-- 地图图标弹窗↓ -->
    <!-- 随地图改变图标弹窗↓ -->
    <div id="mobile-map_popup_content"></div>
    <mobileWindow></mobileWindow>
    <!-- 地图固定弹窗 -->
    <mobileWindowFixed></mobileWindowFixed>
    <!-- 地图图标弹窗↑ -->
    <!-- 控制↓ -->
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
@@ -43,6 +45,7 @@
      "mBigPopupAfter",
      "iconHide",
      "popupsDom",
      "MobileWindowsHideFixed",
    ]),
  },
  watch: {
@@ -135,7 +138,7 @@
      });
      that.$refs.mobileLeftNav.initialize(viewer);
      that.$store.commit("MSET_VIEWER", viewer);
      that.$store.commit("MSET_DC", DC);
      // that.$store.commit("MSET_DC", DC);
      const popup = viewer.popup;

      popup.hide();
@@ -180,7 +183,12 @@
        if (!that.iconHide) {
          that.$store.commit("MSET_ICONHIDE", true);
        }
        that.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
        if (!that.MobileWindowsHide) {
          that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
        }
        // if (!that.MobileWindowsHideFixed) {
        //   that.$store.dispatch("CLOSE_WIDOWFIXED"); //关闭固定弹窗
        // }
        // if (!that.MobileWindowsHide && that.popupsDom) {
        //   that.popupsDom.closeOur();
        //   that.$store.commit("MSET_MOBILEWINDOWSHIDE", true);
@@ -211,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

 src/store/getters.js

@@ -2,15 +2,18 @@
const mobile = {
    mviewer: state => state.mobile.mviewer,
    mBigPopup: state => state.mobile.mBigPopup,
    popupOurOpenData: state => state.mobile.popupOurOpenData,
    popupTableName: state => state.mobile.popupTableName,
    mBigPopupAfter: state => state.mobile.mBigPopupAfter,
    iconHide: state => state.mobile.iconHide,
    DC: state => state.mobile.DC,
    MobileWindowsHide: state => state.mobile.MobileWindowsHide,
    MobileWindowChangeData: state => state.mobile.MobileWindowChangeData,
    MobileWindowsHide: state => state.mobile.MobileWindowsHide,//随地图移动窗口
    MobileWindowChangeData: state => state.mobile.MobileWindowChangeData,//随地图移动窗口
    popupsDom: state => state.mobile.popupsDom,
    query: state => state.mobile.query,
    openmobileGoTo: state => state.mobile.openmobileGoTo,
    openmobilePanorama: state => state.mobile.openmobilePanorama
    openmobilePanorama: state => state.mobile.openmobilePanorama,
    MobileWindowsHideFixed: state => state.mobile.MobileWindowsHideFixed,//固定窗口
    MobileWindowChangeDataFixed: state => state.mobile.MobileWindowChangeDataFixed,//固定窗口
}
const getters = {
    ...mobile,

 src/store/modules/mobile.js

@@ -3,16 +3,20 @@
    state: {
        mviewer: null,//地图实体类
        mBigPopup: false,//全屏弹窗
        popupOurOpenData: [],//全屏弹窗中下拉菜单数据
        popupTableName: [],//全屏弹窗标签页数据
        mBigPopupAfter: false,////全屏弹窗之前的弹窗
        ips: '',//获取的ip
        iconHide: false,//右侧伸缩状态
        DC: '',//DC全局保存
        // DC: '',//DC全局保存
        MobileWindowsHide: true,//改变点击窗口的显示状态
        MobileWindowChangeData: false,//改变点击窗口的数据
        popupsDom: '',//mobileDivForms的实体类
        query: {},//传输数据
        openmobileGoTo: false,//测试
        openmobilePanorama: false,//实景显影
        MobileWindowsHideFixed: true,//改变点击窗口的显示状态--固定窗口
        MobileWindowChangeDataFixed: false,//改变点击窗口的数据--固定窗口
    },
    mutations: {
        MSET_VIEWER(state, viewer) {
@@ -26,13 +30,16 @@
            state.mBigPopupAfter = viewer;
            $store.dispatch("closeMobileWindowsDom"); //关闭弹窗
        },
        MSET_POPUPOUROPENDATA(state, viewer) {
            state.popupOurOpenData = viewer;
        },
        MSET_ICONHIDE(state, viewer) {
            state.iconHide = viewer
        },
        MSET_DC(state, viewer) {
            state.DC = viewer
        MSET_POPUPTABLENAME(state, viewer) {
            state.popupTableName = viewer
        },
        MSET_MOBILEWINDOWSHIDE(state, viewer) {
        MSET_MOBILEWINDOWSHIDE(state, viewer) {//随地图移动窗口
            state.MobileWindowChangeData = !state.MobileWindowChangeData;
            state.MobileWindowsHide = viewer
        },
@@ -47,13 +54,18 @@
        },
        MSET_OPENMOBILEPANORAMA(state, viewer) {
            state.openmobilePanorama = viewer
        }
        },
        MSET_MOBILEWINDOWSHIDEFIXED(state, viewer) {//固定窗口
            state.MobileWindowChangeDataFixed = !state.MobileWindowChangeDataFixed;
            state.MobileWindowsHideFixed = viewer
            console.log(state.MobileWindowChangeDataFixed);
        },
    },
    actions: {
        setMobileWindows({ state, commit, }, data) {
        setMobileWindows({ state, commit, }, data) {//打开随地图移动窗口，暂不使用
            if (data.useJWD) {
                var ellipsoid = state.mviewer.scene.globe.ellipsoid;
                var cartographic = state.DC.Namespace.Cesium.Cartographic.fromDegrees(
                var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
                    data.lntLat[0],
                    data.lntLat[1] - 0.00006,
                    "90.648862227"
@@ -63,7 +75,7 @@
            // 传递响应数据
            commit("MSET_QUERY", data);
            // 定制化窗体
            let popupsDom = new state.DC.mobileDivForms(state.mviewer, {
            let popupsDom = new global.DC.mobileDivForms(state.mviewer, {
                domId: "mobilePopup",
                title: data.query.name || "成教楼  ",
                className: "mobilePopup",
@@ -72,7 +84,7 @@
            });
            commit("MSET_MOBILEWINDOWSHIDE", false)
            state.mviewer.zoomToPosition(
                new state.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
                new global.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
            );
            commit("MSET_POPUPDOM", popupsDom)
        },
@@ -84,13 +96,34 @@
        },
        CHANGETOC3({ state, commit }, data) {// //转换经纬度坐标 成世界坐标cartesian3
            var ellipsoid = state.mviewer.scene.globe.ellipsoid;
            var cartographic = state.DC.Namespace.Cesium.Cartographic.fromDegrees(
            var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
                data.lnt,
                data.lat - 0.0004,
                data.alt || "90.648862227"
            );
            var position = ellipsoid.cartographicToCartesian(cartographic);
            return position;
        },
        SET_OPENWIDOWFIXED({ state, commit }, data) {
            // 传递响应数据
            commit("MSET_QUERY", data);
            //显示窗口
            commit("MSET_MOBILEWINDOWSHIDEFIXED", false)
            //移动地图位置
            state.mviewer.zoomToPosition(
                new global.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
            );
        },
        CLOSE_WIDOWFIXED({ state, commit }) {
            //隐藏窗口
            if (!state.MobileWindowsHideFixed) {
                console.log(state.MobileWindowsHideFixed)
                commit("MSET_MOBILEWINDOWSHIDEFIXED", true)
            }
        },
        //加入当时的选点
        JOIN_POINT({ state, commit }, data) {

        }
    }
}

 src/styles/mobile/popup.scss

@@ -1,3 +1,8 @@
.centersFlex {
    display: flex;
    align-items: center;
    justify-content: center;
}
#mobile-map_popup_content {
    //弹窗
    width: 100%;
@@ -25,12 +30,13 @@
        }
        .mobiletitle {
            width: calc(90% - 1px);
            height: 15px;
            height: 35px;
            background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
            font-size: 14px;
            border-radius: 10px 10px 0 0;
            padding: 8px 14px;
            box-sizing: border-box;
        }
        .mobilelabel-content {
            width: 100%;
@@ -45,6 +51,26 @@
                img {
                    width: 70px;
                    height: 50px;
                }
                //内容显示
                .mobileBig-center-our {
                    width: 100%;
                    height: auto;
                    .mobileBig-center {
                        width: 100%;
                        min-height: 30px;
                        border-bottom: 1px solid #f7f7f7;
                        @extend .centersFlex;
                        .m-c-title {
                            width: 25%;
                        }
                        .m-c-center {
                            width: 75%;
                            text-indent: 2em;
                            word-wrap: break-word;
                            line-height: 25px;
                        }
                    }
                }
            }
            .mobile-popup-control {
@@ -157,3 +183,82 @@
        /*滚动条的背景颜色*/
    }
}
//地图固定弹窗
#mobile-map_content_content-fixed {
    position: fixed;
    width: 90%;
    height: auto;
    z-index: 999;
    bottom: 2%;
    left: 5%;
    background-color: #fff;
    border-radius: 10px;
    //关闭按钮
    .mobiletitle-close-fixed {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 10px;
        top: 2px;
        .icon {
            font-size: 20px;
        }
    }
    //标题样式
    .mobiletitle-fixed {
        width: 100%;
        height: 35px;
        border-radius: 10px 10px 0 0;
        background-color: #f7f7f7;
        padding-left: 10px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    // 内容样式
    .mobile-popup-imgs-heard-fixed {
        width: 100%;
        height: auto;
        padding: 10px;
        text-align: justify;
        letter-spacing: 1px;
        box-sizing: border-box;
        img {
            width: 70px;
            height: 50px;
        }
        //内容显示
        .mobileBig-center-fiexd {
            width: 100%;
            height: 30px;
            @extend .centersFlex;
            .m-c-f-title {
                width: 20%;
                @extend .centersFlex;
            }
            .m-c-f-center {
                @extend .centersFlex;
                justify-content: space-between;
                width: 80%;
            }
        }
    }
    .mobile-popup-control-fixed {
        width: 100%;
        height: 35px;
        border-radius: 0 0 10px 10px;
        background-color: #f7f7f7;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .m-p-c-f-once {
            .mobilePopupOurOnce_r_d_in-gan {
                position: relative;
                left: 40%;
            }
        }
    }
}