fj-dc-ui/.svn/pristine/0b/0bdf019246f7a5f6baccb2b0a2bbfaa3a5b3f5b0.svn-base

<template>
  <div class="login">
    <div
      class="login_content"
      style="box-shadow: 0px 0px 13px 11px rgba(0, 0, 0, 0.08)"
    >
      <h2 style="text-align: center; margin-bottom: 20px; font-size: 28px">
        <img src="../../assets/images/titleFujian.png" alt="" />
      </h2>
      <div class="login_content_left">
        <div class="province_logo">
          <!-- <p>福建水利监督</p> -->
          <img src="../../assets/images/province_logo.png" alt="" />
        </div>
        <span class="left_hr"></span>
        <div class="download_app">
          <p>扫码下载APP</p>
          <img src="../../assets/images/appQrcodeFj.png" alt="" />
        </div>
        <div class="llq_xz">
          <svg
            t="1590743046917"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2942"
            width="28"
            height="28"
          >
            <path
              d="M382.4 514.4c0 69.6 57.6 127.2 127.2 127.2S636.8 584 636.8 514.4s-57.6-127.2-127.2-127.2-127.2 57.6-127.2 127.2z"
              fill="#BBBBBB"
              p-id="2943"
            ></path>
            <path
              d="M509.6 320h400.8C838.4 171.2 687.2 70.4 512 70.4c-127.2 0-242.4 52.8-321.6 139.2l136.8 240C353.6 375.2 425.6 320 509.6 320z"
              fill="#F75B60"
              p-id="2944"
            ></path>
            <path
              d="M548 704c-12 2.4-26.4 4.8-38.4 4.8-69.6 0-129.6-36-163.2-88.8L144.8 267.2c-48 69.6-74.4 153.6-74.4 244.8 0 213.6 151.2 391.2 352.8 432l-9.6-4.8L548 704z"
              fill="#00D19C"
              p-id="2945"
            ></path>
            <path
              d="M934.4 387.2H656c28.8 33.6 48 79.2 48 127.2 0 38.4-9.6 72-28.8 103.2l-194.4 336c9.6 0 21.6 2.4 31.2 2.4 244.8 0 441.6-196.8 441.6-441.6 0-45.6-7.2-88.8-19.2-127.2z"
              fill="#FCA253"
              p-id="2946"
            ></path>
          </svg>
          <a
            href="http://pdc.goldenwater.com.cn/tools/chrome.exe"
            class="llq_text"
            >浏览器下载</a
          >
        </div>
      </div>
      <div class="login_content_right">
        <div class="system_type_tab">
          <span
            :class="{ tabActived: tabActived == 2 }"
            @click="changeSystem(2)"
            >水利稽察</span
          >
          <span
            :class="{ tabActived: tabActived == 1 }"
            @click="changeSystem(1)"
            >水利督查</span
          >
        </div>
        <div class="login_types">
          <div class="item" v-show="loginType == 1 || loginType == 2">
            <i class="el-icon-s-custom"></i>
            <el-input
              v-model="account"
              :placeholder="accountPlaceHolder"
              @keyup.enter.native="toLogin"
              size="medium"
              v-if="loginType == 1 || loginType == 2"
            ></el-input>
          </div>
          <!--短信验证码图片验证-->
          <div
            class="item authCode"
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
            "
            v-show="loginType == 1"
          >
            <i>
              <svg
                t="1580975211684"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1275"
                width="18"
                height="18"
              >
                <path
                  d="M511.92574 1023.975247C357.959389 1023.975247 71.50029 794.49855 71.50029 577.448076V163.162251c0-10.049894 8.416167-18.16902 18.837362-18.379424l24.95146-0.420808c0.953007 0 98.766196-1.967898 199.599304-41.895185 103.481725-40.843164 170.179849-87.936569 170.885322-88.419261l14.691162-10.421195a19.86463 19.86463 0 0 1 11.398956-3.601625 19.480951 19.480951 0 0 1 11.324696 3.539741l14.975826 10.507832c0.680719 0.482692 67.440727 47.526591 170.798685 88.419262 100.932121 39.927287 198.74531 41.895185 199.747825 41.895184l24.753432 0.420809c10.433572 0.210404 18.824985 8.32953 18.824986 18.379423l0.210404 414.285825c0 217.02572-286.508606 446.527171-440.6111 446.527171z m372.625797-812.568556c-37.860375-2.846645-117.516921-12.624251-200.267646-45.385419-84.557726-33.417134-146.725972-71.005221-172.358151-87.602398-25.557919 16.535293-87.763295 54.135757-172.296268 87.602398-82.602205 32.686908-162.03597 42.464514-200.416167 45.385419v366.041385c0 170.216979 249.576484 378.281957 372.712435 378.281957 47.724618 0 140.723264-38.726745 232.137691-123.767163 88.12222-81.909108 140.723264-177.07368 140.723264-254.490041z m-407.948946 435.660414a33.305744 33.305744 0 0 1-23.899439 10.049894 33.738929 33.738929 0 0 1-23.998453-10.037517l-101.674724-102.330691a34.345388 34.345388 0 0 1 0-48.269193 33.664668 33.664668 0 0 1 47.935022 0l77.738155 78.183717 196.269967-197.69329a33.590408 33.590408 0 0 1 47.910269 0 34.18449 34.18449 0 0 1 0 48.269194z m0 0"
                  p-id="1276"
                ></path>
              </svg>
            </i>
            <el-input
              style="flex-basis: 100%"
              v-model="vCode"
              placeholder="请输入图片验证码"
              size="medium"
              v-if="loginType == 1"
              maxlength="4"
            >
              <img
                slot="append"
                :src="imgUrl"
                alt=""
                style="
                  width: 112px;
                  height: 34px;
                  cursor: pointer;
                  vertical-align: middle;
                "
                @click="imgClick"
              />
            </el-input>
          </div>
          <div class="item" v-show="loginType == 1">
            <i class="el-icon-lock"></i>
            <el-input
              v-model="password"
              :placeholder="passwordPlaceHolder"
              @keyup.enter.native="toLogin"
              size="medium"
              v-if="loginType == 1"
              maxlength="6"
            >
              <el-button
                slot="append"
                size="medium"
                plain
                style="flex-basis: 20%"
                @click="getMessage"
                :disabled="messageDisable"
                >{{ messageButton }}
              </el-button>
            </el-input>
          </div>
          <div class="item" v-show="loginType == 3" style="padding-top: 20px">
            <canvas id="canvas" style="width: 200px; height: 200px"></canvas>
          </div>
          <div class="item" v-if="loginType != 3">
            <el-button type="primary" round @click="toLogin">登 录</el-button>
          </div>
        </div>
        <p class="login_text"><span></span> 登录方式 <span></span></p>
        <div
          class="item login_item"
          style="
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          "
        >
          <div :class="{ item: true, active: loginType == 3 }">
            <el-button
              type="text"
              icon="iconfont watericon1-erweima1 loginTypeButton"
              size="default"
              @click="loginTypeChange(3)"
            ></el-button>
            <p>二维码</p>
          </div>
          <div :class="{ item: true, active: loginType == 1 }">
            <el-button
              type="text"
              icon="iconfont watericon1-yanzhengma loginTypeButton"
              size="default"
              @click="loginTypeChange(1)"
            ></el-button>
            <p>验证码</p>
          </div>
        </div>
      </div>
      <!--<div class="systemNotice">-->
      <!--&lt;!&ndash;名字&ndash;&gt;-->
      <!--<span class="announcement">系统公告：</span>-->
      <!--</div>-->
      <!--<div class="PackagingShell" id="PackagingShell">-->
      <!--&lt;!&ndash;主题内容，展示内容区域&ndash;&gt;-->
      <!--<div id="viewBox">-->
      <!--&lt;!&ndash;名字&ndash;&gt;-->
      <!--&lt;!&ndash;<span class="announcement">系统公告：</span></div>&ndash;&gt;-->
      <!--&lt;!&ndash;文本主体&ndash;&gt;-->
      <!--<span id="marquee">{{text}}</span>-->
      <!--&lt;!&ndash;文本副本，实现无缝滚动&ndash;&gt;-->
      <!--<span id="transcript"></span>-->
      <!--</div>-->
      <!--&lt;!&ndash;隐藏块，用于获取展示文本宽度&ndash;&gt;-->
      <!--<div id="hide">{{text}}</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
import {
  sendMessage,
  loginWithMessage,
  qrCodeSubmit,
  qrCodeLogin,
} from "@api/loginAPI.js";
import request from "@util/gw_ajax_request";

const QRCode = require("qrcode");
const uuidv4 = require("uuid/v4");
export default {
  components: {},
  computed: {
    changeData() {
      const { account, vCode } = this;
      return {
        account,
        vCode,
      };
    },
  },
  data() {
    return {
      account: "",
      password: "",
      vCode: "",
      messageButton: "获取验证码",
      loginTitle: "APP扫码登录",
      messageDisable: true,
      loginType: 3,
      accountPlaceHolder: "请输入手机号码",
      passwordPlaceHolder: "请输入验证码",
      qrUuid: "",
      pubKey: "",
      rememberPwd: false,
      tabActived: 1,
      countTimeNum: 0,
      imgUrl: null,
      text: "", // 内容
      textWidth: 0, // 字符长度
      isScroll: false, // 是否滚动
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.imgClick();
      this.getQrCode();
      localStorage.setItem("ownApp", this.tabActived);
      // this.move();
    });
  },
  methods: {
    toLogin() {
      if (this.loginType == 1) {
        this.toLoginWithMessage();
      }
    },
    toLoginWithMessage() {
      if (!this.account) {
        this.$message("请输入手机号");
        return;
      }
      if (!this.vCode) {
        this.$message("请输入图片验证码");
        return;
      }
      if (!this.password) {
        this.$message("请输入验证码");
        return;
      }
      try {
        loginWithMessage(this.account, this.password).then(
          (res) => {
            console.log(res);
            if (res.success == true) {
              let token = res.data.token;
              let userid = res.data.guid;
              let loginName = res.data.persName;
              let guid = res.data.orgId;
              let orgNm = res.data.orgNm;
              let accessToken = res.accessToken; //token是否过期
              localStorage.setItem("token", token);
              localStorage.setItem("userid", userid);
              localStorage.setItem("account", loginName);
              localStorage.setItem("guid", guid);
              localStorage.setItem("orgNm", orgNm);
              localStorage.setItem("accessToken", accessToken);
              let persType = res.data.persType;
              let isAdmin = res.data.permission;
              localStorage.setItem("persType", persType);
              let allNode = JSON.stringify(res.data.allNode); //当前用户所在组信息
              let allOrg = JSON.stringify(res.data.allOrg);
              localStorage.setItem("isAdmin", isAdmin);
              let orgId = res.data.orgId;
              localStorage.setItem("orgId", orgId);
              localStorage.setItem("allOrg", allOrg);
              localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId); //省级当前的机构id
              localStorage.setItem("currentRlcode", res.data.defaultOrg.rlcode); //省级当前的行政区划编码
              // 改变全局adcode状态
              this.$store.commit("changeAdCode", res.data.defaultOrg.rlcode);
              localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm); //省级当前的机构名称
              localStorage.setItem("allNode", allNode);
              this.$message.success({
                message: "登录成功",
                duration: 700,
              });
              this.$router.push("/");
            } else {
              this.$message(res.message);
            }
          },
          (err) => {
            this.$message.error({
              message: "用户名或验证码错误",
              duration: 700,
            });
          }
        );
      } catch (e) {}
    },
    getMessage: function () {
      try {
        sendMessage(this.account, this.imgcodeid, this.vCode).then(
          (res) => {
            this.messageDisable = true;
            if (res.success) {
              this.messageButton = "已发送(" + 60 + ")";
              this.countTime(59);
            } else {
              this.$message.warning(res.message);
              this.messageDisable = false;
              this.messageButton = "发送验证码";
            }
          },
          (err) => {
            this.messageDisable = false;
            this.messageButton = "发送验证码";
          }
        );
      } catch (e) {
        _self.messageDisable = false;
        _self.messageButton = "发送验证码";
      }
    },
    countTime: function (countTime) {
      var _self = this;
      setTimeout(function () {
        if (countTime > 0) {
          _self.messageButton = "已发送(" + countTime + ")";
          countTime--;
          _self.countTime(countTime);
        } else {
          _self.messageDisable = false;
          _self.messageButton = "发送验证码";
        }
      }, 1000);
    },
    loginTypeChange: function (loginType) {
      if (this.tabActived == "2") {
        localStorage.setItem("ownApp", "2");
      } else {
        localStorage.setItem("ownApp", "1");
      }
      this.loginType = loginType;
      if (this.loginType == 1) {
        this.loginTitle = "短信验证码登录";
        this.accountPlaceHolder = "请输入手机号码";
        this.passwordPlaceHolder = "请输入验证码";
      } else {
        this.loginTitle = "APP扫码登录";
        this.getQrCode();
      }
    },
    getQrCode: function () {
      var canvas = document.getElementById("canvas");
      let _self = this;
      this.qrUuid = uuidv4();
      console.log(this.qrUuid);

      qrCodeSubmit(this.qrUuid).then(
        (res) => {
          if (res.success) {
            _self.qrUuid = res.data.key;
            setTimeout(function () {
              QRCode.toCanvas(canvas, _self.qrUuid, function (error) {
                if (error) console.error(error);
                console.log("success!");
                _self.toLoginWithQrCode();
              });
            }, 1000);
          }
        },
        (err) => {}
      );
    },
    toLoginWithQrCode: function () {
      var _self = this;
      let qrCode = _self.qrUuid;
      let logtyp = this.loginType;
      let timer = setTimeout(function () {
        _self.countTimeNum++;
        if (_self.countTimeNum > 20) {
          clearTimeout(timer);
          _self.countTimeNum = 0;
        } else {
          if (logtyp == 3) {
            console.log("调用二维码登录");
            qrCodeLogin(qrCode).then((res) => {
              console.log(res);
              if (res.success) {
                let userid = res.data.guid;
                let loginName = res.data.persName;
                let guid = res.data.orgId;
                let orgNm = res.data.orgNm;
                let isAdmin = res.data.permission;
                let allNode = JSON.stringify(res.data.allNode); //当前用户所在组信息
                let allOrg = JSON.stringify(res.data.allOrg);
                let persType = res.data.persType;
                let accessToken = res.accessToken; //token是否过期
                localStorage.setItem("userid", userid);
                localStorage.setItem("account", loginName);
                localStorage.setItem("guid", guid);
                localStorage.setItem("orgNm", orgNm);
                localStorage.setItem("isAdmin", isAdmin);
                localStorage.setItem("persType", persType);
                localStorage.setItem("accessToken", accessToken);
                let orgId = res.data.orgId;
                localStorage.setItem("orgId", orgId);
                localStorage.setItem("allOrg", allOrg);
                localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId); //省级当前的机构id
                localStorage.setItem(
                  "currentRlcode",
                  res.data.defaultOrg.rlcode
                ); //省级当前的行政区划编码
                // 改变全局adcode状态
                _self.$store.commit("changeAdCode", res.data.defaultOrg.rlcode);
                localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm); //省级当前的机构名称
                localStorage.setItem("allNode", allNode);
                _self.$message.success({
                  message: "登录成功",
                  duration: 700,
                });
                _self.$router.push("/");
              } else {
                _self.toLoginWithQrCode();
              }
            });
          }
        }
      }, 3000);
    },
    // 选择登入系统
    changeSystem(val) {
      this.tabActived = val;
      localStorage.setItem("ownApp", val);
    },
    imgClick() {
      this.imgUrl = null;
      request
        .get(`/bis/insp/getCaptchaImage`)
        .then((res) => {
          this.$nextTick(() => {
            this.imgcodeid = res.data.imgCodeId;
            this.imgUrl = "data:image/jpg;base64," + res.data.img;
          });
        })
        .catch((err) => {});
    },
    move() {
      // 首先获取整个内容的宽度,(展示内容会超出隐藏,无法通过获取盒子宽度取到实际的内容宽度)
      // 所以专门造了一个 div 块来放内容,隐藏起来 (无法用根据字体内容来计算宽度的方法,存在误差,当内容较多
      // 的时候误差会相对较大)
      let width = document.getElementById("hide").getBoundingClientRect().width;
      // 获取展示块盒模型宽度
      let BoxWidth = document.getElementById("PackagingShell").offsetWidth;
      // 获取内容展示宽
      let viewBox = document.getElementById("viewBox");
      // 判断内容是否超长
      if (BoxWidth - width < 0) {
        // 内容超长,则获取抄本元素
        let transcript = document.getElementById("transcript");
        // 抄本元素内容填充
        transcript.innerText = this.text;
        // 设定抄本和主题之间的间距
        transcript.style.marginLeft = "200px";
      } else {
        // 没有超长则return,不做任何操作
        return;
      }
      // 设置初始位移距离
      let distance = 0;
      // 移动函数,通过定时器实现
      setInterval(function () {
        // 位移内用记录是是递减,此处的 1 控制移动变量 s
        distance = distance - 1;
        // 判断是否整个内容移动完
        if (-distance >= width) {
          // 若移动完,则重新设定位移值,此处赋值200是正好把 上面设置的块间距  200px 也加入移动范围,实现移动完无缝跳转
          distance = 150;
        }
        // 实时设置位移距离
        viewBox.style.transform = "translateX(" + distance + "px)";
      }, 27); // 移动时间间隔t   s和t 共同决定移动速度
    },
  },
  watch: {
    changeData: {
      handler: function (newval, oldval) {
        if (newval) {
          for (var key in newval) {
            if (!newval[key]) {
              this.messageDisable = true;
              return;
            } else {
              this.messageDisable = false;
            }
          }
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss">
@import url("/src/assets/iconfont/iconfont.css");

.login {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/images/login_bj1.png");
  background-size: 100% 100%;
  background-color: #0077c6;
  overflow: hidden;
  font-family: "微软雅黑";
  .llq_xz {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .llq_text {
    margin-left: 4px;
    text-decoration: none;
    font-size: 14px;
  }
}

.login > p {
  font-size: 28px;
  color: #333;
  text-align: center;
  margin-top: 22vh;
  letter-spacing: 5px;
}

.login .login_content {
  width: 860px;
  margin: 40px auto;
  margin-top: 20vh;
  color: #333;
  padding: 50px 30px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;

  .login_content_left {
    width: 35%;
    float: left;
    text-align: center;
    border-right: dashed 1px #b2b2b2;
    padding: 10px 10px 10px 0;

    .left_hr {
      display: block;
      height: 1px;
      margin: 0 10px 30px;
      background-color: #b2b2b2;
    }

    .province_logo {
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: bold;

      img {
        width: 130px;
      }
    }

    .download_app {
      font-size: 15px;
    }

    .download_app img {
      width: 120px;
    }
  }

  .login_content_right {
    width: 52%;
    float: right;
    padding: 10px 30px;
    text-align: center;

    .system_type_tab {
      width: 100%;
      border: solid 1px #d7d7d7;
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 18px;
      color: #999;
      box-sizing: border-box;
      margin-bottom: 20px;

      span {
        display: inline-block;
        width: 48%;

        &:first-child {
          border-right: solid 1px #d6d3d6;
        }
      }

      span {
        cursor: pointer;
      }

      .tabActived {
        color: #3d9afe;
        font-weight: bold;
      }
    }

    .login_types {
      width: 100%;
      height: 210px;

      .item {
        position: relative;

        i {
          position: absolute;
          top: 10px;
          left: 2px;
          color: #666;
          font-size: 18px;
        }
      }

      .el-input-group__append {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #dcdfe6;
      }
    }

    .item {
      width: 100%;
    }

    .login_text {
      font-size: 12px;
      color: #666;

      span {
        display: inline-block;
        width: 30%;
        height: 1px;
        margin: 0 10px;
        background-color: #aaa;
        vertical-align: middle;
      }
    }

    .login_item {
      p {
        font-size: 12px;
        color: #666;
      }

      .el-button--text {
        color: #666;
      }

      .item:hover {
        .el-button--text,
        p {
          color: #66b1ff;
        }
      }

      .item.active .el-button--text,
      .item.active p {
        color: #66b1ff;
      }
    }

    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }

    .el-input__inner {
      padding-left: 30px;
      background: transparent;
      border-top: none;
      border-left: none;
      border-right: none;
    }
  }
}

.login .login_content .login_content_left p {
  text-align: center;
  margin-bottom: 20px;
}

.login .login_content .item {
  margin-bottom: 20px;
  width: 80%;
}

.login .el-input {
  width: 100%;
}

.login .el-button--mini,
.el-button--mini.is-round {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

.loginTypeChange:hover {
  color: blue;
  cursor: pointer;
}

.loginTypeButton {
  font-size: xx-large !important;
}

.authCode .el-input-group__append,
.el-input-group__prepend {
  padding: 0 !important;
}

@media screen and (max-width: 1600px) {
  .login .login_content {
    width: 660px;
    margin: 40px auto;
    margin-top: 10vh;
    padding: 36px 20px;

    h2 {
      img {
        width: 70%;
      }
    }
  }
  .login .login_content .item {
    margin-bottom: 10px;
  }
  .login .el-button--mini,
  .el-button--mini.is-round {
    margin-top: 10px;
  }
}
/*公告滚动盒子样式*/
.PackagingShell {
  width: 85%; /*滚动部分宽度*/
  overflow: hidden; /*超出部分隐藏*/
  font-size: 24px;
  font-weight: bold;
  color: #f00;
  position: absolute;
  top: 10px;
  left: 10%;
}
.systemNotice {
  font-size: 24px;
  font-weight: bold;
  color: #f00;
  position: absolute;
  top: 10px;
  left: 4%;
}

/*主题内容块设置*/
#viewBox {
  /*设置内容框不可换行,确保两个div块始终在同一行*/
  white-space: nowrap;
}

/*内容块设置*/
#marquee {
  /*设置内容块不可换行*/
  white-space: nowrap;
}

/*获取宽度的块，用z-index隐藏*/
#hide {
  position: absolute;
  z-index: -999;
  top: -9999px;
  white-space: nowrap;
}
</style>