代码更新

lixuliang

2024-11-22 879a3501a8ab9767a59458ad8c337f6c25e2e7c4

 src/components/login.vue

@@ -1,20 +1,8 @@
<template>
  <div class="container">
    <vue-particles
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="80"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="false"
      clickMode="bubble"
    ></vue-particles>
    <vue-particles :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4" :linesWidth="1"
      :lineLinked="true" :lineOpacity="0.4" :linesDistance="80" :moveSpeed="2" :hoverEffect="true" hoverMode="grab"
      :clickEffect="false" clickMode="bubble"></vue-particles>
    <div class="MapMenu">
      <iframe id="ifream" style="border: none" width="100%" height="100%" v-bind:src="reportUrl"></iframe>
    </div>
@@ -28,25 +16,13 @@
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="输入登录账号"
            class="nobr"
            size="meddle"
            autocomplete="off"
          >
          <el-input v-model="loginForm.username" placeholder="输入登录账号" class="nobr" size="meddle" autocomplete="off">
            <i slot="prefix" class="el-icon-user"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            show-password
            v-model="loginForm.password"
            placeholder="请输入登录密码"
            class="nobr"
            autocomplete="off"
          >
          <el-input show-password v-model="loginForm.password" placeholder="请输入登录密码" class="nobr" autocomplete="off">
            <i slot="prefix" class="el-icon-lock"></i>
          </el-input>
        </el-form-item>
@@ -54,12 +30,8 @@
        <el-form-item required>
          <el-col :span="18">
            <el-form-item prop="validCode">
              <el-input
                @keyup.enter.native="submitForm('loginForm')"
                v-model="loginForm.validCode"
                placeholder="请输入验证码（忽略大小写）"
                class="nobr"
              ></el-input>
              <el-input @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.validCode"
                placeholder="请输入验证码（忽略大小写）" class="nobr"></el-input>
            </el-form-item>
          </el-col>

@@ -68,13 +40,8 @@
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="nobr loginbtn"
            style
            :loading="loading"
            @click="submitForm('loginForm')"
          >登录</el-button>
          <el-button type="primary" class="nobr loginbtn" style :loading="loading"
            @click="submitForm('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -106,13 +73,13 @@
    };

    const checkValidCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
        callback(new Error("验证码不正确"));
      } else {
        callback();
      }
      // if (!value) {
      //   callback(new Error("请输入验证码"));
      // } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
      //   callback(new Error("验证码不正确"));
      // } else {
      //   callback();
      // }
    };
    return {
      validCode: "",
@@ -157,44 +124,45 @@
    },
    // 账号密码登录
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.$router.push("/index");
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              loading.close();
              this.$router.push("/index");
              // }
            })
            .catch(error => {
              //网络超时异常处理
              loading.close();
              if (
                error.code === "ECONNABORTED" ||
                error.message === "Network Error" ||
                error.message.includes("timeout")
              ) {
                this.$message.error("请求超时，请稍后重试");
              }
              return Promise.resolve(error.response);
              // reject(error);
            });
          this.validCode = ""; //清空验证码输入框的内容
          this.refreshVcode(); //刷新验证码
        } else {
          this.validCode = ""; //清空验证码输入框的内容
          this.refreshVcode(); //刷新验证码
      // this.$refs[formName].validate(valid => {
      //   if (valid) {

          return false;
        }
      });
      //     const loading = this.$loading({
      //       lock: true,
      //       text: "Loading",
      //       spinner: "el-icon-loading",
      //       background: "rgba(0, 0, 0, 0.7)"
      //     });
      //     this.$store
      //       .dispatch("Login", this.loginForm)
      //       .then(() => {
      //         loading.close();
      //         this.$router.push("/index");
      //         // }
      //       })
      //       .catch(error => {
      //         //网络超时异常处理
      //         loading.close();
      //         if (
      //           error.code === "ECONNABORTED" ||
      //           error.message === "Network Error" ||
      //           error.message.includes("timeout")
      //         ) {
      //           this.$message.error("请求超时，请稍后重试");
      //         }
      //         return Promise.resolve(error.response);
      //         // reject(error);
      //       });
      //     this.validCode = ""; //清空验证码输入框的内容
      //     this.refreshVcode(); //刷新验证码
      //   } else {
      //     this.validCode = ""; //清空验证码输入框的内容
      //     this.refreshVcode(); //刷新验证码

      //     return false;
      //   }
      // });
    },
    refreshVcode() {
      this.$refs.refresh.createdCode();
@@ -215,6 +183,7 @@

  background: url("../assets/img/login.jpg") no-repeat center;
  background-size: 100% 100%;

  .MapMenu {
    width: 100%;
    height: 100%;
@@ -223,6 +192,7 @@
    position: absolute;
  }
}

.title_img {
  position: absolute;
  left: 75%;
@@ -233,18 +203,22 @@
  // background-color: #bfa;
  transform: translate(-50%, -40%);
}

.title_img img {
  width: 100%;
}

.main_img {
  position: absolute;
  left: 17%;
  top: 12%;
  /* transform: translateX(-50%); */
}

.main_img img {
  width: 100%;
}

.login {
  width: 372px;
  height: 400px;
@@ -265,16 +239,19 @@
  color: #3b4d6e;
  /* background-color: #bfa; */
}

.loginForm {
  margin-top: 61px;
  margin-left: 48px;
  /* background-color: #bfa; */
  width: 280px;
}

.el-form-item {
  /* margin-bottom: 12px; */
  height: 41px;
}

.el-input /deep/ .el-input__inner {
  /* background: rgba(80, 152, 255, 0.24); */
  border-color: rgba(0, 0, 0, 0.1);
@@ -285,6 +262,7 @@
  border: 0;
  padding: 0 !important;
}

.loginbtn {
  width: 280px;
  height: 50px;