From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug

---
 src/pages/index/App.vue |  642 ++++++++++++++++++++++++++++-----------------------------
 1 files changed, 318 insertions(+), 324 deletions(-)

diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 2a3a431..4c8dbd7 100644
--- a/src/pages/index/App.vue
+++ b/src/pages/index/App.vue
@@ -1,324 +1,318 @@
-<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>
-
-    <!-- 鎺堟潈淇℃伅 -->
-    <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-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>
-    </div>
-  </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";
-
-export default {
-  name: 'login-pgae',
-  metaInfo: {
-    title: '鐧诲綍椤�'
-  },
-  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
-  },
-  methods: {
-    loginRobot() {
-      // 瑙f瀽璺敱鍙傛暟锛屽苟缂撳瓨
-      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(() => {
-        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()
-          } else {
-            this.nullRule = {}
-          }
-        })
-        this.nullRule = {}
-      })
-    },
-    async testLogin() {
-      // location.assign("/view/desktop/")
-      tologin({ username: this.user.loginName, password: this.user.password })
-        .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))
-          this.loading.close()
-          this.getLoginUserData()
-        })
-        .catch(err => {
-          this.loading.close()
-          this.$notify({
-            title: '鎻愮ず',
-            type: 'error',
-            message: err.msg
-          })
-          this.$refs.pwd.focus()
-        })
-    },
-    async getLoginUserData() {
-      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.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()
-      }
-    },
-    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 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%;
-  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;
-}
-.lang-select {
-  float: right;
-  color: white !important;
-  font-size: 14px;
-  margin: 13px;
-  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;
-    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;
-  }
-
-  .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 { getInitInfo, savePassword, initNetwork, saveRegInfo, getRegInfo, isOnNet } from "./api"
+
+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.getInitInfo()
+    let message = "缃戠粶姝e父"
+
+    function onLine(callback) {
+      var img = new Image()
+      //涓存椂鍒ゆ柇缃戠粶鏄惁閫氱晠
+      img.src = "http://apps.smartai.com/img/icons/favicon-32x32.png"
+      img.onload = function() {
+        if (callback) callback(true)
+      }
+      img.onerror = function() {
+        if (callback) callback(false)
+      }
+    }
+
+    onLine((flag) => {
+      let message = ""
+      if (flag) {
+        this.isOnline = true
+        message = "宸叉湁缃戠粶"
+      } else {
+        //缃戠粶鏂綉鏁堟灉鍥惧嚭鏉ュ悗锛屽皢姝ゅ湴鏀逛负璺宠浆璺緞鍒版晥鏋滃浘涓�
+        message = "鏃犳硶杩炴帴浜掕仈缃�"
+        this.$notify({
+          message: message
+        })
+      }
+    })
+  },
+
+  methods: {
+    preForm() {
+      if (this.active == this.createUser) {
+        return
+      }
+      this.active--
+
+      // 濡傛灉缃戠粶姝e父, 鐩存帴璺宠繃
+      if (this.active == this.configNet && this.isOnline) {
+        this.active--
+      }
+
+      this.$refs["carousel"].setActiveItem(this.active)
+    },
+    async nextForm() {
+      // 鎻愪氦娉ㄥ唽淇℃伅
+      if (this.active == this.registerInfo) {
+        const data = this.$refs[`form${this.active}`].getFormData()
+        await saveRegInfo(data)
+        location.assign("/view/login/")
+        return
+      }
+
+      // 閰嶇疆缃戠粶
+      if (this.active == this.configNet) {
+        const data = this.$refs[`form${this.active}`].getFormData()
+        initNetwork(data)
+      }
+
+      // 鍒涘缓鐢ㄦ埛
+      if (this.active == this.createUser) {
+        const data = this.$refs[`form${this.active}`].getFormData()
+        if (!data) {
+          return false
+        }
+
+        await savePassword(data)
+
+        // 濡傛灉缃戠粶姝e父, 鐩存帴璺冲埌绗笁閮�
+        if (this.isOnline) {
+          this.active++
+        }
+      }
+
+      this.active++
+      this.$refs["carousel"].setActiveItem(this.active)
+    },
+    async nextFormNot() {
+      await this.getInitInfo()
+
+      this.active++
+      this.$refs["carousel"].next()
+    },
+    async getInitInfo() {
+      const res = await getInitInfo().catch((err) => {
+        this.isWhite = false
+      })
+
+      if (res.data && res.data.initPwd && !res.data.initRegInfo) {
+        this.active = this.isOnline ? this.registerInfo : this.configNet
+      }
+
+      if (res.data && res.data.initPwd && res.data.initRegInfo) {
+        location.assign("/view/login/")
+        return
+      }
+
+      this.isWhite = false
+    }
+  }
+}
+</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>

--
Gitblit v1.8.0