密码验证

src/api/tyler/screen.js

@@ -116,3 +116,11 @@ export function welcomeEdit(query) {
     data: query,
   });
 }
+//登陆后台密码验证
+export function loginPasswordVerify(query) {
+  return request({
+    url: "/business/screen/dra/checkPassword",
+    method: "post",
+    data: query,
+  });
+}

src/layout/index.vue

 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar/>
-        <tags-view v-if="needTagsView"/>
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar />
+        <tags-view v-if="needTagsView" />
       </div>
-      <app-main/>
+      <app-main />
       <right-panel>
-        <settings/>
+        <settings />
       </right-panel>
     </div>
-    <!-- 后台管理密码验证弹窗 -->
-    <div class="up-window" v-show="upWindowShow">
-      <div class="up-window-box">
-        <p><span></span>后台管理登录</p>
-        <i class="el-icon-close close-button" @click="cancelAuth"></i>
-        <div class="W400">
-          <span>请输入密码</span>
-          <el-input placeholder="" v-model="password" show-password @keyup.enter.native="submitAuth"></el-input>
-        </div>
-        <div>
-          <div class="button close" @click="cancelAuth">取消</div>
-          <div class="button" @click="submitAuth">确认</div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -36,7 +21,6 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
-import { updatePumpSwitch } from '@/api/tyler/psxt'
 
 export default {
   name: 'Layout',
@@ -46,22 +30,9 @@ export default {
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
-  data() {
-    return {
-      upWindowShow: false,
-      password: ''
-    }
-  },
-  mounted() {
-    // 检查是否需要后台管理密码验证
-    if (sessionStorage.getItem('needBackendAuth') === 'true') {
-      this.upWindowShow = true
-      this.password = ''
-    }
-  },
   computed: {
     ...mapState({
       theme: state => state.settings.theme,
@@ -69,191 +40,72 @@ export default {
       sidebar: state => state.app.sidebar,
       device: state => state.app.device,
       needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      fixedHeader: state => state.settings.fixedHeader,
     }),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
+        mobile: this.device === 'mobile',
       }
     },
     variables() {
-      return variables;
-    }
+      return variables
+    },
   },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     },
-    // 取消验证，返回大屏
-    cancelAuth() {
-      this.upWindowShow = false
-      this.password = ''
-      sessionStorage.removeItem('needBackendAuth')
-      this.$router.push('/screen/home')
-    },
-    // 提交密码验证
-    submitAuth() {
-      if (!this.password) {
-        return this.$modal.msgError('请输入密码')
-      }
-      updatePumpSwitch({ password: this.password }).then((res) => {
-        if (res.code === 200) {
-          this.upWindowShow = false
-          this.password = ''
-          sessionStorage.removeItem('needBackendAuth')
-          this.$modal.msgSuccess(res.msg || '验证成功')
-        } else {
-          this.$modal.msgError(res.msg || '密码错误')
-        }
-      }).catch((error) => {
-        this.$modal.msgError('密码错误')
-      })
-    }
-  }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
-
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
+@import '~@/assets/styles/mixin.scss';
+@import '~@/assets/styles/variables.scss';
 
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
 
-  .up-window {
-    width: 100%;
-    height: 100%;
-    background: RGBA(4, 21, 42, 0.6);
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    .up-window-box {
-      width: 588px;
-      height: 350px;
-      background: linear-gradient(0deg, #062451 0%, #09162d 100%);
-      box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
-      border: 2px solid #11b9ff;
-      opacity: 1;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      padding: 20px 37px 37px 27px;
-      color: #ffffff;
-      p {
-        width: 500px;
-        height: 37px;
-        margin: 0px;
-        background: url("~@/assets/images/screen/psxt/title.png") no-repeat center;
-        background-size: 100%;
-        font-weight: 500;
-        font-size: 22px;
-        color: #ffffff;
-        height: 37px;
-        background-position-y: 9px;
-        span {
-          width: 27px;
-          display: inline-block;
-        }
-      }
-      .close-button {
-        font-size: 30px;
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        cursor: pointer;
-        &:hover {
-          -webkit-transform: rotate(360deg);
-          transform: rotate(360deg);
-          -webkit-transition: -webkit-transform 1s linear;
-          transition: transform 1s linear;
-        }
-      }
-      .W400 {
-        width: 400px;
-        margin: auto;
-        ::v-deep .el-input__inner {
-          border-radius: 0px !important;
-          height: 52px;
-        }
-        span {
-          font-weight: 400;
-          font-size: 21px;
-          color: #ffffff;
-          margin-top: 60px;
-          display: inline-block;
-          margin-bottom: 15px;
-        }
-      }
-      .button {
-        width: 110px;
-        height: 42px;
-        background: #11b9ff;
-        border-radius: 4px;
-        font-weight: 400;
-        font-size: 20px;
-        color: #ffffff;
-        text-align: center;
-        line-height: 42px;
-        float: left;
-        margin-left: 100px;
-        margin-top: 55px;
-        cursor: pointer;
-        &:hover {
-          background: #66d2ff;
-        }
-        &.close {
-          background: none;
-          color: #fff;
-          &:hover {
-            color: #66d2ff;
-          }
-        }
-      }
-    }
-  }
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>