页面添加

surprise

2024-04-28 83ff2ebbb1d61c2cd7762df33f61ff0418b2b1c9

 src/components/login.vue

@@ -1,118 +1,90 @@
<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 :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>
      <iframe id="ifream"
              style="border: none"
              width="100%"
              height="100%"
              v-bind:src="reportUrl"></iframe>
    </div>
    <div class="title_img">
      <img
        src="../assets/img/lg_03.png"
        alt=""
      />
      <img src="../assets/img/lg_03.png"
           alt="" />
    </div>
    <div class="login">
      <div class="login_title">
        <span>用户登录</span>
      </div>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        class="loginForm"
      >
      <el-form :model="loginForm"
               :rules="rules"
               ref="loginForm"
               class="loginForm">
        <el-form-item prop="uid">
          <el-input
            v-model="loginForm.uid"
            placeholder="输入登录账号"
            class="nobr"
            size="meddle"
            autocomplete="off"
          >
            <i
              slot="prefix"
              class="el-icon-user"
            ></i>
          <el-input v-model="loginForm.uid"
                    placeholder="输入登录账号"
                    class="nobr"
                    size="meddle"
                    autocomplete="off">
            <i slot="prefix"
               class="el-icon-user"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="pwd">
          <el-input
            show-password
            v-model="loginForm.pwd"
            placeholder="请输入登录密码"
            class="nobr"
            autocomplete="off"
          >
            <i
              slot="prefix"
              class="el-icon-lock"
            ></i>
          <el-input show-password
                    v-model="loginForm.pwd"
                    placeholder="请输入登录密码"
                    class="nobr"
                    autocomplete="off">
            <i slot="prefix"
               class="el-icon-lock"></i>
          </el-input>
        </el-form-item>

        <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 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 :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>
          <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>
          <img src="../assets/img/document.png"
               alt="" /><span style="color: black">使用帮助文档</span>
        </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>
@@ -127,27 +99,27 @@

export default {
  components: { validCode },
  data() {
    let validUserName = (rule, value, callback) => {
      if (!value) {
  data () {
    let validUserName=(rule,value,callback) => {
      if(!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };

    let validPassword = (rule, value, callback) => {
      if (!value) {
    let validPassword=(rule,value,callback) => {
      if(!value) {
        return callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };

    const checkValidCode = (rule, value, callback) => {
      if (!value) {
    const checkValidCode=(rule,value,callback) => {
      if(!value) {
        callback(new Error("请输入验证码"));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
      } else if(value.toUpperCase()!==this.validCode.toUpperCase()) {
        callback(new Error("验证码不正确"));
      } else {
        callback();
@@ -165,35 +137,35 @@
        pwd: "",
      },
      rules: {
        uid: [{ validator: validUserName, trigger: "blur" }],
        pwd: [{ validator: validPassword, trigger: "blur" }],
        validCode: [{ validator: checkValidCode, trigger: "blur" }],
        uid: [{ validator: validUserName,trigger: "blur" }],
        pwd: [{ validator: validPassword,trigger: "blur" }],
        validCode: [{ validator: checkValidCode,trigger: "blur" }],
        showSessionId: "",
        reportUrl: "",
      },
    };
  },
  mounted() {
  mounted () {
    this.getpublickey();
  },
  methods: {
    handlePaste(e) {
    handlePaste (e) {
      e.preventDefault();
    },
    //   获取vuex中Actions里的方法
    ...mapActions(["login", "getpublickey"]),
    getCode(data) {
      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
    ...mapActions(["login","getpublickey"]),
    getCode (data) {
      this.validCode=data; //在data中定义一个 validCode:'',用来记录验证码。
    },

    submitForm(formName) {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
        if(valid) {
          this.loading=true;
          this.login(this.loginForm)
            .then((response) => {
              if (response.code != 200) {
                this.loading = false;
              if(response.code!=200) {
                this.loading=false;
                this.$message({
                  message: response.msg,
                  type: "error",
@@ -206,7 +178,7 @@
                return;
              }

              if (response.msg != "") {
              if(response.msg!="") {
                this.$message({
                  message: response.msg,
                  type: "warning",
@@ -215,45 +187,49 @@
              this.setCookies(response);

              getPerms().then((res) => {
                if (res.code == 200) {
                  this.$store.commit("getPermsEntity", res.result);
                if(res.code==200) {
                  this.$store.commit("getPermsEntity",res.result);

                  if (res.result.length != 0) {
                    sessionStorage.setItem("routerName", "/Thematic");
                    sessionStorage.setItem("changeSelectStyle", 1);
                    this.$router.push("/");
                  if(res.result.length!=0) {

                    // sessionStorage.setItem("routerName","/Synthesis");
                    // sessionStorage.setItem("routerName", "/Thematic");
                    // sessionStorage.setItem("changeSelectStyle",1);
                    // this.$router.push("/");
                    sessionStorage.setItem("changeSelectStyle",1)
                    this.$router.push("/Synthesis")
                  } else {
                    this.$message({
                      message: "请您联系管理员分配角色菜单",
                      type: "error",
                    });
                  }
                  this.loading = false;
                  this.loading=false;
                } else {
                  this.loading = false;
                  this.loading=false;
                  console.log("error submit!!");
                }
              });

              this.loading = false;
              this.loading=false;
              //调用录接口
            })
            .catch((response) => {
              this.loading = false;
              this.loading=false;
            });
          //如果登录失败，需要刷新验证码的
          this.$refs.refresh.createdCode();
          this.validCode = ""; //清空验证码输入框的内容
          this.validCode=""; //清空验证码输入框的内容
        } else {
          this.loading = false;
          this.loading=false;
          console.log("error submit!!");
          return false;
        }
      });
    },
    setCookies(res) {
      var timeData = moment(res.result.expire).format("YYYY-MM-DD HH:mm:ss");
      var LfPrems = {
    setCookies (res) {
      var timeData=moment(res.result.expire).format("YYYY-MM-DD HH:mm:ss");
      var LfPrems={
        token: res.result.token,
        uname: res.result.uname,
        time: timeData,
@@ -261,16 +237,16 @@
        expire: res.result.expire,
        autoLogOut: res.result.autoLogOut,
      };
      LfPrems = JSON.stringify(LfPrems);
      localStorage.setItem("LFToken", LfPrems);
      LfPrems=JSON.stringify(LfPrems);
      localStorage.setItem("LFToken",LfPrems);
    },
    enterLogin() {
      document.onkeydown = (e) => {
        e = window.event || e;
    enterLogin () {
      document.onkeydown=(e) => {
        e=window.event||e;

        if (
          this.$route.path == "/login" &&
          (e.code == "Enter" || e.code == "enter" || e.code == "NumpadEnter")
        if(
          this.$route.path=="/login"&&
          (e.code=="Enter"||e.code=="enter"||e.code=="NumpadEnter")
        ) {
          //最重要最后调用1.登录校验方法
          //this.login();
@@ -278,17 +254,17 @@
        }
      };
    },
    startURL() {
      var url = window.location.href;
      var testurl = "";
      if (url.indexOf("web") != -1) {
        testurl = "/web";
    startURL () {
      var url=window.location.href;
      var testurl="";
      if(url.indexOf("web")!=-1) {
        testurl="/web";
      }
      this.reportUrl =
        window.location.origin + testurl + "/mapscreen/index.html";
      this.reportUrl=
        window.location.origin+testurl+"/mapscreen/index.html";
    },
  },
  created() {
  created () {
    this.startURL();
    this.enterLogin();
  },