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 |  578 +++++++++++++++++++++++++++++++--------------------------
 1 files changed, 318 insertions(+), 260 deletions(-)

diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 22a9f70..4c8dbd7 100644
--- a/src/pages/index/App.vue
+++ b/src/pages/index/App.vue
@@ -1,260 +1,318 @@
-<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 { 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