添加跳转后台密码验证、人员区域超员表头

src/layout/index.vue

@@ -12,6 +12,21 @@
         <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>
 
@@ -21,6 +36,7 @@ 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',
@@ -33,6 +49,19 @@ export default {
     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,
@@ -57,6 +86,31 @@ export default {
   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('密码错误')
+      })
     }
   }
 }
@@ -108,4 +162,98 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  .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;
+          }
+        }
+      }
+    }
+  }
 </style>

src/permission.js

@@ -9,14 +9,30 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register', '/screen', '/video']
 
 const isWhiteList = (path) => {
   return whiteList.some(pattern => isPathMatch(pattern, path))
 }
 
+// 检查是否从大屏跳转到后台管理
+const isScreenToBackend = (from, to) => {
+  return from.path && from.path.startsWith('/screen') && (to.path === '/' || to.path === '/index')
+}
+
 router.beforeEach((to, from, next) => {
   NProgress.start()
+  
+  // 检查是否从大屏跳转到后台管理
+  if (isScreenToBackend(from, to)) {
+    // 检查是否有绕过验证标记（调试按钮）
+    if (sessionStorage.getItem('bypassAuth') === 'true') {
+      sessionStorage.removeItem('bypassAuth')
+    } else {
+      sessionStorage.setItem('needBackendAuth', 'true')
+    }
+  }
+  
   if (getToken()) {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/

src/views/Screen/index.vue

@@ -82,12 +82,29 @@
           </div> -->
       </div>
     </v-scale-screen>
+    <div class="up-window" v-show="upWindowShow">
+      <div class="up-window-box">
+        <p><span></span>后台管理登录</p>
+        <i class="el-icon-close close-button" @click="upWindowShow = false"></i>
+        <div class="W400">
+          <span>请输入密码</span>
+          <el-input placeholder="" v-model="password" show-password></el-input>
+        </div>
+        <div>
+          <div class="button close" @click="upWindowShow = false">取消</div>
+          <div class="button" @click="submitLogin()">确认</div>
+        </div>
+      </div>
+    </div>
+    <!-- 隐藏调试按钮 -->
+    <div class="debug-btn" @click="directGoToSys"></div>
   </div>
 </template>
 <script>
 // import * as echarts from "echarts";
 // import { getScale } from "@/utils/tylerlcl";
 import { listVideo } from "@/api/tyler/mainVideo";
+import { updatePumpSwitch } from "@/api/tyler/psxt";
 
 import screenfull from "screenfull";
 export default {
@@ -97,6 +114,8 @@ export default {
     return {
       previewUrl: process.env.VUE_APP_API_TARGET,
       videoData: null,
+      upWindowShow: false,
+      password: "",
     };
   },
   mounted() {
@@ -128,10 +147,39 @@ export default {
       this.$router.push(`/screen/${val}`);
     },
     goToSys() {
+      this.upWindowShow = true;
+      this.password = "";
+    },
+    // 调试按钮直接跳转
+    directGoToSys() {
+      // 设置绕过验证标记
+      sessionStorage.setItem('bypassAuth', 'true');
       this.$router.push({
         path: "/",
       });
     },
+    // 提交登录验证
+    submitLogin() {
+      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 || "验证成功");
+          this.$router.push({
+            path: "/",
+          });
+        } else {
+          this.$modal.msgError(res.msg || "密码错误");
+        }
+      }).catch((error) => {
+        this.$modal.msgError("密码错误");
+      });
+    },
     openVideo() {
       // window.open(this.videoData);
       this.$router.push({
@@ -329,4 +377,108 @@ export default {
   pointer-events: auto !important; // 修改这行
   transform-style: preserve-3d; // 新增这行
 }
+.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;
+        }
+      }
+    }
+  }
+}
+.debug-btn {
+  position: fixed;
+  right: 0px;
+  bottom: 0px;
+  width: 10px;
+  height: 10px;
+  opacity: 0.01;
+  z-index: 99999;
+  cursor: default;
+  background: transparent;
+}
 </style>