From 51ecc231aa4f73a5071e188b4528ab59d730b07f Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期二, 05 九月 2023 19:14:30 +0800 Subject: [PATCH] 移除视频分析相关功能, 默认自动登录 --- src/pages/vindicate/index/App.vue | 169 +-- src/pages/login/index/App.vue | 6 src/pages/desktop/index/components/DFrame.vue | 239 ++--- src/pages/systemMonitor/index/App.vue | 453 +++++------- src/pages/desktop/index/components/Desktop.vue | 279 +++---- src/pages/settings/index/index.vue | 1019 +++++++++++---------------- 6 files changed, 899 insertions(+), 1,266 deletions(-) diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue index 3d102d6..e7f2d03 100644 --- a/src/pages/desktop/index/components/DFrame.vue +++ b/src/pages/desktop/index/components/DFrame.vue @@ -10,7 +10,7 @@ top: data.topOffset + 'px', 'z-index': 125 + data.order, width: width + 'px', - height: height + 'px', + height: height + 'px' }" > <div class="d-frame-title" v-drag="fullScreen" @click="frameClick"> @@ -18,16 +18,10 @@  </div> <div class="d-frame-title-operation"> - <i - class="icon-minus d-frame-operation-minus" - @click="minFrame(data, $event)" - > + <i class="icon-minus d-frame-operation-minus" @click="minFrame(data, $event)"> <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt /> </i> - <i - class="icon-screen-toggle d-frame-operation-full" - @click="changeFullScreen($event)" - > + <i class="icon-screen-toggle d-frame-operation-full" @click="changeFullScreen($event)"> <img :src=" fullScreen @@ -37,10 +31,7 @@ alt /> </i> - <i - class="icon-close d-frame-operation-close" - @click="closeFrame($event)" - ></i> + <i class="icon-close d-frame-operation-close" @click="closeFrame($event)"></i> </div> <slot name="d-frame-title-content"> <div class="d-frame-title-content"> @@ -61,11 +52,7 @@ @mouseup="mouseup" ></span> </div> - <div - class="menuList" - v-show="showMenu" - :style="{ top: menuTop + 'px', left: menuLeft + 'px' }" - > + <div class="menuList" v-show="showMenu" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"> <ul> <li @click="refreshApp">閲嶆柊鍔犺浇</li> <li @click="changeFullScreen">鏈�澶у寲</li> @@ -77,14 +64,14 @@ </template> <script> -import html2canvas from "html2canvas"; +import html2canvas from "html2canvas" export default { name: "DFrame", props: { - data: Object, + data: Object }, created() { - this.addBackListener(); + this.addBackListener() }, data() { return { @@ -92,7 +79,7 @@ showMenu: false, menuTop: 0, menuLeft: 0, - fullScreen: false, + fullScreen: this.data.width == 0 && this.data.height == 0, width: this.data.width || 1024, height: this.data.height || 512, resizeObj: { @@ -100,78 +87,78 @@ startH: 0, mouX: 0, mouY: 0, - resizeLock: false, + resizeLock: false }, - isShowBack: false, - }; + isShowBack: false + } }, watch: { showMenu(val) { if (val) { - document.body.addEventListener("click", this.closeMenuList); + document.body.addEventListener("click", this.closeMenuList) } else { - document.body.removeEventListener("click", this.closeMenuList); + document.body.removeEventListener("click", this.closeMenuList) } - }, + } }, mounted() { window.addEventListener("message", (d) => { - let { source, trigger, menuT, menuL } = d.data; + let { source, trigger, menuT, menuL } = d.data if (trigger == "contextmenu") { - this.openMenuList(menuT, menuL); + this.openMenuList(menuT, menuL) } - }); + }) }, methods: { openMenuList(t, l, frame) { - this.showMenu = true; - this.menuTop = t; - this.menuLeft = l; + this.showMenu = true + this.menuTop = t + this.menuLeft = l }, closeMenuList() { - this.showMenu = false; + this.showMenu = false }, //resize mousedown(e) { - this.resizeObj.mouX = e.clientX; - this.resizeObj.mouY = e.clientY; - this.resizeObj.startW = this.width; - this.resizeObj.startH = this.height; - this.resizeObj.resizeLock = true; + this.resizeObj.mouX = e.clientX + this.resizeObj.mouY = e.clientY + this.resizeObj.startW = this.width + this.resizeObj.startH = this.height + this.resizeObj.resizeLock = true }, mousemove(e) { - document.onmousemove = function (e) { + document.onmousemove = function(e) { if (!this.resizeObj.resizeLock) { - return; + return } - e = e || window.event; - e.preventDefault(); - let curWidth = this.resizeObj.startW + e.clientX - this.resizeObj.mouX; - let curHeight = this.resizeObj.startH + e.clientY - this.resizeObj.mouY; + e = e || window.event + e.preventDefault() + let curWidth = this.resizeObj.startW + e.clientX - this.resizeObj.mouX + let curHeight = this.resizeObj.startH + e.clientY - this.resizeObj.mouY - this.width = curWidth; - this.height = curHeight; - }.bind(this); + this.width = curWidth + this.height = curHeight + }.bind(this) }, mouseup() { - this.resizeObj.resizeLock = false; - document.onmousemove = null; + this.resizeObj.resizeLock = false + document.onmousemove = null }, //resize end //閲嶆柊鍔犺浇搴旂敤 refreshApp() { - window.frames[this.data.name].location.reload(); + window.frames[this.data.name].location.reload() }, - closeFrame: function () { - this.$store.dispatch("desktop/closeFrame", this.data); + closeFrame: function() { + this.$store.dispatch("desktop/closeFrame", this.data) //this.refreshDock(); - this.$store.commit("desktop/highlight"); + this.$store.commit("desktop/highlight") }, - changeFullScreen: function () { - this.fullScreen = !this.fullScreen; + changeFullScreen: function() { + this.fullScreen = !this.fullScreen }, frameClick(e) { - this.$store.commit("desktop/refreshFrame", this.data); + this.$store.commit("desktop/refreshFrame", this.data) }, minFrame(data, e) { //if(data.name=='cameraVideo'||data.name=='search'||data.name=='library'||data.name=='cameraAccess'||data.name=='dataStack'){ @@ -180,10 +167,10 @@ id: this.data.id, src: this.data.icon, alt: this.data.title, - type: "3", + type: "3" //screenshot: shotSrc - }); - return false; + }) + return false //} //鎵惧埌褰撳墠鐨刬frame //let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0); @@ -219,99 +206,93 @@ // 鑿滃崟鏍忚繑鍥� back() { - let active = this.$store.state.desktop.minDocks; - active = active.filter((item) => item.highlight); - console.log(active); - const iframeArr = document.querySelectorAll("iframe"); + let active = this.$store.state.desktop.minDocks + active = active.filter((item) => item.highlight) + console.log(active) + const iframeArr = document.querySelectorAll("iframe") iframeArr.forEach((item) => { - item.contentWindow.postMessage({ msg: `杩斿洖${active[0].alt}` }, "*"); - }); + item.contentWindow.postMessage({ msg: `杩斿洖${active[0].alt}` }, "*") + }) }, // 娣诲姞杩斿洖鎸夐挳鐩稿叧鐩戝惉 addBackListener() { //鏄剧ず杩斿洖鎸夐挳 window.addEventListener("message", (e) => { if (e.data.msg === "showBack") { - this.isShowBack = true; + this.isShowBack = true } - }); + }) //闅愯棌杩斿洖鎸夐挳 window.addEventListener("message", (e) => { if (e.data.msg === "hiddenBack") { - this.isShowBack = false; + this.isShowBack = false } - }); - }, + }) + } }, directives: { drag(el, binding) { if (el.dragLock || binding.arg) { - return; + return } - el.onmousedown = function (e) { - console.log("binding", binding); - if (binding.value) return; - el.dragLock = true; - let disx = e.clientX - el.parentElement.offsetLeft; - let disy = e.clientY - el.parentElement.offsetTop; - el.style.cursor = "move"; - document.onmousemove = function (e) { - e.preventDefault(); - window.getSelection().removeAllRanges(); - let toLeft = e.clientX - disx; - let toTop = e.clientY - disy; + el.onmousedown = function(e) { + console.log("binding", binding) + if (binding.value) return + el.dragLock = true + let disx = e.clientX - el.parentElement.offsetLeft + let disy = e.clientY - el.parentElement.offsetTop + el.style.cursor = "move" + document.onmousemove = function(e) { + e.preventDefault() + window.getSelection().removeAllRanges() + let toLeft = e.clientX - disx + let toTop = e.clientY - disy //杈圭晫澶勭悊 if (toLeft <= -(el.parentElement.offsetWidth - 46 * 3)) { - toLeft = -(el.parentElement.offsetWidth - 46 * 3); - } else if ( - toLeft >= - document.body.getBoundingClientRect().width - 46 * 3 - ) { - toLeft = document.body.getBoundingClientRect().width - 46 * 3; + toLeft = -(el.parentElement.offsetWidth - 46 * 3) + } else if (toLeft >= document.body.getBoundingClientRect().width - 46 * 3) { + toLeft = document.body.getBoundingClientRect().width - 46 * 3 } - el.parentElement.style.left = toLeft + "px"; + el.parentElement.style.left = toLeft + "px" if (toTop <= 40) { - toTop = 40; - } else if ( - toTop >= - document.body.getBoundingClientRect().height - 31 - ) { - toTop = document.body.getBoundingClientRect().height - 31; + toTop = 40 + } else if (toTop >= document.body.getBoundingClientRect().height - 31) { + toTop = document.body.getBoundingClientRect().height - 31 } - el.parentElement.style.top = toTop + "px"; - }; - document.onmouseup = function () { - el.dragLock = false; - document.onmousemove = document.onmouseup = null; - el.style.cursor = "unset"; - }; - }; + el.parentElement.style.top = toTop + "px" + } + document.onmouseup = function() { + el.dragLock = false + document.onmousemove = document.onmouseup = null + el.style.cursor = "unset" + } + } }, resize(el, binding, vnode) { if (el.resizeLock) { - return; + return } - el.onmousedown = function (e) { - el.resizeLock = true; - let disx = e.clientX; - let disy = e.clientY; - let disw = vnode.context.width; - let dish = vnode.context.height; - el.style.cursor = "nw-resize"; - document.onmousemove = function (e) { - window.getSelection().removeAllRanges(); - vnode.context.width = disw + e.clientX - disx; - vnode.context.height = dish + e.clientY - disy; - }; - document.onmouseup = function () { - el.resizeLock = false; - document.onmousemove = document.onmouseup = null; - el.style.cursor = "unset"; - }; - }; - }, - }, -}; + el.onmousedown = function(e) { + el.resizeLock = true + let disx = e.clientX + let disy = e.clientY + let disw = vnode.context.width + let dish = vnode.context.height + el.style.cursor = "nw-resize" + document.onmousemove = function(e) { + window.getSelection().removeAllRanges() + vnode.context.width = disw + e.clientX - disx + vnode.context.height = dish + e.clientY - disy + } + document.onmouseup = function() { + el.resizeLock = false + document.onmousemove = document.onmouseup = null + el.style.cursor = "unset" + } + } + } + } +} </script> <style scoped> @@ -462,4 +443,4 @@ .menuList li:hover { background: rgba(152, 170, 190, 0.7); } -</style> \ No newline at end of file +</style> diff --git a/src/pages/desktop/index/components/Desktop.vue b/src/pages/desktop/index/components/Desktop.vue index a0737fb..9f83144 100644 --- a/src/pages/desktop/index/components/Desktop.vue +++ b/src/pages/desktop/index/components/Desktop.vue @@ -1,30 +1,18 @@ <template> <div class="desktop"> - <d-frame - v-for="item in this.$store.state.desktop.frames" - :data="item" - :key="item.id" - ></d-frame> - <safari - :data="$store.state.desktop.safari" - v-if="$store.state.desktop.safari.active" - ></safari> + <d-frame v-for="item in this.$store.state.desktop.frames" :data="item" :key="item.id"></d-frame> + <safari :data="$store.state.desktop.safari" v-if="$store.state.desktop.safari.active"></safari> - <div class="warn-tag" v-if="showFreeVersion"> + <!-- 鏆傛椂闅愯棌璇曠敤鐗堟彁绀� --> + <!-- <div class="warn-tag" v-if="showFreeVersion"> --> + <div class="warn-tag" v-show="false"> <span v-if="!snExpire" class="text" - >{{ - versionName - }}灏氭湭婵�娲伙紝浠呮敮鎸佷娇鐢ㄩ儴鍒嗗姛鑳斤紝濡傞渶浣跨敤鍏ㄩ儴鍔熻兘锛岃灏藉揩婵�娲汇��</span + >{{ versionName }}灏氭湭婵�娲伙紝浠呮敮鎸佷娇鐢ㄩ儴鍒嗗姛鑳斤紝濡傞渶浣跨敤鍏ㄩ儴鍔熻兘锛岃灏藉揩婵�娲汇��</span > <span v-else class="text">SmartAIOS 璇曠敤鏈熷凡鍒版湡锛岃鎮ㄥ敖蹇縺娲荤郴缁�</span> <div> <span class="go-to" @click="gotoActive">鍓嶅線婵�娲�</span> - <span - class="icon iconfont" - v-if="!snExpire" - @click="showFreeVersion = false" - ></span - > + <span class="icon iconfont" v-if="!snExpire" @click="showFreeVersion = false"></span> </div> </div> @@ -86,15 +74,11 @@ <span slot="footer" class="dialog-footer"> <div class="btns"> <el-button class="cancel" @click="cancelLogin">鍙栨秷</el-button> - <el-button class="ok" type="primary" @click="loginShop" - >纭畾</el-button - > + <el-button class="ok" type="primary" @click="loginShop">纭畾</el-button> </div> </span> </el-dialog> - <div class="ver"> - <span class="ver-text">鐗堟湰锛�</span>SmartAI{{ versionName }} - </div> + <div class="ver"><span class="ver-text">鐗堟湰锛�</span>SmartAI{{ versionName }}</div> <div class="ver"><span class="ver-text">鐘舵�侊細</span>灏氭湭婵�娲�</div> <el-divider></el-divider> <div class="info" v-if="versionName == '姝e紡鐗�'"> @@ -118,9 +102,7 @@ <span style="font-weight: bold; font-size: 18px">路 </span> <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> 濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺� - <a href="http://apps.smartai.com" target="_blank" - >http://apps.smartai.com</a - > + <a href="http://apps.smartai.com" target="_blank">http://apps.smartai.com</a> 璐拱銆� </span> </div> @@ -133,23 +115,11 @@ </div> <div class="validate"> <form id="myForm"> - <el-input - type="textarea" - autosize - style="width: 450px" - placeholder="璇疯緭鍏ユ垨瀵煎叆瀵嗛挜" - v-model="secrectKey" - > + <el-input type="textarea" autosize style="width: 450px" placeholder="璇疯緭鍏ユ垨瀵煎叆瀵嗛挜" v-model="secrectKey"> </el-input> </form> - <el-upload - class="upload-demo" - action - :http-request="uploadKey" - :limit="1" - :show-file-list="false" - > + <el-upload class="upload-demo" action :http-request="uploadKey" :limit="1" :show-file-list="false"> <el-button size="small" type="primary">瀵煎叆瀵嗛挜</el-button> </el-upload> </div> @@ -157,21 +127,13 @@ <span slot="footer" class="dialog-footer"> <div class="btns"> - <el-button - v-if="!snExpire && versionName != '姝e紡鐗�'" - class="cancel" - @click="activeDialog = false" + <el-button v-if="!snExpire && versionName != '姝e紡鐗�'" class="cancel" @click="activeDialog = false" >缁х画璇曠敤</el-button > - <el-button - class="cancel" - v-if="snExpire && versionName != '姝e紡鐗�'" - @click="$emit('quit')" + <el-button class="cancel" v-if="snExpire && versionName != '姝e紡鐗�'" @click="$emit('quit')" >閫�鍑虹櫥闄� </el-button> - <el-button class="ok" type="primary" @click="activateVersion" - >婵�娲�</el-button - > + <el-button class="ok" type="primary" @click="activateVersion">婵�娲�</el-button> </div> </span> </el-dialog> @@ -191,12 +153,7 @@ </div> <div class="order-list" v-if="orderList.length"> - <div - class="wrap" - style="margin: 0 5px" - v-for="(item, index) in orderList" - :key="index" - > + <div class="wrap" style="margin: 0 5px" v-for="(item, index) in orderList" :key="index"> <div class="order-card" v-for="(prod, i) in item.products" :key="i"> <div class="head"> <el-checkbox v-model="checked" @change="choseProd(item, prod)"> @@ -212,26 +169,18 @@ <div>绯荤粺鐗堟湰锛歿{ prod.edition }}</div> <div>閫氶亾鏁伴噺锛歿{ prod.ChCount }}</div> <div>鎺堟潈鏁伴噺锛歿{ prod.authCount }}</div> - <div> - 璧锋鏈嶅姟鏃堕棿 锛歿{ - startAndEnd(item.createTime, prod.serveYear) - }} - </div> + <div>璧锋鏈嶅姟鏃堕棿 锛歿{ startAndEnd(item.createTime, prod.serveYear) }}</div> </div> </div> </div> </div> <div class="no-order-list" v-else> - {{ - loadingOrders ? "璁㈠崟鍔犺浇涓紝璇风◢鍚�..." : "鎶辨瓑锛屾湭鏌ヨ鍒拌鍗曚俊鎭紒" - }} + {{ loadingOrders ? "璁㈠崟鍔犺浇涓紝璇风◢鍚�..." : "鎶辨瓑锛屾湭鏌ヨ鍒拌鍗曚俊鎭紒" }} </div> <span slot="footer" class="dialog-footer"> <div class="btns"> <el-button class="cancel" @click="$emit('quit')">閫�鍑虹櫥褰�</el-button> - <el-button class="ok" type="primary" @click="activeVerByOrd" - >婵�娲�</el-button - > + <el-button class="ok" type="primary" @click="activeVerByOrd">婵�娲�</el-button> </div> </span> </el-dialog> @@ -239,9 +188,9 @@ </template> <script> -import DFrame from "./DFrame"; -import Safari from "./Safari"; -import { isPhone } from "../../../../scripts/validate.ts"; +import DFrame from "./DFrame" +import Safari from "./Safari" +import { isPhone } from "../../../../scripts/validate.ts" import { getActiveQrCode, getSN, @@ -250,13 +199,13 @@ getSmsCode, loginShopInSmart, getShopOrderList, - activeByOrder, -} from "@/api/system"; + activeByOrder +} from "@/api/system" export default { name: "Desktop", components: { DFrame, - Safari, + Safari }, data() { return { @@ -278,82 +227,80 @@ orderList: [], phone: { phoneNum: "", - verifyCode: "", + verifyCode: "" }, phoneCodeRule: { phoneNum: [{ validator: isPhone, trigger: "blur" }], - verifyCode: [ - { required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "blur" }, - ], - }, - }; + verifyCode: [{ required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "blur" }] + } + } }, created() { - this.validateSn(); + this.validateSn() }, methods: { startAndEnd(createTime, serveYear) { - let year = createTime.split("-")[0]; - let endTime = parseInt(year) + serveYear + createTime.slice(4); - return createTime + " - " + endTime; + let year = createTime.split("-")[0] + let endTime = parseInt(year) + serveYear + createTime.slice(4) + return createTime + " - " + endTime }, activeVerByOrd() { activeByOrder({ token: this.token, activateCode: this.curProd.activateCode, productId: this.curProd.productId, - orderId: this.curOrder.id, + orderId: this.curOrder.id }).then((res) => { if (res.code == 200) { - this.$notify.success("婵�娲绘垚鍔�"); - this.innerDialog = false; - this.versionName = this.getVersionName(res.data.edition); + this.$notify.success("婵�娲绘垚鍔�") + this.innerDialog = false + this.versionName = this.getVersionName(res.data.edition) } else { - this.$notify.error("婵�娲诲け璐�"); + this.$notify.error("婵�娲诲け璐�") } - }); + }) }, validateSn() { getSN().then((res) => { - this.snExpire = res.data.expire; - this.activeDialog = res.data.expire; - this.showFreeVersion = res.data.sn == "" || res.data.expire; - this.versionName = this.getVersionName(res.data.edition); - }); + this.snExpire = res.data.expire + this.activeDialog = res.data.expire + this.showFreeVersion = res.data.sn == "" || res.data.expire + this.versionName = this.getVersionName(res.data.edition) + }) }, getValidStr() { if (this.countdown > 0 && this.countdown <= 60) { - this.countdown--; + this.countdown-- if (this.countdown !== 0) { - this.codeMsg = "閲嶆柊鍙戦��(" + this.countdown + ")"; + this.codeMsg = "閲嶆柊鍙戦��(" + this.countdown + ")" } else { - clearInterval(this.timer); - this.codeMsg = "鑾峰彇楠岃瘉鐮�"; - this.countdown = 60; - this.timer = null; - this.codeDisabled = false; + clearInterval(this.timer) + this.codeMsg = "鑾峰彇楠岃瘉鐮�" + this.countdown = 60 + this.timer = null + this.codeDisabled = false } } }, choseProd(order, prod) { - this.curOrder = order; - this.curProd = prod; + this.curOrder = order + this.curProd = prod }, getVersionName(s) { switch (s) { case "alpha": - return "鍐呮祴鐗�"; + return "鍐呮祴鐗�" case "beta": - return "鍏祴鐗�"; + return "鍏祴鐗�" case "trial": - return "璇曠敤鐗�"; + return "璇曠敤鐗�" case "test": - return "娴嬭瘯鐗�"; + return "娴嬭瘯鐗�" case "official": - return "姝e紡鐗�"; + return "姝e紡鐗�" default: - return "瀹氬埗鐗�"; - break; + return "瀹氬埗鐗�" + break } }, loginShop() { @@ -361,116 +308,116 @@ if (valid) { let param = { phoneNum: this.phone.phoneNum, - verifyCode: this.phone.verifyCode, - }; + verifyCode: this.phone.verifyCode + } loginShopInSmart(param).then((res) => { - this.innerDialog = true; - this.activeDialog = false; + this.innerDialog = true + this.activeDialog = false - this.token = res.data.access_token; + this.token = res.data.access_token getShopOrderList({ token: this.token }) .then((res) => { if (res.code == 200) { - this.orderList = res.data.list; - this.loadingOrders = false; + this.orderList = res.data.list + this.loadingOrders = false } else { - this.$notify.error("鑾峰彇璁㈠崟鍒楄〃澶辫触"); + this.$notify.error("鑾峰彇璁㈠崟鍒楄〃澶辫触") } }) .catch(() => { - this.$notify.error("鑾峰彇璁㈠崟鍒楄〃澶辫触"); - }); - }); + this.$notify.error("鑾峰彇璁㈠崟鍒楄〃澶辫触") + }) + }) } else { - this.nullRule = {}; + this.nullRule = {} } - }); + }) }, cancelLogin() { - this.innerVisible = false; + this.innerVisible = false }, getCode() { - var pattern = /^1[345789]\d{9}$/; + var pattern = /^1[345789]\d{9}$/ if (this.phone.phoneNum == "") { - this.$refs["phoneLogin"].fields[0].validateMessage = "璇疯緭鍏ユ墜鏈哄彿"; - this.$refs["phoneLogin"].fields[0].validateState = "error"; - return; + 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; + 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); + this.codeDisabled = true + this.getValidStr() + this.timer = setInterval(this.getValidStr, 1000) getSmsCode({ phoneNum: this.phone.phoneNum }) .then((res) => { - this.gotCode = true; + this.gotCode = true }) .catch((err) => { - this.$refs["phoneLogin"].fields[0].validateMessage = err.data.msg; - this.$refs["phoneLogin"].fields[0].validateState = "error"; - }); + this.$refs["phoneLogin"].fields[0].validateMessage = err.data.msg + this.$refs["phoneLogin"].fields[0].validateState = "error" + }) } }, activateVersion() { if (this.secrectKey.trim() == "") { - this.$message.warning("璇峰厛濉啓浜у搧瀵嗛挜"); - return; + this.$message.warning("璇峰厛濉啓浜у搧瀵嗛挜") + return } activateVersion({ code: this.secrectKey.trim() }) .then((res) => { if (res.code == 200) { - this.$notify.success("婵�娲绘垚鍔�"); - this.validateSn(); - this.goToSysInfo(); - this.activeDialog = false; + this.$notify.success("婵�娲绘垚鍔�") + this.validateSn() + this.goToSysInfo() + this.activeDialog = false } else { - this.$notify.error(res.msg); + this.$notify.error(res.msg) } }) .catch((err) => { - this.$notify.error(err.msg); - }); + this.$notify.error(err.msg) + }) }, goToSysInfo() { - window.parent.postMessage({ msg: `toVindicate?menu=绯荤粺淇℃伅` }, "*"); + window.parent.postMessage({ msg: `toVindicate?menu=绯荤粺淇℃伅` }, "*") }, gotoActive() { - this.activeDialog = true; + this.activeDialog = true }, uploadKey(params) { - let param = new FormData(); - param.append("code", params.file); + let param = new FormData() + param.append("code", params.file) uploadKey(param).then( (res) => { if (res.code == 200) { - this.$message.success("瀵煎叆鎴愬姛"); - this.secrectKey = res.data; + this.$message.success("瀵煎叆鎴愬姛") + this.secrectKey = res.data } else { - this.$message.error(res.msg); + this.$message.error(res.msg) } }, (err) => { - this.$message.error(err.msg); + this.$message.error(err.msg) } - ); + ) }, onInput(val) { if (this[`input${val}`].length == 4 && val < 5) { - this.$refs[`input${val + 1}`].focus(); + this.$refs[`input${val + 1}`].focus() } if (this[`input${val}`].length == 0 && val > 0) { - this.$refs[`input${val - 1}`].focus(); + this.$refs[`input${val - 1}`].focus() } - }, - }, -}; + } + } +} </script> -<style lang="scss" > +<style lang="scss"> .desktop { width: 100%; height: 100%; @@ -818,4 +765,4 @@ margin-left: 25px; } } -</style> \ No newline at end of file +</style> diff --git a/src/pages/login/index/App.vue b/src/pages/login/index/App.vue index aa517d7..008b455 100644 --- a/src/pages/login/index/App.vue +++ b/src/pages/login/index/App.vue @@ -187,8 +187,10 @@ methods: { loginRobot() { // 瑙f瀽璺敱鍙傛暟锛屽苟缂撳瓨 - let user = this.getQueryVariable("username") - let passwd = this.getQueryVariable("password") + // let user = this.getQueryVariable("username") + // let passwd = this.getQueryVariable("password") + let user = "basic" + let passwd = "basic2019" if (user.length && passwd.length) { sessionStorage.setItem("autoLogin", JSON.stringify({ username: user, passwd: passwd })) diff --git a/src/pages/settings/index/index.vue b/src/pages/settings/index/index.vue index e8eaf50..1f8d7b1 100644 --- a/src/pages/settings/index/index.vue +++ b/src/pages/settings/index/index.vue @@ -31,11 +31,7 @@ @click="openAccount(item, index)" > <div class="touxiang"> - <img - v-if="item.headpic" - :src="`data:image/png;base64,${item.headpic}`" - alt="" - /> + <img v-if="item.headpic" :src="`data:image/png;base64,${item.headpic}`" alt="" /> <span class="user-name">{{ item.username }}</span> </div> <div class="login-tag" v-if="item.id == curUserID"> @@ -44,11 +40,7 @@ </div> </div> <div class="add-account" v-if="curUserRole != '鏅�氱敤鎴�'"> - <i - class="el-icon-circle-plus" - style="font-size: 40px" - @click="openAdd" - ></i> + <i class="el-icon-circle-plus" style="font-size: 40px" @click="openAdd"></i> </div> </div> </div> @@ -58,34 +50,21 @@ :class="activeIndex == 0 ? 'container-right-for-account' : ''" > <div class="account-right" v-if="activeIndex == 0"> - <div - class="account-content" - v-if="inAccountDetail == false && isAddAccount == false" - > + <div class="account-content" v-if="inAccountDetail == false && isAddAccount == false"> <div class="content-top"> - <div - class="touxiang-big" - @mouseenter="showChangePic = true" - @mouseleave="showChangePic = false" - > + <div class="touxiang-big" @mouseenter="showChangePic = true" @mouseleave="showChangePic = false"> <img v-if="activeAccountItem.headpic" :src="`data:image/png;base64,${activeAccountItem.headpic}`" alt="" /> <div class="touxiang-mask" v-show="showChangePic"> - <span class="enable" v-if="!showJPGArr" @click="editHeadPic" - >缂栬緫澶村儚</span - > + <span class="enable" v-if="!showJPGArr" @click="editHeadPic">缂栬緫澶村儚</span> </div> </div> <div class="user-desc"> <div class="user-name"> - <span - class="icon iconfont" - style="font-size: 19px; margin-right: 4px" - ></span - > + <span class="icon iconfont" style="font-size: 19px; margin-right: 4px"></span> <span>{{ activeAccountItem.username }}</span> </div> <div class="user-role"> @@ -93,30 +72,13 @@ </div> <div class="nick-name"> <span class="nick-text">鏄电О锛�</span> - <span v-show="!showInputNickName">{{ - activeAccountItem.nickname - }}</span> - <el-input - size="mini" - v-model="inputNickName" - v-if="showInputNickName" - ></el-input> - <span - v-show="!showInputNickName" - class="icon iconfont edit-icon" - @click="editNickName" - ></span - > - <span - v-show="showInputNickName" - class="icon iconfont clear-icon" - @click="showInputNickName = false" + <span v-show="!showInputNickName">{{ activeAccountItem.nickname }}</span> + <el-input size="mini" v-model="inputNickName" v-if="showInputNickName"></el-input> + <span v-show="!showInputNickName" class="icon iconfont edit-icon" @click="editNickName"></span> + <span v-show="showInputNickName" class="icon iconfont clear-icon" @click="showInputNickName = false" ></span > - <span - v-show="showInputNickName" - class="icon iconfont confirm-icon" - @click="hideInputNick" + <span v-show="showInputNickName" class="icon iconfont confirm-icon" @click="hideInputNick" ></span > </div> @@ -131,12 +93,7 @@ :key="index" @click="pickHeadDefPic(item, index)" > - <img - v-if="item" - :src="`data:image/png;base64,${item.path}`" - alt="" - srcset="" - /> + <img v-if="item" :src="`data:image/png;base64,${item.path}`" alt="" srcset="" /> <div class="img-mask" v-if="selectedPic == index"> <span class="icon iconfont enable"></span> </div> @@ -151,18 +108,10 @@ <div class="item-btn alt-pw-btn" @click="showChangePassword"> 淇敼瀵嗙爜 </div> - <div - class="item-btn del-usr-btn" - v-if="isShowDeleteAccount" - @click="deleteAccount" - > + <div class="item-btn del-usr-btn" v-if="isShowDeleteAccount" @click="deleteAccount"> 鍒犻櫎璐︽埛 </div> - <div - v-if="isShowPermitBtn" - class="item-btn auth-set-btn" - @click="openPermission" - > + <div v-if="isShowPermitBtn" class="item-btn auth-set-btn" @click="openPermission"> 鏉冮檺璁剧疆 </div> </div> @@ -173,39 +122,19 @@ <span class="icon iconfont"></span> <span>淇敼瀵嗙爜</span> </div> - <el-form - :model="passwordForm" - :rules="pwRules" - ref="passwordForm" - class="password-form" - > - <el-form-item - prop="curPassword" - v-if="activeAccountItem.id == curUserID" - > + <el-form :model="passwordForm" :rules="pwRules" ref="passwordForm" class="password-form"> + <el-form-item prop="curPassword" v-if="activeAccountItem.id == curUserID"> <div class="p-title">褰撳墠瀵嗙爜</div> - <el-input - placeholder="蹇呭~" - v-model="passwordForm.curPassword" - show-password - ></el-input> + <el-input placeholder="蹇呭~" v-model="passwordForm.curPassword" show-password></el-input> </el-form-item> <el-form-item prop="newPassword"> <div class="p-title">鏂板瘑鐮�</div> - <el-input - placeholder="蹇呭~" - v-model="passwordForm.newPassword" - show-password - ></el-input> + <el-input placeholder="蹇呭~" v-model="passwordForm.newPassword" show-password></el-input> </el-form-item> <el-form-item prop="confirmPassword"> <div class="p-title">纭瀵嗙爜</div> - <el-input - placeholder="蹇呭~" - v-model="passwordForm.confirmPassword" - show-password - ></el-input> + <el-input placeholder="蹇呭~" v-model="passwordForm.confirmPassword" show-password></el-input> </el-form-item> </el-form> <div class="btns"> @@ -244,68 +173,35 @@ :key="index" @click="pickHeadDefPic(item, index)" > - <img - v-if="item" - :src="`data:image/png;base64,${item.path}`" - alt="" - srcset="" - /> + <img v-if="item" :src="`data:image/png;base64,${item.path}`" alt="" srcset="" /> <div class="img-mask" v-if="selectedPic == index"> <span class="icon iconfont enable"></span> </div> </div> </div> <div class="fill-group"> - <el-form - :model="addForm" - :rules="addRules" - ref="addForm" - class="add-form" - > + <el-form :model="addForm" :rules="addRules" ref="addForm" class="add-form"> <el-form-item prop="userName"> <div class="p-title">鐢ㄦ埛鍚�</div> - <el-input - placeholder="2~10 浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧" - v-model="addForm.userName" - ></el-input> + <el-input placeholder="2~10 浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅彲鍖呭惈姹夊瓧" v-model="addForm.userName"></el-input> </el-form-item> <el-form-item prop="roleId" v-if="curUserRole != '鏅�氱敤鎴�'"> <div class="p-title">瑙掕壊</div> - <el-select - v-model="addForm.roleId" - placeholder="璇烽�夋嫨瑙掕壊" - :popper-append-to-body="false" - > - <el-option - v-for="(item, i) in roleList" - :key="i" - :label="item.name" - :value="item.id" - ></el-option> + <el-select v-model="addForm.roleId" placeholder="璇烽�夋嫨瑙掕壊" :popper-append-to-body="false"> + <el-option v-for="(item, i) in roleList" :key="i" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item prop="nickName"> <div class="p-title">鏄电О</div> - <el-input - placeholder="閫夊~锛�2~10 浣嶅瓧绗�" - v-model="addForm.nickName" - ></el-input> + <el-input placeholder="閫夊~锛�2~10 浣嶅瓧绗�" v-model="addForm.nickName"></el-input> </el-form-item> <el-form-item prop="password"> <div class="p-title">瀵嗙爜</div> - <el-input - placeholder="蹇呭~锛岃嚦灏戜负 6 浣�" - v-model="addForm.password" - show-password - ></el-input> + <el-input placeholder="蹇呭~锛岃嚦灏戜负 6 浣�" v-model="addForm.password" show-password></el-input> </el-form-item> <el-form-item prop="confirmPassword"> <div class="p-title">纭瀵嗙爜</div> - <el-input - placeholder="蹇呭~" - v-model="addForm.confirmPassword" - show-password - ></el-input> + <el-input placeholder="蹇呭~" v-model="addForm.confirmPassword" show-password></el-input> </el-form-item> </el-form> </div> @@ -332,18 +228,10 @@ <div class="adjust-zone"> <div class="two-radio"> - <div - class="radio" - :class="isNtp ? '' : 'highlight-radio'" - @click="isNtp = false" - > + <div class="radio" :class="isNtp ? '' : 'highlight-radio'" @click="isNtp = false"> 鎵嬪姩鏍℃椂 </div> - <div - class="radio" - :class="isNtp ? 'highlight-radio' : ''" - @click="isNtp = true" - > + <div class="radio" :class="isNtp ? 'highlight-radio' : ''" @click="isNtp = true"> NTP鏍℃椂 </div> </div> @@ -366,14 +254,8 @@ /> </div> <div class="control"> - <span class="icon iconfont" @click="plusOne('hrs')" - ></span - > - <span - class="icon iconfont fanzhuan" - @click="minusOne('hrs')" - ></span - > + <span class="icon iconfont" @click="plusOne('hrs')"></span> + <span class="icon iconfont fanzhuan" @click="minusOne('hrs')"></span> </div> </div> <div class="sep">:</div> @@ -392,14 +274,8 @@ /> </div> <div class="control"> - <span class="icon iconfont" @click="plusOne('min')" - ></span - > - <span - class="icon iconfont fanzhuan" - @click="minusOne('min')" - ></span - > + <span class="icon iconfont" @click="plusOne('min')"></span> + <span class="icon iconfont fanzhuan" @click="minusOne('min')"></span> </div> </div> <div class="sep">:</div> @@ -418,14 +294,8 @@ /> </div> <div class="control"> - <span class="icon iconfont" @click="plusOne('sec')" - ></span - > - <span - class="icon iconfont fanzhuan" - @click="minusOne('sec')" - ></span - > + <span class="icon iconfont" @click="plusOne('sec')"></span> + <span class="icon iconfont fanzhuan" @click="minusOne('sec')"></span> </div> </div> </div> @@ -502,21 +372,14 @@ </div> <div class="manual-time"> - <switchBar - :barName="`鍚屾鏈绠楁満鏃堕棿`" - @switchChange="syncBrowser" - :value="isSyncBrowser" - ></switchBar> + <switchBar :barName="`鍚屾鏈绠楁満鏃堕棿`" @switchChange="syncBrowser" :value="isSyncBrowser"></switchBar> </div> </div> <div class="ntp-wrap" v-if="isNtp"> <el-form> <el-form-item label="鏈嶅姟鍣ㄥ湴鍧�"> - <ipInput - :ip="ntpServer" - @on-blur="ntpServer = arguments[0]" - ></ipInput> + <ipInput :ip="ntpServer" @on-blur="ntpServer = arguments[0]"></ipInput> </el-form-item> <el-form-item label="鏍℃椂鏃堕棿闂撮殧"> @@ -531,12 +394,7 @@ ></el-input-number> <span class="desc-min">鍒嗛挓</span> - <el-button - type="text" - @click="testNTP" - :loading="ntpTestLoading" - >娴嬭瘯</el-button - > + <el-button type="text" @click="testNTP" :loading="ntpTestLoading">娴嬭瘯</el-button> </div> </el-form-item> </el-form> @@ -551,41 +409,16 @@ </div> </div> - <clusterManagement - v-if="activeIndex == 2" - ref="view_2" - style="width: 100%" - ></clusterManagement> - <netSettings - ref="view_3" - v-if="activeIndex == 3" - style="width: 100%" - ></netSettings> - <keyboardLanguage - ref="view_4" - v-if="activeIndex == 4" - style="width: 100%" - ></keyboardLanguage> - <generalSettings - ref="view_5" - v-if="activeIndex == 5" - style="width: 100%" - ></generalSettings> - <deviceInfo - v-if="activeIndex == 6" - style="width: 100%" - ref="view_6" - ></deviceInfo> - <Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7"> - </Authorization> + <clusterManagement v-if="activeIndex == 2" ref="view_2" style="width: 100%"></clusterManagement> + <netSettings ref="view_3" v-if="activeIndex == 3" style="width: 100%"></netSettings> + <keyboardLanguage ref="view_4" v-if="activeIndex == 4" style="width: 100%"></keyboardLanguage> + <generalSettings ref="view_5" v-if="activeIndex == 5" style="width: 100%"></generalSettings> + <deviceInfo v-if="activeIndex == 6" style="width: 100%" ref="view_6"></deviceInfo> + <Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7"> </Authorization> <WebManage v-if="activeIndex == 8"></WebManage> </div> <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''"> - <div - class="search-box" - :class="showRecomand ? 'border-change' : ''" - @click.stop - > + <div class="search-box" :class="showRecomand ? 'border-change' : ''" @click.stop> <el-input class="search-input" placeholder="鏌ユ壘璁剧疆" @@ -598,17 +431,10 @@ </el-input> <div class="search-res" v-if="showRecomand"> - <div - class="res-bar" - v-for="(item, index) in searchArrForShow" - :key="index" - @click="pickQuick(item.addr)" - > + <div class="res-bar" v-for="(item, index) in searchArrForShow" :key="index" @click="pickQuick(item.addr)"> {{ item.name }} </div> - <div class="no-res-bar" v-if="searchArrForShow.length == 0"> - 娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋� - </div> + <div class="no-res-bar" v-if="searchArrForShow.length == 0">娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋�</div> </div> <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div> </div> @@ -631,7 +457,7 @@ </template> <script> -import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system"; +import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system" import { addUser, getUsers, @@ -641,18 +467,18 @@ deleteUser, getUserMenus, defHeadPics, - getRoles, -} from "@/api/user"; -import switchBar from "../components/switchBar"; -import ipInput from "../components/IPInput"; -import clusterManagement from "../views/clusterManagement"; -import netSettings from "../views/NetSettings"; -import deviceInfo from "../views/deviceInfo"; -import keyboardLanguage from "../views/keyboardLanguage"; -import generalSettings from "../views/generalSettings"; -import Authorization from "../views/Authorization"; -import WebManage from "@/pages/settings/components/WebManage"; -import { pad0, getUrlKey } from "@/api/utils"; + getRoles +} from "@/api/user" +import switchBar from "../components/switchBar" +import ipInput from "../components/IPInput" +import clusterManagement from "../views/clusterManagement" +import netSettings from "../views/NetSettings" +import deviceInfo from "../views/deviceInfo" +import keyboardLanguage from "../views/keyboardLanguage" +import generalSettings from "../views/generalSettings" +import Authorization from "../views/Authorization" +import WebManage from "@/pages/settings/components/WebManage" +import { pad0, getUrlKey } from "@/api/utils" export default { name: "settings", @@ -665,41 +491,41 @@ generalSettings, deviceInfo, Authorization, - WebManage, + WebManage }, data() { var v2 = (rule, value, callback) => { if (value === "") { - callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")) } else if (value !== this.addForm.password) { - callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")); + callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")) } else { - callback(); + callback() } - }; + } var v4 = (rule, value, callback) => { if (value === "") { - callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")) } else if (value !== this.passwordForm.newPassword) { - callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")); + callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")) } else { - callback(); + callback() } - }; + } const v1 = (rule, value, callback) => { if (value.trim() === "") { - callback(new Error("璇疯緭鍏ョ敤鎴峰悕")); - this.addForm.userName = ""; + callback(new Error("璇疯緭鍏ョ敤鎴峰悕")) + this.addForm.userName = "" } else if (isNaN(Number(value[0])) == false) { - callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶�")); + callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶�")) } else if (/[\u4E00-\u9FA5]/g.test(value)) { - callback(new Error("涓嶈兘杈撳叆姹夊瓧")); + callback(new Error("涓嶈兘杈撳叆姹夊瓧")) } else if (value.length < 2 || value.length > 10) { - callback(new Error("闀垮害涓� 2 - 10 涓瓧绗�")); + callback(new Error("闀垮害涓� 2 - 10 涓瓧绗�")) } else { - callback(); + callback() } - }; + } return { showChangePic: false, syncYrs: "", @@ -733,7 +559,7 @@ { name: "鎵嬪姩鏍℃椂", addr: [1, 1] }, { name: "閿洏鍜岃瑷�", addr: [4] }, { name: "绯荤粺璇█", addr: [4, 0] }, - { name: "閿洏绠$悊", addr: [4, 1] }, + { name: "閿洏绠$悊", addr: [4, 1] } ], inputNickName: "", showHourInput: false, @@ -757,69 +583,69 @@ settime: "", weekday: "", menuArr: [ - { - name: "璐︽埛", - icon: "\ue6de", - imgUrl: "/images/settings/璐︽埛-钃�.png", - blackIcon: "/images/settings/榛戣壊涓�绾con/璐︽埛.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/璐︽埛.png", - }, + // { + // name: "璐︽埛", + // icon: "\ue6de", + // imgUrl: "/images/settings/璐︽埛-钃�.png", + // blackIcon: "/images/settings/榛戣壊涓�绾con/璐︽埛.png", + // whiteIcon: "/images/settings/鐧借壊涓�绾con/璐︽埛.png", + // }, { name: "鏃ユ湡鏃堕棿", icon: "\ue6ff", imgUrl: "/images/settings/鏃堕棿鏃ユ湡.png", blackIcon: "/images/settings/榛戣壊涓�绾con/鏃堕棿淇℃伅.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/鏃堕棿鏃ユ湡.png", + whiteIcon: "/images/settings/鐧借壊涓�绾con/鏃堕棿鏃ユ湡.png" }, { name: "闆嗙兢绠$悊", icon: "\ue6df", imgUrl: "/images/settings/闆嗙兢绠$悊.png", blackIcon: "/images/settings/榛戣壊涓�绾con/闆嗙兢绠$悊.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/闆嗙兢绠$悊.png", + whiteIcon: "/images/settings/鐧借壊涓�绾con/闆嗙兢绠$悊.png" }, { name: "缃戠粶璁剧疆", icon: "\ue6dd", imgUrl: "/images/settings/缃戠粶璁剧疆.png", blackIcon: "/images/settings/榛戣壊涓�绾con/缃戠粶璁剧疆.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/缃戠粶璁剧疆.png", + whiteIcon: "/images/settings/鐧借壊涓�绾con/缃戠粶璁剧疆.png" }, { name: "閿洏鍜岃瑷�", icon: "\ue6dc", imgUrl: "/images/settings/閿洏鍜岃瑷�.png", blackIcon: "/images/settings/榛戣壊涓�绾con/閿洏鍜岃瑷�.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/閿洏鍜岃瑷�.png", + whiteIcon: "/images/settings/鐧借壊涓�绾con/閿洏鍜岃瑷�.png" }, { name: "閫氱敤璁剧疆", icon: "\ue6db", imgUrl: "/images/settings/閫氱敤璁剧疆.png", blackIcon: "/images/settings/榛戣壊涓�绾con/閫氱敤璁剧疆.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/閫氱敤璁剧疆.png", + whiteIcon: "/images/settings/鐧借壊涓�绾con/閫氱敤璁剧疆.png" }, - { - name: "璁惧淇℃伅", - icon: "\ue756", - imgUrl: "/images/settings/璁惧淇℃伅.png", - blackIcon: "/images/settings/榛戣壊涓�绾con/璁惧淇℃伅.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/璁惧淇℃伅.png", - }, + // { + // name: "璁惧淇℃伅", + // icon: "\ue756", + // imgUrl: "/images/settings/璁惧淇℃伅.png", + // blackIcon: "/images/settings/榛戣壊涓�绾con/璁惧淇℃伅.png", + // whiteIcon: "/images/settings/鐧借壊涓�绾con/璁惧淇℃伅.png", + // }, { name: "鎺堟潈绠$悊", icon: "\ue7e9;", imgUrl: "/images/settings/鎺堟潈绠$悊.png", blackIcon: "/images/settings/榛戣壊涓�绾con/鎺堟潈绠$悊.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/鎺堟潈绠$悊.png", + whiteIcon: "/images/settings/鐧借壊涓�绾con/鎺堟潈绠$悊.png" }, { name: "鍩熷悕绠$悊", icon: "\ue6db", imgUrl: "/images/settings/閫氱敤璁剧疆.png", blackIcon: "/images/settings/榛戣壊涓�绾con/閫氱敤璁剧疆.png", - whiteIcon: "/images/settings/鐧借壊涓�绾con/閫氱敤璁剧疆.png", - }, + whiteIcon: "/images/settings/鐧借壊涓�绾con/閫氱敤璁剧疆.png" + } ], accountArr: [], jpgArr: [], @@ -837,7 +663,7 @@ passwordForm: { curPassword: "", newPassword: "", - confirmPassword: "", + confirmPassword: "" }, activeAccountIndex: 0, sysMenus: [], @@ -848,489 +674,482 @@ password: "", headpic: "", confirmPassword: "", - roleId: "", + roleId: "" }, props: { - label: "name", + label: "name" }, addRules: { userName: [{ validator: v1, trigger: "blur" }], - nickName: [ - { min: 2, max: 10, message: "闀垮害涓� 2 - 10 浣�", trigger: "blur" }, - ], + nickName: [{ min: 2, max: 10, message: "闀垮害涓� 2 - 10 浣�", trigger: "blur" }], password: [ { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, - { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" }, + { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" } ], - confirmPassword: [{ validator: v2, trigger: "blur" }], + confirmPassword: [{ validator: v2, trigger: "blur" }] }, pwRules: { curPassword: [ { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, - { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" }, + { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" } ], newPassword: [ { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, - { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" }, + { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" } ], - confirmPassword: [{ validator: v4, trigger: "blur" }], + confirmPassword: [{ validator: v4, trigger: "blur" }] }, - account_list_scroll: false, - }; + account_list_scroll: false + } }, created() { - let color = localStorage.getItem("--colorCard"); + let color = localStorage.getItem("--colorCard") if (color) { - document.documentElement.style.setProperty("--colorCard", `${color}`); + document.documentElement.style.setProperty("--colorCard", `${color}`) } }, beforeDestroy() { - clearTimeout(this.clockTimer); - clearInterval(this.browserTimer); + clearTimeout(this.clockTimer) + clearInterval(this.browserTimer) }, mounted() { // 杩斿洖鎸夐挳鍥炶皟 window.addEventListener("message", (e) => { if (e.data.msg === "杩斿洖绯荤粺璁剧疆") { - this.showWelcome = true; + this.showWelcome = true } - }); - const menu = getUrlKey("menu"); + }) + const menu = getUrlKey("menu") if (menu) { - this.showWelcome = false; - this.activeIndex = this.menuArr.findIndex((x) => x.name == menu); + this.showWelcome = false + this.activeIndex = this.menuArr.findIndex((x) => x.name == menu) this.$nextTick(() => { - this.$refs.view_3.openRight(2); - }); + this.$refs.view_3.openRight(2) + }) } - this.fetchUserList(); - this.fetchDefHeadPic(); - const e = this.$refs.curPage; + this.fetchUserList() + this.fetchDefHeadPic() + const e = this.$refs.curPage if (e) { e.addEventListener("click", () => { if (this.showRecomand) { - this.showRecomand = false; + this.showRecomand = false } - }); + }) } }, methods: { fetchDefHeadPic() { defHeadPics().then((res) => { - this.jpgArr = res.data; - }); + this.jpgArr = res.data + }) }, fetchUserList(showLast = false) { getUsers().then((res) => { - this.accountArr = res.data; + this.accountArr = res.data if (this.accountArr.length) { - this.activeAccountItem = this.accountArr[this.activeAccountIndex]; + this.activeAccountItem = this.accountArr[this.activeAccountIndex] } if (showLast) { - this.cancelAdd(); - const lastIdx = this.accountArr.length - 1; - this.openAccount(this.accountArr[lastIdx], lastIdx); + this.cancelAdd() + const lastIdx = this.accountArr.length - 1 + this.openAccount(this.accountArr[lastIdx], lastIdx) } - }); + }) }, confirmChangePic() { updateUser({ id: this.activeAccountItem.id, - headpic: this.addForm.headpic, + headpic: this.addForm.headpic }).then((res) => { if (res.success) { - this.$message.success(res.msg); - this.fetchUserList(); - this.cacelChoosePic(); + this.$message.success(res.msg) + this.fetchUserList() + this.cacelChoosePic() } - }); + }) }, checkMonthInput() { - this.inputMonth = this.inputMonth.replace(/[^\d]/g, ""); - if (this.inputMonth.length > 2) - this.inputMonth = this.inputMonth.slice(0, 2); + this.inputMonth = this.inputMonth.replace(/[^\d]/g, "") + if (this.inputMonth.length > 2) this.inputMonth = this.inputMonth.slice(0, 2) if (+this.inputMonth > 12) { - this.inputMonth = "12"; + this.inputMonth = "12" } }, checkDayInput() { - this.inputDay = this.inputDay.replace(/[^\d]/g, ""); + this.inputDay = this.inputDay.replace(/[^\d]/g, "") if (this.inputDay.length > 2) { - this.inputDay = this.inputDay.slice(0, 2); + this.inputDay = this.inputDay.slice(0, 2) } - const max = this.getMaxDayOfMonth(); + const max = this.getMaxDayOfMonth() if (+this.inputDay > max) { - this.inputDay = max + ""; + this.inputDay = max + "" } }, editNickName() { - this.showInputNickName = true; - this.inputNickName = this.activeAccountItem.nickname; + this.showInputNickName = true + this.inputNickName = this.activeAccountItem.nickname }, hideInputNick() { if (this.inputNickName == this.activeAccountItem.nickname) { - this.showInputNickName = false; - return; + this.showInputNickName = false + return } updateUser({ id: this.activeAccountItem.id, - nickname: this.inputNickName, + nickname: this.inputNickName }).then((res) => { - this.activeAccountItem.nickname = this.inputNickName; - this.$message.success(res.msg); - this.fetchUserList(true); - this.showInputNickName = false; - }); + this.activeAccountItem.nickname = this.inputNickName + this.$message.success(res.msg) + this.fetchUserList(true) + this.showInputNickName = false + }) }, openAccount(item, i) { - this.showInputNickName = false; - this.activeAccountItem = item; - this.activeAccountIndex = i; - this.isChangePw = false; - this.inAccountDetail = false; - this.cancelSet(); - this.inAccountDetail = false; - this.isAddAccount = false; - this.selectedPic = null; - this.cacelChoosePic(); - this.fetchMenu(); + this.showInputNickName = false + this.activeAccountItem = item + this.activeAccountIndex = i + this.isChangePw = false + this.inAccountDetail = false + this.cancelSet() + this.inAccountDetail = false + this.isAddAccount = false + this.selectedPic = null + this.cacelChoosePic() + this.fetchMenu() }, minusOne(typ) { - this.isSyncBrowser = false; - this.syncBrowser(false); - let num; + this.isSyncBrowser = false + this.syncBrowser(false) + let num switch (typ) { case "hrs": - num = +this.syncHour - 1; + num = +this.syncHour - 1 if (num == -1) { - num = 23; + num = 23 } - this.syncHour = pad0(+num); - break; + this.syncHour = pad0(+num) + break case "min": - num = +this.syncMin - 1; + num = +this.syncMin - 1 if (num == -1) { - num = 59; + num = 59 } - this.syncMin = pad0(+num); - break; + this.syncMin = pad0(+num) + break case "sec": - num = +this.syncSec + 1; + num = +this.syncSec + 1 if (num == -1) { - num = 59; + num = 59 } - this.syncSec = pad0(+num); - break; + this.syncSec = pad0(+num) + break case "yrs": - num = +this.syncYrs - 1; - this.syncYrs = pad0(+num); - break; + num = +this.syncYrs - 1 + this.syncYrs = pad0(+num) + break case "mth": - num = +this.syncMonth - 1; + num = +this.syncMonth - 1 if (num == 0) { - num = 12; - this.minusOne("yrs"); + num = 12 + this.minusOne("yrs") } - this.syncMonth = pad0(+num); + this.syncMonth = pad0(+num) if (+this.syncDay > this.getMaxDayOfMonth()) { - this.minusOne("day"); + this.minusOne("day") } - break; + break case "day": - num = +this.syncDay - 1; + num = +this.syncDay - 1 if (num == 0) { - num = this.getMaxDayOfMonth(); + num = this.getMaxDayOfMonth() } - this.syncDay = pad0(+num); - break; + this.syncDay = pad0(+num) + break default: - break; + break } }, getMaxDayOfMonth() { - return new Date(+this.syncYrs, +this.syncMonth, 0).getDate(); + return new Date(+this.syncYrs, +this.syncMonth, 0).getDate() }, fatherChange(item) { item.children.forEach((x) => { - x.selected = item.selected; - }); + x.selected = item.selected + }) }, childrenChange(item) { - let SomeOneSelected = item.children.some((x) => x.selected == true); - item.selected = SomeOneSelected; + let SomeOneSelected = item.children.some((x) => x.selected == true) + item.selected = SomeOneSelected }, plusOne(typ) { - this.isSyncBrowser = false; - this.syncBrowser(false); - let num; + this.isSyncBrowser = false + this.syncBrowser(false) + let num switch (typ) { case "hrs": - num = +this.syncHour + 1; + num = +this.syncHour + 1 if (num == 24) { - num = 0; + num = 0 } - this.syncHour = pad0(+num); - break; + this.syncHour = pad0(+num) + break case "min": - num = +this.syncMin + 1; + num = +this.syncMin + 1 if (num == 60) { - num = 0; + num = 0 } - this.syncMin = pad0(+num); - break; + this.syncMin = pad0(+num) + break case "sec": - num = +this.syncSec + 1; + num = +this.syncSec + 1 if (num == 60) { - num = 0; + num = 0 } - this.syncSec = pad0(+num); - break; + this.syncSec = pad0(+num) + break case "yrs": - num = +this.syncYrs + 1; - this.syncYrs = pad0(+num); - break; + num = +this.syncYrs + 1 + this.syncYrs = pad0(+num) + break case "mth": - num = +this.syncMonth + 1; + num = +this.syncMonth + 1 if (num == 13) { - num = 1; + num = 1 } - this.syncMonth = pad0(+num); + this.syncMonth = pad0(+num) if (+this.syncDay > this.getMaxDayOfMonth()) { - this.minusOne("day"); + this.minusOne("day") } - break; + break case "day": - num = +this.syncDay + 1; + num = +this.syncDay + 1 if (num > this.getMaxDayOfMonth()) { - num = 1; + num = 1 } - this.syncDay = pad0(+num); - break; + this.syncDay = pad0(+num) + break default: - break; + break } }, editHeadPic() { - this.showJPGArr = true; + this.showJPGArr = true this.jpgArr.forEach((item, index) => { if (this.activeAccountItem.headpic == item.path) { - this.selectedPic = index; + this.selectedPic = index } - }); + }) }, submitClock() { if (this.isNtp) { if (this.ntpServer === "" || this.ntpServer === "...") { - this.$notify.error("NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖"); - return false; + this.$notify.error("NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖") + return false } else if (this.timeInterval === "") { - this.timeInterval = 1; + this.timeInterval = 1 } } else if (this.isSyncBrowser) { if (this.settime === "") { - this.$notify.error("璁剧疆鏃堕棿涓嶈兘涓虹┖"); - return false; + this.$notify.error("璁剧疆鏃堕棿涓嶈兘涓虹┖") + return false } } else { - this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`; + this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}` } - const now = new Date().getTime(); + const now = new Date().getTime() if (new Date(this.settime).getTime() > now) { - this.$message.warning( - "璁剧疆鐨勬椂闂翠笉鑳芥櫄浜庡綋鍓嶆椂闂�: " + this.formatTime(now, "Y-M-D h:m:s") - ); - return; + this.$message.warning("璁剧疆鐨勬椂闂翠笉鑳芥櫄浜庡綋鍓嶆椂闂�: " + this.formatTime(now, "Y-M-D h:m:s")) + return } saveClockInfo({ timeZone: this.timezone, ntp: this.isNtp, ntpServer: this.ntpServer, interval: this.timeInterval, - newTime: this.settime, + newTime: this.settime }).then( (rsp) => { if (rsp && rsp.success) { - this.$notify.success("璁剧疆鎴愬姛"); + this.$notify.success("璁剧疆鎴愬姛") } - this.initClockConf(); + this.initClockConf() }, (err) => { - this.$notify.error("璁剧疆澶辫触 " + err.msg); + this.$notify.error("璁剧疆澶辫触 " + err.msg) } - ); + ) }, saveAuth() { updataUser({ id: this.activeAccountItem.id, - menuIds: this.$refs.treeMenus.getCheckedKeys(), + menuIds: this.$refs.treeMenus.getCheckedKeys() }).then((res) => { if (res.success) { - this.$message.success(res.msg); - this.cancelSet(); + this.$message.success(res.msg) + this.cancelSet() } - }); + }) }, formatTime(timestamp, format) { const formatNumber = (n) => { - n = n + ""; - return n[1] ? n : "0" + n; - }; - var formateArr = ["Y", "M", "D", "h", "m", "s"]; - var returnArr = []; - var date = new Date(timestamp); - returnArr.push(date.getFullYear()); - returnArr.push(formatNumber(date.getMonth() + 1)); - returnArr.push(formatNumber(date.getDate())); - returnArr.push(formatNumber(date.getHours())); - returnArr.push(formatNumber(date.getMinutes())); - returnArr.push(formatNumber(date.getSeconds())); - for (var i in returnArr) { - format = format.replace(formateArr[i], returnArr[i]); + n = n + "" + return n[1] ? n : "0" + n } - return format; + var formateArr = ["Y", "M", "D", "h", "m", "s"] + var returnArr = [] + var date = new Date(timestamp) + returnArr.push(date.getFullYear()) + returnArr.push(formatNumber(date.getMonth() + 1)) + returnArr.push(formatNumber(date.getDate())) + returnArr.push(formatNumber(date.getHours())) + returnArr.push(formatNumber(date.getMinutes())) + returnArr.push(formatNumber(date.getSeconds())) + for (var i in returnArr) { + format = format.replace(formateArr[i], returnArr[i]) + } + return format }, initClockConf(ntpTest = false) { getClockInfo().then((rsp) => { if (rsp && rsp.success) { - this.timezone = rsp.data.time_zone; + this.timezone = rsp.data.time_zone if (!ntpTest) { - this.isNtp = rsp.data.ntp; + this.isNtp = rsp.data.ntp } if (rsp.data.ntp) { - this.ntpServer = rsp.data.ntp_server; - this.timeInterval = rsp.data.interval; + this.ntpServer = rsp.data.ntp_server + this.timeInterval = rsp.data.interval } - this.timestamp = rsp.data.local_time; - this.weekday = - "鏄熸湡" + - "鏃ヤ竴浜屼笁鍥涗簲鍏�".charAt(new Date(+this.timestamp * 1000).getDay()); + this.timestamp = rsp.data.local_time + this.weekday = "鏄熸湡" + "鏃ヤ竴浜屼笁鍥涗簲鍏�".charAt(new Date(+this.timestamp * 1000).getDay()) if (this.clockTimer === null) { - this.runClock(); - if (!this.isNtp) this.parseTime(); + this.runClock() + if (!this.isNtp) this.parseTime() } } - }); + }) }, openMenu(i) { - this.activeIndex = i; + this.activeIndex = i if (this.activeIndex == 1) { - this.initClockConf(); + this.initClockConf() } }, openWelcome(i) { - this.showWelcome = false; - this.openMenu(i); + this.showWelcome = false + this.openMenu(i) }, showInput(typ) { - this[`show${typ}Input`] = true; + this[`show${typ}Input`] = true this.$nextTick(() => { - this.$refs[`ipt${typ}`].focus(); - }); + this.$refs[`ipt${typ}`].focus() + }) }, hideInput(typ) { if (this[`input${typ}`]) { - this[`sync${typ}`] = pad0(+this[`input${typ}`]); + this[`sync${typ}`] = pad0(+this[`input${typ}`]) } - this[`show${typ}Input`] = false; - this[`input${typ}`] = ""; + this[`show${typ}Input`] = false + this[`input${typ}`] = "" if (typ == "Month") { - const max = this.getMaxDayOfMonth(); + const max = this.getMaxDayOfMonth() if (+this.syncDay > max) { - this.syncDay = max + ""; + this.syncDay = max + "" } } }, cancelSetTime() { - this.parseTime(); - this.ntpServer = "..."; - this.timeInterval = 10; + this.parseTime() + this.ntpServer = "..." + this.timeInterval = 10 }, syncBrowser(enable) { - this.isSyncBrowser = enable; + this.isSyncBrowser = enable if (!enable) { - clearInterval(this.browserTimer); + clearInterval(this.browserTimer) } else { this.browserTimer = setInterval(() => { - this.settime = this.formatTime(new Date().getTime(), "Y-M-D h:m:s"); - let [arr1, arr2] = this.settime.split(" "); - [this.syncYrs, this.syncMonth, this.syncDay] = arr1.split("-"); - [this.syncHour, this.syncMin, this.syncSec] = arr2.split(":"); - }, 1000); + this.settime = this.formatTime(new Date().getTime(), "Y-M-D h:m:s") + let [arr1, arr2] = this.settime.split(" ") + ;[this.syncYrs, this.syncMonth, this.syncDay] = arr1.split("-") + ;[this.syncHour, this.syncMin, this.syncSec] = arr2.split(":") + }, 1000) } }, openAdd() { - this.inAccountDetail = false; - this.isAddAccount = true; - this.selectedPic = 0; - this.addForm.headpic = this.jpgArr[0].path; + this.inAccountDetail = false + this.isAddAccount = true + this.selectedPic = 0 + this.addForm.headpic = this.jpgArr[0].path getRoles().then((res) => { if (res.success) { - this.roleList = res.data; + this.roleList = res.data } - }); + }) }, cancelAdd() { - this.inAccountDetail = false; - this.isAddAccount = false; - this.$refs["addForm"].resetFields(); - this.selectedPic = null; + this.inAccountDetail = false + this.isAddAccount = false + this.$refs["addForm"].resetFields() + this.selectedPic = null }, cancelPassword() { - this.isChangePw = false; - this.inAccountDetail = false; - this.$refs["passwordForm"].resetFields(); + this.isChangePw = false + this.inAccountDetail = false + this.$refs["passwordForm"].resetFields() }, pickQuick(addr) { if (addr.length == 1) { - this.openWelcome(addr[0]); + this.openWelcome(addr[0]) } else { - this.openWelcome(addr[0]); + this.openWelcome(addr[0]) this.$nextTick(() => { if (addr[0] == 1) { - return; + return } - this.$refs[`view_${addr[0]}`].openRight(addr[1]); - }); + this.$refs[`view_${addr[0]}`].openRight(addr[1]) + }) } }, cacelChoosePic() { - this.addForm.headpic = ""; - this.showChangePic = false; - this.selectedPic = null; - this.showJPGArr = false; + this.addForm.headpic = "" + this.showChangePic = false + this.selectedPic = null + this.showJPGArr = false }, SaveNewPassword(formName) { - let data; + let data this.$refs[formName].validate((valid) => { if (valid) { if (this.passwordForm.curPassword == "") { data = { userId: this.activeAccountItem.id, oldPwd: "", - newPwd: this.passwordForm.newPassword, - }; + newPwd: this.passwordForm.newPassword + } } else { data = { oldPwd: this.passwordForm.curPassword, - newPwd: this.passwordForm.newPassword, - }; + newPwd: this.passwordForm.newPassword + } } updatePassword(data).then( (res) => { if (res.success) { - this.$message.success("瀵嗙爜" + res.msg); + this.$message.success("瀵嗙爜" + res.msg) setTimeout(() => { - this.cancelPassword(); - }, 1000); + this.cancelPassword() + }, 1000) } }, (err) => { - this.$message.error("淇濆瓨澶辫触锛�" + err.msg); + this.$message.error("淇濆瓨澶辫触锛�" + err.msg) } - ); + ) } - }); + }) }, saveAddAccount(formName) { this.$refs[formName].validate((valid) => { @@ -1340,189 +1159,183 @@ password: this.addForm.password, nickname: this.addForm.nickName, headpic: this.addForm.headpic, - roleId: this.addForm.roleId, - }; + roleId: this.addForm.roleId + } addUser(data).then( (res) => { - this.$message.success(res.data); - this.fetchUserList(true); + this.$message.success(res.data) + this.fetchUserList(true) }, (err) => { - this.$message.error("淇濆瓨澶辫触锛�" + err.msg); + this.$message.error("淇濆瓨澶辫触锛�" + err.msg) } - ); + ) } else { - return false; + return false } - }); + }) }, pickHeadDefPic(item, i) { if (this.selectedPic == i) { - this.selectedPic = null; - this.addForm.headpic = ""; - return; + this.selectedPic = null + this.addForm.headpic = "" + return } - this.addForm.headpic = item.path; - this.selectedPic = i; + this.addForm.headpic = item.path + this.selectedPic = i }, testNTP() { - this.ntpTestLoading = true; + this.ntpTestLoading = true testNTPserver({ server: this.ntpServer }) .then((rsp) => { if (rsp && rsp.success) { this.$notify({ type: "success", - message: "鏃堕棿鍚屾鎴愬姛", - }); + message: "鏃堕棿鍚屾鎴愬姛" + }) } else { this.$notify({ type: "error", - message: "鏃堕棿鍚屾澶辫触", - }); + message: "鏃堕棿鍚屾澶辫触" + }) } - this.ntpTestLoading = false; - this.initClockConf(true); + this.ntpTestLoading = false + this.initClockConf(true) }) .catch((err) => { this.$notify({ type: "error", - message: "鏃堕棿鍚屾澶辫触,璇锋鏌ユ湇鍔″櫒ip", - }); - this.ntpTestLoading = false; - }); + message: "鏃堕棿鍚屾澶辫触,璇锋鏌ユ湇鍔″櫒ip" + }) + this.ntpTestLoading = false + }) }, cancelSet() { - this.isSetPermission = false; - this.inAccountDetail = false; - this.sysMenus = []; + this.isSetPermission = false + this.inAccountDetail = false + this.sysMenus = [] }, showChangePassword() { - this.isChangePw = true; - this.inAccountDetail = true; + this.isChangePw = true + this.inAccountDetail = true }, runClock() { - const str = this.formatTime(++this.timestamp * 1000, "Y-M-D h:m:s"); - [this.equipmentDate, this.equipmentTime] = str.split(" "); + const str = this.formatTime(++this.timestamp * 1000, "Y-M-D h:m:s") + ;[this.equipmentDate, this.equipmentTime] = str.split(" ") this.clockTimer = setTimeout(() => { - this.runClock(); - }, 1000); + this.runClock() + }, 1000) }, deleteAccount() { - const h = this.$createElement; + const h = this.$createElement this.$msgbox({ title: "", message: h( "div", { - style: - "display: flex; flex-direction: column; justify-content: center; align-items: center;", + style: "display: flex; flex-direction: column; justify-content: center; align-items: center;" }, [ h("span", { class: "icon iconfont warn-icon" }, "\ue71c"), h("span", { class: "warn-title" }, "鍒犻櫎璐︽埛"), - h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄よ处鎴凤紵"), + h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄よ处鎴凤紵") ] ), showCancelButton: true, showClose: true, confirmButtonText: "纭畾", cancelButtonText: "鍙栨秷", - customClass: "del-account-message-box", + customClass: "del-account-message-box" }) .then(() => { let obj = { - ids: [this.activeAccountItem.id], - }; + ids: [this.activeAccountItem.id] + } deleteUser(obj).then((res) => { if (res.success) { - this.fetchUserList(); - this.$message.success("鍒犻櫎鎴愬姛!"); + this.fetchUserList() + this.$message.success("鍒犻櫎鎴愬姛!") } else { - this.$message.error("鍒犻櫎澶辫触"); + this.$message.error("鍒犻櫎澶辫触") } - }); + }) }) - .catch(() => {}); + .catch(() => {}) }, fetchMenu() { getUserMenus({ - userId: this.activeAccountItem.id, + userId: this.activeAccountItem.id }).then((res) => { if (res && res.success) { - this.sysMenus = res.data; - let arr = []; - this.drawChecked(this.sysMenus, arr); - this.checkedArr = arr; + this.sysMenus = res.data + let arr = [] + this.drawChecked(this.sysMenus, arr) + this.checkedArr = arr } - }); + }) }, drawChecked(arr, res) { for (const item of arr) { - if (item.selected && !item.children) res.push(item.id); - if (item.children) this.drawChecked(item.children, res); + if (item.selected && !item.children) res.push(item.id) + if (item.children) this.drawChecked(item.children, res) } }, openPermission() { - this.inAccountDetail = true; - this.isSetPermission = true; + this.inAccountDetail = true + this.isSetPermission = true if (this.sysMenus.length == 0) { - this.fetchMenu(); + this.fetchMenu() } }, parseTime() { - [this.syncYrs, this.syncMonth, this.syncDay] = - this.equipmentDate.split("-"); - [this.syncHour, this.syncMin, this.syncSec] = - this.equipmentTime.split(":"); - }, + ;[this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split("-") + ;[this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(":") + } }, computed: { activeUserRole() { - if ( - this.activeAccountItem.sysRoles && - this.activeAccountItem.sysRoles.length - ) { - return this.activeAccountItem.sysRoles[0].name; + if (this.activeAccountItem.sysRoles && this.activeAccountItem.sysRoles.length) { + return this.activeAccountItem.sysRoles[0].name } - return "鏅�氱敤鎴�"; + return "鏅�氱敤鎴�" }, curUserRole() { - const info = JSON.parse(sessionStorage.getItem("userInfo")); - return info.roleName; + const info = JSON.parse(sessionStorage.getItem("userInfo")) + return info.roleName }, curUserID() { - const info = JSON.parse(sessionStorage.getItem("userInfo")); - return info.id; + const info = JSON.parse(sessionStorage.getItem("userInfo")) + return info.id }, isShowDeleteAccount() { if (this.curUserRole == "瓒呯骇绠$悊鍛�") { - return this.activeUserRole != "瓒呯骇绠$悊鍛�"; + return this.activeUserRole != "瓒呯骇绠$悊鍛�" } else if (this.curUserRole == "绠$悊鍛�") { - return this.activeUserRole == "鏅�氱敤鎴�"; + return this.activeUserRole == "鏅�氱敤鎴�" } - return false; + return false }, isShowPermitBtn() { // basic 鐢ㄦ埛涓嶅厑璁镐慨鏀规潈闄� if (this.activeUserRole == "瓒呯骇绠$悊鍛�") { - return false; + return false } if (this.curUserRole == "绠$悊鍛�") { - return this.activeUserRole == "鏅�氱敤鎴�"; + return this.activeUserRole == "鏅�氱敤鎴�" } else { - return this.curUserRole != "鏅�氱敤鎴�"; + return this.curUserRole != "鏅�氱敤鎴�" } }, searchArrForShow() { if (this.searchText == "") { - return this.searchArr; + return this.searchArr } else { return this.searchArr.filter((item) => { - return item.name.indexOf(this.searchText.toUpperCase()) > -1; - }); + return item.name.indexOf(this.searchText.toUpperCase()) > -1 + }) } - }, + } }, watch: { showWelcome(newVal) { @@ -1530,22 +1343,22 @@ // 闅愯棌杩斿洖鎸夋寜閽� window.parent.postMessage( { - msg: "hiddenBack", + msg: "hiddenBack" }, "*" - ); + ) } else { //鏄剧ず杩斿洖鎸夐挳 window.parent.postMessage( { - msg: "showBack", + msg: "showBack" }, "*" - ); + ) } - }, - }, -}; + } + } +} </script> <style lang="scss"> .welcome-page { @@ -1596,8 +1409,7 @@ line-height: 36px; outline: 0; padding: 0 20px; - -webkit-transition: border-color 0.2s - cubic-bezier(0.645, 0.045, 0.355, 1); + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; font-weight: bold; @@ -2588,11 +2400,8 @@ } } } - .el-form-item.is-required:not(.is-no-asterisk) - > .el-form-item__label:before, - .el-form-item.is-required:not(.is-no-asterisk) - .el-form-item__label-wrap - > .el-form-item__label:before { + .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before, + .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before { display: none; } .el-form-item { diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue index d95e0c4..8e2fb1d 100644 --- a/src/pages/systemMonitor/index/App.vue +++ b/src/pages/systemMonitor/index/App.vue @@ -1,41 +1,21 @@ <template> <div class="s-system-monitor"> <el-tabs id="systemMonitor" v-model="activeName"> - <el-tab-pane name="proc"> + <el-tab-pane name="proc" v-if="false"> <span slot="label"> <span class="iconfont icon"></span> 鍗曞厓</span > <div class="left-tab"> - <div - class="tab-item" - :class="activeTab == 0 ? 'tab-item-active' : ''" - @click="activeTab = 0" - > + <div class="tab-item" :class="activeTab == 0 ? 'tab-item-active' : ''" @click="activeTab = 0"> <div class="title">绠楁硶鍗曞厓</div> - <div class="subtitle"> - 姝e湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏� - </div> - <span - class="iconfont icon" - :style="activeTab == 0 ? {} : { color: '#fff' }" - ></span - > + <div class="subtitle">姝e湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏�</div> + <span class="iconfont icon" :style="activeTab == 0 ? {} : { color: '#fff' }"></span> </div> - <div - class="tab-item" - :class="activeTab == 1 ? 'tab-item-active' : ''" - @click="activeTab = 1" - > + <div class="tab-item" :class="activeTab == 1 ? 'tab-item-active' : ''" @click="activeTab = 1"> <div class="title">搴旂敤鍗曞厓</div> - <div class="subtitle"> - 姝e湪杩涜{{ appProcessData.length }}涓簲鐢ㄥ崟鍏� - </div> - <span - class="iconfont icon" - :style="activeTab == 1 ? {} : { color: '#fff' }" - ></span - > + <div class="subtitle">姝e湪杩涜{{ appProcessData.length }}涓簲鐢ㄥ崟鍏�</div> + <span class="iconfont icon" :style="activeTab == 1 ? {} : { color: '#fff' }"></span> </div> </div> <div class="form-title" v-if="activeTab == 0"> @@ -118,13 +98,7 @@ > <div class="column-left" ref="left"> <div class="resize-bar"> - <div - :class="[ - 'ax_default', - activeChartItem == 'cpu' ? 'selected' : '', - ]" - @click="setActiveChartItem('cpu')" - > + <div :class="['ax_default', activeChartItem == 'cpu' ? 'selected' : '']" @click="setActiveChartItem('cpu')"> <div class="ax_default_pic color-cpu"></div> <div> <div class="ax_default_text">CPU</div> @@ -132,13 +106,7 @@ </div> </div> - <div - :class="[ - 'ax_default', - activeChartItem == 'mem' ? 'selected' : '', - ]" - @click="setActiveChartItem('mem')" - > + <div :class="['ax_default', activeChartItem == 'mem' ? 'selected' : '']" @click="setActiveChartItem('mem')"> <div class="ax_default_pic color-mem"></div> <div> <div class="ax_default_text">鍐呭瓨</div> @@ -146,13 +114,7 @@ </div> </div> - <div - :class="[ - 'ax_default', - activeChartItem == 'gpu' ? 'selected' : '', - ]" - @click="setActiveChartItem('gpu')" - > + <div :class="['ax_default', activeChartItem == 'gpu' ? 'selected' : '']" @click="setActiveChartItem('gpu')"> <div class="ax_default_pic color-gpu"></div> <div> <div class="ax_default_text">绠楀姏</div> @@ -160,29 +122,18 @@ </div> </div> - <div - :class="[ - 'ax_default', - activeChartItem == 'net' ? 'selected' : '', - ]" - @click="setActiveChartItem('net')" - > + <div :class="['ax_default', activeChartItem == 'net' ? 'selected' : '']" @click="setActiveChartItem('net')"> <div class="ax_default_pic color-net"></div> <div> <div class="ax_default_text">缃戠粶</div> - <div class="ax_default_subtext"> - {{ netSend | byteConver }} / {{ netRecive | byteConver }} - </div> + <div class="ax_default_subtext">{{ netSend | byteConver }} / {{ netRecive | byteConver }}</div> </div> </div> <div v-for="(v, k) in disks" :key="k" - :class="[ - 'ax_default', - activeChartItem == 'disk|' + k ? 'selected' : '', - ]" + :class="['ax_default', activeChartItem == 'disk|' + k ? 'selected' : '']" @click="setActiveChartItem('disk|' + k)" > <div class="ax_default_pic color-disk"></div> @@ -280,7 +231,7 @@ </div> </el-tab-pane> - <el-tab-pane name="service"> + <el-tab-pane name="service" v-if="false"> <span slot="label"> <span class="iconfont icon"></span> 鏈嶅姟</span @@ -312,59 +263,56 @@ </template> <script> -import echarts from "echarts"; -import { showSystemStates, showService, showProcesses } from "../api/api"; +import echarts from "echarts" +import { showSystemStates, showService, showProcesses } from "../api/api" export default { components: {}, computed: { isDisk() { - return this.activeChartItem.indexOf("disk") == 0; + return this.activeChartItem.indexOf("disk") == 0 }, isAdmin() { - if ( - sessionStorage.getItem("userInfo") && - sessionStorage.getItem("userInfo") !== "" - ) { - let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; - return loginName === "superadmin" || loginName === "basic"; + if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username + return loginName === "superadmin" || loginName === "basic" } - return false; - }, + return false + } }, filters: { byteConver(limit) { - var size = ""; + var size = "" if (limit < 1024) { //濡傛灉灏忎簬0.1KB杞寲鎴怋 - size = limit + "B"; + size = limit + "B" } else if (limit < 1024 * 1024) { //濡傛灉灏忎簬0.1MB杞寲鎴怟B - size = (limit / 1024).toFixed(2) + "KB"; + size = (limit / 1024).toFixed(2) + "KB" } else if (limit < 1024 * 1024 * 1024) { //濡傛灉灏忎簬0.1GB杞寲鎴怣B - size = (limit / (1024 * 1024)).toFixed(2) + "MB"; + size = (limit / (1024 * 1024)).toFixed(2) + "MB" } else if (limit < 1024 * 1024 * 1024 * 1024) { //鍏朵粬杞寲鎴怗B - size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"; + size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB" } else { - size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB"; + size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB" } - var sizestr = size + ""; - var len = sizestr.indexOf("."); - var dec = sizestr.substr(len + 1, 2); + var sizestr = size + "" + var len = sizestr.indexOf(".") + var dec = sizestr.substr(len + 1, 2) if (dec == "00") { //褰撳皬鏁扮偣鍚庝负00鏃� 鍘绘帀灏忔暟閮ㄥ垎 - return sizestr.substring(0, len) + sizestr.substr(len + 3, 2); + return sizestr.substring(0, len) + sizestr.substr(len + 3, 2) } - return sizestr; - }, + return sizestr + } }, data() { return { - activeName: "proc", + activeName: "top", activeChartItem: "cpu", yAxisMaxVal: "100%", algoProcessData: [], @@ -374,7 +322,7 @@ activeTab: 0, eChartsBaseOpt: { title: { - top: 10, + top: 10 }, animation: false, grid: { @@ -385,7 +333,7 @@ containLabel: true, borderWidth: 2, - borderColor: "#000", + borderColor: "#000" }, xAxis: { type: "category", @@ -393,10 +341,10 @@ data: Array.from({ length: 60 }, () => 0), // show: false, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { show: true, @@ -404,27 +352,27 @@ lineStyle: { width: 1, type: "solid", - color: "rgb(242,242,242)", - }, - }, + color: "rgb(242,242,242)" + } + } }, yAxis: { type: "value", // show: false, axisLine: { - show: false, + show: false }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { lineStyle: { - color: "rgb(242,242,242)", - }, - }, + color: "rgb(242,242,242)" + } + } }, series: [ { @@ -433,9 +381,9 @@ data: Array.from({ length: 60 }, () => 0), // smooth: true, itemStyle: {}, - areaStyle: {}, - }, - ], + areaStyle: {} + } + ] }, cpuUtilizations: Array.from({ length: 60 }, () => 0), memUtilizations: Array.from({ length: 60 }, () => 0), @@ -462,264 +410,244 @@ disks: {}, activeDisk: {}, ioRead: 0, - ioWrite: 0, - }; + ioWrite: 0 + } }, mounted() { - this.dataCollection(); - this.initChart(); + this.dataCollection() + this.initChart() }, methods: { // 寰幆閲囬泦鎵�鏈夋暟鎹� dataCollection() { - this.serviceCollect(); - this.procCollect(); + this.serviceCollect() + this.procCollect() setTimeout(() => { - this.dataCollection(); - }, 5000); + this.dataCollection() + }, 5000) }, serviceCollect() { showService() .then((rsp) => { if (rsp && rsp.success) { - rsp.data.sort(function (obj1, obj2) { - var val1 = obj1.name; - var val2 = obj2.name; + rsp.data.sort(function(obj1, obj2) { + var val1 = obj1.name + var val2 = obj2.name if (val1 < val2) { - return -1; + return -1 } else if (val1 > val2) { - return 1; + return 1 } else { - return 0; + return 0 } - }); - this.vasystemServicesData = rsp.data; + }) + this.vasystemServicesData = rsp.data } }) - .catch(() => {}); + .catch(() => {}) }, procCollect() { showProcesses() .then((rsp) => { if (rsp && rsp.success) { - if (rsp.data.algos) this.algoProcessData = rsp.data.algos; + if (rsp.data.algos) this.algoProcessData = rsp.data.algos - if (rsp.data.apps) this.appProcessData = rsp.data.apps; + if (rsp.data.apps) this.appProcessData = rsp.data.apps } }) - .catch(() => {}); + .catch(() => {}) }, getSystemState() { showSystemStates().then((rsp) => { if (rsp && rsp.success) { // 澶勭悊cpu - this.cpuUtilizations = this.cpuUtilizations.slice(1); - this.cpuUtilizations.push(rsp.data.cpu.toFixed(2)); - this.cpuUsedPercent = this.cpuUtilizations[59]; + this.cpuUtilizations = this.cpuUtilizations.slice(1) + this.cpuUtilizations.push(rsp.data.cpu.toFixed(2)) + this.cpuUsedPercent = this.cpuUtilizations[59] if (rsp.data.cpu_info) { - this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2); - this.cpuModel = rsp.data.cpu_info[0].modelName; - this.cpuCore = - Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) + - 1; - this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed( - 0 - ); + this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2) + this.cpuModel = rsp.data.cpu_info[0].modelName + this.cpuCore = Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) + 1 + this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed(0) } // 鍐呭瓨 - this.memUtilizations = this.memUtilizations.slice(1); - this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2)); - this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0); - this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2); - this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2); - this.memCache = ( - (rsp.data.mem.cached + rsp.data.mem.buffers) / - 1024 / - 1024 / - 1000 - ).toFixed(2); - this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2); + this.memUtilizations = this.memUtilizations.slice(1) + this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2)) + this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0) + this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2) + this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2) + this.memCache = ((rsp.data.mem.cached + rsp.data.mem.buffers) / 1024 / 1024 / 1000).toFixed(2) + this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2) // 绠楀姏 - this.gpuUtilizations = this.gpuUtilizations.slice(1); - this.gpuUtilizations.push(rsp.data.gpu.toFixed(2)); - this.gpuUsedPercent = this.gpuUtilizations[59]; + this.gpuUtilizations = this.gpuUtilizations.slice(1) + this.gpuUtilizations.push(rsp.data.gpu.toFixed(2)) + this.gpuUsedPercent = this.gpuUtilizations[59] // 缃戠粶 - this.netReciveCount = this.netReciveCount.slice(1); - this.netReciveCount.push(rsp.data.net.bytesRecv); - this.netSendCount = this.netSendCount.slice(1); - this.netSendCount.push(rsp.data.net.bytesSent); + this.netReciveCount = this.netReciveCount.slice(1) + this.netReciveCount.push(rsp.data.net.bytesRecv) + this.netSendCount = this.netSendCount.slice(1) + this.netSendCount.push(rsp.data.net.bytesSent) - this.netRecive = this.netReciveCount[59]; - this.netSend = this.netSendCount[59]; - this.macAddr = rsp.data.net.mac; + this.netRecive = this.netReciveCount[59] + this.netSend = this.netSendCount[59] + this.macAddr = rsp.data.net.mac if (rsp.data.net.addr.length) { - this.ipAddr = rsp.data.net.addr[0].addr; + this.ipAddr = rsp.data.net.addr[0].addr } // 纾佺洏 - rsp.data.disk.sort(function (obj1, obj2) { - var val1 = obj1.name; - var val2 = obj2.name; + rsp.data.disk.sort(function(obj1, obj2) { + var val1 = obj1.name + var val2 = obj2.name if (val1 < val2) { - return -1; + return -1 } else if (val1 > val2) { - return 1; + return 1 } else { - return 0; + return 0 } - }); + }) rsp.data.disk.forEach((d) => { if (d.name in this.disks) { - this.disks[d.name].readBytes = - this.disks[d.name].readBytes.slice(1); - this.disks[d.name].readBytes.push(d.readBytes); - this.disks[d.name].writeBytes = - this.disks[d.name].writeBytes.slice(1); - this.disks[d.name].writeBytes.push(d.writeBytes); + this.disks[d.name].readBytes = this.disks[d.name].readBytes.slice(1) + this.disks[d.name].readBytes.push(d.readBytes) + this.disks[d.name].writeBytes = this.disks[d.name].writeBytes.slice(1) + this.disks[d.name].writeBytes.push(d.writeBytes) } else { - this.disks[d.name] = {}; - this.disks[d.name]["info"] = d.info; - this.disks[d.name]["readBytes"] = Array.from( - { length: 60 }, - () => 0 - ); - this.disks[d.name]["writeBytes"] = Array.from( - { length: 60 }, - () => 0 - ); + this.disks[d.name] = {} + this.disks[d.name]["info"] = d.info + this.disks[d.name]["readBytes"] = Array.from({ length: 60 }, () => 0) + this.disks[d.name]["writeBytes"] = Array.from({ length: 60 }, () => 0) } - }); + }) // this.disks = rsp.data.disk; } - this.setChartData(); + this.setChartData() setTimeout(() => { - this.getSystemState(); - }, 1000); - }); + this.getSystemState() + }, 1000) + }) }, isShow(authority) { if (this.isAdmin) { - return true; + return true } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) { - return true; + return true } else { - return false; + return false } }, format(array) { - return [ - this.$moment(array[0]).format("YYYY-MM-DD"), - this.$moment(array[1]).format("YYYY-MM-DD"), - ]; + return [this.$moment(array[0]).format("YYYY-MM-DD"), this.$moment(array[1]).format("YYYY-MM-DD")] }, setActiveChartItem(item) { - this.activeChartItem = item; - this.eChartsObj.clear(); - this.setChartData(); + this.activeChartItem = item + this.eChartsObj.clear() + this.setChartData() }, initChart() { - this.eChartsObj = echarts.init(this.$refs.graphs); - this.getSystemState(); + this.eChartsObj = echarts.init(this.$refs.graphs) + this.getSystemState() }, setChartData() { - let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt)); + let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt)) switch (this.activeChartItem) { case "cpu": - this.yAxisMaxVal = this.cpuModel; - option.title.text = "CPU"; - option.title.subtext = "%鍗犵敤鐜�"; - option.yAxis.max = 100; - option.yAxis.min = 0; - option.grid.borderColor = "#8aadd0"; - option.series[0].itemStyle.color = "#8aadd0"; - option.series[0].areaStyle.color = "#a8d4ff"; - option.series[0].data = this.cpuUtilizations; + this.yAxisMaxVal = this.cpuModel + option.title.text = "CPU" + option.title.subtext = "%鍗犵敤鐜�" + option.yAxis.max = 100 + option.yAxis.min = 0 + option.grid.borderColor = "#8aadd0" + option.series[0].itemStyle.color = "#8aadd0" + option.series[0].areaStyle.color = "#a8d4ff" + option.series[0].data = this.cpuUtilizations - break; + break case "mem": - this.yAxisMaxVal = this.memTotal + "G"; - option.title.text = "鍐呭瓨"; - option.title.subtext = "鍐呭瓨浣跨敤閲�"; - option.yAxis.max = 100; - option.yAxis.min = 0; - option.grid.borderColor = "#ff9900"; - option.series[0].itemStyle.color = "#ff9900"; - option.series[0].areaStyle.color = "#f7bb88"; - option.series[0].data = this.memUtilizations; - break; + this.yAxisMaxVal = this.memTotal + "G" + option.title.text = "鍐呭瓨" + option.title.subtext = "鍐呭瓨浣跨敤閲�" + option.yAxis.max = 100 + option.yAxis.min = 0 + option.grid.borderColor = "#ff9900" + option.series[0].itemStyle.color = "#ff9900" + option.series[0].areaStyle.color = "#f7bb88" + option.series[0].data = this.memUtilizations + break case "gpu": - this.yAxisMaxVal = "100%"; - option.title.text = "绠楀姏"; - option.title.subtext = "%浣跨敤鐜�"; - option.yAxis.max = 100; - option.yAxis.min = 0; - option.grid.borderColor = "#bc84d8"; - option.series[0].itemStyle.color = "#bc84d8"; - option.series[0].areaStyle.color = "#de9dff"; - option.series[0].data = this.gpuUtilizations; - break; + this.yAxisMaxVal = "100%" + option.title.text = "绠楀姏" + option.title.subtext = "%浣跨敤鐜�" + option.yAxis.max = 100 + option.yAxis.min = 0 + option.grid.borderColor = "#bc84d8" + option.series[0].itemStyle.color = "#bc84d8" + option.series[0].areaStyle.color = "#de9dff" + option.series[0].data = this.gpuUtilizations + break case "net": - this.yAxisMaxVal = ""; - option.title.text = "缃戠粶"; - option.title.subtext = "缃戠粶璐熻浇"; - option.grid.borderColor = "#4696da"; - option.series[0].itemStyle.color = "#ffa16a"; - option.series[0].areaStyle.color = "#d68658"; - option.series[0].data = this.netReciveCount; + this.yAxisMaxVal = "" + option.title.text = "缃戠粶" + option.title.subtext = "缃戠粶璐熻浇" + option.grid.borderColor = "#4696da" + option.series[0].itemStyle.color = "#ffa16a" + option.series[0].areaStyle.color = "#d68658" + option.series[0].data = this.netReciveCount option.series.push({ type: "line", symbol: "none", data: this.netSendCount, // smooth: true, itemStyle: { - color: "#4696da", + color: "#4696da" }, areaStyle: { - color: "#4eacfd", - }, - }); - break; + color: "#4eacfd" + } + }) + break default: if (this.activeChartItem.indexOf("disk|") == 0) { - let dev = this.activeChartItem.split("|")[1]; + let dev = this.activeChartItem.split("|")[1] - this.yAxisMaxVal = ""; - option.title.text = "纾佺洏"; - option.title.subtext = "纾佺洏浼犺緭閫熺巼"; - option.grid.borderColor = "#33cc66"; - option.series[0].itemStyle.color = "#4696da"; - option.series[0].areaStyle.color = "#4eacfd"; - option.series[0].data = this.disks[dev].readBytes; + this.yAxisMaxVal = "" + option.title.text = "纾佺洏" + option.title.subtext = "纾佺洏浼犺緭閫熺巼" + option.grid.borderColor = "#33cc66" + option.series[0].itemStyle.color = "#4696da" + option.series[0].areaStyle.color = "#4eacfd" + option.series[0].data = this.disks[dev].readBytes option.series.push({ type: "line", symbol: "none", data: this.disks[dev].writeBytes, // smooth: true, itemStyle: { - color: "#33ff66", + color: "#33ff66" }, areaStyle: { - color: "#33cc66", - }, - }); + color: "#33cc66" + } + }) - this.activeDisk = this.disks[dev].info; - this.ioRead = this.disks[dev].readBytes[59]; - this.ioWrite = this.disks[dev].writeBytes[59]; + this.activeDisk = this.disks[dev].info + this.ioRead = this.disks[dev].readBytes[59] + this.ioWrite = this.disks[dev].writeBytes[59] } - break; + break } - this.eChartsObj.setOption(option); - }, - }, -}; + this.eChartsObj.setOption(option) + } + } +} </script> <style lang="scss"> .s-system-monitor { @@ -749,10 +677,7 @@ .el-table td.el-table__cell { border-bottom: none; } - .el-table--striped - .el-table__body - tr.el-table__row--striped - td.el-table__cell { + .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #f8f8ff; } diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue index df6d8ed..20e3725 100644 --- a/src/pages/vindicate/index/App.vue +++ b/src/pages/vindicate/index/App.vue @@ -21,32 +21,14 @@ @refreshPercent="getLeftPer" ref="view_1" ></systemClean> - <updateSettings - v-if="activePage == 0" - style="width: 100%" - ref="view_0" - ></updateSettings> + <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings> <back-up v-if="activePage == 3" style="width: 100%"></back-up> - <restartSettings - v-if="activePage == 2" - style="width: 100%" - ref="view_2" - ></restartSettings> + <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings> <sysInfo v-if="activePage == 4" style="width: 100%" ref="view_3"></sysInfo> </div> - <div - class="welcome-page" - v-else - ref="curPage" - @click="showRecomand = false" - @mouseup="mouseDownIndex = ''" - > - <div - class="search-box" - :class="showRecomand ? 'border-change' : ''" - @click.stop - > + <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''"> + <div class="search-box" :class="showRecomand ? 'border-change' : ''" @click.stop> <!-- @blur="showRecomand = false" --> <el-input class="search-input" @@ -61,17 +43,10 @@ </el-input> <div class="search-res" v-if="showRecomand"> - <div - class="res-bar" - v-for="(item, index) in searchArrForShow" - :key="index" - @click="pickQuick(item.addr)" - > + <div class="res-bar" v-for="(item, index) in searchArrForShow" :key="index" @click="pickQuick(item.addr)"> {{ item.name }} </div> - <div class="no-res-bar" v-if="searchArrForShow.length == 0"> - 娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋� - </div> + <div class="no-res-bar" v-if="searchArrForShow.length == 0">娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋�</div> </div> <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div> </div> @@ -95,13 +70,13 @@ </template> <script> -import { freedisk } from "@/api/system"; -import { getUrlKey } from "@/api/utils"; -import systemClean from "../views/systemClean"; -import updateSettings from "../views/updateSettings"; -import BackUp from "../views/backUp"; -import restartSettings from "../views/restartSettings"; -import sysInfo from "../views/sysInfo"; +import { freedisk } from "@/api/system" +import { getUrlKey } from "@/api/utils" +import systemClean from "../views/systemClean" +import updateSettings from "../views/updateSettings" +import BackUp from "../views/backUp" +import restartSettings from "../views/restartSettings" +import sysInfo from "../views/sysInfo" export default { name: "settings", components: { @@ -109,50 +84,50 @@ updateSettings, BackUp, restartSettings, - sysInfo, + sysInfo }, data() { return { menuArr: [ - { - name: "鏇存柊璁剧疆", - img_black: "/images/vindicate/鏇存柊璁剧疆-榛�.png", - img_white: "/images/vindicate/鏇存柊璁剧疆-鐧�.png", - img_welcome: "/images/vindicate/鏇存柊璁剧疆.png", - }, - { - name: "绯荤粺娓呯悊", - img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png", - img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png", - img_welcome: "/images/vindicate/绯荤粺娓呯悊.png", - }, + // { + // name: "鏇存柊璁剧疆", + // img_black: "/images/vindicate/鏇存柊璁剧疆-榛�.png", + // img_white: "/images/vindicate/鏇存柊璁剧疆-鐧�.png", + // img_welcome: "/images/vindicate/鏇存柊璁剧疆.png", + // }, + // { + // name: "绯荤粺娓呯悊", + // img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png", + // img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png", + // img_welcome: "/images/vindicate/绯荤粺娓呯悊.png", + // }, { name: "閲嶅惎璁剧疆", img_black: "/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white: "/images/vindicate/閲嶅惎璁剧疆-鐧�.png", - img_welcome: "/images/vindicate/閲嶅惎璁剧疆.png", + img_welcome: "/images/vindicate/閲嶅惎璁剧疆.png" }, { name: "澶囦唤杩樺師", img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png", img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png", - img_welcome: "/images/vindicate/绯荤粺娓呯悊.png", + img_welcome: "/images/vindicate/绯荤粺娓呯悊.png" }, { name: "绯荤粺淇℃伅", img_black: "/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white: "/images/vindicate/绯荤粺淇℃伅-鐧�.png", - img_welcome: "/images/vindicate/绯荤粺淇℃伅.png", - }, + img_welcome: "/images/vindicate/绯荤粺淇℃伅.png" + } ], searchArr: [ - { name: "绯荤粺璁剧疆", addr: [0] }, - { name: "绯荤粺鏇存柊", addr: [0, 0] }, - { name: "鏇存柊璁剧疆", addr: [0, 1] }, - { name: "绯荤粺娓呯悊", addr: [1] }, + // { name: "绯荤粺璁剧疆", addr: [0] }, + // { name: "绯荤粺鏇存柊", addr: [0, 0] }, + // { name: "鏇存柊璁剧疆", addr: [0, 1] }, + // { name: "绯荤粺娓呯悊", addr: [1] }, { name: "閲嶅惎璁剧疆", addr: [2] }, - { name: "绯荤粺淇℃伅", addr: [3] }, + { name: "绯荤粺淇℃伅", addr: [3] } ], activePage: 0, free: 0, @@ -160,77 +135,74 @@ showWelcome: true, searchText: "", showRecomand: false, - mouseDownIndex: "", - }; + mouseDownIndex: "" + } }, created() { - let color = localStorage.getItem("--colorCard"); + let color = localStorage.getItem("--colorCard") if (color) { - document.documentElement.style.setProperty("--colorCard", `${color}`); + document.documentElement.style.setProperty("--colorCard", `${color}`) } }, mounted() { - const menu = getUrlKey("menu"); + const menu = getUrlKey("menu") if (menu) { - this.activePage = this.menuArr.findIndex((x) => x.name == menu); + this.activePage = this.menuArr.findIndex((x) => x.name == menu) // this.$nextTick(() => { // this.$refs.netSettings.openRight(2); // }); } - this.getLeftPer(); + this.getLeftPer() window.addEventListener("message", (e) => { if (e.data.msg === "changeColor") { - document.documentElement.style.setProperty( - "--colorCard", - `${e.data.color}` - ); + document.documentElement.style.setProperty("--colorCard", `${e.data.color}`) } if (e.data.msg === "杩斿洖绯荤粺缁存姢") { - this.showWelcome = true; + this.showWelcome = true } - }); + }) }, methods: { openMenu(item, i) { - this.activePage = i; + this.activePage = i }, getLeftPer() { freedisk().then((res) => { - this.free = res.data.free; - this.full = res.data.all; - }); + this.free = res.data.free + this.full = res.data.all + }) }, pickQuick(addr) { if (addr.length == 1) { - this.openWelcome(addr[0]); + this.openWelcome(addr[0]) } else { - this.openWelcome(addr[0]); + this.openWelcome(addr[0]) this.$nextTick(() => { if (addr[0] == 1) { // addr[1] == 0 // ? this.changeSwitch("isNtp") // : this.changeSwitch("isManual"); - return; + return } - this.$refs[`view_${addr[0]}`].openRight(addr[1]); - }); + this.$refs[`view_${addr[0]}`].openRight(addr[1]) + }) } }, openWelcome(i) { - this.showWelcome = false; - this.openMenu(1, i); - }, + this.showWelcome = false + this.openMenu(1, i) + } }, computed: { searchArrForShow() { if (this.searchText == "") { - return this.searchArr; + return this.searchArr } else { return this.searchArr.filter((item) => { - return item.name.indexOf(this.searchText.toUpperCase()) > -1; - }); + return item.name.indexOf(this.searchText.toUpperCase()) > -1 + }) } - }, + } }, watch: { showWelcome(newVal) { @@ -238,22 +210,22 @@ // 闅愯棌杩斿洖鎸夋寜閽� window.parent.postMessage( { - msg: "hiddenBack", + msg: "hiddenBack" }, "*" - ); + ) } else { //鏄剧ず杩斿洖鎸夐挳 window.parent.postMessage( { - msg: "showBack", + msg: "showBack" }, "*" - ); + ) } - }, - }, -}; + } + } +} </script> <style lang="scss"> .welcome-page { @@ -302,8 +274,7 @@ line-height: 36px; outline: 0; padding: 0 20px; - -webkit-transition: border-color 0.2s - cubic-bezier(0.645, 0.045, 0.355, 1); + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; font-weight: bold; @@ -522,5 +493,3 @@ border-top: 2px solid #e1e0e6; } </style> - - -- Gitblit v1.8.0