新版

lixuliang

2024-08-29 7cde297f0a99e060aea9bce60d1c121a14ae74d7

 src/components/login.vue

@@ -14,18 +14,12 @@
      hoverMode="grab"
      :clickEffect="false"
      clickMode="bubble"
    >
    </vue-particles>
    ></vue-particles>
    <div class="MapMenu">
      <iframe
        id="ifream"
        style="border: none"
        width="100%"
        height="100%"
        v-bind:src="reportUrl"
      ></iframe>
      <iframe id="ifream" style="border: none" width="100%" height="100%" v-bind:src="reportUrl"></iframe>
    </div>
    <div class="title_img">
      <h1>作战实验条件建设</h1>
      <!-- <img src="../assets/img/lg_03.png" alt /> -->
    </div>
    <div class="login">
@@ -33,9 +27,9 @@
        <span>用户登录</span>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
        <el-form-item prop="uid">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.uid"
            v-model="loginForm.username"
            placeholder="输入登录账号"
            class="nobr"
            size="meddle"
@@ -45,10 +39,10 @@
          </el-input>
        </el-form-item>

        <el-form-item prop="pwd">
        <el-form-item prop="password">
          <el-input
            show-password
            v-model="loginForm.pwd"
            v-model="loginForm.password"
            placeholder="请输入登录密码"
            class="nobr"
            autocomplete="off"
@@ -57,25 +51,22 @@
          </el-input>
        </el-form-item>

        <!-- <el-form-item required>
        <el-form-item required>
          <el-col :span="18">
            <el-form-item prop="validCode">
              <el-input 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>

          <el-col :span="6" align="right">
            <validCode v-model="validCode" ref="refresh" @sendData="getCode"></validCode>
          </el-col>
        </el-form-item> -->
        <!-- <el-form-item>
          <img src="../assets/img/zhengshu.png" alt />
          <span style="color: black">证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/document.png" alt />
          <span style="color: black">使用帮助文档</span>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
@@ -92,6 +83,7 @@

<script>
import validCode from "./verificationCode.vue";
import Cookies from "js-cookie";

export default {
  name: "login",
@@ -122,22 +114,17 @@
        callback();
      }
    };
    // loginForm: {
    //     uid: "admin",
    //     pwd: "Admin@1234_lf",
    //   }
    return {
      validCode: "",
      loading: false,
      loginForm: {
        uid: "",
        pwd: ""
        username: "",
        password: ""
      },
      rules: {
        uid: [{ validator: validUserName, trigger: "blur" }],
        pwd: [{ validator: validPassword, trigger: "blur" }],
        username: [{ validator: validUserName, trigger: "blur" }],
        password: [{ validator: validPassword, trigger: "blur" }],
        validCode: [{ validator: checkValidCode, trigger: "blur" }],
        showSessionId: "",
        reportUrl: ""
      }
    };
@@ -152,16 +139,65 @@
    startURL() {
      var url = window.location.href;
      var testurl = "";
      if (url.indexOf("web") != -1) {
        testurl = "/web";
      if (url.indexOf("sso") != -1) {
        testurl = "/sso";
      }
      this.reportUrl =
        window.location.origin + testurl + "/static/mapscreen/index.html";
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");

      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password)
      };
    },
    // 账号密码登录
    submitForm(formName) {
      this.$router.push("/index");
     
      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(); //刷新验证码

          return false;
        }
      });
    },
    refreshVcode() {
      this.$refs.refresh.createdCode();
    }
  }
};
@@ -189,10 +225,13 @@
}
.title_img {
  position: absolute;
  left: 20%;
  top: 8%;
  width: 20%;
  /* transform: translateX(-50%); */
  left: 75%;
  top: 20%;
  width: 16em;
  color: white;
  font-size: 30px;
  // background-color: #bfa;
  transform: translate(-50%, -40%);
}
.title_img img {
  width: 100%;