+手机端

liuyg

2021-12-13 c2620132e537104e0de17114fb824dd957b9dd2a

+手机端

 src/components/mobileCortrol/index.vue

New file
@@ -0,0 +1,50 @@
<template>
  <div class="m-left-control">
    <div class="m-l-inbut">+</div>
    <div class="m-l-inbut">-</div>
  </div>
</template>

<script>
export default {
  name: "mobileCortrol",
  computed: {},
  data() {
    return {
      viewer: null,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-control {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 1;
  .m-l-inbut {
    width: 32px;
    height: 32px;
    background-color: #c9302c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    margin-bottom: 12px;
    border-radius: 5px;
  }
}
</style>

 src/components/mobileCortrolButtom/index.vue

New file
@@ -0,0 +1,53 @@
<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>
</template>

<script>
export default {
  name: "mobileCortrolButtom",
  computed: {},
  data() {
    return {
      viewer: null,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-mobileCortrolButtom {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  .m-l-inbut {
    float: left;
    width: 39px;
    height: 39px;
    background-color: #c9302c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    margin-left: 12px;
    border-radius: 5px;
  }
}
</style>

 src/components/mobileCortrolSearch/index.vue

New file
@@ -0,0 +1,52 @@
<template>
  <div class="m-left-mobileCortrolSearch">
    <div class="m-left-SearchMain">
      <el-input placeholder="请输入内容" v-model="input" clearable
        ><i class="el-icon-search icon"></i>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "mobileCortrolSearch",
  computed: {},
  data() {
    return {
      viewer: null,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-mobileCortrolSearch {
  width: 100%;
  position: fixed;
  top: 0;
  // left: 20px;
  z-index: 1;
  .m-left-SearchMain {
    margin: 0 auto;
    width: 60%;
    position: relative;
    z-index: 1;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

 src/components/mobileLeftNav/index.vue

New file
@@ -0,0 +1,347 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="iconHide = !iconHide">
      <i :class="icons"></i>
    </div>
    <ul>
      <li
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
      >
        <img :style="[imgStyle]" :src="item.img" alt="" />
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mobileLeftNav",
  computed: {},
  watch: {
    iconHide() {
      if (this.iconHide) {
        this.icons = "el-icon-d-arrow-left";
        this.navStyle.right = "-51px";
        this.imgStyle.right = "6px";
      } else {
        this.icons = "el-icon-d-arrow-right";
        this.navStyle.right = "0px";
        this.imgStyle.right = "0";
      }
    },
  },
  data() {
    return {
      icons: "el-icon-d-arrow-right",
      iconHide: false,
      navStyle: {
        right: "0px",
      },
      imgStyle: {
        right: "0",
      },
      //   coutrolStyle: {
      //     position: " absolute",
      //     left: "-26px",
      //     top: "114px",
      //     right: "auto",
      //     width: "25px",
      //     height: "60px",
      //     backgroundColor: "#fff",
      //     borderRadius: "10px",
      //     display: "flex",
      //     alignItems: "center",
      //     justifyContent: "center",
      //     transition: "left 3s",
      //   },
      leftNavData: [
        {
          flag: false,
          label: "标签",
          img: "/img/leftnav/tag.png",
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
        },
        {
          flag: false,
          label: "道路",
          img: "/img/leftnav/way.png",
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
        },
        {
          flag: false,
          label: "实景",
          img: "/img/leftnav/scene.png",
          normal: "/img/leftnav/scene.png",
          checked: "/img/leftnav/scene-checked.png",
          layer: "sceneLayer",
        },
        {
          flag: false,
          label: "活动",
          img: "/img/leftnav/activity.png",
          normal: "/img/leftnav/activity.png",
          checked: "/img/leftnav/activity-checked.png",
          layer: "activityLayer",
        },
        {
          flag: false,
          label: "AED",
          img: "/img/leftnav/aed.png",
          normal: "/img/leftnav/aed.png",
          checked: "/img/leftnav/aed-checked.png",
          layer: "aedLayer",
        },
        {
          flag: false,
          label: "停车",
          img: "/img/leftnav/park.png",
          normal: "/img/leftnav/park.png",
          checked: "/img/leftnav/park-checked.png",
          layer: "parkLayer",
        },
        {
          flag: false,
          label: "出入",
          img: "/img/leftnav/come.png",
          normal: "/img/leftnav/come.png",
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
      ],
      viewer: null,
      DC: null,
      tagLayer: null,
      wayLayer: null,
      sceneLayer: null,
      activityLayer: null,
      aedLayer: null,
      parkLayer: null,
      comeLayer: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 121.0493 + Math.random() * 0.5;
        const lat = 31.2583 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    },
    leftNavClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
        this[item.layer].show = true;
      } else {
        item.img = item.normal;
        this[item.layer].show = false;
      }
    },
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
      this.tagLayer = new this.DC.HtmlLayer("tagLayer");
      viewer.addLayer(this.tagLayer);
      this.wayLayer = new this.DC.HtmlLayer("wayLayer");
      viewer.addLayer(this.wayLayer);
      this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);

      this.aedLayer = new this.DC.VectorLayer("aedLayer");
      viewer.addLayer(this.aedLayer);

      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
      viewer.addLayer(this.parkLayer);
      this.comeLayer = new this.DC.VectorLayer("comeLayer");
      viewer.addLayer(this.comeLayer);

      const positions1 = this.generatePosition(50);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </div>
                        </div>
                    `
        );
        this.tagLayer.addOverlay(divIcon);
      });

      const positions2 = this.generatePosition(50);
      positions2.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                工建街
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
        );
        this.wayLayer.addOverlay(divIcon);
      });

      const positions3 = this.generatePosition(50);
      positions3.forEach((item) => {
        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        this.sceneLayer.addOverlay(billboard);
      });

      const positions4 = this.generatePosition(10);
      positions4.forEach((item, index) => {
        const label = new this.DC.Label(item, "建筑AED");
        label.setStyle({
          fillColor: this.DC.Color.ORANGERED,
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.aedLayer.addOverlay(label);

        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];

        this.aedLayer.addOverlay(billboard);
      });

      const positions5 = this.generatePosition(120);
      positions5.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `
        );
        this.parkLayer.addOverlay(divIcon);
      });

      const positions6 = this.generatePosition(10);
      positions6.forEach((item, index) => {
        const label = new this.DC.Label(item, "123");
        label.setStyle({
          fillColor: this.DC.Color.PURPLE,
          outlineColor: this.DC.Color.WHITE, // 边框颜色
          outlineWidth: 2, // 边框大小，
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.comeLayer.addOverlay(label);

        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];

        this.comeLayer.addOverlay(billboard);
      });

      this.tagLayer.show = false;
      this.wayLayer.show = false;
      this.sceneLayer.show = false;
      this.aedLayer.show = false;
      this.parkLayer.show = false;
      this.comeLayer.show = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-nav {
  position: fixed;
  bottom: 30px;
  right: 0px;
  z-index: 1;
  background-color: #fff;
  border-radius: 17px 0 0 17px;
  transition: all 0.5s;
  .m-left-coutrol {
    position: absolute;
    left: -24px;
    top: 96px;
    width: 25px;
    height: 60px;
    background-color: #fff;
    border-radius: 17px 0 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  li {
    margin-bottom: 6px;
    font-weight: 400;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    font-size: 0;
    cursor: pointer;

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

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

 src/components/mobilemap/index.vue

File was renamed from src/components/map/indexL.vue
@@ -1,9 +1,10 @@
/* eslint-disable camelcase */
<template>
  <div id="viewer-container" style="height: 100%; width: 100%">
  <!-- mobile -->
  <div id="mobile-viewer-container">
    <div
      v-show="popupFlag"
      id="modelPopup"
      id="mobile-modelPopup"
      style="
        width: 366px;
        height: 240px;
@@ -11,34 +12,42 @@
        background-size: 100% 100%;
      "
    >
      <div class="header">
        <div class="logo">
      <div class="mobile-header">
        <div class="mobile-logo">
          <img src="/img/navicon/map.png" alt="" />
        </div>
        <div class="title">明德楼</div>
        <div class="close">
        <div class="mobile-title">明德楼</div>
        <div class="mobile-close">
          <img src="/img/navicon/close.png" alt="" />
        </div>
      </div>
      <div class="content">
        <div class="img"></div>
        <div class="meau"></div>
      <div class="mobile-content">
        <div class="mobile-img"></div>
        <div class="mobile-meau"></div>
      </div>
    </div>

    <div id="map_popup_content"></div>
    <div ref="mapContentContent" v-show="popupWindow" id="map_content_content">
      <div class="arc-bcg">
    <div id="mobile-map_popup_content"></div>
    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow"
      id="mobile-map_content_content"
    >
      <div class="mobile-arc-bcg">
        <img src="/img/job/one.jpg" alt="" @click="once" />
      </div>
    </div>
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
    <mobileCortrol ref="mobileCortrol"></mobileCortrol>
    <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
    <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "mapBox",
  name: "mobilemapBox",
  data() {
    return {
      popupFlag: false,
@@ -46,7 +55,7 @@
    };
  },
  computed: {
    ...mapGetters(["viewer"]),
    ...mapGetters(["mviewer"]),
  },
  mounted() {
    var DC = global.DC;
@@ -114,7 +123,7 @@
    }

    function initViewer() {
      viewer = new DC.Viewer("viewer-container", {
      viewer = new DC.Viewer("mobile-viewer-container", {
        contextOptions: {
          webgl: {
            stencil: true,
@@ -122,14 +131,14 @@
          },
        },
      });

      console.log(DC, 45678);
      that.$refs.mobileLeftNav.initialize(viewer);
      // console.log(DC, 45678);

      const popup = viewer.popup;

      popup.hide();

      that.$store.commit("SET_VIEWER", viewer);
      that.$store.commit("MSET_VIEWER", viewer);

      const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
@@ -139,32 +148,32 @@
        name: "影像",
      });

      // eslint-disable-next-line camelcase
      const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
      });
      viewer.addBaseLayer(baselayer_shaded, {
        iconUrl: "examples/images/icon/elec.png",
        name: "电子",
      });
      // // eslint-disable-next-line camelcase
      // const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_shaded, {
      //   iconUrl: "examples/images/icon/elec.png",
      //   name: "电子",
      // });

      // eslint-disable-next-line camelcase
      const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
      });
      viewer.addBaseLayer(baselayer_street, {
        iconUrl: "examples/images/icon/ter.png",
        name: "地形",
      });
      // // eslint-disable-next-line camelcase
      // const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_street, {
      //   iconUrl: "examples/images/icon/ter.png",
      //   name: "地形",
      // });

      // eslint-disable-next-line camelcase
      const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
      });
      viewer.addBaseLayer(baselayer_ter, {
        iconUrl: "examples/images/icon/ter.png",
        name: "地形",
      });
      // // eslint-disable-next-line camelcase
      // const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_ter, {
      //   iconUrl: "examples/images/icon/ter.png",
      //   name: "地形",
      // });

      const layer = new DC.TilesetLayer("layer");
      viewer.addLayer(layer);
@@ -199,14 +208,14 @@

        viewer.scene.globe.depthTestAgainstTerrain = false;

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

        // 定制化窗体
        var divForms = new DC.divForms(viewer, {
          domId: "div1",
          title: "成教楼  ",
          className: "divForms-dom",
          content: document.getElementById("map_content_content"),
          content: document.getElementById("mobile-map_content_content"),
          position: [e.position],
        });

@@ -219,17 +228,17 @@
      //     new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
      // )

      viewer.compass.enable = true;
      viewer.zoomController.enable = true;
      viewer.locationBar.enable = true;
      viewer.distanceLegend.enable = true;
      viewer.compass.enable = false;
      viewer.zoomController.enable = false;
      viewer.locationBar.enable = false;
      viewer.distanceLegend.enable = false;
    }

    DC.ready(initViewer);
  },
  methods: {
    once() {
      // console.log(123);
      console.log(123);
      // console.log(global, 123456789);
    },
  },
@@ -237,4 +246,9 @@
</script>

<style lang='scss' scope>
#mobile-viewer-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

 src/mobileLayout/index.vue

@@ -1,14 +1,17 @@
<template>
  <div>
      <mapBox ref="modalForm" />
  <div id="mobileMaps">
    <mobilemapBox ref="mobilemapBoxFrom" />
  </div>
</template>

<script>
export default {
}
export default {};
</script>

<style>

#mobileMaps {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

 src/mobileviews/home/index.vue

New file
@@ -0,0 +1,29 @@
<template>
  <div class="content-container">
    <div class="main-content" id="MainContent">
      <router-view ref="target-name" />
    </div>

    <div class="map-scene" ref="MapSceneContent">
      <div>
        <mobilemapBox ref="mobilemapBoxFrom" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

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

 src/router/page/index.js

@@ -1,8 +1,8 @@
/*
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-13 16:48:01
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-13 14:53:06
 */

import Vue from 'vue'
@@ -26,177 +26,188 @@
                title: '系统首页'
            },
            children: [{
                    path: 'mapnav',
                    component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
                    meta: {
                        title: '地图导览'
                    }
                },
                {
                    path: 'orgnav',
                    component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
                    meta: {
                        title: '校内机构导览'
                    },
                    children: [{
                            path: 'masses',
                            component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
                            meta: {
                                title: '党群机构'
                            }
                        },
                        {
                            path: 'ofc',
                            component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
                            meta: {
                                title: '职能部处'
                            }
                        }, {
                            path: 'directly',
                            component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
                            meta: {
                                title: '直属及附属单位'
                            }
                        },
                        {
                            path: 'teaching',
                            component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
                            meta: {
                                title: '教学与科研机构'
                            }
                        }, {
                            path: 'rest',
                            component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
                            meta: {
                                title: '其他机构'
                            }
                        }
                    ]
                },
                {
                    path: 'arc',
                    component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
                    meta: {
                        title: '校内建筑'
                    },
                    children: [{
                            path: 'edifact',
                            component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
                            meta: {
                                title: '行政办公'
                            }
                        },
                        {
                            path: 'teaching',
                            component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
                            meta: {
                                title: '教学科研'
                            }
                        }, {
                            path: 'venue',
                            component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
                            meta: {
                                title: '校内场馆'
                            }
                        },
                        {
                            path: 'dorm',
                            component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
                            meta: {
                                title: '学生宿舍'
                            }
                        }, {
                            path: 'culture',
                            component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
                            meta: {
                                title: '文化风景'
                            }
                        },
                        {
                            path: 'family',
                            component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
                            meta: {
                                title: '家属住宅'
                            }
                        }, {
                            path: 'rest',
                            component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
                            meta: {
                                title: '其他楼宇'
                            }
                        }
                    ]
                },
                {
                    path: 'service',
                    component: resolve => require(['../../pcviews/service/index.vue'], resolve),
                    meta: {
                        title: '生活服务设施'
                    }
                },
                {
                    path: 'allquery',
                    component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
                    meta: {
                        title: '综合查询'
                    }
                },
                {
                    path: 'campusnav',
                    component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
                    meta: {
                        title: '校园导览'
                    }
                },
                {
                    path: 'campusnavi',
                    component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
                    meta: {
                        title: '校园导航'
                    }
                },
                {
                    path: 'specialmap',
                    component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
                    meta: {
                        title: '专题地图'
                    }
                },
                {
                    path: 'tool',
                    component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
                    meta: {
                        title: '工具'
                    },
                    children: [{
                            path: 'download',
                            component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
                            meta: {
                                title: '地图下载'
                            }
                        }, {
                            path: 'sign',
                            component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
                            meta: {
                                title: '地图标记'
                            }
                        },
                        {
                            path: 'ranging',
                            component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
                            meta: {
                                title: '地图测距'
                            }
                        }
                    ]
                path: 'mapnav',
                component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
                meta: {
                    title: '地图导览'
                }
            },
            {
                path: 'orgnav',
                component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
                meta: {
                    title: '校内机构导览'
                },
                children: [{
                    path: 'masses',
                    component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
                    meta: {
                        title: '党群机构'
                    }
                },
                {
                    path: 'ofc',
                    component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
                    meta: {
                        title: '职能部处'
                    }
                }, {
                    path: 'directly',
                    component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
                    meta: {
                        title: '直属及附属单位'
                    }
                },
                {
                    path: 'teaching',
                    component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
                    meta: {
                        title: '教学与科研机构'
                    }
                }, {
                    path: 'rest',
                    component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
                    meta: {
                        title: '其他机构'
                    }
                }
                ]
            },
            {
                path: 'arc',
                component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
                meta: {
                    title: '校内建筑'
                },
                children: [{
                    path: 'edifact',
                    component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
                    meta: {
                        title: '行政办公'
                    }
                },
                {
                    path: 'teaching',
                    component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
                    meta: {
                        title: '教学科研'
                    }
                }, {
                    path: 'venue',
                    component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
                    meta: {
                        title: '校内场馆'
                    }
                },
                {
                    path: 'dorm',
                    component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
                    meta: {
                        title: '学生宿舍'
                    }
                }, {
                    path: 'culture',
                    component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
                    meta: {
                        title: '文化风景'
                    }
                },
                {
                    path: 'family',
                    component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
                    meta: {
                        title: '家属住宅'
                    }
                }, {
                    path: 'rest',
                    component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
                    meta: {
                        title: '其他楼宇'
                    }
                }
                ]
            },
            {
                path: 'service',
                component: resolve => require(['../../pcviews/service/index.vue'], resolve),
                meta: {
                    title: '生活服务设施'
                }
            },
            {
                path: 'allquery',
                component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
                meta: {
                    title: '综合查询'
                }
            },
            {
                path: 'campusnav',
                component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
                meta: {
                    title: '校园导览'
                }
            },
            {
                path: 'campusnavi',
                component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
                meta: {
                    title: '校园导航'
                }
            },
            {
                path: 'specialmap',
                component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
                meta: {
                    title: '专题地图'
                }
            },
            {
                path: 'tool',
                component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
                meta: {
                    title: '工具'
                },
                children: [{
                    path: 'download',
                    component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
                    meta: {
                        title: '地图下载'
                    }
                }, {
                    path: 'sign',
                    component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
                    meta: {
                        title: '地图标记'
                    }
                },
                {
                    path: 'ranging',
                    component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
                    meta: {
                        title: '地图测距'
                    }
                }
                ]
            }
            ]
        }]
    },
    // 手机端
    {
        path: '/mobileLayout',
        component: resolve => require(['../../mobileLayout/index.vue'], resolve)
        redirect: '/mobileLayout/default',
        meta: {
            title: '导航菜单'
        },
        component: resolve => require(['../../mobileLayout/index.vue'], resolve),
        children: [{
            path: 'default',
            component: resolve => require(['../../mobileviews/home/index.vue'], resolve),
            meta: {
                title: '系统首页'
            }
        }]
    },
    {
        path: '/403',

 src/store/getters.js

@@ -1,4 +1,5 @@
const getters = {
    viewer: state => state.viewer.viewer
    viewer: state => state.viewer.viewer,
    mviewer: state => state.mobile.mviewer
}
export default getters

 src/store/index.js

@@ -2,13 +2,14 @@
import Vuex from 'vuex'

import viewer from './modules/viewer'
import mobile from './modules/mobile'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        viewer
        viewer, mobile
    },
    getters
})

 src/store/modules/mobile.js

New file
@@ -0,0 +1,16 @@
const mobile = {
    state: {
        mviewer: null
    },
    mutations: {
        MSET_VIEWER(state, viewer) {
            // console.log(viewer, 456)
            state.mviewer = viewer
        }
    },
    actions: {

    }
}

export default mobile