首页桌面动态效果

src/component/Desktop/PortaSelectPosition/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="vue-portal-target" style="top: 30px; right: 10px" d>
+    <div class="v-btn-dropdown">
+      <div
+        tabindex="-1"
+        role="listbox"
+        class="v-menu"
+        syno-id="components-header-menu-1"
+        style="height: auto; width: auto; right: 4px; top: 0px; z-index: 15000"
+        :style="{ display: portalDetail.display }"
+      >
+        <div tabindex="0" class="v-trap-focus-indicator"></div>
+        <div class="v-trap-focus-body">
+          <div
+            role="menuitem"
+            tabindex="0"
+            class="v-menu-item"
+            syno-id="components-header-menu-item-0"
+            v-for="(
+              detailMessage, detailMessageIndex
+            ) in portalDetail.detailMessageList"
+            :key="detailMessage.id"
+            :class="detailMessage.cls"
+            @mouseenter.stop="mouseenterMenuItem(detailMessageIndex)"
+            @mouseleave.stop="mouseleaveMenuItem(detailMessageIndex)"
+            @click.stop="clickPosition(detailMessageIndex)"
+          >
+            <i class="v-icon v-icon--select"></i>
+            <span class="title">右上角</span>
+          </div>
+          <!-- <div
+            role="menuitem"
+            tabindex="0"
+            class="v-menu-item v-menu-item-select"
+            syno-id="components-header-menu-item-1"
+          >
+            <i class="v-icon v-icon--select"></i>
+            <span class="title">右下角</span>
+          </div>
+          <div
+            role="menuitem"
+            tabindex="0"
+            class="v-menu-item v-menu-item-select"
+            syno-id="components-header-menu-item-2"
+          >
+            <i class="v-icon v-icon--select"></i>
+            <span class="title">左上角</span>
+          </div>
+          <div
+            role="menuitem"
+            tabindex="0"
+            class="v-menu-item v-menu-item-select"
+            syno-id="components-header-menu-item-3"
+          >
+            <i class="v-icon v-icon--select"></i>
+            <span class="title">左下角</span>
+          </div> -->
+        </div>
+        <div tabindex="0" class="v-trap-focus-indicator"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      portalDetail: {
+        display: "none",
+        selectedNum: 0,
+        detailMessageList: [
+          {
+            id: 0,
+            title: "右上角",
+            cls: "active",
+          },
+          {
+            id: 1,
+            title: "右下角",
+            cls: "v-menu-item-select-selected selected",
+          },
+          {
+            id: 2,
+            title: "左上角",
+            cls: "",
+          },
+          {
+            id: 3,
+            title: "左下角",
+            cls: "",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 鼠标移入选择框的每一项
+    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";
+      }
+    },
+    // 鼠标移出选择框的每一项
+    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 = "";
+      }
+    },
+    // 点击选择框的每一项
+    clickPosition(detailMessageIndex) {
+      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)
+                }
+            })
+        }
+        this.portalDetail.detailMessageList[detailMessageIndex].cls =
+          "v-menu-item-select-selected selected active";
+        let obj = {
+          index: detailMessageIndex,
+          cls: this.portalDetail.detailMessageList[detailMessageIndex].cls
+        };
+        this.$bus.emit("changeOrHiddenWidgetPosition",obj)
+      }
+      this.countSelectedMenuItem();
+    },
+    //统计已选择的个数
+    countSelectedMenuItem() {
+      this.portalDetail.selectedNum = 0;
+      this.portalDetail.detailMessageList.forEach((item) => {
+        if (this.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";
+        } else if (this.portalDetail.display === "block") {
+          this.portalDetail.display = "none";
+        }
+      } else {
+        this.portalDetail.display = "none";
+      }
+    },
+  },
+  mounted() {
+    this.$bus.on(
+      "showOrHiddenSelectWidgetPosition",
+      this.showOrHiddenSelectWidgetPosition
+    );
+  },
+  components: {},
+  name: "portalTarget",
+};
+</script>

src/component/Desktop/PortalSelectDialogWindow/index.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="vue-portal-target" style="top: 30px; left: 10px;">
+        <div class="v-btn-dropdown">
+            <div tabindex="-1" role="listbox" class="v-menu v-menu-icon-menu" style="height: auto; width: auto; left: 0px; top: 0px; z-index: 15000;"
+                :style="{display:portalDetail.display}">
+                <div tabindex="0" class="v-trap-focus-indicator"></div>
+                <div class="v-trap-focus-body">
+                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select"
+                        v-for="(detailMessage,detailMessageIndex) in portalDetail.detailMessageList" :key="detailMessage.id"
+                        :class="detailMessage.cls"
+                        @mouseenter.stop="mouseenterMenuItem(detailMessageIndex)"
+                        @mouseleave.stop="mouseleaveMenuItem(detailMessageIndex)"
+                        @click.stop="clickMenuItem(detailMessageIndex)">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">{{detailMessage.title}}</span> <!---->
+                    </div>
+                    <!--
+                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">资源监控</span>
+                    </div>
+                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">存储</span>
+                    </div>
+                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">已连接用户</span>
+                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">计划的任务</span>
+                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">文件更改日志</span>
+                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">最新日志</span>
+                        </div>
+                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
+                        <i class="v-icon v-icon--select"></i>
+                        <span class="title">备份</span>>
+                    </div>
+                    -->
+                    </div>
+                <div tabindex="0" class="v-trap-focus-indicator"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                portalDetail:{
+                    display: 'none',
+                    selectedNum: 0,
+                    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:'',
+                        }
+
+                    ]
+                }
+            }
+        },
+        methods: {
+            // 点击选择框的每一项
+            clickMenuItem(detailMessageIndex){
+                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: 'v-widget-item sds-window-v5 syno-sds-widget-item',
+                        cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls,
+                    }
+                    this.$bus.emit("showOrHiddenWidgetItem",obj)
+                }else if(cls === 'active' || cls === ''){
+                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'v-menu-item-select-selected selected active'
+                    let obj = {
+                        index: detailMessageIndex,
+                        cls:'v-widget-item sds-window-v5 syno-sds-widget-item active',
+                        cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls
+                    }
+                    this.$bus.emit("showOrHiddenWidgetItem",obj)
+                }
+                this.countSelectedMenuItem()
+                this.$bus.emit("changeThumbHeight",this.portalDetail.selectedNum)
+
+            },
+            // 鼠标移入选择框的每一项
+            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'
+                }
+            },
+            // 鼠标移出选择框的每一项
+            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 = ''
+                }
+            },
+            // 显示或隐藏选择框
+            showOrHiddenSelectWidgetItem(obj){
+                if(obj.detailMessageList){
+                    this.portalDetail.detailMessageList = JSON.parse(JSON.stringify(obj.detailMessageList))
+                    if(this.portalDetail.display === 'none'){
+                        this.portalDetail.display = 'block'
+                    }else if(this.portalDetail.display === 'block'){
+                        this.portalDetail.display = 'none'
+                    }
+                }else{
+                    this.portalDetail.display = 'none'
+                }
+            },
+            //统计已选择的个数
+            countSelectedMenuItem(){
+                this.portalDetail.selectedNum = 0
+                this.portalDetail.detailMessageList.forEach(item=>{
+                    if(item.cls && item.cls.includes('v-menu-item-select-selected selected')){
+                        this.portalDetail.selectedNum ++
+                    }
+                })
+            }
+        },
+        mounted(){
+            this.$bus.on('showOrHiddenSelectWidgetItem',this.showOrHiddenSelectWidgetItem)
+        },
+        components:{
+        }
+
+    }
+</script>