后端没修改的情况下添加默认背景图

heyujie

2021-11-16 6a5962fe9544005dba620b00fb36c25fe2da4e76

 src/pages/index/App.vue

@@ -1,8 +1,11 @@
<template>
  <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
    <div class="web-site">
      <a href="http://www.aiotlink.com" target="_blank">www.aiotlink.com</a>
      <a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
    </div>

    <!-- 授权信息 -->
    <lang-select class="lang-select"/>
    <licence />
    <div class="right-bg" style>
      <particle-network />
@@ -12,7 +15,7 @@
        <img src="/images/login-logo.png" alt width="105px" height="105px" />
      </div>
      <div class="login-com">
        <span>北京贝思科技术有限公司</span>
        <span>{{ $t('login.company') }}</span>
      </div>
      <div class="login-form">
        <el-form
@@ -24,7 +27,7 @@
          class="demo-ruleForm"
        >
          <el-form-item prop="loginName">
            <el-input v-model="user.loginName" style="width:280px" placeholder="请输入用户名">
            <el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">
              <i slot="prefix" class="iconfont iconyonghu1"></i>
            </el-input>
          </el-form-item>
@@ -35,25 +38,35 @@
              v-model="user.password"
              autocomplete="off"
              style="width:280px"
              placeholder="请输入密码"
              :placeholder="$t('placeholder.enterPassword')"
            >
              <i slot="prefix" class="iconfont iconmima"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">登录</el-button>
            <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <p class="gradient-text gradient-text-one">——— {{serverTitle || '智 能 计 算 节 点 — ReID'}} ———</p>
      <!-- <p class="gradient-text gradient-text-one">——— {{serverTitle || 'SmartAI — ReID'}} ———</p> -->
      <p class="gradient-text gradient-text-one">
        ——
        <b>SmartAI</b> {{ $t('login.aios') }} ——
      </p>
      <p
        class="gradient-text gradient-text-one"
        style="letter-spacing: 1.8px;font-size:15px;"
      >V1.0.0</p>
    </div>
  </div>
</template>

<script>
import { tologin, getLoginUserData, getServerName } from './api.ts'
import { tologin, getLoginUserData, getServerName } from './api.ts';
import ParticleNetwork from './ParticleNetwork'
import Licence from '@/components/licence'
import LangSelect from '@/components/langSelect'
import { getMenuListData } from "@/api/utils";

export default {
  name: 'login-pgae',
@@ -62,7 +75,16 @@
  },
  components: {
    ParticleNetwork,
    Licence
    Licence,
    LangSelect
  },
  computed: {
    rules() {
      return {
        loginName: [{ required: true, message: this.$t('placeholder.enterUsername'), trigger: 'change' } ],
        password: [{ required: true, message: this.$t('placeholder.enterPassword'), trigger: 'change' }]
        }
    },
  },
  data: () => ({
    serverTitle: "",
@@ -72,18 +94,47 @@
      rememberMe: false
    },
    nullRule: {},
    rules: {
      loginName: [
        { required: true, message: '请输入用户名', trigger: 'change' }
      ],
      password: [{ required: true, message: '请输入密码', trigger: 'change' }]
    },

    loading: '',
    vLoading: false,
    currentHeight: 1057,
    currentWidth: 1920
  }),
  created() {
    this.getServerName()
    this.getScreenHeight()
  },
  mounted() {
    // 自动登录接口
    this.loginRobot();
  },
  watch: {},
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    loginRobot() {
      // 解析路由参数，并缓存
      let user = this.getQueryVariable("username");
      let passwd = this.getQueryVariable("password");
      if (user.length && passwd.length) {
        sessionStorage.setItem("autoLogin", JSON.stringify({ username: user, passwd: passwd }));

        this.user.loginName = user;
        this.user.password = passwd;
        this.systemLogin();
        return;
      }

      // 登陆超时后的重新登陆
      let sessionInfo = sessionStorage.getItem('autoLogin');
      if (sessionInfo) {
        let authority = JSON.parse(sessionInfo);
        this.user.loginName = authority.username;
        this.user.password = authority.passwd;
        this.systemLogin();
      }
    },
    systemLogin() {
      this.nullRule = this.rules
      this.$nextTick(() => {
@@ -96,7 +147,6 @@
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.testLogin()
            // return false
          } else {
            this.nullRule = {}
          }
@@ -105,9 +155,9 @@
      })
    },
    async testLogin() {
      // location.assign("/view/desktop/")
      tologin({ username: this.user.loginName, password: this.user.password })
        .then(json => {
          // console.log(json, "登录请求");
          const loginedInfo = {
            access_token: json.token_type + ' ' + json.access_token,
            refresh_token: json.refresh_token
@@ -118,48 +168,35 @@
          this.getLoginUserData()
        })
        .catch(err => {
          // console.log(err, "登录报错");
          this.loading.close()
          this.$notify({
            title: '提示',
            type: 'error',
            message: err
            message: err.msg
          })
          this.$refs.pwd.focus()
        })
    },
    async getLoginUserData() {
      let json = await getLoginUserData()
      if (!json.error) {
        // this.loading.close()
        sessionStorage.setItem('userInfo', JSON.stringify(json))
        this.$notify({
          title: '提示',
          type: 'success',
          message: '登录成功！'
        })
        // await this.getMenuList()
        // this.$router.push('/Layout/Video')
        location.assign("/view/desktop")
        return json
      let res = await getLoginUserData()
      if (res.success) {
        sessionStorage.setItem('userInfo', JSON.stringify(res.data))
        this.$notify.success("登录成功！")
        // 获取权限
        await this.getMenuList()
        location.assign("/view/desktop/")
        return res.data
      } else {
        this.$notify({
          title: '提示',
          type: 'error',
          message: '登录失败！'
        })
        // this.loading.close()
        this.$notify.error("登录失败！")
      }
    },

    getScreenHeight() {
      this.currentHeight = document.documentElement.clientHeight
      this.currentWidth = document.documentElement.clientWidth
      // console.log(this.currentHeight, "当前窗口大小");
      window.onresize = () => {
        this.currentHeight = document.documentElement.clientHeight
        this.currentWidth = document.documentElement.clientWidth
        // console.log(this.currentHeight, "当前窗口大小2", this.currentWidth);
        this.$forceUpdate()
      }
    },
@@ -169,19 +206,37 @@
        this.serverTitle = res.data.serverName
        window.document.title = res.data.serverName
          ? res.data.serverName
          : '智 能 计 算 节 点'
          : 'SmartAI'
        sessionStorage.setItem('title', res.data.serverName)
      }
    },
    async getMenuList() {
      let results = await getMenuListData({});
      if (results && results.success) {
        /* 存储权限 */
        let buttonAuthoritys = results.data;
        if (results && results.length && this.$route.query.is_login) {
          this.$router.replace(results[0].url);
        }
        sessionStorage.setItem("buttonAuthoritys", "," + buttonAuthoritys + ",");
        sessionStorage.setItem("menuInfo", JSON.stringify(results));
      } else {
        this.$toast({
          type: "error",
          message: "菜单获取失败"
        });
      }
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }
  },
  created() {
    this.getServerName()
    this.getScreenHeight()
  },
  watch: {},
  beforeDestroy() {
    window.onresize = null
  }
}
</script>
<style lang="scss">
@@ -212,12 +267,19 @@
  color: #6170e1;
  letter-spacing: 6.15px;
}
.lang-select {
  float: right;
  color: white !important;
  font-size: 14px;
  margin: 13px;
  cursor: pointer;
}
.left-bg {
  position: absolute;
  top: 30%;
  top: 29%;
  right: 18%;
  width: 390px;
  height: 402px;
  height: 426px;
  background: rgba(146, 208, 255, 0.23);
  border-radius: 4px;
  text-align: center;
@@ -234,14 +296,16 @@
  }
  .login-form {
    margin: 40px 10px;
    // margin: 24px 10px 40px 10px;
  }
  .gradient-text {
    line-height: 50px;
    font-size: 20px;
    line-height: 36px;
    font-size: 17px;
    font-family: -webkit-pictograph;
    font-weight: bolder;
    position: relative;
    b {
      font-size: 20px;
    }
  }
  .gradient-text-one {
    background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);