mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/login.vue

<template>
  <div class="login">
    <div class="page-description" v-if="config.pageDescription">
      <span class="description" v-html="config.pageDescription"> </span>
      <span class="sub-description"> 登录并开始管理您的智能引擎账户 </span>
    </div>
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <el-row>
        <el-col :span="12" class="comlogo"></el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark title">
            工业应用操作系统
            <!-- 智能制造平台 -->
          </div>
        </el-col
        >
      </el-row>
      <el-row class="rowww">
        <el-col :span="12" class="text" prop="username">用户名</el-col>
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
          class="inputt"
        />
      </el-row>
      <el-row class="roww">
        <el-col :span="12" class="text" prop="password">密码</el-col>
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
          show-password
          class="inputt"
        >
        </el-input>
      </el-row>
      <el-row class="roww">
        <el-row>
          <el-col class="text" prop="code">验证码</el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              @keyup.enter.native="handleLogin"
              class="inputt"
            >
            </el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
            </div>
          </el-col>
        </el-row>
      </el-row>

      <el-row class="bottomtext">
        <!-- <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img" />
        </div> -->
        <el-checkbox v-model="loginForm.rememberMe" class="aaa"
        >在这个设备上记住我
        </el-checkbox
        >
      </el-row>

      <el-row>
        <el-col
          class="logg"
          :loading="loading"
          @click.native.prevent="handleLogin"
        >登录
        </el-col
        >
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getCodeImg, isTenantExist} from "@/api/login";
import {changeDatasource} from "@/api/dataEngine";
import Cookies from "js-cookie";
import {encrypt, decrypt} from "@/utils/jsencrypt";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      tenantId: "",
      loginForm: {
        tenantCode: "", //租户编号
        username: "",
        password: "",
        // username: "admin",
        // password: "admin123",
        rememberMe: false,
        code: "",
        uuid: "",
        tenantID: ""
      },
      loginRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"},
        ],
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"},
        ],
        code: [{required: true, trigger: "blur", message: "请输入验证码"}],
      },
      loading: true,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined,
      // 页面配置数据
      config: {},
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.validateTenantId()
  },
  methods: {
    // 校验url
    validateTenantId() {
      let tenantCode = this.$route.query['tenantCode']
      if (tenantCode != null) {
        // 得到tenantId 查询裤中是否存在该租户
        isTenantExist({tenantCode: tenantCode}).then(res => {
          if (res.data?.tenantId) { // 判断当前编号是否存在库中

            this.tenantId = res.data.tenantId;
            this.loginForm.tenantID = this.tenantId;

            // 得到租户的信息
            this.config = res.data.loginPageConfiguration
            this.setConfig();

            // 如果当前租户没有配置登录页面则不可访问
            if (this.config == null && this.config == undefined) {
              // this.$router.push({path: "/404"})
              this.getCode();
              this.getCookie();
            } else {
              this.getCode();
              this.getCookie();
            }
          } else {
            // 当前访问链接中的租户编号不存在
            this.$router.push({path: "/404"})
          }
        })
      } else {
        console.log('跳转')
        this.$router.push({path: "/404"})
      }
    },
    setConfig() {
      let {
        loginPageTitle,
        loginPageDescription,
        loginPageLogo,
        loginPageBackgroundImage,
        windowTitle,
        windowLogo,
      } = this.config;

      // 设置背景图
      if (loginPageBackgroundImage) {
        let loginBgDom = document.getElementsByClassName("login");
        if (loginBgDom.length > 0) {
          loginBgDom[0].style.backgroundImage = `url(${
            process.env.VUE_APP_BASE_IMG_API + loginPageBackgroundImage
          })`;

          console.log("" + `url(${
            process.env.VUE_APP_BASE_IMG_API + loginPageBackgroundImage
          })`)
        }
      }

      // 设置logo
      if (loginPageLogo) {
        let loginLogoDom = document.getElementsByClassName("comlogo");
        if (loginLogoDom.length > 0) {
          loginLogoDom[0].style.backgroundImage = `url(${
            process.env.VUE_APP_BASE_IMG_API + loginPageLogo
          })`;
        }
        window.sessionStorage.setItem("logo", loginPageLogo);
      }
      // 设置title
      if (loginPageTitle) {
        let titleDom = document.getElementsByClassName("title");
        console.log(titleDom);
        if (titleDom.length > 0) {
          titleDom[0].innerHTML = loginPageTitle;
        }
        window.sessionStorage.setItem("title", loginPageTitle);
      }
      // 设置meta信息
      if (windowTitle) {
        document.title = windowTitle;
        console.dir(document);
      }
      // 设置页面描述
      if (loginPageDescription) {
        this.config.pageDescription = loginPageDescription;
      }
      // 更换favicon.ico
      // if (windowLogo) {
      //   // let url = process.env.VUE_APP_BASE_API + windowLogo;
      //   let url = "@/assets/images/favicon1.ico";
      //   console.log(url);
      //   var link = document.createElement("link"),
      //     oldLink = document.getElementById("dynamic-favicon");
      //   link.id = "dynamic-favicon";
      //   link.rel = "shortcut icon";
      //   link.href = url;
      //   if (oldLink) {
      //     document.head.removeChild(oldLink);
      //   }
      //   document.head.appendChild(link);
      // }
    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },

    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, {expires: 30});
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          let form = {
            ...this.loginForm,
            tenantID: this.tenantId
          }
          this.$store.dispatch("Login", form).then(() => {
            changeDatasource(); //切换数据源
            this.$router.push({path: this.redirect || "/"}).catch(() => {
            });
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep.el-input--medium .el-input__inner {
  height: 54px;
  line-height: 54px;
}

.login {
  position: relative;

  .page-description {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-100%);
    display: flex;
    flex-direction: column;

    .description {
      display: block;
      font-size: 38px;
      font-weight: 800;
      color: #fff;
      width: 200px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 120px;
      max-height: 120px;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
    }

    .sub-description {
      font-size: 20px;
      color: #fff;
      font-weight: 400;
    }
  }
}

.logg {
  margin-top: 42px;
  margin-left: 196px;
  width: 240px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  opacity: 1;
  border-radius: 27px;
  background: linear-gradient(
      135deg,
      rgba(79, 138, 255, 1) 0%,
      rgba(75, 94, 255, 1) 100%
  );
  box-shadow: 0px 4px 16px rgba(179, 192, 231, 1);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}

.aaa {
  width: 248px;
  height: 24px;
  font-size: 16px !important;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 24px;
  color: rgba(58, 63, 99, 1);
  text-align: left;
  vertical-align: top;
  margin-top: 16px;
}

.bottomtext {
  margin-top: -5px !important;
  margin-left: 58px !important;
}

.rowww {
  width: 522px;
  height: 80px;
  margin-top: 25px;
  margin-left: 55px;
}

.roww {
  width: 522px;
  height: 80px;
  margin-top: 16px;
  margin-left: 55px;
}

.ppp {
  width: 522px;
  height: 24px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 24px;
  color: rgba(58, 63, 99, 1);
  text-align: left;
  vertical-align: top;
}

.el-input__inner {
  width: 522px;
  /* height: 54px  !important; */
}

.inputt {
  /* height: 54px !important; */
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(218, 224, 242, 1);
  margin-top: 2px;
}

.inputt input {
  width: 100%;
}

.comlogo {
  margin-left: 28px;
  margin-top: 57px;
  width: 194px;
  height: 64px;
  background: url(../assets/images/mec_logo_login.png);
  // background: url(../assets/images/comp.png);
  /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); */
  opacity: 1;
  background-size: cover;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/background.jpg");
  background-size: cover;
}

.title {
  width: 258px;
  height: 35px;
  margin-top: 69px;
  margin-left: 17px;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 38.4px;
  color: rgba(7, 68, 138, 1);
  text-align: left;
  vertical-align: top;
  float: left;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-form {
  margin-left: 44%;
  margin-top: 48px;
  width: 621px;
  height: 624px;
  opacity: 1;
  border-radius: 39px;
  background: rgba(255, 255, 255, 1);
  float: left;
}

.login-code {
  width: 40px;
  height: 54px;
  opacity: 1;
}

.el-col-18 {
  width: 66%;
}
</style>