首页桌面动态效果

public/static/css/style/style.css

@@ -623,7 +623,7 @@ ul.sds-desktop-shortcut {
 }
 
 .v-widget-item.active~.v-widget-item.active {
-    margin-top: 8px;
+    margin-top: 9px;
 }
 
 .v-widget-item .v-widget-item-header {
@@ -1439,7 +1439,7 @@ ul.sds-desktop-shortcut {
 
 /* 空固定窗 */
 .v-widget-list .v-widget-list-empty{
-    margin: auto; 
+    margin: auto;
 }
 
 .v-widget-list .v-widget-list-empty .v-widget-list-empty-img {
@@ -1562,4 +1562,4 @@ ul.sds-desktop-shortcut {
 /* 选择固定窗口的子窗口 */
 .v-menu .v-menu-item-select-selected .v-icon {
     background-image: url(../../../image/index/select.png);
-}
+}

src/component/Desktop/FixWindow/index.vue

@@ -6,11 +6,16 @@
       position: absolute;
       width: 344px;
       height: 466px;
-      bottom: 10px;
-      right: 10px;
       min-height: 164px !important;
     "
-    :style="{ zIndex: zIndex, display: display }"
+    :style="{
+      zIndex: zIndex,
+      display: display,
+      top: top ? top : '',
+      bottom: bottom ? bottom : '',
+      left: left ? left : '',
+      right: right ? right : '',
+    }"
     :class="cls"
     @click="clickFixWindow"
   >
@@ -37,14 +42,17 @@
             class="v-widget-header-tool-icon minimize"
             @click.stop="minimizeFixWndow"
           ></div>
-          <div class="v-widget-header-tool-icon pin"></div>
+          <div
+            class="v-widget-header-tool-icon pin"
+            @click.stop="pinFixWndow"
+          ></div>
           <button
             type="button"
             class="v-btn v-btn-styleless v-btn-grey v-btn-dropdown"
           >
             <span>
               <div
-                class="v-widget-header-tool-icon dock active"
+                class="v-widget-header-tool-icon dock"
                 @click.stop="selectWidgetPosition"
               ></div>
             </span>
@@ -75,6 +83,7 @@
               <Copy></Copy>
 
               <!-- 当打开窗口个数为零时显示 -->
+              <!-- <div class="v-widget-list-empty" :style="{display: selectedNum ? 'none':'flex'}"> -->
               <div class="v-widget-list-empty" v-show="!selectedNum">
                 <div class="v-widget-list-empty-img"></div>
                 <div class="v-widget-list-empty-content">
@@ -129,12 +138,17 @@ import PortalSelectDialogWindow from "../PortalSelectDialogWindow";
 // 弹出位置选择框
 import PortaSelectPosition from "../PortaSelectPosition";
 export default {
+  props: ["defaultZIndex"],
   data() {
     return {
       zIndex: 9040,
       cls: "",
       selectedNum: 2,
       display: "block",
+      top: 0,
+      bottom: "10px",
+      right: "10px",
+      left: 0,
       progrecssFirstClick: {
         lastY: 0,
         clickY: 0,
@@ -207,20 +221,36 @@ export default {
             id: 0,
             title: "右上角",
             cls: "active",
+            top: "47px",
+            bottom: 0,
+            left: 0,
+            right: "10px",
           },
           {
             id: 1,
             title: "右下角",
             cls: "v-menu-item-select-selected selected",
+            top: 0,
+            bottom: "10px",
+            left: 0,
+            right: "10px",
           },
           {
             id: 2,
             title: "左上角",
+            top: "47px",
+            bottom: 0,
+            right: 0,
+            left: "10px",
             cls: "",
           },
           {
             id: 3,
             title: "左下角",
+            top: 0,
+            bottom: "10px",
+            left: "10px",
+            right: 0,
             cls: "",
           },
         ],
@@ -247,7 +277,10 @@ export default {
     this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
     this.$bus.on("changeThumbHeight", this.changeThumbHeight);
     this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
-    this.$bus.on("changeOrHiddenWidgetPosition",this.changeOrHiddenWidgetPosition)
+    this.$bus.on(
+      "changeOrHiddenWidgetPosition",
+      this.changeOrHiddenWidgetPosition
+    );
     let el = document.querySelector(".ps__thumb-y");
     let el2 = document.querySelector(".v-window-header-wrapper");
     el.addEventListener("mouseup", this.mouseupProgress);
@@ -256,13 +289,19 @@ export default {
   methods: {
     //点击固定窗口
     clickFixWindow() {
-      if (this.zIndex == 9040) this.zIndex = 13000;
-      this.cls = "active-win";
+      if (this.zIndex < this.defaultZIndex) {
+        this.zIndex = this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        this.$bus.emit("changeMinDefaultZindexWindowCls");
+        this.$bus.emit("fixWindowZIndexMax", true);
+      }
+      this.dialogWindowZIndexIsMax(false)
     },
     // 修改changeFixWindow
     changeFixWindowZIndex() {
       this.zIndex = 9040;
       if (this.cls != "") this.cls = "";
+      this.dialogWindowZIndexIsMax(true)
     },
     //点击进度条
     mousedownProgress(e) {
@@ -416,21 +455,40 @@ export default {
       let el1 = document.querySelector(".v-widget-list");
       let el2 = document.querySelector(".v-widget-window");
       el.removeEventListener("mousemove", this.mousemoveWidgetHeader);
-      el1.style.display = "block";
+      el1.style.display = "flex";
       el2.className = "v-widget-window syno-sds-widget v-window";
     },
     //显示或隐藏固定窗口
     showOrHiddenWidget() {
+      let el = document.querySelector(".v-widget-header-tool-icon.pin");
       if (this.display === "block") {
-        console.log("block");
         this.display = "none";
+        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);
+        this.$bus.emit("fixWindowZIndexMax", true);
+        this.dialogWindowZIndexIsMax(false)
       }
     },
     //最小化固定窗口
     minimizeFixWndow() {
+      console.log(this.defaultZIndex);
       this.display = "none";
+      console.log("this.defaultZIndex", this.defaultZIndex);
+
+      let el = document.querySelector(".v-widget-header-tool-icon.pin");
+      // if (el.className.includes("active")) {
+      //   this.zIndex = this.defaultZIndex 
+      //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 20);
+      // } else {
+      //   }
+        this.zIndex = this.defaultZIndex - 20;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        this.$bus.emit("fixWindowZIndexMax", false);
     },
     // 显示或隐藏位置选择框
     selectWidgetPosition() {
@@ -441,27 +499,56 @@ export default {
       };
     },
     //改变固定弹出框的位置
-    changeOrHiddenWidgetPosition(obj){
-        console.log(obj)
-        // let widgetItemArray = document.querySelectorAll(".v-widget-item");
-        // Array.from(widgetItemArray)[obj.index].className = obj.cls;
-        this.portalDetail1.detailMessageList[obj.index].cls = obj.cls1;
-        this.portalDetail1.detailMessageList.forEach((item) => {
-            if (item.cls === "v-menu-item-select-selected selected active") {
-            item.cls = "v-menu-item-select-selected selected";
-            } else if (item.cls === "active") {
-            item.cls = "";
-            }
-        });
-        if (
-            this.portalDetail1.detailMessageList[0].cls ===
-            "v-menu-item-select-selected selected"
-        ) {
-            this.portalDetail1.detailMessageList[0].cls =
-            "v-menu-item-select-selected selected active";
-        } else if (this.portalDetail1.detailMessageList[0].cls === "") {
-            this.portalDetail1.detailMessageList[0].cls = "active";
+    changeOrHiddenWidgetPosition(obj) {
+      this.portalDetail1.detailMessageList = obj.detailMessageList;
+      this.portalDetail1.detailMessageList.forEach((item) => {
+        if (item.cls && item.cls.includes("active")) {
+          item.cls.replace("active", "");
         }
+      });
+      let detailMessageItem = this.portalDetail1.detailMessageList[obj.index];
+      this.top = detailMessageItem.top;
+      this.bottom = detailMessageItem.bottom;
+      this.left = detailMessageItem.left;
+      this.right = detailMessageItem.right;
+      let el = document.querySelector(".v-widget-header-tool-icon.dock");
+      el.className = "v-widget-header-tool-icon dock active";
+      if (
+        this.portalDetail1.detailMessageList[0].cls &&
+        this.portalDetail1.detailMessageList[0].cls.includes(
+          "v-menu-item-select-selected selected"
+        )
+      ) {
+        this.portalDetail1.detailMessageList[0].cls =
+          "v-menu-item-select-selected selected active";
+      } else {
+        this.portalDetail1.detailMessageList[0].cls = "active";
+      }
+    },
+    //点击小钉子
+    pinFixWndow() {
+      let el = document.querySelector(".v-widget-header-tool-icon.pin");
+      if (el.className.includes("active")) {
+        el.className = el.className.replace(" active", "");
+        this.$bus.emit("fixWindowZIndexMax", false);
+        this.zIndex = this.defaultZIndex 
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        this.$bus.emit("fixWindowZIndexMax", true);
+      } else {
+        el.className = "v-widget-header-tool-icon pin active";
+        this.zIndex = 999999999;
+        // this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        this.$bus.emit("fixWindowZIndexMax", true);
+        
+      }
+    },
+    //判断弹出窗ZIndex是不是比较大
+    dialogWindowZIndexIsMax(bol){
+      if(bol){
+        this.cls = 'deactive-win'
+      }else{
+        this.cls = 'active-win'
+      }
     },
 
     //节流函数

src/component/Desktop/PortaSelectPosition/index.vue

@@ -26,7 +26,7 @@
             @click.stop="clickPosition(detailMessageIndex)"
           >
             <i class="v-icon v-icon--select"></i>
-            <span class="title">右上角</span>
+            <span class="title">{{ detailMessage.title }}</span>
           </div>
           <!-- <div
             role="menuitem"
@@ -75,20 +75,36 @@ export default {
             id: 0,
             title: "右上角",
             cls: "active",
+            top: "47px",
+            bottom: 0,
+            left: 0,
+            right: "10px",
           },
           {
             id: 1,
             title: "右下角",
             cls: "v-menu-item-select-selected selected",
+            top: 0,
+            bottom: "10px",
+            left: 0,
+            right: "10px",
           },
           {
             id: 2,
             title: "左上角",
+            top: "47px",
+            bottom: 0,
+            right: 0,
+            left: "10px",
             cls: "",
           },
           {
             id: 3,
             title: "左下角",
+            top: 0,
+            bottom: "10px",
+            left: "10px",
+            right: 0,
             cls: "",
           },
         ],
@@ -99,52 +115,52 @@ export default {
     // 鼠标移入选择框的每一项
     mouseenterMenuItem(detailMessageIndex) {
       let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
-      if (cls === "v-menu-item-select-selected selected") {
+      this.clearOtherPositionClassA();
+      if (cls && cls.includes("v-menu-item-select-selected selected")) {
         this.portalDetail.detailMessageList[detailMessageIndex].cls =
           "v-menu-item-select-selected selected active";
-      } else if (cls === "") {
+      } else {
         this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
       }
     },
     // 鼠标移出选择框的每一项
     mouseleaveMenuItem(detailMessageIndex) {
       let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
-      if (cls === "v-menu-item-select-selected selected active") {
+      if (cls && cls.includes("active")) {
         this.portalDetail.detailMessageList[detailMessageIndex].cls =
-          "v-menu-item-select-selected selected";
-      } else if (cls === "active") {
-        this.portalDetail.detailMessageList[detailMessageIndex].cls = "";
+          cls.replace("active", "");
       }
     },
     // 点击选择框的每一项
     clickPosition(detailMessageIndex) {
+      this.clearOtherPositionClassA();
       let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
-      if (cls === "v-menu-item-select-selected selected active") {
-          
-        this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
-        let obj = {
-          index: detailMessageIndex,
-          cls: this.portalDetail.detailMessageList[detailMessageIndex].cls
-        };
-        this.$bus.emit("changeOrHiddenWidgetPosition",obj)
-      } else if (cls === "active" || cls === "") {
-        this.countSelectedMenuItem()  
-        console.log(this.portalDetail.selectedNum)
-        if(this.portalDetail.selectedNum){
-            this.portalDetail.detailMessageList.forEach((item,index)=>{
-                if(item.cls && item.cls.includes('v-menu-item-select-selected selected')){
-                    item.cls = item.cls.replace('v-menu-item-select-selected selected','')
-                    console.log(item.cls,index,detailMessageIndex)
-                }
-            })
+      if (cls && cls.includes("v-menu-item-select-selected selected")) {
+      } else {
+        this.countSelectedMenuItem();
+        if (this.portalDetail.selectedNum) {
+          this.portalDetail.detailMessageList.forEach((item, index) => {
+            if (
+              item.cls &&
+              item.cls.includes("v-menu-item-select-selected selected")
+            ) {
+              if (index != detailMessageIndex) {
+                item.cls = item.cls.replace(
+                  "v-menu-item-select-selected selected",
+                  ""
+                );
+              }
+            }
+          });
         }
         this.portalDetail.detailMessageList[detailMessageIndex].cls =
           "v-menu-item-select-selected selected active";
         let obj = {
+          detailMessageList: this.portalDetail.detailMessageList,
           index: detailMessageIndex,
-          cls: this.portalDetail.detailMessageList[detailMessageIndex].cls
         };
-        this.$bus.emit("changeOrHiddenWidgetPosition",obj)
+        this.$bus.emit("changeOrHiddenWidgetPosition", obj);
+        this.portalDetail.display = "none";
       }
       this.countSelectedMenuItem();
     },
@@ -152,20 +168,24 @@ export default {
     countSelectedMenuItem() {
       this.portalDetail.selectedNum = 0;
       this.portalDetail.detailMessageList.forEach((item) => {
-        if (this.cls && item.cls.includes("v-menu-item-select-selected selected")) {
+        if (
+          item.cls &&
+          item.cls.includes("v-menu-item-select-selected selected")
+        ) {
           this.portalDetail.selectedNum++;
         }
       });
     },
     // 显示或隐藏选择框
     showOrHiddenSelectWidgetPosition(obj) {
-        console.log('')
       if (obj.detailMessageList) {
         this.portalDetail.detailMessageList = JSON.parse(
           JSON.stringify(obj.detailMessageList)
         );
+
         if (this.portalDetail.display === "none") {
           this.portalDetail.display = "block";
+          this.$bus.emit("showOrHiddenSelectWidgetItem", "none");
         } else if (this.portalDetail.display === "block") {
           this.portalDetail.display = "none";
         }
@@ -173,6 +193,14 @@ export default {
         this.portalDetail.display = "none";
       }
     },
+    //清空其他的选择项active类名
+    clearOtherPositionClassA() {
+      this.portalDetail.detailMessageList.forEach((item) => {
+        if (item.cls && item.cls.includes("active")) {
+          item.cls = item.cls.replace("active", "");
+        }
+      });
+    },
   },
   mounted() {
     this.$bus.on(

src/component/Desktop/PortalSelectDialogWindow/index.vue

@@ -105,7 +105,7 @@
             // 点击选择框的每一项
             clickMenuItem(detailMessageIndex){
                 let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls
-                if(cls === 'v-menu-item-select-selected selected active'){
+                if (cls.includes("v-menu-item-select-selected selected")) {
                     this.portalDetail.detailMessageList[detailMessageIndex].cls = 'active'
                     let obj = {
                         index: detailMessageIndex,
@@ -113,7 +113,7 @@
                         cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls,
                     }
                     this.$bus.emit("showOrHiddenWidgetItem",obj)
-                }else if(cls === 'active' || cls === ''){
+                }else{
                     this.portalDetail.detailMessageList[detailMessageIndex].cls = 'v-menu-item-select-selected selected active'
                     let obj = {
                         index: detailMessageIndex,
@@ -128,20 +128,22 @@
             },
             // 鼠标移入选择框的每一项
             mouseenterMenuItem(detailMessageIndex){
-                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls
-                if(cls === 'v-menu-item-select-selected selected'){
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'v-menu-item-select-selected selected active'
-                }else if(cls === ''){
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'active'
+                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
+                if (cls.includes("v-menu-item-select-selected selected")) {
+                    this.portalDetail.detailMessageList[detailMessageIndex].cls =
+                    "v-menu-item-select-selected selected active";
+                } else if (cls === "") {
+                    this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
+                }
+                if(detailMessageIndex && this.portalDetail.detailMessageList[0].cls.includes('active')){
+                    this.portalDetail.detailMessageList[0].cls = this.portalDetail.detailMessageList[0].cls.replace('active','')
                 }
             },
             // 鼠标移出选择框的每一项
             mouseleaveMenuItem(detailMessageIndex){
-                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls
-                if(cls === 'v-menu-item-select-selected selected active'){
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'v-menu-item-select-selected selected'
-                }else if(cls === 'active'){
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = ''
+                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
+                if (cls && cls.includes('active')){
+                    this.portalDetail.detailMessageList[detailMessageIndex].cls = cls.replace('active','')
                 }
             },
             // 显示或隐藏选择框
@@ -150,6 +152,9 @@
                     this.portalDetail.detailMessageList = JSON.parse(JSON.stringify(obj.detailMessageList))
                     if(this.portalDetail.display === 'none'){
                         this.portalDetail.display = 'block'
+                        this.$bus.emit(
+                        "showOrHiddenSelectWidgetPosition",'none'
+                        );
                     }else if(this.portalDetail.display === 'block'){
                         this.portalDetail.display = 'none'
                     }

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

@@ -1,46 +1,103 @@
 <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" @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 = "maxMizeWindow(detailMessageIndex)"
-                                :style="{display: `${detailMessage.iconMaximize}`}">&nbsp;</div>
-                                <div class="x-tool x-tool-minimize" role="option" @click.stop="minMizeWindow(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
+      class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
+      style="
+        position: absolute;
+        visibility: visible;
+        left: 50%;
+        top: 0px;
+        transform: translateX(-50%);
+        background: #fff;
+      "
+      :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" @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="maxMizeWindow(detailMessageIndex)"
+                  :style="{ display: `${detailMessage.iconMaximize}` }"
+                >
+                  &nbsp;
+                </div>
+                <div
+                  class="x-tool x-tool-minimize"
+                  role="option"
+                  @click.stop="minMizeWindow(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 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">
-                                                    <!-- 
+          </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">
@@ -108,9 +165,9 @@
                                                         </tbody>
                                                     </table>
                                                     -->
-                                                </td>
-                                                <td class="x-toolbar-right" align="right">
-                                                    <!-- 
+                        </td>
+                        <td class="x-toolbar-right" align="right">
+                          <!-- 
                                                     <table cellspacing="0" class="x-toolbar-right-ct">
                                                         <tbody>
                                                             <tr>
@@ -134,242 +191,382 @@
                                                         </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>
+                        </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) 
+  props: ["defaultZIndex"],
+  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",
+          },
+        ],
+      },
+      lastCheckIndex: -1,
+      openWindowNum: 0,
+      detailMessageWidthList: [
+        {
+          width: "1254px",
         },
-        // 最小化弹出框口
-        minMizeWindow(detailMessageIndex){
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'none'
-            this.countOpenWindowNum()
-            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)
-            }
+        {
+          width: "1150px",
         },
-        //最大化弹出窗口
-        maxMizeWindow(detailMessageIndex){
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width = '100%'
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconRestore = 'block'
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconMaximize = 'none'
+        {
+          width: "1010px",
         },
-        //恢复弹出窗口宽度
-        restoreMizeWindow(detailMessageIndex){
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width = this.detailMessageWidthList[detailMessageIndex].width
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconRestore = 'none'
-            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconMaximize = 'block'
+        {
+          width: "1010px",
         },
-        //关闭弹出窗口
-        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)
-            }
-            this.countOpenWindowNum()
-            console.log(this.openWindowNum)
-        } ,
-        //统计打开的弹出窗口
-        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)
+      ],
+      fixWindowZIndedxIsMax: false,
+    };
+  },
+  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
+    );
+  },
+  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 = "";
+      });
+      console.log(this.defaultZIndex);
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
+        "active-win";
+      let defaultZIndex = this.defaultZIndex + 10;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      // this.defaultZIndex = this.defaultZIndex + 10
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
+        defaultZIndex;
+      this.lastCheckIndex = detailMessageIndex;
+      console.log(this.defaultZIndex);
+      this.changeZIndexMaxMenuItemCls()
+    },
+    // 切换弹出窗口
+    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()
+      
+    },
+    // 打开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();
+      let detailMessageList =
+        this.resizablePinnedDetail.detailMessageList.filter((item) => {
+          return item.display == "block";
+        });
+      if (detailMessageList.length) {
+        detailMessageList = JSON.parse(
+          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
+        );
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        // this.defaultZIndex = this.defaultZIndex -10
+        this.$bus.emit(
+          "changeDialogWindow",
+          detailMessageList[detailMessageList.length - 1].titleImgUrl
+        );
+      }
+      console.log(detailMessageList.length - 1);
+    },
+    //最大化弹出窗口
+    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";
+        });
+      if (detailMessageList.length) {
+        detailMessageList = JSON.parse(
+          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
+        );
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        // this.defaultZIndex = this.defaultZIndex -10
+        this.$bus.emit(
+          "changeDialogWindow",
+          detailMessageList[detailMessageList.length - 1].titleImgUrl
+        );
+      }
+      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;
+        });
+
+        this.$bus.emit("changeDefaultZIndex", 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)
     },
-    beforeDestroy() {
-        this.$bus.off('clickShortcutItem',this.clickShortcutItem)
-        this.$bus.off('clickMenuItem',this.clickMenuItem)
+    //如果固定窗口的zindex是最大的
+    fixWindowZIndexMax(bol) {
+        console.log(bol)
+      this.fixWindowZIndedxIsMax = bol;
     },
-    components:{
+    //修改zIndex小于defaultZindex(公共z-index)窗口的类名使其变淡
+    changeMinDefaultZindexWindowCls() {
+        this.changeZIndexMaxMenuItemCls()
+    //   console.log(this.defaultZIndex);
+    //   this.resizablePinnedDetail.detailMessageList.forEach((item) => {
+    //     console.log(item.zIndex);
+    //     if (item.zIndex < this.defaultZIndex) {
+    //       console.log(item.cls);
+    //       item.cls = "deactive-win";
+    //     }
+    //   });
+    //   console.log(this.fixWindowZIndedxIsMax);
+    //   if (!this.fixWindowZIndedxIsMax) {
+    //     // 找有menuItem 等于 defaultZIndex的下标
+    //     let maxZIndexMenuItemIndex =
+    //       this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
+    //         console.log(item.zIndex);
+    //         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
+    //         );
+    //         console.log(detailMessageList[detailMessageList.length - 1].title);
+    //       }
+    //     }
+    //   }
+    },
+    // 修改对应标题的menuItem的类名
+    changeFoundMenuItemCls(title) {
+      console.log(title);
+      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
+        if (item.title === title) {
+          item.cls = "active-win";
+        } else {
+          item.cls = "deactive-win";
+        }
+      });
     },
-    name:'ResizablePinned', 
+    //修改zIndex最大的menuItem的类名
+    changeZIndexMaxMenuItemCls() {
+        console.log(this.fixWindowZIndedxIsMax)
+      if (this.fixWindowZIndedxIsMax) {
+        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: {
+    defaultZIndex() {
+      this.changeMinDefaultZindexWindowCls();
+      // console.log(Date.now())
+    },
+  },
+  beforeDestroy() {
+    this.$bus.off("clickShortcutItem", this.clickShortcutItem);
+    this.$bus.off("clickMenuItem", this.clickMenuItem);
+  },
+  components: {},
+  name: "ResizablePinned",
+};
 </script>
 <style scope>
-    
 </style>  

src/component/Desktop/Shortcut/index.vue

@@ -1,20 +1,38 @@
 <template>
-    <!-- 菜单区-->
-    <div>
-        <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
-            <div class="sds-desktop-layout">
-                <li class="launch-icon icon-item" :class="detailMessage.spacialCls" tabindex="0" 
-                v-for="(detailMessage,detailMessageIndex) in shortcutDetail.detailMessageList" :key="detailMessage.id"
-                @click="clickShortcutItem(detailMessageIndex,detailMessage.spacialCls,detailMessage.titleImgUrl)">
-                    <div class="image" :style="{backgroundImage:`url(${detailMessage.titleImgUrl})`}">
-                        <div class="sds-application-notify-badge-num-wrap">
-                            <div class="sds-application-notify-badge-num" style="opacity: 0;"></div>
-                        </div>
-                    </div>
-                    <div class="text">{{detailMessage.title}}</div>
-
-                </li>
-                <!-- 
+  <!-- 菜单区-->
+  <div>
+    <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
+      <div class="sds-desktop-layout">
+        <li
+          class="launch-icon icon-item"
+          :class="detailMessage.spacialCls"
+          tabindex="0"
+          v-for="(
+            detailMessage, detailMessageIndex
+          ) in shortcutDetail.detailMessageList"
+          :key="detailMessage.id"
+          @click="
+            clickShortcutItem(
+              detailMessageIndex,
+              detailMessage.spacialCls,
+              detailMessage.titleImgUrl
+            )
+          "
+        >
+          <div
+            class="image"
+            :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
+          >
+            <div class="sds-application-notify-badge-num-wrap">
+              <div
+                class="sds-application-notify-badge-num"
+                style="opacity: 0"
+              ></div>
+            </div>
+          </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">
@@ -43,57 +61,57 @@
 
                     </li>
                 -->
-            </div>
-        </ul>
-        <ResizablePinned></ResizablePinned>
-    </div>
+      </div>
+    </ul>
+    <ResizablePinned :defaultZIndex="defaultZIndex"></ResizablePinned>
+  </div>
 </template>
 
 <script>
-import ResizablePinned from './ResizablePinned'
+import ResizablePinned from "./ResizablePinned";
 export default {
+  props: ["defaultZIndex"],
   data() {
     return {
-        shortcutDetail:{
-            detailMessageList: [
-                {
-                    id:'0',
-                    title:'套件中心',
-                    spacialCls:'tjCenter',
-                    titleImgUrl:'../../../../public/image/index/tjCenter.png'
-                },
-                {
-                    id:'1',
-                    title:'控制中心',
-                    spacialCls:'controlCenter',
-                    titleImgUrl:'../../../../public/image/index/controlCenter.png'
-                },
-                {
-                    id:'2',
-                    title:'File Station',
-                    spacialCls:'file',
-                    titleImgUrl:'../../../../public/image/index/file.png'
-                },
-                {
-                    id:'3',
-                    title:'DSM 说明',
-                    spacialCls:'question',
-                    titleImgUrl:'../../../../public/image/index/question.png'
-                }
-            ],
-        },
-    }
-  }, 
+      shortcutDetail: {
+        detailMessageList: [
+          {
+            id: "0",
+            title: "套件中心",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/index/tjCenter.png",
+          },
+          {
+            id: "1",
+            title: "控制中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/index/controlCenter.png",
+          },
+          {
+            id: "2",
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/index/file.png",
+          },
+          {
+            id: "3",
+            title: "DSM 说明",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/index/question.png",
+          },
+        ],
+      },
+    };
+  },
   methods: {
-    clickShortcutItem(detailMessageIndex,spacialCls,imgUrl){
-        let obj = {detailMessageIndex,spacialCls,imgUrl}
-        this.$bus.emit('clickShortcutItem',obj)  
-    }
-}, 
-  components:{
-      ResizablePinned 
+    clickShortcutItem(detailMessageIndex, spacialCls, imgUrl) {
+      let obj = { detailMessageIndex, spacialCls, imgUrl };
+      this.$bus.emit("clickShortcutItem", obj);
+    },
   },
-  name:'Shortcut',
-
-}
+  components: {
+    ResizablePinned,
+  },
+  name: "Shortcut",
+};
 </script>

src/component/Desktop/index.vue

@@ -2,8 +2,8 @@
     <!-- 桌面 -->
     <div id="sds-desktop">
         <Menu></Menu>
-        <Shortcut></Shortcut>
-        <FixWindow></FixWindow>
+        <Shortcut :defaultZIndex='defaultZIndex'></Shortcut>
+        <FixWindow :defaultZIndex='defaultZIndex'></FixWindow>
     </div>
 </template>
 
@@ -14,6 +14,19 @@ import FixWindow from './FixWindow'
 export default {
   data() {
     return {
+      defaultZIndex: 9053,
+    }
+  },
+  mounted(){
+    this.$bus.on('changeDefaultZIndex',this.changeDefaultZIndex)
+  },
+  methods:{
+    changeDefaultZIndex(zIndex){
+      if(this.defaultZIndex > 999999990){
+        this.defaultZIndex = 999999990
+      }
+      this.defaultZIndex = zIndex
+      console.log(this.defaultZIndex)
     }
   },
   components:{