Login.vue

<template>
	<div id="login" :style="{height:innerHeight+'px'}">
		<h1>视频分析综合管理平台</h1>
		<div class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<input type="text" class="form-control" v-model="username" id="username" placeholder="请输入用户名">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<input type="password" class="form-control" v-model="password" id="password" placeholder="请输入密码">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<button class="btn" @click.stop="login">登录</button>
				</div>
			</div>
			<!--<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<p>北京文安智能技术股份有限公司</p>
					<p>v2.0.0.1</p>
				</div>
			</div>-->
		</div>
	</div>
</template>

<script>
let sha1 = require('js-sha1');
import types from '../store/types.js'
	export default {
		name: 'Login',
		data() {
			return {
				username: '',
				password: '',
				innerHeight:0
			}
		},
		methods: {
			initHeight(){
				this.innerHeight=window.innerHeight;
			},
			login(){
				this.$api.login.login({
					    "username":this.username,
					    "password":this.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)
							//本系统可以直接用本地缓存做
							
							this.getMenu(res.user_unid)
						// localStorage.setItem('user_name',this.username)
						// 处理登录用户权限菜单显示问题;
						//算法配置列表
						this.algoList();
						//存储配置列表
						this.storeConfList();
						//code列表
						this.getCodeList();
						this.getCustomCode();
						this.getEventList();
						this.getDev();
					}

				}).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) => {
				})
				
			},
			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)
				})
			},	
		},
		watch: {},
		mounted() {
		},
		created() {
			this.initHeight();
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.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;
	}
	.form-horizontal {
		width: 450px;
		height: 350px;
		background: url(../assets/img/login/233.png) no-repeat;
		background-size: 500px 430px;
		position: absolute;
		left: 58%;
		top: 200px;
		padding-top:50px;
		border-radius: 10px;
	}

	h1 {
		color: #F5F5F5;
		height: 40px;
		line-height: 40px;
		padding: 60px 0px;
		position: absolute;
		left:10%;
		top:220px;
		font-size:50px;
		letter-spacing: 8px;
		text-shadow: 5px 5px 5px #000
	}

	#login {
		text-align: center;
		position: relative;
		background: url(../assets/img/login/2333.png) no-repeat 0 0;
		background-size:cover
	}
	#login input {
		color: #fff;
		background: rgba(255,255,255,.5);
		border-radius: 0;
		border: none;
		border: 1px solid #86B1DB;
		box-shadow: none;
		margin-top: 20px;
		height: 40px;
		/* line-height: 40px; */
		border-radius: 5px;
		font-size: 16px;
	}

	#login input:focus {
		outline: none;
		box-shadow: none;
	}

	button {
		width: 60%;
		margin-top: 40px;
		background: #09cef7;
		color: #fff!important;
		height: 40px;
		font-size: 20px;
	}

	button:hover {
		color: #D6D9DF
	}

	p {
		color: #fff;
		margin: 0;
	}

	p:nth-child(1) {
		padding-top: 15px
	}
</style>