|
|
@@ -0,0 +1,382 @@
|
|
|
+<template>
|
|
|
+ <!-- 菜单弹窗 -->
|
|
|
+ <div>
|
|
|
+ <div class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
|
|
|
+ style="height:100%;position: absolute; visibility: visible; left: 50%; top: 0px;transform: translateX(-50%)"
|
|
|
+ :style="{width:`${detailMessage.width}`,display:detailMessage.display,zIndex:detailMessage.zIndex}"
|
|
|
+ :class="detailMessage.cls"
|
|
|
+ v-for="(detailMessage, detailMessageIndex) in resizablePinnedDetail.detailMessageList" :key="detailMessage.id"
|
|
|
+ @click.stop="changeDialogWindow(detailMessage.titleImgUrl,detailMessageIndex)">
|
|
|
+ <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
|
|
|
+ <div class="x-window-tl">
|
|
|
+ <div class="x-window-tr">
|
|
|
+ <div class="x-window-tc">
|
|
|
+ <div class="x-window-header x-panel-icon x-window-draggable"
|
|
|
+ :style="{backgroundImage: `url(${detailMessage.titleImgUrl})`}">
|
|
|
+ <div class="x-window-toolCt" role="listbox">
|
|
|
+ <div class="x-tool x-tool-close" role="option" @click.stop="closeWindow(detailMessageIndex)">
|
|
|
+ </div>
|
|
|
+ <div class="x-tool x-tool-restore" role="option"
|
|
|
+ :style="{display: `${detailMessage.iconRestore}`}"
|
|
|
+ @click.stop= "restoreMizeWindow(detailMessageIndex)">
|
|
|
+ </div>
|
|
|
+ <div class="x-tool x-tool-maximize" role="option" @click.stop = "maxMizeWindow(detailMessageIndex)"
|
|
|
+ :style="{display: `${detailMessage.iconMaximize}`}"> </div>
|
|
|
+ <div class="x-tool x-tool-minimize" role="option" @click.stop="minMizeWindow(detailMessageIndex)"> </div>
|
|
|
+ <div class="x-tool x-tool-help" role="option" @click.stop="openDSMWindow()">
|
|
|
+ </div>
|
|
|
+ </div><span class="x-window-header-text">{{detailMessage.title}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="x-window-bwrap">
|
|
|
+ <div class="x-window-ml">
|
|
|
+ <div class="x-window-mr">
|
|
|
+ <div class="x-window-mc">
|
|
|
+ <div class="x-window-tbar" style="width: 100%">
|
|
|
+ <div class="x-toolbar x-small-editor synopkg-toolbar syno-ux-toolbar x-toolbar-layout-ct" style="height: 40px; width: 1230px;">
|
|
|
+ <table cellspacing="0" class="x-toolbar-ct">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="x-toolbar-left" align="left">
|
|
|
+ <!--
|
|
|
+ <table cellspacing="0">
|
|
|
+ <tbody>
|
|
|
+ <tr class="x-toolbar-left-row">
|
|
|
+ <td class="x-toolbar-cell"><span cellspacing="0"
|
|
|
+ class="x-btn synopkg-toolbar-back-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
|
|
|
+ style="margin-left: 0px; height: 28px;"><em
|
|
|
+ class=" x-unselectable"><button
|
|
|
+ type="button"
|
|
|
+ class=" x-btn-text synopkg-toolbar-back-icon synopkg-btn-icon"
|
|
|
+ ></button></em></span>
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-cell"><span cellspacing="0"
|
|
|
+ class="x-btn synopkg-toolbar-next-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
|
|
|
+ style="margin-left: 0px; height: 28px;"><em
|
|
|
+ class=" x-unselectable"><button
|
|
|
+ type="button"
|
|
|
+ class=" x-btn-text synopkg-toolbar-next-icon synopkg-btn-icon"
|
|
|
+ ></button></em></span>
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-cell"><span cellspacing="0"
|
|
|
+ class="x-btn syno-ux-button syno-ux-button-default x-btn-icon"
|
|
|
+ style="margin-left: 0px; height: 26px;"><em
|
|
|
+ class=" x-unselectable"><button
|
|
|
+ type="button"
|
|
|
+ class=" x-btn-text synopkg-toolbar-refresh-icon synopkg-btn-icon"
|
|
|
+ ></button></em></span>
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-cell syno-ux-textfilter">
|
|
|
+ <div class="x-form-field-wrap x-form-field-trigger-wrap"
|
|
|
+ style="width: 100%;">
|
|
|
+ <input type="text" size="16"
|
|
|
+ autocomplete="off"
|
|
|
+ class="x-form-text x-form-field syno-ux-textfilter-text x-form-empty-field"
|
|
|
+ placeholder="搜索"
|
|
|
+ style="width: calc((100% - 30px) - 3px);"><button
|
|
|
+ type="button"
|
|
|
+ class="x-form-trigger syno-ux-textfilter-trigger"
|
|
|
+ style="visibility: hidden;"></button>
|
|
|
+ </div>
|
|
|
+ <div role="presentation"
|
|
|
+ class="x-form-hidden-error-msg"></div>
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-cell">
|
|
|
+ <div class="x-form-display-field"
|
|
|
+ style="width: 16px;">
|
|
|
+ </div>
|
|
|
+ <div role="presentation"
|
|
|
+ class="x-form-hidden-error-msg"></div>
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-cell"><span cellspacing="0"
|
|
|
+ class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
|
|
|
+ style="width: auto; margin-left: 0px; height: 26px;"><em
|
|
|
+ class=" x-unselectable"><button
|
|
|
+ type="button"
|
|
|
+ class=" x-btn-text">手动安装</button></em></span>
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-cell"><span cellspacing="0"
|
|
|
+ class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
|
|
|
+ style="width: auto; margin-left: 0px; height: 26px;"><em
|
|
|
+ class=" x-unselectable"><button
|
|
|
+ type="button"
|
|
|
+ class=" x-btn-text">设置</button></em></span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ -->
|
|
|
+ </td>
|
|
|
+ <td class="x-toolbar-right" align="right">
|
|
|
+ <!--
|
|
|
+ <table cellspacing="0" class="x-toolbar-right-ct">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <table cellspacing="0">
|
|
|
+ <tbody>
|
|
|
+ <tr class="x-toolbar-right-row">
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <table cellspacing="0">
|
|
|
+ <tbody>
|
|
|
+ <tr class="x-toolbar-extras-row">
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ -->
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="x-window-body x-border-layout-ct" style="width: 100%; height: 484px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="x-window-bl x-panel-nofooter">
|
|
|
+ <div class="x-window-br">
|
|
|
+ <div class="x-window-bc"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ resizablePinnedDetail:{
|
|
|
+ detailMessageList: [
|
|
|
+ {
|
|
|
+ id:'0',
|
|
|
+ width:'1254px',
|
|
|
+ title:'套件中心',
|
|
|
+ spacialCls:'tjCenter',
|
|
|
+ cls:'',
|
|
|
+ titleImgUrl:'../../../../public/image/index/tjCenter.png',
|
|
|
+ display:'none',
|
|
|
+ zIndex:9053,
|
|
|
+ iconRestore: 'none',
|
|
|
+ iconMaximize: 'block'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'1',
|
|
|
+ width:'1150px',
|
|
|
+ title:'控制中心',
|
|
|
+ spacialCls:'controlCenter',
|
|
|
+ cls:'11111111',
|
|
|
+ titleImgUrl:'../../../../public/image/index/controlCenter.png',
|
|
|
+ display:'none',
|
|
|
+ zIndex:9053,
|
|
|
+ iconRestore: 'none',
|
|
|
+ iconMaximize: 'block'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'2',
|
|
|
+ width:'1010px',
|
|
|
+ title:'File Station',
|
|
|
+ spacialCls:'file',
|
|
|
+ cls:'',
|
|
|
+ titleImgUrl:'../../../../public/image/index/file.png',
|
|
|
+ display:'none',
|
|
|
+ zIndex:9053,
|
|
|
+ iconRestore: 'none',
|
|
|
+ iconMaximize: 'block'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'3',
|
|
|
+ width:'1010px',
|
|
|
+ title:'DSM 说明',
|
|
|
+ spacialCls:'question',
|
|
|
+ cls:'',
|
|
|
+ titleImgUrl:'../../../../public/image/index/question.png',
|
|
|
+ display:'none',
|
|
|
+ zIndex:9053,
|
|
|
+ iconRestore: 'none',
|
|
|
+ iconMaximize: 'block'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ defaultZIndex:9053,
|
|
|
+ lastCheckIndex: -1,
|
|
|
+ openWindowNum:0,
|
|
|
+ detailMessageWidthList:[
|
|
|
+ {
|
|
|
+ width:'1254px',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:'1150px',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:'1010px',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width:'1010px',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.$bus.on('clickShortcutItem',this.clickShortcutItem)
|
|
|
+ this.$bus.on('clickMenuItem',this.clickMenuItem)
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 点击大菜单图标
|
|
|
+ clickShortcutItem(obj){
|
|
|
+ let {detailMessageIndex} = obj
|
|
|
+ this.openDialogWindow(detailMessageIndex)
|
|
|
+ },
|
|
|
+ // 点击小菜单图标
|
|
|
+ clickMenuItem(imgUrl){
|
|
|
+ let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
|
|
|
+ return item.titleImgUrl == imgUrl
|
|
|
+ })
|
|
|
+ this.openDialogWindow(detailMessageIndex)
|
|
|
+ },
|
|
|
+ // 打开弹出窗口
|
|
|
+ openDialogWindow(detailMessageIndex){
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'block'
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls = 'active-win'
|
|
|
+ this.$bus.emit("changeFixWindowZIndex")
|
|
|
+ if(this.lastCheckIndex == detailMessageIndex){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.resizablePinnedDetail.detailMessageList.forEach(item=>{
|
|
|
+ item.cls = ''
|
|
|
+ })
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls= 'active-win'
|
|
|
+ this.defaultZIndex = this.defaultZIndex + 10
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex = this.defaultZIndex
|
|
|
+ this.lastCheckIndex = detailMessageIndex
|
|
|
+ },
|
|
|
+ // 切换弹出窗口
|
|
|
+ changeDialogWindow(imgUrl,menuIndex){
|
|
|
+ // let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
|
|
|
+ // return item.display == 'block'
|
|
|
+ // })
|
|
|
+ // detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
|
|
|
+ // if(this.resizablePinnedDetail.detailMessageList[menuIndex].title == detailMessageList[detailMessageList.length-1].title){
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.$bus.emit("changeDialogWindow",imgUrl)
|
|
|
+ this.openDialogWindow(menuIndex)
|
|
|
+ },
|
|
|
+ // 打开DSM 说明
|
|
|
+ openDSMWindow(){
|
|
|
+ let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
|
|
|
+ return item.title === 'DSM 说明'
|
|
|
+ })
|
|
|
+ this.openDialogWindow(detailMessageIndex)
|
|
|
+ let imgUrl = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
|
|
|
+ let spacialCls = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].spacialCls
|
|
|
+ let obj ={imgUrl,spacialCls}
|
|
|
+ this.$bus.emit("changeDialogWindow",obj)
|
|
|
+ },
|
|
|
+ // 最小化弹出框口
|
|
|
+ minMizeWindow(detailMessageIndex){
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'none'
|
|
|
+ this.countOpenWindowNum()
|
|
|
+ // if(this.openWindowNum == 1){
|
|
|
+ // this.defaultZIndex = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex
|
|
|
+ // this.$bus.emit("changeDialogWindow",this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl)
|
|
|
+ // }else{
|
|
|
+
|
|
|
+ // }
|
|
|
+ // let imgUrl = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
|
|
|
+ // let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
|
|
|
+ // return item.zIndex == (this.defaultZIndex - 10)
|
|
|
+ // })
|
|
|
+ // if(index != -1){
|
|
|
+ // this.defaultZIndex = this.resizablePinnedDetail.detailMessageList[index].zIndex
|
|
|
+ // this.$bus.emit("changeDialogWindow",this.resizablePinnedDetail.detailMessageList[index].titleImgUrl)
|
|
|
+ // }
|
|
|
+ let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
|
|
|
+ return item.display == 'block'
|
|
|
+ })
|
|
|
+ detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
|
|
|
+ if(detailMessageList.length){
|
|
|
+ this.defaultZIndex = this.defaultZIndex -10
|
|
|
+ this.$bus.emit("changeDialogWindow",detailMessageList[detailMessageList.length-1].titleImgUrl)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //最大化弹出窗口
|
|
|
+ maxMizeWindow(detailMessageIndex){
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width = '100%'
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconRestore = 'block'
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconMaximize = 'none'
|
|
|
+ },
|
|
|
+ //恢复弹出窗口宽度
|
|
|
+ restoreMizeWindow(detailMessageIndex){
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width = this.detailMessageWidthList[detailMessageIndex].width
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconRestore = 'none'
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconMaximize = 'block'
|
|
|
+ },
|
|
|
+ //关闭弹出窗口
|
|
|
+ closeWindow(detailMessageIndex){
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'none'
|
|
|
+ let imgUrl = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
|
|
|
+ this.$bus.emit('closeDialogWindow',imgUrl)
|
|
|
+ let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
|
|
|
+ return item.display == 'block'
|
|
|
+ })
|
|
|
+ detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
|
|
|
+ if(detailMessageList.length){
|
|
|
+ this.defaultZIndex = this.defaultZIndex -10
|
|
|
+ this.$bus.emit("changeDialogWindow",detailMessageList[detailMessageList.length-1].titleImgUrl)
|
|
|
+ }
|
|
|
+ } ,
|
|
|
+ //统计打开的弹出窗口
|
|
|
+ countOpenWindowNum(){
|
|
|
+ this.openWindowNum = 0
|
|
|
+ this.resizablePinnedDetail.detailMessageList.forEach(item=>{
|
|
|
+ if(item.display === 'block'){
|
|
|
+ this.openWindowNum ++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(this.openWindowNum == 0){
|
|
|
+ this.resizablePinnedDetail.detailMessageList.forEach(item=>{
|
|
|
+ item.zIndex = 9053
|
|
|
+ })
|
|
|
+ this.defaultZIndex = 9053
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 按z-index 给menuItem排序
|
|
|
+ arraySort (array,key){
|
|
|
+ return array.sort(function(a,b){
|
|
|
+ var x=a[key];//如果要从大到小,把x,y互换就好
|
|
|
+ var y=b[key];
|
|
|
+ return ((x<y)?-1:((x>y)?1:0));
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 移动弹出框窗口位置
|
|
|
+ moveWindowPosition(e){
|
|
|
+ console.log(e.target,e)
|
|
|
+ var x = e.pageX;
|
|
|
+ var y = e.pageY;
|
|
|
+ console.log(x,y)
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ },
|
|
|
+ name:'ResizablePinned',
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
liupeng