对比库管理2

heyujie

2021-12-10 1e3e48e3deacb44e9de1097dbf8d6c42aac71835

 src/pages/index/App.vue

@@ -1,138 +1,94 @@
<template>
  <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
    <div class="web-site">
      <a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
    </div>
  <div class="init" v-if="!isWhite">
    <div class="content">
      <div class="title">欢迎注册Smart AI 人工智能操作系统</div>
      <el-steps :active="active" finish-status="success" :align-center="true">
        <el-step title="创建账号"></el-step>
        <el-step title="配置网络"></el-step>
        <el-step title="注册信息"></el-step>
      </el-steps>

    <!-- 授权信息 -->
    <lang-select class="lang-select"/>
    <licence />
    <div class="right-bg" style>
      <particle-network />
    </div>
    <div class="left-bg">
      <div class="login-logo">
        <img src="/images/login-logo.png" alt width="105px" height="105px" />
      </div>
      <div class="login-com">
        <span>{{ $t('login.company') }}</span>
      </div>
      <div class="login-form">
        <el-form
          :model="user"
          status-icon
          :rules="nullRule"
          :validate-on-rule-change="false"
          ref="ruleForm"
          class="demo-ruleForm"
      <el-carousel
        ref="carousel"
        trigger="click"
        height="480px"
        :loop="false"
        :autoplay="false"
        :initial-index="active"
        >
          <el-form-item prop="loginName">
            <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>
          <el-form-item prop="password">
            <el-input
              show-password
              @keyup.enter.native="systemLogin()"
              v-model="user.password"
              autocomplete="off"
              style="width:280px"
              :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">{{ $t('button.login') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <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>
        <el-carousel-item>
          <formAccount ref="form0"></formAccount>
        </el-carousel-item>
        <el-carousel-item>
          <formNet ref="form1"></formNet>
        </el-carousel-item>
        <el-carousel-item>
          <formInfo ref="form2"></formInfo>
        </el-carousel-item>
      </el-carousel>

      <div class="control">
        <div class="pre" @click="preForm">上一步</div>
        <div class="next" @click="nextForm" v-if="active == 0">下一步</div>
        <div class="next" @click="nextForm" v-if="active == 1">跳过</div>
        <div class="next" @click="nextForm" v-if="active == 2">完成</div>
    </div>
  </div>
  </div>
  <div class="white" v-else></div>
</template>

<script>
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";
import formAccount from "@/pages/index/components/formAccount";
import formNet from "@/pages/index/components/formNet";
import formInfo from "@/pages/index/components/formInfo";
import {
  getInitInfo,
  savePassword,
  initNetwork,
  saveRegInfo,
  getRegInfo,
} from "./api";

export default {
  name: 'login-pgae',
  metaInfo: {
    title: '登录页'
  created() {
    this.getInitInfo();
  },
  data() {
    return {
      active: 0,
      formData: {},
      isWhite: true,
    };
  },
  components: {
    ParticleNetwork,
    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: "",
    user: {
      loginName: '',
      password: '',
      rememberMe: false
    },
    nullRule: {},

    loading: '',
    vLoading: false,
    currentHeight: 1057,
    currentWidth: 1920
  }),
  created() {
    this.getServerName()
    this.getScreenHeight()
  },
  mounted() {
    // 自动登录接口
    this.loginRobot();
  },
  watch: {},
  beforeDestroy() {
    window.onresize = null
    formAccount,
    formNet,
    formInfo,
  },
  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();
    preForm() {
      if (this.active == 0) {
        return;
      }
      this.active--;
      this.$refs["carousel"].prev();
    },
    async nextForm() {
      if (this.active == 2) {
        const data = this.$refs[`form${this.active}`].getFormData();
        await saveRegInfo(data);
        location.assign("/login");
        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();
      if (this.active == 0) {
        const data = this.$refs[`form${this.active}`].getFormData();
        if (!data) {
          return false;
        }
        const res1 = await savePassword(data);
        console.log(data);
      }
    },
    systemLogin() {
@@ -189,136 +145,176 @@
      } else {
        this.$notify.error("登录失败！")
      }
    },

    getScreenHeight() {
      this.currentHeight = document.documentElement.clientHeight
      this.currentWidth = document.documentElement.clientWidth
      window.onresize = () => {
        this.currentHeight = document.documentElement.clientHeight
        this.currentWidth = document.documentElement.clientWidth
        this.$forceUpdate()
      }
      this.active++;
      this.$refs["carousel"].next();
    },
    async getServerName() {
      let res = await getServerName()
      if (res && res.success) {
        this.serverTitle = res.data.serverName
        window.document.title = res.data.serverName
          ? res.data.serverName
          : 'SmartAI'
        sessionStorage.setItem('title', res.data.serverName)
    async getInitInfo() {
      const res = await getInitInfo();

      if (res.data.initPwd && !res.data.initRegInfo) {
        const res1 = await getRegInfo();
        this.active = 1;
        this.$refs["carousel"].setActiveItem(1);
      }

      if (res.data.initPwd && res.data.initRegInfo) {
        location.assign("/login");
        return;
      }

      this.isWhite = false;
    },
    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);
    }
  },
}
};
</script>
<style lang="scss">
.right-bg {
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("/images/login-net.png");

  width: 100%;
<style lang="scss" scoped>
.init {
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  background-image: url("/images/init/背景图.png");
  color: #fff;
  user-select: none;

  .content {
    margin: 0 auto;
    width: 1000px;
    padding-top: 80px;

    .title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 50px;
      letter-spacing: 5px;
}
.web-site {
  position: absolute;
  top: 55px;
  left: 41px;
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #6170e1;
  letter-spacing: 6.15px;

    .el-steps ::v-deep {
      margin-left: 22px;
      text-align: left;

      .el-step__icon {
        width: 48px;
        height: 48px;
}
.lang-select {
  float: right;
  color: white !important;
  font-size: 14px;
  margin: 13px;

      .el-step__line {
        left: 210px;
        right: -110px;
        border: 0.5px solid #fff;
        border-bottom: none;
        border-top: none;
        opacity: 0.1;
        top: 22px;
      }

      .is-success .el-step__icon {
        background: none;
        border: 2px solid rgba(255, 255, 255, 0.3);

        .el-icon-check::before {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
        }
      }

      .is-process .el-step__icon {
        background-color: rgba(255, 255, 255, 0.3);
        border: none;

        .el-step__icon-inner {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
        }
      }

      .is-wait .el-step__icon {
        border: 2px solid rgba(255, 255, 255);
        opacity: 0.5;
        background: none;

        .el-step__icon-inner {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
        }
      }

      .el-step__main {
        margin-top: 20px;
        .is-success,
        .is-process {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
        }

        .is-wait {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
          opacity: 0.5;
        }
      }
    }

    .formAccount {
      margin-top: 157px;
      margin-left: 200px;
      width: 550px;
    }

    .formNet,
    .formInfo {
      margin-top: 90px;
      margin-left: 200px;
      width: 550px;
    }

    .control {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      bottom: 258px;
      left: 0;
      right: 0;
      line-height: 40px;
      .pre {
        margin-right: 20px;
  cursor: pointer;
}
.left-bg {
  position: absolute;
  top: 29%;
  right: 18%;
  width: 390px;
  height: 426px;
  background: rgba(146, 208, 255, 0.23);
  border-radius: 4px;
  text-align: center;
  .login-logo {
    margin-top: -53px;
  }

  .login-com {
    font-family: PingFangSC-Medium;
    font-size: 22px;
        width: 260px;
        height: 40px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.44px;
    margin: 15px;
  }
  .login-form {
    margin: 40px 10px;
  }
  .gradient-text {
    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%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .el-input__prefix {
    left: 8px;
      .next {
        cursor: pointer;
        width: 260px;
        height: 40px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }

  .el-form-item__error {
    left: 54px;
  ::v-deep .el-carousel__indicators {
    display: none;
  }

  ::v-deep .el-carousel__container button {
    display: none;
  }
}

.white {
  height: 100%;
  background-color: #fff;
}
</style>