From 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期三, 26 一月 2022 13:46:53 +0800 Subject: [PATCH] 集群管理搜索集群 --- src/pages/desktop/index/components/Desktop.vue | 292 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 280 insertions(+), 12 deletions(-) diff --git a/src/pages/desktop/index/components/Desktop.vue b/src/pages/desktop/index/components/Desktop.vue index e9e9615..e9e0548 100644 --- a/src/pages/desktop/index/components/Desktop.vue +++ b/src/pages/desktop/index/components/Desktop.vue @@ -14,9 +14,7 @@ <span v-if="!snExpire" class="text" >璇曠敤鐗堝皻鏈縺娲伙紝浠呮敮鎸侀儴鍒嗗姛鑳戒娇鐢紝濡傞渶浣跨敤鍏ㄩ儴鍔熻兘锛岃灏藉揩婵�娲荤郴缁熴��</span > - <span v-else class="text" - >SmartAIOS 璇曠敤鏈熷凡鍒版湡锛岃鎮ㄥ敖蹇縺娲荤郴缁�</span - > + <span v-else class="text">SmartAIOS 璇曠敤鏈熷凡鍒版湡锛岃鎮ㄥ敖蹇縺娲荤郴缁�</span> <span class="go-to" @click="gotoActive">鍓嶅線婵�娲�</span> <span class="icon iconfont" @click="showFreeVersion = false" ></span @@ -31,17 +29,79 @@ :close-on-click-modal="false" :close-on-press-escape="false" > + <el-dialog + width="30%" + title="璐︽埛婵�娲�" + :visible.sync="innerVisible" + append-to-body + class="inner-login-dialog" + > + <div class="info"> + 璇疯緭鍏ヤ綘鍦⊿martAI鍟嗗煄璐︽埛鐨勬墜鏈哄彿骞跺畬鎴愰獙璇佺爜鏍¢獙锛屽疄鐜扮郴缁熸縺娲伙紒 + </div> + <div class="login-content"> + <el-form + :model="phone" + status-icon + :rules="phoneCodeRule" + :validate-on-rule-change="false" + ref="phoneLogin" + class="demo-ruleForm" + > + <el-form-item prop="phoneNum" style="margin-top: 20px"> + <el-input + v-model="phone.phoneNum" + style="width: 380px" + placeholder="璇疯緭鍏ユ墜鏈哄彿" + > + <i slot="prefix" class="el-icon-mobile-phone"></i> + </el-input> + </el-form-item> + <el-form-item prop="verifyCode"> + <el-input + @keyup.enter.native="phoneLogin" + v-model="phone.verifyCode" + autocomplete="off" + style="width: 254px" + placeholder="璇疯緭鍏ラ獙璇佺爜" + > + <i slot="prefix" class="el-icon-message"></i> + </el-input> + <el-button + class="code-btn" + style="margin-left: 15px" + :disabled="codeDisabled" + @click="getCode" + >{{ codeMsg }}</el-button + > + </el-form-item> + </el-form> + </div> + <span slot="footer" class="dialog-footer"> + <el-button @click="activeDialog = false">鍙栨秷</el-button> + <el-button type="primary" @click="loginShop">纭畾</el-button> + </span> + </el-dialog> <div class="ver"><span class="ver-text">鐗堟湰锛�</span>{{ version }}</div> <div class="ver"> <span class="ver-text">鐘舵�侊細</span>{{ versionState }} </div> <el-divider></el-divider> <div class="info"> - 濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺� - <a href="http://apps.smartai.com" target="_blank" + 濡傛灉鎮ㄥ凡杩炴帴鍒癐nternet骞朵笖宸茶喘涔颁骇鍝佸瘑閽ワ紝鍙互灏濊瘯楠岃瘉SmartAI鍟嗗煄璐︽埛婵�娲荤郴缁熴�� + <div> + <el-button type="primary" @click="innerVisible = true"> + 璐︽埛婵�娲� + </el-button> + </div> + </div> + <div class="info"> + 濡傛灉鎮ㄦ湭杩炴帴Internet鎴栨縺娲诲け璐ワ紝鍙皾璇曠绾挎縺娲伙紝浣跨敤鎵嬫満鎵爜璐拱浜у搧鎴栭獙璇丼martAI鍟嗗煄璐︽埛婵�娲荤郴缁熴�� + <!-- <a href="http://apps.smartai.com" target="_blank" >http://apps.smartai.com</a > - 璐拱銆� + 濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺� + 璐拱銆� --> </div> <img class="qr-code-img" src="/version/offline/qrcode" /> <el-divider></el-divider> @@ -73,7 +133,66 @@ </div> <span slot="footer" class="dialog-footer"> - <el-button v-if="!snExpire" @click="activeDialog = false">缁х画璇曠敤</el-button> + <el-button v-if="!snExpire" @click="activeDialog = false" + >缁х画璇曠敤</el-button + > + <el-button v-else @click="quit">閫�鍑虹櫥褰�</el-button> + <el-button type="primary" @click="activateVersion">婵�娲�</el-button> + </span> + </el-dialog> + + <el-dialog + title="鎴戠殑璁㈠崟" + :visible.sync="innerDialog" + width="750px" + :show-close="false" + :close-on-click-modal="false" + :close-on-press-escape="false" + custom-class="my-order" + > + <div class="tip"> + <i class="el-icon-info"></i> + <span> 璇锋鏌ヨ鍗曚俊鎭紝纭鏃犺鍚庡啀婵�娲荤郴缁熴�� </span> + </div> + + <div class="order-list"> + <div class="order-card"> + <div class="head"> + <el-checkbox v-model="checked"> + <span>璁㈠崟ID锛歿{ 22322323423 }}</span> + </el-checkbox> + + <span>锟{ 111 }} 鍏�</span> + </div> + <div class="desc"> + <div>绯荤粺鐗堟湰锛歿{ 22322323423 }}</div> + <div>閫氶亾鏁伴噺锛歿{ 22322323423 }}</div> + <div>鎽勫儚鏈烘暟閲忥細{{ 22322323423 }}</div> + <div>鏈嶅姟鏃堕暱锛歿{ 22322323423 }}</div> + </div> + </div> + + <div class="order-card"> + <div class="head"> + <el-checkbox v-model="checked"> + <span>璁㈠崟ID锛歿{ 31423233423 }}</span> + </el-checkbox> + + <span>锟{ 111 }} 鍏�</span> + </div> + <div class="desc"> + <div>绯荤粺鐗堟湰锛歿{ 22322323423 }}</div> + <div>閫氶亾鏁伴噺锛歿{ 22322323423 }}</div> + <div>鎽勫儚鏈烘暟閲忥細{{ 22322323423 }}</div> + <div>鏈嶅姟鏃堕暱锛歿{ 22322323423 }}</div> + </div> + </div> + </div> + + <span slot="footer" class="dialog-footer"> + <el-button v-if="!snExpire" @click="activeDialog = false" + >鍙栨秷婵�娲�</el-button + > <el-button v-else @click="quit">閫�鍑虹櫥褰�</el-button> <el-button type="primary" @click="activateVersion">婵�娲�</el-button> </span> @@ -84,11 +203,14 @@ <script> import DFrame from "./DFrame"; import Safari from "./Safari"; +import { isPhone } from "../../../../scripts/validate.ts"; import { getActiveQrCode, getSN, activateVersion, uploadKey, + getSmsCode, + loginShopInSmart, } from "@/api/system"; export default { name: "Desktop", @@ -100,24 +222,87 @@ return { showFreeVersion: false, activeDialog: false, + countdown: 60,innerDialog: false, version: "SmartAI璇曠敤鐗�", + codeMsg: "鑾峰彇楠岃瘉鐮�", versionState: "灏氭湭婵�娲�", secrectKey: "", - snExpire: false + codeDisabled: false, + innerVisible: false, + snExpire: false, + timer: null, + phone: { + phoneNum: "", + verifyCode: "", + }, + phoneCodeRule: { + phoneNum: [{ validator: isPhone, trigger: "change" }], + verifyCode: [ + { required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "change" }, + ], + }, }; }, - mounted() { + created() { this.validateSn(); }, methods: { - quit(){ - this.$emit("quit") + quit() { + this.$emit("quit"); }, validateSn() { getSN().then((res) => { this.snExpire = res.data.expire; this.showFreeVersion = res.data.sn == "" || res.data.expire; }); + }, + getValidStr() { + if (this.countdown > 0 && this.countdown <= 60) { + this.countdown--; + if (this.countdown !== 0) { + this.codeMsg = "閲嶆柊鍙戦��(" + this.countdown + ")"; + } else { + clearInterval(this.timer); + this.codeMsg = "鑾峰彇楠岃瘉鐮�"; + this.countdown = 60; + this.timer = null; + this.codeDisabled = false; + } + } + }, + loginShop(){ + loginShopInSmart({ + phoneNum:this.phone.phoneNum, + verifyCode + }) + }, + // 鑾峰彇楠岃瘉鐮� + getCode() { + // 楠岃瘉鐮�60绉掑�掕鏃� + var pattern = /^1[345789]\d{9}$/; + if (this.phone.phoneNum == "") { + this.$refs['phoneLogin'].fields[0].validateMessage = "璇疯緭鍏ユ墜鏈哄彿"; + this.$refs['phoneLogin'].fields[0].validateState = "error"; + return; + } + if (!pattern.test(this.phone.phoneNum)) { + this.$refs['phoneLogin'].fields[0].validateMessage = "鎵嬫満鍙风爜鏍煎紡鏈夎"; + this.$refs['phoneLogin'].fields[0].validateState = "error"; + return; + } + if (!this.timer) { + this.codeDisabled = true; + this.getValidStr(); + this.timer = setInterval(this.getValidStr, 1000); + getSmsCode({ phoneNum: this.phone.phoneNum }) + .then((res) => { + this.gotCode = true; + }) + .catch((err) => { + this.$refs['phoneLogin'].fields[0].validateMessage = err.data.msg; + this.$refs['phoneLogin'].fields[0].validateState = "error"; + }); + } }, activateVersion() { if (this.secrectKey.trim() == "") { @@ -126,7 +311,7 @@ } activateVersion({ code: this.secrectKey.trim() }) .then((res) => { - debugger + debugger; if (res.code == 200) { this.$notify.success("婵�娲绘垚鍔�"); this.validateSn(); @@ -227,6 +412,89 @@ font-size: 15px; } } +.inner-login-dialog { + .info { + padding: 0 30px; + } + .el-dialog__body { + text-align: left; + } +} +.login-content { + box-sizing: border-box; + padding: 0 30px; + .el-input__inner { + -webkit-appearance: none; + background-color: #ffffff; + background-image: none; + border-radius: 4px; + border: 1px solid #dcdfe6; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: 16px; + border-radius: 5px; + height: 40px; + line-height: 40px; + outline: none; + padding: 0 15px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + } +} +.el-dialog.my-order { + .tip { + width: auto; + height: 40px; + background: rgb(145, 213, 255, 0.2); + box-sizing: border-box; + border: 1px rgb(145, 213, 255) solid; + display: flex; + padding: 0 10px; + border-radius: 5px; + align-items: center; + i { + margin-right: 5px; + font-size: 16px; + color: rgb(24, 144, 255); + } + span { + font-size: 14px; + } + } + .order-list { + margin: 20px 0; + + .order-card { + height: 150px; + background: #fff; + margin-bottom: 15px; + + border-radius: 8px; + box-shadow: 0px 0px 4px rgb(0 0 0 / 25%); + .head { + height: 40px; + line-height: 40px; + text-align: left; + box-sizing: border-box; + padding: 0 20px; + border-bottom: 1px rgba(242, 242, 242, 1) solid; + font-size: 14px; + display: flex; + justify-content: space-between; + } + .desc { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 110px; + text-align: left; + box-sizing: border-box; + padding: 0 20px; + } + } + } +} .warn-tag { width: 640px; text-align: left; -- Gitblit v1.8.0