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 | 629 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 318 insertions(+), 311 deletions(-) diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue index 70cb09b..4c8dbd7 100644 --- a/src/pages/index/App.vue +++ b/src/pages/index/App.vue @@ -1,311 +1,318 @@ -<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" - height="480px" - :loop="false" - :autoplay="false" - :initial-index="active" - > - <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="nextFormNot" v-if="active == 1">璺宠繃</div> - <div class="next" @click="nextForm" v-if="active == 1 && !isNet"> - 涓嬩竴姝� - </div> - <div class="next" @click="nextForm" v-if="active == 2">瀹屾垚</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 { - mounted() { - this.getInitInfo(); - let message = "缃戠粶姝e父"; - - function onLine(callback) { - var img = new Image(); - //涓存椂鍒ゆ柇缃戠粶鏄惁閫氱晠 - img.src = "http://apps.smartai.com/img/icon_logo.f78688b5.png"; - img.onload = function () { - console.log("11111"); - if (callback) callback(true); - }; - img.onerror = function () { - console.log("22222"); - if (callback) callback(false); - }; - } - - onLine((flag) => { - let message = ""; - if (flag) { - this.isNet = true; - message = "宸叉湁缃戠粶"; - } else { - //缃戠粶鏂綉鏁堟灉鍥惧嚭鏉ュ悗锛屽皢姝ゅ湴鏀逛负璺宠浆璺緞鍒版晥鏋滃浘涓� - message = "鏈厤缃綉缁�"; - this.$notify({ - message: message, - }); - } - }); - }, - data() { - return { - active: 0, - formData: {}, - isWhite: true, - isNet: false, - }; - }, - components: { - formAccount, - formNet, - formInfo, - }, - methods: { - 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("/view/login/"); - return; - } - - if (this.active == 0) { - const data = this.$refs[`form${this.active}`].getFormData(); - if (!data) { - return false; - } - const res1 = await savePassword(data); - console.log(data); - this.active++; - this.$refs["carousel"].next(); - } - - if (this.active == 1) { - const data = this.$refs[`form${this.active}`].getFormData(); - initNetwork(data); - this.active++; - this.$refs["carousel"].next(); - } - }, - nextFormNot() { - this.active++; - this.$refs["carousel"].next(); - }, - async getInitInfo() { - const res = await getInitInfo(); - - if (res.data.initPwd && !res.data.initRegInfo) { - const res1 = await getRegInfo(); - this.active = 1; - console.log(res1); - setTimeout(() => { - this.$refs["carousel"].setActiveItem(1); - }, 0); - } - - /* if (res.data.initPwd && res.data.initRegInfo) { - location.assign("/login"); - return; - } */ - - this.isWhite = false; - }, - }, -}; -</script> - -<style lang="scss" scoped> -.init { - height: 100%; - 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; - } - - .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-top: 0.81rem; - margin-left: 200px; - width: 550px; - } - - .formNet, - .formInfo { - margin-top: 0.47rem; - margin-left: 200px; - width: 550px; - } - - .control { - position: fixed; - top: 80%; - left: 0; - right: 0; - line-height: 40px; - .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; - } -} - -.white { - height: 100%; - background-color: #fff; -} -</style> \ No newline at end of file +<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