235 lines
7.1 KiB
Vue
235 lines
7.1 KiB
Vue
<template>
|
||
<a-spin :spinning="spinning">
|
||
<div :style="{ background: isPhone ? 'none' : 'url(' + bgimg + ')', height:'100vh', }">
|
||
<img :src="img1" v-if="!isPhone" style="position:absolute;top:0;left:0;" />
|
||
<img :src="img2" v-if="!isPhone" style="position:absolute;bottom:0;right:0;" />
|
||
<div :id=" isPhone ? '' : 'login-contain'">
|
||
<!-- <el-row style="height:35px;" v-if="!isPhone">
|
||
<el-alert :closable="false" title="水质检测平台" type="error" effect="dark"></el-alert>
|
||
</el-row> -->
|
||
<a-row style="height:480px;background:#0E6F75;">
|
||
<a-col
|
||
:span="15"
|
||
:style="{backgroundImage:'url(' + logobg + ')', height:'480px', overflow:'hidden', textAlign:'center'}"
|
||
id="login-left"
|
||
v-if="!isPhone"
|
||
>
|
||
<img :src="logo" />
|
||
<p>
|
||
<span style="color:white;font-size: 26px;font-weight: bold;text-shadow: 0 0 10px black;">湖北富瑞尔科技有限公司水质监测平台</span>
|
||
</p>
|
||
<div style="color:white;font-size: 13px;font-weight: bold;text-shadow: 0 0 7px black;">
|
||
<p>
|
||
当前版本: 1.1.0
|
||
</p>
|
||
<p>
|
||
后台版本: 1.1.0
|
||
</p>
|
||
<p>
|
||
版本记录：
|
||
</p>
|
||
<p>
|
||
2020-11-30:
|
||
1.0.0版本上线，初步实现后台管理与信息查询功能，实现权限管理
|
||
</p>
|
||
<p>
|
||
2020-12-06：
|
||
1.0.1版本，修复后台管理中人员等_id为undefined等bug
|
||
</p>
|
||
<p>
|
||
2020-12-7：
|
||
1.0.2版本，修复字体背景遮挡问题
|
||
</p>
|
||
<p>
|
||
2021-1-4：
|
||
1.1.0版本，添加分时数据查询功能，提供表格与图表两种方式，对数据时间范围进行限制
|
||
后台进行调整，对分时数据时间范围进行限制
|
||
</p>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span=" isPhone ? 24 : 9" style="height:480px;overflow:hidden;">
|
||
<a-form ref="form" :model="form" label-width="0" style="margin:50px;text-align:center;">
|
||
<a-form-item style="text-align:center;">
|
||
<img :src="avter" />
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-input prefix-icon="el-icon-user-solid" v-model="form.utel" placeholder="请输入用户名"></a-input>
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-input
|
||
prefix-icon="el-icon-lock"
|
||
type="password"
|
||
v-model="form.upass"
|
||
autocomplete="off"
|
||
placeholder="请输入密码"
|
||
></a-input>
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-input
|
||
prefix-icon="el-icon-lock"
|
||
v-model="form.checkcode"
|
||
placeholder="请输入验证码"
|
||
/>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<input
|
||
type="button"
|
||
id="code"
|
||
@click="createCode"
|
||
class="verification1"
|
||
v-model="checkCode"
|
||
/>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-row :gutter="10">
|
||
<a-col :span="24">
|
||
<a-button style="width:100%;" type="danger" @click="login()">登录</a-button>
|
||
</a-col>
|
||
<!-- <a-col :span="24">
|
||
<a-button style="width:100%;" @click="reset()">重置</a-button>
|
||
</a-col>-->
|
||
</a-row>
|
||
|
||
<!-- <a-button @click="reset()">重置</a-button> -->
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { getData, login, logout, URL_MAP } from "@/utils/http";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
msg: "",
|
||
form: {
|
||
utel: "",
|
||
upass: "",
|
||
checkcode: ""
|
||
},
|
||
loading: null,
|
||
img1: "",
|
||
img2: "",
|
||
logo: "",
|
||
bgimg: "",
|
||
avter: "",
|
||
logobg: "",
|
||
checkCode: "",
|
||
random: [],
|
||
spinning: false,
|
||
};
|
||
},
|
||
computed: {
|
||
isPhone() {
|
||
return this.$store.getters.phone
|
||
}
|
||
},
|
||
methods: {
|
||
async login() {
|
||
try {
|
||
this.spinning = true;
|
||
// dev
|
||
// if (
|
||
// this.form.checkcode.toUpperCase() !== this.checkCode.toUpperCase()
|
||
// ) {
|
||
// this.$message.error("验证码错误！");
|
||
// this.createCode();
|
||
// this.loading.close();
|
||
// return;
|
||
// }
|
||
let data = await login(this.form.utel, this.form.upass, 'tt', 'tt');
|
||
this.$store.commit("login", data);
|
||
/**
|
||
* 初始化设备数据、传感器数据
|
||
*/
|
||
let results = [
|
||
getData(URL_MAP.DEVICE_LIST),
|
||
getData(URL_MAP.SENSOR_LIST),
|
||
getData(URL_MAP.PROJECT_LIST),
|
||
getData(URL_MAP.RULES_LIST),
|
||
]
|
||
data = await Promise.all(results)
|
||
this.$store.commit('deviceList', data[0].data)
|
||
this.$store.commit('sensorList', data[1].data)
|
||
this.$store.commit('projectList', data[2].data)
|
||
this.$store.commit('ruleList', data[3].data)
|
||
let path = decodeURIComponent(this.$route.query.redirect || "/");
|
||
this.$router.push({ path: path });
|
||
} catch (e) {
|
||
this.$message.error("账号或密码错误！");
|
||
this.createCode();
|
||
} finally {
|
||
this.spinning = false
|
||
}
|
||
},
|
||
reset() {
|
||
this.form.utel = "";
|
||
this.form.upass = "";
|
||
this.form.checkcode = "";
|
||
},
|
||
createCode() {
|
||
let code = "";
|
||
var codeLength = 4; //验证码的长度
|
||
|
||
for (var i = 0; i < codeLength; i++) {
|
||
//循环操作
|
||
var index = Math.floor(Math.random() * this.random.length); //取得随机数的索引（0~35）
|
||
code += this.random[index]; //根据索引取得随机数加到code上
|
||
}
|
||
this.checkCode = code; //把code值赋给验证码
|
||
}
|
||
},
|
||
created() {
|
||
for (var i = 0; i < 10; i++) {
|
||
this.random.push(i);
|
||
}
|
||
for (var i = 65; i < 91; i++) {
|
||
this.random.push(String.fromCharCode(i));
|
||
}
|
||
for (var i = 97; i < 123; i++) {
|
||
this.random.push(String.fromCharCode(i));
|
||
}
|
||
},
|
||
async mounted() {
|
||
|
||
this.$store.commit('phone', document.body.clientWidth < 760)
|
||
this.img1 = require("../assets/login-img.png");
|
||
this.img2 = require("../assets/login-img3.png");
|
||
this.logo = require("../assets/login-logo.png");
|
||
this.bgimg = require("../assets/back.jpg");
|
||
this.avter = require("../assets/login-portrait.png");
|
||
this.logobg = require("../assets/back.jpg");
|
||
this.createCode();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
#login-contain {
|
||
width: 852px;
|
||
height: 480px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
box-shadow: 0px 0px 32px #0c2d36;
|
||
}
|
||
#code {
|
||
font-size: 18px;
|
||
letter-spacing: 3px;
|
||
color: #031424;
|
||
background: #f2f2f5;
|
||
}
|
||
</style> |