版本更新

Surpriseplus

2023-02-18 cbbbc6bd2d854270b9342ce2ff2a3432aaca22cf

 src/components/login.vue

@@ -1,77 +1,41 @@
<template>
  <div class="container">
    <div class="title_img">
      <img src="../assets/img/loginLogo.png" alt="" />
    <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>
    <div class="main_img">
      <img src="../assets/img/loginMain.png" alt="" />
    <div class="title_img">
      <img
        src="../assets/img/lg_03.png"
        alt=""
      />
    </div>
    <div class="login">

      <div class="login_title">
        <span>用户登录</span>
      </div>
      <!-- <el-form ref="form" :model="form" :rules="rules" class="loginForm">
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" v-model="form.username">
            <i slot="prefix" class="el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            placeholder="请输入密码"
            v-model="form.password"
            @keyup.enter.native="onSubmit"
          >
            <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="form.validCode"
                style="width: 280px"
                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
            >证书安装与添加信任站点</span
          >
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/document.png" alt="" /><span
            >使用帮助文档</span
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            @click="onSubmit"
            style="
              width: 384px;
              height: 50px;
              margin-top: 55px;
              background: #3b4d6e;
              border-radius: 5px;
            "
            >登录</el-button
          >
        </el-form-item>
      </el-form> -->

      <el-form
        :model="loginForm"
        :rules="rules"
@@ -86,8 +50,11 @@
            size="meddle"
            autocomplete="off"
          >
            <i slot="prefix" class="el-icon-user"></i
          ></el-input>
            <i
              slot="prefix"
              class="el-icon-user"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="pwd">
@@ -98,8 +65,11 @@
            class="nobr"
            autocomplete="off"
          >
            <i slot="prefix" class="el-icon-lock"></i
          ></el-input>
            <i
              slot="prefix"
              class="el-icon-lock"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item required>
@@ -112,8 +82,12 @@
              ></el-input>
            </el-form-item>
          </el-col>
 

          <el-col :span="6" align="right">
          <el-col
            :span="6"
            align="right"
          >
            <validCode
              v-model="validCode"
              ref="refresh"
@@ -122,14 +96,16 @@
          </el-col>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/zhengshu.png" alt="" /><span
            >证书安装与添加信任站点</span
          >
          <img
            src="../assets/img/zhengshu.png"
            alt=""
          /><span>证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/document.png" alt="" /><span
            >使用帮助文档</span
          >
          <img
            src="../assets/img/document.png"
            alt=""
          /><span>使用帮助文档</span>
        </el-form-item>
        <el-form-item>
          <el-button
@@ -143,8 +119,7 @@
            "
            :loading="loading"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -155,6 +130,7 @@
import { getPerms } from '../api/api';
import validCode from './verificationCode.vue';
import { mapActions } from 'vuex';
import moment from 'moment';

export default {
  components: { validCode },
@@ -176,6 +152,7 @@
    };

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

      if (!value) {
        callback(new Error('请输入验证码'));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
@@ -190,37 +167,66 @@
      loading: false,
      loginForm: {
        uid: 'admin',
        pwd: 'Admin@123',
        pwd: 'Admin@1234_lf',
      },
      rules: {
        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']),
    getCode(data) {

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

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.login(this.loginForm)
            .then((response) => {
              if (response.code != 200) {
                this.loading = false
                Message({
                  message: response.msg,
                  type: 'error',
                  duration: 5 * 1000,
                });
                return
              }

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

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

                  if (res.result.length != 0) {
                    sessionStorage.setItem('routerName', '/Synthesis')
                    sessionStorage.setItem('changeSelectStyle', 3)
                    this.$router.push('/');
                  }
                  this.loading = false
                } else {
                  this.loading = false
                  console.log('error submit!!');
                }
              });
@@ -235,18 +241,57 @@
          this.$refs.refresh.createdCode();
          this.validCode = ''; //清空验证码输入框的内容
        } else {
          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 = {
        token: res.result.token,
        uname: res.result.uname,
        time: timeData,
        userid: res.result.createUser,
        expire: res.result.expire
      };
      LfPrems = JSON.stringify(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')) {

          //最重要最后调用1.登录校验方法
          //this.login();
          this.submitForm('loginForm')
        }
      };

    },
    startURL() {
   var url = window.location.href;
      var testurl = '';
      if (url.indexOf('web') != -1) {
        testurl = '/web';
      }
      this.reportUrl = window.location.origin + testurl + '/mapscreen/index.html';
    }
  },
  created() {},
  created() {
    this.startURL()
    this.enterLogin();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
@@ -255,13 +300,22 @@
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #1c78e0;

  background: url("../assets/img/login.jpg") no-repeat center;
  background-size: 100% 100%;
  .MapMenu {
    width: 100%;
    height: 100%;
    top: 5%;
    left: 1%;
    position: absolute;
  }
}
.title_img {
  position: absolute;
  left: 10%;
  top: 10%;
  left: 17%;
  top: 8%;
  width: 20%;
  /* transform: translateX(-50%); */
}
.title_img img {
@@ -280,10 +334,10 @@
  width: 472px;
  height: 571px;
  position: absolute;
  left: 80%;
  top: 50%;
  left: 75%;
  top: 45%;
  transform: translate(-50%, -40%);
  background-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

@@ -311,6 +365,7 @@
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

.el-input /deep/ .el-input-group__prepend {
  border: 0;
  padding: 0 !important;