Login.vue

<template>
  <div id="login" :style="{ height: innerHeight + 'px' }">
	  <!-- ie空白解决方法https://blog.csdn.net/heyNewbie/article/details/99623550 -->
    <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("atoken", res.atoken);
            // 处理登录用户权限菜单显示问题;
            //算法配置列表
            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('/trficcshow')
					}) 
				})
			},
			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>