同屏对比页面优化，添加登录以及首页刷新用户校验逻辑详情见main.js

src/components/common/BottomForm/SameScreenComparison.vue

@@ -1,6 +1,13 @@
 <template>
   <!-- 同屏对比弹窗 -->
-  <el-dialog title="同屏对比" fullscreen :visible.sync="dialogVisible" :before-close="handleClose">
+  <el-dialog
+    title="同屏对比"
+    fullscreen
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    @mousedown="changeMouseDownStatus(true)"
+    @mouseup="changeMouseDownStatus(false)"
+  >
     <template slot="title">
       <div class="dialogTitle">
         <div class="dialogTitleIcon"></div>
@@ -17,7 +24,7 @@
           v-for="(mapIndex, index) in checkedCities"
           :key="index"
           :style="mapListBoxStyle()"
-          @mousedown="changeMouseIndex(index)"
+          @mouseover="changeMouseOverIndex(index)"
         >
           <span>{{ mapList[mapIndex].mapName }}</span>
           <Map
@@ -25,6 +32,7 @@
             :index="index"
             :mouseIndex="mouseIndex"
             :centerZoom="centerZoom"
+            :centerZoomInit="centerZoomInit"
             @changeCenterZoom="changeCenterZoom"
           />
         </div>
@@ -89,6 +97,11 @@ export default {
       interval: "",
       // 地图暂存显示变量
       centerZoom: {},
+      // 外部地图暂存中心、层级信息
+      centerZoomInit: {},
+      // 当前光标是否为按下状态
+      MouseDownStatus: false,
+      // 光标作用的地图下标
       mouseIndex: -1,
       // 底部文本域
       textarea1: "",
@@ -214,6 +227,8 @@ export default {
       // 打开弹窗
       this.dialogVisible = true;
       this.$emit("changeShowBottomMenusStatus", false);
+      // 打开弹窗前首先同步一下地图定位
+      this.centerZoomInit = { center: map2DViewer.map.getCenter(), zoom: map2DViewer.map.getZoom() };
     },
     // 弹窗关闭询问
     handleClose() {
@@ -233,6 +248,8 @@ export default {
       } else {
         // 关闭弹窗
         this.dialogVisible = false;
+        // 获取地图光标暂存对象
+        this.mouseIndex = -1;
         // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
         this.$emit("changeShowBottomMenusStatus", true);
       }
@@ -303,8 +320,14 @@ export default {
       this.centerZoom = data;
     },
     // 暂存当前光标所在map组件的下标
-    changeMouseIndex(mouseIndex) {
-      this.mouseIndex = mouseIndex;
+    changeMouseDownStatus(status) {
+      this.MouseDownStatus = status;
+    },
+    changeMouseOverIndex(mouseIndex) {
+      // 当鼠标按下后（this.MouseDownStatus = true）暂存当前光标所在map组件的下标将不再修改
+      if (!this.MouseDownStatus) {
+        this.mouseIndex = mouseIndex;
+      }
     }
   },
   watch: {}

src/components/layout/Header.vue

@@ -45,7 +45,11 @@
           <div class="inner-user">
             <el-dropdown @command="handleCommand">
               <span class="el-dropdown-link">
-                <div class="inner-user-icon"></div>
+                <el-avatar
+                  size="medium"
+                  :src="$store.state.userInfo && $store.state.userInfo.photo ? $store.state.userInfo.photo : ''"
+                ></el-avatar>
+                <!-- <div class="inner-user-icon"></div> -->
                 <div class="inner-user-text">管理员</div>
               </span>
               <el-dropdown-menu slot="dropdown">
@@ -132,9 +136,11 @@ export default {
     },
     // 用户退出操作
     loginOut() {
+      this.$store.commit("changeUserInfo", {});
+      localStorage.removeItem("TOKEN");
+      localStorage.removeItem("USER_ID");
       this.$router.push("/login");
       const h = this.$createElement;
-
       this.$notify({
         title: "登出成功",
         message: h("i", { style: "color: teal" }, "用户退出！感谢使用！")
@@ -255,7 +261,6 @@ export default {
 #layoutHeader .user {
   float: right;
   margin-right: 30px;
-  line-height: 60px;
   cursor: pointer;
   width: 95%;
   height: 100%;

src/components/map/Map.vue

@@ -9,8 +9,6 @@ export default {
     return {
       map: "",
       layers: [],
-      center: map2DViewer.map.getCenter(),
-      zoom: map2DViewer.map.getZoom(),
       minZoom: 10,
       maxZoom: 16,
       bound: [
@@ -33,7 +31,7 @@ export default {
       });
     });
   },
-  props: ["mapUrl", "index", "centerZoom", "mouseIndex"],
+  props: ["mapUrl", "index", "centerZoom", "mouseIndex", "centerZoomInit"],
   beforeDestroyed() {},
   methods: {
     mapInit() {
@@ -43,7 +41,7 @@ export default {
         minZoom: this.minZoom,
         maxZoom: this.maxZoom
         // maxBounds: new L.LatLngBounds(this.bound[0], this.bound[1]),
-      }).setView(this.center, this.zoom);
+      }).setView(map2DViewer.map.getCenter(), map2DViewer.map.getZoom());
 
       //添加默认图层
       var guid = publicFun.buildGuid("baseLayer");
@@ -70,6 +68,15 @@ export default {
         }
       },
       deep: true
+    },
+    centerZoomInit: {
+      handler(newValue, oldValue) {
+        if (newValue.center && newValue.zoom) {
+          let center = L.latLng(newValue.center.lat, newValue.center.lng);
+          this.map.setView(center, newValue.zoom);
+        }
+      },
+      deep: true
     }
   }
 };

src/main.js

@@ -42,6 +42,40 @@ Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
 Vue.prototype.$ifLeftMenu = (leftMenuTitle) => {
   return store.state.leftMenuTitle == leftMenuTitle;
 };
+// 添加全局路由前置守卫
+router.beforeEach((to, from, next) => {
+  if (to.path === '/' && from.path === '/login') {
+    // 退出操作成功后
+    next();
+  }
+  if (to.path === '/login' && from.path === '/') {
+    // 登录操作成功后
+    next();
+  }
+  if (to.path === '/' && from.path === '/') {
+    // 首页刷新操作
+    post(urls.getUserInfo).then(
+      res => {
+        // 请求成功
+        if (res.code == 200 && res.content !== "无效token") {
+          next();
+        } else {
+          localStorage.removeItem('TOKEN');
+          localStorage.removeItem('USER_ID');
+          ElementUI.Message.error("用户信息获取失败，请尝试重新登录!");
+          next('/login');
+        }
+      },
+      error => {
+        // 请求失败！
+        localStorage.removeItem('TOKEN');
+        localStorage.removeItem('USER_ID');
+        ElementUI.Message.error(error)
+        next('/login');
+      }
+    );
+  }
+})
 new Vue({
   router,
   store,

src/store/index.js

@@ -33,6 +33,8 @@ export default new Vuex.Store({
     // 我的标记中的疑点数据
     myLabelPointsArr: [],
     treeDataCollection: new Map(),
+    // 用户信息（登录成功后保存）
+    userInfo: {},
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
@@ -40,6 +42,10 @@ export default new Vuex.Store({
     treeDataCollection: (state) => state.treeDataCollection,
   },
   mutations: {
+    // 用户信息修改（登录或退出时操作）
+    changeUserInfo(state, userInfo) {
+      state.userInfo = userInfo;
+    },
     baseMapRight(state, position) {
       state.baseMapRight = position;
     },

src/views/Login.vue

@@ -71,7 +71,7 @@
       </el-input>
       <div class="PasswordInfoDiv">
         <div>
-          <el-checkbox v-model="RememberYourPassword">记住密码</el-checkbox>
+          <el-checkbox :checked="RememberYourPassword">记住密码</el-checkbox>
         </div>
         <div><el-link type="primary" @click="forgetYouPassword()">忘记密码?</el-link></div>
       </div>
@@ -94,12 +94,11 @@ export default {
     return {
       userName: "",
       password: "",
-      RememberYourPassword: localStorage.getItem("RememberYourPassword")
+      RememberYourPassword: localStorage.getItem("RememberYourPassword") === "true"
     };
   },
   mounted() {
     this.$nextTick(() => {
-      this.RememberYourPassword = localStorage.getItem("RememberYourPassword");
       if (this.RememberYourPassword) {
         if (localStorage.getItem("_USER_NAME") && localStorage.getItem("_PASSWORD")) {
           this.userName = localStorage.getItem("_USER_NAME");
@@ -124,19 +123,22 @@ export default {
       param.append("userName", this.userName);
       param.append("password", this.password);
       param.append("clientId", "1");
-      console.log(param,"paramdata");
+      console.log(param, "paramdata");
       this.$Post(this.urlsCollection.loginUrl, param).then(
         res => {
           // 登录成功
           if (res.code == 200) {
             // 登录校验成功后
             if (this.RememberYourPassword) {
+              // 需要长期缓存的数据使用localStorage
               localStorage.setItem("RememberYourPassword", true);
               localStorage.setItem("_USER_NAME", this.userName);
               localStorage.setItem("_PASSWORD", publicFun.Encrypt(this.password));
             }
             localStorage.setItem("TOKEN", res.message);
-            localStorage.setItem("USER_ID",res.content.id)
+            localStorage.setItem("USER_ID", res.content.id);
+            // 对于临时缓存的全局数据使用store
+            this.$store.commit("changeUserInfo", res.content);
             this.$router.push("/");
             const h = this.$createElement;
             this.$notify({