Login.vue

<template>
	<div id="login" :style="{height:innerHeight+'px'}">
		<vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
			<div class="box">
				<h1>视频分析综合管理平台</h1>
				<div style="width: 60%;margin: 0 auto;">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item label=" " prop="username">
						<el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label=" " prop="password">
					<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button>
					</el-form-item>
					</el-form>
				</div>
			</div>
	</div>
</template>

<script>
let sha1 = require('js-sha1');
import types from '../store/types.js'
	export default {
		name: 'Login',
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
				  callback(new Error('请输入密码'));
				} else {
				  callback();
				}
			  };
			  var validateUser = (rule, value, callback) => {
				if (value === '') {
				  callback(new Error('请输入用户名'));
				} else {
				  callback();
				}
			  };
			return {
				username: '',
				password: '',
				innerHeight:0,
				ruleForm:{
					username:'',
					password:'',
				},
				rules: {
				  password: [
					{ validator: validatePass, trigger: 'change' }
				  ],
				  username: [
					{ validator: validateUser, trigger: 'change' }
				  ]
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
						this.login();
				  } else {
					return false;
				  }
				});
			 },
			initHeight(){
				this.innerHeight=window.innerHeight;
			},
			login(){
				this.$api.login.login({
					    "username":this.ruleForm.username,
					    "password":this.ruleForm.password,
						"user_type": "user"
					}).then(res => {
					if(!res.ecode){
						this.$store.commit(types.ATOKEN,res.atoken);
						// localStorage.setItem('rtoken',m.data.rtoken)
						sessionStorage.setItem('user_unid',res.user_unid)
							//本系统可以直接用本地缓存做
							
						// localStorage.setItem('user_name',this.username)
						// 处理登录用户权限菜单显示问题;
						//算法配置列表
						this.algoList();
						//存储配置列表
						this.storeConfList();
						//code列表
						this.getCatesList();
						this.getCodeList();
						this.getCustomCode();
						this.getEventList();
						this.getDev();
						this.getMenu(res.user_unid);
					}

				}).catch((err) => {
				})
			},
			getMenu(id){
				//获取菜单
				this.$api.login.getMenus({
					"shape":"tree"
				}).then(res=>{
					localStorage.setItem('menu', JSON.stringify(res.menu_tree[0].children))
					this.$store.dispatch('GetMenuRole',res.menu_tree[0].children).then(res => {
						this.$router.push('/')
					}) 
				})
			},
			algoList() {
				this.$api.login.algocombs({
					limit: '',
					algo_set: 'video'
				}).then(res => {
					if(!res.ecode){
						this.$store.commit(types.ALGO,res.list_data);
					}
				}).catch((err) => {
				})
			},
			storeConfList(){
				this.$api.login.storeconfs({
					offset: 0,
					limit: ''
				}).then(res => {
					if(!res.ecode){
						this.$store.commit(types.STORECONF,res.list_data);
					}
				}).catch((err) => {
				})
			},
			getCodeList(){
				this.$api.codes.cates().then(res => {
					res.list_data.forEach(item=>{
						this.$api.codes.codes({
						},item.cate_unid).then(res => {
							// 存储code列表
								window.localStorage.setItem(item.name,JSON.stringify(res.list_data))
								// 存储单独code
								res.list_data.forEach(chilItem=>{
									window.localStorage.setItem(item.name+'-'+chilItem.code,chilItem.name)
								})
						}).catch((err) => {
						})
					})
				}).catch((err) => {
				})
			},
			getCustomCode(){
				this.$api.codes.customCode().then(res => {
					if(res.list_data.length > 0) {
						res.list_data.forEach((item) => {
							window.localStorage.setItem(item.name + '-' + item.cate, item.unid);
						})
					} else {
						this.$message({
							type: 'warning',
							message: '获取自定义编码失败!'
						})
					}
				}).catch((err) => {
				})
				
			},
			getCatesList(){
				this.$api.codes.eventCates({}).then(res=>{
					// 存储cate列表
						window.localStorage.setItem('cate列表',JSON.stringify(res.list_data))
					// 存储单独code
					res.list_data.forEach(item=>{
						this.getOneEventList(item.code,item.event_cate_unid)
					})
				})
			},
			getOneEventList(code,id){
				this.$api.codes.eventType({},id).then(res=>{
					// 存储cate列表
						window.localStorage.setItem(code,JSON.stringify(res.list_data))
				})
			},
			getEventList(){
				this.$api.search.eventTypes({}).then(res=>{
					// 存储code列表
						window.localStorage.setItem('安防事件',JSON.stringify(res.list_data))
					// 存储单独code
					res.list_data.forEach(item=>{
						window.localStorage.setItem('安防事件-'+item.code,item.name)
					})
				})
			},
			getDev() {
				this.$api.resource.devs().then(res => {
					sessionStorage.setItem('dev_unid',res[0].dev_unid);
					this.getDevsName(res[0].dev_unid);
				})
			},	
			getDevsName(id){
				this.$api.resource.getDevsName({
					is_leaf: 0
				},id).then(res=>{
					if(res.list_data.length>0){
						sessionStorage.setItem('device_id',res.list_data[0].device_id);
					}
				})
			},
		},
		watch: {},
		mounted() {
		},
		created() {
			this.initHeight();
			let _this=this;
			document.onkeydown = function(e){
			let _key = window.event.keyCode;
				if(_key === 13){
					_this.submitForm('ruleForm');
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	#particles{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #b61924;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
}
	.loginTitle{
		height:60px;
		background: #dcdcdc;
		position: relative;
	}
	.loginTitle>div{
		position: absolute;
		text-align: left;
		/*left: 5%;*/
		height: 60px;
		/*margin-top: 15px;*/
		/*background: url(../assets/daer.jpg) no-repeat;*/
		padding-left: 50px;
		background-size: 100% 60px;
		width:150px
	}
	.loginTitle>div span:first-child{
		position: absolute;
		left:50px;
		top: -5px;
		font-weight: bold;
		font-size: 18px;
		font-family: "隶书";
	}
	.loginTitle>div span:last-child{
		font-weight: 500;
		font-size: 12px;
		font-family: Aparajita;
		position: absolute;
		left:50px;
		top: 16px;
	}

	h1 {
		color: #000000;
		height: 40px;
		line-height: 40px;
		padding: 60px 0px;
		font-size:44px;
	}

	#login {
		text-align: center;
		position: relative;
		background: url(../assets/img/login/background.png) no-repeat 0 0;
		background-size:cover
	}

	#login input:focus {
		outline: none;
		box-shadow: none;
	}
.box{
	width: 25%; 
	position: absolute;
	left: 52%;
	top: 20%;
}
	button {
		width: 100%;
		margin-top: 40px;
		border-radius: 30px;
		background: #0069FF;
		height: 50px;
		font-size: 20px;
	}

	button:hover {
		color: #D6D9DF
	}

	p {
		margin: 0;
	}

	p:nth-child(1) {
		padding-top: 15px
	}
	@media screen and (max-width: 1366px) {
	    h1 {
	        height: 40px;
	        line-height: 40px;
	        padding: 60px 0px;
	        font-size:34px;
	    }
		.box{
			width: 25%; 
			position: absolute;
			left: 57%;
			top: 20%;
		}
	}
</style>