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({
						user_name: this.username,
						// user_password: this.password
						user_password: sha1(this.password),
					}).then(res => {
					if(!res.ecode){
						this.$store.commit(types.ATOKEN,res.token);
						// localStorage.setItem('rtoken',m.data.rtoken)
      //       localStorage.setItem('user_unid',m.data.role_unid)
      //       localStorage.setItem('uid',m.data.unid)
							localStorage.setItem('menu', JSON.stringify(res.menu_list))
							//本系统可以直接用本地缓存做
							this.$store.dispatch('GetMenuRole',res.menu_list).then(res => {
								this.$router.push('/')
							}) //获
						// localStorage.setItem('user_name',this.username)
            // localStorage.setItem('client_unid',new Date().getTime() + Math.round(Math.random() * 10000000000000))
            // localStorage.setItem('past_timer',new Date().getTime() + 24*60*60*10000)
						// 处理登录用户权限菜单显示问题;
						//算法配置列表
						this.algoList();
						//存储配置列表
						this.storeConfList();
						//code列表
						this.getCodeList();
						this.getEventList();
					}

				}).catch((err) => {
				})
			},
			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.login.cates().then(res => {
					res.list_data.forEach(item=>{
						this.$api.login.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) => {
				})
			},
			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)
					})
				})
			},
		},
		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>