|
|
|
<template>
|
|
|
|
<!-- <div>-->
|
|
|
|
<!-- <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">-->
|
|
|
|
<!-- <h3 class="title">系统登录</h3>-->
|
|
|
|
<!-- <el-form-item prop="account">-->
|
|
|
|
<!-- <el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>-->
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
<!-- <el-form-item prop="checkPass">-->
|
|
|
|
<!-- <el-input type="password" v-model="ruleForm2.checkPass" placeholder="密码"></el-input>-->
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
<!-- <el-form-item prop="verify">-->
|
|
|
|
<!-- <el-input type="text" v-model="ruleForm2.verify" placeholder="请输入下方图片显示的验证码" @keyup.enter.native="handleSubmit2"></el-input>-->
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
<!-- <el-form-item>-->
|
|
|
|
<!-- <img-->
|
|
|
|
<!-- style="width: 125px; height: 60px"-->
|
|
|
|
<!-- :src="verifyImg"-->
|
|
|
|
<!-- @click="getVerifyCode"-->
|
|
|
|
<!-- >-->
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
<!-- <el-checkbox v-model="checked" checked class="remeberme">记住密码</el-checkbox>-->
|
|
|
|
<!-- <el-form-item style="width:100%;">-->
|
|
|
|
<!-- <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>-->
|
|
|
|
<!-- <!–<el-button @click.native.prevent="handleReset2">重置</el-button>–>-->
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
<!-- </el-form>-->
|
|
|
|
<!-- <div class="homepage-hero-module">-->
|
|
|
|
<!-- <div class="video-container">-->
|
|
|
|
<!-- <div :style="fixStyle" class="filter"></div>-->
|
|
|
|
<!-- <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">-->
|
|
|
|
<!-- <source src="/static/login/New-jumbo.mp4" type="video/mp4"/>-->
|
|
|
|
<!-- 浏览器不支持 video 标签，建议升级浏览器。-->
|
|
|
|
<!-- <!–<source src="/static/login/New-jumbo.webm" type="video/webm"/>–>-->
|
|
|
|
<!-- <!–浏览器不支持 video 标签，建议升级浏览器。–>-->
|
|
|
|
<!-- </video>-->
|
|
|
|
<!-- <div class="poster hidden" v-if="!vedioCanPlay">-->
|
|
|
|
<!-- <img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">-->
|
|
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
import http from '../api/http';
|
|
|
|
import {getRandCode, testLogin} from '../api/user';
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
verifyImg: "",
|
|
|
|
vedioCanPlay: true,
|
|
|
|
fixStyle: '',
|
|
|
|
logining: false,
|
|
|
|
ruleForm2: {
|
|
|
|
account: '',
|
|
|
|
checkPass: '',
|
|
|
|
verify: '',
|
|
|
|
verifyToken: ''
|
|
|
|
},
|
|
|
|
rules2: {
|
|
|
|
account: [
|
|
|
|
{ required: true, message: '请输入账号', trigger: 'blur' },
|
|
|
|
//{ validator: validaePass }
|
|
|
|
],
|
|
|
|
checkPass: [
|
|
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
|
//{ validator: validaePass2 }
|
|
|
|
],
|
|
|
|
checkVerify: [
|
|
|
|
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
|
|
|
]
|
|
|
|
},
|
|
|
|
checked: true,
|
|
|
|
userMenus: []
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
canplay() {
|
|
|
|
this.vedioCanPlay = true
|
|
|
|
},
|
|
|
|
handleReset2() {
|
|
|
|
this.$refs.ruleForm2.resetFields();
|
|
|
|
},
|
|
|
|
handleMenuList : function (router,menu) {
|
|
|
|
var _this = this;
|
|
|
|
var routerName = "";
|
|
|
|
var routerTemp = router.concat();
|
|
|
|
|
|
|
|
routerTemp.forEach(function (v_router,v_index,v_arr) {
|
|
|
|
routerName = v_router.name;
|
|
|
|
|
|
|
|
//查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
|
|
|
|
let result = menu.find(item => {
|
|
|
|
return item.name === routerName;
|
|
|
|
});
|
|
|
|
|
|
|
|
//匹配到继续判断是否子元素,有子元素继续递归
|
|
|
|
if (result) {
|
|
|
|
if (v_router.children && v_router.children.length>0) {
|
|
|
|
_this.handleMenuList(v_router.children, result.children);
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
//没有则可以移除
|
|
|
|
let deletRouter = router.findIndex(itm => itm.name === routerName );
|
|
|
|
router.splice(deletRouter,1);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
console.log("longined router:");
|
|
|
|
console.log(routerName);
|
|
|
|
console.log(_this.$router.options.routes);
|
|
|
|
// 本地存储用户目录 ，防刷新目录丢失用
|
|
|
|
sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
|
|
|
|
},
|
|
|
|
|
|
|
|
getVerifyCode: function(){
|
|
|
|
getRandCode().then((res) =>{
|
|
|
|
let status = res.status;
|
|
|
|
this.ruleForm2.verifyToken = res.data.jwtToken;
|
|
|
|
this.verifyImg = res.data.data.verifyImg;
|
|
|
|
}).catch({
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// 获取地址栏参数
|
|
|
|
getUrlKey: function (name) {
|
|
|
|
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
|
|
|
|
},
|
|
|
|
// 获取票据
|
|
|
|
ticket: function () {
|
|
|
|
let ticket = this.getUrlKey("ticket");
|
|
|
|
if (ticket!=undefined){
|
|
|
|
let loginParams = {
|
|
|
|
ticket : ticket
|
|
|
|
}
|
|
|
|
testLogin(loginParams).then(res => {
|
|
|
|
//NProgress.done();
|
|
|
|
let status = res.status;
|
|
|
|
let authentication = res.data.authentication;
|
|
|
|
let token = authentication.token;
|
|
|
|
let loginUserMenus = res.data.loginUserMenus;
|
|
|
|
if (status !== 200) {
|
|
|
|
let msg = "该账户不存在本系统";
|
|
|
|
this.$message({
|
|
|
|
message: msg,
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
} else if (token) {
|
|
|
|
sessionStorage.setItem('user', JSON.stringify(authentication));
|
|
|
|
sessionStorage.setItem('token','Bearer '+ token);
|
|
|
|
//设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
|
|
|
|
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
|
|
|
|
//处理用户menu
|
|
|
|
this.userMenus = loginUserMenus.list;
|
|
|
|
console.log("userMenus:");
|
|
|
|
console.log(this.userMenus);
|
|
|
|
console.log(loginUserMenus.list);
|
|
|
|
let sysMenus = this.$router.options.routes;
|
|
|
|
|
|
|
|
console.log("sysMenus:");
|
|
|
|
console.log(sysMenus);
|
|
|
|
|
|
|
|
this.handleMenuList(this.$router.options.routes,this.userMenus);
|
|
|
|
|
|
|
|
console.log("user:");
|
|
|
|
console.log(this.$router.options.routes);
|
|
|
|
this.$router.push({path: '/main'});
|
|
|
|
}
|
|
|
|
}).catch(error => {
|
|
|
|
this.$message({
|
|
|
|
message: error.toString(),
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
this.logining = false;
|
|
|
|
});
|
|
|
|
}else {
|
|
|
|
console.log("票据为空 请求路由")
|
|
|
|
window.location.href = 'http://10.5.14.103:27080/sso/login?service=http://10.50.7.70:9909/%23/ssologin'
|
|
|
|
// window.location.href = 'http://10.5.14.103:27080/sso/login?service=http://10.50.3.73:8880/%23/SsoLogin'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted:function () {
|
|
|
|
window.onresize = () => {
|
|
|
|
const windowWidth = document.body.clientWidth
|
|
|
|
const windowHeight = document.body.clientHeight
|
|
|
|
const windowAspectRatio = windowHeight / windowWidth
|
|
|
|
let videoWidth
|
|
|
|
let videoHeight
|
|
|
|
if (windowAspectRatio < 0.5625) {
|
|
|
|
videoWidth = windowWidth
|
|
|
|
videoHeight = videoWidth * 0.5625
|
|
|
|
this.fixStyle = {
|
|
|
|
height: windowWidth * 0.5625 + 'px',
|
|
|
|
width: windowWidth + 'px',
|
|
|
|
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
|
|
|
|
'margin-left': 'initial'
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
videoHeight = windowHeight
|
|
|
|
videoWidth = videoHeight / 0.5625
|
|
|
|
this.fixStyle = {
|
|
|
|
height: windowHeight + 'px',
|
|
|
|
width: windowHeight / 0.5625 + 'px',
|
|
|
|
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
|
|
|
|
'margin-bottom': 'initial'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
window.onresize();
|
|
|
|
this.ticket();
|
|
|
|
},
|
|
|
|
created(){
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!--<style lang="scss" scoped>-->
|
|
|
|
<!-- #loginForm{-->
|
|
|
|
<!-- filter:alpha(Opacity=90);-->
|
|
|
|
<!-- -moz-opacity:0.9;-->
|
|
|
|
<!-- opacity: 0.9;-->
|
|
|
|
<!-- }-->
|
|
|
|
<!-- .homepage-hero-module,-->
|
|
|
|
<!-- .video-container {-->
|
|
|
|
<!-- height: 100vh;-->
|
|
|
|
<!-- /*overflow: hidden;*/-->
|
|
|
|
<!-- position: absolute;-->
|
|
|
|
<!-- top:0px;-->
|
|
|
|
<!-- left: 0;-->
|
|
|
|
<!-- z-index: -1;-->
|
|
|
|
<!-- }-->
|
|
|
|
|
|
|
|
<!-- .video-container .poster img,-->
|
|
|
|
<!-- .video-container video {-->
|
|
|
|
<!-- z-index: 0;-->
|
|
|
|
<!-- position: absolute;-->
|
|
|
|
<!-- }-->
|
|
|
|
|
|
|
|
<!-- .video-container .filter {-->
|
|
|
|
<!-- z-index: 1;-->
|
|
|
|
<!-- position: absolute;-->
|
|
|
|
<!-- background: rgba(0, 0, 0, 0.4);-->
|
|
|
|
<!-- }-->
|
|
|
|
<!-- .login-container {-->
|
|
|
|
<!-- /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/-->
|
|
|
|
<!-- -webkit-border-radius: 5px;-->
|
|
|
|
<!-- border-radius: 5px;-->
|
|
|
|
<!-- -moz-border-radius: 5px;-->
|
|
|
|
<!-- background-clip: padding-box;-->
|
|
|
|
<!-- margin: 180px auto;-->
|
|
|
|
<!-- width: 350px;-->
|
|
|
|
<!-- padding: 35px 35px 15px 35px;-->
|
|
|
|
<!-- background: #fff;-->
|
|
|
|
<!-- border: 1px solid #eaeaea;-->
|
|
|
|
<!-- box-shadow: 0 0 25px #cac6c6;-->
|
|
|
|
<!-- .title {-->
|
|
|
|
<!-- margin: 0px auto 40px auto;-->
|
|
|
|
<!-- text-align: center;-->
|
|
|
|
<!-- color: #505458;-->
|
|
|
|
<!-- }-->
|
|
|
|
<!-- .remember {-->
|
|
|
|
<!-- margin: 0px 0px 35px 0px;-->
|
|
|
|
<!-- }-->
|
|
|
|
<!-- }-->
|
|
|
|
<!--</style>--> |
|
|
\ No newline at end of file |
...
|
...
|
|
