| | |
| | | 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"> |
| | |
| | |  |
| | | </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 |
| | |
| | | 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"> |
| | |
| | | @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> |
| | |
| | | </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 { |
| | |
| | | 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: { |
| | |
| | | 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'){ |
| | |
| | | id: this.data.id, |
| | | src: this.data.icon, |
| | | alt: this.data.title, |
| | | type: "3", |
| | | type: "3" |
| | | //screenshot: shotSrc |
| | | }); |
| | | return false; |
| | | }) |
| | | return false |
| | | //} |
| | | //找到当前的iframe |
| | | //let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0); |
| | |
| | | |
| | | // 菜单栏返回 |
| | | 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> |
| | |
| | | .menuList li:hover { |
| | | background: rgba(152, 170, 190, 0.7); |
| | | } |
| | | </style> |
| | | </style> |