定制桌面.

zhangzengfei

2023-09-06 c0c034b3ef0fdf0fd9c802d5984dbd717db6817a

 src/pages/index/App.vue

@@ -1,260 +1,260 @@
<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>
    </div>
    <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>北京贝思科技术有限公司</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-form-item prop="loginName">
            <el-input v-model="user.loginName" style="width:280px" placeholder="请输入用户名">
              <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="请输入密码"
            >
              <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-form-item>
        </el-form>
      </div>
      <p class="gradient-text gradient-text-one">——— {{serverTitle || '智 能 计 算 节 点 — ReID'}} ———</p>
    </div>
  </div>
</template>

<script>
import { tologin, getLoginUserData, getServerName } from './api.ts'
import ParticleNetwork from './ParticleNetwork'
import Licence from '@/components/licence'

export default {
  name: 'login-pgae',
  metaInfo: {
    title: '登录页'
  },
  components: {
    ParticleNetwork,
    Licence
  },
  data: () => ({
    serverTitle: "",
    user: {
      loginName: '',
      password: '',
      rememberMe: false
    },
    nullRule: {},
    rules: {
      loginName: [
        { required: true, message: '请输入用户名', trigger: 'change' }
      ],
      password: [{ required: true, message: '请输入密码', trigger: 'change' }]
    },
    loading: '',
    vLoading: false,
    currentHeight: 1057,
    currentWidth: 1920
  }),
  methods: {
    systemLogin() {
      this.nullRule = this.rules
      this.$nextTick(() => {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            this.loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.testLogin()
            // return false
          } else {
            this.nullRule = {}
          }
        })
        this.nullRule = {}
      })
    },
    async testLogin() {
      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
          }
          sessionStorage.setItem('expires_in', json.expires_in)
          sessionStorage.setItem('loginedInfo', JSON.stringify(loginedInfo))
          this.loading.close()
          this.getLoginUserData()
        })
        .catch(err => {
          // console.log(err, "登录报错");
          this.loading.close()
          this.$notify({
            title: '提示',
            type: 'error',
            message: err
          })
          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
      } else {
        this.$notify({
          title: '提示',
          type: 'error',
          message: '登录失败！'
        })
        // this.loading.close()
      }
    },

    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()
      }
    },
    async getServerName() {
      let res = await getServerName()
      if (res && res.success) {
        this.serverTitle = res.data.serverName
        window.document.title = res.data.serverName
          ? res.data.serverName
          : '智 能 计 算 节 点'
        sessionStorage.setItem('title', res.data.serverName)
      }
    },
  },
  created() {
    this.getServerName()
    this.getScreenHeight()
  },
  watch: {},
  beforeDestroy() {
    window.onresize = null
  }
}
</script>
<style lang="scss">
.right-bg {
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("/images/login-net.png");

  width: 100%;
  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;
}
.web-site {
  position: absolute;
  top: 55px;
  left: 41px;
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #6170e1;
  letter-spacing: 6.15px;
}
.left-bg {
  position: absolute;
  top: 30%;
  right: 18%;
  width: 390px;
  height: 402px;
  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;
    color: #ffffff;
    letter-spacing: 0.44px;
    margin: 15px;
  }
  .login-form {
    margin: 40px 10px;
    // margin: 24px 10px 40px 10px;
  }
  .gradient-text {
    line-height: 50px;
    font-size: 20px;
    font-family: -webkit-pictograph;
    font-weight: bolder;
    position: relative;
  }
  .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;
  }

  .el-form-item__error {
    left: 54px;
  }
}
</style>
<template>

  <div class="init" v-if="!isWhite">

    <img class="img-test" onerror="console.log('网络故障')" />

    <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>



      <el-carousel ref="carousel" trigger="click" :loop="false" :autoplay="false" :initial-index="active">

        <el-carousel-item>

          <formAccount ref="form0" v-show="active == createUser"></formAccount>

        </el-carousel-item>

        <el-carousel-item>

          <formNet ref="form1" v-show="active == configNet"></formNet>

        </el-carousel-item>

        <el-carousel-item>

          <formInfo ref="form2" v-show="active == registerInfo"></formInfo>

        </el-carousel-item>

      </el-carousel>



      <div class="control">

        <div class="pre" @click="preForm" v-if="active != createUser">上一步</div>

        <div class="next" @click="nextForm" v-if="active == createUser || (active == configNet && !isOnline)">

          下一步

        </div>

        <div class="next" @click="nextFormNot" v-if="active == configNet">跳过</div>



        <div class="next" @click="nextForm" v-if="active == registerInfo">完成</div>

      </div>

    </div>

  </div>

  <div class="white" v-else></div>

</template>



<script>

import formAccount from "@/pages/index/components/formAccount"

import formNet from "@/pages/index/components/formNet"

import formInfo from "@/pages/index/components/formInfo"

import { tologin, getLoginUserData, getServerName } from "./api.ts"

import { getMenuListData } from "@/api/utils"



export default {

  name: "smartai init",

  components: {

    formAccount,

    formNet,

    formInfo

  },

  data() {

    return {

      active: 0,

      formData: {},

      isWhite: true,

      isOnline: false,

      createUser: 0,

      configNet: 1,

      registerInfo: 2

    }

  },

  mounted() {

    this.testLogin()

  },



  methods: {

    async testLogin() {

      // location.assign("/view/desktop/")

      tologin({ username: "basic", password: "basic2019" })

        .then((json) => {

          const loginedInfo = {

            access_token: json.token_type + " " + json.access_token,

            refresh_token: json.refresh_token

          }

          sessionStorage.setItem("expires_in", json.expires_in)

          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo))

          sessionStorage.setItem("userInfo", JSON.stringify(json.userInfo))



          location.assign("/view/desktop/")

        })

        .catch()

    },

    async getLoginUserData() {

      let res = await getLoginUserData()

      if (res.success) {

        sessionStorage.setItem("userInfo", JSON.stringify(res.data))

        // 获取权限

        // await this.getMenuList()



        return res.data

      } else {

      }

    },

    async getMenuList() {

      let results = await getMenuListData({})

      if (results && results.success) {

        /* 存储权限 */

        let buttonAuthoritys = results.data

        sessionStorage.setItem("buttonAuthoritys", "," + buttonAuthoritys + ",")

        sessionStorage.setItem("menuInfo", JSON.stringify(results))

      }

    }

  }

}

</script>



<style lang="scss" scoped>

.init {

  background-image: url("/images/init/背景图.png");

  background-size: cover;

  background-attachment: fixed;

  color: #fff;

  user-select: none;

  height: 100%;

  min-width: 1000px;

  overflow: hidden;

  min-height: 760px;

  .content {

    margin: 0 auto;

    width: 1000px;

    padding-top: calc(6.4vh);



    .title {

      font-size: 28px;

      font-weight: 700;

      margin-bottom: 50px;

      letter-spacing: 5px;

    }



    .el-steps ::v-deep {

      margin-left: 22px;

      text-align: left;



      .el-step__icon {

        width: 48px;

        height: 48px;

      }



      .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-left: 200px;

      width: 550px;

    }



    .formNet,

    .formInfo {

      margin-left: 200px;

      width: 550px;

    }



    .control {

      margin: 0 auto;

      line-height: 40px;

      margin-top: calc(3.2vh);



      .pre {

        margin: 10px auto;

        cursor: pointer;

        width: 260px;

        height: 40px;

        border: 2px solid rgba(255, 255, 255, 0.3);

        border-radius: 20px;

        font-weight: bold;

        color: #ffffff;

      }



      .next {

        margin: 10px auto;

        cursor: pointer;

        width: 260px;

        height: 40px;

        background: rgba(255, 255, 255, 0.3);

        border-radius: 20px;

        font-weight: bold;

        color: #ffffff;

      }

    }

  }



  ::v-deep .el-carousel__indicators {

    display: none;

  }



  ::v-deep .el-carousel__container button {

    display: none;

  }



  ::v-deep .el-carousel__container {

    margin-top: calc(5.74vh);

    height: 290px !important;

  }

}



.white {

  height: 100%;

  background-color: #fff;

}

</style>