桌面主菜单

src/App.vue

@@ -3,7 +3,7 @@
     <div class="contain">
       <Header></Header>
       <Desktop :defaultZIndex="defaultZIndex"></Desktop>
-      <DesktopAppView></DesktopAppView>
+      <DesktopAppView :defaultZIndex="defaultZIndex"></DesktopAppView>
     </div>
   </div>
 </template>

src/component/Desktop/FixWindow/index.vue

@@ -283,7 +283,7 @@ export default {
     PortaSelectPosition,
   },
   mounted() {
-    this.$bus.on("changeFixWindowZIndex", this.changeFixWindowZIndex);
+    // this.$bus.on("changeFixWindowZIndex", this.changeFixWindowZIndex);
     this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
     this.$bus.on("changeThumbHeight", this.changeThumbHeight);
     this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
@@ -322,13 +322,6 @@ export default {
         this.$bus.emit("fixWindowZIndexMax", true);
       }
     },
-    // 修改changeFixWindow
-    changeFixWindowZIndex() {
-      if (this.zIndex != 999999999) {
-        this.zIndex = 9040;
-      }
-      if (this.cls != "deactve-win") this.cls = "deactve-win";
-    },
     //点击进度条
     mousedownProgress(e) {
       let el = document.querySelector(".v-widget-window .ps__thumb-y");
@@ -436,11 +429,6 @@ export default {
         this.thumbYDisplay = "block";
         this.thumbYHeight = 'calc((100vh - 52px) / 2)'
       }
-      // if(this.thumbYHeight >= el.offsetHeight){
-      //   this.bottom = '0'
-      //   this.thumbYDisplay = 'block'
-      //   this.thumbYHeight = 'calc((100vh - 52px) / 2)'
-      // }
       this.selectedNum = selectedNum;
     },
     //点击固定窗口头部
@@ -502,14 +490,17 @@ export default {
           e.srcElement.className = e.srcElement.className.replace(' pressed','')
         }
         this.display = "none";
-        this.zIndex = this.defaultZIndex - 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-        this.$bus.emit("fixWindowZIndexMax", false);
+        if(this.zIndex >= this.defaultZIndex){
+           this.zIndex = this.defaultZIndex - 10;
+          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+          this.$bus.emit("fixWindowZIndexMax", false);
+        }
         
       } else {
         this.display = "block";
         this.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        console.log(this.defaultZIndex)
         this.$bus.emit("fixWindowZIndexMax", true);
         if(! e.srcElement.className.includes(' pressed')){
           e.srcElement.className = e.srcElement.className + ' pressed'
@@ -519,9 +510,11 @@ export default {
     //最小化固定窗口
     minimizeFixWndow() {
       this.display = "none";
-      this.zIndex = this.defaultZIndex - 10;
+      if(this.zIndex >= this.defaultZIndex){
+        this.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
       this.$bus.emit("fixWindowZIndexMax", false);
+      }
       let el = document.querySelector('.tray-item.widget-button')
       if(el.className && el.className.includes(' pressed')){
         el.className = el.className.replace(' pressed','')
@@ -604,7 +597,6 @@ export default {
     }
   },
   beforeDestroy() {
-    this.$bus.off("changeFixWindowZIndex", this.changeFixWindowZIndex);
   },
   name: "FixWindow",
 };

src/component/Desktop/Menu/index.vue

@@ -23,6 +23,7 @@ export default {
     this.$bus.on('clickShortcutItem',this.clickShortcutItem)
     this.$bus.on("changeDialogWindow",this.changeDialogWindow)
     this.$bus.on('closeDialogWindow',this.closeDialogWindow)
+    this.$bus.emit('showZindexMaxMenuItem',this.showZindexMaxMenuItem)
   },
   methods:{
     // 点击大图标打开小图标
@@ -38,31 +39,41 @@ export default {
         })
         if(this.menuList.length){
           this.isHaveMenuItem = this.menuList.some(menu => {
-            return menu.spacialCls === spacialCls 
+            return menu.spacialCls === spacialCls
           })
         }
       }
+      console.log(spacialCls)
       if(!this.isHaveMenuItem){
         let menuItem = {
           id:new Date().getTime(),
           spacialCls:spacialCls,
           imgUrl:obj.imgUrl,
+          zIndex:obj.zIndex,
+          title:obj.title,
           backgroundColor:'rgba(225,225,225,0.5)'
         }
         this.menuList.push(menuItem)
+        this.$bus.emit('menuItemChanged',this.menuList)
       }
       
     },
     // 点击小图标打开大图标
     clickMenuItem(imgUrl,menuIndex){
-      this.$bus.emit('clickMenuItem',imgUrl)
       this.menuList.forEach(menu => {
         menu.backgroundColor = 'rgba(50,60,70,0.9)'
       })
        this.menuList[menuIndex].backgroundColor = 'rgba(225,225,225,0.5)'
+       console.log(this.menuList[menuIndex].spacialCls)
+      // 打开个人设置页面
+      if(this.menuList[menuIndex].spacialCls === 'personalSetting'){
+        this.$bus.emit('openUserSetting')
+      }
+      this.$bus.emit('clickMenuItem',imgUrl)
     },
     // 点击弹出窗页面切换小图标选中状态
     changeDialogWindow(menu){
+      console.log(menu)
       if(typeof(menu) == 'string'){
         this.getMenuItem(menu)
         if(this.menuIndex != -1){
@@ -104,6 +115,10 @@ export default {
       this.menuIndex = this.menuList.findIndex(item =>{
         return item.imgUrl === imgUrl
       })
+    },
+    // 显示zindex最大的menuItem
+    showZindexMaxMenuItem(){
+      console.log(this.menuList)
     }
   },
   beforeDestroy() {

src/component/Desktop/NotifyShowall/index.vue

@@ -19,9 +19,9 @@
       </div>
 
       <div class="window-header-tool-wrapper light">
-        <div class="tool maximize" @click="maxWindow" v-if="!windowIsMax"></div>
-        <div class="tool restore" @click="minWindow" v-else></div>
-        <div class="tool close" @click="closeNotifyShowall"></div>
+        <div class="tool maximize" @click.stop="maxWindow" v-if="!windowIsMax"></div>
+        <div class="tool restore" @click.stop="minWindow" v-else></div>
+        <div class="tool close" @click.stop="closeNotifyShowall"></div>
       </div>
     </div>
     <div class="v-window-body">
@@ -43,7 +43,7 @@
               "
             >
               <div class="v-toolbar tbar-wrapper default-tbar">
-                <button type="button" class="v-btn v-btn-grey" @click="reload">
+                <button type="button" class="v-btn v-btn-grey" @click.stop="reload">
                   <span> 刷新 </span>
                 </button>
                 <button type="button" class="v-btn v-btn-grey">
@@ -280,7 +280,7 @@
                           {{ notifyShowallDetail.detailMessageList.length }}
                           个项目
                         </div>
-                        <div class="v-pagination-refresh" @click="reload"></div>
+                        <div class="v-pagination-refresh" @click.stop="reload"></div>
                       </div>
                     </div>
                     <div
@@ -309,7 +309,7 @@
                 <button
                   type="button"
                   class="v-btn v-btn-footbar v-btn-grey"
-                  @click="closeNotifyShowall"
+                  @click.stop="closeNotifyShowall"
                 >
                   <span> 关闭 </span>
                 </button>
@@ -396,6 +396,7 @@ export default {
     // 关闭本页面
     closeNotifyShowall() {
       this.display = "none";
+        this.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
     // 点击本页面

src/component/Desktop/NotifyTrayPanel/index.vue

@@ -90,7 +90,7 @@
                       <a
                         class="link-font"
                         @click.stop="
-                          openNotifyDetail(detailMessage, detailMessageIndex)
+                          openNotifyDetail(detailMessage, detailMessageIndex,$event)
                         "
                         >详情</a
                       >
@@ -490,14 +490,16 @@ export default {
       window.removeEventListener('click',this.hiddenNotifyAndchangeIconColor,true)
     },
     //打开详情页面
-    openNotifyDetail(detailMessage, detailMessageIndex) {
-      this.hiddenNotifyAndchangeIconColor()
+    openNotifyDetail(detailMessage, detailMessageIndex,e) {
+      console.log(e)
+      this.hiddenNotifyAndchangeIconColor(e)
+      // openNotifyDetail(detailMessage, detailMessageIndex,e) 
       this.$bus.emit("openNotifyDetail", detailMessage);
       this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
     },
     // 打开显示全部页面
-    openNotifyShowall() {
-      this.hiddenNotifyAndchangeIconColor()
+    openNotifyShowall(e) {
+      this.hiddenNotifyAndchangeIconColor(e)
       this.$bus.emit(
         "openNotifyShowall",
         this.notifyTrayPanelDetail.detailMessageList
@@ -518,8 +520,8 @@ export default {
       this.notifyTrayPanelDetail.detailMessageList = [];
     },
     // 打开设置页面
-    openNotifySetting(){
-      this.hiddenNotifyAndchangeIconColor()
+    openNotifySetting(e){
+      this.hiddenNotifyAndchangeIconColor(e)
       this.$bus.emit('openNotifySetting')
     }
   },

src/component/Desktop/NotifyTrayPanelDetail/index.vue

@@ -185,6 +185,8 @@ export default {
     // 关闭本页面
     closeNotifyDetail() {
       this.display = "none";
+      this.zIndex = this.defaultZIndex - 10;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
   },
   watch:{

src/component/Desktop/Shortcut/ResizablePinned/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 菜单弹窗 -->
-  <div>
+  <div v-if="resizablePinnedDetail.detailMessageList.length">
     <div
       class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
       style="
@@ -23,9 +23,7 @@
         detailMessage, detailMessageIndex
       ) in resizablePinnedDetail.detailMessageList"
       :key="detailMessage.id"
-      @click="
-        changeDialogWindow(detailMessage.titleImgUrl, detailMessageIndex)
-      "
+      @click="changeDialogMenuWindow(detailMessage.title)"
     >
       <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
       <div class="x-window-tl" @click="moveWindowPosition">
@@ -54,7 +52,7 @@
                 <div
                   class="x-tool x-tool-maximize"
                   role="option"
-                  @click.stop="maxMizeWindow(detailMessageIndex)"
+                  @click.stop="maxiSizeWindow(detailMessageIndex)"
                   :style="{ display: `${detailMessage.iconMaximize}` }"
                 >
                   &nbsp;
@@ -62,7 +60,7 @@
                 <div
                   class="x-tool x-tool-minimize"
                   role="option"
-                  @click.stop="minMizeWindow(detailMessageIndex)"
+                  @click.stop="miniMizeWindow(detailMessageIndex)"
                 >
                   &nbsp;
                 </div>
@@ -218,84 +216,84 @@
 
 <script>
 export default {
-  props: ["defaultZIndex"],
+  props: ["defaultZIndex",'detailMessageList'],
   data() {
     return {
       resizablePinnedDetail: {
         detailMessageList: [
-          {
-            id: "0",
-            width: "1254px",
-            height: "calc(100vh - 80px)",
-            minHeight: "560px",
-            title: "套件中心",
-            spacialCls: "tjCenter",
-            cls: "deactive-win",
-            titleImgUrl: "../../../../public/image/index/tjCenter.png",
-            display: "none",
-            zIndex: 9053,
-            iconRestore: "none",
-            iconMaximize: "block",
-          },
-          {
-            id: "1",
-            width: "1150px",
-            height: "calc(100vh - 120px)",
-            minHeight: "520px",
-            title: "控制中心",
-            spacialCls: "controlCenter",
-            cls: "deactive-win",
-            titleImgUrl: "../../../../public/image/index/controlCenter.png",
-            display: "none",
-            zIndex: 9053,
-            iconRestore: "none",
-            iconMaximize: "block",
-          },
-          {
-            id: "2",
-            width: "1010px",
-            height: "calc(100vh - 200px)",
-            minHeight: "440px",
-            title: "File Station",
-            spacialCls: "file",
-            cls: "deactive-win",
-            titleImgUrl: "../../../../public/image/index/file.png",
-            display: "none",
-            zIndex: 9053,
-            iconRestore: "none",
-            iconMaximize: "block",
-          },
-          {
-            id: "3",
-            width: "1010px",
-            height: "calc(100vh - 220px)",
-            minHeight: "420px",
-            title: "DSM 说明",
-            spacialCls: "question",
-            cls: "deactive-win",
-            titleImgUrl: "../../../../public/image/index/question.png",
-            display: "none",
-            zIndex: 9053,
-            iconRestore: "none",
-            iconMaximize: "block",
-          },
+          // {
+          //   id: "0",
+          //   width: "1254px",
+          //   height: "calc(100vh - 80px)",
+          //   minHeight: "560px",
+          //   title: "套件中心",
+          //   spacialCls: "tjCenter",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/tjCenter.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+          // {
+          //   id: "1",
+          //   width: "1150px",
+          //   height: "calc(100vh - 120px)",
+          //   minHeight: "520px",
+          //   title: "控制中心",
+          //   spacialCls: "controlCenter",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/controlCenter.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+          // {
+          //   id: "2",
+          //   width: "1010px",
+          //   height: "calc(100vh - 200px)",
+          //   minHeight: "440px",
+          //   title: "File Station",
+          //   spacialCls: "file",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/file.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+          // {
+          //   id: "3",
+          //   width: "1010px",
+          //   height: "calc(100vh - 220px)",
+          //   minHeight: "420px",
+          //   title: "DSM 说明",
+          //   spacialCls: "question",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/question.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
         ],
       },
       lastCheckIndex: -1,
       openWindowNum: 0,
       detailMessageWidthList: [
-        {
-          width: "1254px",
-        },
-        {
-          width: "1150px",
-        },
-        {
-          width: "1010px",
-        },
-        {
-          width: "1010px",
-        },
+        // {
+        //   width: "1254px",
+        // },
+        // {
+        //   width: "1150px",
+        // },
+        // {
+        //   width: "1010px",
+        // },
+        // {
+        //   width: "1010px",
+        // },
       ],
       fixWindowZIndedxIsMax: false,
     };
@@ -303,11 +301,12 @@ export default {
   mounted() {
     this.$bus.on("clickShortcutItem", this.clickShortcutItem);
     this.$bus.on("clickMenuItem", this.clickMenuItem);
-    // this.$bus.on("fixWindowZIndexMax", this.fixWindowZIndexMax);
-    // this.$bus.on(
-    //   "changeMinDefaultZindexWindowCls",
-    //   this.changeMinDefaultZindexWindowCls
-    // );
+    this.$bus.on("openDSMWindow", this.openDSMWindow);
+    this.$bus.on("changeDialogMenuWindow", this.changeDialogMenuWindow);
+    this.resizablePinnedDetail.detailMessageList = JSON.parse(JSON.stringify(this.detailMessageList))
+     JSON.parse(JSON.stringify(this.detailMessageList)).forEach((item,index)=>{
+      this.detailMessageWidthList[index] = item.width
+    })
   },
   methods: {
     // 点击大菜单图标
@@ -321,74 +320,83 @@ export default {
         this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
           return item.titleImgUrl == imgUrl;
         });
-      this.openDialogWindow(detailMessageIndex);
+      if (detailMessageIndex != -1) {
+        this.openDialogWindow(detailMessageIndex);
+      }
     },
     // 打开弹出窗口
     openDialogWindow(detailMessageIndex) {
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
-        "block";
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
-        "active-win";
-      this.$bus.emit("changeFixWindowZIndex");
-
+      console.log(detailMessageIndex);
+      if (
+        (!detailMessageIndex && detailMessageIndex != 0) ||
+        detailMessageIndex == -1
+      ) {
+        return;
+      }
       if (
-        this.lastCheckIndex == detailMessageIndex &&
-        this.zIndex >= this.defaultZIndex
+        this.lastCheckIndex == detailMessageIndex ||
+        this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls === 'active-win'
       ) {
         return;
       }
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
+        "block";
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
+        "active-win";
+      // this.$bus.emit("changeFixWindowZIndex");
+     
+      console.log('1121')
       this.resizablePinnedDetail.detailMessageList.forEach((item) => {
         item.cls = "deactive-win";
       });
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
         "active-win";
       let defaultZIndex = this.defaultZIndex + 10;
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
+        defaultZIndex;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-      // this.defaultZIndex = this.defaultZIndex + 10
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
         defaultZIndex;
       this.lastCheckIndex = detailMessageIndex;
-      this.$bus.emit(
-          "changeDialogWindow",
-          this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
-        );
-      // this.changeZIndexMaxMenuItemCls()
-      // this.$bus.emit('dialogWindowZIndexIsMax',true)
-      // this.$bus.emit("fixWindowZIndexMax", false);
     },
-    // 切换弹出窗口
-    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);
-
-      // this.$bus.emit("fixWindowZIndexMax", false);
-      // this.changeZIndexMaxMenuItemCls()
+    // 切换弹出的menu窗口
+    changeDialogMenuWindow(title) {
+      console.log(title)
+      let menuIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
+        return item.title === title
+      })
+      if((menuIndex || menuIndex == 0) && menuIndex != -1){
+        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 =
+      let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
+        return item.title === 'DSM 说明'
+      })
+      if(detailMessageIndex && detailMessageIndex != -1){
+        this.openDialogWindow(detailMessageIndex);
+      }
+      
+        console.log('title',this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+        .title)
+      let obj={
+        imgUrl:
         this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
-          .spacialCls;
-      let obj = { imgUrl, spacialCls };
-      // this.$bus.emit("changeDialogWindow", obj);
+          .titleImgUrl,
+        spacialCls: this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+          .spacialCls,
+        title: this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+        .title,
+        zIndex: this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+          .zIndex
+      } 
+      this.$bus.emit(
+          "changeDialogWindow",obj
+        );
     },
     // 最小化弹出框口
-    minMizeWindow(detailMessageIndex) {
+    miniMizeWindow(detailMessageIndex) {
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
         "none";
       this.countOpenWindowNum();
@@ -404,16 +412,10 @@ export default {
           detailMessageIndex
         ].zIndex = this.defaultZIndex - 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-        let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
-          return item.title === detailMessageList[detailMessageList.length - 1].title
-        })
-        if(index != -1){
-          this.openDialogWindow(index);
-        }
       }
     },
     //最大化弹出窗口
-    maxMizeWindow(detailMessageIndex) {
+    maxiSizeWindow(detailMessageIndex) {
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
         "100%";
       this.resizablePinnedDetail.detailMessageList[
@@ -423,21 +425,6 @@ export default {
         detailMessageIndex
       ].iconMaximize = "none";
       this.openDialogWindow(detailMessageIndex);
-
-      //  let detailMessageList =
-      //   this.resizablePinnedDetail.detailMessageList.filter((item) => {
-      //     return item.display == "block";
-      //   });
-      // if (detailMessageList.length) {
-      //   detailMessageList = JSON.parse(
-      //     JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-      //   );
-      // // let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
-      // //   return item.title === detailMessageList[detailMessageList.length - 1].title
-      // // })
-      // // if(index != -1){
-      // //   }
-      // }
     },
     //恢复弹出窗口宽度
     restoreMizeWindow(detailMessageIndex) {
@@ -448,7 +435,7 @@ export default {
       ].iconRestore = "none";
       this.resizablePinnedDetail.detailMessageList[
         detailMessageIndex
-      ].iconMaximize = "block"; 
+      ].iconMaximize = "block";
       this.countOpenWindowNum();
       this.openDialogWindow(detailMessageIndex);
     },
@@ -472,16 +459,6 @@ export default {
           detailMessageIndex
         ].zIndex = this.defaultZIndex - 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-        // this.$bus.emit(
-        //   "changeDialogWindow",
-        //   detailMessageList[detailMessageList.length - 1].titleImgUrl
-        // );
-         let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
-          return item.title === detailMessageList[detailMessageList.length - 1].title
-        })
-        if(index != -1){
-          this.openDialogWindow(index);
-        }
       }
       this.countOpenWindowNum();
     },
@@ -494,14 +471,9 @@ export default {
         }
       });
       if (this.openWindowNum == 0) {
-        // this.$bus.emit('dialogWindowZIndexIsMax',false)
-        // this.$bus.emit("fixWindowZIndexMax", true);
         this.resizablePinnedDetail.detailMessageList.forEach((item) => {
           item.zIndex = 9053;
         });
-
-        this.$bus.emit("changeDefaultZIndex", 9053);
-        // this.defaultZIndex = 9053
       }
     },
     // 按z-index 给menuItem排序
@@ -514,81 +486,7 @@ export default {
     },
     // 移动弹出框窗口位置
     moveWindowPosition(e) {
-      // var x = e.pageX;
-      // var y = e.pageY;
-    },
-    //如果固定窗口的zindex是最大的
-    // fixWindowZIndexMax(bol) {
-    //   this.fixWindowZIndedxIsMax = bol;
-    // },
-    //修改zIndex小于defaultZindex(公共z-index)窗口的类名使其变淡
-    changeMinDefaultZindexWindowCls() {
-      // this.changeZIndexMaxMenuItemCls()
-      //   this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-      //     if (item.zIndex < this.defaultZIndex) {
-      //       item.cls = "deactive-win";
-      //     }
-      //   });
-      //   if (!this.fixWindowZIndedxIsMax) {
-      //     // 找有menuItem 等于 defaultZIndex的下标
-      //     let maxZIndexMenuItemIndex =
-      //       this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
-      //         return item.zIndex >= this.defaultZIndex;
-      //       });
-      //     if (maxZIndexMenuItemIndex != -1) {
-      //       let detailMessageList =
-      //         this.resizablePinnedDetail.detailMessageList.filter((item) => {
-      //           return item.display == "block";
-      //         });
-      //       if (detailMessageList.length) {
-      //         detailMessageList = JSON.parse(
-      //           JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-      //         );
-      //         this.changeFoundMenuItemCls(
-      //           detailMessageList[detailMessageList.length - 1].title
-      //         );
-      //       }
-      //     }
-      //   }
     },
-    // 修改对应标题的menuItem的类名
-    changeFoundMenuItemCls(title) {
-      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-        if (item.title === title) {
-          item.cls = "active-win";
-        } else {
-          item.cls = "deactive-win";
-        }
-      });
-    },
-    //修改zIndex最大及其他的menuItem的类名
-    changeZIndexMenuItemCls() {
-      // if (this.dialogZIndexMaxIndex == -1) {
-      //   this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-      //     item.cls = "deactive-win";
-      //   });
-      // } else {
-      //   let maxZIndexMenuItemIndex =
-      //     this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
-      //       return item.zIndex >= this.defaultZIndex;
-      //     });
-      //   if (maxZIndexMenuItemIndex != -1) {
-      //     let detailMessageList =
-      //       this.resizablePinnedDetail.detailMessageList.filter((item) => {
-      //         return item.display == "block";
-      //       });
-      //     if (detailMessageList.length) {
-      //       detailMessageList = JSON.parse(
-      //         JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-      //       );
-      //       this.changeFoundMenuItemCls(
-      //         detailMessageList[detailMessageList.length - 1].title
-      //       );
-      //     }
-      //   }
-      // }
-    },
-    //
   },
 
   watch: {
@@ -597,10 +495,16 @@ export default {
         this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
           return item.zIndex >= this.defaultZIndex && item.display === "block";
         });
+      console.log(this.dialogZIndexMaxIndex);
       if (
         this.dialogZIndexMaxIndex != -1 &&
         this.dialogZIndexMaxIndex != undefined
       ) {
+        console.log(
+          this.resizablePinnedDetail.detailMessageList[
+            this.dialogZIndexMaxIndex
+          ].titleImgUrl
+        );
         this.resizablePinnedDetail.detailMessageList.forEach((item) => {
           if (item.cls === "active-win") {
             item.cls = "deactive-win";
@@ -609,6 +513,16 @@ export default {
         this.resizablePinnedDetail.detailMessageList[
           this.dialogZIndexMaxIndex
         ].cls = "active-win";
+        console.log('title',this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].title)
+        let obj = {
+          imgUrl: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].titleImgUrl,
+          zIndex: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].zIndex,
+          spacialCls: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].spacialCls,
+          title: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].title,
+        }
+        this.$bus.emit(
+          "changeDialogWindow",obj
+        );
       } else {
         this.resizablePinnedDetail.detailMessageList.forEach((item) => {
           if (item.cls === "active-win") {
@@ -626,5 +540,11 @@ export default {
   name: "ResizablePinned",
 };
 </script>
-<style scope>
+<style scope lang="css">
+@media screen and (max-height: 600px){
+  .x-window.synopkg-window{
+    top:0 !important;
+    transform: translate(-50%,0px) !important;
+  }
+}
 </style>  

src/component/Desktop/Shortcut/index.vue

@@ -32,38 +32,9 @@
           </div>
           <div class="text">{{ detailMessage.title }}</div>
         </li>
-        <!-- 
-                    <li class="launch-icon icon-item controlCenter">
-                        <div class="image" style="background-image: url(../../../public//image/index/controlCenter.png)">
-                            <div class="sds-application-notify-badge-num-wrap">
-                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
-                            </div>
-                        </div>
-                        <div class="text">控制面板</div>
-
-                    </li>
-                    <li class="launch-icon icon-item file">
-                        <div class="image" style="background-image: url(../../../public//image/index/file.png)">
-                            <div class="sds-application-notify-badge-num-wrap">
-                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
-                            </div>
-                        </div>
-                        <div class="text">File Station</div>
-
-                    </li>
-                    <li class="launch-icon icon-item question">
-                        <div class="image" style="background-image: url(../../../public//image/index/question.png)">
-                            <div class="sds-application-notify-badge-num-wrap">
-                                <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
-                            </div>
-                        </div>
-                        <div class="text">DSM 说明</div>
-
-                    </li>
-                -->
       </div>
     </ul>
-    <ResizablePinned :defaultZIndex="defaultZIndex"></ResizablePinned>
+    <ResizablePinned :defaultZIndex="defaultZIndex" :detailMessageList = shortcutDetail.detailMessageList></ResizablePinned>
   </div>
 </template>
 
@@ -76,28 +47,60 @@ export default {
       shortcutDetail: {
         detailMessageList: [
           {
-            id: "0",
+            id: 0,
+            width: "1254px",
+            height: "calc(100vh - 80px)",
+            minHeight: "560px",
             title: "套件中心",
             spacialCls: "tjCenter",
+            cls: "deactive-win",
             titleImgUrl: "../../../../public/image/index/tjCenter.png",
+            display: "none",
+            zIndex: 9053,
+            iconRestore: "none",
+            iconMaximize: "block",
           },
           {
-            id: "1",
+            id: 1,
+            width: "1150px",
+            height: "calc(100vh - 120px)",
+            minHeight: "520px",
             title: "控制中心",
             spacialCls: "controlCenter",
+            cls: "deactive-win",
             titleImgUrl: "../../../../public/image/index/controlCenter.png",
+            display: "none",
+            zIndex: 9053,
+            iconRestore: "none",
+            iconMaximize: "block",
           },
           {
-            id: "2",
+            id: 2,
+            width: "1010px",
+            height: "calc(100vh - 200px)",
+            minHeight: "440px",
             title: "File Station",
             spacialCls: "file",
+            cls: "deactive-win",
             titleImgUrl: "../../../../public/image/index/file.png",
+            display: "none",
+            zIndex: 9053,
+            iconRestore: "none",
+            iconMaximize: "block",
           },
           {
-            id: "3",
+            id: 3,
+            width: "1010px",
+            height: "calc(100vh - 220px)",
+            minHeight: "420px",
             title: "DSM 说明",
             spacialCls: "question",
+            cls: "deactive-win",
             titleImgUrl: "../../../../public/image/index/question.png",
+            display: "none",
+            zIndex: 9053,
+            iconRestore: "none",
+            iconMaximize: "block",
           },
         ],
       },

src/component/Desktop/UserTrayPanel/index.vue

@@ -9,7 +9,7 @@
     <div class="v-trap-focus-indicator"></div>
     <div class="v-trap-focus-body">
       <div class="taskbar-title">{{userTrayPanelDetail.title}}</div>
-      <div class="v-menu-item">
+      <div class="v-menu-item" @click="openUserSetting">
         <span class="menu-icon setting"></span>
         个人设置
       </div>
@@ -78,6 +78,10 @@ export default {
         el.className = el.className.replace(" pressed", "");
       }
       window.removeEventListener('click',this.hiddenUserAndchangeIconColor,true)
+    },
+    // 打开个人设置页面
+    openUserSetting(){
+      this.$bus.emit('openUserSetting')
     }
   },
   components: {},

src/component/Desktop/index.vue

@@ -9,7 +9,7 @@
         <NotifyShowall :defaultZIndex='defaultZIndex'></NotifyShowall>
         <NotifySetting :defaultZIndex='defaultZIndex'></NotifySetting>
         <UserTrayPanel></UserTrayPanel>
-        <UserSetting></UserSetting>
+        <UserSetting :defaultZIndex='defaultZIndex'></UserSetting>
         <DeleteNotifyMessage></DeleteNotifyMessage>
         <Mask></Mask>
     </div>

src/component/DesktopAppView/AppViewItem/index.vue

@@ -0,0 +1,584 @@
+<template>
+  <!-- 菜单弹窗 -->
+  <div v-if="resizablePinnedDetail.detailMessageList.length">
+    <div
+      class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
+      style="
+        position: absolute;
+        visibility: visible;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background: #fff;
+      "
+      :style="{
+        width: detailMessage.width,
+        height: detailMessage.height,
+        minHeight: detailMessage.minHeight,
+        display: detailMessage.display,
+        zIndex: detailMessage.zIndex,
+      }"
+      :class="detailMessage.cls"
+      v-for="(
+        detailMessage, detailMessageIndex
+      ) in resizablePinnedDetail.detailMessageList"
+      :key="detailMessage.id"
+      @click="changeDialogMenuWindow(detailMessage.title)"
+    >
+      <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
+      <div class="x-window-tl" @click="moveWindowPosition">
+        <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)"
+                >
+                  &nbsp;
+                </div>
+                <div
+                  class="x-tool x-tool-restore"
+                  role="option"
+                  :style="{ display: `${detailMessage.iconRestore}` }"
+                  @click.stop="restoreMizeWindow(detailMessageIndex)"
+                >
+                  &nbsp;
+                </div>
+                <div
+                  class="x-tool x-tool-maximize"
+                  role="option"
+                  @click.stop="maxiSizeWindow(detailMessageIndex)"
+                  :style="{ display: `${detailMessage.iconMaximize}` }"
+                >
+                  &nbsp;
+                </div>
+                <div
+                  class="x-tool x-tool-minimize"
+                  role="option"
+                  @click.stop="miniMizeWindow(detailMessageIndex)"
+                >
+                  &nbsp;
+                </div>
+                <div
+                  class="x-tool x-tool-help"
+                  role="option"
+                  @click.stop="openDSMWindow()"
+                >
+                  &nbsp;
+                </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 {
+  props: ["defaultZIndex", "detailMessageList"],
+  data() {
+    return {
+      resizablePinnedDetail: {
+        detailMessageList: [
+          // {
+          //   id: "0",
+          //   width: "1254px",
+          //   height: "calc(100vh - 80px)",
+          //   minHeight: "560px",
+          //   title: "套件中心",
+          //   spacialCls: "tjCenter",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/tjCenter.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+          // {
+          //   id: "1",
+          //   width: "1150px",
+          //   height: "calc(100vh - 120px)",
+          //   minHeight: "520px",
+          //   title: "控制中心",
+          //   spacialCls: "controlCenter",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/controlCenter.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+          // {
+          //   id: "2",
+          //   width: "1010px",
+          //   height: "calc(100vh - 200px)",
+          //   minHeight: "440px",
+          //   title: "File Station",
+          //   spacialCls: "file",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/file.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+          // {
+          //   id: "3",
+          //   width: "1010px",
+          //   height: "calc(100vh - 220px)",
+          //   minHeight: "420px",
+          //   title: "DSM 说明",
+          //   spacialCls: "question",
+          //   cls: "deactive-win",
+          //   titleImgUrl: "../../../../public/image/index/question.png",
+          //   display: "none",
+          //   zIndex: 9053,
+          //   iconRestore: "none",
+          //   iconMaximize: "block",
+          // },
+        ],
+      },
+      lastCheckIndex: -1,
+      openWindowNum: 0,
+      detailMessageWidthList: [
+        // {
+        //   width: "1254px",
+        // },
+        // {
+        //   width: "1150px",
+        // },
+        // {
+        //   width: "1010px",
+        // },
+        // {
+        //   width: "1010px",
+        // },
+      ],
+      fixWindowZIndedxIsMax: false,
+      // 已经被打开的弹出窗口
+      openedmenuList: [],
+    };
+  },
+  mounted() {
+    this.$bus.on("clickAppViewItem", this.clickAppViewItem);
+    this.$bus.on("clickMenuItem", this.clickMenuItem);
+    this.$bus.on("openDSMWindow", this.openDSMWindow);
+    this.$bus.on("changeDialogMenuWindow", this.changeDialogMenuWindow);
+    this.$bus.on("menuItemChanged", this.menuItemChanged);
+    this.resizablePinnedDetail.detailMessageList = JSON.parse(
+      JSON.stringify(this.detailMessageList)
+    );
+    JSON.parse(JSON.stringify(this.detailMessageList)).forEach(
+      (item, index) => {
+        this.detailMessageWidthList[index] = item.width;
+      }
+    );
+  },
+  methods: {
+    // 点击大菜单图标
+    clickAppViewItem(obj) {
+      let { detailMessageIndex } = obj;
+      this.openDialogWindow(detailMessageIndex);
+    },
+    // 点击小菜单图标
+    clickMenuItem(imgUrl) {
+      let detailMessageIndex =
+        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
+          return item.titleImgUrl == imgUrl;
+        });
+      if (detailMessageIndex != -1) {
+        this.openDialogWindow(detailMessageIndex);
+      }
+    },
+    // 打开弹出窗口
+    openDialogWindow(detailMessageIndex) {
+        console.log(this.openedmenuList)
+      let repeatDialog = this.openedmenuList.some((item) => {
+          console.log(item.title)
+        return (
+          item.title ===
+          this.resizablePinnedDetail.detailMessageList[detailMessageIndex].title
+        );
+      });
+      console.log(
+        repeatDialog,
+        this.resizablePinnedDetail.detailMessageList[detailMessageIndex].title
+      );
+      console.log(
+        (!detailMessageIndex && detailMessageIndex != 0) ||
+          detailMessageIndex == -1 ||
+          this.lastCheckIndex == detailMessageIndex ||
+          repeatDialog
+      );
+      if (
+        (!detailMessageIndex && detailMessageIndex != 0) ||
+        detailMessageIndex == -1 ||
+        this.lastCheckIndex == detailMessageIndex ||
+        this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls ===
+          "active-win" ||
+        repeatDialog
+      ) {
+        return;
+      }
+      console.log(11231)
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
+        "block";
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
+        "active-win";
+      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
+        item.cls = "deactive-win";
+      });
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
+        "active-win";
+      let defaultZIndex = this.defaultZIndex + 10;
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
+        defaultZIndex;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
+        defaultZIndex;
+      this.lastCheckIndex = detailMessageIndex;
+    },
+    // 切换弹出的menu窗口
+    changeDialogMenuWindow(title) {
+      console.log(title);
+      let menuIndex = this.resizablePinnedDetail.detailMessageList.findIndex(
+        (item) => {
+          return item.title === title;
+        }
+      );
+      if ((menuIndex || menuIndex == 0) && menuIndex != -1) {
+        this.openDialogWindow(menuIndex);
+      }
+    },
+    // 打开DSM 说明
+    openDSMWindow() {
+      let detailMessageIndex =
+        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
+          return item.title === "DSM 说明";
+        });
+      if (detailMessageIndex && detailMessageIndex != -1) {
+        this.openDialogWindow(detailMessageIndex);
+      }
+      let obj = {
+        imgUrl:
+          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+            .titleImgUrl,
+        spacialCls:
+          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+            .spacialCls,
+        title:
+          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+            .title,
+        zIndex:
+          this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
+            .zIndex,
+      };
+      this.$bus.emit("changeDialogWindow", obj);
+    },
+    // 最小化弹出框口
+    miniMizeWindow(detailMessageIndex) {
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
+        "none";
+      this.countOpenWindowNum();
+      let detailMessageList =
+        this.resizablePinnedDetail.detailMessageList.filter((item) => {
+          return item.display == "block";
+        });
+      if (detailMessageList.length) {
+        detailMessageList = JSON.parse(
+          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
+        );
+        this.resizablePinnedDetail.detailMessageList[
+          detailMessageIndex
+        ].zIndex = this.defaultZIndex - 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      }
+    },
+    //最大化弹出窗口
+    maxiSizeWindow(detailMessageIndex) {
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
+        "100%";
+      this.resizablePinnedDetail.detailMessageList[
+        detailMessageIndex
+      ].iconRestore = "block";
+      this.resizablePinnedDetail.detailMessageList[
+        detailMessageIndex
+      ].iconMaximize = "none";
+      this.openDialogWindow(detailMessageIndex);
+    },
+    //恢复弹出窗口宽度
+    restoreMizeWindow(detailMessageIndex) {
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
+        this.detailMessageWidthList[detailMessageIndex].width;
+      this.resizablePinnedDetail.detailMessageList[
+        detailMessageIndex
+      ].iconRestore = "none";
+      this.resizablePinnedDetail.detailMessageList[
+        detailMessageIndex
+      ].iconMaximize = "block";
+      this.countOpenWindowNum();
+      this.openDialogWindow(detailMessageIndex);
+    },
+    //关闭弹出窗口
+    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";
+        });
+      if (detailMessageList.length) {
+        detailMessageList = JSON.parse(
+          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
+        );
+        this.resizablePinnedDetail.detailMessageList[
+          detailMessageIndex
+        ].zIndex = this.defaultZIndex - 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      }
+      this.countOpenWindowNum();
+    },
+    //统计打开的弹出窗口
+    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;
+        });
+      }
+    },
+    // 按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) {},
+    // 小图标被改变了
+    menuItemChanged(menuList) {
+      console.log(menuList);
+      this.openedmenuList = menuList;
+    },
+  },
+
+  watch: {
+    defaultZIndex() {
+      this.dialogZIndexMaxIndex =
+        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
+          return item.zIndex >= this.defaultZIndex && item.display === "block";
+        });
+      console.log(this.dialogZIndexMaxIndex);
+      if (
+        this.dialogZIndexMaxIndex != -1 &&
+        this.dialogZIndexMaxIndex != undefined
+      ) {
+        console.log(
+          this.resizablePinnedDetail.detailMessageList[
+            this.dialogZIndexMaxIndex
+          ].titleImgUrl
+        );
+        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+        this.resizablePinnedDetail.detailMessageList[
+          this.dialogZIndexMaxIndex
+        ].cls = "active-win";
+        let obj = {
+          imgUrl:
+            this.resizablePinnedDetail.detailMessageList[
+              this.dialogZIndexMaxIndex
+            ].titleImgUrl,
+          zIndex:
+            this.resizablePinnedDetail.detailMessageList[
+              this.dialogZIndexMaxIndex
+            ].zIndex,
+          spacialCls:
+            this.resizablePinnedDetail.detailMessageList[
+              this.dialogZIndexMaxIndex
+            ].spacialCls,
+          title:
+            this.resizablePinnedDetail.detailMessageList[
+              this.dialogZIndexMaxIndex
+            ].title,
+        };
+        this.$bus.emit("changeDialogWindow", obj);
+      } else {
+        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+      }
+    },
+  },
+  beforeDestroy() {
+    this.$bus.off("clickShortcutItem", this.clickShortcutItem);
+    this.$bus.off("clickMenuItem", this.clickMenuItem);
+  },
+  components: {},
+  name: "AppViewItem",
+};
+</script>
+<style scope lang="css">
+@media screen and (max-height: 600px) {
+  .x-window.synopkg-window {
+    top: 0 !important;
+    transform: translate(-50%, 0px) !important;
+  }
+}
+</style>