demo 代码调整
This commit is contained in:
joylink_cuiweidong
parent
816fa77d79
commit
d4a6aa1cb2
@ -7,7 +7,7 @@ import 'nprogress/nprogress.css';
|
||||
import { setToken, getToken, removeToken, getSessionStorage } from '@/utils/auth';
|
||||
import localStore from 'storejs';
|
||||
|
||||
const whiteList = ['/login', '/design/login', '/gzzbxy/relay', '/authorization', '/AUSline', '/AUStool']; // 不重定向白名单
|
||||
const whiteList = ['/login', '/design/login', '/gzzbxy/relay', '/authorization', '/AUSline', '/AUStool', '/demo']; // 不重定向白名单
|
||||
|
||||
for (const val in loginInfo) {
|
||||
if (loginInfo[val].loginPath && !whiteList.includes(loginInfo[val].loginPath)) {
|
||||
@ -67,15 +67,15 @@ router.beforeEach((to, from, next) => {
|
||||
document.title = loginInfo[project || 'login'].browserTitle || loginInfo[project || 'login'].title;
|
||||
NProgress.start();
|
||||
const loginPath = getRouteInfo(to);
|
||||
const token = to.query.token
|
||||
const token = to.query.token;
|
||||
|
||||
if (/demoTraining/.test(to.path) && token) {
|
||||
const header = { group: to.query.group, 'X-Token': token };
|
||||
setToken(token);
|
||||
store.commit('SET_TOKEN', token)
|
||||
store.commit('SUBSCRIBE', { header, type: '' });
|
||||
next();
|
||||
} else if (getToken()) {
|
||||
if (/demoTraining/.test(to.path) && token) {
|
||||
const header = { group: to.query.group, 'X-Token': token };
|
||||
setToken(token);
|
||||
store.commit('SET_TOKEN', token);
|
||||
store.commit('SUBSCRIBE', { header, type: '' });
|
||||
next();
|
||||
} else if (getToken()) {
|
||||
if (to.path === loginPath) {
|
||||
// 登录页面不拦截
|
||||
next();
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
<div class="demoPage">
|
||||
<div class="demoTop">
|
||||
<div class="demoTopTitle">教学系统</div>
|
||||
<div v-if="!userId" class="loginButton" @click="demoLogin">登录</div>
|
||||
<div v-else class="loginButton">{{ nickName }}</div>
|
||||
</div>
|
||||
<div class="demoBottom">
|
||||
<div class="demoBottomL">
|
||||
@ -26,21 +28,67 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="登录系统"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:center="true"
|
||||
>
|
||||
<el-form id="login-form_demo" ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left">
|
||||
<el-form-item prop="username" class="item_form_box">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.username" name="username" type="text" :placeholder="this.$t('login.mobilePhoneNumberOrEmail')" />
|
||||
<!-- @keyup.enter.native="goToNext" -->
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="item_form_box item_form_password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
:placeholder="this.$t('login.password')"
|
||||
/>
|
||||
<!-- @keyup.enter.native="handleLogin" -->
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon v-if="pwdDisplay" icon-class="eye" />
|
||||
<svg-icon v-else icon-class="eye-open" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<div class="tip-message">{{ tipsMsg }}</div>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loginLoading" @click.native.prevent="handleLogin">
|
||||
{{ $t('login.login') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<iframe class="dialog" :style="{display:show?'block': 'none'}" :src="src" width="100%" height="100%" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth';
|
||||
|
||||
import md5 from 'js-md5';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// src: `http://localhost:9527/cbtc/trainingPlatform`,
|
||||
src:'',
|
||||
token:'',
|
||||
// demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&noPreLogout=true&trainingId=4994993&token=${getToken()}
|
||||
show: false,
|
||||
dialogVisible:false,
|
||||
loading:false,
|
||||
loginLoading:false,
|
||||
pwdType: 'password',
|
||||
tipsMsg: '',
|
||||
pwdDisplay: true,
|
||||
trainingList: [
|
||||
{
|
||||
title: '区段设置限速(TA1006E)',
|
||||
@ -54,10 +102,34 @@ export default {
|
||||
title: '进路选排(S0916-S0901)',
|
||||
id: '4991607'
|
||||
}
|
||||
]
|
||||
],
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loginRules() {
|
||||
const loginRules = {
|
||||
username: [{ required: true, trigger: 'blur', validator: this.validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: this.validatePass }]
|
||||
};
|
||||
return loginRules;
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user.id;
|
||||
},
|
||||
nickName() {
|
||||
return this.$store.state.user.nickname;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.token = getToken();
|
||||
if (this.token) {
|
||||
this.$store.dispatch('GetInfo', getToken()).then(res => {
|
||||
});
|
||||
}
|
||||
window.addEventListener('message', (e) => {
|
||||
const result = e.data;
|
||||
if (result.type == 'DEMO_MAP_LOADED') {
|
||||
@ -88,118 +160,164 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
doClick(el) {
|
||||
// &noPreLogout=true
|
||||
this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&trainingId=${el.id}&token=${getToken()}`;
|
||||
this.loading = true;
|
||||
setTimeout(()=>{
|
||||
this.show = true;
|
||||
}, 300);
|
||||
if (this.token && this.userId) {
|
||||
// &noPreLogout=true
|
||||
this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&trainingId=${el.id}&token=${this.token}`;
|
||||
this.loading = true;
|
||||
setTimeout(()=>{
|
||||
this.show = true;
|
||||
}, 300);
|
||||
} else {
|
||||
this.dialogVisible = true;
|
||||
}
|
||||
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handleLogin() {
|
||||
// account: "18502924948"
|
||||
// clientId: "1"
|
||||
// password: "e10adc3949ba59abbe56e057f20f883e"
|
||||
// project: "DEFAULT"
|
||||
// secret: "joylink"
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'class';
|
||||
model.project = 'DEFAULT';
|
||||
// model.deviceCode = this.$route.query.projectDevice;
|
||||
this.loginLoading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('SetAccount', model.username);
|
||||
this.$store.dispatch('GetInfo', getToken()).then(res => {
|
||||
this.loginLoading = false;
|
||||
this.dialogVisible = false;
|
||||
this.token = getToken();
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.code == '40003') {
|
||||
this.tipsMsg = this.$t('login.accountOrPasswordIsIncorrect');
|
||||
} else if (error.code == '10013' || error.code == '10014') {
|
||||
this.tipsMsg = '该账号权限不足';
|
||||
} else {
|
||||
this.tipsMsg = error.message;
|
||||
}
|
||||
this.loading = false;
|
||||
setTimeout(() => { this.tipsMsg = ''; }, 5000);
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
demoLogin() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
validateUsername(rule, value, callback) {
|
||||
if (value) {
|
||||
return callback();
|
||||
} else {
|
||||
return callback(new Error('请输入用户名'));
|
||||
}
|
||||
},
|
||||
validatePass(rule, value, callback) {
|
||||
if (value.length < 5) {
|
||||
return callback(new Error(this.$t('login.passwordHint')));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
goToNext() {
|
||||
if (this.loginForm.username.length < 5) {
|
||||
return;
|
||||
} else {
|
||||
this.$refs['password'].focus();
|
||||
}
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdDisplay = false;
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
this.pwdDisplay = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dialog {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border: none;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.demoContainer{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
}
|
||||
.eachTraining{
|
||||
cursor: pointer;
|
||||
.dialog {background: #fff;position: absolute;top: 0;right: 0;left: 0;bottom: 0;border: none;width:100%;height:100%;}
|
||||
.demoContainer{width:100%;height: 100%;}
|
||||
.eachTraining{cursor: pointer;margin-top:10px;margin-left: 8px;font-size: 15px;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
margin-top:10px;
|
||||
margin-left: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.traingList{
|
||||
|
||||
}
|
||||
.demoPage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demoTop{
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
left:0;
|
||||
top:0;
|
||||
border-bottom: 1px #ccc solid;
|
||||
}
|
||||
.demoBottom{
|
||||
padding-top: 60px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.demoBottomL{
|
||||
width: 200px;
|
||||
border-right: 1px #ccc solid;
|
||||
padding: 30px 10px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.demoBottomC{
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
.demoBottomRT{
|
||||
font-size:16px;
|
||||
}
|
||||
.demoBottomR{
|
||||
width: 300px;
|
||||
border-left: 1px #ccc solid;
|
||||
padding: 15px;
|
||||
}
|
||||
.demoBottomCT{
|
||||
font-size: 15px;
|
||||
}
|
||||
.video_container{
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px #ccc solid;
|
||||
margin-top: 80px;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.demoMenuList{
|
||||
background:#fff;
|
||||
box-shadow: 1px 3px 5px #dedede;
|
||||
}
|
||||
.eachDemoMenu{
|
||||
padding-left: 20px;
|
||||
font-size: 15px;
|
||||
padding-top: 10px;
|
||||
cursor: pointer;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px #f5f5f5 solid;
|
||||
color:#000;
|
||||
.demoPage{width: 100%;height: 100%;}
|
||||
.demoTop{position:absolute;width: 100%;height: 60px;left:0;top:0;border-bottom: 1px #ccc solid;}
|
||||
.demoBottom{padding-top: 60px;width: 100%;height: 100%;display: flex;flex-direction: row;}
|
||||
.demoBottomL{width: 200px;border-right: 1px #ccc solid;padding: 30px 10px;background: #f2f2f2;}
|
||||
.demoBottomC{flex: 1;padding: 20px;}
|
||||
.demoBottomRT{font-size:16px;}
|
||||
.demoBottomR{width: 300px;border-left: 1px #ccc solid;padding: 15px;}
|
||||
.demoBottomCT{font-size: 15px;}
|
||||
.video_container{width: 600px;height: 400px;border: 1px #ccc solid;margin-top: 80px;margin-left: 50%;transform: translateX(-50%);}
|
||||
.demoMenuList{background:#fff;box-shadow: 1px 3px 5px #dedede;}
|
||||
.eachDemoMenu{padding-left: 20px;font-size: 15px;padding-top: 10px;cursor: pointer;padding-bottom: 10px;border-bottom: 1px #f5f5f5 solid;color:#000;
|
||||
&.active{
|
||||
background:#64a3f5;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
.demoTopTitle{
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding: 15px 10px 15px 30px
|
||||
.demoTopTitle{font-size: 22px;font-weight: bold;padding: 15px 10px 15px 30px;width: 500px;display: inline-block;}
|
||||
.loginButton{float: right;display: inline-block;margin-right: 30px;margin-top: 10px;padding: 10px 20px;border: 1px #ccc solid;border-radius: 5px;
|
||||
font-size: 14px;cursor: pointer;}
|
||||
.item_form_box {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
.svg-container {padding-left: 14px;color: #889aa4;vertical-align: middle;width: 30px;display: inline-block;
|
||||
&_login {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.show-pwd {position: absolute;right: 10px;top: 3px;font-size: 16px;color: #889aa4;cursor: pointer;user-select: none;}
|
||||
.tip-message {color: #F56C61;padding: 5px;font-size: 12px;height: 23px;margin-bottom: 10px;}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.demoContainer .el-loading-mask{
|
||||
background-color:rgba(255,255,255,1);
|
||||
}
|
||||
#login-form_demo {
|
||||
width: 340px;
|
||||
padding: 0 50px;
|
||||
.el-form-item{
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
width: 85%;
|
||||
background: #fff;
|
||||
input {
|
||||
background: #fff !important;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 8px 9px 7px 5px;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px #fff inset !important;
|
||||
-webkit-text-fill-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -331,7 +331,6 @@ export default {
|
||||
},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
debugger;
|
||||
// this.$refs.dataform.validateField('runningRouting');
|
||||
this.$refs.dataform.resetForm();
|
||||
// this.$refs.dataform.clearValidate();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user