内容提交

longyvfengyun

2023-12-25 d8d792a6842832e8f6af6604274c438b25053afe

 src/pages/login.vue

@@ -1,580 +1,1180 @@
<template>
    <div class="login-wrapper">
        <div class="login_container">
            <div class="sliderCon">
                <div class="logo">
                    <img :src="logoUrl" class="logoImg">
                    {{ platformName }}
                </div>
                <img src="../assets/images/login-img.png" class="picImg">
            </div>
            <div class="login_box">
                <div class="title">用户登录</div>
                <!--  登录表单区 -->
                <el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
                    <!-- 用户名 -->
                    <el-form-item prop="username">
                        <el-input class="input" v-model="loginForm.username" prefix-icon="el-icon-user"
                                  @keyup.enter.native.stop="onSubmit"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
                                  @keyup.enter.native.stop="onSubmit"></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
                    </el-form-item>
                    <el-form-item v-if="!register">
                        <a href="javascript:;" @click="license.show = true"
                           class="regBtn">平台注册</a>
                    </el-form-item>
                    <el-form-item v-else>
                        <a href="javascript:;" class="regBtn">已激活</a>
                    </el-form-item>
                </el-form>
            </div>
            <!-- license弹框输入面板 -->
            <el-dialog
                title="平台注册提示" width="600px"
                :visible.sync="license.show"
                :close-on-click-modal="false" top="0"
                class="dialog-center" :modal-append-to-body="false">
                <add-license v-if="license.show" :visible.sync="license.show"></add-license>
            </el-dialog>
            <!-- 人脸登陆 -->
            <el-dialog
                title="人脸登陆" width="480px"
                :visible.sync="face.show"
                :close-on-click-modal="false" top="0"
                class="dialog-center" :modal-append-to-body="false">
                <face-login v-if="face.show" :visible.sync="face.show" @success="checkServeLicense"></face-login>
            </el-dialog>
            <!-- 功能描述 -->
            <el-dialog
                title="配置清单" width="960px"
                :visible.sync="config.show"
                :close-on-click-modal="false" top="0"
                class="dialog-center" :modal-append-to-body="false">
                <config-info></config-info>
            </el-dialog>
            <!--  uKey的验证 -->
            <el-dialog
                title="uKey绑定" width="750px"
                :visible.sync="uKey.show"
                :close-on-click-modal="false" top="0"
                class="dialog-center" :modal-append-to-body="false">
                <ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
            </el-dialog>
            <div class="tools-container">
                <div class="tools-item" :class="uKeyState" v-if="$CFG.uKey.value" @click="uKey.show=true">
                    <span class="iconfont el-icon-CombinedShape"></span>
                </div>
                <div class="tools-item" v-if="$CFG.face.value" @click="face.show=true">
                    <span class="iconfont el-icon-renlianshibie"></span>
                </div>
                <div class="tools-item" @click="config.show=true">
                    <span class="iconfont el-icon-peizhi"></span>
                </div>
            </div>
  <div class="auto-login-loading" v-if="isAutoLogin">
    <img src="../assets/images/login_loading.gif" />
  </div>
  <div class="login-wrapper" v-else>
    <div
      class="login_container"
      :style="{
        background: 'url(' + backgroundImg + ') 0 0 no-repeat',
        backgroundSize: '100% 100%',
      }"
    >
      <div class="sliderCon">
        <div class="logo">
          <img :src="logoUrl" class="logoImg" />
          {{ platformName }}
        </div>
        <div class="copy-right" v-if="copyRight.value">
            {{copyRight.data}}
        <img :src="loginImg" class="picImg" />
      </div>
      <div class="login_box">
        <div class="login-tools">
          <el-tooltip effect="dark" :content="loginType.text" placement="top">
            <i
              v-if="showPhoneLogin"
              :class="loginType.icon"
              @click="showPsdLogin"
            ></i>
          </el-tooltip>
        </div>
        <div class="title">{{ loginType.title }}</div>
        <!--  登录表单区 -->
        <el-form
          label-width="0px"
          class="login_from"
          :model="loginForm"
          ref="loginFormRef"
          v-if="psdLogin"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              class="input"
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              @keyup.enter.native.stop="onSubmit"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              class="input"
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              @keyup.enter.native.stop="onSubmit"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="sysConfig.verifyCode.value && !$CFG.uKey.value">
            <el-row :gutter="8">
              <el-col :span="14">
                <el-input
                  class="input"
                  placeholder="验证码"
                  v-model="loginForm.verify"
                  @keyup.enter.native.stop="onSubmit"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <v-sidentify
                  :identifyCode="verifyCode"
                  @click="changeVerifyCode"
                ></v-sidentify>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="btns">
            <el-button
              :loading="loading"
              type="primary"
              @click="onSubmit"
              class="loginBtn"
              >登录</el-button
            >
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item v-if="!register">
                <a
                  href="javascript:;"
                  @click="license.show = true"
                  class="regBtn"
                  >平台注册</a
                >
              </el-form-item>
              <el-form-item v-else>
                <a href="javascript:;" class="regBtn">已激活</a>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div class="text-right">
                  <a href="javascript:;" class="regBtn" @click="pwd.show = true"
                    >密码修改>></a
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form label-width="0px" class="login_from" :model="loginForm" v-else>
          <!-- 手机号 -->
          <el-form-item>
            <el-input
              class="input"
              v-model="phoneInfo.phoneNum"
              prefix-icon="el-icon-phone"
            >
            </el-input>
          </el-form-item>
          <div class="flex-row">
            <div class="flex-content">
              <!-- 验证码 -->
              <el-form-item>
                <el-input v-model="phoneInfo.code"></el-input>
              </el-form-item>
            </div>
            <div class="flex-footer">
              <el-button
                type="primary"
                @click="getVerifyCode"
                :disabled="codeBtn.disabled"
                >{{ codeBtn.text }}</el-button
              >
            </div>
          </div>
          <el-form-item class="btns">
            <el-button
              :loading="loading"
              type="primary"
              class="loginBtn"
              @click="phoneVerifyCodeLogin"
              >登录</el-button
            >
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item v-if="!register">
                <a
                  href="javascript:;"
                  @click="license.show = true"
                  class="regBtn"
                  >平台注册</a
                >
              </el-form-item>
              <el-form-item v-else>
                <a href="javascript:;" class="regBtn">已激活</a>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div class="text-right">
                  <a href="javascript:;" class="regBtn" @click="pwd.show = true"
                    >密码修改>></a
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- license弹框输入面板 -->
      <el-dialog
        title="平台注册提示"
        width="600px"
        :visible.sync="license.show"
        :close-on-click-modal="false"
        top="0"
        class="dialog-center"
        :modal-append-to-body="false"
      >
        <add-license
          v-if="license.show"
          :visible.sync="license.show"
        ></add-license>
      </el-dialog>
      <!-- 人脸登陆 -->
      <el-dialog
        title="人脸登陆"
        width="480px"
        :visible.sync="face.show"
        :close-on-click-modal="false"
        top="0"
        class="dialog-center"
        :modal-append-to-body="false"
      >
        <face-login
          v-if="face.show"
          :visible.sync="face.show"
          @success="checkServeLicense"
          @successLogin="faceSuccessLogin"
        ></face-login>
      </el-dialog>
      <!-- 功能描述 -->
      <el-dialog
        title="配置清单"
        width="960px"
        :visible.sync="config.show"
        :close-on-click-modal="false"
        top="0"
        class="dialog-center"
        :modal-append-to-body="false"
      >
        <config-info></config-info>
      </el-dialog>
      <!--  uKey的验证 -->
      <el-dialog
        title="uKey绑定"
        width="750px"
        :visible.sync="uKey.show"
        :close-on-click-modal="false"
        top="0"
        class="dialog-center"
        :modal-append-to-body="false"
      >
        <ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
      </el-dialog>
      <!-- 密码修改 -->
      <el-dialog
        title="密码修改"
        width="400px"
        :visible.sync="pwd.show"
        :close-on-click-modal="false"
        top="0"
        class="dialog-center"
        :modal-append-to-body="false"
      >
        <pwd-change
          v-if="pwd.show"
          :show-name="showName"
          :visible.sync="pwd.show"
          :name="loginForm.username"
          :first-change="true"
        ></pwd-change>
      </el-dialog>
      <div class="tools-container">
        <div
          class="tools-item"
          :class="uKeyState"
          v-if="$CFG.uKey.value"
          @click="uKey.show = true"
        >
          <span class="iconfont el-icon-CombinedShape"></span>
        </div>
        <div
          class="tools-item"
          v-if="$CFG.face.value"
          @click="face.show = true"
        >
          <span class="iconfont el-icon-renlianshibie"></span>
        </div>
        <div class="tools-item" @click="config.show = true">
          <span class="iconfont el-icon-peizhi"></span>
        </div>
      </div>
    </div>

    <div class="copy-right" v-if="copyRight.value">
      {{ copyRight.data }}
    </div>
  </div>
</template>

<script>
import AddLicense from "@/pages/AddLicense";
import FaceLogin from '@/components/face/FaceLogin';
import FaceLogin from "@/components/face/FaceLogin";
import sysConfig from "@/assets/js/config";
import {
    login,
    initDBPool,
    checkLoginSession, uKeyLogin, getRandomFromServer, loginSignVerity
  login,
  initDBPool,
  checkLoginSession,
  uKeyLogin,
  getRandomFromServer,
  loginSignVerity,
  phoneVerifyCodeLogin,
  getLoginVerity,
} from "@/assets/js/api";
import ConfigInfo from "@/pages/configInfo";
import UkeyBind from "@/components/UKeyBind";
import nfdw from '@/assets/images/nfdw-log.png';
import gjdw from '@/assets/images/gjdw-log.png';
import gjdx from '@/assets/images/gjdx-log.png';
import qwh from '@/assets/images/qwh-logo.png';
import yuanchange from '@/assets/images/yuanchang_logo2.png';
import nfdw from "@/assets/images/nfdw-log.png";
import gjdw from "@/assets/images/gjdw-log.png";
import gjdx from "@/assets/images/gjdx-log.png";
import qwh from "@/assets/images/qwh-logo.png";
import yuanchange0 from "@/assets/images/yuanchang_logo0.png";
import yuanchange1 from "@/assets/images/yuanchang_logo1.png";
import yuanchange2 from "@/assets/images/yuanchang_logo2.png";
import yuanchange3 from "@/assets/images/yuanchang_logo3.png";
import yuanchange4 from "@/assets/images/yuanchang_logo4.png";
import yuanchange5 from "@/assets/images/yuanchang_logo4.png";
import platform from "@/assets/js/config";
import SoftUKey from "@/assets/js/tools/SoftUKey";
import SoftKey3W from "@/assets/js/Syunew3";
import verifyComponent from "@/components/verifyComponent";
import randomString from "@/assets/js/tools/randomString";
import pwdChange from "@/components/PwdChange";
import const_user from "@/assets/js/const/const_user";
import AES from "@/common/AES";
import md5 from "js-md5";

import blueBg from "@/assets/images/login-bg-blue.jpg";
import blueImg from "@/assets/images/login-img-blue.png";
import greenBg from "@/assets/images/login-bg-green.jpg";
import greenImg from "@/assets/images/login-img-green.png";
import blackBg from "@/assets/images/login-bg-black.jpg";
import blackImg from "@/assets/images/login-img-black.png";
import purpleBg from "@/assets/images/login-bg-purple.jpg";
import purpImg from "@/assets/images/login-img-purple.png";
import ziluolanBg from "@/assets/images/login-bg-ziluolan.jpg";
import ziluolanImg from "@/assets/images/login-img-ziluolan.png";
import skyBlueBg from "@/assets/images/login-bg-skyBlue.jpg";
import skyBlueImg from "@/assets/images/login-img-skyBlue.png";

import { getVerifyCode } from "@/assets/js/api";
import { formatSeconds } from "@/assets/js/tools";
import RSA from "@/assets/js/tools/RSA";
import const_num from "@/assets/js/const/const_num";
import formatPassword from "@/assets/js/tools/formatPassword";

export default {
    components: {
        UkeyBind,
        ConfigInfo,
        AddLicense,
        FaceLogin
    },
    data() {
        return {
            register: false,
            loading: false,
            labelPosition: "right" /*  登录表单 */,
            formLabelAlign: {
                name: "",
                region: "",
                type: ""
            },
            /* 登录表单el-form 的 数据绑定 */
            loginForm: {
                username: "",
                password: ""
            },
            license: {
                show: false
            },
            face: {
                show: false
            },
            config: {
                show: false
            },
            uKey: {
                show: false,
            },
            platformName: "",
            logoConfig: platform.logo,
            copyRight: platform.copyRight,
            softUKey: new SoftUKey(SoftKey3W)
        };
    },
    created() {
        this.searchPlatformName();
    },
    methods: {
        /* 初始化连接池  检测后台session*/
        async woData() {
            const [pool, sessions] = await Promise.all([initDBPool, checkLoginSession])
            /*   console.log('pool',pool);
  components: {
    UkeyBind,
    ConfigInfo,
    AddLicense,
    FaceLogin,
    "v-sidentify": verifyComponent,
    pwdChange,
  },
  data() {
    let readSeconds = Number(sessionStorage.getItem("readSeconds"));
    return {
      sysConfig: sysConfig,
      register: false,
      loading: false,
      labelPosition: "right" /*  登录表单 */,
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      /* 登录表单el-form 的 数据绑定 */
      loginForm: {
        username: "",
        password: "",
        verify: "",
      },
      verifyCode: "",
      license: {
        show: false,
      },
      face: {
        show: false,
      },
      config: {
        show: false,
      },
      uKey: {
        show: false,
      },
      platformName: "",
      logoConfig: platform.logo,
      copyRight: platform.copyRight,
      softUKey: new SoftUKey(SoftKey3W),
      pwd: {
        show: false,
      },
      userType: const_user.type,
      userStatus: const_user.status,
      showPhoneLogin: platform.messageCode.value,
      psdLogin: true,
      phoneInfo: {
        phoneNum: "",
        code: "",
      },
      readSeconds: readSeconds ? readSeconds : 0,
      codeBtnLoading: false,
      showName: true,
      isAutoLogin: true,
    };
  },
  created() {
    this.searchPlatformName();
  },
  methods: {
    /* 初始化连接池  检测后台session*/
    async woData() {
      const [pool, sessions] = await Promise.all([
        initDBPool,
        checkLoginSession,
      ]);
      /*   console.log('pool',pool);
                console.log('sessions',sessions); */
        },
        onSubmit() {
            if (!this.register && process.env.NODE_ENV != "dev") {
                this.$layer.msg("平台未注册，请先注册平台！");
                return;
            }
            if (this.loading) {
                return;
            }
    },
    onSubmit() {
      if (!this.register && process.env.NODE_ENV != "dev") {
        this.$layer.msg("平台未注册，请先注册平台！");
        return;
      }
      if (this.loading) {
        return;
      }

            if (this.$CFG.uKey.value) {
                this.getRandomFromServer();
                //this.uKeyLogin();
            } else {
                this.normalLogin();
            }
        },
        normalLogin() {
            // 校验用户
            if (this.loginForm.username && this.loginForm.password) {
                // 开启等待框
                this.loading = true;
                login(this.loginForm.username, this.loginForm.password).then(res => {
                    // 对结果进行处理
                    this.handleLogin(res);
                }).catch(error => {
                    // 关闭等待
                    this.loading = false;
                    console.log(error);
                    this.$message.error("网络异常");
                });
            } else {
                this.$message.error("用户名或密码不能为空");
            }
        },
        getRandomFromServer() {
            getRandomFromServer().then(res=>{
                let rs = JSON.parse(res.data.result);
                if(rs.code == 1) {
                    let randomNumber = rs.data;
                    this.softUKey.getSign(randomNumber, this.checkUKeySign);
                }else {
                    this.$message.error("服务器连接异常！");
                }
            }).catch(error=>{
                this.$message.error("服务器连接异常！");
            });
        },
        checkUKeySign(result) {
            let reg = new RegExp("&", "g");
            result.inPath = result.inPath.replace(reg, "%26");
            result.inPath = result.inPath.replace(/\\/g, "huodongwei");
            loginSignVerity(result).then(res=>{
                let rs = JSON.parse(res.data.result);
                if(rs.code == 1) {
                    this.uKeyLogin();
                }else {
                    this.$message.error("UKey签名校验失败！");
                }
            }).catch(error=>{
                this.$message.error("服务器连接异常！");
            });
        },
        uKeyLogin() {
            //
            if (!this.$store.state.ukey.connect) {
                this.$message.error("请先安装uKey客户端服务");
                return;
            }
            if (!this.$store.state.ukey.isIn) {
                this.$message.warning("请先插入uKey");
                return;
            }

            // 校验用户
            if (this.loginForm.username && this.loginForm.password) {
                // 开启等待框
                this.loading = true;
                uKeyLogin(this.loginForm.username, this.loginForm.password, this.$store.state.ukey.id).then(res => {
                    // 对结果进行处理
                    this.handleLogin(res);
                }).catch(error => {
                    // 关闭等待
                    this.loading = false;
                    console.log(error);
                    this.$message.error("网络异常");
                });
            } else {
                this.$message.error("用户名或密码不能为空");
            }
        },
        handleLogin(res) {
      if (this.$CFG.uKey.value) {
        this.uKeyLogin();
      } else {
        this.normalLogin();
      }
    },
    normalLogin() {
      // 校验用户
      if (this.loginForm.username && this.loginForm.password) {
        // 开启等待框
        this.loading = true;
        login(
          this.loginForm.username,
          this.loginForm.password,
          this.loginForm.verify
        )
          .then((res) => {
            // 对结果进行处理
            this.handleLogin(res);
          })
          .catch((error) => {
            // 关闭等待
            this.loading = false;
            console.log(error);
            this.changeVerifyCode();
            this.$message.error("网络异常");
          });
      } else {
        this.$message.error("用户名或密码不能为空");
      }
    },
    getRandomFromServer() {
      getRandomFromServer()
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            let randomNumber = rs.data;
            this.softUKey.getSign(randomNumber, this.checkUKeySign);
          } else {
            this.$message.error("服务器连接异常！");
          }
        })
        .catch((error) => {
          this.$message.error("服务器连接异常！");
        });
    },
    checkUKeySign(result) {
      let reg = new RegExp("&", "g");
      result.inPath = result.inPath.replace(reg, "%26");
      result.inPath = result.inPath.replace(/\\/g, "huodongwei");
      loginSignVerity(result)
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            this.uKeyLogin();
          } else {
            this.$message.error("UKey签名校验失败！");
          }
        })
        .catch((error) => {
          this.$message.error("服务器连接异常！");
        });
    },
    uKeyLogin() {
      //
      if (!this.$store.state.ukey.connect) {
        this.$message.error("请先安装uKey客户端服务");
        return;
      }
      if (!this.$store.state.ukey.isIn) {
        this.$message.warning("请先插入uKey");
        return;
      }

      // 校验用户
      if (this.loginForm.username && this.loginForm.password) {
        // 开启等待框
        this.loading = true;
        uKeyLogin(
          this.loginForm.username,
          this.loginForm.password,
          this.$store.state.ukey.id
        )
          .then((res) => {
            // 对结果进行处理
            this.handleLogin(res);
          })
          .catch((error) => {
            // 关闭等待
            this.loading = false;
            console.log(error);
            this.$message.error("网络异常");
          });
      } else {
        this.$message.error("用户名或密码不能为空");
      }
    },
    getVerifyCode() {
      let num = this.phoneInfo.phoneNum;
      if (!this.register && process.env.NODE_ENV != "dev") {
        this.$layer.msg("平台未注册，请先注册平台！");
        return;
      }
      if (num.trim() == "") {
        this.$message.error("手机号不能为空");
        return;
      }
      this.codeBtnLoading = true;
      getVerifyCode(num)
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          this.codeBtnLoading = false;
          if (rs.code == 1) {
            this.$message.success("发送成功！");
            this.readSeconds = 360;
            this.startReadSeconds();
          } else {
            this.$message.error(rs.msg);
          }
        })
        .catch((error) => {
          this.codeBtnLoading = false;
          console.log(error);
        });
    },
    phoneVerifyCodeLogin() {
      let num = this.phoneInfo.phoneNum;
      let code = this.phoneInfo.code;
      if (!this.register && process.env.NODE_ENV != "dev") {
        this.$layer.msg("平台未注册，请先注册平台！");
        return;
      }
      if (num.trim() == "") {
        this.$message.error("手机号不能为空");
        return;
      }
      if (code.trim() == "") {
        this.$message.error("验证码不能为空");
        return;
      }
      this.loading = true;
      phoneVerifyCodeLogin(num, code)
        .then((res) => {
          this.handleLogin(res, true);
        })
        .catch((error) => {
          // 关闭等待
          this.loading = false;
          console.log(error);
          this.$message.error("网络异常");
        });
    },
    handleLogin(res, phoneLogin) {
      // 关闭等待
      this.loading = false;
      let rs = JSON.parse(res.data.result);
      if (rs.code == 1) {
        this.initPageConfig();
        // 非自动登录提示登录成功
        if (!this.isAutoLogin) {
          this.$message.success("登录成功");
        }
        // 重置登录时间
        this.readSeconds = 0;
        sessionStorage.setItem("readSeconds", "0");
        if (phoneLogin) {
          sessionStorage.setItem("username", rs.msgN);
        } else {
          sessionStorage.setItem("username", this.loginForm.username);
        }
        sessionStorage.setItem("userId", rs.data);
        sessionStorage.setItem("userPower", rs.data2);
        sessionStorage.setItem("userPowerGroup", rs.sum);
        // 自动登录无法返回登录页
        if (this.$store.state.user.autoLogin) {
          this.$router.replace("/home");
        } else {
          this.$router.push("/home");
        }

        // 设置用户的权限
        this.$store.dispatch("user/getPermits");
      } else if (rs.code == 3) {
        this.pwd.show = true;
        this.$nextTick(() => {
          this.$message.error(rs.msg);
        });
      } else {
        this.changeVerifyCode();
        this.$message.error(rs.msg);
      }
    },
    checkServeLicense() {
      // 校验服务器是否注册
      this.$apis.license
        .checkServeLicense()
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            this.register = true;
          } else {
            this.$layer.msg("平台未注册！请先注册。");
            this.license.show = true;
            this.register = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    autoLogin() {
      // 自动登录
      // this.$apis.login
      //   .checkReferer()
      //   .then((res) => {
      //     let rs = JSON.parse(res.data.result);
      //     if (rs) {
      //       this.$store.dispatch("user/changeAutoLogin", 1);
      //       this.loginForm.username = "zhdl";
      //       this.loginForm.password = "123456";
      //       this.normalLogin();
      //     }
      //   })
      //   .catch((error) => {});
      let autoLogin = this.$route.query.autoLogin;
      let uid = this.$route.query.uid;
      let pageName = this.$route.query.pageName;
      if (autoLogin) {
        this.$apis.userMager.userInfo
          .getUserLoginInfo(uid)
          .then((res) => {
            this.$store.dispatch("user/changeAutoLogin", 1);
            this.$store.dispatch("user/changePage", pageName);
            this.handleLogin(res, true);
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: "输入信息无效，请手动登录！",
            });
            this.init();
            console.log(error);
            this.isAutoLogin = true;
          });
      }
      // let pattern = /(localhost)|(www\.sw-ht\.com)/;
      // let where = document.referrer;
      // if(pattern.test(where)) {
      //   this.$store.dispatch('user/changeAutoLogin', 1);
      //   this.loginForm.username = "zhdl";
      //   this.loginForm.password = "123456";
      //   this.normalLogin();
      // }else {
      //   this.$store.dispatch('user/changeAutoLogin', 0);
      // }
    },
    searchPlatformName() {
      this.$apis.pageSetting.realTime
        .searchName()
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            let data = rs.data[0];
            this.platformName = data.param;
          } else {
            this.platformName = "蓄电池后台监控管理平台";
          }
          sessionStorage.setItem("platformName", this.platformName);
        })
        .catch((error) => {
          this.platformName = "蓄电池后台监控管理平台";
          sessionStorage.setItem("platformName", this.platformName);
        });
    },
    init() {
      // 初始化user的信息
      this.$store.commit("user/init");
      // 初始化登录状态
      sessionStorage.setItem("username", "");
      this.checkServeLicense();
      if (this.readSeconds > 0) {
        this.startReadSeconds();
      }

      // 查询密码规则
      this.searchPasswordRules();
      // 初始化置动
      this.$store.dispatch("user/changeAutoLogin", 0);
      this.$store.dispatch("user/changePage", "m1c0");
    },
    changeVerifyCode() {
      let loading = this.$layer.loading();
      getLoginVerity()
        .then((res) => {
          this.$layer.close(loading);
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            this.verifyCode = rs.data + "";
          } else {
            this.verifyCode = "";
          }
          this.loginForm.verify = "";
        })
        .catch((error) => {
          this.$layer.close(loading);
          this.verifyCode = "";
          this.loginForm.verify = "";
        });
    },
    showPsdLogin() {
      this.psdLogin = this.psdLogin ? false : true;
    },
    startReadSeconds() {
      let timer = "";
      timer = setInterval(() => {
        if (this.readSeconds == 0) {
          clearInterval(timer);
        } else {
          this.readSeconds--;
          sessionStorage.setItem("readSeconds", this.readSeconds);
        }
      }, 1000);
    },
    getServerTime(callback) {
      this.$apis.login
        .getServerTime()
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            sessionStorage.setItem("serverStamp", rs.data);
          } else {
            sessionStorage.setItem("serverStamp", new Date().getTime() + "");
          }
          setTimeout(() => {
            callback();
          }, 500);
        })
        .catch((error) => {
          sessionStorage.setItem("serverStamp", new Date().getTime() + "");
          callback();
          console.log(error);
        });
    },
    closeBrowser() {
      this.$apis.login
        .closeBrowser()
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    searchPasswordRules() {
      this.$apis.pageSetting.realTime
        .searchParam({
          categoryId: 10,
        })
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1 && rs.data.length != 0) {
            let data = rs.data;
            // 读取字符长度
            sessionStorage.setItem("passwordNum", data[0].status);
            // 读取密码类型
            sessionStorage.setItem("passwordType", data[1].status);
          } else {
            // 读取字符长度
            sessionStorage.setItem("passwordNum", "8");
            // 读取密码类型
            sessionStorage.setItem("passwordType", "4");
          }
        })
        .catch((error) => {
          // 读取字符长度
          sessionStorage.setItem("passwordNum", "8");
          // 读取密码类型
          sessionStorage.setItem("passwordType", "4");
        });
    },
    faceSuccessLogin(info) {
      this.face.show = false;
      this.loginForm.username = info.username;
      this.loginForm.password = info.password;
      this.loginForm.verify = this.verifyCode;
      this.$nextTick(() => {
        this.normalLogin();
      });
    },
    initPageConfig() {
      this.$apis.pageSetting.realTime
          .getRealTabsConfig()
          .then((res) => {
            let rs = JSON.parse(res.data.result);
            if (rs.code == 1) {
                this.$message.success("登录成功");
                sessionStorage.setItem('username', this.loginForm.username);
                sessionStorage.setItem('userId', rs.data);
                // 自动登录无法返回登录页
                if (this.$store.state.user.autoLogin) {
                    this.$router.replace("/home");
                } else {
                    this.$router.push("/home");
                }

                // 设置用户的权限
                this.$store.dispatch('user/getPermits');
            } else {
                this.$message.error(rs.msg);
            }
        },
        checkServeLicense() {
            // 校验服务器是否注册
            this.$apis.license.checkServeLicense().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    this.register = true;
                } else {
                    this.$layer.msg("平台未注册！请先注册。");
                    this.license.show = true;
                    this.register = false;
                }
            }).catch(error => {
                console.log(error);
            });
        },
        autoLogin() {     // 自动登录
            this.$apis.login.checkReferer().then(res => {
                let rs = JSON.parse(res.data.result);
                console.log(rs);
                if (rs) {
                    this.$store.dispatch('user/changeAutoLogin', 1);
                    this.loginForm.username = "zhdl";
                    this.loginForm.password = "123456";
                    this.normalLogin();
                }
            }).catch(error => {

            });
            // let pattern = /(localhost)|(www\.sw-ht\.com)/;
            // let where = document.referrer;
            // if(pattern.test(where)) {
            //   this.$store.dispatch('user/changeAutoLogin', 1);
            //   this.loginForm.username = "zhdl";
            //   this.loginForm.password = "123456";
            //   this.normalLogin();
            // }else {
            //   this.$store.dispatch('user/changeAutoLogin', 0);
            // }
        },
        searchPlatformName() {
            this.$apis.pageSetting.realTime.searchName().then(res=>{
                let rs = JSON.parse(res.data.result);
                if(rs.code == 1) {
                    let data = rs.data[0];
                    this.platformName = data.param;
                }else {
                    this.platformName = "蓄电池后台监控管理平台";
                }
                sessionStorage.setItem('platformName', this.platformName);
            }).catch(error=>{
                this.platformName = "蓄电池后台监控管理平台";
                sessionStorage.setItem('platformName', this.platformName);
            });
        }
            // 设置pageConfig
            this.$store.dispatch("user/changeRealTabsConfig", rs.data);
          })
          .catch((error) => {
            // 设置pageConfig
            this.$store.dispatch("user/changeRealTabsConfig", []);
          });
    },
    computed: {
        uKeyState() {
            let state = -1;
            let uKey = this.$store.state.ukey;
            let cls = "state-error";
            // 设置uKey的状态
            if (uKey.connect) {
                if (uKey.isIn) {
                    state = 1;
                } else {
                    state = 0;
                }
            } else {
                state = -1;
            }
            // 根据状态确定uKey图表的颜色
            switch (state) {
                case 0:
                    cls = "state-default";
                    break;
                case 1:
                    cls = "";
                    break;
                default:
                    cls = "state-error";
                    break;
            }
            return cls;
        },
        logoUrl() {
            let logoConfig = this.logoConfig;
            let image = yuanchange;

            if(!logoConfig.value) {
                return image;
            }

            switch (logoConfig.fileName) {
                case "nfdw":
                    image = nfdw
                    break;
                case "gjdx":
                    image = gjdx;
                    break;
                case 'qwh':
                    image = qwh;
                    break;
                case 'gjdw':
                    image = gjdw;
                    break;
            }
            return image;
  },
  computed: {
    uKeyState() {
      let state = -1;
      let uKey = this.$store.state.ukey;
      let cls = "state-error";
      // 设置uKey的状态
      if (uKey.connect) {
        if (uKey.isIn) {
          state = 1;
        } else {
          state = 0;
        }
      } else {
        state = -1;
      }
      // 根据状态确定uKey图表的颜色
      switch (state) {
        case 0:
          cls = "state-default";
          break;
        case 1:
          cls = "";
          break;
        default:
          cls = "state-error";
          break;
      }
      return cls;
    },
    mounted() {
        // 初始化user的信息
        this.$store.commit('user/init');
        // 初始化登录状态
        sessionStorage.setItem('username', "");
        this.checkServeLicense();
    logoUrl() {
      let logoConfig = this.logoConfig;
      let image = yuanchange1;
      if (this.$store.state.theme.activeSkin == "science-blue") {
        image = yuanchange0;
      } else if (this.$store.state.theme.activeSkin == "science-green") {
        image = yuanchange1;
      } else if (this.$store.state.theme.activeSkin == "science-black") {
        image = yuanchange2;
      } else if (this.$store.state.theme.activeSkin == "science-purple") {
        image = yuanchange3;
      } else if (this.$store.state.theme.activeSkin == "science-ziluolan") {
        image = yuanchange4;
      } else if (this.$store.state.theme.activeSkin == "science-skyBlue") {
        image = yuanchange5;
      }
      if (!logoConfig.value) {
        return image;
      }

      switch (logoConfig.fileName) {
        case "nfdw":
          image = nfdw;
          break;
        case "gjdx":
          image = gjdx;
          break;
        case "qwh":
          image = qwh;
          break;
        case "gjdw":
          image = gjdw;
          break;
      }
      return image;
    },
    backgroundImg() {
      let image = blueBg;
      if (this.$store.state.theme.activeSkin == "science-blue") {
        image = blueBg;
      } else if (this.$store.state.theme.activeSkin == "science-green") {
        image = greenBg;
      } else if (this.$store.state.theme.activeSkin == "science-black") {
        image = blackBg;
      } else if (this.$store.state.theme.activeSkin == "science-purple") {
        image = purpleBg;
      } else if (this.$store.state.theme.activeSkin == "science-ziluolan") {
        image = ziluolanBg;
      } else if (this.$store.state.theme.activeSkin == "science-skyBlue") {
        image = skyBlueBg;
      }
      return image;
    },
    loginImg() {
      let image = blueImg;
      if (this.$store.state.theme.activeSkin == "science-blue") {
        image = blueImg;
      } else if (this.$store.state.theme.activeSkin == "science-green") {
        image = greenImg;
      } else if (this.$store.state.theme.activeSkin == "science-black") {
        image = blackImg;
      } else if (this.$store.state.theme.activeSkin == "science-purple") {
        image = purpImg;
      } else if (this.$store.state.theme.activeSkin == "science-ziluolan") {
        image = ziluolanImg;
      } else if (this.$store.state.theme.activeSkin == "science-skyBlue") {
        image = skyBlueImg;
      }
      return image;
    },
    loginType() {
      if (this.psdLogin) {
        return {
          text: "手机号登录",
          title: "账号密码登录",
          icon: "el-icon-mobile-phone",
        };
      } else {
        return {
          text: "账号密码登录",
          title: "手机号登录",
          icon: "el-icon-lock",
        };
      }
    },
    codeBtn() {
      let seconds = this.readSeconds;
      if (seconds <= 0) {
        return {
          text: "获取验证码",
          disabled: false,
        };
      } else {
        return {
          text: formatSeconds(seconds),
          disabled: true,
        };
      }
    },
  },
  mounted() {
    this.getServerTime(() => {
      this.changeVerifyCode();
      let autoLogin = this.$route.query.autoLogin;
      if (autoLogin) {
        this.isAutoLogin = true;
        // 自动登录
        this.autoLogin();
    }
      } else {
        this.isAutoLogin = false;
        // 初始化
        this.init();
      }
    });
    //console.log(formatPassword("123"));
    //console.log(AES.encrypt("123456"));
    //console.log(encodeURIComponent("B17jjjYoBkbfZChw/fHzcA=="));
    //console.log(decodeURIComponent("B17jjjYoBkbfZChw%2FfHzcA%3D%3D"))
    //console.log(AES.decrypt("FCGylc7v1wXzmTqpRXPPGA=="));
    //console.log(md5("a123456"));
    //console.log(JSON.stringify("5OUaEnC33sVNY+jeXlx3Qg=="));
    let rsaWord = RSA.encrypt("123456");
    console.log(rsaWord);
    // console.log(RSA.decrypt("MoRg8hhjrvdWQ2YeQiyscX8ycqPQJbGz1n1iRfLCA9qszFRxW9zcRpD10rsUmvdxLmpXp2s5RZW6Mc9B9M6THEGVuWRwkPnPIE3X5xUSeIxCfSW1ksibd0t+mAgWDhz7gnDjUGUKof/kmNmaC65uC2bW4+hMmuyyP1YTHjeNpL0=", const_num.privateKey));
  },
};
</script>

<style>
.auto-login-loading {
  display: flex;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #e7ebef;
}
.login_from .el-input__inner {
    height: 48px;
    line-height: 48px;
  height: 48px;
  line-height: 48px;
}

.el-science-blue .login_from .el-input.is-disabled .el-input__inner, .el-science-blue .login_from .el-input__inner {
    background-color: transparent;
    border-color: #e4e4e4;
    color: #868686;
.el-science-blue .login_from .el-input.is-disabled .el-input__inner,
.el-science-blue .login_from .el-input__inner {
  background-color: transparent;
  border-color: #e4e4e4;
  color: #868686;
}

.el-science-blue .login_from .el-input__prefix, .el-input__suffix, .el-science-blue .login_from .el-select .el-input .el-select__caret {
    color: #007fe1;
.el-science-blue .login_from .el-input__prefix,
.el-input__suffix,
.el-science-blue .login_from .el-select .el-input .el-select__caret {
  color: #007fe1;
}
</style>

<style lang="less" scoped>
.login-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  position: relative;
  width: 100%;
  height: 100%;
}

/* 登录大盒子背景 */
.login_container {
    width: 100%;
    height: 100%;
    background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tools-container {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #FFFFFF;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ffffff;
}

.tools-container .tools-item {
    padding: 8px;
    cursor: pointer;
  padding: 8px;
  cursor: pointer;
}

.tools-container .tools-item:hover {

    background-color: #e4e4e4;
  background-color: #e4e4e4;
}

.tools-container .iconfont {
    font-size: 22px;
    color: #0080ff;
  font-size: 22px;
  color: #0080ff;
}

.tools-container .state-default .iconfont {
    color: #808080;
  color: #808080;
}

.tools-container .state-error .iconfont {
    color: #ff0000;
  color: #ff0000;
}

.sliderCon {
    margin-top: -6vh;
  margin-top: -6vh;

    .logo {
        display: flex;
        align-items: center;
        font-size: 48px;
        color: #007fe1;
        font-weight: bold;
  .logo {
    display: flex;
    align-items: center;
    font-size: 48px;
    color: #007fe1;
    font-weight: bold;

        .logoImg {
            height: 50px;
            margin-right: 14px;
        }
    .logoImg {
      height: 50px;
      margin-right: 14px;
    }
  }

    .picImg {
        width: 580px;
        margin-top: 12vh;
    }
  .picImg {
    width: 580px;
    margin-top: 12vh;
  }
}

/* 登录框 */
.login_box {
    width: 430px;
    height: 400px;
  width: 440px;
  background-color: #fff;
  border-radius: 3px;
  padding: 40px 60px 10px 60px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  outline: 8px solid hsla(0, 0%, 100%, 0.4);
  .title {
    font-size: 20px;
    color: #007fe1;
    font-weight: bold;
    margin-bottom: 30px;
  }

  /* v图片的盒子 */

  .avatar {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    /* 边框圆角 */
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 3px;
    padding: 40px 60px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    /* v图片 */

    .title {
        font-size: 20px;
        color: #007fe1;
        font-weight: bold;
        margin-bottom: 30px;
    img {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background-color: #eeeeee;
    }

    /* v图片的盒子 */

    .avatar {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        /* 边框圆角 */
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        /* v图片 */

        img {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background-color: #eeeeee;
        }
    }
  }
}

.login_box::after {
    content: "";
    display: block;
    width: 446px;
    height: 416px;
    position: absolute;
    top: -8px;
    left: -8px;
    background: rgba(255, 255, 255, 0.4);
    z-index: -1;
.login-tools {
  position: absolute;
  top: 25px;
  right: 16px;
  font-size: 26px;
  z-index: 999;
}
.el-icon-mobile-phone,
.el-icon-lock {
  color: #0b388a;
}
.el-icon-mobile-phone:hover,
.el-icon-lock:hover {
  cursor: pointer;
  color: #ff0000;
}

/* 登录按钮 */
.btns {
    text-align: center;
  text-align: center;
}

.loginBtn {
    width: 100%;
    display: block;
    text-align: center;
    height: 48px;
    margin-top: 10px;
  width: 100%;
  display: block;
  text-align: center;
  height: 48px;
  margin-top: 10px;
}

.regBtn {
    color: #007fe1;
    margin-right: 10px;
  color: #007fe1;
  margin-right: 10px;
}

@media screen and (max-width: 1680px) {
    .sliderCon .logo {
        font-size: 40px;
    }
  .sliderCon .logo {
    font-size: 40px;
  }

    .sliderCon .picImg {
        width: 480px;
    }
  .sliderCon .picImg {
    width: 480px;
  }

    .login_box {
        width: 400px;
        height: 360px;
    }

    .login_box::after {
        width: 416px;
        height: 376px;
    }

  .login_box {
    width: 400px;
  }
}
</style>

<style scoped>
.copy-right {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 16px;
    z-index: 999;
    font-size: 12px;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 16px;
  z-index: 999;
  font-size: 12px;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row .flex-content {
  flex: 1;
}
.flex-row .flex-footer {
  margin-left: 8px;
}
.text-right {
  text-align: right;
}
</style>