From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all
---
src/pages/desktop/index/components/Tools.vue | 356 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 267 insertions(+), 89 deletions(-)
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index 19faa18..5217034 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -2,13 +2,46 @@
<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`" />
+ <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 src="" alt="" />
+ <span class="username">{{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="gotoSet">
+ <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">
@@ -16,11 +49,15 @@
v-for="dock in $store.state.desktop.minDocks"
:key="dock.id"
class="dock-item-wrap"
- :class="{'actived':dock.highlight}"
+ :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" v-if="dock.screenshot" />
+ <img
+ class="dock-shot"
+ :src="dock.screenshot"
+ v-if="dock.screenshot"
+ />
<!-- <iframe class="dock-shot" :src="dock.url" ></iframe> -->
</a>
</div>
@@ -38,60 +75,96 @@
<div class="tools-icon">
<el-dropdown size="small" placement="bottom">
<span class="el-dropdown-link">
- <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
+ <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-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-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-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-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-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-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>
+ <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 html2canvas from "html2canvas";
import { logout, updatePwd } from "@/api/login";
export default {
name: "Tools",
data() {
var validatePass = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('璇疯緭鍏ュ瘑鐮�'));
+ if (value === "") {
+ callback(new Error("璇疯緭鍏ュ瘑鐮�"));
} else {
- if (this.passwdForm.checkPwd !== '') {
- this.$refs.ruleForm.validateField('checkPwd');
+ if (this.passwdForm.checkPwd !== "") {
+ this.$refs.ruleForm.validateField("checkPwd");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�'));
+ if (value === "") {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
} else if (value !== this.passwdForm.newPwd) {
- callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
} else {
callback();
}
@@ -100,41 +173,47 @@
publicPath: process.env.BASE_URL,
notificationCenterVisible: false,
notificationCenterMessageCount: 0,
- maxOrder: 0,
- maxOrderOne: '',
userInfo: {},
+ linkList: [{name: "鏂囨。涓績"}, {name: "绯荤粺鐩戞帶鍣�"}, { name: "鏃ュ織绠＄悊" }],
showPasswdForm: false,
rules: {
- oldPwd: [
- { required: true, message: '璇疯緭鍏ユ棫瀵嗙爜', trigger: 'blur' }
- ],
- newPwd: [
- { required: true, validator: validatePass, trigger: 'blur' }
- ],
+ oldPwd: [{ required: true, message: "璇疯緭鍏ユ棫瀵嗙爜", trigger: "blur" }],
+ newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
checkPwd: [
- { required: true, validator: validatePass2, trigger: 'blur' }
- ]
+ { required: true, validator: validatePass2, trigger: "blur" },
+ ],
},
+ showFastPath:false,
passwdForm: {
oldPwd: "",
newPwd: "",
- checkPwd: ""
+ checkPwd: "",
},
-
};
},
created() {
let _that = this;
- this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo"));
- console.log(this.userInfo)
+ 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.forEach((item) => clearInterval(item));
}
window.toolIntervalArr = [
setInterval(function () {
_that.notificationCenterMessageCount += 1;
- }, 600)
+ }, 600),
];
+ },
+ mounted() {
+ document.addEventListener("click",(e) => {
+ // debugger
+ // this.showFastPath=false
+ if (this.showFastPath) {
+ this.showFastPath=false
+ }
+ })
},
methods: {
submitForm(formName) {
@@ -142,23 +221,23 @@
if (valid) {
let json = {
oldPwd: this.passwdForm.oldPwd,
- newPwd: this.passwdForm.checkPwd
- }
- updatePwd(json).then(res => {
- console.log(res, '淇敼瀵嗙爜')
+ newPwd: this.passwdForm.checkPwd,
+ };
+ updatePwd(json).then((res) => {
+ console.log(res, "淇敼瀵嗙爜");
this.$notify({
- type: res.success ? 'success' : 'error',
- message: res.msg
- })
+ type: res.success ? "success" : "error",
+ message: res.msg,
+ });
if (res.success) {
- this.showPasswdForm = false
+ this.showPasswdForm = false;
// this.$nextTick(_=>{
// this.toLogout('淇敼瀵嗙爜鎴愬姛锛岃閲嶆柊鐧诲綍锛�')
// })
}
- })
+ });
} else {
- console.log('error submit!!');
+ console.log("error submit!!");
return false;
}
});
@@ -181,21 +260,18 @@
},
togglePreference() {
- //this.$store.commit("desktop/togglePreference");
- //鏄剧ず妗岄潰,鏈�灏忓寲宸叉墦寮�鐨勫簲鐢�
- ;
- 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",
- screenshot: ''
+ screenshot: "",
});
- })
+ });
},
dockClick(dock) {
-
if (dock.type === "1") {
window.open(dock.url);
} else if (dock.type === "2") {
@@ -203,7 +279,7 @@
id: dock.id,
icon: dock.src,
title: dock.name,
- url: dock.url
+ url: dock.url,
});
} else if (dock.type === "3") {
this.$store.commit("desktop/resetMinFrame", dock.id);
@@ -211,42 +287,53 @@
this.$store.commit("desktop/refreshFrame", dock);
}
},
+ clickFastPath(name){
+ debugger
+ this.$emit("jumpToDock", name)
+
+ },
+ gotoSet(){
+ this.$emit("jumpToDock", "绯荤粺璁剧疆")
+
+ },
toolHover(dock) {
//this.$parent.screenShot(dock)
},
-
toLogout() {
let _this = this;
- this.$confirm("鎻愮ず锛氱‘瀹氶��鍑哄悧锛�", {
- center: true,
+ this.$confirm("纭畾閫�鍑虹櫥褰曞悧锛�","鎻愮ず", {
+ // center: true,
+ 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: "閫�鍑哄け璐�!"
- });
- }
+ 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("閫�鍑哄け璐�");
});
- }).catch(_ => {
- console.log("閫�鍑哄け璐�");
- });
- }
- }
+ },
+ },
};
</script>
-<style scoped>
+<style scoped lang="scss">
.tools {
width: 100%;
position: fixed;
@@ -309,7 +396,6 @@
}
.dock-item-wrap .dock-shot {
visibility: hidden;
- /* transform: scale(0.5); */
width: 100px;
height: 46px;
position: absolute;
@@ -327,7 +413,94 @@
vertical-align: top;
line-height: 56px;
padding: 0 15px;
+ position: relative;
}
+@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: .2s;
+ display: none;
+ .top{
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ /* justify-content: space-evenly; */
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 70px;
+ box-sizing: border-box;
+ padding: 0 30px;
+ img{
+ height: 50px;
+ width: 50px;
+background-color: bisque;
+ border-radius: 50%;
+ }
+ .username{
+ width: fit-content;
+ height: 30px;
+ line-height: 30px;
+ font-size: 16px;
+ margin-left: 10px;
+ }
+ }
+ .link-list{
+ height: 180px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .list-item{
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 80%;
+ -webkit-box-sizing: border-box;
+ 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;
+ }
+
+ }
+}
+
.tools-icon img {
-webkit-user-drag: none;
}
@@ -338,6 +511,11 @@
cursor: pointer;
}
+.fast-path-show {
+ animation: move linear .2s 1;
+ display: block;
+}
+
.tools .tools-right {
float: right;
height: 100%;
--
Gitblit v1.8.0