Skip to content

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

密码验证

parent deb3be21
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 314 deletions
src/api/tyler/screen.js
View file @ 4bc85e67
......@@ -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
View file @ 4bc85e67
<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>
src/views/Screen/index.vue
View file @ 4bc85e67
<template>
<div>
<v-scale-screen
ref="scale-screen"
width="1920"
height="1080"
:fullScreen="true"
>
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
<keep-alive>
<router-view
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
/>
<router-view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" />
</keep-alive>
<div class="container" style="pointer-events: none">
<!-- 头部 -->
<div class="header por" style="pointer-events: auto"></div>
<div class="sub-header" style="pointer-events: auto">
<div class="sub-header-left">
<div
class="sub-item"
:class="showMenu == 1 ? 'active' : ''"
key="rydw"
@click="changeMenu('rydw')"
>
<div class="sub-item" :class="showMenu == 1 ? 'active' : ''" key="rydw" @click="changeMenu('rydw')">
<p>人员定位</p>
</div>
<div
class="sub-item"
@click="changeMenu('hjjc')"
key="hjjc"
:class="showMenu == 2 ? 'active' : ''"
>
<div class="sub-item" @click="changeMenu('hjjc')" key="hjjc" :class="showMenu == 2 ? 'active' : ''">
<p>监测监控</p>
</div>
<div
class="sub-item"
@click="changeMenu('psxt')"
key="psxt"
:class="showMenu == 3 ? 'active' : ''"
>
<div class="sub-item" @click="changeMenu('psxt')" key="psxt" :class="showMenu == 3 ? 'active' : ''">
<p>排水系统</p>
</div>
</div>
......@@ -50,28 +28,13 @@
</div>
</div>
<div class="sub-header-right">
<div
class="sub-item"
:class="showMenu == 4 ? 'active' : ''"
key="tsj"
@click="changeMenu('tsj')"
>
<div class="sub-item" :class="showMenu == 4 ? 'active' : ''" key="tsj" @click="changeMenu('tsj')">
<p>提升机系统</p>
</div>
<div
class="sub-item"
:class="showMenu == 5 ? 'active' : ''"
key="tfxt"
@click="changeMenu('tfxt')"
>
<div class="sub-item" :class="showMenu == 5 ? 'active' : ''" key="tfxt" @click="changeMenu('tfxt')">
<p>通风系统</p>
</div>
<div
class="sub-item"
:class="showMenu == 6 ? 'active' : ''"
key="dlxt"
@click="changeMenu('dlxt')"
>
<div class="sub-item" :class="showMenu == 6 ? 'active' : ''" key="dlxt" @click="changeMenu('dlxt')">
<p>电力系统</p>
</div>
</div>
......@@ -88,7 +51,7 @@
<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>
<el-input placeholder="" v-model="password" show-password @keyup.enter.native="submitLogin"></el-input>
</div>
<div>
<div class="button close" @click="upWindowShow = false">取消</div>
......@@ -103,35 +66,35 @@
<script>
// import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl";
import { listVideo } from "@/api/tyler/mainVideo";
import { updatePumpSwitch } from "@/api/tyler/psxt";
import { listVideo } from '@/api/tyler/mainVideo'
import { loginPasswordVerify } from '@/api/tyler/screen'
import screenfull from "screenfull";
import screenfull from 'screenfull'
export default {
name: "cockpit",
name: 'cockpit',
components: {},
data() {
return {
previewUrl: process.env.VUE_APP_API_TARGET,
videoData: null,
upWindowShow: false,
password: "",
};
password: '',
}
},
mounted() {
this.getVideo();
this.getVideo()
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request();
screenfull.request()
}
// this.areaCharts();
// this.alarm30();
},
methods: {
getVideo() {
this.videoData = null;
listVideo().then((res) => {
this.videoData = this.previewUrl + res.data;
});
this.videoData = null
listVideo().then(res => {
this.videoData = this.previewUrl + res.data
})
},
changeMenu(val) {
const routeMap = {
......@@ -143,58 +106,61 @@ export default {
tfxt: 5,
dlxt: 6,
tjfx: 7,
};
this.$router.push(`/screen/${val}`);
}
this.$router.push(`/screen/${val}`)
},
goToSys() {
this.upWindowShow = true;
this.password = "";
this.upWindowShow = true
this.password = ''
},
// 调试按钮直接跳转
directGoToSys() {
// 设置绕过验证标记
sessionStorage.setItem('bypassAuth', 'true');
sessionStorage.setItem('bypassAuth', 'true')
this.$router.push({
path: "/",
});
path: '/',
})
},
// 提交登录验证
submitLogin() {
if (!this.password) {
return this.$modal.msgError("请输入密码");
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("密码错误");
});
loginPasswordVerify({ password: this.password })
.then(res => {
if (res.code === 200) {
this.upWindowShow = false
this.password = ''
// 设置已验证标记，避免进入后台后再次弹窗
sessionStorage.setItem('screenAuthPassed', 'true')
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({
path: "/video",
path: '/video',
query: {
videoUrl: this.videoData,
},
});
return;
})
return
},
},
computed: {
currentRouteName() {
const path = this.$route.path;
return path.split("/").pop(); // 获取路由最后一级
const path = this.$route.path
return path.split('/').pop() // 获取路由最后一级
},
showMenu() {
const routeMap = {
......@@ -206,21 +172,21 @@ export default {
tfxt: 5,
dlxt: 6,
tjfx: 7,
};
return routeMap[this.currentRouteName] || 0;
}
return routeMap[this.currentRouteName] || 0
},
},
};
}
</script>
<style lang="scss" scoped>
/* 标题 */
@font-face {
font-family: "ysbth";
src: url("~@/assets/font/syhtCN-Medium.ttf") format("truetype");
font-family: 'ysbth';
src: url('~@/assets/font/syhtCN-Medium.ttf') format('truetype');
}
@font-face {
font-family: "number";
src: url("~@/assets/font/DS-Digital.ttf") format("truetype");
font-family: 'number';
src: url('~@/assets/font/DS-Digital.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
......@@ -231,13 +197,13 @@ export default {
position: absolute;
}
.psxt-bg {
background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
background: url('~@/assets/images/screen/psxt/bg.png') no-repeat center;
}
/* 基础容器 */
.container {
width: 100%;
height: 100%;
background: url("~@/assets/images/screen/bg.png");
background: url('~@/assets/images/screen/bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
......@@ -246,7 +212,7 @@ export default {
padding: 0 20px;
// background-color: #08152a;
position: relative;
font-family: "fangsong";
font-family: 'fangsong';
color: #fff;
}
/* 头部标题 */
......@@ -278,14 +244,14 @@ export default {
.sub-item {
width: 134px;
height: auto;
background: url("~@/assets/images/screen/normal.png") no-repeat center;
background: url('~@/assets/images/screen/normal.png') no-repeat center;
background-size: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&.active {
background: url("~@/assets/images/screen/click.png") no-repeat center;
background: url('~@/assets/images/screen/click.png') no-repeat center;
background-size: 100%;
}
p {
......@@ -294,12 +260,7 @@ export default {
font-size: 19px;
color: #ffffff;
line-height: 55px;
background: linear-gradient(
180deg,
#ffffff 0%,
#f3f7fa 39.7216796875%,
#03a9ff 100%
);
background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 39.7216796875%, #03a9ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-bottom: 4px;
......@@ -315,7 +276,7 @@ export default {
.top-change {
width: 425px;
height: 44px;
background: url("~@/assets/images/screen/top_bg.png") no-repeat center;
background: url('~@/assets/images/screen/top_bg.png') no-repeat center;
margin: 20px auto 0;
display: flex;
justify-content: space-evenly;
......@@ -329,44 +290,44 @@ export default {
position: relative;
}
span:nth-child(1)::after {
content: "";
content: '';
width: 17px;
height: 17px;
position: absolute;
background: url("~@/assets/images/bigscreen/icon1.png") no-repeat center;
background: url('~@/assets/images/bigscreen/icon1.png') no-repeat center;
background-size: 100%;
left: -4px;
top: 0px;
z-index: 20;
}
span:nth-child(2)::after {
content: "";
content: '';
width: 17px;
height: 17px;
position: absolute;
background: url("~@/assets/images/bigscreen/icon2.png") no-repeat center;
background: url('~@/assets/images/bigscreen/icon2.png') no-repeat center;
background-size: 100%;
left: -4px;
top: 2px;
z-index: 20;
}
span:nth-child(3)::after {
content: "";
content: '';
width: 17px;
height: 17px;
position: absolute;
background: url("~@/assets/images/bigscreen/icon3.png") no-repeat center;
background: url('~@/assets/images/bigscreen/icon3.png') no-repeat center;
background-size: 100%;
left: -4px;
top: 0px;
z-index: 20;
}
span:nth-child(4)::after {
content: "";
content: '';
width: 17px;
height: 17px;
position: absolute;
background: url("~@/assets/images/bigscreen/icon4.png") no-repeat center;
background: url('~@/assets/images/bigscreen/icon4.png') no-repeat center;
background-size: 100%;
left: -4px;
top: 0px;
......@@ -402,7 +363,7 @@ export default {
width: 500px;
height: 37px;
margin: 0px;
background: url("~@/assets/images/screen/psxt/title.png") no-repeat center;
background: url('~@/assets/images/screen/psxt/title.png') no-repeat center;
background-size: 100%;
font-weight: 500;
font-size: 22px;
......
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