<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 {
|
async created() {},
|
mounted() {
|
this.getInitInfo();
|
let message = "网络正常";
|
|
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();
|
},
|
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("登录失败！");
|
}
|
|
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("/view/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: 157px;
|
margin-left: 200px;
|
width: 550px;
|
}
|
|
.formNet,
|
.formInfo {
|
margin-top: 90px;
|
margin-left: 200px;
|
width: 550px;
|
}
|
|
.control {
|
position: fixed;
|
top: 770px;
|
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>
|
