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("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("/");
            });
        });
    },
    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();
  }
};
</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>