From 9ab52e845dd5b20d11d4bcbd65aec56cf1d23035 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期一, 24 八月 2020 19:53:12 +0800 Subject: [PATCH] 自定义菜单添加应用重载 --- src/pages/gb28181/index/App.vue | 14 ++++++- src/pages/heatCamera/index/main.ts | 1 src/pages/desktop/index/components/DFrame.vue | 64 +++++++++++++++++++++++++++++++- src/pages/desktop/index/mock/userData.json | 11 ----- 4 files changed, 74 insertions(+), 16 deletions(-) diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue index 4c9e00a..b4f33a0 100644 --- a/src/pages/desktop/index/components/DFrame.vue +++ b/src/pages/desktop/index/components/DFrame.vue @@ -4,6 +4,7 @@ :class="['d-frame', {'d-frame-full': fullScreen}]" ref="dFrame" :data-id="data.id" + @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"> @@ -28,7 +29,7 @@ </div> <div class="d-frame-content"> <div class="iframe-mask" v-if="data.order!=1" @click="frameClick"></div> - <iframe :src="data.url" v-if="data.url"></iframe> + <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 @@ -37,6 +38,14 @@ @mousemove.prevent="mousemove" @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> @@ -52,6 +61,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, @@ -64,8 +76,35 @@ } } }, - + 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; + debugger + 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; @@ -93,6 +132,10 @@ document.onmousemove = null; }, //resize end + //閲嶆柊鍔犺浇搴旂敤 + refreshApp() { + window.frames[this.data.name].location.reload() + }, closeFrame: function () { debugger this.$store.dispatch('desktop/closeFrame', this.data); @@ -341,4 +384,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,.7); +} </style> \ No newline at end of file diff --git a/src/pages/desktop/index/mock/userData.json b/src/pages/desktop/index/mock/userData.json index 169d84e..3b284b4 100644 --- a/src/pages/desktop/index/mock/userData.json +++ b/src/pages/desktop/index/mock/userData.json @@ -134,17 +134,6 @@ "title": "绯荤粺缁存姢", "width": 760, "height": 534 - }, - { - "id": "19", - "name": "heatCamera", - "src": "../../images/app-mid/algorithm-manage.png", - "alt": "鐑姏鍥�", - "type": "2", - "url": "/view/heatCamera", - "title": "鐑姏鍥�", - "width": 1210, - "height": 534 } ] } diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue index 404eeac..61845c4 100644 --- a/src/pages/gb28181/index/App.vue +++ b/src/pages/gb28181/index/App.vue @@ -1,5 +1,5 @@ <template> - <div class="s-basic-setting"> + <div class="s-basic-setting" @contextmenu.prevent="toOpenMenuList"> <el-menu :default-openeds="openeds" background-color="#fff" @@ -200,7 +200,7 @@ } from './api' import { isPort, isIPv4 } from '@/scripts/validate' - +import bus from '@/plugin/bus' export default { name: 'Gb28181Setting', directives: { @@ -210,6 +210,7 @@ } } }, + data() { return { openeds: ['0'], @@ -261,6 +262,7 @@ } }, mounted() { + //this.$nextTick(()=>{ this.initGB28181Conf() //}) @@ -329,6 +331,14 @@ }, menuClose(){ + }, + toOpenMenuList(e){ + debugger + let t = e.clientY - this.$el.offsetTop+30; + let l = e.clientX-this.$el.offsetLeft; + + window.parent.postMessage({source:location.href.split('/')[location.href.split('/').length-1], trigger: 'contextmenu', menuT:t, menuL:l},"*"); + return false; } } } diff --git a/src/pages/heatCamera/index/main.ts b/src/pages/heatCamera/index/main.ts index 93bc0d1..6bd5dc0 100644 --- a/src/pages/heatCamera/index/main.ts +++ b/src/pages/heatCamera/index/main.ts @@ -1,6 +1,5 @@ import Vue from 'vue'; import ElementUI from 'element-ui'; -//import HeatMap from 'heatmap.js-fixed'; import 'element-ui/lib/theme-chalk/index.css'; import "@/assets/css/element-variables.scss"; -- Gitblit v1.8.0