From 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期五, 01 九月 2023 16:10:37 +0800 Subject: [PATCH] 系统维护+系统监控器+调试工具的app 增加 --- src/pages/desktop/index/components/DFrame.vue | 228 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 152 insertions(+), 76 deletions(-) diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue index 93f431f..0527cc0 100644 --- a/src/pages/desktop/index/components/DFrame.vue +++ b/src/pages/desktop/index/components/DFrame.vue @@ -2,21 +2,23 @@ <div v-show="data.isShow" :class="['d-frame', {'d-frame-full': fullScreen}]" + ref="dFrame" :data-id="data.id" - v-bind:style="{left: data.leftOffset + '%', top: data.topOffset + '%', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}" + @contextmenu.prevent="openMenuList($event.offsetY,$event.offsetX,data)" + v-bind:style="{left: data.leftOffset + 'px', top: data.topOffset + 'px', 'z-index': 125 + data.order, width: width + 'px', height: height + 'px'}" > - <div class="d-frame-title" v-drag @click="frameClick()"> + <div class="d-frame-title" v-drag='fullScreen' @click="frameClick"> <div class="d-frame-title-operation"> <i class="icon-minus d-frame-operation-minus" @click="minFrame(data,$event)"> - <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt=""> + <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt /> </i> <i class="icon-screen-toggle d-frame-operation-full" @click="changeFullScreen($event)"> - <img :src="fullScreen?`${publicPath}images/desktop/header-icon/mini.png`:`${publicPath}images/desktop/header-icon/max.png`" alt=""> + <img + :src="fullScreen?`${publicPath}images/desktop/header-icon/mini.png`:`${publicPath}images/desktop/header-icon/max.png`" + 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"> @@ -26,7 +28,8 @@ </slot> </div> <div class="d-frame-content"> - <iframe :src="data.url" v-if="data.url"></iframe> + <div class="iframe-mask" v-if="data.order!=1" @click="frameClick"></div> + <iframe :src="data.url" v-if="data.url" :name="data.name"></iframe> <div v-html="data.html" v-if="data.html"></div> <!-- <span class="d-frame-operation-resize" v-resize></span> --> <span @@ -36,12 +39,19 @@ @mouseup="mouseup" ></span> </div> + <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}"> + <ul> + <li @click="refreshApp">閲嶆柊鍔犺浇</li> + <li @click="changeFullScreen">鏈�澶у寲</li> + <li @click="minFrame">鏈�灏忓寲</li> + <li @click="closeFrame">鍏抽棴</li> + </ul> + </div> </div> </template> <script> import html2canvas from 'html2canvas'; - export default { name: "DFrame", props: { @@ -50,6 +60,9 @@ data() { return { publicPath: process.env.BASE_URL, + showMenu: false, + menuTop: 0, + menuLeft: 0, fullScreen: false, width: this.data.width || 1024, height: this.data.height || 512, @@ -62,14 +75,33 @@ } } }, - mounted() { - window.addEventListener('message', e => { - if (e.data && e.data.msg == "logout") { - location.assign("/"); + watch: { + showMenu(val) { + if (val) { + document.body.addEventListener('click', this.closeMenuList) + } else { + document.body.removeEventListener('click', this.closeMenuList) } - }) + } + }, + mounted() { + console.log(document.querySelectorAll('iframe')) + window.addEventListener('message', (d) => { + let { source, trigger, menuT, menuL } = d.data; + if (trigger == 'contextmenu') { + this.openMenuList(menuT, menuL) + } + }); }, methods: { + openMenuList(t, l, frame) { + this.showMenu = true; + this.menuTop = t; + this.menuLeft = l; + }, + closeMenuList() { + this.showMenu = false; + }, //resize mousedown(e) { this.resizeObj.mouX = e.clientX; @@ -85,8 +117,11 @@ } e = e || window.event; e.preventDefault(); - this.width = this.resizeObj.startW + e.clientX - this.resizeObj.mouX; - this.height = this.resizeObj.startH + e.clientY - this.resizeObj.mouY; + 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) }, mouseup() { @@ -94,58 +129,77 @@ document.onmousemove = null; }, //resize end + //閲嶆柊鍔犺浇搴旂敤 + refreshApp() { + window.frames[this.data.name].location.reload() + }, closeFrame: function () { this.$store.dispatch('desktop/closeFrame', this.data); - this.refreshDock(); + //this.refreshDock(); + this.$store.commit('desktop/highlight') + }, changeFullScreen: function () { this.fullScreen = !this.fullScreen; }, - frameClick: function () { - debugger + frameClick(e) { this.$store.commit('desktop/refreshFrame', this.data); }, - minFrame (data,e) { - //鎵惧埌褰撳墠鐨刬frame - let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0); - //淇濆瓨褰撳墠搴旂敤蹇収 - html2canvas(curIframe.contentWindow.document.body, { - dpi: window.devicePixelRatio * 4, - logging: true, //鏌ョ湅html2canvas鍐呴儴鎵ц娴佺▼ - removeContainer: true, - imageTimeout: 0, - useCORS: true //寮�鍚法鍩熼厤缃� - }).then(canvas => { - let shotSrc = canvas.toDataURL(); - this.$store.commit('desktop/addMinDock', { - id: this.data.id, - src: this.data.icon, - alt: this.data.title, - type: "3", - screenshot: shotSrc - }); + minFrame(data, e) { + + //if(data.name=='cameraVideo'||data.name=='search'||data.name=='library'||data.name=='cameraAccess'||data.name=='dataStack'){ + //let shotSrc = canvas.toDataURL(); + this.$store.commit('desktop/addMinDock', { + id: this.data.id, + src: this.data.icon, + alt: this.data.title, + type: "3", + //screenshot: shotSrc }); return false; - //this.refreshDock(); + //} + //鎵惧埌褰撳墠鐨刬frame + //let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0); + //淇濆瓨褰撳墠搴旂敤蹇収 + // html2canvas(curIframe.contentWindow.document.body, { + // dpi: window.devicePixelRatio * 4, + // logging: true, //鏌ョ湅html2canvas鍐呴儴鎵ц娴佺▼ + // removeContainer: true, + // imageTimeout: 0, + // useCORS: true, //寮�鍚法鍩熼厤缃� + // //allowTaint: true + // }).then(canvas => { + // let shotSrc = canvas.toDataURL(); + // this.$store.commit('desktop/addMinDock', { + // id: this.data.id, + // src: this.data.icon, + // alt: this.data.title, + // type: "3", + // screenshot: shotSrc + // }); + // }).catch(e=>{ + // console.log(e); + // this.$store.commit('desktop/addMinDock', { + // id: this.data.id, + // src: this.data.icon, + // alt: this.data.title, + // type: "3", + // screenshot: '' + // }); + // }); + //return false; + }, - refreshDock: function () { - setTimeout(function () { - const dockItems = document.getElementsByClassName('dock-item'); - const dockMask = document.getElementsByClassName('dock-mask')[0]; - for (let i = 0; i < dockItems.length; i++) { - dockItems[i].width = 60; - } - //dockMask.style.width = dockItems.length * 60 + 40 + 'px'; - }, 10); - } + }, directives: { - drag(el) { - - if (el.dragLock) { + drag(el, binding) { + if (el.dragLock || binding.arg) { 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; @@ -156,18 +210,19 @@ let toLeft = e.clientX - disx; let toTop = e.clientY - disy; //杈圭晫澶勭悊 - if(toLeft <= 0 ){ - toLeft = 0 - }else if(toLeft >= document.body.getBoundingClientRect().width-40){ - toLeft = document.body.getBoundingClientRect().width-40; + 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; } el.parentElement.style.left = toLeft + 'px'; - if(toTop <= 40 ){ + if (toTop <= 40) { toTop = 40 - }else if(toTop >= document.body.getBoundingClientRect().height-40){ - toTop = document.body.getBoundingClientRect().height-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; @@ -210,27 +265,36 @@ } .d-frame { position: fixed; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .d-frame.d-frame-full { width: 100% !important; height: 100% !important; left: 0 !important; - top: 0 !important; + top: 40px !important; } .d-frame .d-frame-title { + /* min-width: 378px; */ height: 30px; background-color: #e0e0e0; border-radius: 4px 4px 0 0; border-top: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; - } -.d-frame-title .icon-close{ +.iframe-mask { + position: absolute; + top: 30px; + left: 0; + width: 100%; + height: 100%; + background: transparent; +} +.d-frame-title .icon-close { border-radius: 0 4px 0 0; - background:url('/images/desktop/header-icon/close.png') no-repeat 50%; + background: url("/images/desktop/header-icon/close.png") no-repeat 50%; } .d-frame-title-operation { position: absolute; @@ -248,14 +312,15 @@ text-align: center; vertical-align: middle; cursor: pointer; + line-height: 28px; } -.d-frame-title-operation i:hover{ +.d-frame-title-operation i:hover { background-color: #c7cacf; } -.d-frame-title-operation .icon-close:hover{ +.d-frame-title-operation .icon-close:hover { background-color: red; - background-image: url('/images/desktop/header-icon/close-hover.png') + background-image: url("/images/desktop/header-icon/close-hover.png"); } /* .d-frame-title-operation:hover .d-frame-operation-close::before { @@ -266,17 +331,9 @@ color: #fbb450; } -/* .d-frame-title-operation:hover .d-frame-operation-minus::before { - content: "\f056"; -} */ - .d-frame-operation-full { color: #00d800; } - -/* .d-frame-title-operation:hover .d-frame-operation-full::before { - content: "\f055"; -} */ .d-frame-title-content { line-height: 30px; @@ -306,7 +363,9 @@ border-radius: 0 0 4px 4px; background-color: #fff; } - +.d-frame-full .d-frame-content{ + height: calc(100% - 71px); +} .d-frame-content iframe { width: 100%; height: 100%; @@ -323,4 +382,21 @@ cursor: nwse-resize; background: url("/images/desktop/resize.png") no-repeat; } +.menuList { + background: #fff; + position: absolute; + z-index: 100; + width: 180px; + text-align: left; + border: 1px solid #ccc; +} +.menuList li { + line-height: 28px; + height: 28px; + padding-left: 24px; + background: #fff; +} +.menuList li:hover { + background: rgba(152, 170, 190, 0.7); +} </style> \ No newline at end of file -- Gitblit v1.8.0