liupeng 3 gadi atpakaļ
vecāks
revīzija
e729626d87

+ 21 - 5
public/static/css/style/style.css

@@ -35,7 +35,7 @@ body {
     font-size: 13px;
     font-family: Verdana, Arial, Microsoft YaHei, sans-serif;
 }
-/* 
+/*
 body::-webkit-scrollbar {
     display: none;
 } */
@@ -537,7 +537,7 @@ ul.sds-desktop-shortcut {
     transition: top ease-in 0.2s, left ease-in 0.2s;
 }
 
-.v-widget-window.active{
+.v-widget-window.move{
     opacity: 0.5;
 }
 
@@ -2363,12 +2363,12 @@ ul.sds-desktop-shortcut {
 
 /* 遮罩层 */
 .ext-el-mask-msg{
-    width: calc(100vw); 
-    height: calc(100vh); 
+    width: calc(100vw);
+    height: calc(100vh);
 }
 
 /* 消息弹出框 */
-.x-window.sds-window-v5 .body-wrapper {
+.sds-window-v5 .x-window-body {
     padding: 24px 30px 0 30px;
 }
 /* 清除全部notify消息弹出框 */
@@ -2411,6 +2411,22 @@ ul.sds-desktop-shortcut {
     top: 0;
 }
 
+/* @keyframes notifyShowAllClearAllAnimate {
+    0% {
+        box-shadow: 0 4px 16px 0 rgba(0,0,0,.6);
+    }
+    100% {
+        box-shadow: none ;
+    }
+}
+
+.notify-showall-window .v-message-box-window.animate{
+    animation: notifyShowAllClearAllAnimate 0.1s linear 3;
+} */
+
+.notify-showall-window .no-shadow{
+    box-shadow: none ;
+} 
 /* userAbout消息弹出框 */
 .sds-user-about-mask {
     background-color: #000000;

+ 31 - 44
src/component/Container/Desktop/FixWindow/index.vue

@@ -321,13 +321,12 @@ export default {
   methods: {
     //点击固定窗口
     clickFixWindow() {
-      if (this.fixWindowMessage.cls === "deactive-win") {
+      console.log(this.fixWindowMessage.cls)
+      if (this.fixWindowMessage.cls !== "active-win") {
         this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
         this.$bus.emit("fixWindowZIndexMax", true);
-        // this.widgetZindexIsMax = true
       }
-      console.log(this.fixWindowMessage.zIndex);
     },
     //点击进度条
     mousedownProgress(e) {
@@ -409,15 +408,15 @@ export default {
       Array.from(widgetItemArray)[obj.index].className = obj.cls;
       this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
       this.portalDetail.detailMessageList.forEach((item) => {
-        if (item.cls && item.cls.includes(" active")) {
-          item.cls = item.cls.replace(" active", "");
-        } else if (item.cls && item.cls.includes("active")) {
-          item.cls = item.cls.replace("active", "");
+        if (item.cls && item.cls.includes(" move")) {
+          item.cls = item.cls.replace(" move", "");
+        } else if (item.cls && item.cls.includes("move")) {
+          item.cls = item.cls.replace("move", "");
         }
       });
       let cls = this.portalDetail.detailMessageList[0].cls;
-      if (cls && !cls.includes("active")) {
-        this.portalDetail.detailMessageList[0].cls = cls + " active";
+      if (cls && !cls.includes("move")) {
+        this.portalDetail.detailMessageList[0].cls = cls + " move";
       }
     },
     // 跟随可视小窗口的个数改变进度条高度
@@ -480,8 +479,8 @@ export default {
       }
       el1.style.left = moveX + "px";
       el1.style.top = moveY + "px";
-      if (!el1.className.includes(" active")) {
-        el1.className = el1.className + " active";
+      if (!el1.className.includes(" move")) {
+        el1.className = el1.className + " move";
       }
       el.addEventListener("mouseleave", this.mouseupWidgetHeader);
     },
@@ -494,7 +493,7 @@ export default {
       let el2 = document.querySelector(".v-widget-window");
       el.removeEventListener("mousemove", this.mousemoveWidgetHeader);
       el1.style.display = "flex";
-      el2.className = "v-widget-window syno-sds-widget v-window";
+      el2.className = el2.className.replace('move','');
     },
     //显示或隐藏固定窗口
     showOrHiddenWidget(e) {
@@ -543,8 +542,8 @@ export default {
     changeOrHiddenWidgetPosition(obj) {
       this.portalDetail1.detailMessageList = obj.detailMessageList;
       this.portalDetail1.detailMessageList.forEach((item) => {
-        if (item.cls && item.cls.includes("active")) {
-          item.cls = item.cls.replace("active", "");
+        if (item.cls && item.cls.includes(" active")) {
+          item.cls = item.cls.replace(" active", "");
         }
       });
       let detailMessageItem = this.portalDetail1.detailMessageList[obj.index];
@@ -557,7 +556,7 @@ export default {
       );
       el.className = el.className + " active";
       let cls = this.portalDetail1.detailMessageList[0].cls;
-      if (cls && !cls.includes("active")) {
+      if (cls && !cls.includes(" active")) {
         this.portalDetail1.detailMessageList[0].cls = cls + " active";
       }
       if (obj.index == 0) {
@@ -586,18 +585,6 @@ export default {
         this.$bus.emit("fixWindowZIndexMax", true);
       }
     },
-    // 弹出窗的zIndex是最大的
-    // dialogWindowZIndexIsMax(bol){
-    // if(bol){
-    //   if(this.fixWindowMessage.zIndex >= this.defaultZIndex){
-    //     this.fixWindowMessage.zIndex = this.defaultZIndex - 10
-    // this.widgetZindexIsMax = false
-    //   }
-    // }else{
-    //   this.fixWindowMessage.zIndex = this.defaultZIndex + 10
-    //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-    // }
-    // },
     //节流函数
     throttle(fn, time, e) {
       var lastTime = 0;
@@ -610,24 +597,24 @@ export default {
       };
     },
   },
-  watch: {
-    // defaultZIndex() {
-    //   //   console.log(this.fixWindowMessage.zIndex,this.defaultZIndex,this.fixWindowData.zIndex)
-    //   //   if(this.fixWindowMessage.zIndex < this.defaultZIndex){
-    //   //     this.fixWindowMessage.cls = 'deactive-win'
-    //   //   }else{
-    //   //     this.fixWindowMessage.cls = 'active-win'
-    //   //   }
-    // },
-    fixWindowData:{
-      handler(){
-        console.log(this.fixWindowData)
-        this.fixWindowMessage = this.fixWindowData;
-      },
-      deep:true
+  // watch: {
+  //   // defaultZIndex() {
+  //   //   //   console.log(this.fixWindowMessage.zIndex,this.defaultZIndex,this.fixWindowData.zIndex)
+  //   //   //   if(this.fixWindowMessage.zIndex < this.defaultZIndex){
+  //   //   //     this.fixWindowMessage.cls = 'deactive-win'
+  //   //   //   }else{
+  //   //   //     this.fixWindowMessage.cls = 'active-win'
+  //   //   //   }
+  //   // },
+  //   fixWindowData:{
+  //     handler(newVal){
+  //       console.log(this.fixWindowData,newVal)
+  //       this.fixWindowMessage = this.fixWindowData;
+  //     },
+  //     deep:true
 
-    }
-  },
+  //   }
+  // },
   beforeDestroy() {},
   name: "FixWindow",
 };

+ 0 - 384
src/component/Container/Desktop/Message/index.vue

@@ -1,384 +0,0 @@
-<template>
-  <!-- 消息弹出框 -->
-  <div
-    class="x-window x-window-dlg sds-window-v5"
-    style="
-      position: absolute;
-      z-index: 11004;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 480px;
-    "
-    :style="{ display: display }"
-    :class="messageContant.cls ? messageContant.cls : ''"
-  >
-    <div class="x-dlg-focus"></div>
-    <div class="x-window-tl">
-      <div class="x-window-tr"><div class="x-window-tc"></div></div>
-    </div>
-    <div class="x-window-bwrap" v-if="messageContant">
-      <div class="x-window-ml">
-        <div class="x-window-mr">
-          <div class="x-window-mc">
-            <div
-              class="x-window-body"
-            >
-              <div class="x-dlg-icon">
-                <div class="ext-mb-content">
-                  <div class="ext-mb-title" style="display: none"></div>
-                  <span class="ext-mb-text">{{ messageContant.text }}</span
-                  ><br class="ext-mb-br" />
-                  <div class="ext-mb-fix-cursor"></div>
-                </div>
-                <div class="ext-mb-grid" style="display: none"></div>
-                <div class="x-progress-wrap syno-mb-progress x-hide-display">
-                  <div class="x-progress-inner">
-                    <div class="x-progress-bar" style="height: 6px; width: 0px">
-                      <div
-                        class="x-progress-text"
-                        style="z-index: 99; width: 0px"
-                      >
-                        <div style="width: 6px; height: 6px">&nbsp;</div>
-                      </div>
-                    </div>
-                    <div class="x-progress-text x-progress-text-back">
-                      <div style="width: 6px; height: 6px">&nbsp;</div>
-                    </div>
-                  </div>
-                </div>
-                <div class="x-clear"></div>
-                <span class="syno-mb-progress-status"></span>
-                <div class="syno-mb-progress-info"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="x-window-bl">
-        <div class="x-window-br">
-          <div class="x-window-bc">
-            <div class="x-window-footer x-panel-btns" style="width: 428px">
-              <div
-                class="x-panel-fbar x-small-editor x-toolbar-layout-ct"
-                style="width: auto"
-              >
-                <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 x-hide-display">
-                                <span
-                                  cellspacing="0"
-                                  class="
-                                    x-btn
-                                    syno-ux-button syno-ux-button-grey
-                                    x-btn-noicon
-                                  "
-                                  style="margin-left: 0px"
-                                  ><em class="x-unselectable" unselectable="on"
-                                    ><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" v-if='messageContant.buttonList.length'>
-                                      <td class="x-toolbar-cell" v-for="button in messageContant.buttonList" :key="button.id">
-                                        <span
-                                          cellspacing="0"
-                                          class="
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em class="x-unselectable"
-                                            ><button
-                                              type="button"
-                                              class="v-btn v-btn-footbar"
-                                              :class="button.cls"
-                                              @click="button.event"
-                                            >
-                                              {{button.text}}
-                                            </button></em
-                                          ></span
-                                        >
-                                      </td>
-                                      <!-- <td class="x-toolbar-cell x-hide-display">
-                                        <span
-                                          cellspacing="0"
-                                          class="
-                                            x-btn
-                                            syno-ux-button syno-ux-button-grey
-                                            x-btn-noicon
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em
-                                            class="x-unselectable"
-                                            unselectable="on"
-                                            ><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
-                                            x-btn-noicon
-                                            syno-ux-button-grey
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em class="x-unselectable"
-                                            ><button
-                                              type="button"
-                                              class="x-btn-text"
-                                              @click="cancleClear"
-                                            >
-                                              取消
-                                            </button></em
-                                          ></span
-                                        >
-                                      </td>
-                                      <td class="x-toolbar-cell x-hide-display">
-                                        <span
-                                          cellspacing="0"
-                                          class="
-                                            x-btn
-                                            syno-ux-button syno-ux-button-blue
-                                            x-btn-noicon
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><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
-                                            x-btn-noicon
-                                            syno-ux-button-red
-                                            syno-ux-button-blue
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em class="x-unselectable"
-                                            ><button
-                                              type="button"
-                                              class="x-btn-text"
-                                              @click="confirmClear"
-                                            >
-                                              清除全部
-                                            </button></em
-                                          ></span
-                                        >
-                                      </td> -->
-                                    </tr>
-                                    <!-- <tr class="x-toolbar-right-row">
-                                      <td class="x-toolbar-cell x-hide-display">
-                                        <span
-                                          cellspacing="0"
-                                          class="
-                                            x-btn
-                                            syno-ux-button syno-ux-button-grey
-                                            x-btn-noicon
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em class="x-unselectable"
-                                            ><button
-                                              type="button"
-                                              class="x-btn-text"
-                                            >
-                                              否
-                                            </button></em
-                                          ></span
-                                        >
-                                      </td>
-                                      <td class="x-toolbar-cell x-hide-display">
-                                        <span
-                                          cellspacing="0"
-                                          class="
-                                            x-btn
-                                            syno-ux-button syno-ux-button-grey
-                                            x-btn-noicon
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em
-                                            class="x-unselectable"
-                                            unselectable="on"
-                                            ><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
-                                            x-btn-noicon
-                                            syno-ux-button-grey
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em class="x-unselectable"
-                                            ><button
-                                              type="button"
-                                              class="x-btn-text"
-                                              @click="cancleClear"
-                                            >
-                                              取消
-                                            </button></em
-                                          ></span
-                                        >
-                                      </td>
-                                      <td class="x-toolbar-cell x-hide-display">
-                                        <span
-                                          cellspacing="0"
-                                          class="
-                                            x-btn
-                                            syno-ux-button syno-ux-button-blue
-                                            x-btn-noicon
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><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
-                                            x-btn-noicon
-                                            syno-ux-button-red
-                                            syno-ux-button-blue
-                                          "
-                                          style="width: auto; margin-left: 0px"
-                                          ><em class="x-unselectable"
-                                            ><button
-                                              type="button"
-                                              class="x-btn-text"
-                                              @click="confirmClear"
-                                            >
-                                              清除全部
-                                            </button></em
-                                          ></span
-                                        >
-                                      </td>
-                                    </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 class="x-clear"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      display: "none",
-      messageContant: "",
-      zIndex: 0,
-    };
-  },
-  mounted() {
-    this.$bus.on("openMessage", this.openMessage);
-    this.$bus.on("closeMessage", this.closeMessage);
-  },
-  methods: {
-    // 打开本页面
-    openMessage(obj) {
-      this.display = "block";
-      this.messageContant = obj;
-      console.log(this.messageContant.cls)
-      if(! this.messageContant.cls.includes(' active-win')){
-        this.messageContant.cls = this.messageContant.cls + ' active-win'
-      }
-    },
-    // 关闭本页面
-    closeMessage() {
-      this.display = "none";
-      this.messageContant = "";
-      if(this.messageContant.cls && ! this.messageContant.cls.includes(' active-win')){
-        this.messageContant.cls = this.messageContant.cls .replace( ' active-win','')
-      }else if(this.messageContant.cls && this.messageContant.cls.includes('active-win')){
-        this.messageContant.cls = this.messageContant.cls .replace( 'active-win','')
-      }
-    },
-    // // 点击取消
-    // cancleClear() {
-    //   this.closeMessage();
-    //   this.$bus.emit("closeMask");
-    // },
-    // // 清除
-    // confirmClear() {
-    //   this.closeMessage();
-    //   this.$bus.emit("closeMask");
-    //   this.$bus.emit("clearAllNotifyMessage");
-    //   this.$bus.emit("closeNotifyDetail");
-    //   this.$bus.emit("closeNotifyShowall");
-    // },
-  },
-  components: {},
-  name: "Message",
-};
-</script>

+ 165 - 115
src/component/Container/Desktop/NotifyShowall/index.vue

@@ -52,7 +52,7 @@
                   <button
                     type="button"
                     class="v-btn v-btn-grey"
-                    @click.stop="reload"
+                    @click.capture="reload"
                   >
                     <span> 刷新 </span>
                   </button>
@@ -309,7 +309,7 @@
                           </div>
                           <div
                             class="v-pagination-refresh"
-                            @click.stop="reload"
+                            @click.capture="reload"
                           ></div>
                         </div>
                       </div>
@@ -339,7 +339,7 @@
                   <button
                     type="button"
                     class="v-btn v-btn-footbar v-btn-grey"
-                    @click.stop="closeNotifyShowall"
+                    @click.capture="closeNotifyShowall"
                   >
                     <span> 关闭 </span>
                   </button>
@@ -361,87 +361,101 @@
         <div class="handler v-window-resizable-e"></div>
       </div>
       <div
-      class="v-window-mask"
-      :style="{ display: clearAllNotifyMessage.clearAllNotifyMessageDisplay}"
-      @click.stop="WindowClick()"
-    ></div>
-    </div>
-    
-    <div
-      class="v-window v-message-box-window auto-height"
-      syno-id="SYNO.SDS.DSMNotify.ShowAll.Window-msgbox"
-      style="
-        position: absolute;
-        width: 480px;
-        height: auto;
-        top: 180px;
-        left: 190px;
-      "
-      :style="{
-        display: clearAllNotifyMessage.clearAllNotifyMessageDisplay,
-        zIndex: clearAllNotifyMessage.clearAllNotifyMessageZIndex,
-      }"
-      :class="clearAllNotifyMessage.clearAllNotifyMessageCls"
-      @click.stop="clickClearAllNotifyMessage"
-    >
-      <div>
-        <div class="v-trap-focus-indicator"></div>
-        <div class="v-trap-focus-body">
-          <div class="v-trap-focus-indicator"></div>
-          <div class="v-layout layout-panel-content v-panel message-box">
-            <div class="v-spin-wrapper circle v-panel-wrapper">
-              <div class="v-spin-wrapper-masking" style="display: none"></div>
-              <div
-                class="v-layout layout-body-wrapper layout-panel-body"
-                style="--panel-in-tabs-padding-top: 0"
-              >
-                <div class="body-wrapper">
-                  <div class="message-box-body has-icon">
-                    <div class="dialog-icon-wrapper alarm">
-                      <div class="dialog-icon alarm"></div>
-                    </div>
-                    <div class="dialog-content">
-                      所有桌面通知都会被清除。是否确定要继续?
+        class="v-window-mask"
+        :style="{
+          display:
+            notifyShowAllContant.clearAllNotifyData
+              .clearAllNotifyMessageDisplay,
+        }"
+        @click.stop.self="maskClick()"
+      >
+        <div
+          class="v-window v-message-box-window auto-height"
+          syno-id="SYNO.SDS.DSMNotify.ShowAll.Window-msgbox"
+          style="
+            position: relative;
+            width: 480px;
+            height: auto;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          "
+          :style="{
+            display:
+              notifyShowAllContant.clearAllNotifyData
+                .clearAllNotifyMessageDisplay,
+            zIndex:
+              notifyShowAllContant.clearAllNotifyData
+                .clearAllNotifyMessageZIndex,
+          }"
+          :class="
+            notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls
+          "
+          @click.self="clickClearAllNotifyMessage"
+        >
+          <div>
+            <div class="v-trap-focus-indicator"></div>
+            <div class="v-trap-focus-body">
+              <div class="v-trap-focus-indicator"></div>
+              <div class="v-layout layout-panel-content v-panel message-box">
+                <div class="v-spin-wrapper circle v-panel-wrapper">
+                  <div
+                    class="v-spin-wrapper-masking"
+                    style="display: none"
+                  ></div>
+                  <div
+                    class="v-layout layout-body-wrapper layout-panel-body"
+                    style="--panel-in-tabs-padding-top: 0"
+                  >
+                    <div class="body-wrapper">
+                      <div class="message-box-body has-icon">
+                        <div class="dialog-icon-wrapper alarm">
+                          <div class="dialog-icon alarm"></div>
+                        </div>
+                        <div class="dialog-content">
+                          所有桌面通知都会被清除。是否确定要继续?
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </div>
-              <div
-                class="
-                  v-layout
-                  layout-panel-fbar
-                  fbar-wrapper fbar-wrapper--fluid
-                "
-              >
-                <div class="v-status-bar loading" style="display: none">
-                  <div class="status-text">
-                    <div class="v-spin-icon">
-                      <i><i></i></i>
+                  <div
+                    class="
+                      v-layout
+                      layout-panel-fbar
+                      fbar-wrapper fbar-wrapper--fluid
+                    "
+                  >
+                    <div class="v-status-bar loading" style="display: none">
+                      <div class="status-text">
+                        <div class="v-spin-icon">
+                          <i><i></i></i>
+                        </div>
+                        加载中...
+                      </div>
+                    </div>
+                    <div class="default pull-right">
+                      <button
+                        type="button"
+                        class="v-btn v-btn-footbar v-btn-cancel"
+                        @click.stop="cancelDeleteAllNotifyMessage"
+                      >
+                        <span>取消</span>
+                      </button>
+                      <button
+                        type="button"
+                        class="v-btn v-btn-footbar v-btn-red"
+                        @click.stop="confirmDeleteAllNotifyMessage"
+                      >
+                        <span>删除</span>
+                      </button>
                     </div>
-                    加载中...
                   </div>
                 </div>
-                <div class="default pull-right">
-                  <button
-                    type="button"
-                    class="v-btn v-btn-footbar v-btn-cancel"
-                    @click.stop="cancelDeleteAllNotifyMessage"
-                  >
-                    <span>取消</span>
-                  </button>
-                  <button
-                    type="button"
-                    class="v-btn v-btn-footbar v-btn-red"
-                    @click.stop="confirmDeleteAllNotifyMessage"
-                  >
-                    <span>删除</span>
-                  </button>
-                </div>
               </div>
             </div>
+            <div class="v-trap-focus-indicator"></div>
           </div>
         </div>
-        <div class="v-trap-focus-indicator"></div>
       </div>
     </div>
   </div>
@@ -456,17 +470,17 @@ export default {
         display: "none",
         zIndex: 9050,
         cls: "active-win",
+        clearAllNotifyData: {
+          clearAllNotifyMessageDisplay: "none",
+          clearAllNotifyMessageCls: "deactive-win",
+          clearAllNotifyMessageZIndex: 9050,
+        },
       },
       loading: false,
       maskDisplay: "none",
       width: "840px",
       height: "480px",
       top: "10px",
-      clearAllNotifyMessage: {
-        clearAllNotifyMessageDisplay: "none",
-        clearAllNotifyMessageCls: "",
-        clearAllNotifyMessageZIndex: 905,
-      },
       thContantArray: [
         {
           id: 0,
@@ -510,6 +524,7 @@ export default {
       this.maskDisplay = "block";
       this.loading = true;
       this.notifyShowAllContant.display = "block";
+      this. clickNotifyShowall()
       setTimeout(() => {
         this.maskDisplay = "none";
         this.loading = false;
@@ -518,7 +533,6 @@ export default {
           item.cls1 = "";
         });
         this.notifyShowallDetail.detailMessageList = detailMessageList1;
-        this.clickNotifyShowall();
       }, 1000);
     },
     // 关闭本页面
@@ -608,60 +622,96 @@ export default {
     },
     // 显示清除全部信息弹出框
     showClearAllNotifyMessage() {
-      console.log(111);
-      // this.$bus.emit("clearAllNotifyMessage")
-      this.clearAllNotifyMessage.clearAllNotifyMessageDisplay = "block";
-      console.log(
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex,
-        this.defaultZIndex
-      );
+      // if(this.notifyShowAllContant.cls === 'deactive-win'){
+      //   this.notifyShowAllContant.zIndex = this.defaultZIndex + 10
+      //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      // }
+      this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageDisplay =
+        "block";
+
       if (
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
-        this.defaultZIndex
+        this.notifyShowAllContant.clearAllNotifyData
+          .clearAllNotifyMessageCls === "deactive-win"
       ) {
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex =
+        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
           this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
-      this.$bus.emit("maskShowOrHidden", true);
-      window.addEventListener("click", this.WindowClick, false);
-    },
-    // 点击清除全部信息弹出框
-    clickClearAllNotifyMessage() {
       console.log(
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex,
+        this.notifyShowAllContant.clearAllNotifyData
+          .clearAllNotifyMessageZIndex,
         this.defaultZIndex
       );
+      // this.$bus.emit("maskShowOrHidden", true);
+      this.$bus.emit("showOrHiddenNotifyShowallClearAll", true);
+      window.addEventListener("click", this.windowClick, true);
+    },
+    // 点击清除全部信息弹出框
+    clickClearAllNotifyMessage() {
+      // if(this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls === 'deactive-win'
+      // ) {
+      //   this.clickNotifyShowall();
+      // }
       if (
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
-        this.defaultZIndex
+        this.notifyShowAllContant.clearAllNotifyData
+          .clearAllNotifyMessageCls === "deactive-win"
       ) {
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex =
+        // this.clickNotifyShowall();
+        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
           this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        // this.$bus.emit("maskShowOrHidden", true);
+        this.$bus.emit("showOrHiddenNotifyShowallClearAll", true);
       }
-      this.$bus.emit("maskShowOrHidden", true);
     },
     // 没关闭清除全部信息弹出框时点击页面
-    WindowClick() {
+    windowClick() {
       let el = document.querySelector(
-        ".notify-showall-window .v-message-box-window active-win"
+        ".notify-showall-window .v-message-box-window"
       );
-      window.removeEventListener("click", this.WindowClick, false);
+      console.log(el);
+      // for(var i = 0;i<3;i++){
+      //    setTimeout(()=>{
+      //      console.log(el.className)
+      //      if(el.className)
+      //       el.className = el.className + ' no-shadow' 
+      //       setTimeout(()=>{
+      //         el.className = el.className.replace(' no-shadow')
+      //       },100)
+      //   },100)
+      // }
+     
+      // if(! el.className.includes(' animate')){
+      //   el.className = el.className + ' animate' 
+      // }
+    },
+    //没关闭清除全部信息弹出框时点击遮罩层
+    maskClick() {
+      // if (
+      //   this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls === 'deactive-win'
+      // ) {
+      //   this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
+      //     this.defaultZIndex + 10;
+      //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      //   window.removeEventListener("click", this.windowClick, true);
+      // }
     },
     // 取消删除
     cancelDeleteAllNotifyMessage(e) {
       e.stopPropagation();
       console.log("cancel");
-      this.clearAllNotifyMessage.clearAllNotifyMessageDisplay = "none";
-      this.clearAllNotifyMessage.clearAllNotifyMessageZIndex = 9050;
+      this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageDisplay =
+        "none";
+      this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex = 9050;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      this.$bus.emit("maskShowOrHidden", false);
+      // this.$bus.emit("maskShowOrHidden", false);
+
+      this.$bus.emit("showOrHiddenNotifyShowallClearAll", false);
     },
     // 确认删除
     confirmDeleteAllNotifyMessage(e) {
       e.stopPropagation();
-      this.$bus.emit("clearAllNotifyMessage")
+      this.$bus.emit("notifyShowAllContant.clearAllNotifyMessage");
       this.notifyShowallDetail.detailMessageList = [];
       this.cancelDeleteAllNotifyMessage(e);
     },
@@ -669,17 +719,17 @@ export default {
   watch: {
     defaultZIndex() {
       if (
-        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
-        this.defaultZIndex
+        this.notifyShowAllContant.clearAllNotifyData
+          .clearAllNotifyMessageZIndex < this.defaultZIndex
       ) {
-        this.clearAllNotifyMessage.clearAllNotifyMessageCls = "deactive-win";
+        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
+          "deactive-win";
+        this.$bus.emit("showOrHiddenNotifyShowallClearAll", false);
       } else {
-        this.clearAllNotifyMessage.clearAllNotifyMessageCls = "active-win";
+        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
+          "active-win";
       }
     },
-    notifyShowAllData() {
-      this.notifyShowAllContant = this.notifyShowAllData;
-    },
   },
   components: {},
   name: "NotifyShowall",

+ 2 - 0
src/component/Container/Desktop/NotifyTrayPanel/index.vue

@@ -530,11 +530,13 @@ export default {
     },
     // 打开清除全部页面
     clearAll(e) {
+      this.hiddenNotifyAndchangeIconColor(e);
       if(!this.notifyTrayPanelDetail.detailMessageList.length){
         return
       }
       let obj = {
         cls: "confirm-delete-icon",
+        icon:'confirm-delete-icon',
         title: "",
         text: "所有桌面通知都会被清除。是否确定要继续?",
         buttonList:[

+ 4 - 0
src/component/Container/Desktop/UserTrayPanel/index.vue

@@ -94,9 +94,11 @@ export default {
     },
     // 打开关机页面
     openUserPoweroff(e){
+      this.$bus.emit("hiddenOrShowOtherWindow", true);
       this.hiddenUserAndchangeIconColor(e)
       let obj = {
         cls: "",
+        icon:'',
         title: "",
         text: "您确定要关机吗?",
         buttonList:[
@@ -125,8 +127,10 @@ export default {
     },
     // 取消关机
     cancelPoweroff(){
+      this.$bus.emit("hiddenOrShowOtherWindow", false);
       this.$bus.emit("closeMessage");
       this.$bus.emit("closeMask")
+
     },
     // 确认关机
     confirmPoweroff(){

+ 3 - 3
src/component/Container/Desktop/index.vue

@@ -29,7 +29,7 @@
       :userSettingData="userSettingData"
     ></UserSetting>
     <UserAbout :defaultZIndex="defaultZIndex"></UserAbout>
-    <Message></Message>
+    <!-- <Message></Message> -->
     <!-- <Mask></Mask> -->
   </div>
 </template>
@@ -45,7 +45,7 @@ import NotifySetting from "./NotifySetting";
 import UserTrayPanel from "./UserTrayPanel";
 import UserSetting from "./UserSetting";
 import UserAbout from "./UserAbout";
-import Message from "./Message";
+// import Message from "./Message";
 // import Mask from './Mask'
 
 export default {
@@ -95,7 +95,7 @@ export default {
     UserTrayPanel,
     UserSetting,
     UserAbout,
-    Message,
+    // Message,
     // Mask,
   },
   name: "Desktop",

+ 7 - 3
src/component/Container/DesktopAppView/index.vue

@@ -93,7 +93,7 @@ export default {
     // 显示appView页面
     showAppView() {
       this.display = "block";
-      this.$bus.emit("hiddenOrShowOtherWindow", false);
+      this.$bus.emit("hiddenOrShowOtherWindow", true);
       window.addEventListener("click", this.WindowClick, false);
       // this.$bus.emit("hiddenDialogWindow");
       // this.$bus.emit("closeUserAbout");
@@ -101,15 +101,19 @@ export default {
     },
     // 搜索框聚焦
     searchInputFocus(e) {
-      console.log(e.srcElement.parentElement.className)
       if (
-        !e.srcElement.parentElement.className.includes("search-field-focused")
+        !e.srcElement.parentElement.className.includes(" search-field-focused")
       ) {
+        e.srcElement.parentElement.className = e.srcElement.parentElement.className + " search-field-focused"
       }
     },
     // 点击页面关闭本页面
     WindowClick() {
       console.log('false')
+      let el = document.querySelector('.search-field-focused')
+      if (el) {
+        el.className = el.className.replace(' search-field-focused','') 
+      }
       this.display = "none";
       this.$bus.emit("hiddenOrShowOtherWindow", false);
       window.removeEventListener("click", this.WindowClick, true);

+ 17 - 3
src/component/Container/index.vue

@@ -16,6 +16,7 @@
     ></DesktopAppView>
     <!-- <UserAbout :defaultZIndex="defaultZIndex"></UserAbout> -->
     <Mask :defaultZIndex="defaultZIndex" :maskIsShow="maskIsShow"></Mask>
+    <Message></Message>
   </div>
 </template>
 
@@ -25,12 +26,14 @@ import Desktop from "./Desktop";
 import DesktopAppView from "./DesktopAppView";
 import UserAbout from "./Desktop/UserAbout";
 import Mask from "./Mask";
+import Message from "./Message";
 
 export default {
   data() {
     return {
       defaultZIndex: 9050,
       maskIsShow:false,
+      notifyIsShow:false,
       appViewData: [
         {
           id: 0,
@@ -518,12 +521,19 @@ export default {
         zIndex: 9050,
         display: "none",
         cls: "deactive-win",
+        clearAllNotifyData: {
+          clearAllNotifyMessageDisplay: "none",
+          clearAllNotifyMessageCls: "deactive-win",
+          clearAllNotifyMessageZIndex: 9050,
+        },
       },
+      
     };
   },
   mounted() {
     this.$bus.on("changeDefaultZIndex", this.changeDefaultZIndex);
     this.$bus.on('maskShowOrHidden',this.maskShowOrHidden)
+    this.$bus.on("showOrHiddenNotifyShowallClearAll",this.showOrHiddenNotifyShowallClearAll)
   },
   methods: {
     // 改变公共zIndex
@@ -544,6 +554,11 @@ export default {
     // 遮罩层的显示与隐藏
     maskShowOrHidden(bol){
       this.maskIsShow = bol
+    },
+    // notifyShowAll界面的清除全部遮罩层的显示与隐藏
+    showOrHiddenNotifyShowallClearAll(bol){
+      this.notifyIsShow = bol
+      console.log(bol)
     }
   },
   watch: {
@@ -805,8 +820,7 @@ export default {
           }
         }
       }
-      if(this.maskIsShow){
-        console.log(111)
+      if(this.maskIsShow || this.notifyIsShow){
         this.appViewData.forEach((item) => {
           if (item.cls === "active-win") {
             item.cls = "deactive-win";
@@ -817,7 +831,6 @@ export default {
         this.notifyTrayPanelDetailData.cls = "deactive-win";
         this.notifyShowAllData.cls = "deactive-win";
         this.userSettingData.cls = "deactive-win";
-        console.log(this.fixWindowData)
       }
     },
   },
@@ -827,6 +840,7 @@ export default {
     DesktopAppView,
     UserAbout,
     Mask,
+    Message
   },
   name: "Container",
 };