切换登录

package-lock.json

@@ -19,7 +19,9 @@
         "js-cookie": "^3.0.1",
         "less": "3.9.0",
         "less-loader": "7",
+        "swiper": "4.5.1",
         "vue": "^2.6.11",
+        "vue-awesome-swiper": "3.1.3",
         "vue-router": "3",
         "vuex": "3"
       },
@@ -6631,6 +6633,19 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
+    "node_modules/dom7/node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -13872,6 +13887,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "node_modules/ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-6.0.2.tgz",
@@ -14299,6 +14319,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmmirror.com/table/-/table-5.4.6.tgz",
@@ -15264,6 +15297,19 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -21046,6 +21092,21 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+          "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+        }
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -26316,6 +26377,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-6.0.2.tgz",
@@ -26634,6 +26700,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmmirror.com/table/-/table-5.4.6.tgz",
@@ -27347,6 +27422,15 @@
         }
       }
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",

src/utils/request.js

@@ -7,6 +7,7 @@ const request = axios.create({
   // baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://192.168.0.188:8888/zhapi',
+  //baseURL: 'http://121.41.91.94:12002/zhapi',
   baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },

src/views/head.vue

@@ -5,30 +5,63 @@
         <img src="../assets/companyFile/编组 7212.png" />
       </div>
       <div class="headText">镇海平安企业（园区）</div>
-      <el-menu :default-active="activeIndex" class="el-menu-demo topMenu" mode="horizontal" @select="handleSelect"
+      <el-menu
-        :router="true">
+        :default-active="activeIndex"
+        class="el-menu-demo topMenu"
+        mode="horizontal"
+        @select="handleSelect"
+        :router="true"
+      >
         <div class="shu"></div>
-        <el-menu-item index="1" route="/home/safetyIndex">综合指数</el-menu-item>
+        <el-menu-item index="1" route="/home/safetyIndex"
+          >综合指数</el-menu-item
+        >
         <div class="shu"></div>
-        <el-menu-item index="2" route="/home/realtimeWarning">实时预警</el-menu-item>
+        <el-menu-item index="2" route="/home/realtimeWarning"
+          >实时预警</el-menu-item
+        >
         <div class="shu"></div>
-        <el-menu-item index="3" route="/home/closeLoopDispose">闭环处置</el-menu-item>
+        <el-menu-item index="3" route="/home/closeLoopDispose"
+          >闭环处置</el-menu-item
+        >
         <div class="shu"></div>
-        <el-menu-item index="4" route="/home/factorResources">要素资源</el-menu-item>
+        <el-menu-item index="4" route="/home/factorResources"
+          >要素资源</el-menu-item
+        >
         <div class="shu"></div>
-        <el-menu-item index="5" route="/home/enterpriseArchives">企业档案</el-menu-item>
+        <el-menu-item index="5" route="/home/enterpriseArchives"
+          >企业档案</el-menu-item
+        >
         <div class="shu"></div>
-        <el-menu-item index="6" route="/home/applySupermarket">应用超市</el-menu-item>
+        <el-menu-item index="6" route="/home/applySupermarket"
+          >应用超市</el-menu-item
+        >
         <div class="shu"></div>
-        <el-menu-item index="7" route="/home/systemManagement/safeIndex">系统管理</el-menu-item>
+        <el-menu-item index="7" route="/home/systemManagement/safeIndex"
+          >系统管理</el-menu-item
+        >
         <div class="shu"></div>
       </el-menu>
       <div class="jingGuan">
-        <div class="jgtx">
+        <div class="jgtx" @click="check_user">
           <img src="../assets/companyFile/12110.png" />
         </div>
         &nbsp;&nbsp; 王警官
       </div>
+      <div class="user_box" v-show="user_show">
+        <div class="user_box_body">
+          <!-- 用户头像 -->
+          <div class="user_box_img">
+            <img src="../assets/companyFile/12110.png" />
+          </div>
+          <!-- 用户姓名 -->
+          <div class="user_name">王警官</div>
+          <!-- 用户个人中心 -->
+          <div class="user_center">个人中心</div>
+          <!-- 用户退出登录 -->
+          <div class="user_check_login" @click="logout">退出登录</div>
+        </div>
+      </div>
     </div>
     <router-view />
   </div>
@@ -36,18 +69,37 @@
 
 <script>
 export default {
+  name: "Head",
   data() {
     return {
       activeIndex: "1",
       activeIndex2: "1",
+      user_show: false,
     };
   },
   created() {
-    this.activeIndex = sessionStorage.getItem('activeIndex') ? sessionStorage.getItem('activeIndex') : '1'
+    this.activeIndex = sessionStorage.getItem("activeIndex")
+      ? sessionStorage.getItem("activeIndex")
+      : "1";
   },
   methods: {
     handleSelect(key) {
-      sessionStorage.setItem('activeIndex', key)
+      sessionStorage.setItem("activeIndex", key);
+    },
+    // 点击显示退出登录界面
+    check_user() {
+      if (this.user_show) {
+        this.user_show = false;
+      } else {
+        this.user_show = true;
+      }
+    },
+    // 退出登录
+    logout() {
+      // 清空token
+      window.sessionStorage.clear();
+      // 跳转到登录页
+      this.$router.push("/login");
     },
   },
 };
@@ -113,7 +165,63 @@ export default {
       }
     }
   }
-
+  .user_box {
+    position: absolute;
+    top: 70px;
+    right: 10px;
+    width: 180px;
+    height: 200px;
+    // border: 0.1px solid #33cccc;
+    padding: 10px;
+    background: url("~@/assets/archives/023.png") no-repeat;
+    background-size: 100% 100%;
+    z-index: 2;
+    .user_box_body {
+      width: 160px;
+      height: 180px;
+      // border: 0.1px solid #33cccc;
+    }
+    .user_box_img {
+      width: 60px;
+      height: 60px;
+      margin: 5px auto;
+      img {
+        width: 60px;
+        height: 60px;
+      }
+    }
+    .user_name {
+      width: 160px;
+      height: 25px;
+      color: #d9e7ff;
+      font-size: 15px;
+      text-align: center;
+    }
+    .user_center {
+      width: 160px;
+      height: 40px;
+      color: #d9e7ff;
+      text-align: center;
+      line-height: 40px;
+      cursor: pointer;
+    }
+    .user_check_login {
+      width: 160px;
+      height: 40px;
+      color: #d9e7ff;
+      text-align: center;
+      line-height: 40px;
+      cursor: pointer;
+    }
+    .user_center:hover,
+    .user_center:focus {
+      text-shadow: 0 0 20px rgba(21, 255, 198, 0.64);
+    }
+    .user_check_login:hover,
+    .user_check_login:focus {
+      text-shadow: 0 0 20px rgba(21, 255, 198, 0.64);
+    }
+  }
   /deep/.el-menu {
     border: 0;
     background-color: rgba(0, 0, 0, 0);
@@ -164,12 +272,12 @@ export default {
         justify-content: center;
         align-items: center;
         padding: 10px 20px;
-        background: url('~@/assets/companyFile/Rectangle Copy 4.png') no-repeat;
+        background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
 
         background-size: 100% 100%;
 
         font-size: 16px;
-        color: #D9E7FF;
+        color: #d9e7ff;
         letter-spacing: 3px;
         text-align: center;
         font-weight: 400;
@@ -183,7 +291,7 @@ export default {
       }
 
       .is-active {
-        background: url('~@/assets/companyFile/891771.png') no-repeat;
+        background: url("~@/assets/companyFile/891771.png") no-repeat;
 
         background-size: 100% 100%;
       }