智慧校园项目
parent: b403fa7e | patch | commit | ignore whitespace
+
liuyg
2021-12-15 b7c39e4ccd65249dc385d76d08ed59834f83ad97 
+
11 files modified
6 files added
1000 ■■■■■ changed files
public/img/cc/cc.png patch | view | raw | blame | history
public/index.html 41 ●●●●● patch | view | raw | blame | history
src/api/mobile/ip/index.js 18 ●●●●● patch | view | raw | blame | history
src/components/mobileCortrol/index.vue 2 ●●●●● patch | view | raw | blame | history
src/components/mobileCortrolButtom/index.vue 75 ●●●●● patch | view | raw | blame | history
src/components/mobileCortrolSearch/index.vue 7 ●●●●● patch | view | raw | blame | history
src/components/mobileLeftNav/index.vue 64 ●●●●● patch | view | raw | blame | history
src/components/mobilePopupOur/index.vue 251 ●●●●● patch | view | raw | blame | history
src/components/mobilePopupOurAfter/index.vue 135 ●●●●● patch | view | raw | blame | history
src/components/mobilePopupOurOnce/index.vue 112 ●●●●● patch | view | raw | blame | history
src/components/mobilemap/index.vue 73 ●●●●● patch | view | raw | blame | history
src/mobileDivForms/mobileDivForms.js 47 ●●●●● patch | view | raw | blame | history
src/position/position.js 60 ●●●●● patch | view | raw | blame | history
src/store/getters.js 4 ●●●●● patch | view | raw | blame | history
src/store/modules/mobile.js 11 ●●●●● patch | view | raw | blame | history
src/store/modules/popupParams.js 4 ●●●●● patch | view | raw | blame | history
src/styles/mobile/popup.scss 96 ●●●●● patch | view | raw | blame | history 
 public/img/cc/cc.png




 public/index.html


@@ -1,18 +1,27 @@


<!DOCTYPE html>


<html lang="">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <link rel="icon" href="<%= BASE_URL %>favicon.ico">


    <title>智慧校园大数据三维可视化平台</title>


    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


  </head>


  <body>


    <noscript>


      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>


    </noscript>


    <div id="app"></div>


    <!-- built files will be auto injected -->


  </body>


</html>




<head>


  <meta charset="utf-8">


  <meta http-equiv="X-UA-Compatible" content="IE=edge">


  <meta name="viewport" content="width=device-width,initial-scale=1.0">


  <link rel="icon" href="<%= BASE_URL %>favicon.ico">


  <title>智慧校园大数据三维可视化平台</title>


  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


  <!-- 高德定位 -->


  <script type="text/javascript"


    src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221"></script>


  <!-- ip -->


  <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>


</head>




<body>


  <noscript>


    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.


        Please enable it to continue.</strong>


  </noscript>


  <div id="app"></div>


  <!-- built files will be auto injected -->


</body>




</html>




 src/api/mobile/ip/index.js


New file


@@ -0,0 +1,18 @@


/*


 * @Author: Morpheus


 * @Date: 2021-05-09 15:17:44


 * @Last Modified by: liu


 * @Last Modified time: 2021-12-15 16:43:48


 */


// 党群机构


import request from '@/router/axios'




export const getIp = (params) => {


    return request({


        // url: 'https://apis.map.qq.com/ws/location/v1/ip',


        // let url = `https://apis.map.qq.com/ws/location/v1/ip?ip=${data.ip}&key=${data.key}`;


        url: `http://192.168.31.179:9898/ws/location/v1/ip?ip=${params.ip}&key=${params.key}`,


        method: 'get',


        // params: params


    })


}




 src/components/mobileCortrol/index.vue


@@ -1,6 +1,6 @@


<template>


  <div class="m-left-control">


    <div class="m-l-inbut" @click="zoomIn('+')">+</div>


    <div class="m-l-inbut zoom-in">+</div>


    <div class="m-l-inbut" @click="zoomIn('-')">-</div>


  </div>


</template>




 src/components/mobileCortrolButtom/index.vue


@@ -1,30 +1,70 @@


<template>


  <div class="m-left-mobileCortrolButtom">


    <div class="m-l-inbut"><i class="el-icon-s-help"></i></div>


    <div class="m-l-inbut"><i class="el-icon-s-flag"></i></div>


    <div class="m-l-inbut"><i class="el-icon-menu"></i></div>


    <div class="m-l-inbut"><i class="el-icon-location"></i></div>


    <div class="m-l-inbut">


      <!-- <i class="el-icon-s-flag"></i> -->


      <el-dropdown trigger="click" @command="handleCommand">


        <span class="el-dropdown-link icons">


          <i class="el-icon-s-flag icon"></i>


        </span>


        <el-dropdown-menu slot="dropdown">


          <el-dropdown-item command="西东大街">西东大街</el-dropdown-item>


          <el-dropdown-item command="长江路">长江路</el-dropdown-item>


          <el-dropdown-item command="科技园">科技园</el-dropdown-item>


          <el-dropdown-item command="逸夫楼">逸夫楼</el-dropdown-item>


        </el-dropdown-menu>


      </el-dropdown>


    </div>


    <div class="m-l-inbut" @click="openBigPopupAfter">


      <i class="el-icon-menu"></i>


    </div>


    <div class="m-l-inbut" @click="goOn"><i class="el-icon-location"></i></div>


  </div>


</template>




<script>


import { mapGetters } from "vuex";


import { getIp, getUsers } from "@/api/mobile/ip/index";


export default {


  name: "mobileCortrolButtom",


  computed: {},


  data() {


    return {


      viewer: null,


      DC: null,


    };


    return {};


  },


  computed: {


    ...mapGetters(["mviewer"]),


  },


  created() {


    this.DC = global.DC;


  },


  mounted() {},


  methods: {


    initialize(viewer) {


      viewer.scene.globe.depthTestAgainstTerrain = false;


      this.viewer = viewer;


    handleCommand(command) {


      console.log(command, "定位");


      // 定位


      // this.mviewer.zoomToPosition(


      //     new DC.Position(


      //       e.wgs84Position.lng,


      //       e.wgs84Position.lat - 0.016,


      //       1530,


      //       0,


      //       -45


      //     )


      //   );


    },


    openBigPopupAfter() {


      this.$store.commit("MSET_BIGPOPUPAFTER", true);


    },


    goOn() {


      console.log(returnCitySN["cip"]);


      let data = {


        ip: returnCitySN["cip"],


        key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ",


      };


      console.log("定位", data.ip);


      // getIp(data).then((res) => {


      //   // getUsers(data).then((res) => {


      //   console.log(res);


      // });


    },


  },


};


@@ -48,6 +88,19 @@


    font-size: 22px;


    margin-left: 12px;


    border-radius: 5px;


    .icons {


      display: inline-block;


      width: 100%;


      height: 100%;


    }


    .icon {


      font-size: 20px;


      color: #fff;


      &::before {


        width: 100%;


        height: 100%;


      }


    }


  }


}


</style>




 src/components/mobileCortrolSearch/index.vue


@@ -6,6 +6,7 @@


          slot="append"


          class="iconSearch"


          icon="el-icon-search"


          @click="search"


        ></el-button>


      </el-input>


    </div>


@@ -20,6 +21,7 @@


    return {


      viewer: null,


      DC: null,


      input: "",


    };


  },


  created() {


@@ -31,6 +33,11 @@


      viewer.scene.globe.depthTestAgainstTerrain = false;


      this.viewer = viewer;


    },


    search() {


      let that = this;


      this.$store.commit("MSET_BIGPOPUP", { search: true, value: that.input });


      that.input = "";


    },


  },


};


</script>




 src/components/mobileLeftNav/index.vue


@@ -14,6 +14,34 @@


        <span>{{ item.label }}</span>


      </li>


    </ul>


    <div


      ref="mobile-mapContentContent"


      v-show="popupWindow1"


      id="mobile-map_MP1"


    >


      <div class="mobile-popup-imgs-heard">


        <img :src="url1" alt="" />


        <el-image


          style="width: 100px; height: 100px"


          :src="url1"


          id="mobileBigImgs"


          v-show="false"


          :preview-src-list="srcList1"


        >


        </el-image>


        南门口


      </div>


      <div class="mobile-popup-control">


        <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs1"


          >图集</el-link


        >


        <el-divider direction="vertical"></el-divider>


        <el-link icon="el-icon-map-location">实景</el-link>


        <el-divider direction="vertical"></el-divider>


        <el-link icon="el-icon-aim" @click="goOn1">去这</el-link>


      </div>


    </div>


    <!-- 地图图标弹窗↑ -->


  </div>


</template>




@@ -36,6 +64,12 @@


  },


  data() {


    return {


      popupWindow1: false,


      url1: "/img/job/one.jpg",


      srcList1: [


        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",


        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",


      ],


      icons: "el-icon-d-arrow-right",


      iconHide: false,


      navStyle: {


@@ -142,6 +176,8 @@


      return list;


    },


    leftNavClick(item) {


      // console.log(item);


      this.popupWindow1 = false;


      item.flag = !item.flag;


      if (item.flag == true) {


        item.img = item.checked;


@@ -152,6 +188,7 @@


      }


    },


    initialize(viewer) {


      var that = this;


      viewer.scene.globe.depthTestAgainstTerrain = false;


      this.viewer = viewer;


      this.tagLayer = new this.DC.HtmlLayer("tagLayer");


@@ -185,6 +222,28 @@


                    `


        );


        this.tagLayer.addOverlay(divIcon);


        //订阅事件1


        divIcon.on(DC.MouseEventType.CLICK, (e) => {


          // console.log(e);


          that.popupWindow1 = true;


          // 定制化窗体


          var divForms = new DC.mobileDivForms(viewer, {


            domId: "mobilePopup",


            title: "成教楼  ",


            className: "mobilePopup",


            content: document.getElementById("mobile-map_MP1"),


            position: [e.position],


          });


          viewer.zoomToPosition(


            new DC.Position(


              e.overlay._position._lng,


              e.overlay._position._lat - 0.012,


              1530,


              0,


              -45


            )


          );


        });


      });




      const positions2 = this.generatePosition(50);


@@ -284,6 +343,11 @@


      this.parkLayer.show = false;


      this.comeLayer.show = false;


    },


    mobileOpenImgs1() {


      let imgsDom = document.getElementById("mobileBigImgs");


      imgsDom.click();


    },


    goOn1() {},


  },


};


</script>




 src/components/mobilePopupOur/index.vue


New file


@@ -0,0 +1,251 @@


<template>


  <div id="mobilePopupOur" v-loading.fullscreen.lock="fullscreenLoading">


    <div class="m_p_heard">


      <div class="m_p_h_break" @click="closeBigPopup">


        <i class="el-icon-arrow-left icon"></i>


      </div>


      <div class="m_p_h_center">


        <div>


          <div v-if="mBigPopup.search" style="color: #fff">查询结果</div>


          <el-dropdown trigger="click" @command="choiceIt" v-else>


            <span class="el-dropdown-link">


              {{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>


            </span>


            <el-dropdown-menu slot="dropdown">


              <el-dropdown-item


                v-for="(item, index) in choiceData"


                :key="index"


                :command="item.name"


                >{{ item.name }}</el-dropdown-item


              >


            </el-dropdown-menu>


          </el-dropdown>


        </div>


      </div>


    </div>


    <div class="m_p_center">


      <el-tabs v-model="activeName" @tab-click="handleClick">


        <el-tab-pane label="西东大街" name="first">


          <div class="m_p_c_tableIn">


            <mobilePopupOurOnce


              v-for="(item, index) in tableData1"


              :key="index"


              :onceData="item"


            ></mobilePopupOurOnce>


          </div>


        </el-tab-pane>


        <el-tab-pane label="长江路" name="second">


          <div class="m_p_c_tableIn">


            <mobilePopupOurOnce


              v-for="(item, index) in tableData2"


              :key="index"


              :onceData="item"


            ></mobilePopupOurOnce>


          </div>


        </el-tab-pane>


        <el-tab-pane label="科技园" name="third">


          <div class="m_p_c_tableIn">


            <mobilePopupOurOnce


              v-for="(item, index) in tableData3"


              :key="index"


              :onceData="item"


            ></mobilePopupOurOnce>


          </div>


        </el-tab-pane>


        <el-tab-pane label="逸夫楼" name="fourth">


          <div class="m_p_c_tableIn">


            <mobilePopupOurOnce


              v-for="(item, index) in tableData4"


              :key="index"


              :onceData="item"


            ></mobilePopupOurOnce>


          </div>


        </el-tab-pane>


      </el-tabs>


    </div>


  </div>


</template>




<script>


import { mapGetters } from "vuex";


export default {


  computed: {


    ...mapGetters(["mBigPopup"]),


  },


  name: "mobilePopupOur",


  data() {


    return {


      choiceValue: "",


      choiceData: [


        {


          name: "党群机构",


          value: "1",


        },


        {


          name: "职能部门",


          value: "2",


        },


        {


          name: "其他机构",


          value: "3",


        },


      ],


      fullscreenLoading: false,


      activeName: "first",


      tableData1: [


        {


          name: "电力部门",


          icon: "",


          buts: ["实景", "图集", "定位"],


        },


        {


          name: "保安部门",


          icon: "",


          buts: ["图集", "定位"],


        },


        {


          name: "图书馆",


          icon: "",


          buts: ["定位"],


        },


      ],


      tableData2: [


        {


          name: "电力部门2",


          icon: "",


          buts: ["实景", "图集", "定位"],


        },


        {


          name: "保安部门2",


          icon: "",


          buts: ["图集", "定位"],


        },


        {


          name: "图书馆2",


          icon: "",


          buts: ["定位"],


        },


      ],


      tableData3: [


        {


          name: "电力部门3",


          icon: "",


          buts: ["实景", "图集", "定位"],


        },


        {


          name: "保安部门3",


          icon: "",


          buts: ["图集", "定位"],


        },


        {


          name: "图书馆3",


          icon: "",


          buts: ["定位"],


        },


      ],


      tableData4: [


        {


          name: "电力部门4",


          icon: "",


          buts: ["实景", "图集", "定位"],


        },


        {


          name: "保安部门4",


          icon: "",


          buts: ["图集", "定位"],


        },


        {


          name: "图书馆4",


          icon: "",


          buts: ["定位"],


        },


      ],


    };


  },


  // watch: {


  //   mBigPopup() {


  //     console.log(this.mBigPopup.name);


  //     this.choiceValue = this.mBigPopup.name;


  //   },


  // },


  mounted() {


    // this.fullscreenLoading = true;


    setTimeout(() => {


      if (this.mBigPopup.search) {


        console.log("查询搜索结果", this.mBigPopup.value);


        return;


      }


      this.choiceValue = this.mBigPopup.name;


      this.fullscreenLoading = false;


      this.$store.commit("MSET_BIGPOPUPAFTER", false);


      console.log("请求对应街道接口");


    }, 1000);


    // this.choiceValue = this.choiceData[0].name;


  },


  methods: {


    handleClick(tab, event) {


      console.log(tab.name);


    },


    choiceIt(name) {


      this.choiceValue = name;


    },


    closeBigPopup() {


      this.$store.commit("MSET_BIGPOPUP", false);


    },


  },


};


</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>




 src/components/mobilePopupOurAfter/index.vue


New file


@@ -0,0 +1,135 @@


<template>


  <div id="mobilePopupOurAfter">


    <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"


          v-for="(item, index) in choiceDataUp"


          @click="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.name }}</div>


        </div>


      </div>


      <div class="m_p_a_center_group">


        <div


          class="m_p_a_center_once"


          v-for="(item, index) in choiceDataDown"


          @click="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.name }}</div>


        </div>


      </div>


    </div>


  </div>


</template>




<script>


export default {


  name: "mobilePopupOurAfter",


  data() {


    return {


      choiceValue: "",


      choiceDataUp: [


        {


          name: "机构单位",


          icon: "el-icon-s-cooperation",


        },


        {


          name: "校园建筑",


          icon: "el-icon-s-management",


        },


        {


          name: "生活设施",


          icon: "el-icon-s-flag",


        },


      ],


      choiceDataDown: [


        {


          name: "文化风景",


          icon: "el-icon-s-opportunity",


        },


        {


          name: "出入口",


          icon: "el-icon-s-promotion",


        },


        {


          name: "停车场",


          icon: "el-icon-s-flag",


        },


      ],


    };


  },


  mounted() {},


  methods: {


    openBigPopup(val) {


      this.$store.commit("MSET_BIGPOPUP", val);


    },


    closeBigPopupAfter() {


      this.$store.commit("MSET_BIGPOPUPAFTER", false);


    },


  },


};


</script>




<style lang="scss" scoped>


.flexCenter {


  display: flex;


  align-items: center;


  justify-content: center;


}


#mobilePopupOurAfter {


  position: fixed;


  top: 37.5%;


  left: 13.5%;


  width: 75%;


  height: 25%;


  background-color: #fff;


  z-index: 300;


  .m_p_a_heard {


    width: 100%;


    height: 35px;


    box-sizing: border-box;


    padding: 5px 15px;


    @extend .flexCenter;


    justify-content: space-between;


    background-color: #a40000;


    div {


      width: 35px;


      height: 35px;


      @extend .flexCenter;


    }


    .icon {


      font-size: 24px;


      color: #fff;


    }


  }


  .m_p_a_center {


    width: 100%;


    height: calc(100% - 35px);


    @extend .flexCenter;


    flex-direction: column;


    .m_p_a_center_group {


      width: 100%;


      height: 40%;


      @extend .flexCenter;


      .m_p_a_center_once {


        width: 30%;


        height: 100%;


        background-color: #a40000;


        color: #fff;


        border: 2px solid rgb(255, 255, 255);


        @extend .flexCenter;


        flex-direction: column;


      }


    }


  }


}


</style>




 src/components/mobilePopupOurOnce/index.vue


New file


@@ -0,0 +1,112 @@


<template>


  <div class="mobilePopupOurOnce">


    <div class="mobilePopupOurOnce_center">


      <div class="mobilePopupOurOnce_left">


        <img src="img/cc/cc.png" alt="" />


      </div>


      <div class="mobilePopupOurOnce_right">


        <div class="mobilePopupOurOnce_r_up">{{ onceData.name }}</div>


        <div class="mobilePopupOurOnce_r_down">


          <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>


    </div>


  </div>


</template>




<script>


import { mapGetters } from "vuex";


export default {


  props: ["onceData"],


  name: "mobilePopupOurOnce",


  computed: {


    ...mapGetters(["mviewer"]),


    seebut() {


      let buts = this.onceData.buts;


      let b = [];


      for (let k in buts) {


        b.push({


          name: buts[k],


        });


      }


      return b;


    },


  },


  methods: {


    openOnce(val) {


      console.log(val, this.onceData.name);


      // 定位


      // this.mviewer.zoomToPosition(


      //     new DC.Position(


      //       e.wgs84Position.lng,


      //       e.wgs84Position.lat - 0.016,


      //       1530,


      //       0,


      //       -45


      //     )


      //   );


    },


  },


};


</script>




<style lang="scss" scoped>


// 继承类


.flexCenter {


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


}


.mobilePopupOurOnce {


  padding: 0 0;


  margin: 0 8px;


  .mobilePopupOurOnce_center {


    margin-bottom: 8px;


    height: 80px;


    border-bottom: #d4d4d4 dashed 1px;


    padding-bottom: 8px;


    @extend .flexCenter;


    .mobilePopupOurOnce_left {


      width: 32%;


      height: 100%;


      @extend .flexCenter;


    }


    .mobilePopupOurOnce_right {


      width: 68%;


      height: 100%;


      @extend .flexCenter;


      flex-direction: column;


      .mobilePopupOurOnce_r_up {


        height: 50%;


        width: 100%;


        font-size: 16px;


        text-indent: 1em;


        display: flex !important;


        align-items: center !important;


      }


      .mobilePopupOurOnce_r_down {


        height: 50%;


        width: 100%;


        padding-left: 1em;


        display: flex !important;


        align-items: center !important;


        .mobilePopupOurOnce_r_d_in {


          font-size: 17px;


        }


      }


    }


  }


}


</style>




 src/components/mobilemap/index.vue


@@ -1,8 +1,8 @@


/* eslint-disable camelcase */


<template>


  <div id="mobile-viewer-container">


    <!-- 地图图标弹窗↓ -->


    <div id="mobile-map_popup_content"></div>




    <div


      ref="mobile-mapContentContent"


      v-show="popupWindow"


@@ -25,21 +25,27 @@


          >图集</el-link


        >


        <el-divider direction="vertical"></el-divider>




        <el-link icon="el-icon-map-location">实景</el-link>


        <el-divider direction="vertical"></el-divider>


        <el-link icon="el-icon-aim">去这</el-link>


        <el-link icon="el-icon-aim" @click="goOn">去这</el-link>


      </div>


    </div>


    <!-- 地图图标弹窗↑ -->


    <!-- 控制↓ -->


    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>


    <mobileCortrol ref="mobileCortrol"></mobileCortrol>


    <!-- <mobileCortrol ref="mobileCortrol"></mobileCortrol> -->


    <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>


    <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>


    <!-- 控制↑ -->


    <!-- 控制大弹窗的弹窗 -->


    <mobilePopupOurAfter v-if="mBigPopupAfter"></mobilePopupOurAfter>


    <!-- 大弹窗 -->


    <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>


  </div>


</template>


<script>


import { mapGetters } from "vuex";




import { location } from "../../position/position";


export default {


  name: "mobilemapBox",


  data() {


@@ -51,10 +57,28 @@


      ],


      popupFlag: false,


      popupWindow: false,


      bigPopup: {


        width: 0,


        height: 0,


        transition: "all 3s",


      },


    };


  },


  computed: {


    ...mapGetters(["mviewer"]),


    ...mapGetters(["mviewer", "mBigPopup", "mBigPopupAfter"]),


  },


  watch: {


    mBigPopup() {


      if (this.mBigPopup) {


        this.bigPopup.width = "100%";


        this.bigPopup.height = "100%";


        this.bigPopup.display = "inline-block";


      } else {


        this.bigPopup.width = "0";


        this.bigPopup.height = "0";


        this.bigPopup.display = "none";


      }


    },


  },


  mounted() {


    var DC = global.DC;


@@ -203,7 +227,7 @@


        viewer.scene.globe.depthTestAgainstTerrain = false;




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


        console.log(e.position);


        // console.log(e.position);




        // 定制化窗体


        var divForms = new DC.mobileDivForms(viewer, {


@@ -216,8 +240,8 @@


        viewer.zoomToPosition(


          new DC.Position(


            e.wgs84Position.lng,


            e.wgs84Position.lat - 0.016,


            2030,


            e.wgs84Position.lat - 0.012,


            1530,


            0,


            -45


          )


@@ -232,7 +256,7 @@


      // )




      viewer.compass.enable = false;


      viewer.zoomController.enable = false;


      viewer.zoomController.enable = true;


      viewer.locationBar.enable = false;


      viewer.distanceLegend.enable = true;


    }


@@ -244,6 +268,35 @@


      let imgsDom = document.getElementById("mobileBigImgs");


      imgsDom.click();


    },


    goOn() {


      // if (navigator.geolocation) {


      //   navigator.geolocation.watchPosition(backPoint);


      // }


      // function backPoint(res) {


      //   console.log(res);


      //   let position = [res.coords.longitude, res.coords.latitude];


      //   console.log(position);


      // }


      // this.getLocation();


      // location((res) => {


      //   console.log(res);


      //   alert(res.message);


      // });


      // console.log(returnCitySN["cip"]);


    },


    getLocation() {


      // let _that = this;


      // let geolocation = location.initMap("map-container"); //定位


      // AMap.event.addListener(geolocation, "complete", (result) => {


      //   console.log(result);


      //   // console.log("hhha");


      //   // _that.lat = result.position.lat;


      //   // _that.lng = result.position.lng;


      //   // _that.province = result.addressComponent.province;


      //   // _that.city = result.addressComponent.city;


      //   // _that.district = result.addressComponent.district;


      // });


    },


  },


};


</script>




 src/mobileDivForms/mobileDivForms.js


@@ -70,53 +70,9 @@




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




        // var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")




        // var divForms = $("<div class='divForms divForms-theme'></div>")




        // var divFormsWrap = $("<div class='divForms-wrap'></div>")




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




        // var arrowLt = $("<div class='arrow-lt'></div>")


        // var bT = $("<div class='b-t'></div>")


        // var bR = $("<div class='b-r'></div>")


        // var bB = $("<div class='b-b'></div>")


        // var bL = $("<div class='b-l'></div>")


        // var arrowRb = $("<div class='arrow-rb'></div>")




        // var labelWrap = $("<div class='label-wrap'></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>")


        // var labelContent = $("<div class='mobilelabel-content'>内容</div>")




        // labelWrap.append(titleDiv)


        // labelWrap.append(labelContent)




        // var bTL = $("<div class='b-t-l'></div>")


        // var bBR = $("<div class='b-b-r'></div>")




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




        // area.append(arrowLt)


        // area.append(bT)


        // area.append(bR)


        // area.append(bB)


        // area.append(bL)


        // area.append(arrowRb)


        // area.append(labelWrap)




        // divFormsWrap.append(area)


        // divFormsWrap.append(bTL)


        // divFormsWrap.append(bBR)




        // divForms.append(divFormsWrap)


        // divForms.append(arrow)




        // divBig.append(divForms)


        // el.append(divBig)


        el.append(titleDiv)


        el.append(labelContent)




@@ -137,6 +93,9 @@


    }




    positionPopUp(windowCoord, id) {


        if (!windowCoord) {


            return;


        }


        const wx = document.getElementById('app').clientWidth;


        const x = windowCoord.x - (wx / 100 * 35);


        const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;




 src/position/position.js


New file


@@ -0,0 +1,60 @@


/**


* 高德地图定位


* 


*/


// export const location = {


// undefined


// initMap(id) {


//     // undefined


//     let mapObj = new AMap.Map(id, {});


//     let geolocation;


//     mapObj.plugin(["AMap.Geolocation"], function () {


//         // undefined


//         geolocation = new AMap.Geolocation({


//             // undefined


//             enableHighAccuracy: true, //  是否使用高精度定位，默认:true


//             timeout: 10000, //  超过10秒后停止定位，默认：无穷大


//             maximumAge: 0, // 定位结果缓存0毫秒，默认：0


//             convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true


//             showButton: true, //  显示定位按钮，默认：true


//             buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角


//             buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)


//             showMarker: true, //  定位成功后在定位到的位置显示点标记，默认：true


//             showCircle: true, //  定位成功后用圆圈表示定位精度范围，默认：true


//             panToLocation: true, //  定位成功后将定位到的位置作为地图中心点，默认：true


//             zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false


//         });


//         mapObj.addControl(geolocation);


//         geolocation.getCurrentPosition();


//     });


//     return geolocation;


// },


// };


export const location = function (fn) {


    AMap.plugin('AMap.Geolocation', function () {


        var geolocation = new AMap.Geolocation({


            // 是否使用高精度定位，默认：true


            enableHighAccuracy: true,


            // 设置定位超时时间，默认：无穷大


            // timeout: 10000,


            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)


            // buttonOffset: new AMap.Pixel(10, 20),


            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false


            // zoomToAccuracy: true,


            //  定位按钮的排放位置,  RB表示右下


            // buttonPosition: 'RB'


        })




        geolocation.getCurrentPosition()


        AMap.event.addListener(geolocation, 'complete', onComplete)


        AMap.event.addListener(geolocation, 'error', onError)


        function onComplete(data) {


            // data是具体的定位信息


            fn(data);


        }


        function onError(data) {


            // 定位出错


            fn(data);


        }


    })


};




 src/store/getters.js


@@ -2,6 +2,8 @@


    viewer: state => state.viewer.viewer,


    popupBgUrl: state => state.popupParams.popupBgUrl,


    pupupQRUrl: state => state.popupParams.pupupQRUrl,


    mviewer: state => state.mobile.mviewer


    mviewer: state => state.mobile.mviewer,


    mBigPopup: state => state.mobile.mBigPopup,


    mBigPopupAfter: state => state.mobile.mBigPopupAfter


}


export default getters




 src/store/modules/mobile.js


@@ -1,10 +1,19 @@


const mobile = {


    state: {


        mviewer: null


        mviewer: null,


        mBigPopup: false,


        mBigPopupAfter: false,


        ips: ''


    },


    mutations: {


        MSET_VIEWER(state, viewer) {


            state.mviewer = viewer


        },


        MSET_BIGPOPUP(state, viewer) {


            state.mBigPopup = viewer


        },


        MSET_BIGPOPUPAFTER(state, viewer) {


            state.mBigPopupAfter = viewer


        }


    },


    actions: {




 src/store/modules/popupParams.js


@@ -4,10 +4,10 @@


        pupupQRUrl: null


    },


    mutations: {


        SET_POPUPBGURL (state, popupBgUrl) {


        SET_POPUPBGURL(state, popupBgUrl) {


            state.popupBgUrl = popupBgUrl


        },


        SET_POPUPQRURL (state, pupupQRUrl) {


        SET_POPUPQRURL(state, pupupQRUrl) {


            state.pupupQRUrl = pupupQRUrl


        }


    },




 src/styles/mobile/popup.scss


@@ -61,25 +61,87 @@


    }


}




// 比例尺


#mobile-viewer-container .dc-distance-legend {


    right: 5px !important;


    left: auto !important;


}


// 缩放控制


#mobile-viewer-container .dc-zoom-controller {


    left: 20px !important;


    top: 20px !important;


    .zoom-in .refresh .zoom-out {


        width: 32px !important;


        height: 32px !important;


        background-color: #c9302c !important;


$controllerw: 35px !important;


#mobile-viewer-container {


    // 继承类


    .flexCenter {


        display: flex !important;


        align-items: center !important;


        justify-content: center !important;


        color: white !important;


        font-size: 22px !important;


        margin-bottom: 12px !important;


        border-radius: 5px !important;


    }


    // 比例尺


    .dc-distance-legend {


        right: 5px !important;


        left: auto !important;


    }


    // 缩放控制


    .dc-zoom-controller {


        width: 32px !important;


        height: auto !important;


        left: 20px !important;


        top: 50px !important;


        z-index: 200;


        background-color: transparent !important;


        border: 1px solid transparent !important;




        div:nth-child(1) {


            // border-bottom: 1px solid #ebebeb;


            margin-bottom: 20px !important;


        }


        div:nth-child(2) {


            display: none !important;


        }


        div:nth-child(3) {


            // border-top: 1px solid #ebebeb;


        }


        div {


            width: $controllerw;


            height: $controllerw;


            position: relative !important;


            left: -1px !important;


            background-color: #c9302c !important;


            color: white !important;


            @extend .flexCenter;


            border-radius: 8px;


            svg {


                width: 20px !important;


                height: 20px !important;


            }


        }


    }


    //弹窗标签栏的标签


    .m_p_center {


        .el-tabs {


            width: 100% !important;


            height: 100% !important;


            box-sizing: border-box;


            .el-tabs__nav-scroll {


                width: 100% !important;


                @extend .flexCenter;


            }


            .el-tabs__content {


                width: 100% !important;


                height: calc(100% - 55px) !important;


                box-sizing: border-box;


                .el-tab-pane {


                    width: 100% !important;


                    height: 100% !important;


                }


            }


        }


    }




    //地图底部按钮下拉菜单


    .m-left-mobileCortrolButtom {


        .el-dropdown {


            width: 100% !important;


            height: 100% !important;


            @extend .flexCenter;


            .el-icon-s-flag.icon {


                position: relative;


                top: 10px;


                left: 10px;


            }


        }


    }


}