Skip to content

Y
yindong-tongbai-automation
Commit deb3be21 authored by sxl's avatar sxl 💬
Browse files
Options

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

parent 06c531f9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 635 additions and 324 deletions
src/layout/index.vue
View file @ deb3be21
......@@ -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
View file @ deb3be21
......@@ -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
View file @ deb3be21
......@@ -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>
src/views/personPos/perReal/sec.vue
View file @ deb3be21
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment