登录功能实现，更新小五台升压站文件

.env.development

@@ -9,6 +9,8 @@ VUE_APP_Matrix=http://10.81.3.153:6060
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011
 
+# 登录方式 0 ==> vue登录页面  1 ==> 统一认证登录页面
+VUE_APP_LOGIN_MODE = 0
 
 # 趋势对比数据条数
 VUE_APP_DIALOG_NUM = 8
@@ -18,4 +20,6 @@ VUE_APP_DIALOG_POINT = contextmenu
 
 
 # 智慧检修
-VUE_APP_NEW_WISDOM=http://10.81.3.155:8170
+VUE_APP_NEW_WISDOM=http://10.81.3.155:8170
+# 登录
+VUE_APP_VUE_LOGIN_URL=http://10.81.3.153:8190

.env.production

@@ -10,3 +10,5 @@ VUE_APP_DIALOG_NUM = 8
 VUE_APP_DIALOG_POINT = contextmenu
 # 智慧检修
 VUE_APP_NEW_WISDOM=http://10.81.3.155:8170
+# 登录
+VUE_APP_VUE_LOGIN_URL=http://10.81.3.153:8190

src/App.vue

@@ -1,93 +1,96 @@
 <template>
-  <div v-if="!showSisView && isLogined" class="main">
-    <div class="header-body" v-if="hideHeard === '0'">
-      <div class="header-title" @click="handleClickJump()">
-        <!-- <img v-if="$store.state.themeName === 'dark'" src="./assets/projectLogo.png" alt="" />
+  <div v-if="!showSisView">
+    <div v-if="isLogined" class="main">
+      <div class="header-body" v-if="hideHeard === '0'">
+        <div class="header-title" @click="handleClickJump()">
+          <!-- <img v-if="$store.state.themeName === 'dark'" src="./assets/projectLogo.png" alt="" />
         <img v-if="$store.state.themeName === 'light'" src="./assets/light-projectLogo.png" alt="" /> -->
-        <span
-          :style="
-            $store.state.themeName === 'dark'
-              ? 'color:#fff; font-size:18px;font-family: SimHei'
-              : 'color:#000'
-          "
-        >
-          >>发电场站生产实时运营管理平台</span
-        >
-      </div>
-      <div class="header-menu-body">
-        <Header @onMenuClick="HeaderMenuClick" />
+          <span
+            :style="
+              $store.state.themeName === 'dark'
+                ? 'color:#fff; font-size:18px;font-family: SimHei'
+                : 'color:#000'
+            "
+          >
+            >>发电场站生产实时运营管理平台</span
+          >
+        </div>
+        <div class="header-menu-body">
+          <Header @onMenuClick="HeaderMenuClick" />
+        </div>
       </div>
-    </div>
-    <div
-      class="menu-body"
-      :class="{ hover: isShowMenu }"
-      @mouseenter="showMenu"
-      @mouseleave="hideMenu"
-      v-show="$store.state.themeName === 'dark'"
-      v-if="hideMenus === '0'"
-    >
-      <Menu :root="root" />
-    </div>
-    <div>
-      <el-menu
-        class="lightMenu"
-        :class="$store.state.themeName === 'light' ? 'show' : 'hidden'"
-        :collapse="true"
-        text-color="#ffffff"
-        active-text-color="#6262a2"
-        background-color="#36348e"
-        @select="selectMenu"
+      <div
+        class="menu-body"
+        :class="{ hover: isShowMenu }"
+        @mouseenter="showMenu"
+        @mouseleave="hideMenu"
+        v-show="$store.state.themeName === 'dark'"
         v-if="hideMenus === '0'"
       >
-        <el-sub-menu
-          :index="index"
-          :title="item.text"
-          v-for="(item, index) in menuData"
-          :key="index"
+        <Menu :root="root" />
+      </div>
+      <div>
+        <el-menu
+          class="lightMenu"
+          :class="$store.state.themeName === 'light' ? 'show' : 'hidden'"
+          :collapse="true"
+          text-color="#ffffff"
+          active-text-color="#6262a2"
+          background-color="#36348e"
+          @select="selectMenu"
+          v-if="hideMenus === '0'"
         >
-          <template #title>
-            <router-link :to="item.path">
-              <el-icon>
-                <SvgIcon :svgid="item.icon" />
-              </el-icon>
-            </router-link>
-          </template>
-          <el-menu-item-group
-            v-for="(menu, idx) in item.children"
-            :index="idx"
-            :key="idx"
+          <el-sub-menu
+            :index="index"
+            :title="item.text"
+            v-for="(item, index) in menuData"
+            :key="index"
           >
-            <router-link :to="menu.path">
-              <el-menu-item :index="index + '-' + idx">{{
-                menu.text
-              }}</el-menu-item>
-            </router-link>
-          </el-menu-item-group>
-        </el-sub-menu>
-      </el-menu>
-    </div>
-    <div
-      class="main-body"
-      :style="
-        $store.state.themeName === 'light' && hideMenus === '0'
-          ? 'margin-left: 75px; max-width  : calc(100vw - 54px - 25px);'
-          : ''
-      "
-    >
-      <router-view />
+            <template #title>
+              <router-link :to="item.path">
+                <el-icon>
+                  <SvgIcon :svgid="item.icon" />
+                </el-icon>
+              </router-link>
+            </template>
+            <el-menu-item-group
+              v-for="(menu, idx) in item.children"
+              :index="idx"
+              :key="idx"
+            >
+              <router-link :to="menu.path">
+                <el-menu-item :index="index + '-' + idx">{{
+                  menu.text
+                }}</el-menu-item>
+              </router-link>
+            </el-menu-item-group>
+          </el-sub-menu>
+        </el-menu>
+      </div>
+      <div
+        class="main-body"
+        :style="
+          $store.state.themeName === 'light' && hideMenus === '0'
+            ? 'margin-left: 75px; max-width  : calc(100vw - 54px - 25px);'
+            : ''
+        "
+      >
+        <router-view />
+      </div>
     </div>
+    <div v-else class="login"><login-page @onLogin="login" /></div>
   </div>
-  <login-page v-if="!showSisView && !isLogined" @onLogin="login" />
-  <div v-else-if="!isLogined" class="login">
+
+  <!-- <div v-else-if="!isLogined" class="login">
     <login-page />
-  </div>
+  </div> -->
   <!-- <login-page v-if="!showSisView && !isLogined" @onLogin="login" /> -->
   <!-- <div v-else-if="token == ''">
     {{token}}
  <login-page  @onLogin="login" />
    </div> -->
 
-  <sisView v-else-if="showSisView" />
+  <sisView v-else />
 </template>
 
 <script>
@@ -113,7 +116,7 @@ export default {
       isShowMenu: false,
       // 当前子系统
       root: "",
-      isLogined: true,
+      //   isLogined: localStorage.getItem("loginState") || false,
       showSisView: false,
       memuCloseTimeout: null,
       menuData: [],
@@ -121,7 +124,11 @@ export default {
       hideHeard: "0",
     };
   },
-
+  computed: {
+    isLogined() {
+      return this.$store.state.user?.loginState;
+    },
+  },
   created() {
     let that = this;
     const themeName = that.$store.state.themeName;
@@ -174,8 +181,9 @@ export default {
         that.isShowMenu = false;
       }, 500);
     },
-    login(params) {
-      if (params.username && params.password) this.isLogined = true;
+    login({ token, username }) {
+      this.$store.commit("user/SET_LOGINSTATE", true);
+      this.$store.commit("user/SET_NAME", username);
     },
     selectMenu(menuIndex) {
       this.menuIndex = menuIndex;
@@ -378,6 +386,13 @@ body {
     border-color: #05bb4c;
   }
 }
+.login {
+  width: 100vw;
+  height: 100vh;
+  background: url("~@/assets/login-bg.png") no-repeat;
+  background-size: cover;
+  position: relative;
+}
 .el-tree-node__content {
   height: 40px !important;
 }

src/api/common.js

@@ -0,0 +1,14 @@
+//登录接口
+import request from "@/tools/request";
+export function login(data) {
+  return request({
+    baseURL: process.env.VUE_APP_VUE_LOGIN_URL,
+    url: "login",
+    method: "post",
+    data,
+    headers: {
+      isToken: false,
+    },
+  });
+}
+

src/assets/styles/el-override/el-input.less

@@ -5,7 +5,7 @@ body {
     background: fade(@gray, 20);
     color: @gray-l;
   }
-
+  
   .el-input {
     &.is-disabled .el-input__inner {
       background-color: fade(@gray-l, 20);

src/assets/styles/form.less

@@ -1,7 +1,5 @@
 // 查询 样式
 .main-body {
-  
-
   input {
     box-sizing: border-box;
     flex: 0 0 200px;
@@ -165,6 +163,56 @@
       transition: opacity 0.3s ease-out;
     }
   }
+  .el-form {
+    .el-form-item {
+      margin-bottom: 8px;
+
+      .el-form-item__label {
+        line-height: 33px;
+        color: @gray-l;
+        font-family: "SourceHanSans";
+      }
+
+      .el-form-item__content {
+        line-height: 33px;
+
+        .el-input {
+          line-height: 33px;
+
+          .el-input__inner {
+            background: fade(#536268, 20);
+            border-color: fade(#536268, 20);
+            height: 33px;
+            line-height: 33px;
+            padding-left: 30px;
+            color: #ffffff;
+            font-size: 12px;
+            font-family: "SourceHanSans";
+
+            &::placeholder {
+              font-size: 12px;
+              color: #606769;
+            }
+          }
+        }
+
+        .el-textarea {
+          .el-textarea__inner {
+            background: fade(#536268, 20);
+            border-color: fade(#536268, 20);
+            color: #ffffff;
+            font-size: 12px;
+            font-family: "SourceHanSans";
+
+            &::placeholder {
+              font-size: 12px;
+              color: #606769;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 .search-input {
@@ -173,7 +221,7 @@
     height: 33px;
 
     &.el-input--prefix .el-input__inner {
-    //   padding-left: 30px;
+      //   padding-left: 30px;
     }
 
     .el-input__icon {
@@ -394,57 +442,6 @@
   }
 }
 
-.el-form {
-  .el-form-item {
-    margin-bottom: 8px;
-
-    .el-form-item__label {
-      line-height: 33px;
-      color: @gray-l;
-      font-family: "SourceHanSans";
-    }
-
-    .el-form-item__content {
-      line-height: 33px;
-
-      .el-input {
-        line-height: 33px;
-
-        .el-input__inner {
-          background: fade(#536268, 20);
-          border-color: fade(#536268, 20);
-          height: 33px;
-          line-height: 33px;
-          padding-left: 30px;
-          color: #ffffff;
-          font-size: 12px;
-          font-family: "SourceHanSans";
-
-          &::placeholder {
-            font-size: 12px;
-            color: #606769;
-          }
-        }
-      }
-
-      .el-textarea {
-        .el-textarea__inner {
-          background: fade(#536268, 20);
-          border-color: fade(#536268, 20);
-          color: #ffffff;
-          font-size: 12px;
-          font-family: "SourceHanSans";
-
-          &::placeholder {
-            font-size: 12px;
-            color: #606769;
-          }
-        }
-      }
-    }
-  }
-}
-
 .el-input-number {
   .el-input {
     .el-input__inner {

src/assets/styles/theme/dark/dark-jsc.css

@@ -1,6 +1,9 @@
 #appBody.dark {
   transition: 0.25s;
 }
+#appBody.dark .el-popper.is-light {
+  border: none;
+}
 #appBody.dark .gray {
   transition: 0.25s;
 }

src/assets/styles/theme/dark/dark-jsc.less

@@ -2,280 +2,282 @@
 @import "./setting.less";
 
 #appBody.dark {
+  transition: @transition;
+  .el-popper.is-light {
+    border: none;
+  }
+  .gray {
     transition: @transition;
+  }
 
-    .gray {
-        transition: @transition;
-    }
+  .green {
+    transition: @transition;
+  }
 
-    .green {
-        transition: @transition;
-    }
+  .white {
+    transition: @transition;
+  }
 
-    .white {
-        transition: @transition;
-    }
+  #app {
+    transition: @transition;
+  }
 
-    #app {
-        transition: @transition;
-    }
+  .panel-title {
+    transition: @transition;
+  }
 
-    .panel-title {
-        transition: @transition;
-    }
+  .panel-tools {
+    transition: @transition;
+  }
 
-    .panel-tools {
+  .weather {
+    .other-info {
+      .text {
         transition: @transition;
-    }
+      }
 
-    .weather {
-        .other-info {
-            .text {
-                transition: @transition;
-            }
-
-            div.svg-icon svg use {
-                transition: @transition;
-            }
-        }
+      div.svg-icon svg use {
+        transition: @transition;
+      }
     }
+  }
 
-    .security-days {
-        .text {
-            transition: @transition;
-        }
-
-        .num {
-            transition: @transition;
-        }
+  .security-days {
+    .text {
+      transition: @transition;
     }
 
-    .tab-box {
-        .tab-item {
-            span {
-                svg {
-                    use {
-                        transition: @transition;
-                    }
-                }
-            }
-        }
+    .num {
+      transition: @transition;
     }
+  }
 
-    .header-body {
-        .header-title {
-            svg {
-                g:nth-child(1) {
-
-                    path,
-                    polygon {
-                        transition: @transition;
-                    }
-                }
-            }
+  .tab-box {
+    .tab-item {
+      span {
+        svg {
+          use {
+            transition: @transition;
+          }
         }
+      }
     }
+  }
 
-    .weather-info {
-        span svg use {
+  .header-body {
+    .header-title {
+      svg {
+        g:nth-child(1) {
+          path,
+          polygon {
             transition: @transition;
+          }
         }
+      }
     }
+  }
 
-    .map .tab-box .tab-item.active {
-        // background-image: linear-gradient(to top,
-        //         rgba(5, 187, 76, 0.5),
-        //         rgba(5, 187, 76, 0));
-        transition: @transition;
-    }
-
-    .map .tab-box .tab-item.active::after {
-        transition: @transition;
-    }
-    
-
-    .header-menu .header-menu-list .header-menu-item.active::after {
-        transition: @transition;
-    }
-
-    .header-menu .header-menu-list .header-menu-item.active {
-        background: linear-gradient(to top,
-                rgba(5, 187, 76, 0.5),
-                rgba(5, 187, 76, 0));
-        border    : 0.093vh solid @green;
-        transition: color @transition ease-in-out;
-    }
-
-    .coulometric-analysis {
-        .card-1 {
-            .card-icon {
-                svg use {
-                    transition: @transition;
-                }
-            }
-        }
+  .weather-info {
+    span svg use {
+      transition: @transition;
     }
+  }
 
-    .map .compass {
-        svg g:nth-child(3) {
-            g g path {
-                transition: @transition;
-            }
-        }
+  .map .tab-box .tab-item.active {
+    // background-image: linear-gradient(to top,
+    //         rgba(5, 187, 76, 0.5),
+    //         rgba(5, 187, 76, 0));
+    transition: @transition;
+  }
 
-        svg g:nth-child(4) {
-            g g path {
-                transition: @transition;
-            }
-        }
+  .map .tab-box .tab-item.active::after {
+    transition: @transition;
+  }
 
-        &::after {
-            transition: @transition;
+  .header-menu .header-menu-list .header-menu-item.active::after {
+    transition: @transition;
+  }
+
+  .header-menu .header-menu-list .header-menu-item.active {
+    background: linear-gradient(
+      to top,
+      rgba(5, 187, 76, 0.5),
+      rgba(5, 187, 76, 0)
+    );
+    border: 0.093vh solid @green;
+    transition: color @transition ease-in-out;
+  }
+
+  .coulometric-analysis {
+    .card-1 {
+      .card-icon {
+        svg use {
+          transition: @transition;
         }
+      }
     }
+  }
 
-    .name-box-period-label {
+  .map .compass {
+    svg g:nth-child(3) {
+      g g path {
         transition: @transition;
+      }
     }
 
-    .name-box-period-value {
+    svg g:nth-child(4) {
+      g g path {
         transition: @transition;
+      }
     }
 
-    .svg-map-nx {
-        .item-label {
-            rect {
-                transition: @transition;
-            }
-
-            .mapKey {
-                transition: @transition;
-            }
-        }
+    &::after {
+      transition: @transition;
+    }
+  }
 
-        .popup-layer-svg {
-            .mapKey {
-                transition: @transition;
-            }
-        }
+  .name-box-period-label {
+    transition: @transition;
+  }
 
-        #popup-box-svg rect {
-            transition: @transition;
-        }
-    }
+  .name-box-period-value {
+    transition: @transition;
+  }
 
-    .com-panel-3,
-    .com-panel,
-    .header-body {
+  .svg-map-nx {
+    .item-label {
+      rect {
         transition: @transition;
-    }
+      }
 
-    .com-panel-3 .dot,
-    .com-panel.line:before {
+      .mapKey {
         transition: @transition;
+      }
     }
 
-    .panel-header {
+    .popup-layer-svg {
+      .mapKey {
         transition: @transition;
+      }
     }
 
-    .fengji-icon {
-        svg use {
-            transition: @transition;
-        }
+    #popup-box-svg rect {
+      transition: @transition;
     }
+  }
 
-    .modal.el-dialog {
-        transition: @transition;
-    }
+  .com-panel-3,
+  .com-panel,
+  .header-body {
+    transition: @transition;
+  }
 
-    .modal.el-dialog .el-dialog__title {
-        transition: @transition;
-    }
+  .com-panel-3 .dot,
+  .com-panel.line:before {
+    transition: @transition;
+  }
 
-    .situation-body {
-        .value span:nth-child(2) {
-            transition: @transition;
-        }
-    }
+  .panel-header {
+    transition: @transition;
+  }
 
-    .coulometric-analysis .card-title {
-        transition: @transition;
+  .fengji-icon {
+    svg use {
+      transition: @transition;
     }
+  }
 
-    .com-panel,
-    .panel-header,
-    .home .table-card,
-    .com-panel-3.situation,
-    .el-menu--collapse,
-    .el-sub-menu,
-    .el-sub-menu__title,
-    .el-menu--popup,
-    .el-menu-item {
-        transition: @transition;
-    }
+  .modal.el-dialog {
+    transition: @transition;
+  }
 
-    .com-panel.line::before {
-        transition: @transition;
-    }
+  .modal.el-dialog .el-dialog__title {
+    transition: @transition;
+  }
 
-    .lightMenu {
-        width        : 0;
-        height       : calc(100% - 71px);
-        position     : absolute;
-        left         : 0;
-        top          : 57px;
-        z-index      : 100;
-        border-radius: 20px;
-        border       : 0;
-        overflow     : hidden;
-        transition   : @transition;
+  .situation-body {
+    .value span:nth-child(2) {
+      transition: @transition;
     }
+  }
 
-    .lightMenu.hidden {
-        width     : 0;
-        transition: @transition;
-    }
+  .coulometric-analysis .card-title {
+    transition: @transition;
+  }
+
+  .com-panel,
+  .panel-header,
+  .home .table-card,
+  .com-panel-3.situation,
+  .el-menu--collapse,
+  .el-sub-menu,
+  .el-sub-menu__title,
+  .el-menu--popup,
+  .el-menu-item {
+    transition: @transition;
+  }
 
-    .main-body {
-        margin-left: 0;
-        transition : @transition;
-    }
+  .com-panel.line::before {
+    transition: @transition;
+  }
+
+  .lightMenu {
+    width: 0;
+    height: calc(100% - 71px);
+    position: absolute;
+    left: 0;
+    top: 57px;
+    z-index: 100;
+    border-radius: 20px;
+    border: 0;
+    overflow: hidden;
+    transition: @transition;
+  }
 
-    .dot.top-left {
-        transition: @transition;
-    }
+  .lightMenu.hidden {
+    width: 0;
+    transition: @transition;
+  }
 
-    .dot.bottom-left {
-        transition: @transition;
-    }
+  .main-body {
+    margin-left: 0;
+    transition: @transition;
+  }
 
-    .dot.top-rignt {
-        transition: @transition;
-    }
+  .dot.top-left {
+    transition: @transition;
+  }
 
-    .dot.bottom-right {
-        transition: @transition;
-    }
+  .dot.bottom-left {
+    transition: @transition;
+  }
 
-    .lightMenu .el-menu--collapse {
-        transition: @transition;
-    }
+  .dot.top-rignt {
+    transition: @transition;
+  }
 
-    .lightMenu .el-menu--collapse {
-        height: 100%;
-    }
+  .dot.bottom-right {
+    transition: @transition;
+  }
 
-    .lightMenu .el-sub-menu__title {
-        transition: @transition;
-    }
+  .lightMenu .el-menu--collapse {
+    transition: @transition;
+  }
 
-    .lightMenu .el-sub-menu__title i {
-        transition: @transition;
-    }
+  .lightMenu .el-menu--collapse {
+    height: 100%;
+  }
+
+  .lightMenu .el-sub-menu__title {
+    transition: @transition;
+  }
 
+  .lightMenu .el-sub-menu__title i {
     transition: @transition;
+  }
+
+  transition: @transition;
+}
+.left {
+  margin-top: 5px;
 }
-.left{
-    margin-top: 5px;
-}

src/main.js

@@ -14,7 +14,7 @@ import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 // import "@modeConfig/modeConfig.js";
 
 import "@/lib/global-import.js";
-
+import "./permission";
 // 引入请求工具
 import axios from "@api/axios";
 

src/permission.js

@@ -0,0 +1,44 @@
+import router from "./router";
+import { getToken,  } from "@/utills/auth"; // getToken from cookie
+import { Base64 } from "js-base64";
+const whiteList = ["/login", "/logout"]; // 不重定向白名单
+import store from "@/store";
+router.beforeEach((to, from, next) => {
+  if (getToken()) {
+    next();
+  } else if (whiteList.indexOf(to.path) !== -1) {
+    next();
+  } else {
+    next(`/login?redirect=${to.fullPath}`);
+  }
+
+  //有token或在免登录白名单，直接放行
+  //   if (getCookie("iamAccessToken")) {
+  //     if (!store.state.userInfo) {
+  //       //获取用户资料
+  //       const result1 = store.dispatch("getUserInfo");
+  //       //获取菜单
+  //       const result2 = store.dispatch("getmenuList");
+  //       next();
+  //     } else {
+  //       next();
+  //     }
+  //     // next();//放行
+  //   } else if (whiteList.indexOf(to.path) !== -1) {
+  //     next(); //放行
+  //   } else {
+  //     removeImsCookie();
+  //     store.state.userInfo = null;
+  //     const mode = process.env.VUE_APP_LOGIN_MODE;
+  //     if (mode == 1) {
+  //       let base64Url = Base64.encode(process.env.VUE_APP_REDIRECT_URL);
+  //       window.location.href =
+  //         process.env.VUE_APP_UNIFIED_LOGIN + "&redirect_url=" + base64Url;
+  //     } else {
+  //       // router.push('/login');
+  //       next("/login");
+  //     }
+  //   }
+});
+
+router.afterEach((to, from, next) => {});

src/router/index.js

@@ -1606,21 +1606,9 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, from, next) => {
-  next();
-});
 // router.beforeEach((to, from, next) => {
-// 	if (to.path === '/login') {
-// 		next()
-// 	} else {
-// 		let authToken = localStorage.getItem('authToken')
-// 		console.log('authToken:', authToken)
-// 		if (authToken === null || authToken === "") {
-// 			next({ path: '/login' })
-// 		} else {
-// 			next()
-// 		}
-// 	}
-// })
+//   next();
+// });
+
 
 export default router;

src/store/modules/user.js

@@ -1,46 +1,45 @@
-// import {getToken,setToken,removeToken} from '@/utils/auth'
-// import { Message } from 'element-plus';
+import { getToken, setToken, removeToken } from "@/utills/auth";
+import { Message } from "element-plus";
+import { login } from "@/api/common";
 const state = {
-  authToken: '', //
-  username: '',
-}
+  authToken: localStorage.getItem("authToken") || "", //
+  username: localStorage.getItem("username") || "",
+  loginState: localStorage.getItem("loginState") || false,
+};
 const mutations = {
   REMOVE_TOKEN(state) {
-    localStorage.removeItem('authToken');
-    localStorage.removeItem('username');
+    localStorage.removeItem("authToken");
+    localStorage.removeItem("username");
+    localStorage.removeItem("loginState");
     state.authToken = "";
     state.username = "";
-    Message({
-      message: '退出成功',
-      type: 'success'
-    });
-    setTimeout(() => {
-      window.location.reload();
-    }, 1000);
-
+    state.loginState = false;
   },
-  SET_TOKEN: (state, token_name) => {
-    state.authToken = token_name.token;
-    state.username = token_name.username;
-    localStorage.setItem('authToken', token_name.token);
-    localStorage.setItem('username', token_name.username);
+  SET_TOKEN: (state, data) => {
+    state.authToken = data.token;
+    localStorage.setItem("authToken", data.token);
+  },
+  SET_LOGINSTATE: (state, login) => {
+    state.loginState = login;
+    localStorage.setItem("loginState", login);
   },
   SET_NAME: (state, name) => {
     state.username = name;
+    localStorage.setItem("username", name);
   },
-}
+};
 const actions = {
-  async login(context, data) {
-    const result = await login(data)
-    if (result.data.sucess) {
+  async login({ commit }, data) {
+    const result = await login(data);
+    if (result.code) {
       //调用vuex中setToken方法
-      context.commit('setToken', result.data.data)
+      commit("setToken", data);
     }
-  }
-}
+  },
+};
 export default {
   namespaced: true,
   state,
   mutations,
   actions,
-}
+};

src/tools/request.js

@@ -1,55 +1,53 @@
 import axios from "axios";
-import store from '../store/index'
-import BASE from '@tools/basicTool.js';
+import store from "../store/index";
+import BASE from "@tools/basicTool.js";
 // import { getToken } from "@/utils/storage";
 const service = axios.create();
 service.defaults.timeout = 50000;
-service.defaults.baseURL = `${process.env.VUE_APP_API}`
+service.defaults.baseURL = `${process.env.VUE_APP_API}`;
 service.interceptors.request.use(
-	config => {
-		config.headers = {
-			// Authorization: store.state.token,
-		}
-		// 统一格式包装请求参数
-		if (config.showLoading) {
-			BASE.showLoading();
-			service.defaults.showLoading = config.showLoading
-		  }
-		return config;
-	},
-	error => {
-		return Promise.reject(error);
-	}
+  (config) => {
+    config.headers = {
+      // Authorization: store.state.token,
+    };
+    // 统一格式包装请求参数
+    if (config.showLoading) {
+      BASE.showLoading();
+      service.defaults.showLoading = config.showLoading;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
 );
 
 service.interceptors.response.use(
-	// Loading.close(),
-	response => {
-		// 处理正常返回数据
-		const { status } = response;
-		if(service.defaults.showLoading){
-			BASE.closeLoading();
-			service.defaults.showLoading = false
-		}
-		if (
-			status === 200
-		) {
-			return response.data;
-		} else {
-			return false;
-		}
-	},
-	error => {
-		// 处理错误并给出相应的错误处理
-		if (error.response) {
-			console.log(error);
-			// const { status } = error.response;
-			// tips[status](error);
-			return error.response.data
-		} else {
-			return false;
-		}
-	}
+  // Loading.close(),
+  (response) => {
+    // 处理正常返回数据
+    const { status } = response;
+    if (service.defaults.showLoading) {
+      BASE.closeLoading();
+      service.defaults.showLoading = false;
+    }
+    if (status === 200) {
+      return response.data;
+    } else {
+      return false;
+    }
+  },
+  (error) => {
+    // 处理错误并给出相应的错误处理
+    if (error.response) {
+      console.log(error);
+      // const { status } = error.response;
+      // tips[status](error);
+      return error.response.data;
+    } else {
+      return false;
+    }
+  }
 );
 
-export default service;
+export default service;

src/utills/auth.js

@@ -0,0 +1,88 @@
+import Cookies from 'js-cookie'
+import dayjs from "dayjs";
+const timeKey = 'hrsaas-timestamp-key'
+// 设置时间戳的存储变量
+const TokenKey = 'iamAccessToken'
+
+export function getToken() {
+    return localStorage.getItem('authToken')
+}
+export function getCookie(name) {
+    return Cookies.get(name);
+}
+export function setCookie(name, value) {
+    return Cookies.set(name, value);
+}
+export function removeImsCookie() {
+    Cookies.remove("iamAccessToken");
+    Cookies.remove("iamCode");
+    Cookies.remove("code");
+    Cookies.remove("iam-access-token");
+}
+// 本地存储token
+export function setToken(token) {
+    return Cookies.set(TokenKey, token)
+}
+// 本地删除token
+export function removeToken() {
+    return Cookies.remove(TokenKey)
+}
+// 获取时间戳
+export function getTimeStamp() {
+    return Cookies.get(timeKey)
+}
+// 设置时间戳
+export function setTimeStamp() {
+    return Cookies.set(timeKey, Date.now())
+}
+
+// 时间格式化
+export function parseTime(){
+    var myDate = new Date()
+    const formatObj = {
+        year: myDate.getFullYear(),
+        month: (myDate.getMonth() + 1)>=10 ? (myDate.getMonth()+1): '0'+(myDate.getMonth()+1),
+        day: myDate.getDate()>=10 ? myDate.getDate() :'0'+myDate.getDate(),
+    }
+return  formatObj.year+'-'+formatObj.month+'-'+formatObj.day;
+}
+//获取1天前时间
+export function getStampTime(){
+    let stamp1 = new Date(new Date().setHours(0, 0, 0, 0));
+    stamp1= dayjs(stamp1).format("YYYY-MM-DD HH:mm:ss")
+    let stamp2 = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000);
+    stamp2= dayjs(stamp2).format("YYYY-MM-DD HH:mm:ss")
+    return {
+        startTime:stamp1,
+        endTime:stamp2
+    };
+}
+
+export function transTreeData(arr, idStr, pidStr, chindrenStr) {
+    let r = [],
+        hash = {},
+        id = idStr,
+        pid = pidStr,
+        children = chindrenStr,
+        len = arr.length;
+    for (let i = 0; i < len; i++) {
+        hash[arr[i][id]] = arr[i];
+    }
+    for (let j = 0; j < len; j++) {
+        let aVal = arr[j],
+            hashVP = hash[aVal[pid]];
+        if (hashVP) {
+            !hashVP[children] && (hashVP[children] = []);
+            hashVP[children].push(aVal);
+        } else {
+            r.push(aVal);
+        }
+    }
+    return r;
+}
+export function checkIn(item,arr){
+    const result= arr.find(value=>{
+        return value.name==item.meta.title;
+    })
+    return result;
+}

src/views/layout/Header.vue

@@ -21,29 +21,19 @@
     </ul> -->
     <ul class="header-menu-user">
       <li class="header-menu-user-title">
-        <!-- <span class="el-dropdown-link"> <i class="fa fa-user"></i>登录</span> -->
         <el-dropdown
           size="small"
-          trigger="hover"
+          trigger="click"
           :hide-on-click="true"
-          v-if="false"
+          popper-class="dropdown"
+          @command="handleCommand"
         >
           <span class="el-dropdown-link">
-            <i class="fa fa-user"></i>白玉杰
+            <i class="fa fa-user"></i>{{ userName }}
           </span>
           <template #dropdown>
-            <el-dropdown-menu :class="$store.state.themeName + ' curDropdown'">
-              <el-dropdown-item>
-                <el-switch
-                  size="small"
-                  active-color="rgb(57, 54, 143)"
-                  inactive-color="#05bb4c"
-                  active-text="亮色主题"
-                  inactive-text="暗色主题"
-                  v-model="themeName"
-                  @change="changeTheme()"
-                />
-              </el-dropdown-item>
+            <el-dropdown-menu>
+              <el-dropdown-item command="logout"> 退出登录 </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -53,7 +43,7 @@
 </template>
 <script>
 import $ from "jquery";
-// import store from '@store/index';
+import store from "@store/index";
 import tools from "../../tools/encryption.js";
 export default {
   data() {
@@ -153,6 +143,14 @@ export default {
       }
     });
   },
+  computed: {
+    userName() {
+      return this.$store.state.user?.username;
+    },
+    activeClass(data) {
+      return data.isActive ? "active" : "";
+    },
+  },
   methods: {
     click(index, data) {
       if (data.id === "zhbj") {
@@ -188,12 +186,14 @@ export default {
         : (this.themeName = true);
       localStorage.setItem("themeName", this.$store.state.themeName);
     },
-  },
-  computed: {
-    activeClass(data) {
-      return data.isActive ? "active" : "";
+    handleCommand(command) {
+      if (command == "logout") {
+        this.$store.commit("user/REMOVE_TOKEN");
+        this.$router.push("/login");
+      }
     },
   },
+
   watch: {
     $route: {
       handler: function (val, oldVal) {
@@ -216,7 +216,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .header-menu {
   display: flex;
   flex-direction: row;
@@ -358,6 +358,12 @@ export default {
 
       i {
         margin: 0 0.741vh;
+
+        font-size: 14px;
+      }
+      .el-dropdown-link {
+        color: #05bb4c;
+        font-size: 14px;
       }
     }
   }
@@ -367,4 +373,16 @@ export default {
   align-items: center;
   color: #7a8385;
 }
+.dropdown {
+  .el-dropdown-menu {
+    background: #111d1c;
+    border-radius: 3px;
+    .el-dropdown-menu__item {
+      color: #dfeef1;
+      &:hover {
+        color: #05bb4c;
+      }
+    }
+  }
+}
 </style>

src/views/layout/login-page.vue

@@ -1,153 +1,263 @@
 <template>
   <div class="login-panel">
-     <!-- <el-image
-      style="width: 100px; height: 100px"
-      :src="url"
-      :fit="fit"
-    ></el-image> -->
-    <!-- <img src="../../assets/sislogo.png" /> -->
-    <el-form class="mg-b-16">
-      <el-form-item class="mg-b-8">
-        <el-input v-model="username" placeholder="请输入登录名"></el-input>
+    <div class="login-title">
+      <p>
+        <img
+          src="@/assets/imgs/login-icon.png"
+          alt=""
+          class="login-img"
+        />发电场站
+      </p>
+      <div class="login-name">生产实时运营管理平台</div>
+    </div>
+    <el-form
+      ref="loginRef"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          size="large"
+          placeholder="请输入账号"
+        >
+          <template #prefix>
+            <i class="svg-icon svg-icon-white">
+              <SvgIcon svgid="svg-user"></SvgIcon>
+            </i>
+          </template>
+        </el-input>
       </el-form-item>
-      <el-form-item class="mg-b-8">
+      <el-form-item prop="password">
         <el-input
-          v-model="password"
+          v-model="loginForm.password"
           placeholder="请输入密码"
           show-password
-        ></el-input>
+          @keyup.enter="Login"
+        >
+          <template #prefix>
+            <el-icon size="20"><Lock /></el-icon>
+          </template>
+        </el-input>
       </el-form-item>
     </el-form>
-    <button style="width:100%;" class="btn" @click="Login">登录</button>
-     <!-- <button style="width:30%;float:right" class="btn" @click="Login">登录</button> -->
+    <div class="hintText">
+      <el-checkbox v-model="loginForm.rememberMe" @change="updateRemember"
+        >记住用户名
+      </el-checkbox>
+    </div>
+    <el-button :loading="loading" class="login-btn" @click.enter="Login">
+      <span v-if="!loading">登 录</span>
+      <span v-else>登 录 中...</span>
+    </el-button>
   </div>
 </template>
 <script>
+import { login } from "@/api/common.js";
+import Cookies from "js-cookie";
+import { Base64 } from "js-base64";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
   data() {
     return {
-      username: "",
-      password: "",
-      token: "",
-      url:"../../assets/sislogo.png",
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+      },
+      redirectUrl: "",
+      loading: false,
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { min: 6, max: 20, message: "长度在6到20个字符", trigger: "blur" },
+          //   {
+          //     min: 6,
+          //     max: 20,
+          //     pattern: /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}/,
+          //     message: "密码必须由数字、字母和特殊字符组成",
+          //     trigger: "blur",
+          //   },
+        ],
+      },
     };
   },
-  props: { token: "" },
   emits: {
     onLogin: null,
   },
+  components: { SvgIcon },
+  watch: {
+    $route: {
+      handler(val) {
+        console.log(val);
+        this.redirectUrl = val.query.redirect ? val.query.redirect : "/";
+      },
+      immediate: true,
+    },
+  },
   methods: {
     Login() {
       let that = this;
-      if (that.username !== "" && that.password !== "") {
-        that.API.requestData({
-          isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
-          // baseURL: "http://192.168.10.15:8082",
-          method: "POST", // 请求方式，默认为 GET ，可缺省
-          subUrl: "sys/login", // 请求接口地址，必传项
-          data: {
-            username: that.username,
-            password: that.password,
-          },
-          success(res) {
-            console.log("res:", res);
-            if (res.data.authToken && res.data.user.laborName) {
-              localStorage.setItem("authToken", res.data.authToken);
-              localStorage.setItem("username", res.data.user.laborName);
-              
-              that.BASE.showMsg({
-                msg: "登录成功",
-                type: "success",
-              });
-              that.$router.push("/"); // 跳转到首页
-            } else {
-              that.BASE.showMsg({
-                type: "error",
-                msg: "输入的账号或密码错误",
-              });
-            }
-          },
-        });
-        // that.$router.push('/monitor/home')
-        // console.log(that.username,"---",that.password)
-      } else {
-        that.BASE.showMsg({
-          type: "warning",
-          msg: "请输入完整的账号或密码",
+      that.$refs.loginRef.validate((valid) => {
+        that.loading = true;
+        if (!valid) return;
+        if (that.loginForm.rememberMe) {
+          Cookies.set("username", that.loginForm.username, { expires: 300 });
+          Cookies.set("password", Base64.encode(that.loginForm.password), {
+            expires: 300,
+          });
+          Cookies.set("rememberMe", that.loginForm.rememberMe, {
+            expires: 300,
+          });
+        } else {
+          // 否则移除
+          Cookies.remove("username");
+          Cookies.remove("password");
+          Cookies.remove("rememberMe");
+        }
+        login(this.loginForm).then((data) => {
+          if (data.code == "200") {
+            that.BASE.showMsg({
+              msg: "登录成功",
+              type: "success",
+            });
+            this.loading = false;
+            this.$store.commit("user/SET_TOKEN", data);
+            this.$emit("onLogin", {
+              token: data.token,
+              username: that.loginForm.username,
+            });
+            that.$router.push(this.redirectUrl); // 跳转到首页
+          }
         });
+      });
+    },
+    updateRemember(v) {
+      Cookies.set("rememberMe", v);
+    },
+    getRememberInfo() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Boolean(Cookies.get("rememberMe"));
+      if (rememberMe) {
+        this.loginForm.username =
+          username === undefined ? this.loginForm.username : username;
+        if (password) {
+          this.loginForm.password = Base64.decode(password);
+        }
+        this.loginForm.rememberMe =
+          rememberMe === undefined ? false : rememberMe;
       }
-
-      //       localStorage.setItem("token",'2222')
-      //           that.token=localStorage.getItem('token')
-      // console.log("token:",that.token)
-      // that.$emit("onLogin", {
-      //   username: that.username,
-      //   password: that.password,
-      //   token:that.token
-      // });
-
-      // console.log("token:",that.token)
-      // that.$router.push('/')
     },
   },
   created() {
-    // console.log("username:", that.username, "----", "password:", that.password);
-    //  that.$nextTick(() => {
-    //   that.API.requestData({
-    //     isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
-    //     baseURL:"http://192.168.10.44:8082",
-    //     method: "POST", // 请求方式，默认为 GET ，可缺省
-    //     subUrl: "admin/loginvue", // 请求接口地址，必传项
-    //     data: {
-    //       username: that.username,
-    //       password: that.password,
-    //     },
-    //     success(res) {
-    //       localStorage.setItem("authToken", res.data.authToken);
-    //       localStorage.setItem("username", res.data.user.laborName);
-
-    //       // that.API.requestData({
-    //       //   method: "POST", // 请求方式，默认为 GET ，可缺省
-    //       //   subUrl: "admin/usermenu", // 请求接口地址，必传项
-    //       //   success() {
-    //       //     that.BASE.showMsg({
-    //       //       msg: "登陆成功",
-    //       //       type: "success",
-    //       //     });
-    //       //     that.$router.push('/'); // 跳转到首页
-    //       //   },
-    //       // });
-    //     },
-    //   });
-    // });
+    this.getRememberInfo();
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .login-panel {
-  // width: 300px;
-  // height: 200px;
-  // position: absolute;
-  // padding: 32px;
-  // left: calc(50vw - 150px);
-  // top: calc(50vh - 120px);
-  // // border: 1px solid @green;
-  // border:2px solid #fff;
-  // border-radius: 8px;
-  // background-image: url('../../assets/login.jpg')
+  position: absolute;
+  width: 470px;
+  height: 636px;
+  background: rgba(0, 0, 0, 0.4);
+  right: 10%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 90px;
+}
+.login-title {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  font-size: 30px;
+  margin-bottom: 40px;
+  p {
+    display: flex;
+    align-items: center;
+    .login-img {
+      width: 56px;
+      height: 56px;
+      margin-right: 5px;
+    }
+  }
+}
+.login-btn ::v-deep {
+  background: url("~@/assets/imgs/login-btn.png") no-repeat;
+  background-size: cover;
+  width: 385px;
+  height: 56px;
+  border-radius: 5px;
+  border-width: 0;
+  color: #fff;
+  font-size: 16px;
+  margin-top: 66px;
+  cursor: pointer;
+  &:hover,
+  &:focus {
+    color: #fff;
+    background-color: transparent;
+    border-width: 0;
+  }
+}
+
+.login-form ::v-deep {
+  .el-form-item {
+    width: 383px;
+    margin-bottom: 22px;
+    .el-form-item__content {
+      .el-input {
+        .el-input__inner {
+          height: 50px;
+          line-height: 50px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #fff;
+          background: #1b1a1f;
+          border-width: 0;
+          font-size: 16px;
+          padding-left: 35px;
+        }
+        .el-input__prefix {
+          top: 50%;
+          transform: translateY(-28%);
+        }
+      }
+    }
+  }
+}
 
-  width: 700px;
-    height: 300px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -350px;
-    margin-top: -150px;
-    border-radius: 10px;
-    border: 1px solid #ccc;
-  .btn{
-        border: 1px solid #fff;
+/**改变input里的字体颜色*/
+/deep/ input::-webkit-input-placeholder {
+  color: #777777;
+  font-size: 16px;
+}
+::v-deep .el-input__inner:-webkit-autofill {
+  transition: background-color 50000s ease-in-out 0s;
+  -webkit-text-fill-color: #fff; //记住密码的颜色
+  caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
+}
+::v-deep.hintText {
+  display: flex;
+  width: 383px;
+  padding-top: 5px;
+  padding-left: 18px;
+  .el-checkbox {
+    .el-checkbox__inner {
+      background: #fff;
+      border-color: #fff;
+    }
+    .el-checkbox__label {
+      font-size: 14px;
+      color: #777;
+    }
   }
 }
 </style>