首页桌面动态效果

public/static/css/style/style.css

@@ -516,6 +516,10 @@ ul.sds-desktop-shortcut {
     transition: top ease-in 0.2s, left ease-in 0.2s;
 }
 
+.v-widget-window.active{
+    opacity: 0.5;
+}
+
 .v-window-draggable .v-window-header-wrapper,
 .v-window .v-window-header-wrapper {
     flex: 0 0 auto;
@@ -1433,13 +1437,32 @@ ul.sds-desktop-shortcut {
     color: #414b55;
 }
 
+/* 空固定窗 */
+.v-widget-list .v-widget-list-empty{
+    margin: auto; 
+}
+
+.v-widget-list .v-widget-list-empty .v-widget-list-empty-img {
+    margin: auto;
+    height: 120px;
+    width: 120px;
+    background-image: url(../../../image/index/fixWindowEmpty.png);
+    background-size: 120px 120px;
+}
+
+.v-widget-list .v-widget-list-empty .v-widget-list-empty-content {
+    margin-top: 10px;
+    color: #96a0aa;
+    line-height: 24px;
+}
+
 /* 侧边滑动栏 */
 .v-widget-window .v-ps .ps__rail-y {
     opacity: 1;
 }
 
 .v-widget-window .v-ps .ps__rail-y .ps__thumb-y {
-    right: 4px;
+    right: 2px;
     background-color: rgba(255, 255, 255, 0.3);
 }
 
@@ -1460,6 +1483,9 @@ ul.sds-desktop-shortcut {
 }
 
 @media screen and (max-height: 456px){
+    #sds-desktop .v-widget-window .v-widget-items-wrapper{
+        height: calc(100vh - 42px) !important;
+    }
     #sds-desktop .v-widget-window{
         height: calc(100vh - 10px) !important;
     }

src/component/Desktop/FixWindow/index.vue

@@ -1,129 +1,233 @@
 <template>
-    <!-- 右侧固定栏 -->
-    <div class="v-widget-window syno-sds-widget v-window"
-        style="position: absolute; width: 344px; height: 466px; bottom: 10px; right: 10px;min-height: 164px !important;"
-        :style="{zIndex:zIndex}"
-        :class="cls"
-        @click ="clickFixWindow">
-        <div class="v-window-header-wrapper draggable">
-            <div class="v-widget-header">
-                <div class="v-widget-header-left"><button type="button"
-                        class="v-btn v-btn-styleless v-btn-grey v-btn-dropdown"><span>
-                            <div class="v-widget-header-tool-icon add" @click.stop="selectWidgetItem"></div>
-                        </span>
-                    </button></div>
-                <div class="v-widget-header-right">
-                    <div class="v-widget-header-tool-icon minimize"></div>
-                    <div class="v-widget-header-tool-icon pin"></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"></div>
-                        </span>
-                    </button>
-                </div>
-            </div>
+  <!-- 右侧固定栏 -->
+  <div
+    class="v-widget-window syno-sds-widget v-window"
+    style="
+      position: absolute;
+      width: 344px;
+      height: 466px;
+      bottom: 10px;
+      right: 10px;
+      min-height: 164px !important;
+    "
+    :style="{ zIndex: zIndex, display: display }"
+    :class="cls"
+    @click="clickFixWindow"
+  >
+    <div
+      class="v-window-header-wrapper draggable"
+      @mousedown="mousedownWidgetHeader"
+    >
+      <div class="v-widget-header">
+        <div class="v-widget-header-left">
+          <button
+            type="button"
+            class="v-btn v-btn-styleless v-btn-grey v-btn-dropdown"
+          >
+            <span>
+              <div
+                class="v-widget-header-tool-icon add"
+                @click.stop="selectWidgetItem"
+              ></div>
+            </span>
+          </button>
+        </div>
+        <div class="v-widget-header-right">
+          <div
+            class="v-widget-header-tool-icon minimize"
+            @click.stop="minimizeFixWndow"
+          ></div>
+          <div class="v-widget-header-tool-icon pin"></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"
+                @click.stop="selectWidgetPosition"
+              ></div>
+            </span>
+          </button>
         </div>
-        
-        <div tabindex="-1" class="v-window-body">
-            <div tabindex="0" class="v-trap-focus-indicator"></div>
-            <div class="v-trap-focus-body">
-                <div tabindex="0" role="application" class="v-trap-focus-indicator"></div>
-                <div class="v-widget-items-wrapper">
-                    <div class="v-ps show ps--active-y">
-                        <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
-                        <div class="v-widget-list" @scroll="scrollList">
-                            <RunningState></RunningState>
-                            <ResourceMonitor></ResourceMonitor>
-                            <Storage></Storage>
-                            <ConnectedUser></ConnectedUser>
-                            <ScheduledTask></ScheduledTask>
-                            <ChangeLog></ChangeLog>
-                            <NewLog></NewLog>
-                            <Copy></Copy>
-                        </div>
-                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
-                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
-                        </div>
-                        <div class="ps__rail-y" style="top: 0px; right: 0px; height: 424px;">
-                            <div class="ps__thumb-y" tabindex="0" style="top: 0px;height: 104px;display:none;" @mousedown="mousedownProgress"></div>
-                        </div>
-                    </div>
+      </div>
+    </div>
+
+    <div tabindex="-1" class="v-window-body">
+      <div tabindex="0" class="v-trap-focus-indicator"></div>
+      <div class="v-trap-focus-body">
+        <div
+          tabindex="0"
+          role="application"
+          class="v-trap-focus-indicator"
+        ></div>
+        <div class="v-widget-items-wrapper">
+          <div class="v-ps show ps--active-y">
+            <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
+            <div class="v-widget-list" @scroll="scrollList">
+              <RunningState></RunningState>
+              <ResourceMonitor></ResourceMonitor>
+              <Storage></Storage>
+              <ConnectedUser></ConnectedUser>
+              <ScheduledTask></ScheduledTask>
+              <ChangeLog></ChangeLog>
+              <NewLog></NewLog>
+              <Copy></Copy>
+
+              <!-- 当打开窗口个数为零时显示 -->
+              <div class="v-widget-list-empty" v-show="!selectedNum">
+                <div class="v-widget-list-empty-img"></div>
+                <div class="v-widget-list-empty-content">
+                  单击 + 按钮可添加小工具。
                 </div>
+              </div>
             </div>
-            <div tabindex="0" class="v-trap-focus-indicator"></div>
-        </div>
-        <div class="v-window-resizable">
-            <div class="handler v-window-resizable-n"></div>
-            <div class="handler v-window-resizable-s"></div>
+            <div class="ps__rail-x" style="left: 0px; bottom: 0px">
+              <div
+                class="ps__thumb-x"
+                tabindex="0"
+                style="left: 0px; width: 0px"
+              ></div>
+            </div>
+            <div class="ps__rail-y" style="top: 0px; right: 0px; height: 424px">
+              <div
+                class="ps__thumb-y"
+                tabindex="0"
+                style="top: 0px; height: 104px; display: none"
+                @mousedown="mousedownProgress"
+              ></div>
+            </div>
+          </div>
         </div>
+      </div>
+      <div tabindex="0" class="v-trap-focus-indicator"></div>
     </div>
+    <div class="v-window-resizable">
+      <div class="handler v-window-resizable-n"></div>
+      <div class="handler v-window-resizable-s"></div>
+    </div>
+
+    <!-- 弹出小窗口选择框 -->
+    <PortalSelectDialogWindow></PortalSelectDialogWindow>
+    <!-- 弹出位置选择框 -->
+    <PortaSelectPosition></PortaSelectPosition>
+  </div>
 </template>
 
 <script>
-import RunningState from './RunningState'
-import ResourceMonitor from './ResourceMonitor'
-import Storage from './Storage'
-import ConnectedUser from './ConnectedUser'
-import ScheduledTask from './ScheduledTask'
-import ChangeLog from './ChangeLog' 
-import NewLog from './NewLog' 
-import Copy from './Copy' 
+import RunningState from "./RunningState";
+import ResourceMonitor from "./ResourceMonitor";
+import Storage from "./Storage";
+import ConnectedUser from "./ConnectedUser";
+import ScheduledTask from "./ScheduledTask";
+import ChangeLog from "./ChangeLog";
+import NewLog from "./NewLog";
+import Copy from "./Copy";
+
+// 弹出小窗口选择框
+import PortalSelectDialogWindow from "../PortalSelectDialogWindow";
+// 弹出位置选择框
+import PortaSelectPosition from "../PortaSelectPosition";
 export default {
   data() {
     return {
       zIndex: 9040,
-      cls:'',
-      clickMouseY:0,
-      lastY:0,
-      nextY:0,
-      html:'<RunningState></RunningState>',
-      portalDetail:{
-        display: 'none',
-        detailMessageList:[
-            {
-                id:0,
-                title:'系统状况',
-                cls:'v-menu-item-select-selected selected active',
-            },
-            {
-                id:1,
-                title:'资源监控',
-                cls:'v-menu-item-select-selected selected',
-            },
-            {
-                id:2,
-                title:'存储',
-                cls:'',
-            },
-            {
-                id:3,
-                title:'已连接用户',
-                cls:'',
-            },
-            {
-                id:4,
-                title:'计划的任务',
-                cls:'',
-            },
-            {
-                id:5,
-                title:'文件更改日志',
-                cls:'',
-            },
-            {
-                id:6,
-                title:'最新日志',
-                cls:'',
-            },{
-                id:7,
-                title:'备份',
-                cls:'',
-            }
-
-        ]
-      }
-    }
+      cls: "",
+      selectedNum: 2,
+      display: "block",
+      progrecssFirstClick: {
+        lastY: 0,
+        clickY: 0,
+        clientY: 0,
+        moveY: 0,
+      },
+      widgetFirstClick: {
+        lastX: 0,
+        lastY: 0,
+        clickX: 0,
+        clickY: 0,
+        clientX: 0,
+        clientY: 0,
+        offsetX: 0,
+        offsetY: 0,
+        screenX: 0,
+        screenY: 0,
+        moveX: 0,
+        moveY: 0,
+      },
+      portalDetail: {
+        display: "none",
+        detailMessageList: [
+          {
+            id: 0,
+            title: "系统状况",
+            cls: "v-menu-item-select-selected selected active",
+          },
+          {
+            id: 1,
+            title: "资源监控",
+            cls: "v-menu-item-select-selected selected",
+          },
+          {
+            id: 2,
+            title: "存储",
+            cls: "",
+          },
+          {
+            id: 3,
+            title: "已连接用户",
+            cls: "",
+          },
+          {
+            id: 4,
+            title: "计划的任务",
+            cls: "",
+          },
+          {
+            id: 5,
+            title: "文件更改日志",
+            cls: "",
+          },
+          {
+            id: 6,
+            title: "最新日志",
+            cls: "",
+          },
+          {
+            id: 7,
+            title: "备份",
+            cls: "",
+          },
+        ],
+      },
+      portalDetail1: {
+        display: "none",
+        detailMessageList: [
+          {
+            id: 0,
+            title: "右上角",
+            cls: "active",
+          },
+          {
+            id: 1,
+            title: "右下角",
+            cls: "v-menu-item-select-selected selected",
+          },
+          {
+            id: 2,
+            title: "左上角",
+            cls: "",
+          },
+          {
+            id: 3,
+            title: "左下角",
+            cls: "",
+          },
+        ],
+      },
+    };
   },
-  components:{
+  components: {
     RunningState,
     ResourceMonitor,
     Storage,
@@ -133,149 +237,251 @@ export default {
     NewLog,
     Copy,
 
+    // 弹出小窗口选择框
+    PortalSelectDialogWindow,
+    // 弹出位置选择框
+    PortaSelectPosition,
   },
-  mounted(){
-    this.$bus.on("changeFixWindowZIndex",this.changeFixWindowZIndex)
-    let el = document.querySelector('.ps__thumb-y')
-    let el1 = document.querySelector('.v-widget-list')
-    el.addEventListener('mouseup',this.mouseupProgress)
-    this.$bus.on("showOrHiddenWidgetItem",this.showOrHiddenWidgetItem)
-    this.$bus.on("changeThumbHeight",this.changeThumbHeight)
+  mounted() {
+    this.$bus.on("changeFixWindowZIndex", this.changeFixWindowZIndex);
+    this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
+    this.$bus.on("changeThumbHeight", this.changeThumbHeight);
+    this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
+    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);
+    el2.addEventListener("mouseup", this.mouseupWidgetHeader);
   },
-  methods:{
+  methods: {
     //点击固定窗口
-    clickFixWindow(){
-        if(this.zIndex == 9040) this.zIndex = 13000
-        this.cls = 'active-win'
+    clickFixWindow() {
+      if (this.zIndex == 9040) this.zIndex = 13000;
+      this.cls = "active-win";
     },
     // 修改changeFixWindow
-    changeFixWindowZIndex(){
-        this.zIndex = 9040
-        if(this.cls != '')  this.cls = ''
+    changeFixWindowZIndex() {
+      this.zIndex = 9040;
+      if (this.cls != "") this.cls = "";
     },
     //点击进度条
-    mousedownProgress(e){
-        this.clickMouseY = e.offsetY
-        let el = document.querySelector('.ps__thumb-y')
-        el.addEventListener("mousemove",this.moveProgress)
+    mousedownProgress(e) {
+      let el = document.querySelector(".ps__thumb-y");
+      let el1 = document.querySelector(".v-widget-window");
+      el.addEventListener("mousemove", this.moveProgress);
+
+      this.progrecssFirstClick.lastY = el1.offsetTop + 31;
+      this.progrecssFirstClick.clickY = e.offsetY;
     },
     //移动进度条
-    moveProgress(e){
-        let el = document.querySelector('.ps__thumb-y')
-        let el1 = document.querySelector('.ps__rail-y')
-        let el2 = document.querySelector('.v-widget-list')
-        let moveY
-        if (e.clientY < this.lastY){
-            moveY = this.nextY + (e.clientY - this.lastY)
-        }else{
-            moveY = e.clientY - e.offsetY -71
-        }
-        if(moveY < 0 ) moveY = 0
-        console.log(el.style.top,e.offsetY,el2.offsetHeight)
-        if(moveY > (el2.offsetHeight -this.clickMouseY)){
-            moveY = el2.offsetHeight -this.clickMouseY
-        }
-        // if(el.style.height === '280px'){
-        //     if(moveY > 143.5){
-        //         moveY = 143.5
-        //     }
-        // }else if(el.style.height === '210px'){
-        //     if(moveY > 214){
-        //         moveY = 214
-        //     }
-        // }else if(el.style.height === '167px'){
-        //     if(moveY > 265){
-        //         moveY = 265
-        //     }
-        // }else if(el.style.height === '139px'){
-        //     // if(moveY > 284.5){
-        //     //     moveY = 284.5
-        //     // }
-        // }
-        
-        let moveY2 = - (el2.offsetHeight / el1.offsetHeight ) * moveY
-        // console.log(moveY,moveY2,el2.offsetHeight / el1.offsetHeight)
-        el.style.top = moveY +'px'
-        el2.style.top = moveY2 +'px'
-        el.addEventListener('mouseup',this.mouseupProgress)
-        // el.addEventListener('mouseleave',this.mouseupProgress)
-        el1.addEventListener('mouseleave',this.mouseupProgress)
-        this.lastY = e.clientY
-        this.nextY = moveY
+    moveProgress(e) {
+      let el = document.querySelector(".ps__thumb-y");
+      let el1 = document.querySelector(".ps__rail-y");
+      let el2 = document.querySelector(".v-widget-list");
+      let moveY;
+      if (e.clientY > this.progrecssFirstClick.clientY) {
+        moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
+      } else {
+        moveY = this.moveY + (e.clientY - this.progrecssFirstClick.clientY);
+      }
+      if (moveY < 0) {
+        moveY = 0;
+      } else if (moveY > el1.offsetHeight - el.offsetHeight) {
+        moveY = el1.offsetHeight - el.offsetHeight;
+      }
+      let moveY2 =
+        -(
+          (el2.offsetHeight - el1.offsetHeight) /
+          (el1.offsetHeight - el.offsetHeight)
+        ) * moveY;
+      el.style.top = moveY + "px";
+      el2.style.top = moveY2 + "px";
+      el.addEventListener("mouseup", this.mouseupProgress);
+      el1.addEventListener("mouseleave", this.mouseupProgress);
+      this.progrecssFirstClick.clientY = e.clientY;
+      this.moveY = moveY;
     },
     // 进度条鼠标抬起/离开
-    mouseupProgress(){
-        let el = document.querySelector('.ps__thumb-y')
-        let el2 = document.querySelector('.v-widget-list')
-        el.removeEventListener('mousemove',this.moveProgress)
-        el.style.top = '0px'
-        el2.style.top = '0px'
+    mouseupProgress() {
+      let el = document.querySelector(".ps__thumb-y");
+      let el2 = document.querySelector(".v-widget-list");
+      el.removeEventListener("mousemove", this.moveProgress);
+      el.style.top = "0px";
+      el2.style.top = "0px";
+      this.clearProgressMArk();
     },
     // 滚动窗口列表
-    scrollList(){
-        console.log(1111)
+    scrollList() {
+      console.log(1111);
     },
     // 点击勾选小窗口的加号
-    selectWidgetItem(){
-        this.$bus.emit('showOrHiddenSelectWidgetItem',this.portalDetail)
-        window.onclick = (e)=>{
-            e.stopPropagation()
-            this.$bus.emit('showOrHiddenSelectWidgetItem','none')
-        }
+    selectWidgetItem() {
+      this.$bus.emit("showOrHiddenSelectWidgetItem", this.portalDetail);
+      window.onclick = (e) => {
+        e.stopPropagation();
+        this.$bus.emit("showOrHiddenSelectWidgetItem", "none");
+      };
     },
-    // 点击选择框的每一项
-    showOrHiddenWidgetItem(obj){
-        // cls:'v-widget-item sds-window-v5 syno-sds-widget-item',
-        //                 index: detailMessageIndex
-        let widgetItemArray = document.querySelectorAll('.v-widget-item')
-        Array.from(widgetItemArray)[obj.index].className = obj.cls
-        // Array.from(widgetItemArray).forEach((item,index)=>{
-        this.portalDetail.detailMessageList[obj.index].cls = obj.cls1
-        this.portalDetail.detailMessageList.forEach(item=>{
-            if(item.cls === 'v-menu-item-select-selected selected active'){
-                item.cls = 'v-menu-item-select-selected selected'
-            }
-        })
-        let index = this.portalDetail.detailMessageList.findIndex(item=>{
-            return item.cls === 'v-menu-item-select-selected selected'
-        })
-        if(index != -1){
-            this.portalDetail.detailMessageList[index].cls = 'v-menu-item-select-selected selected active'
+    // 点击小窗口选择框的每一项
+    showOrHiddenWidgetItem(obj) {
+      let widgetItemArray = document.querySelectorAll(".v-widget-item");
+      Array.from(widgetItemArray)[obj.index].className = obj.cls;
+      this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
+      this.portalDetail.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.portalDetail.detailMessageList[0].cls ===
+        "v-menu-item-select-selected selected"
+      ) {
+        this.portalDetail.detailMessageList[0].cls =
+          "v-menu-item-select-selected selected active";
+      } else if (this.portalDetail.detailMessageList[0].cls === "") {
+        this.portalDetail.detailMessageList[0].cls = "active";
+      }
     },
     // 跟随可视小窗口的个数改变进度条高度
     changeThumbHeight(selectedNum) {
-        let el = document.querySelector('.ps__thumb-y')
-        if(selectedNum > 2){
-            el.style.display = 'block'
-            console.log(selectedNum)
-            if(selectedNum >= 6) {
-                selectedNum = 6
+      let el = document.querySelector(".ps__thumb-y");
+      if (selectedNum > 2) {
+        el.style.display = "block";
+        if (selectedNum >= 6) {
+          selectedNum = 6;
+        }
+        el.style.height = (7 - selectedNum) * 70 + "px";
+      } else {
+        el.style.display = "none";
+      }
+      this.selectedNum = selectedNum;
+    },
+    // 将记住的进度条坐标重置
+    clearProgressMArk() {
+      (this.progrecssFirstClick.clientY = 0),
+        (this.moveY = 0),
+        (this.progrecssFirstClick = {
+          lastY: 0,
+          clickY: 0,
+        });
+    },
+    //点击固定窗口头部
+    mousedownWidgetHeader(e) {
+      let el = document.querySelector(".v-window-header-wrapper");
+      let el1 = document.querySelector(".v-widget-window");
+      this.widgetFirstClick.clientX = e.clientX;
+      this.widgetFirstClick.offsetX = e.offsetX;
+      this.widgetFirstClick.screenX = document.documentElement.clientWidth;
+      this.widgetFirstClick.clientY = e.clientY;
+      this.widgetFirstClick.offsetY = e.offsetY;
+      this.widgetFirstClick.screenY = document.documentElement.clientHeight;
+      el.addEventListener("mousemove", this.mousemoveWidgetHeader);
+      console.dir(el1);
+    },
+    //移动固定窗口头部
+    mousemoveWidgetHeader(e) {
+      let el = document.querySelector(".v-window-header-wrapper");
+      let el1 = document.querySelector(".v-widget-window");
+      let el2 = document.querySelector(".v-widget-list");
+      el2.style.display = "none";
+      // X轴
+      let moveX = 0;
+      moveX = e.clientX - this.widgetFirstClick.offsetX;
+      if (moveX < 0) {
+        moveX = 0;
+      }
+      if (moveX > this.widgetFirstClick.screenX - el1.offsetWidth) {
+        moveX = this.widgetFirstClick.screenX - el1.offsetWidth;
+      }
+
+      // Y轴
+      let moveY = 0;
+      moveY = e.clientY - this.widgetFirstClick.offsetY;
+      if (moveY < 0) {
+        moveY = 0;
+      }
+      if (moveY > this.widgetFirstClick.screenY - el1.offsetHeight) {
+        moveY = this.widgetFirstClick.screenY - el1.offsetHeight;
+      }
+      el1.style.left = moveX + "px";
+      el1.style.top = moveY + "px";
+      el1.className = "v-widget-window syno-sds-widget v-window active";
+      el.addEventListener("mouseleave", this.mouseupWidgetHeader);
+    },
+    //鼠标抬起固定窗口头部
+    mouseupWidgetHeader() {
+      let el = document.querySelector(".v-window-header-wrapper");
+      let el1 = document.querySelector(".v-widget-list");
+      let el2 = document.querySelector(".v-widget-window");
+      el.removeEventListener("mousemove", this.mousemoveWidgetHeader);
+      el1.style.display = "block";
+      el2.className = "v-widget-window syno-sds-widget v-window";
+    },
+    //显示或隐藏固定窗口
+    showOrHiddenWidget() {
+      if (this.display === "block") {
+        console.log("block");
+        this.display = "none";
+      } else {
+        this.display = "block";
+      }
+    },
+    //最小化固定窗口
+    minimizeFixWndow() {
+      this.display = "none";
+    },
+    // 显示或隐藏位置选择框
+    selectWidgetPosition() {
+      this.$bus.emit("showOrHiddenSelectWidgetPosition", this.portalDetail1);
+      window.onclick = (e) => {
+        e.stopPropagation();
+        this.$bus.emit("showOrHiddenSelectWidgetPosition", "none");
+      };
+    },
+    //改变固定弹出框的位置
+    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 = "";
             }
-            console.log(selectedNum)
-            el.style.height = (7 - selectedNum) * 70 + 'px'
-            console.log((7 - selectedNum) * 70)
-            // if(selectedNum == 3){
-            //     el.style.height = '280px'
-            // }else if(selectedNum == 4){
-            //     el.style.height = '210px'
-            // }else if(selectedNum == 5){
-            //     el.style.height = '167px'
-            // }else if(selectedNum >= 6){
-            //     el.style.height = '139px'
-            // }
-        }else{
-            el.style.display = 'none'
+        });
+        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";
         }
-    } 
+    },
+
+    //节流函数
+    throttle(fn, time, e) {
+      var lastTime = 0;
+      console.log("throttle");
+      return function () {
+        var nowTime = Date.now();
+        if (nowTime - lastTime > time) {
+          fn.call(this, e);
+          lastTime = nowTime;
+        }
+      };
+    },
   },
-   beforeDestroy() {
-    this.$bus.off("changeFixWindowZIndex",this.changeFixWindowZIndex)
+  beforeDestroy() {
+    this.$bus.off("changeFixWindowZIndex", this.changeFixWindowZIndex);
   },
-  name:'FixWindow',
-}
+  name: "FixWindow",
+};
 </script>
 <style scoped>
-
 </style>

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

@@ -326,6 +326,8 @@ export default {
                 this.defaultZIndex = this.defaultZIndex -10
                 this.$bus.emit("changeDialogWindow",detailMessageList[detailMessageList.length-1].titleImgUrl)
             }
+            this.countOpenWindowNum()
+            console.log(this.openWindowNum)
         } ,
         //统计打开的弹出窗口
         countOpenWindowNum(){

src/component/Desktop/index.vue

@@ -4,7 +4,6 @@
         <Menu></Menu>
         <Shortcut></Shortcut>
         <FixWindow></FixWindow>
-        <Portal></Portal>
     </div>
 </template>
 
@@ -12,7 +11,6 @@
 import Menu from './Menu'
 import Shortcut from './Shortcut'
 import FixWindow from './FixWindow'
-import Portal from './Portal'
 export default {
   data() {
     return {
@@ -22,7 +20,6 @@ export default {
       Menu,
       Shortcut,
       FixWindow,
-      Portal
   },
   name:'Desktop',
 }

src/component/Header/index.vue

@@ -1,46 +1,51 @@
 <template>
-    <!-- 头部 -->
-    <div class="taskbar-wrapper">
-        <div class="taskbar-left-wrapper">
-            <div class="show-all-button"></div>
-            <div class="start-button">
-                <button class="start-button-img">
-                    <div class="sds-notify-badge-num"></div>
-                </button>
-            </div>
-        </div>
-        <div class="taskbar-buttons-container">
-            <div class="taskbar-buttons-wrapper" style="display: none;"></div>
-        </div>
-        <div class="tray-container">
-            <span class="system-tray-wrapper">
-                <button class="tray-item notify-button system">
-                    <div></div>
-                </button>
-                <button class="tray-item user-button system">
-                    <div></div>
-                </button>
-                <button class="tray-item widget-button system">
-                    <div></div>
-                </button>
-                <button class="tray-item search-button system">
-                    <div></div>
-                </button>
-            </span>
-        </div>
+  <!-- 头部 -->
+  <div class="taskbar-wrapper">
+    <div class="taskbar-left-wrapper">
+      <div class="show-all-button"></div>
+      <div class="start-button">
+        <button class="start-button-img">
+          <div class="sds-notify-badge-num"></div>
+        </button>
+      </div>
     </div>
+    <div class="taskbar-buttons-container">
+      <div class="taskbar-buttons-wrapper" style="display: none"></div>
+    </div>
+    <div class="tray-container">
+      <span class="system-tray-wrapper">
+        <button class="tray-item notify-button system">
+          <div></div>
+        </button>
+        <button class="tray-item user-button system">
+          <div></div>
+        </button>
+        <button
+          class="tray-item widget-button system"
+          @click.stop="showOrHiddenWidget"
+        >
+          <div></div>
+        </button>
+        <button class="tray-item search-button system">
+          <div></div>
+        </button>
+      </span>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {
-        
-    }
+    return {};
+  },
+  methods: {
+    showOrHiddenWidget() {
+      this.$bus.emit("showOrHiddenWidget");
+    },
   },
-  name:'Header',
-}
+  name: "Header",
+};
 </script>
 <style lang="">
-    
 </style>