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"
      :class="formHeightClass"
    >
      <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" v-if="this.loginForm.isYanMa=='yes'">
        <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, ssoLogin } 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: "",
        isYanMa:"",
      },
      formHeightClass: 'happy2', // 初始类名
      loginRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"},
        ],
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"},
        ],
        code: [{required: true, trigger: "blur", message: "请输入验证码"}],
      },
      loading: true,
      // 验证码开关
      captchaEnabled: false,
      // 注册开关
      register: false,
      redirect: undefined,
      // 页面配置数据
      config: {},
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
    'loginForm.isYanMa': {
        handler(newVal) {
          console.log('isYanMa changed:', newVal);
          // 可以在这里执行一些额外的操作
          if(newVal=="yes"){
            this.formHeightClass="happy2"
          }else {
            this.formHeightClass="happy1"
            console.log("hmc")
          }
        },
        immediate: true, // 立即触发一次
        deep: true
    }
  },
  created() {
    this.validateTenantId();
  },
  computed: {
  },
  methods: {
    // client_id=x3qwrgrO1wYdz72joZ8YyIuD&scope=basic&response_type=code&state=AB1357&redirect_uri=http://127.0.0.1:8001/login


    // 校验url
    validateTenantId() {
      let tenantCode = this.$route.query["tenantCode"];
      if (tenantCode != null) {
        // 得到tenantId 查询裤中是否存在该租户
        isTenantExist({tenantCode: tenantCode}).then((res) => {
          if (res == undefined) {
            this.$message.warning("请访问正确地址！");
            this.$router.push({path: "/401"});
          } else if (res.data?.tenantId) {
            // 判断当前编号是否存在库中
            this.tenantId = res.data.tenantId;
            this.loginForm.tenantID = this.tenantId;
            if (res.data.loginPageConfiguration != null) {
              // 得到租户的信息
              this.config = res.data.loginPageConfiguration;
              this.setConfig();
            }
            this.getCode();
            this.getCookie();
          } else {
            // 当前访问链接中的租户编号不存在
            this.$router.push({ path: "/401" });
          }
        });
      } else {
        this.$router.push({ path: "/401" });
      }
    },
    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;
          this.$set(this.loginForm, 'isYanMa', 'yes'); // 使用 this.$set
          console.log("设置是否显示验证码")
        }else {
          console.log("设置是否显示验证码")
          this.$set(this.loginForm, 'isYanMa', 'no'); // 使用 this.$set
        }
      });
    },
    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 = {
               uri: "?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.2.127:8066/oauth/callback",
               //uri:"?client_id=mestools&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.128.171:8066/oauth/callback",
              // uri:"?client_id=mestools&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.2.135:8066/oauth/callback",
             //uri:"?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.110.85:8066/oauth/callback",
             // uri:"?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.110.83:8066/oauth/callback",
            // uri:"?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://172.20.10.5:8066/oauth/callback",
            //   uri:"?client_id=mestools&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.0.17:8066/oauth/callback",
            ...this.loginForm,
            tenantID: this.tenantId,
          };
          // 调用单点登录
          ssoLogin(form)
            .then((response) => {
              this.loading = false;
              if (response.code === 200) {
                // Message({message: response.msg, type: "success"});
                console.log("认证成功！", response);
                // response.msg 当前用户唯一标识 跳转其他系统使用
                // this.$store.dispatch("setoauthUUID", response.msg);
                window.localStorage.setItem(
                  "setoauthUUID" + this.loginForm.username,
                  response.msg
                );
                setTimeout(() => {
                  global.window.location.href = response.data;
                }, 1000);
              }
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            });
          // 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;
}
.happy2{
   height: 624px;
}
.happy1{
  height: 540px;
}
.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: 26px;
  margin-top: 49px;
  width: 200px;
  height: 70px;
  background: url(../assets/images/mecos-logo1.jpg);
  // background: url(../assets/images/mes412.png); //工联院
  /* background: url(../assets/images/comp.png); */
  /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); */
  opacity: 1;
  background-size: cover;
  // 工联院  样式
  // background-size: contain;
  // background-repeat: no-repeat;
  // background-position: center;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/background1.jpg");
  background-size: 100% 100%;
  /* padding-bottom: 55.19%;  */
  background-position: center;
  background-repeat: no-repeat;
}

.title {
  width: 258px;
  height: 35px;
  margin-top: 70px;
  margin-left: 8px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 38.4px;
  /* color: rgba(7, 68, 138, 1); */
  color: black;
  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>