From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/desktop/index/components/Tools.vue | 677 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 614 insertions(+), 63 deletions(-) diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue index 12d3fd2..957f916 100644 --- a/src/pages/desktop/index/components/Tools.vue +++ b/src/pages/desktop/index/components/Tools.vue @@ -2,24 +2,59 @@ <div class="tools"> <div class="tools-left"> <div - :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]" - @click="togglePreference()" + :class="['tools-icon', 'tools-show-desktop', { clicked: this.$store.state.desktop.preferenceVisiable }]" + @click.stop="togglePreference" > <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" /> </div> + + <div class="fast-path" :class="showFastPath ? 'fast-path-show' : ''" @click.stop> + <div class="top"> + <img v-if="userInfo" :src="`data:image/png;base64,${userInfo.headpic}`" alt="" /> + + <span class="username">{{ userInfo && userInfo.username }}</span> + </div> + <div class="link-list"> + <div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)"> + {{ x.name }} + </div> + </div> + <div class="bot"> + <div class="set" @click="clickFastPath('绯荤粺璁剧疆')"> + <span class="icon iconfont">{{ "\ue60f" }}</span> + <span>璁剧疆</span> + </div> + <div class="exit" @click="toLogout"> + <span class="icon iconfont">{{ "\ue60f" }}</span> + <span>閫�鍑�</span> + </div> + </div> + </div> <div class="tools-icon no-hover-style"> - <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI.png`" alt /> + <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI-鏂�.png`" alt /> </div> </div> <div class="tools-middle"> - <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}"> + <div + v-for="dock in $store.state.desktop.minDocks" + :key="dock.id" + class="dock-item-wrap" + :class="{ actived: dock.highlight }" + > <a @click="dockClick(dock)"> <img class="dock-item" :src="dock.src" :alt="dock.alt" /> - <img class="dock-shot" :src="dock.screenshot" :alt="dock.name" /> + <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot" /> + <!-- <iframe class="dock-shot" :src="dock.url" ></iframe> --> </a> </div> </div> <div class="tools-right"> + <div class="tools-icon my-tools-icon" @click="goToWireSet"> + <span class="icon iconfont"></span> + </div> + <div class="tools-icon my-tools-icon" @click.stop="toggleShowWifi" v-show="wifiList.length"> + <span class="icon iconfont"></span> + </div> <div class="tools-icon"> <img :src="`${publicPath}images/desktop/header-icon/search.png`" alt /> </div> @@ -30,106 +65,408 @@ <img :src="`${publicPath}images/desktop/header-icon/notice.png`" alt /> </div> <div class="tools-icon"> - <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt /> + <el-dropdown size="small" placement="bottom"> + <span class="el-dropdown-link"> + <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt /> + <!-- <i class="el-icon-arrow-down el-icon--right"></i> --> + </span> + <el-dropdown-menu slot="dropdown" style="top: 44px"> + <el-dropdown-item style="text-align: left"> + <b>Hi {{ userInfo && userInfo.username }}</b> + </el-dropdown-item> + <el-dropdown-item @click.native="showPasswdForm = true">淇敼瀵嗙爜</el-dropdown-item> + <el-dropdown-item @click.native="toLogout">閫�鍑虹櫥褰�</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + </div> + </div> + <el-dialog + title="淇敼瀵嗙爜" + :visible.sync="showPasswdForm" + :append-to-body="true" + width="500px" + @close="cancelPasswordChange" + > + <el-form :model="passwdForm" ref="ruleForm" :rules="rules" label-width="90px"> + <el-form-item label="鏃у瘑鐮�" prop="oldPwd"> + <el-input show-password v-model="passwdForm.oldPwd" autocomplete="off" size="small"></el-input> + </el-form-item> + <el-form-item label="鏂板瘑鐮�" prop="newPwd"> + <el-input show-password v-model="passwdForm.newPwd" autocomplete="off" size="small"></el-input> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="checkPwd"> + <el-input show-password v-model="passwdForm.checkPwd" autocomplete="off" size="small"></el-input> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button type="info" size="small" @click="cancelPasswordChange">鍙� 娑�</el-button> + <el-button type="primary" @click="submitForm('ruleForm')" size="small">纭� 瀹�</el-button> + </div> + </el-dialog> + + <div class="sys-remind" v-if="showSysRemind"> + <!-- --> + <div class="remind-title">绯荤粺鏇存柊鎻愰啋</div> + + <div class="remind-content"> + 宸插仛濂�<b>绯荤粺鏇存柊</b>鐨勫噯澶囷紝<span style="color: red">鏇存柊棰勮闇�瑕佷竴瀹氱殑鏃堕棿</span + >锛屽鏋滄偍鏈噯澶囧ソ锛屾垜浠皢鍦ㄤ竴灏忔椂鍚庡啀娆″悜鎮ㄧ‘璁ゃ�� + </div> + + <div class="btns"> + <el-button size="mini" type="primary" @click="delaySysRemind(3600 * 24)">鍏抽棴姝ゆ鎻愰啋</el-button> + <el-button size="mini" type="primary" @click="delaySysRemind(60 * 60)">1灏忔椂鍚庢彁閱�</el-button> + <el-button :loading="upgrading" size="mini" type="primary" @click="updateSysNow"> + {{ upgrading ? "鏇存柊涓�" : "绔嬪嵆鏇存柊" }}</el-button + > + </div> + </div> + + <div class="sys-remind" v-if="showAppRemind"> + <div class="remind-title">绠楁硶/搴旂敤鏇存柊鎻愰啋</div> + + <div class="remind-content"> + 鍙戠幇 <b>绠楁硶/搴旂敤 </b>鏇存柊锛�<span style="color: red">璇峰墠寰�鏌ョ湅鏇存柊</span + >銆傚鏋滄偍鏈噯澶囧ソ锛屾垜浠皢鍦ㄤ竴灏忔椂鍚庡啀娆″悜鎮ㄧ‘璁ゃ�� + </div> + + <div class="btns"> + <el-button size="mini" type="primary" @click="delayAppRemind(3600 * 24)">鍏抽棴姝ゆ鎻愰啋</el-button> + <el-button size="mini" type="primary" @click="delayAppRemind(60 * 60)">1灏忔椂鍚庢彁閱�</el-button> + <el-button :loading="upgrading" size="mini" type="primary" @click="goToUpdate"> 鍓嶅線鏇存柊</el-button> + </div> + </div> + + <div class="wifi-pop" :class="showWifiList ? 'wifi-pop-show' : ''"> + <div class="top-title"> + <div class="text">鏃犵嚎缃戠粶</div> + <el-switch v-model="isOpenWifi" active-color="rgba(61, 104, 225, 1)"> </el-switch> + </div> + + <div class="wifi-list"> + <div + class="item" + :class="i == activeWifi ? 'item-active' : ''" + v-for="(x, i) in wifiList" + :key="i" + @click="pickWifi(x, i)" + > + <!-- --> + <div class="top"> + <span class="icon iconfont"></span> + <div class="name"> + <span style="font-size: 14px">{{ x.name }}</span> + <span>瀹夊叏</span> + </div> + </div> + <div class="bot" v-if="x.showBottom"> + <el-checkbox v-model="x.checked">鑷姩杩炴帴</el-checkbox> + <el-button size="mini">杩炴帴</el-button> + </div> + </div> </div> </div> </div> </template> <script> +import { logout, updatePwd } from "@/api/login" +import { + getUpgradeNotice, + delayUpgradeNotice, + getAppUpgradeNotice, + upgradeNewVersion, + delayAppNotice, + getWifi +} from "@/api/system" export default { name: "Tools", data() { + var validatePass = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇疯緭鍏ュ瘑鐮�")) + } else { + if (this.passwdForm.checkPwd !== "") { + this.$refs.ruleForm.validateField("checkPwd") + } + callback() + } + } + var validatePass2 = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")) + } else if (value !== this.passwdForm.newPwd) { + callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")) + } else { + callback() + } + } return { publicPath: process.env.BASE_URL, notificationCenterVisible: false, notificationCenterMessageCount: 0, - maxOrder: 0, - maxOrderOne: '' - }; + userInfo: {}, + activeWifi: null, + wifiList: [ + { name: "缃戠粶1", connected: false, showBottom: false, checked: false }, + { name: "缃戠粶2", connected: false, showBottom: false, checked: false }, + { name: "缃戠粶3", connected: true, showBottom: false, checked: false } + ], + linkList: [{ name: "鏂囨。涓績" }, { name: "绯荤粺鐩戞帶鍣�" }, { name: "鏃ュ織绠$悊" }], + showPasswdForm: false, + showWifiList: false, + rules: { + oldPwd: [{ required: true, message: "璇疯緭鍏ユ棫瀵嗙爜", trigger: "blur" }], + newPwd: [{ required: true, validator: validatePass, trigger: "blur" }], + checkPwd: [{ required: true, validator: validatePass2, trigger: "blur" }] + }, + showFastPath: false, + showSysRemind: false, + showAppRemind: false, + sysTimeout: 60 * 60 * 1000, + sysTimer: null, + appTimeout: 60 * 60 * 1000, + upgrading: false, + isOpenWifi: false, + passwdForm: { + oldPwd: "", + newPwd: "", + checkPwd: "" + } + } }, created() { - let _that = this; + let _that = this + this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo")) if (window.toolIntervalArr) { - window.toolIntervalArr.forEach(item => clearInterval(item)); + window.toolIntervalArr.forEach((item) => clearInterval(item)) } window.toolIntervalArr = [ - setInterval(function () { - _that.notificationCenterMessageCount += 1; + setInterval(function() { + _that.notificationCenterMessageCount += 1 }, 600) - ]; + ] }, - // watch:{ - // '$store.state.desktop.frames':{ - // handler(n,o){ - // if(n){ - // debugger; - // n.forEach((item,index) => { - // if(item.order >= this.maxOrder){ - // this.maxOrderOne = item.id; - // } - // }); - // } - // }, - // deep: true - // } - // }, - + beforeDestroy() { + clearTimeout(this.sysTimer) + this.sysTimer = null + }, + mounted() { + document.addEventListener("click", (e) => { + if (this.showFastPath || this.showWifiList) { + this.showFastPath = false + this.showWifiList = false + } + }) + this.askSysUpdate() + this.askAppUpdate() + this.askWifiConfig() + }, methods: { - notificationCenterClick: function () { - this.notificationCenterVisible = !this.notificationCenterVisible; - this.$store.commit( - "desktop/changeNotificationCenterVisible", - this.notificationCenterVisible - ); + askWifiConfig() { + getWifi().then((res) => { + this.wifiList = [] + if (res && res.data) { + this.wifiList = res.data + } + }) }, - notificationCenterNoMessage: function () { - return this.$store.state.desktop.messageNotices.length === 0; + askAppUpdate() { + getAppUpgradeNotice().then((res) => { + if (res.code == 200) { + if (res.data.NeedUpdate && res.data.NoticeStatus) { + if (res.data.LastNoticeTime == 0) { + this.showAppRemind = true + } else { + this.appTimeout = res.data.LastNoticeTime * 1000 + this.delayAppAsk() + } + } + } + }) }, - notificationCenterMessageFlicker: function () { - return ( - this.notificationCenterMessageCount % 2 === 0 && - !this.notificationCenterNoMessage() - ); + pickWifi(x, i) { + this.wifiList.forEach((x) => { + x.showBottom = false + }) + x.showBottom = !x.showBottom + this.activeWifi = i + }, + goToUpdate() { + this.showAppRemind = false + window.parent.postMessage({ msg: `toAI?activeName=鏇存柊` }, "*") + }, + goToWireSet() { + window.parent.postMessage({ msg: `toSetting?menu=缃戠粶璁剧疆&subMenu=鏈夌嚎缃戠粶` }, "*") + }, + updateSysNow() { + window.parent.postMessage({ msg: `toVindicate?autoUpdate=1` }, "*") + }, + delaySysRemind(sec) { + delayUpgradeNotice({ + delaySecond: sec + }).then((res) => { + if (res.code == 200) { + this.$notify.success("璁剧疆鎴愬姛") + this.showSysRemind = false + this.sysTimeout = res.data.LastNoticeTime * 1000 + this.delaySysAsk() + } + }) + }, + delayAppRemind(sec) { + delayAppNotice({ + delay: sec + }).then((res) => { + if (res.code == 200) { + this.$notify.success("璁剧疆鎴愬姛") + this.showAppRemind = false + this.appTimeout = res.data.LastNoticeTime * 1000 + this.delayAppAsk() + } + }) + }, + delaySysAsk() { + this.sysTimer = setTimeout(() => { + this.askSysUpdate() + }, this.sysTimeout) + }, + delayAppAsk() { + this.appTimer = setTimeout(() => { + this.askAppUpdate() + }, this.appTimeout) + }, + askSysUpdate() { + getUpgradeNotice().then((res) => { + if (res.data.HaveNewVersion > 0 && res.data.NoticeStatus) { + if (res.data.LastNoticeTime == 0) { + this.showSysRemind = true + } else { + this.sysTimeout = res.data.LastNoticeTime * 1000 + this.delaySysAsk() + } + } + }) + }, + toggleShowWifi() { + this.notificationCenterVisible = false + this.showWifiList = !this.showWifiList + this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible) + }, + submitForm(formName) { + this.$refs[formName].validate((valid) => { + if (valid) { + let json = { + oldPwd: this.passwdForm.oldPwd, + newPwd: this.passwdForm.checkPwd + } + updatePwd(json) + .then((res) => { + this.$notify({ + type: res.success ? "success" : "error", + message: res.msg + }) + if (res.success) { + this.cancelPasswordChange() + } + }) + .catch((err) => { + this.$notify({ + type: "error", + message: err.msg + }) + }) + } else { + console.log("error submit!!") + return false + } + }) + }, + notificationCenterClick: function() { + this.notificationCenterVisible = !this.notificationCenterVisible + this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible) + }, + notificationCenterNoMessage: function() { + return this.$store.state.desktop.messageNotices.length === 0 + }, + notificationCenterMessageFlicker: function() { + return this.notificationCenterMessageCount % 2 === 0 && !this.notificationCenterNoMessage() }, togglePreference() { - //this.$store.commit("desktop/togglePreference"); - //鏄剧ず妗岄潰,鏈�灏忓寲宸叉墦寮�鐨勫簲鐢� - debugger; - this.$store.state.desktop.frames.forEach(frame => { - this.$store.commit('desktop/addMinDock', { + this.showFastPath = !this.showFastPath + this.$store.state.desktop.frames.forEach((frame) => { + this.$store.commit("desktop/addMinDock", { id: frame.id, src: frame.icon, alt: frame.title, - type: "3" - }); + type: "3", + screenshot: "" + }) }) }, dockClick(dock) { - debugger if (dock.type === "1") { - window.open(dock.url); + window.open(dock.url) } else if (dock.type === "2") { this.$store.dispatch("desktop/addFrame", { id: dock.id, icon: dock.src, title: dock.name, url: dock.url - }); + }) } else if (dock.type === "3") { - this.$store.commit("desktop/resetMinFrame", dock.id); + this.$store.commit("desktop/resetMinFrame", dock.id) //鐐瑰嚮鐨刬frame缃《骞堕珮浜� - debugger - //this.$store.commit("desktop/refreshFrame", dock); + this.$store.commit("desktop/refreshFrame", dock) + } + }, + clickFastPath(name) { + this.$emit("jumpToDock", name) + }, + toLogout() { + let _this = this + this.$confirm("纭畾閫�鍑虹櫥褰曞悧锛�", "鎻愮ず", { + type: "warning", + cancelButtonClass: "comfirm-class-cancle", + confirmButtonClass: "comfirm-class-sure" + }) + .then((_) => { + logout().then((res) => { + if (res.success) { + this.$notify.success(res.msg) + location.assign("/view/index") + sessionStorage.removeItem("userInfo") + // 鎵嬪姩閫�鍑�, 鍙栨秷鑷姩鐧诲綍 + sessionStorage.removeItem("autoLogin") + _this.userInfo = {} + } else { + this.$notify({ + title: "鎻愮ず", + type: "success", + message: "閫�鍑哄け璐�!" + }) + } + }) + }) + .catch((_) => { + console.log("閫�鍑哄け璐�") + }) + }, + cancelPasswordChange() { + this.showPasswdForm = false + this.passwdForm = { + oldPwd: "", + newPwd: "", + checkPwd: "" } } } -}; +} </script> -<style scoped> +<style scoped lang="scss"> .tools { width: 100%; position: fixed; @@ -147,7 +484,7 @@ margin: auto; } .tools .tools-left { - width: 200px; + width: 275px; height: 100%; float: left; margin-left: 14px; @@ -156,6 +493,7 @@ float: left; position: relative; } + .tools .tools-middle::before { width: 1px; height: 20px; @@ -174,12 +512,13 @@ border-bottom: 2px solid transparent; position: relative; } -.tools .tools-middle .dock-item-wrap:hover{ +.tools .tools-middle .dock-item-wrap:hover { color: white; background-color: #98aabe; } -.tools-middle .dock-item-wrap.actived{ +.tools-middle .dock-item-wrap.actived { border-color: #40c3ff; + background-color: #98aabe; } .dock-item-wrap a { height: 100%; @@ -204,11 +543,128 @@ text-align: center; height: 100%; display: inline-block; - vertical-align: top; + vertical-align: bottom; + line-height: 56px; padding: 0 15px; + position: relative; + .iconfont { + display: block; + line-height: 42px; + font-size: 25px; + } +} +@keyframes move { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.fast-path { + height: 310px; + position: absolute; + width: 200px; + top: 55px; + border-radius: 6px; + background-color: rgba(255, 255, 255, 1); + transition: 0.2s; + display: none; + padding-top: 5px; + box-sizing: border-box; + .top { + display: flex; + align-items: center; + height: 70px; + box-sizing: border-box; + padding: 0 30px; + img { + height: 50px; + width: 50px; + border-radius: 50%; + } + .username { + width: fit-content; + height: 30px; + line-height: 30px; + font-size: 16px; + margin-left: 15px; + } + } + .link-list { + height: 180px; + display: flex; + flex-direction: column; + align-items: center; + .list-item { + display: flex; + width: 90%; + box-sizing: border-box; + padding: 0 20px; + border-radius: 5px; + font-size: 14px; + line-height: 25px; + height: 25px; + cursor: pointer; + margin: 5px; + } + .list-item:hover { + background-color: rgba(231, 231, 231, 1); + } + } + .bot { + position: absolute; + bottom: 0; + height: 60px; + display: flex; + width: 100%; + justify-content: space-around; + .set, + .exit { + display: flex; + align-items: center; + width: 28%; + justify-content: space-evenly; + font-size: 14px; + cursor: pointer; + } + } } +.sys-remind { + background-color: white; + width: 400px; + position: absolute; + right: 5px; + top: 45px; + border-radius: 5px; + .remind-title { + box-sizing: border-box; + text-align: left; + padding: 0 20px; + border-bottom: 1px solid lightgray; + font-size: 16px; + line-height: 35px; + } + .remind-content { + text-align: left; + line-height: 20px; + font-size: 14px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 15px 20px; + } + .btns { + padding: 0px 12px 8px 12px; + /* background-color: antiquewhite; */ + text-align: right; + } +} + +.tools-icon img { + -webkit-user-drag: none; +} .tools .tools-icon:not(.no-hover-style):hover, .tools .tools-icon:not(.no-hover-style).clicked { color: white; @@ -216,9 +672,104 @@ cursor: pointer; } +.wifi-pop { + position: absolute; + width: 210px; + top: 55px; + height: 400px; + border-radius: 6px; + background-color: white; + transition: 0.2s; + display: none; + box-sizing: border-box; + right: 100px; + .top-title { + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + padding: 0 20px; + font-size: 14px; + border-bottom: 1px solid lightgray; + } + .wifi-list { + overflow: auto; + height: 340px; + .item-active { + background-color: rgba(66, 102, 153, 1); + color: white; + } + .item { + box-sizing: border-box; + cursor: pointer; + /* background-color: aqua; */ + padding: 10px 20px; + .top { + display: flex; + .icon { + font-size: 20px; + margin-right: 10px; + } + .name { + display: flex; + flex-direction: column; + line-height: 20px; + text-align: left; + } + } + .bot { + display: flex; + justify-content: space-between; + align-items: center; + .el-checkbox { + color: white; + .el-checkbox__input.is-checked + .el-checkbox__label { + color: white; + } + .el-checkbox__label { + padding-left: 5px; + font-size: 12px; + } + .el-checkbox__inner { + width: 12px; + height: 12px; + + .el-checkbox__inner::after { + height: 6px; + left: 3px; + } + } + } + + .el-button--mini, + .el-button--mini.is-round { + padding: 5px 10px; + } + } + } + } +} +.wifi-pop-show { + animation: move linear 0.2s 1; + display: block; +} + +.fast-path-show { + animation: move linear 0.2s 1; + display: block; +} + .tools .tools-right { float: right; height: 100%; margin-right: 14px; } -</style> \ No newline at end of file + +.smart-ai { + height: 65%; +} + +.el-dropdown-menu { + top: 40px !important; +} +</style> -- Gitblit v1.8.0