<template>
|
<div class='bd'>
|
<div class="hedaer">
|
<h2>新疆维吾尔自治区自然灾害综合监测预警中心</h2>
|
<h1>自然灾害综合风险预警发布及响应联动系统</h1>
|
</div>
|
<div class="login">
|
|
<a-form-model
|
layout="horizontal"
|
:model="form"
|
ref="ruleForm"
|
:rules="rules"
|
class="login-form"
|
>
|
<a-form-model-item ref="name" prop="name">
|
<a-input
|
placeholder="请输入用户名"
|
size="large"
|
v-model="form.name"
|
autocomplete="new-password"
|
>
|
<a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
|
</a-input>
|
</a-form-model-item>
|
<a-form-model-item ref="pwd" prop="pwd">
|
<a-input-password
|
type="password"
|
placeholder="请输入密码"
|
size="large"
|
v-model="form.pwd"
|
autocomplete="new-password"
|
>
|
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
|
</a-input-password>
|
</a-form-model-item>
|
<!-- <a-tabs default-active-key="1" @change="callback">-->
|
<!-- <a-tab-pane key="1" tab="用户名登录">-->
|
<!-- <a-form-item>-->
|
<!-- <a-input-->
|
<!-- placeholder="请输入用户"-->
|
<!-- size="large"-->
|
<!-- v-model="form.name"-->
|
<!-- >-->
|
<!-- <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />-->
|
<!-- </a-input>-->
|
<!-- </a-form-item>-->
|
<!-- <a-form-item>-->
|
<!-- <a-input-password-->
|
<!-- type="password"-->
|
<!-- placeholder="请输入密码"-->
|
<!-- size="large"-->
|
<!-- v-model="form.pwd"-->
|
<!-- >-->
|
<!-- <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />-->
|
<!-- </a-input-password>-->
|
<!-- </a-form-item>-->
|
<!-- </a-tab-pane>-->
|
<!-- <a-tab-pane key="2" tab="验证码登录" force-render>-->
|
<!-- <a-form-item>-->
|
<!-- <a-input-->
|
<!-- placeholder="手机号"-->
|
<!-- size="large"-->
|
<!-- >-->
|
<!-- <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />-->
|
<!-- </a-input>-->
|
<!-- </a-form-item>-->
|
<!-- <a-form-item>-->
|
<!-- <a-row :gutter="8">-->
|
<!-- <a-col :span="17">-->
|
<!-- <a-input placeholder="验证码">-->
|
<!-- <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />-->
|
<!-- </a-input>-->
|
<!-- </a-col>-->
|
<!-- <a-col :span="7">-->
|
<!-- <a-button style="width: 100%">获取验证码</a-button>-->
|
<!-- </a-col>-->
|
<!-- </a-row>-->
|
<!-- </a-form-item>-->
|
<!-- </a-tab-pane>-->
|
<!-- </a-tabs>-->
|
<div style="margin-bottom: 20px">
|
<a-checkbox :checked="saveAccount" style="color:#fff;" @change="isSave">记住密码</a-checkbox>
|
<!-- <a style="float: right">忘记密码</a>-->
|
</div>
|
<div style="margin-bottom: 20px;height: auto;width: 100%;background-color: white;border-radius: 5px">
|
<div style="margin-left: 10px;display: flex;align-items: center;justify-content: space-between;padding: 0px 12px;">
|
<div v-if="keyMsg">
|
<a-icon style="color: lightcoral" type="exclamation-circle"/>
|
<span style="margin-left: 5px;line-height: 45px;font-size: 16px;color: lightcoral">{{keyMsg}}</span>
|
</div>
|
<div v-else>
|
<a-icon style="color: #52c41a" type="check-circle"/>
|
<span style="margin-left: 5px;line-height: 45px;font-size: 16px;color: #52c41a">加密证书检测成功</span>
|
</div>
|
<a-button
|
type="primary"
|
html-type="submit"
|
style="width: 20%;"
|
size="small"
|
@click="checkKey"
|
>
|
重新检测
|
</a-button>
|
</div>
|
</div>
|
<div style="margin-bottom: 20px;float: right;" >
|
<span style="color: #1890ff;cursor: pointer" @click="downLoadLKey">驱动下载</span>
|
</div>
|
|
<div style="text-align: center">
|
<a-button
|
type="primary"
|
html-type="submit"
|
style="width: 100%"
|
size="large"
|
@click="handleSubmit"
|
:loading="isLoading"
|
v-preventReClick="1500"
|
>
|
登录
|
</a-button>
|
</div>
|
<center><p>技术支持：技术保障部</p></center>
|
</a-form-model>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import { login, getMenuAdmin } from "@/api/login";
|
import Cookies from 'js-cookie';
|
import {Base64} from "js-base64";
|
import SoftKey3W from './Syunew3W.js'
|
|
export default {
|
name: "login",
|
data() {
|
return {
|
isLoading: false,
|
saveAccount: false,
|
// hasErrors,
|
// form: this.$form.createForm(this),
|
form: {
|
name: '',
|
pwd: '',
|
keyId:'',//锁id
|
keyUserName:'',//锁中的用户身份
|
returnEncData:'',//签名数据
|
rnd:"123"//随机字符
|
},
|
rules: {
|
name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
pwd: [{ required: true, message: '请输入用户密码', trigger: 'blur' }]
|
},
|
menu: [],
|
keyMsg: '未检测到加密证书，请确保已连接',
|
};
|
},
|
created() {
|
// this.$nextTick(() => {
|
// this.form.validateFields();
|
// });
|
this.hasUserCodeOrPassword()
|
//检测key
|
this.checkKey()
|
},
|
methods: {
|
downLoadLKey () {
|
console.log('222')
|
const { href } = this.$router.resolve({
|
path: '/downKey'
|
})
|
window.open(href,'_blank')
|
|
},
|
hasUserCodeOrPassword(){
|
if (localStorage.getItem('userName') && localStorage.getItem('userPassword')) {
|
this.form.name = localStorage.getItem('userName')
|
this.form.pwd = Base64.decode(localStorage.getItem('userPassword'))//解密
|
this.saveAccount = true
|
}
|
},
|
async checkKey() {
|
let mSoftKey3A = new SoftKey3W();//注意，由于USB的操作是异步的，所以所有函数的调用前必须加await !!!!!!!!!
|
let DevicePath = await mSoftKey3A.FindPort(1);//'查找是否存在多把加密锁
|
if (mSoftKey3A.GetLastError() == 0) {
|
this.keyMsg = "系统发现有2把及以上的加密证书"
|
return false
|
}
|
DevicePath = await mSoftKey3A.FindPort(0);//'查找是否存在加密锁
|
if (mSoftKey3A.GetLastError() != 0) {
|
this.keyMsg = "未检测到加密证书，请确保已连接"
|
return false
|
}
|
this.keyMsg = ""
|
},
|
|
isSave(e){
|
const t = this
|
t.saveAccount = !t.saveAccount
|
},
|
async checkUsbkeyData(){
|
let mSoftKey3A = new SoftKey3W();//注意，由于USB的操作是异步的，所以所有函数的调用前必须加await !!!!!!!!!
|
let DevicePath = await mSoftKey3A.FindPort(1);//'查找是否存在多把加密锁
|
console.log(mSoftKey3A,'mSoftKey3A')
|
if (mSoftKey3A.GetLastError() == 0) {
|
this.keyMsg = "系统发现有2把及以上的加密证书"
|
this.$message.warning( "系统发现有2把及以上的加密证书");
|
return false
|
}
|
DevicePath = await mSoftKey3A.FindPort(0);//'查找是否存在加密锁
|
if (mSoftKey3A.GetLastError() != 0) {
|
this.keyMsg = "未检测到加密证书，请确保已连接"
|
this.$message.warning( "未检测到加密证书，请确保已连接");
|
return false
|
}
|
console.log(DevicePath,'devpathhh')
|
//'读取锁的唯一ID
|
this.form.keyId=await mSoftKey3A.GetChipID(DevicePath);
|
|
if( mSoftKey3A.GetLastError()!= 0 )
|
{
|
this.$message.warning("返回芯片唯一ID时出现错误，错误码为："+mSoftKey3A.GetLastError().toString())
|
return false
|
}
|
console.log(this.form.keyId,'this.form.keyId')
|
//从锁中取出用户身份，与签名后的数据一并送到服务端进行验证。以验证用户身份
|
this.form.keyUserName=await mSoftKey3A.GetSm2UserName(DevicePath);
|
|
if( mSoftKey3A.GetLastError()!= 0 )
|
{
|
this.$message.warning( "返回用户身份时出现错误，错误码为："+mSoftKey3A.GetLastError().toString());
|
return false
|
}
|
console.log(this.form.keyUserName,'this.form.keyUserName')
|
//使用默认的PIN码
|
var Pin="123"
|
//这里使用锁中的私钥对身份-用户名及消息-随机数的进行数字签名,使用默认的PIN码，返回签名后的数据
|
this.form.rnd=String(parseInt(Math.random()*(65536+1),10));
|
this.form.returnEncData=await mSoftKey3A.YtSign(this.form.rnd,Pin,DevicePath);
|
if( mSoftKey3A.GetLastError()!= 0 )
|
{
|
this.$message.warning( "进行签名时出现错误，错误码为："+mSoftKey3A.GetLastError().toString());
|
return false
|
}
|
if(this.form.name!=this.form.keyUserName){
|
this.$message.warning( "用户身份不一致，无法登陆");
|
return false
|
}
|
console.log(this.form.returnEncData,'this.form.returnEncData')
|
console.log(this.form,'this.form')
|
return true
|
},
|
|
async handleSubmit() {
|
this.$refs.ruleForm.validate(async (valid) => {
|
if (valid) {
|
let checkUsb=await this.checkUsbkeyData()
|
if(!checkUsb){
|
return
|
}
|
this.isLoading = true
|
const res = await login(this.form)
|
if (res.data.code === 100) {
|
Cookies.set('resTk', res.data.data.tk);
|
Cookies.set('resUid', res.data.data.uid);
|
Cookies.set('userInfo',JSON.stringify(res.data.data),{expires: 7})
|
if (this.saveAccount) {
|
localStorage.setItem('userName', this.form.name)
|
localStorage.setItem('userPassword', Base64.encode(this.form.pwd))
|
} else {
|
localStorage.removeItem('userName')
|
localStorage.removeItem('userPassword')
|
}
|
this.$router.push('/home')
|
} else {
|
this.$message.warning(res.data.msg);
|
}
|
this.isLoading = false
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
p{
|
color:#fff;
|
margin-top: 55px;
|
}
|
h2{
|
font-size: 30px;
|
}
|
.bd {
|
width: 100%;
|
height: 100vh;
|
background: url('../assets/img/bg.jpeg') no-repeat;
|
background-size: 100% 100%;
|
background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
|
}
|
|
|
/deep/ .ant-tabs-bar {
|
border-bottom: 0px;
|
text-align: center;
|
}
|
.hedaer {
|
margin: 0px auto;
|
padding-top:200px;
|
width: 1000px;
|
text-align: center;
|
text-shadow:0 0 1px #000;
|
h2{font-size: 36px;color:#fff;}
|
h1{font-size: 48px;color:#fff;}
|
}
|
.login {
|
|
.login-form {
|
width: 400px;
|
margin: 60px auto 0px;
|
|
}
|
}
|
.ant-tabs{
|
color:#fff;
|
}
|
</style>
|
