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 | 882 +++++++++++++++++++++-------------------------------------
1 files changed, 318 insertions(+), 564 deletions(-)
diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 6754bff..4c8dbd7 100644
--- a/src/pages/index/App.vue
+++ b/src/pages/index/App.vue
@@ -1,564 +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">
- 鈥斺��
- <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> -->
- <div class="login">
- <div class="title">
- <div class="en">Smart AI</div>
- <div class="ch">浜哄伐鏅鸿兘鎿嶄綔绯荤粺</div>
- </div>
-
- <div class="left_footer">
- <img class="logo" src="/images/login/LOGO.png" alt="" />
- <div class="web">www.smartai.com</div>
- </div>
-
- <div
- class="login-form"
- :style="{ background: backgroundColor }"
- :class="{ empty: !user.loginName && !user.password }"
- >
- <img class="logo" src="/images/login/OS.png" alt="" />
-
- <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"
- :placeholder="$t('placeholder.enterUsername')"
- >
- <i slot="prefix" class="iconfont icon"></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"
- :placeholder="$t('placeholder.enterPassword')"
- >
- <i slot="prefix" class="iconfont icon"></i>
- </el-input>
- </el-form-item>
- <el-form-item>
- <el-button ref="submit" type="warning" @click="systemLogin()">{{
- $t("button.login")
- }}</el-button>
- </el-form-item>
- </el-form>
- </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,
- backgroundColor: "",
- backgroundList: [
- "#2A2344",
- "#342344",
- "#000000",
- "#233044",
- "#0B252E",
- "#150051",
- "#110040",
- ],
- }),
- created() {
- this.getServerName();
- this.getScreenHeight();
- this.backgroundColor =
- this.backgroundList[
- Math.floor(Math.random() * this.backgroundList.length)
- ];
- },
- mounted() {
- // 鑷姩鐧诲綍鎺ュ彛
- this.loginRobot();
- },
- watch: {},
- beforeDestroy() {
- window.onresize = null;
- },
- 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();
- 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">
-.login {
- height: 100%;
- position: relative;
- background-image: url("/images/login/鑳屾櫙鍥�.png");
-
- .title {
- position: absolute;
- top: 345px;
- left: 301px;
- color: #fff;
- text-align: center;
-
- .en {
- font-size: 120px;
- }
-
- .ch {
- font-size: 48px;
- letter-spacing: 9px;
- }
- }
-
- .left_footer {
- position: absolute;
- display: flex;
- justify-content: start;
- align-items: center;
- left: 358px;
- bottom: 40px;
-
- .logo {
- width: 136px;
- margin-right: 30px;
- }
-
- .web {
- font-size: 24px;
- font-weight: 700;
- color: rgba(255, 255, 255, 0.7);
- }
- }
-
- .login-form {
- position: absolute;
- width: 780px;
- height: 1000px;
- right: 40px;
- top: 40px;
- padding: 0 90px;
- box-sizing: border-box;
-
- background: #2a2344;
- opacity: 0.95;
- box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.25);
- border-radius: 56px;
-
- .logo {
- margin-top: 100px;
- margin-bottom: 16px;
- }
-
- .el-form-item {
- background: rgba(0, 0, 0, 0);
- }
-
- .el-form-item:nth-child(2) {
- margin-top: 60px;
- margin-bottom: 80px;
- }
-
- .el-button {
- width: 600px;
- height: 60px;
- background: #4e94ff;
- border-radius: 30px;
- border: none;
- }
-
- .el-input {
- width: 100%;
- background: rgba(0, 0, 0, 0);
- }
-
- input {
- width: 100%;
- height: 56px;
- background: rgba(255, 255, 255, 0.1) !important;
- border: 1px solid #4e94ff;
- box-sizing: border-box;
- border-radius: 28px;
- color: #fff;
- caret-color: #fff; //鍏夋爣棰滆壊
- padding-left: 100px;
- padding-right: 50px;
- font-weight: 700;
- }
-
- input:-webkit-autofill,
- textarea:-webkit-autofill,
- select:-webkit-autofill {
- -webkit-text-fill-color: #ededed !important;
- -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
- background-color: transparent;
- background-image: none;
- transition: background-color 50000s ease-in-out 0s; //鑳屾櫙鑹查�忔槑 鐢熸晥鏃堕暱 杩囨浮鏁堟灉 鍚敤鏃跺欢杩熺殑鏃堕棿
- }
-
- .el-form-item__error {
- top: 110%;
- left: 80px;
- }
-
- .icon {
- font-size: 32px;
- color: rgb(80, 151, 255);
- }
-
- .el-input__prefix {
- padding: 0 20px;
- height: 40px;
- left: 5px;
- top: 8px;
- border-right: 1px solid #4e94ff;
- }
-
- .el-input__suffix {
- right: 20px;
- }
-
- .el-icon-circle-close {
- display: none;
- }
- }
-
- .login-form.empty {
- input {
- border-color: #999;
- color: #bbb;
- }
-
- .el-button {
- background-color: #999;
- color: #fff;
- }
-
- .icon {
- color: #fff;
- }
-
- .el-input__prefix {
- border-color: #d4d6d9;
- }
- }
-}
-
-// .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 = "缃戠粶姝ｅ父"
+
+ 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--
+
+ // 濡傛灉缃戠粶姝ｅ父, 鐩存帴璺宠繃
+ 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)
+
+ // 濡傛灉缃戠粶姝ｅ父, 鐩存帴璺冲埌绗笁閮�
+ 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