Skip to content

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

密码验证

parent deb3be21
Show 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) { ...@@ -116,3 +116,11 @@ export function welcomeEdit(query) {
data: 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> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> <sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{'fixed-header':fixedHeader}"> <div :class="{ 'fixed-header': fixedHeader }">
<navbar/> <navbar />
<tags-view v-if="needTagsView"/> <tags-view v-if="needTagsView" />
</div> </div>
<app-main/> <app-main />
<right-panel> <right-panel>
<settings/> <settings />
</right-panel> </right-panel>
</div> </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> </div>
</template> </template>
...@@ -36,7 +21,6 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' ...@@ -36,7 +21,6 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
import { updatePumpSwitch } from '@/api/tyler/psxt'
export default { export default {
name: 'Layout', name: 'Layout',
...@@ -46,22 +30,9 @@ export default { ...@@ -46,22 +30,9 @@ export default {
RightPanel, RightPanel,
Settings, Settings,
Sidebar, Sidebar,
TagsView TagsView,
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
data() {
return {
upWindowShow: false,
password: ''
}
},
mounted() {
// 检查是否需要后台管理密码验证
if (sessionStorage.getItem('needBackendAuth') === 'true') {
this.upWindowShow = true
this.password = ''
}
},
computed: { computed: {
...mapState({ ...mapState({
theme: state => state.settings.theme, theme: state => state.settings.theme,
...@@ -69,58 +40,33 @@ export default { ...@@ -69,58 +40,33 @@ export default {
sidebar: state => state.app.sidebar, sidebar: state => state.app.sidebar,
device: state => state.app.device, device: state => state.app.device,
needTagsView: state => state.settings.tagsView, needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader fixedHeader: state => state.settings.fixedHeader,
}), }),
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened, openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile' mobile: this.device === 'mobile',
} }
}, },
variables() { variables() {
return variables; return variables
} },
}, },
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss"; @import '~@/assets/styles/mixin.scss';
@import "~@/assets/styles/variables.scss"; @import '~@/assets/styles/variables.scss';
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
height: 100%; height: 100%;
...@@ -130,9 +76,9 @@ export default { ...@@ -130,9 +76,9 @@ export default {
position: fixed; position: fixed;
top: 0; top: 0;
} }
} }
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;
width: 100%; width: 100%;
...@@ -140,120 +86,26 @@ export default { ...@@ -140,120 +86,26 @@ export default {
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.fixed-header { .fixed-header {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$base-sidebar-width}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
} }
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header { .sidebarHide .fixed-header {
width: 100%; width: 100%;
} }
.up-window { .mobile .fixed-header {
width: 100%; 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> </style>
src/views/Screen/index.vue
View file @ 4bc85e67
<template> <template>
<div> <div>
<v-scale-screen <v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
ref="scale-screen"
width="1920"
height="1080"
:fullScreen="true"
>
<keep-alive> <keep-alive>
<router-view <router-view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" />
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
/>
</keep-alive> </keep-alive>
<div class="container" style="pointer-events: none"> <div class="container" style="pointer-events: none">
<!-- 头部 --> <!-- 头部 -->
<div class="header por" style="pointer-events: auto"></div> <div class="header por" style="pointer-events: auto"></div>
<div class="sub-header" style="pointer-events: auto"> <div class="sub-header" style="pointer-events: auto">
<div class="sub-header-left"> <div class="sub-header-left">
<div <div class="sub-item" :class="showMenu == 1 ? 'active' : ''" key="rydw" @click="changeMenu('rydw')">
class="sub-item"
:class="showMenu == 1 ? 'active' : ''"
key="rydw"
@click="changeMenu('rydw')"
>
<p>人员定位</p> <p>人员定位</p>
</div> </div>
<div <div class="sub-item" @click="changeMenu('hjjc')" key="hjjc" :class="showMenu == 2 ? 'active' : ''">
class="sub-item"
@click="changeMenu('hjjc')"
key="hjjc"
:class="showMenu == 2 ? 'active' : ''"
>
<p>监测监控</p> <p>监测监控</p>
</div> </div>
<div <div class="sub-item" @click="changeMenu('psxt')" key="psxt" :class="showMenu == 3 ? 'active' : ''">
class="sub-item"
@click="changeMenu('psxt')"
key="psxt"
:class="showMenu == 3 ? 'active' : ''"
>
<p>排水系统</p> <p>排水系统</p>
</div> </div>
</div> </div>
...@@ -50,28 +28,13 @@ ...@@ -50,28 +28,13 @@
</div> </div>
</div> </div>
<div class="sub-header-right"> <div class="sub-header-right">
<div <div class="sub-item" :class="showMenu == 4 ? 'active' : ''" key="tsj" @click="changeMenu('tsj')">
class="sub-item"
:class="showMenu == 4 ? 'active' : ''"
key="tsj"
@click="changeMenu('tsj')"
>
<p>提升机系统</p> <p>提升机系统</p>
</div> </div>
<div <div class="sub-item" :class="showMenu == 5 ? 'active' : ''" key="tfxt" @click="changeMenu('tfxt')">
class="sub-item"
:class="showMenu == 5 ? 'active' : ''"
key="tfxt"
@click="changeMenu('tfxt')"
>
<p>通风系统</p> <p>通风系统</p>
</div> </div>
<div <div class="sub-item" :class="showMenu == 6 ? 'active' : ''" key="dlxt" @click="changeMenu('dlxt')">
class="sub-item"
:class="showMenu == 6 ? 'active' : ''"
key="dlxt"
@click="changeMenu('dlxt')"
>
<p>电力系统</p> <p>电力系统</p>
</div> </div>
</div> </div>
...@@ -88,7 +51,7 @@ ...@@ -88,7 +51,7 @@
<i class="el-icon-close close-button" @click="upWindowShow = false"></i> <i class="el-icon-close close-button" @click="upWindowShow = false"></i>
<div class="W400"> <div class="W400">
<span>请输入密码</span> <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> <div>
<div class="button close" @click="upWindowShow = false">取消</div> <div class="button close" @click="upWindowShow = false">取消</div>
...@@ -103,35 +66,35 @@ ...@@ -103,35 +66,35 @@
<script> <script>
// import * as echarts from "echarts"; // import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl"; // import { getScale } from "@/utils/tylerlcl";
import { listVideo } from "@/api/tyler/mainVideo"; import { listVideo } from '@/api/tyler/mainVideo'
import { updatePumpSwitch } from "@/api/tyler/psxt"; import { loginPasswordVerify } from '@/api/tyler/screen'
import screenfull from "screenfull"; import screenfull from 'screenfull'
export default { export default {
name: "cockpit", name: 'cockpit',
components: {}, components: {},
data() { data() {
return { return {
previewUrl: process.env.VUE_APP_API_TARGET, previewUrl: process.env.VUE_APP_API_TARGET,
videoData: null, videoData: null,
upWindowShow: false, upWindowShow: false,
password: "", password: '',
}; }
}, },
mounted() { mounted() {
this.getVideo(); this.getVideo()
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) { if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request(); screenfull.request()
} }
// this.areaCharts(); // this.areaCharts();
// this.alarm30(); // this.alarm30();
}, },
methods: { methods: {
getVideo() { getVideo() {
this.videoData = null; this.videoData = null
listVideo().then((res) => { listVideo().then(res => {
this.videoData = this.previewUrl + res.data; this.videoData = this.previewUrl + res.data
}); })
}, },
changeMenu(val) { changeMenu(val) {
const routeMap = { const routeMap = {
...@@ -143,58 +106,61 @@ export default { ...@@ -143,58 +106,61 @@ export default {
tfxt: 5, tfxt: 5,
dlxt: 6, dlxt: 6,
tjfx: 7, tjfx: 7,
}; }
this.$router.push(`/screen/${val}`); this.$router.push(`/screen/${val}`)
}, },
goToSys() { goToSys() {
this.upWindowShow = true; this.upWindowShow = true
this.password = ""; this.password = ''
}, },
// 调试按钮直接跳转 // 调试按钮直接跳转
directGoToSys() { directGoToSys() {
// 设置绕过验证标记 // 设置绕过验证标记
sessionStorage.setItem('bypassAuth', 'true'); sessionStorage.setItem('bypassAuth', 'true')
this.$router.push({ this.$router.push({
path: "/", path: '/',
}); })
}, },
// 提交登录验证 // 提交登录验证
submitLogin() { submitLogin() {
if (!this.password) { if (!this.password) {
return this.$modal.msgError("请输入密码"); return this.$modal.msgError('请输入密码')
} }
updatePumpSwitch({ password: this.password }).then((res) => { loginPasswordVerify({ password: this.password })
.then(res => {
if (res.code === 200) { if (res.code === 200) {
this.upWindowShow = false; this.upWindowShow = false
this.password = ""; this.password = ''
// 清除验证标记，避免进入后台后再次弹窗 // 设置已验证标记，避免进入后台后再次弹窗
sessionStorage.removeItem('needBackendAuth'); sessionStorage.setItem('screenAuthPassed', 'true')
this.$modal.msgSuccess(res.msg || "验证成功"); sessionStorage.removeItem('needBackendAuth')
this.$modal.msgSuccess(res.msg || '验证成功')
this.$router.push({ this.$router.push({
path: "/", path: '/',
}); })
} else { } else {
this.$modal.msgError(res.msg || "密码错误"); this.$modal.msgError(res.msg || '密码错误')
} }
}).catch((error) => { })
this.$modal.msgError("密码错误"); .catch(error => {
}); this.$modal.msgError('密码错误')
})
}, },
openVideo() { openVideo() {
// window.open(this.videoData); // window.open(this.videoData);
this.$router.push({ this.$router.push({
path: "/video", path: '/video',
query: { query: {
videoUrl: this.videoData, videoUrl: this.videoData,
}, },
}); })
return; return
}, },
}, },
computed: { computed: {
currentRouteName() { currentRouteName() {
const path = this.$route.path; const path = this.$route.path
return path.split("/").pop(); // 获取路由最后一级 return path.split('/').pop() // 获取路由最后一级
}, },
showMenu() { showMenu() {
const routeMap = { const routeMap = {
...@@ -206,21 +172,21 @@ export default { ...@@ -206,21 +172,21 @@ export default {
tfxt: 5, tfxt: 5,
dlxt: 6, dlxt: 6,
tjfx: 7, tjfx: 7,
}; }
return routeMap[this.currentRouteName] || 0; return routeMap[this.currentRouteName] || 0
}, },
}, },
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 标题 */ /* 标题 */
@font-face { @font-face {
font-family: "ysbth"; font-family: 'ysbth';
src: url("~@/assets/font/syhtCN-Medium.ttf") format("truetype"); src: url('~@/assets/font/syhtCN-Medium.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: "number"; font-family: 'number';
src: url("~@/assets/font/DS-Digital.ttf") format("truetype"); src: url('~@/assets/font/DS-Digital.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
...@@ -231,13 +197,13 @@ export default { ...@@ -231,13 +197,13 @@ export default {
position: absolute; position: absolute;
} }
.psxt-bg { .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 { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("~@/assets/images/screen/bg.png"); background: url('~@/assets/images/screen/bg.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -246,7 +212,7 @@ export default { ...@@ -246,7 +212,7 @@ export default {
padding: 0 20px; padding: 0 20px;
// background-color: #08152a; // background-color: #08152a;
position: relative; position: relative;
font-family: "fangsong"; font-family: 'fangsong';
color: #fff; color: #fff;
} }
/* 头部标题 */ /* 头部标题 */
...@@ -278,14 +244,14 @@ export default { ...@@ -278,14 +244,14 @@ export default {
.sub-item { .sub-item {
width: 134px; width: 134px;
height: auto; 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%; background-size: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&.active { &.active {
background: url("~@/assets/images/screen/click.png") no-repeat center; background: url('~@/assets/images/screen/click.png') no-repeat center;
background-size: 100%; background-size: 100%;
} }
p { p {
...@@ -294,12 +260,7 @@ export default { ...@@ -294,12 +260,7 @@ export default {
font-size: 19px; font-size: 19px;
color: #ffffff; color: #ffffff;
line-height: 55px; line-height: 55px;
background: linear-gradient( background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 39.7216796875%, #03a9ff 100%);
180deg,
#ffffff 0%,
#f3f7fa 39.7216796875%,
#03a9ff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
padding-bottom: 4px; padding-bottom: 4px;
...@@ -315,7 +276,7 @@ export default { ...@@ -315,7 +276,7 @@ export default {
.top-change { .top-change {
width: 425px; width: 425px;
height: 44px; 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; margin: 20px auto 0;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
...@@ -329,44 +290,44 @@ export default { ...@@ -329,44 +290,44 @@ export default {
position: relative; position: relative;
} }
span:nth-child(1)::after { span:nth-child(1)::after {
content: ""; content: '';
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; 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%; background-size: 100%;
left: -4px; left: -4px;
top: 0px; top: 0px;
z-index: 20; z-index: 20;
} }
span:nth-child(2)::after { span:nth-child(2)::after {
content: ""; content: '';
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; 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%; background-size: 100%;
left: -4px; left: -4px;
top: 2px; top: 2px;
z-index: 20; z-index: 20;
} }
span:nth-child(3)::after { span:nth-child(3)::after {
content: ""; content: '';
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; 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%; background-size: 100%;
left: -4px; left: -4px;
top: 0px; top: 0px;
z-index: 20; z-index: 20;
} }
span:nth-child(4)::after { span:nth-child(4)::after {
content: ""; content: '';
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; 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%; background-size: 100%;
left: -4px; left: -4px;
top: 0px; top: 0px;
...@@ -402,7 +363,7 @@ export default { ...@@ -402,7 +363,7 @@ export default {
width: 500px; width: 500px;
height: 37px; height: 37px;
margin: 0px; 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%; background-size: 100%;
font-weight: 500; font-weight: 500;
font-size: 22px; 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