资料馆界面重构，优化

Surpriseplus

2023-02-26 9dedc69f2c18b28cf18807531b6c8b81e6ad77e3

 src/components/login.vue

@@ -19,7 +19,7 @@
    <div class="MapMenu">
      <iframe
        id="ifream"
        style="border:none"
        style="border: none"
        width="100%"
        height="100%"
        v-bind:src="reportUrl"
@@ -32,7 +32,6 @@
      />
    </div>
    <div class="login">

      <div class="login_title">
        <span>用户登录</span>
      </div>
@@ -82,7 +81,6 @@
              ></el-input>
            </el-form-item>
          </el-col>
 

          <el-col
            :span="6"
@@ -99,13 +97,13 @@
          <img
            src="../assets/img/zhengshu.png"
            alt=""
          /><span>证书安装与添加信任站点</span>
          /><span style="color: black">证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img
            src="../assets/img/document.png"
            alt=""
          /><span>使用帮助文档</span>
          /><span style="color: black">使用帮助文档</span>
        </el-form-item>
        <el-form-item>
          <el-button
@@ -127,17 +125,17 @@
</template>

<script>
import { getPerms } from '../api/api';
import validCode from './verificationCode.vue';
import { mapActions } from 'vuex';
import moment from 'moment';
import { getPerms } from "../api/api";
import validCode from "./verificationCode.vue";
import { mapActions } from "vuex";
import moment from "moment";

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

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

    const checkValidCode = (rule, value, callback) => {

      if (!value) {
        callback(new Error('请输入验证码'));
        callback(new Error("请输入验证码"));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
        callback(new Error('验证码不正确'));
        callback(new Error("验证码不正确"));
      } else {
        callback();
      }
    };

    return {
      validCode: '',
      validCode: "",
      loading: false,
      loginForm: {
        uid: 'admin',
        pwd: 'Admin@1234_lf',
        uid: "admin",
        pwd: "Admin@1234_lf",
      },
      rules: {
        uid: [{ validator: validUserName, trigger: 'blur' }],
        pwd: [{ validator: validPassword, trigger: 'blur' }],
        validCode: [{ validator: checkValidCode, trigger: 'blur' }],
        showSessionId: '',
        reportUrl: ''
        uid: [{ validator: validUserName, trigger: "blur" }],
        pwd: [{ validator: validPassword, trigger: "blur" }],
        validCode: [{ validator: checkValidCode, trigger: "blur" }],
        showSessionId: "",
        reportUrl: "",
      },
    };
  },
  mounted() {


    this.getpublickey();
  },
  methods: {
    //   获取vuex中Actions里的方法
    ...mapActions(['login', 'getpublickey']),
    ...mapActions(["login", "getpublickey"]),
    getCode(data) {

      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
    },

@@ -198,36 +192,36 @@
          this.login(this.loginForm)
            .then((response) => {
              if (response.code != 200) {
                this.loading = false
                this.loading = false;
                Message({
                  message: response.msg,
                  type: 'error',
                  type: "error",
                  duration: 5 * 1000,
                });
                return
                return;
              }

              if (response.msg != "") {
                this.$message({
                  message: response.msg,
                  type: 'warning'
                  type: "warning",
                });
              }
              this.setCookies(response);

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

                  if (res.result.length != 0) {
                    sessionStorage.setItem('routerName', '/Synthesis')
                    sessionStorage.setItem('changeSelectStyle', 3)
                    this.$router.push('/');
                    sessionStorage.setItem("routerName", "/Thematic");
                    sessionStorage.setItem("changeSelectStyle", 1);
                    this.$router.push("/");
                  }
                  this.loading = false
                  this.loading = false;
                } else {
                  this.loading = false
                  console.log('error submit!!');
                  this.loading = false;
                  console.log("error submit!!");
                }
              });

@@ -239,52 +233,52 @@
            });
          //如果登录失败，需要刷新验证码的
          this.$refs.refresh.createdCode();
          this.validCode = ''; //清空验证码输入框的内容
          this.validCode = ""; //清空验证码输入框的内容
        } else {
          this.loading = false
          console.log('error submit!!');
          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 timeData = moment(res.result.expire).format("YYYY-MM-DD HH:mm:ss");
      var LfPrems = {
        token: res.result.token,
        uname: res.result.uname,
        time: timeData,
        userid: res.result.createUser,
        expire: res.result.expire
        expire: res.result.expire,
      };
      LfPrems = JSON.stringify(LfPrems);
      localStorage.setItem('LFToken', LfPrems);
      localStorage.setItem("LFToken", LfPrems);
    },
    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();
          this.submitForm('loginForm')
          this.submitForm("loginForm");
        }
      };

    },
    startURL() {
   var url = window.location.href;
      var testurl = '';
      if (url.indexOf('web') != -1) {
        testurl = '/web';
      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() {
    this.startURL()
    this.startURL();
    this.enterLogin();
  },
};
@@ -337,7 +331,7 @@
  left: 75%;
  top: 45%;
  transform: translate(-50%, -40%);
  background: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}