From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/desktop/index/components/Tools.vue | 183 +++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 167 insertions(+), 16 deletions(-) diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue index 7aad07c..b0facd3 100644 --- a/src/pages/desktop/index/components/Tools.vue +++ b/src/pages/desktop/index/components/Tools.vue @@ -8,14 +8,20 @@ <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" /> </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> @@ -30,30 +36,101 @@ <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.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"> + <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" @click="showPasswdForm = false" size="small">鍙� 娑�</el-button> + <el-button type="primary" @click="submitForm('ruleForm')" size="small">纭� 瀹�</el-button> + </div> + </el-dialog> </div> </template> <script> - +import html2canvas from 'html2canvas'; +import { logout, updatePwd } from "@/api/login"; 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: '' + maxOrderOne: '', + userInfo: {}, + showPasswdForm: false, + rules: { + oldPwd: [ + { required: true, message: '璇疯緭鍏ユ棫瀵嗙爜', trigger: 'blur' } + ], + newPwd: [ + { required: true, validator: validatePass, trigger: 'blur' } + ], + checkPwd: [ + { required: true, validator: validatePass2, trigger: 'blur' } + ] + }, + passwdForm: { + oldPwd: "", + newPwd: "", + checkPwd: "" + }, + }; }, created() { let _that = this; + this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo")); + console.log(this.userInfo) if (window.toolIntervalArr) { window.toolIntervalArr.forEach(item => clearInterval(item)); } + window.toolIntervalArr = [ setInterval(function () { _that.notificationCenterMessageCount += 1; @@ -64,7 +141,7 @@ // '$store.state.desktop.frames':{ // handler(n,o){ // if(n){ - // debugger; + // ; // n.forEach((item,index) => { // if(item.order >= this.maxOrder){ // this.maxOrderOne = item.id; @@ -75,8 +152,35 @@ // deep: true // } // }, - + + methods: { + submitForm(formName) { + this.$refs[formName].validate((valid) => { + if (valid) { + let json = { + oldPwd: this.passwdForm.oldPwd, + newPwd: this.passwdForm.checkPwd + } + updatePwd(json).then(res => { + console.log(res, '淇敼瀵嗙爜') + this.$notify({ + type: res.success ? 'success' : 'error', + message: res.msg + }) + if (res.success) { + this.showPasswdForm = false + // this.$nextTick(_=>{ + // this.toLogout('淇敼瀵嗙爜鎴愬姛锛岃閲嶆柊鐧诲綍锛�') + // }) + } + }) + } else { + console.log('error submit!!'); + return false; + } + }); + }, notificationCenterClick: function () { this.notificationCenterVisible = !this.notificationCenterVisible; this.$store.commit( @@ -97,18 +201,19 @@ togglePreference() { //this.$store.commit("desktop/togglePreference"); //鏄剧ず妗岄潰,鏈�灏忓寲宸叉墦寮�鐨勫簲鐢� - debugger; + ; 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); } else if (dock.type === "2") { @@ -121,9 +226,43 @@ } else if (dock.type === "3") { this.$store.commit("desktop/resetMinFrame", dock.id); //鐐瑰嚮鐨刬frame缃《骞堕珮浜� - debugger this.$store.commit("desktop/refreshFrame", dock); } + }, + toolHover(dock) { + //this.$parent.screenShot(dock) + }, + + toLogout() { + let _this = this; + this.$confirm("鎻愮ず锛氱‘瀹氶��鍑哄悧锛�", { + center: true, + cancelButtonClass: "comfirm-class-cancle", + confirmButtonClass: "comfirm-class-sure" + }).then(_ => { + logout().then(res => { + if (res === "閫�鍑烘垚鍔�") { + sessionStorage.removeItem("userInfo"); + // 鎵嬪姩閫�鍑�, 鍙栨秷鑷姩鐧诲綍 + sessionStorage.removeItem("autoLogin"); + _this.userInfo = {}; + location.assign('/view/index'); + this.$notify({ + title: "鎻愮ず", + type: "success", + message: "閫�鍑烘垚鍔燂紒" + }); + } else { + this.$notify({ + title: "鎻愮ず", + type: "success", + message: "閫�鍑哄け璐�!" + }); + } + }); + }).catch(_ => { + console.log("閫�鍑哄け璐�"); + }); } } }; @@ -147,7 +286,7 @@ margin: auto; } .tools .tools-left { - width: 200px; + width: 275px; height: 100%; float: left; margin-left: 14px; @@ -156,6 +295,7 @@ float: left; position: relative; } + .tools .tools-middle::before { width: 1px; height: 20px; @@ -174,12 +314,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%; @@ -190,6 +331,7 @@ } .dock-item-wrap .dock-shot { visibility: hidden; + /* transform: scale(0.5); */ width: 100px; height: 46px; position: absolute; @@ -208,7 +350,9 @@ line-height: 56px; padding: 0 15px; } - +.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; @@ -221,4 +365,11 @@ height: 100%; margin-right: 14px; } +.el-dropdown-menu { + top: 40px !important; +} + +.smart-ai { + height: 65%; +} </style> \ No newline at end of file -- Gitblit v1.8.0