<template>
|
<div class="body">
|
<!-- <div class="bg"> -->
|
<div class="loginav">
|
<div class="video" style="position: relative;">
|
<video src="../../assets/images/video.mp4" muted autoplay loop></video>
|
|
</div>
|
<div class=""></div>
|
<div class="loginbox boxall" style="width: 450px;">
|
<div class="logo">
|
<h1 id="title">北斗监测平台系统</h1>
|
<!-- <img src="images/logo.png"> -->
|
</div>
|
<a href="javascript:;" class="yonghulog" @click="yonghu()"
|
v-if="loginmethod == '2' || loginmethod == '0'">
|
<div class="logintit yh" :style="{ 'display': 'inline-block', 'text-decoration': texthu }">用户登录
|
</div>
|
</a><a class="duanxinlog" href="javascript:;" @click="duanxin()"
|
v-if="loginmethod == '2' || loginmethod == '1'">
|
<div class="logintit dx"
|
:style="{ 'display': 'inline-block', 'margin-left': mleft, 'text-decoration': textdu }">短信登录
|
</div>
|
</a>
|
<ul class="logininput" v-if="loginway == 'yonghu'">
|
<li>
|
<i><img src="../../assets/images/user.png"></i>
|
<input class="forminput" value="" v-model="loginForm.username" required type="text"
|
placeholder="用户名">
|
</li>
|
<li>
|
<i><img src="../../assets/images/password.png"></i>
|
|
<input class="forminput" :type="passwordType" v-model="loginForm.password" required value=""
|
placeholder="密码">
|
<i style="margin-left: 85%;"><img :src="paSrc" alt="" @click="changePassward"></i>
|
</li>
|
<div id="captcha-box"></div>
|
|
|
<li>
|
<el-button :loading="loading" type="primary" class="btn btnblock btn-lg btn-block"
|
style="width:100%;" @click.native.prevent="handleLogin">登录</el-button>
|
<!-- <a href="javascript:;" onclick="login()"
|
class="btn btnblock btn-lg btn-block btn-primary">登录</a> -->
|
</li>
|
<!-- <li style="color: white;text-align: center;position: relative;left: 5%" id="title2">
|
推荐您使用谷歌chorme浏览器<a class="genggai" href="./NotPassWord.jsp"
|
style="color: #ccc;font-size: 13px;position: relative;left: 10%">更改密码</a></li> -->
|
</ul>
|
<ul class="logininput" v-if="loginway == 'duanxin'">
|
<li>
|
<i><img src="../../assets/images/user.png"></i>
|
<input class="forminput" value="" v-model="phone" type="text" placeholder="请输入手机号">
|
</li>
|
<li>
|
<i><img src="../../assets/images/password.png"></i>
|
<input class="forminput" type="text" v-model="yzms" value="" placeholder="请输入验证码">
|
</li>
|
<li>
|
<el-button v-show="denglu" :loading="loading" type="primary"
|
class="btn btnblock btn-lg btn-block" style="width:100%;"
|
@click.native.prevent="handleLogin">登录</el-button>
|
</li>
|
<li>
|
<a href="javascript:;" id="yzm"
|
style="width: 100px;height: 40px;font-size: 12px;line-height: 40px;float: right;position: relative;top: -154px;margin-right: 5px"
|
class="btn btnblock btn-lg btn-block btn-primary" @click="hqyzm()">获取验证码</a>
|
</li>
|
<li style="color: white;text-align: center;position: relative;left: 5%">推荐您使用谷歌chorme浏览器</li>
|
</ul>
|
<el-card class="cover" v-show="tianaishow">
|
<slide-verify :l="42" :r="10" :w="310" :h="155" :imgs="imgs" slider-text="向右滑动" @success="onSuccess"
|
@fail="onFail" @refresh="onRefresh">
|
</slide-verify>
|
</el-card>
|
<div class="boxfoot"></div>
|
|
<div v-if="lock"
|
style="width: 100%;position:absolute;z-index: 9999;color: #da271a;top: 440px;left: 0;text-align: center;">
|
<h4> 提示信息：软件授权注册码过期或者错误请联系管理员</h4>
|
</div>
|
</div>
|
|
</div>
|
|
<div style="width: 100%;position: fixed;top: 32%;left: 40%">
|
</div>
|
|
<canvas ref="canvas"
|
style="position:fixed; width:100%; height:100%; left: 0; top: 0; opacity: .3; pointer-events: none;"></canvas>
|
</div>
|
</template>
|
|
<!-- <script src="../../view/JS/layui.js"></script>
|
<script src="../../view/JS/layer.js"></script> -->
|
<!-- <script src="../../HouTai/Js/jquery-3.5.1.js"></script> -->
|
<script src="../../view/JS/huakuai.js"></script>
|
<script src="../../view/JS/tac.min.js"></script>
|
<script src="../../view/tac/js/notify_stand.js"></script>
|
<script src="../../view/tac/js/notify.js"></script>
|
<script>
|
import img0 from '../../assets/img.jpg';
|
import img1 from '../../assets/img1.jpg';
|
import img2 from '../../assets/img2.jpg';
|
import img3 from '../../assets/img3.jpg';
|
import img4 from '../../assets/img4.jpg';
|
import img5 from '../../assets/img5.jpg';
|
class Dot {
|
constructor(w, h, maxScale, minScale) {
|
this.radius = Math.floor(Math.random() * 3 + 2);//在选一个随机数为圆点半径
|
this.d = Math.random() * 2 * Math.PI;//在0-2π之间随机一个弧度值
|
this.rx = Math.random() * w * (Math.random() > 0.6 ? 2 / 3 : 1 / 4);// 选一个随机数，作为椭圆长轴顶点a的数值,也就是椭圆中心的x轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。
|
this.ry = Math.random() * h - h / 2;//选一个随机数作为椭圆短轴顶点b的数值，也就是椭圆中心的y轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。这两个值可以根据自已需求来定。
|
this.x = Math.cos(this.d) * this.rx + w / 2;
|
this.y = Math.sin(this.d) * this.ry + h / 2;//根据椭圆x,y求值公式，x=a*cosα，y=a*sinα.求出圆点在椭圆上的x,y轴坐标.后面加w/2,h/2只是为了居中显示。此处的x,y是相对于canvas建立的直角坐标系的，按canvas约定，其中心点（0,0）点在左上角
|
this.z = (Math.pow(Math.pow(this.rx, 2) + Math.pow(this.ry, 2), 0.5) / Math.pow(Math.pow(w / 2, 2) + Math.pow(h / 2, 2), 0.5))//求白色圆点离椭圆中心点的距离，可视为一个点到圆心的距离，用x平方+y平方=c平方求得。此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。此处Z值只是一个比值
|
this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;//圆点的缩放大小,根据余弦函数公式y=cosα.标准的余弦函数最大值和最小值分别为1，-1.这里要自行设置最大值和最小值，所以要进行改写
|
// this.speed = Math.random() * 0.0005 + 0.0005;
|
this.speed = Math.random() * 0.0004 + 0.0004;//圆点运动的速度
|
this.alpha = this.scale / maxScale * 0.3 + 0.1;//圆点运动的透明度
|
this.count = 0;
|
}
|
paint(ctx) {
|
ctx.fillStyle = 'rgba(0,130,255,' + this.alpha + ')';
|
ctx.beginPath();
|
ctx.arc(this.x, this.y, this.radius * this.scale * this.z, 0, Math.PI * 2);
|
ctx.fill();
|
}
|
update(w, h, maxScale, minScale) {
|
this.count += 0.01;
|
if (Math.floor(this.count) % 12 === 0 && Math.floor(this.count) != 0) {
|
this.d += 0.008;
|
if (this.count > Math.floor(this.count) + 0.5) {
|
this.d -= 0.008;
|
}
|
}
|
|
|
this.x = Math.sin(this.d) * this.rx + w / 2;
|
this.y = Math.cos(this.d) * this.ry + h / 2;
|
this.d -= this.speed;//通过改变它的弧度值来改变圆点在椭圆中运动
|
this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;
|
this.alpha = this.scale / maxScale * 0.3 + 0.1;
|
}
|
}
|
var LoginId = "";
|
import { login, findPhoneUser, sms, addLoginLog, getSystemOne } from '@/api/user'
|
export default {
|
data() {
|
return {
|
passwordType: 'password',
|
paSrc: require("@/assets/images/login_pass_active.png"),
|
imgs: [
|
img0,
|
img1,
|
img2,
|
img3,
|
img4,
|
img5,
|
],
|
src:"../../assets/img.png",
|
loginAdmin:{},
|
tianaishow:false,
|
denglu:true,
|
// LoginId: '',
|
lock: false,
|
mleft: '30px',
|
loginmethod: '',
|
texthu: 'underline',
|
textdu: 'none',
|
yzms: '',
|
yzm: '',
|
phone: '',
|
loginway: 'yonghu',
|
otherQuery: {},
|
loginForm: {
|
username: '',
|
password: ''
|
},
|
loading: false,
|
pass: '',
|
yhm: '',
|
w: '',
|
h: '',
|
minScale: 1,
|
maxScale: 3,
|
snowflakes: [],
|
}
|
},
|
watch: {
|
$route: {
|
handler: function (route) {
|
const query = route.query
|
if (query) {
|
this.redirect = query.redirect
|
this.otherQuery = this.getOtherQuery(query)
|
}
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
console.log(2333333333);
|
console.log();
|
|
console.log(typeof window.initTAC === 'function');
|
|
getSystemOne().then(response => {
|
console.log(response);
|
this.loginmethod = response.data[0].loginmethod
|
if (response.data[0].loginmethod == '2' || response.data[0].loginmethod == '1') {
|
this.loginway = 'duanxin'
|
this.textdu = 'underline'
|
this.texthu = 'none'
|
this.mleft = "0"
|
}
|
if (response.data[0].loginmethod == '2' || response.data[0].loginmethod == '0') {
|
this.loginway = 'yonghu'
|
this.textdu = 'none'
|
this.texthu = 'underline'
|
this.mleft = "30px"
|
|
}
|
})
|
this.canvas = this.$refs.canvas
|
this.ctx = this.canvas.getContext('2d');
|
this.w = window.innerWidth;//获取屏幕宽高
|
this.h = window.innerHeight * 2 / 2;
|
|
this.canvas.width = this.w;//将屏幕宽高赋值给canvas
|
this.canvas.height = this.h;
|
var dots = [];
|
// this.minScale = 1;//设置圆点的最小缩放
|
// this.maxScale = 3;//设置圆点的最大缩放
|
var bei = 1;
|
for (var i = 0; i < 300; i += 1) { //设置白圆点的个数
|
this.snowflakes.push(new Dot(this.w, this.h, this.minScale, this.maxScale))
|
}
|
this.fetchData();
|
|
},
|
methods: {
|
// 切换密码显示隐藏
|
changePassward() {
|
this.passwordType = this.passwordType==='password'?'text':'password';
|
this.paSrc = this.paSrc == require("@/assets/images/login_pass_active.png")?require('@/assets/images/login_pass.png'):require("@/assets/images/login_pass_active.png");
|
},
|
onSuccess() { //滑块验证通过之后触发的
|
this.$notify.success("登录成功")
|
LoginId="true"
|
if (LoginId=="") {
|
|
}
|
this.tianaishow=false
|
this.denglu=true
|
// this.$router.push('/')
|
},
|
onFail() {
|
|
},
|
onRefresh() {
|
},
|
|
fetchData() {
|
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
this.ctx.fillStyle = 'rgba(26,94,199,.6)';
|
this.ctx.fillRect(0, 0, this.w, this.h);//描绘底层蓝色背景
|
for (var i = 0; i < this.snowflakes.length; i += 1) {
|
var dot = this.snowflakes[i];
|
dot.update(this.w, this.h, this.minScale, this.maxScale);
|
dot.paint(this.ctx);
|
}
|
requestAnimationFrame(this.fetchData)
|
},
|
handleLogin() {
|
if (this.loginway == 'yonghu') {
|
if (this.loginForm.username == '') {
|
this.$message.error('请先输入用户名后在登录');
|
return false;
|
}
|
if (this.loginForm.password == '') {
|
this.$message.error('请先输入密码后在登录');
|
return false;
|
}
|
|
// if (LoginId == "") {
|
// //没有验证过
|
// this.denglu=false
|
// // $("#denglu").hide()
|
// // config 对象为TAC验证码的一些配置和验证的回调
|
// const config = {
|
// requestCaptchaDataUrl: "/code",
|
// validCaptchaUrl: "/checkCode",
|
// bindEl: "#captcha-box",
|
// validSuccess: (res, c, tac) => {
|
// console.log(res);
|
|
// // 销毁验证码服务
|
// tac.destroyWindow();
|
// console.log("验证成功，后端返回的数据为", res);
|
// // LoginId = res.data.id
|
// // this.denglu=true
|
// // // $("#denglu").show()
|
// // // 启动1分钟的计时器
|
// // loginTimer = setTimeout(() => {
|
// // notify.error("1分钟内未登录，重新验证");
|
// // LoginId = "";
|
// // login(); // 重新调用login函数进行验证
|
// // }, 60000); // 60000毫秒 = 1分钟
|
// },
|
// // 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
|
// validFail: (res, c, tac) => {
|
// console.log("验证码验证失败回调...")
|
// // LoginId = ""
|
// // 验证失败后重新拉取验证码
|
// tac.reloadCaptcha();
|
// },
|
// // 刷新按钮回调事件
|
// btnRefreshFun: (el, tac) => {
|
// console.log("刷新按钮触发事件...")
|
// // LoginId = ""
|
// tac.reloadCaptcha();
|
// },
|
// // 关闭按钮回调事件
|
// btnCloseFun: (el, tac) => {
|
// console.log("关闭按钮触发事件...")
|
// // LoginId = ""
|
// tac.destroyWindow();
|
// // this.denglu=true
|
// // $("#denglu").show()
|
// }
|
// }
|
// // 一些样式配置， 可不传
|
// let style = {
|
// logoUrl: null// 去除logo
|
// // logoUrl: "/xx/xx/xxx.png" // 替换成自定义的logo
|
// }
|
// console.log(config);
|
|
// // 参数1 为 tac文件是目录地址， 目录里包含 tac的js和css等文件
|
// // 参数2 为 tac验证码相关配置
|
// // 参数3 为 tac窗口一些样式配置
|
// console.log(window);
|
|
// // window.initTAC("@/views/view/tac", config, style).then(tac => {
|
// // console.log(222);
|
|
// // tac.init(); // 调用init则显示验证码
|
// // }).catch(e => {
|
// // console.log("初始化tac失败", e);
|
// // })
|
|
// // 检查 initTAC 是否存在
|
// if (typeof window.initTAC === 'function') {
|
// window.initTAC("../view/tac", config, style).then(tac => {
|
// tac.init();
|
// }).catch(e => {
|
// console.log("初始化tac失败", e);
|
// });
|
// } else {
|
// console.error("initTAC is not defined");
|
// }
|
// } else {
|
if (LoginId=="") {
|
this.tianaishow=true
|
this.denglu=false
|
}else{
|
this.loading = true
|
this.$store.dispatch('user/login', this.loginForm)
|
.then((res) => {
|
console.log(11111111111);
|
|
console.log(res);
|
|
if (res.usermsg == "false") {
|
this.lock = true
|
this.$message.error('软件授权注册码过期或者错误请联系管理员');
|
this.loading = false
|
} else {
|
console.log(this.otherQuery);
|
const params = { name: res.username, loginfs: '账号密码登录' };
|
addLoginLog(params).then(response => {
|
|
})
|
this.$router.push({ path: '/#/dpdv' || '/', query: this.otherQuery })
|
this.loading = false
|
LoginId=""
|
}
|
})
|
|
.catch(() => {
|
this.loading = false
|
})
|
}
|
|
|
// }
|
} else {
|
if (this.phone == '') {
|
this.$message.error('请先输入手机号后在登录');
|
return false;
|
}
|
if (this.yzms == '') {
|
this.$message.error('请先输入验证码后在登录');
|
return false;
|
}
|
if (this.yzms != this.yzm) {
|
this.$message.error('验证码有误，请重新获取验证码后重试');
|
return false;
|
}
|
if (LoginId=="") {
|
this.tianaishow=true
|
this.denglu=false
|
}else{
|
const params = { adminphone: this.phone };
|
this.loading = true
|
// this.loginForm=params
|
this.$store.dispatch('user/login', params)
|
.then((res) => {
|
console.log(11111111111);
|
console.log(res);
|
|
if (res.usermsg == "false") {
|
this.lock = true
|
this.$message.error('软件授权注册码过期或者错误请联系管理员');
|
this.loading = false
|
// return false;
|
// return false
|
// this.lock=true
|
} else {
|
console.log(this.otherQuery);
|
|
const params = { name: res.username, loginfs: '验证码登录' };
|
addLoginLog(params).then(response => {
|
|
})
|
this.$router.push({ path: '/#/dpdv' || '/', query: this.otherQuery })
|
this.loading = false
|
LoginId=""
|
}
|
})
|
|
.catch(() => {
|
this.loading = false
|
})
|
}
|
}
|
|
},
|
yonghu() {
|
this.loginway = 'yonghu',
|
this.texthu = 'underline',
|
this.textdu = 'none'
|
},
|
duanxin() {
|
this.loginway = 'duanxin',
|
this.texthu = 'none',
|
this.textdu = 'underline'
|
},
|
hqyzm() {
|
const params = { phone: this.phone };
|
findPhoneUser(params).then(response => {
|
if (response.data != null) {
|
var yzm = this.generateRandomCode();
|
const params1 = { phone: this.phone, randomNumber: yzm };
|
sms(params1).then(response => {
|
this.yzm = response.data
|
})
|
this.startCountdown(60)
|
} else {
|
this.$message({
|
message: '当前手机号不存在，请重新输入后在获取',
|
type: 'none'
|
})
|
}
|
|
// this.fetchData()
|
})
|
},
|
startCountdown(seconds) {
|
var btn = document.getElementById('yzm');
|
btn.disabled = true;
|
var count = seconds;
|
btn.textContent = count + ' 秒后重新获取';
|
var timer = setInterval(function () {
|
count--;
|
if (count <= 0) {
|
clearInterval(timer);
|
btn.textContent = '获取验证码';
|
btn.disabled = false;
|
} else {
|
btn.textContent = count + ' 秒后重新获取';
|
}
|
}, 1000);
|
},
|
generateRandomCode() {
|
var code = "";
|
var possible = "0123456789"; // 可选的字符集合
|
|
for (var i = 0; i < 4; i++) {
|
// 从字符集合中随机选择一个字符，并添加到验证码中
|
code += possible.charAt(Math.floor(Math.random() * possible.length));
|
}
|
|
return code;
|
},
|
getOtherQuery(query) {
|
return Object.keys(query).reduce((acc, cur) => {
|
if (cur !== 'redirect') {
|
acc[cur] = query[cur]
|
}
|
return acc
|
}, {})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "../../styles/style.css";
|
@import "../view/JS/css/tac.css";
|
|
// <link href="/hxzkuwb/view/JS/css/tac.css" rel="stylesheet">
|
.cover {
|
width: fit-content;
|
background-color: white;
|
// position: absolute;
|
// top: 50%;
|
// left: 50%;
|
// transform: translate(-50%, -50%);
|
z-index: 1000;
|
}
|
|
|
.genggai:hover {
|
color: red;
|
}
|
|
.el-button--medium {
|
padding: 10px 20px;
|
font-size: 24px;
|
border-radius: 1px;
|
}
|
|
.canvas {
|
position: fixed;
|
top: 0;
|
left: 0;
|
// background-color: #16222a;
|
z-index: 9999;
|
}
|
|
.bg {
|
position: absolute;
|
width: 100%;
|
background: url(../../assets/images/image.png) no-repeat left center;
|
content: "";
|
left: 0;
|
top: 0;
|
z-index: 100;
|
pointer-events: none;
|
|
}
|
|
.form {
|
width: 290px;
|
height: 380px;
|
display: flex;
|
flex-direction: column;
|
border-radius: 15px;
|
background-color: white;
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
transition: .4s ease-in-out;
|
}
|
|
.form:hover {
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
scale: 0.99;
|
}
|
|
.heading {
|
position: relative;
|
text-align: center;
|
color: black;
|
top: 3em;
|
font-weight: bold;
|
}
|
|
.check {
|
position: relative;
|
align-self: center;
|
top: 4em;
|
}
|
|
.input {
|
position: relative;
|
width: 2.5em;
|
height: 2.5em;
|
margin: 1em;
|
border-radius: 5px;
|
border: none;
|
outline: none;
|
background-color: rgb(235, 235, 235);
|
box-shadow: inset 3px 3px 6px #d1d1d1,
|
inset -3px -3px 6px #ffffff;
|
top: 6.5em;
|
left: 1.5em;
|
padding-left: 15px;
|
transition: .4s ease-in-out;
|
}
|
|
.input:hover {
|
box-shadow: inset 0px 0px 0px #d1d1d1,
|
inset 0px 0px 0px #ffffff;
|
background-color: lightgrey;
|
}
|
|
.input:focus {
|
box-shadow: inset 0px 0px 0px #d1d1d1,
|
inset 0px 0px 0px #ffffff;
|
background-color: lightgrey;
|
}
|
|
.btn1 {
|
position: relative;
|
top: 8.5em;
|
left: 2.4em;
|
width: 17em;
|
height: 3em;
|
border-radius: 5px;
|
border: none;
|
outline: none;
|
transition: .4s ease-in-out;
|
box-shadow: 1px 1px 3px #b5b5b5,
|
-1px -1px 3px #ffffff;
|
}
|
|
.btn1:active {
|
box-shadow: inset 3px 3px 6px #b5b5b5,
|
inset -3px -3px 6px #ffffff;
|
}
|
|
.btn2 {
|
position: relative;
|
top: 9.5em;
|
left: 2.4em;
|
width: 17em;
|
height: 3em;
|
border-radius: 5px;
|
border: none;
|
outline: none;
|
transition: .4s ease-in-out;
|
box-shadow: 1px 1px 3px #b5b5b5,
|
-1px -1px 3px #ffffff;
|
}
|
|
.btn2:active {
|
box-shadow: inset 3px 3px 6px #b5b5b5,
|
inset -3px -3px 6px #ffffff;
|
}
|
</style>
|
