From dff9fb32c1bac52d378a6d196f670b92610c01d3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期四, 16 十二月 2021 17:21:49 +0800 Subject: [PATCH] 自适应2 --- src/pages/index/components/formInfo.vue | 523 +++++----- vue.config.js | 312 +++--- src/pages/index/App.vue | 625 ++++++------ src/pages/index/components/formAccount.vue | 266 ++-- src/pages/login/App.vue | 1154 ++++++++++++------------ 5 files changed, 1,446 insertions(+), 1,434 deletions(-) diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue index 70cb09b..f998f5e 100644 --- a/src/pages/index/App.vue +++ b/src/pages/index/App.vue @@ -1,311 +1,316 @@ -<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; -} +<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"></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 { + 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> \ No newline at end of file diff --git a/src/pages/index/components/formAccount.vue b/src/pages/index/components/formAccount.vue index 0362ab5..16ae5a2 100644 --- a/src/pages/index/components/formAccount.vue +++ b/src/pages/index/components/formAccount.vue @@ -1,134 +1,134 @@ -<template> - <div class="formAccount"> - <el-form ref="form" :model="form" label-width="90px" :rules="rules"> - <el-form-item label="鐢ㄦ埛鍚�" prop="username"> - <el-input - v-model="form.username" - placeholder="2-10浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧" - ></el-input> - </el-form-item> - - <el-form-item label="瀵嗙爜" prop="password"> - <el-input - v-model="form.password" - placeholder="鑷冲皯涓�6浣嶅瓧绗�" - type="password" - ></el-input> - </el-form-item> - - <el-form-item label="纭瀵嗙爜" prop="repassword"> - <el-input - v-model="form.repassword" - placeholder="璇风‘璁ゅ瘑鐮�" - type="password" - ></el-input> - </el-form-item> - </el-form> - </div> -</template> - -<script> -import { getRegInfo } from "../api"; - -export default { - data() { - const validateName = (rule, value, callback) => { - var reg = /^[A-Za-z][A-Za-z0-9]{0,}$/; - if (!reg.test(value)) { - return callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧")); - } else callback(); - }; - - const validateRePass = (rule, value, callback) => { - if (this.form.password != value) { - return callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷�")); - } else callback(); - }; - - return { - form: { - username: "", - password: "", - repassword: "", - }, - rules: { - name: [ - { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" }, - { - min: 2, - max: 10, - message: "闀垮害鍦� 2 鍒� 10 涓瓧绗�", - trigger: "blur", - }, - { validator: validateName, trigger: "blur" }, - ], - password: [ - { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, - { - min: 6, - max: 24, - message: "鑷冲皯涓�6浣嶅瓧绗�", - trigger: "blur", - }, - ], - repassword: [ - { required: true, message: "璇风‘璁ゅ瘑鐮�", trigger: "blur" }, - { validator: validateRePass, trigger: "blur" }, - ], - }, - }; - }, - methods: { - getFormData() { - const _this = this; - let data = null; - this.$refs["form"].validate((valid) => { - if (valid) { - data = _this.form; - } else { - return false; - } - }); - return data; - }, - - async getRegInfo() { - const res = await getRegInfo(); - console.log(res); - }, - }, -}; -</script> - -<style lang="scss" scoped> -.formAccount { - .el-form-item ::v-deep { - label { - font-size: 14px; - color: #fff; - text-align: left; - } - - .el-form-item__content { - margin-left: 110px !important; - } - - input { - background-color: rgba(0, 0, 0, 0.1); - color: #fff; - border: none; - caret-color: #fff !important; - } - - input:-webkit-autofill, - textarea:-webkit-autofill, - select:-webkit-autofill { - -webkit-text-fill-color: #fff !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; //鑳屾櫙鑹查�忔槑 鐢熸晥鏃堕暱 杩囨浮鏁堟灉 鍚敤鏃跺欢杩熺殑鏃堕棿 - } - } -} +<template> + <div class="formAccount"> + <el-form ref="form" :model="form" label-width="90px" :rules="rules"> + <el-form-item label="鐢ㄦ埛鍚�" prop="username"> + <el-input + v-model="form.username" + placeholder="2-10浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧" + ></el-input> + </el-form-item> + + <el-form-item label="瀵嗙爜" prop="password"> + <el-input + v-model="form.password" + placeholder="鑷冲皯涓�6浣嶅瓧绗�" + type="password" + ></el-input> + </el-form-item> + + <el-form-item label="纭瀵嗙爜" prop="repassword"> + <el-input + v-model="form.repassword" + placeholder="璇风‘璁ゅ瘑鐮�" + type="password" + ></el-input> + </el-form-item> + </el-form> + </div> +</template> + +<script> +import { getRegInfo } from "../api"; + +export default { + data() { + const validateName = (rule, value, callback) => { + var reg = /^[A-Za-z][A-Za-z0-9]{0,}$/; + if (!reg.test(value)) { + return callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧")); + } else callback(); + }; + + const validateRePass = (rule, value, callback) => { + if (this.form.password != value) { + return callback(new Error("涓ゆ瀵嗙爜涓嶄竴鑷�")); + } else callback(); + }; + + return { + form: { + username: "", + password: "", + repassword: "", + }, + rules: { + username: [ + { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" }, + { + min: 2, + max: 10, + message: "闀垮害鍦� 2 鍒� 10 涓瓧绗�", + trigger: "blur", + }, + { validator: validateName, trigger: "blur" }, + ], + password: [ + { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, + { + min: 6, + max: 24, + message: "鑷冲皯涓�6浣嶅瓧绗�", + trigger: "blur", + }, + ], + repassword: [ + { required: true, message: "璇风‘璁ゅ瘑鐮�", trigger: "blur" }, + { validator: validateRePass, trigger: "blur" }, + ], + }, + }; + }, + methods: { + getFormData() { + const _this = this; + let data = null; + this.$refs["form"].validate((valid) => { + if (valid) { + data = _this.form; + } else { + return false; + } + }); + return data; + }, + + async getRegInfo() { + const res = await getRegInfo(); + console.log(res); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.formAccount { + .el-form-item ::v-deep { + label { + font-size: 14px; + color: #fff; + text-align: left; + } + + .el-form-item__content { + margin-left: 110px !important; + } + + input { + background-color: rgba(0, 0, 0, 0.1); + color: #fff; + border: none; + caret-color: #fff !important; + } + + input:-webkit-autofill, + textarea:-webkit-autofill, + select:-webkit-autofill { + -webkit-text-fill-color: #fff !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; //鑳屾櫙鑹查�忔槑 鐢熸晥鏃堕暱 杩囨浮鏁堟灉 鍚敤鏃跺欢杩熺殑鏃堕棿 + } + } +} </style> \ No newline at end of file diff --git a/src/pages/index/components/formInfo.vue b/src/pages/index/components/formInfo.vue index 4599768..23f9d65 100644 --- a/src/pages/index/components/formInfo.vue +++ b/src/pages/index/components/formInfo.vue @@ -1,259 +1,266 @@ -<template> - <div class="formInfo"> - <el-form ref="form" :model="form" label-width="90px" :rules="rules"> - <el-form-item label="绫诲瀷" prop="type"> - <el-radio v-model="form.userType" label="personal">涓汉</el-radio> - <el-radio v-model="form.userType" label="company">鍏徃</el-radio> - </el-form-item> - - <el-form-item - label="鍏徃鍚嶇О" - prop="name1" - v-if="form.userType == 'company'" - > - <el-input v-model="form.name1" placeholder="璇疯緭鍏ュ叕鍙稿悕绉�"></el-input> - </el-form-item> - - <el-form-item - label="鑱旂郴浜哄鍚�" - prop="name2" - v-if="form.userType == 'company'" - > - <el-input - v-model="form.name2" - placeholder="璇疯緭鍏ヨ仈绯讳汉濮撳悕" - ></el-input> - </el-form-item> - - <el-form-item label="濮撳悕" prop="name" v-else> - <el-input v-model="form.name" placeholder="璇疯緭鍏ュ鍚�"></el-input> - </el-form-item> - - <el-form-item label="鎵�鍦ㄥ湴" prop="addr"> - <el-cascader - :props="props" - popper-class="location" - separator=" " - @change="handleChange" - v-model="form.addr" - ></el-cascader> - </el-form-item> - - <el-form-item label="閭" prop="email"> - <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�"></el-input> - </el-form-item> - </el-form> - </div> -</template> - -<script> -import { getList } from "../api"; -export default { - created() {}, - data() { - return { - form: { - userType: "personal", - name: "", - name1: "", - name2: "", - email: "", - addr: "", - provinceId: "", - cityId: "", - labelList: "", - }, - rules: { - name1: [{ required: true, message: "璇疯緭鍏ュ叕鍙稿悕绉�", trigger: "blur" }], - name2: [ - { required: true, message: "璇疯緭鍏ヨ仈绯讳汉濮撳悕", trigger: "blur" }, - ], - name: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "blur" }], - addr: [{ required: true, message: "璇烽�夋嫨鎵�鍦ㄥ湴", trigger: "blur" }], - email: [{ required: true, message: "璇疯緭鍏ラ偖绠�", trigger: "blur" }], - }, - provinceOptions: [], - props: { - lazy: true, // 寮�鍚姩鎬佸姞杞� - lazyLoad: async (node, resolve) => { - // 璁剧疆鍔犺浇鏁版嵁婧愭柟娉� 榛樿鎵ц涓�娆� - // node 涓哄綋鍓嶇偣鍑荤殑鑺傜偣 - // resolve 涓烘暟鎹姞杞藉畬鎴愮殑鍥炶皟(蹇呴』璋冪敤) - /* node姝ゆ椂灞炴�т负: - 褰撳墠鍙跺瓙 level锛�0 - loaded锛歵rue - loading锛歠alse - 鏄惁鏄牴 root锛歵ure - */ - console.log(node); - - if (node.level == 0) { - const res = await getList(); - this.provinceOptions = res.data.map((item) => { - return { - value: item.id, - label: item.name, // 閫夐」鍚� - leaf: false, // 鏄惁涓烘湯灏� - }; - }); - resolve(this.provinceOptions); - console.log(node.level); - } - - if (node.level == 1) { - console.log("-------------"); - this.provinceId = node.value; - const res2 = await getList({ - parentId: node.value, - }); - - const arr = res2.data.map((item) => { - return { - value: item.id, - label: item.name, // 閫夐」鍚� - leaf: true, // 鏄惁涓烘湯灏� - }; - }); - resolve(arr); - } else { - console.log(node); - } - }, - }, - value: [], - }; - }, - - methods: { - getFormData() { - const _this = this; - let data = null; - this.$refs["form"].validate((valid) => { - if (valid) { - console.log(_this.form.userType); - if (_this.form.userType == "personal") { - data = { - userType: _this.form.userType, - name: _this.form.name, - email: _this.form.email, - addr: _this.form.labelList, - provinceId: _this.form.provinceId, - cityId: _this.form.cityId, - }; - } else { - data = { - userType: _this.form.userType, - name: _this.form.name1 + " " + _this.form.name2, - email: _this.form.email, - addr: _this.form.labelList, - provinceId: _this.form.provinceId, - cityId: _this.form.cityId, - }; - } - } else { - return false; - } - }); - - return data; - }, - handleChange(val) { - this.form.provinceId = val[0] + ""; - this.form.cityId = val[1] + ""; - - setTimeout(() => { - this.form.labelList = - document.querySelectorAll(".el-cascader input")[0].value; - }, 200); - }, - }, -}; -</script> - -<style lang="scss" scoped> -.formInfo { - .el-form-item ::v-deep { - label { - font-size: 14px; - color: #fff; - text-align: left; - } - - .el-radio { - .el-radio__inner { - background: none; - border-color: rgba(255, 255, 255, 0.3) !important; - - &::after { - width: 6px; - height: 6px; - } - } - - .el-radio__label { - color: #fff !important; - } - } - - .el-form-item__content { - margin-left: 110px !important; - text-align: left; - } - - input { - background-color: rgba(0, 0, 0, 0.1); - color: #fff; - border: none; - caret-color: #fff !important; - } - - input:-webkit-autofill, - textarea:-webkit-autofill, - select:-webkit-autofill { - -webkit-text-fill-color: #fff !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-cascader { - width: 100%; - } - } -} -</style> - -<style lang="scss"> -.el-popper.el-cascader__dropdown.location { - background-color: rgb(77, 72, 111); - border: none; - margin: 0 0; - - * { - color: #fff; - border-color: rgba(255, 255, 2555, 0.1); - } - - .el-cascader-node:hover, - .in-active-path, - .is-active, - .el-cascader-node { - background-color: rgb(101, 93, 126) !important; - } - - .popper__arrow::after, - .popper__arrow { - display: none; - } - - .el-cascader-node__label { - text-align: left; - } - - .el-cascader-menu__wrap { - width: 226px; - height: 175px; - } -} +<template> + <div class="formInfo"> + <el-form ref="form" :model="form" label-width="90px" :rules="rules"> + <el-form-item label="绫诲瀷" prop="type"> + <el-radio v-model="form.userType" label="personal">涓汉</el-radio> + <el-radio v-model="form.userType" label="company">鍏徃</el-radio> + </el-form-item> + + <el-form-item + label="鍏徃鍚嶇О" + prop="name1" + v-if="form.userType == 'company'" + > + <el-input v-model="form.name1" placeholder="璇疯緭鍏ュ叕鍙稿悕绉�"></el-input> + </el-form-item> + + <el-form-item + label="鑱旂郴浜哄鍚�" + prop="name2" + v-if="form.userType == 'company'" + > + <el-input + v-model="form.name2" + placeholder="璇疯緭鍏ヨ仈绯讳汉濮撳悕" + ></el-input> + </el-form-item> + + <el-form-item label="濮撳悕" prop="name" v-else> + <el-input v-model="form.name" placeholder="璇疯緭鍏ュ鍚�"></el-input> + </el-form-item> + + <el-form-item label="鎵�鍦ㄥ湴" prop="addr"> + <el-cascader + :props="props" + popper-class="location" + separator=" " + @change="handleChange" + v-model="form.addr" + ></el-cascader> + </el-form-item> + + <el-form-item label="閭" prop="email"> + <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�"></el-input> + </el-form-item> + </el-form> + </div> +</template> + +<script> +import { getList } from "../api"; +export default { + created() {}, + data() { + return { + form: { + userType: "personal", + name: "", + name1: "", + name2: "", + email: "", + addr: "", + provinceId: "", + cityId: "", + labelList: "", + }, + rules: { + name1: [{ required: true, message: "璇疯緭鍏ュ叕鍙稿悕绉�", trigger: "blur" }], + name2: [ + { required: true, message: "璇疯緭鍏ヨ仈绯讳汉濮撳悕", trigger: "blur" }, + ], + name: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "blur" }], + addr: [{ required: true, message: "璇烽�夋嫨鎵�鍦ㄥ湴", trigger: "blur" }], + email: [ + { required: true, message: "璇疯緭鍏ラ偖绠�", trigger: "blur" }, + { + type: "email", + message: "閭鏍煎紡鏈夎", + trigger: "blur", + }, + ], + }, + provinceOptions: [], + props: { + lazy: true, // 寮�鍚姩鎬佸姞杞� + lazyLoad: async (node, resolve) => { + // 璁剧疆鍔犺浇鏁版嵁婧愭柟娉� 榛樿鎵ц涓�娆� + // node 涓哄綋鍓嶇偣鍑荤殑鑺傜偣 + // resolve 涓烘暟鎹姞杞藉畬鎴愮殑鍥炶皟(蹇呴』璋冪敤) + /* node姝ゆ椂灞炴�т负: + 褰撳墠鍙跺瓙 level锛�0 + loaded锛歵rue + loading锛歠alse + 鏄惁鏄牴 root锛歵ure + */ + console.log(node); + + if (node.level == 0) { + const res = await getList(); + this.provinceOptions = res.data.map((item) => { + return { + value: item.id, + label: item.name, // 閫夐」鍚� + leaf: false, // 鏄惁涓烘湯灏� + }; + }); + resolve(this.provinceOptions); + console.log(node.level); + } + + if (node.level == 1) { + console.log("-------------"); + this.provinceId = node.value; + const res2 = await getList({ + parentId: node.value, + }); + + const arr = res2.data.map((item) => { + return { + value: item.id, + label: item.name, // 閫夐」鍚� + leaf: true, // 鏄惁涓烘湯灏� + }; + }); + resolve(arr); + } else { + console.log(node); + } + }, + }, + value: [], + }; + }, + + methods: { + getFormData() { + const _this = this; + let data = null; + this.$refs["form"].validate((valid) => { + if (valid) { + console.log(_this.form.userType); + if (_this.form.userType == "personal") { + data = { + userType: _this.form.userType, + name: _this.form.name, + email: _this.form.email, + addr: _this.form.labelList, + provinceId: _this.form.provinceId, + cityId: _this.form.cityId, + }; + } else { + data = { + userType: _this.form.userType, + name: _this.form.name1 + " " + _this.form.name2, + email: _this.form.email, + addr: _this.form.labelList, + provinceId: _this.form.provinceId, + cityId: _this.form.cityId, + }; + } + } else { + return false; + } + }); + + return data; + }, + handleChange(val) { + this.form.provinceId = val[0] + ""; + this.form.cityId = val[1] + ""; + + setTimeout(() => { + this.form.labelList = + document.querySelectorAll(".el-cascader input")[0].value; + }, 200); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.formInfo { + .el-form-item ::v-deep { + label { + font-size: 14px; + color: #fff; + text-align: left; + } + + .el-radio { + .el-radio__inner { + background: none; + border-color: rgba(255, 255, 255, 0.3) !important; + + &::after { + width: 6px; + height: 6px; + } + } + + .el-radio__label { + color: #fff !important; + } + } + + .el-form-item__content { + margin-left: 110px !important; + text-align: left; + } + + input { + background-color: rgba(0, 0, 0, 0.1); + color: #fff; + border: none; + caret-color: #fff !important; + } + + input:-webkit-autofill, + textarea:-webkit-autofill, + select:-webkit-autofill { + -webkit-text-fill-color: #fff !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-cascader { + width: 100%; + } + } +} +</style> + +<style lang="scss"> +.el-popper.el-cascader__dropdown.location { + background-color: rgb(77, 72, 111); + border: none; + margin: 0 0; + + * { + color: #fff; + border-color: rgba(255, 255, 2555, 0.1); + } + + .el-cascader-node:hover, + .in-active-path, + .is-active, + .el-cascader-node { + background-color: rgb(101, 93, 126) !important; + } + + .popper__arrow::after, + .popper__arrow { + display: none; + } + + .el-cascader-node__label { + text-align: left; + } + + .el-cascader-menu__wrap { + width: 226px; + height: 175px; + } +} </style> \ No newline at end of file diff --git a/src/pages/login/App.vue b/src/pages/login/App.vue index b752383..fdd8d7b 100644 --- a/src/pages/login/App.vue +++ b/src/pages/login/App.vue @@ -1,577 +1,577 @@ -<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">{{ data.title_firstLine }}</div> - <div class="ch">{{ data.title_secondLine }}</div> - </div> - - <div class="left_footer"> - <img class="logo" src="/apps/loginData/LOGO.png" alt="" /> - <div class="web">{{ data.website }}</div> - </div> - - <div - class="login-form" - :style="{ background: backgroundColor }" - :class="{ empty: !user.loginName && !user.password }" - > - <img class="logo" src="/apps/loginData/leftImg.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"; -import loginData from "../../../public/apps/loginData/login.json"; - -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: () => ({ - 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.data = loginData; - this.backgroundColor = - this.backgroundList[ - Math.floor(Math.random() * this.backgroundList.length) - ]; - }, - 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"> -html, -body, -.login { - height: 100%; - min-width: 1200px; - min-height: 680px; - position: relative; - background-image: url("/apps/loginData/background.png"); - - .title { - position: absolute; - top: 40%; - left: 15.6%; - 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: 18.6%; - 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: 40%; - height: 92.5%; - right: 3.75%; - top: 3.75%; - 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; - overflow: hidden; - - .logo { - width: 100%; - margin-top: 13%; - margin-bottom: 20px; - } - - .el-form { - width: 100%; - } - - .el-form-item { - background: rgba(0, 0, 0, 0); - } - - .el-form-item:nth-child(2) { - margin-top: 10%; - margin-bottom: 13%; - } - - .el-button { - width: 100%; - 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 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">{{ data.title_firstLine }}</div> + <div class="ch">{{ data.title_secondLine }}</div> + </div> + + <div class="left_footer"> + <img class="logo" src="/apps/loginData/LOGO.png" alt="" /> + <div class="web">{{ data.website }}</div> + </div> + + <div + class="login-form" + :style="{ background: backgroundColor }" + :class="{ empty: !user.loginName || !user.password }" + > + <img class="logo" src="/apps/loginData/leftImg.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"; +import loginData from "../../../public/apps/loginData/login.json"; + +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: () => ({ + 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.data = loginData; + this.backgroundColor = + this.backgroundList[ + Math.floor(Math.random() * this.backgroundList.length) + ]; + }, + 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"> +html, +body, +.login { + height: 100%; + min-width: 1200px; + min-height: 680px; + position: relative; + background-image: url("/apps/loginData/background.png"); + + .title { + position: absolute; + top: 40%; + left: 15.6%; + 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: 18.6%; + 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: 40%; + height: 92.5%; + right: 3.75%; + top: 3.75%; + 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; + overflow: hidden; + + .logo { + width: 100%; + margin-top: 13%; + margin-bottom: 20px; + } + + .el-form { + width: 100%; + } + + .el-form-item { + background: rgba(0, 0, 0, 0); + } + + .el-form-item:nth-child(2) { + margin-top: 10%; + margin-bottom: 13%; + } + + .el-button { + width: 100%; + 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> diff --git a/vue.config.js b/vue.config.js index 6c702fd..2674fd7 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,156 +1,156 @@ -"use strict"; -const glob = require("glob"); -const pages = {}; -const IS_VENDOR = /[\\/]node_modules[\\/]/; -const pageVendor = {}; - -const pkg = require("./package.json"); -const timestamp = new Date().getTime(); -const queryStr = `?v=${pkg.version}&t=${timestamp}`; - -glob.sync("./src/pages/**/main.ts").forEach((path) => { - const chunk = path.split("./src/pages/")[1].split("/main.ts")[0]; - const chunk_vendor = `${chunk}-vendors`; - const chunk_common = `${chunk}-common`; - pages[chunk] = { - entry: path, - template: "public/index.html", - title: chunk == "desktop/index" ? "SmartAI" : chunk, - chunks: [chunk_vendor, "chunk-common", chunk], - }; - if (chunk != "index") { - pages[chunk].filename = "view/" + chunk + ".html"; - } - - pageVendor[chunk_vendor] = { - name: chunk_vendor, - priority: -11, - chunks: (c) => c.name === chunk, - test: /\.js$/, - enforce: true, - }; - - // pageVendor[chunk_common] = { - // name: chunk_common, - // priority: -20, - // chunks: 'initial', - // minChunks: 2, - // reuseExistingChunk: true, - // enforce: true - // } -}); - -const serverUrl = "http://192.168.20.189:7009"; // 缇婁簲// -// const serverUrl = "http://192.168.8.10:7009"; -const serverUrl2 = "http://192.168.8.10:9000"; -// const serverUrl = "http://192.168.20.10:7009"; -// const serverUrl2 = "http://192.168.20.10:9000"; - -// const cir = require("circular-dependency-plugin"); - -module.exports = { - pages, - chainWebpack: (config) => { - config.plugins.delete("named-chunks"); - if (process.env.NODE_ENV === "production") { - config.output.filename("js/[name].js" + queryStr).end(); - config.output.chunkFilename("js/[name].js" + queryStr).end(); - // 淇敼鐢熶骇閰嶇疆 - config.plugin("extract-css").tap(() => [ - { - filename: `css/[name].css${queryStr}`, - chunkFilename: `css/[name].css${queryStr}`, - }, - ]); - } - - config.optimization.splitChunks({ - cacheGroups: pageVendor, - }); - - // config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', publicPath: '../' }) - //config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', outputPath: '../' }) - }, - productionSourceMap: false, - filenameHashing: false, - pwa: { - iconPaths: { - favicon32: "favicon.ico", - favicon16: "favicon.ico", - }, - }, - devServer: { - proxy: { - "/track": { - target: serverUrl, - // ws: true, - changeOrigin: true, - }, - "/ws": { - target: serverUrl, - // ws: true, - changeOrigin: true, - }, - "/data/api-v/app/findAllApp": { - // target: '/', - target: "http://localhost:8080/", - changeOrigin: true, - pathRewrite: { - "^/data/api-v/app/findAllApp": "apps.json", - }, - }, - "/api-c": { - target: serverUrl, - changeOrigin: true, - }, - "/api-v": { - target: serverUrl, - changeOrigin: true, - }, - "/api-f": { - target: serverUrl, - // secure: false, - changeOrigin: true, - }, - "/api-p": { - target: serverUrl, - // secure: false, - changeOrigin: true, - }, - "/api-u": { - target: serverUrl, - changeOrigin: true, - }, - "/httpImage": { - target: serverUrl, - changeOrigin: true, //寮�鍚唬鐞� - }, - "/files": { - target: serverUrl, - changeOrigin: true, //寮�鍚唬鐞� - }, - "/iotdata": { - target: serverUrl2, - changeOrigin: true, //寮�鍚唬鐞�, - }, - }, - }, - // configureWebpack: { - // plugins: [ - // new cir({ - // exclude: /a\.js|node_modules/, - // include: /dir/, - // failOnError: true, - // allowAsyncCycles: false, - // cwd: process.cwd(), - // }), - // ], - // }, - /* css:{ - loaderOptions:{ - scss:{ - prependData:`@import"@/assets/css/globalVariable.scss"` - } - } - } */ -}; +"use strict"; +const glob = require("glob"); +const pages = {}; +const IS_VENDOR = /[\\/]node_modules[\\/]/; +const pageVendor = {}; + +const pkg = require("./package.json"); +const timestamp = new Date().getTime(); +const queryStr = `?v=${pkg.version}&t=${timestamp}`; + +glob.sync("./src/pages/**/main.ts").forEach((path) => { + const chunk = path.split("./src/pages/")[1].split("/main.ts")[0]; + const chunk_vendor = `${chunk}-vendors`; + const chunk_common = `${chunk}-common`; + pages[chunk] = { + entry: path, + template: "public/index.html", + title: chunk == "desktop/index" ? "SmartAI" : chunk, + chunks: [chunk_vendor, "chunk-common", chunk], + }; + if (chunk != "index") { + pages[chunk].filename = "view/" + chunk + ".html"; + } + + pageVendor[chunk_vendor] = { + name: chunk_vendor, + priority: -11, + chunks: (c) => c.name === chunk, + test: /\.js$/, + enforce: true, + }; + + // pageVendor[chunk_common] = { + // name: chunk_common, + // priority: -20, + // chunks: 'initial', + // minChunks: 2, + // reuseExistingChunk: true, + // enforce: true + // } +}); + +const serverUrl = "http://192.168.20.189:7009"; // 缇婁簲// +// const serverUrl = "http://192.168.8.10:7009"; +const serverUrl2 = "http://192.168.8.10:9000"; +// const serverUrl = "http://192.168.20.10:7009"; +// const serverUrl2 = "http://192.168.20.10:9000"; + +// const cir = require("circular-dependency-plugin"); + +module.exports = { + pages, + chainWebpack: (config) => { + config.plugins.delete("named-chunks"); + if (process.env.NODE_ENV === "production") { + config.output.filename("js/[name].js" + queryStr).end(); + config.output.chunkFilename("js/[name].js" + queryStr).end(); + // 淇敼鐢熶骇閰嶇疆 + config.plugin("extract-css").tap(() => [ + { + filename: `css/[name].css${queryStr}`, + chunkFilename: `css/[name].css${queryStr}`, + }, + ]); + } + + config.optimization.splitChunks({ + cacheGroups: pageVendor, + }); + + // config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', publicPath: '../' }) + //config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', outputPath: '../' }) + }, + productionSourceMap: false, + filenameHashing: false, + pwa: { + iconPaths: { + favicon32: "favicon.ico", + favicon16: "favicon.ico", + }, + }, + devServer: { + proxy: { + "/track": { + target: serverUrl, + // ws: true, + changeOrigin: true, + }, + "/ws": { + target: serverUrl, + // ws: true, + changeOrigin: true, + }, + "/data/api-v/app/findAllApp": { + // target: '/', + target: "http://localhost:8080/", + changeOrigin: true, + pathRewrite: { + "^/data/api-v/app/findAllApp": "apps.json", + }, + }, + "/api-c": { + target: serverUrl, + changeOrigin: true, + }, + "/api-v": { + target: serverUrl, + changeOrigin: true, + }, + "/api-f": { + target: serverUrl, + // secure: false, + changeOrigin: true, + }, + "/api-p": { + target: serverUrl, + // secure: false, + changeOrigin: true, + }, + "/api-u": { + target: serverUrl, + changeOrigin: true, + }, + "/httpImage": { + target: serverUrl, + changeOrigin: true, //寮�鍚唬鐞� + }, + "/files": { + target: serverUrl, + changeOrigin: true, //寮�鍚唬鐞� + }, + "/iotdata": { + target: serverUrl2, + changeOrigin: true, //寮�鍚唬鐞�, + }, + }, + }, + // configureWebpack: { + // plugins: [ + // new cir({ + // exclude: /a\.js|node_modules/, + // include: /dir/, + // failOnError: true, + // allowAsyncCycles: false, + // cwd: process.cwd(), + // }), + // ], + // }, + /* css:{ + loaderOptions:{ + scss:{ + prependData:`@import"@/assets/css/globalVariable.scss"` + } + } + } */ +}; -- Gitblit v1.8.0