NEZ-1879 feat：dashboard收藏功能重构

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -49,12 +49,10 @@
       .nz-icon-xingzhuang{
         color: $--color-text-regular;
         cursor: pointer;
-        transform:translateY(2px)
       }
       .nz-icon-a-xingzhuang2{
         color:#FF9219 !important;
         cursor: pointer;
-        transform:translateY(2px) scale(1.2);
       }
     }
   }

nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss

@@ -77,7 +77,7 @@
   display: flex;
   justify-content: space-between;
   .panel-select-left{
-    width: 170px;
+    width: 180px;
     height: 100%;
     box-sizing: border-box;
     border-right:1px solid $--border-color-base;
@@ -98,9 +98,9 @@
         height: 36px;
         cursor: pointer;
         i{
-          margin-left: 20px;
+          margin-left: 14px;
           margin-right: 6px;
-          width: 22px;
+          width: 20px;
           display: flex;
           justify-content: center;
           color: $--color-text-regular;
@@ -145,7 +145,7 @@
   }
   .pop-item-wider{
     flex: 1;
-    width: calc(100% - 170px);
+    width: calc(100% - 180px);
     padding-top: 0;
     .panel-select-header{
       margin-top: 12px;
@@ -155,9 +155,10 @@
   .nz-icon-xingzhuang{
     color: $--color-text-regular;
     font-weight: normal;
+    cursor: pointer ;
   }
   .nz-icon-a-xingzhuang2{
     color:#FF9219 !important;
-    transform: scale(1.2);
+    cursor: pointer ;
   }
 }

nezha-fronted/src/components/chart/chartList.vue

@@ -440,6 +440,15 @@ export default {
     window.removeEventListener('resize', this.resize)
   },
   watch: {
+    // 监听查看模式变化
+    '$store.state.panel.mode': {
+      immediate: true,
+      handler () {
+        this.$nextTick(() => {
+          this.resize()
+        })
+      }
+    },
     dataList: {
       immediate: true,
       deep: true,

nezha-fronted/src/components/common/popBox/selectDashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-popover :placement="placement" popper-class="'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" transition="slide" v-model="popBox.show" :width="500" :disabled="disabled">
+  <el-popover :placement="placement" popper-class="'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" transition="slide" v-model="popBox.show" :width="520" :disabled="disabled">
     <div class="panel-select-wrap">
       <div class="panel-select-left">
         <ul class="panel-select-list">
@@ -14,7 +14,7 @@
       </div>
       <div class="pop-item-wider">
         <div class="panel-select-header">
-          <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="padding:0 12px"></el-input>
+          <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width:316px"></el-input>
         </div>
         <div :class="{'movable': !panelLock&&currentTab==='all'}" class="select-panel-tree">
           <el-tree
@@ -33,7 +33,7 @@
             ref="panelTree">
             <div class="tree--node" slot-scope="{ node, data }">
               <span :title="node.label + ' (' + data.chartNum +' charts）' ">{{ node.label }}</span>
-              <el-row class="block-col-2" style="margin-left:10px">
+              <el-row class="block-col-2" style="margin-left:10px;margin-right:8px">
                 <el-col>
                   <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
                     <span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
@@ -73,11 +73,7 @@ export default {
     panelLock: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false }
   },
-  created () {
-    this.getData('all')
-  },
   mounted () {
-    this.$refs.panelTree.setCurrentKey(this.panel)
   },
   watch: {
     filterPanel: {
@@ -91,8 +87,18 @@ export default {
       handler (n) {
         if (n) {
           this.panel = JSON.parse(JSON.stringify(n))
+          // 设置最近浏览数据
+          this.setBrowse()
+          this.setData()
         }
       }
+    },
+    panelData: {
+      immediate: true,
+      async handler (n) {
+        await this.getStarred()
+        this.setData()
+      }
     }
   },
   data () {
@@ -100,14 +106,15 @@ export default {
       popBox: { show: false },
       panel: { id: 0, name: '' },
       tabList: [
-        { name: '全部仪表盘', icon: 'nz-icon-a-leimucuquanbu', value: 'all' },
+        { name: this.$t('dashboard.allDashboards'), icon: 'nz-icon-a-leimucuquanbu', value: 'all' },
-        { name: '我的收藏', icon: 'nz-icon-xingzhuang', value: 'starred' },
+        { name: this.$t('dashboard.starredDashboards'), icon: 'nz-icon-xingzhuang', value: 'starred' },
-        { name: '我的创建', icon: 'nz-icon-wodechuangjian', value: 'create' },
+        { name: this.$t('dashboard.createdByYou'), icon: 'nz-icon-wodechuangjian', value: 'create' },
-        { name: '最近浏览', icon: 'nz-icon-liulanlishi', value: 'browse' }
+        { name: this.$t('dashboard.recentlyViewed'), icon: 'nz-icon-liulanlishi', value: 'browse' }
       ],
       currentTab: 'all',
       filterPanel: '',
-      treeData: []
+      treeData: [],
+      starredList: []
     }
   },
   methods: {
@@ -115,41 +122,62 @@ export default {
     tabChange (value) {
       if (this.currentTab !== value) {
         this.currentTab = value
+        this.filterPanel = ''
       }
+      this.setData()
     },
-    // 获取数据
+    // 设置树形菜单数据
-    getData (type) {
+    setData (type = this.currentTab) {
-      if (type === 'all') {
+      if (type === 'all') { // 全部
-        this.treeData = this.panelData
+        this.treeData = JSON.parse(JSON.stringify(this.panelData))
+      } else if (type === 'starred') { // 我的收藏
+        this.treeData = JSON.parse(JSON.stringify(this.starredList))
+      } else if (type === 'create') { // 我的创建
+        const userId = localStorage.getItem('nz-user-id')
+        const flatArr = this.flatten(this.panelData)
+        this.treeData = flatArr.filter(item => item.createBy == userId)
+      } else if (type === 'browse') { // 最近浏览
+        const browseArr = JSON.parse(localStorage.getItem('nz-recently-browse') || '[]')
+        const flatArr = this.flatten(this.panelData)
+        const tempArr = []
+        // 比对id获取最近浏览的数据
+        browseArr.forEach(item => {
+          flatArr.forEach(subItem => {
+            if (item.id === subItem.id) {
+              tempArr.push(subItem)
             }
+          })
+        })
+        this.treeData = JSON.parse(JSON.stringify(tempArr))
+      }
+      this.$nextTick(() => {
+        this.$refs.panelTree.setCurrentKey(this.showPanel)
+        this.$refs.panelTree.filter(this.filterPanel)
+        // 更新父组件面板收藏状态
+        this.$set(this.$parent.showPanel, 'starred', this.starredList.some(item => item.id === this.showPanel.id))
+      })
     },
     // 获取收藏的列表
     async getStarred (type) {
-      // const params = {
+      const params = {
-      //   type: 'panel'
+        type: 'panel'
-      // }
+      }
-      // const response = await this.$get('/sys/user/starred', params)
+      const response = await this.$get('/sys/user/starred', params)
-      // if (response.code === 200) {
+      this.starredList = []
-      //   this.tempArr = []
+      this.recursionStarred(this.panelData, response.data ? response.data.list : [])
-      //   this.recursionStarred(this.panelData, response.data.list)
-      //   if (type === 'tree') {
-      //     // 刷新树形控件
-      //     this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
-      //   } else {
-      //     this.$emit('refreshStarred', { data: this.panelData })
-      //   }
-      // }
     },
-    // 比对收藏的列表和全部列表 改变状态
+    // 比对收藏的列表和全部列表 设置starred状态
     recursionStarred (allList, starredList) {
+      const that = this
+      function handler (allList, starredList) {
         allList.forEach((item) => {
           item.starred = false
           starredList.forEach((subItem) => {
             // 判断全部列表每一项的id和收藏列表每一项的id是否相等
             if (item.id === subItem.tid) {
-            if (this.tempArr.every(val => val.id !== item.id)) {
+              if (that.starredList.every(val => val.id !== item.id)) {
                 item.starred = true
-              this.tempArr.push({
+                that.starredList.push({
                   ...item,
                   children: []
                 })
@@ -157,26 +185,54 @@ export default {
             }
           })
           if (item.children && item.children.length) {
-          this.recursionStarred(item.children, starredList)
+            handler(item.children, starredList)
           }
         })
+      }
+      handler(allList, starredList)
     },
-    // 格式化收藏列表 (树形)
+    // 数组对象扁平化
-    formatStarred (list) {
+    flatten (arr) {
-      const arr = JSON.parse(JSON.stringify(list))
+      const tempArr = JSON.parse(JSON.stringify(arr))
-      arr.reverse()
+      // 递归调用
-      for (let i = 0; i < arr.length; i++) {
+      function handler (tempArr) {
-        if (arr[i].pid) {
+        const newArr = []
-          // 找到父级所在下标
+        tempArr.forEach(element => {
-          const parentIndex = arr.findIndex(subItem => subItem.id === arr[i].pid)
+          newArr.push(element)
-          if (parentIndex > -1) {
+          if (element.children) {
-            arr[parentIndex].children.unshift(arr[i])
+            newArr.push.apply(newArr, handler(element.children))
-            arr.splice(i, 1)
+            delete element.children
+          }
+        })
+        return newArr
+      }
+      return handler(tempArr)
+    },
+    // 设置最近浏览的面板
+    setBrowse () {
+      // 获取最近浏览id数组
+      let browseArr = JSON.parse(localStorage.getItem('nz-recently-browse') || '[]')
+      const flatArr = this.flatten(this.panelData)
+      // 若最近浏览的数据已被删除 则截取掉
+      for (let i = 0; i < browseArr.length; i++) {
+        const flag = flatArr.some(item => {
+          return item.id === browseArr[i].id
+        })
+        if (flag === false) {
+          browseArr.splice(i, 1)
           i--
         }
       }
+      // 若已经存在 则先删除
+      const value = browseArr.find(item => item.id === this.panel.id)
+      if (value) {
+        browseArr = browseArr.filter(item => item.id !== value.id)
       }
-      return arr.reverse()
+      // 追加到数组前边
+      browseArr.unshift({ id: this.panel.id })
+      // 如果数组长度大于10则截取
+      browseArr.splice(10)
+      localStorage.setItem('nz-recently-browse', JSON.stringify(browseArr))
     },
     // 新增收藏
     addStarred: bus.debounceFn(function (data) {
@@ -187,22 +243,22 @@ export default {
       this.$post('/sys/user/starred', params).then(async response => {
         if (response.code === 200) {
           await this.getStarred()
-          data.starred = true
+          this.setData()
         }
       })
     },
     300, true),
-
     // 删除收藏
     delStarred: bus.debounceFn(function (data) {
       this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
         if (response.code === 200) {
           await this.getStarred()
-          data.starred = false
+          this.setData()
         }
       })
     },
     300, true),
+
     /*
         * node: 被拖的节点
         * relative: 发生关系的节点
@@ -220,11 +276,11 @@ export default {
       if (!value) return true
       return data.name.indexOf(value) !== -1
     },
-    updateWeight () {
+    updateWeight (data) {
       const toUpdate = []
       let count = 0
 
-      handler(this.panelData)
+      handler(this.treeData)
       function handler (panelData) {
         panelData.forEach(panel => {
           panel.weight = count++
@@ -234,8 +290,9 @@ export default {
           }
         })
       }
-      this.getStarred()
       this.$put('visual/panel/tree', toUpdate)
+      // 更新父组件Weight
+      this.$emit('updateWeight', this.treeData)
     },
     deletePanel (data) {
       this.$emit('deletePanel', data)

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -15,12 +15,12 @@
             <div class="top-tool-left" style="cursor: pointer;">
               <select-dashboard
                 ref="selectDashboard"
-                @refreshStarred="refreshStarred"
                 :panel-data="panelData"
                 :panel-lock="panelLock"
                 :placement="'bottom-start'"
                 :show-panel="showPanel"
                 style="display: inline-block;padding: 0"
+                @updateWeight="updateWeight"
                 @deletePanel="del"
                 @editPanel="edit"
                 @selectDashboard="panelChange">
@@ -310,18 +310,9 @@ export default {
     }
   },
   methods: {
-    // 刷新树形菜单视图
+    // 更新Weight
-    refreshStarred ({ data, type }) {
+    updateWeight (value) {
-      // if (type === 'tree') {
+      this.panelData = JSON.parse(JSON.stringify(value))
-      //   this.panelData = JSON.parse(JSON.stringify(data))
-      // }
-      // this.$nextTick(() => {
-      //   // this.$refs.selectDashboard.$refs.panelTree.filter(this.filterPanel)
-      //   this.$refs.selectDashboard.$refs.panelTree.setCurrentKey(this.showPanel)
-      // })
-      // // 判断当前页面收藏状态
-      // const starredArr = this.$refs.selectDashboard.tempArr
-      // this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
     },
     // 新增收藏
     addStarred (data) {
@@ -353,10 +344,10 @@ export default {
         mode: this.mode
       }
       // this.getTableData()
+      // this.getData(this.filter)
       const path = this.fromRoute.panel
       this.updatePath(param, path)
       this.dateChange()
-      // this.getData(this.filter)
       this.$refs.chartList.cleanData()
     },
 
@@ -684,9 +675,6 @@ export default {
         if (response.code === 200) {
           let isInitData = false
           this.panelData = JSON.parse(JSON.stringify(response.data.list))
-          this.$nextTick(() => {
-            this.$refs.selectDashboard.getStarred('tree')
-          })
           if (response.data.list.length > 0) {
             if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
               this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel))
@@ -703,11 +691,6 @@ export default {
               handler(response.data.list)
               this.filter.panelId = this.showPanel.id
             }
-            this.$nextTick(() => {
-              try {
-                this.$refs.selectDashboard.$refs.panelTree.setCurrentKey(this.showPanel)
-              } catch (e) {}
-            })
             this.isLoading = false
           } else {
             this.showPanel.id = ''
@@ -937,11 +920,6 @@ export default {
         this.mode = ''
       }
       this.$store.commit('setMode', this.mode)
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.$refs.chartList.resize()
-        }, 200)
-      })
       const param = {
         panelId: this.panelId,
         nowTimeType: JSON.stringify(this.nowTimeType),
@@ -970,11 +948,6 @@ export default {
         // 默认模式
         this.mode = ''
         this.$store.commit('setMode', this.mode)
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.$refs.chartList.resize()
-          }, 200)
-        })
         const param = {
           panelId: this.panelId,
           nowTimeType: JSON.stringify(this.nowTimeType),
@@ -1002,14 +975,6 @@ export default {
     })
     // 设置查看模式
     this.$store.commit('setMode', this.mode)
-    this.$nextTick(() => {
-      setTimeout(() => {
-        try {
-          this.$refs.chartList.resize()
-        } catch (error) {
-        }
-      }, 300)
-    })
     if (this.nowTimeType.type) {
       this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
       this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)