gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zyh
2022-06-07 17:08:03 +08:00
parent 5897d2f6ab
commit 54c6041c64
5 changed files with 142 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -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);
}
}
}

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

@@ -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 ;
}
}

9
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -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,

187
nezha-fronted/src/components/common/popBox/selectDashboard.vue
View File

@@ -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: '我的收藏', icon: 'nz-icon-xingzhuang', value: 'starred' },
{ name: '我的创建', icon: 'nz-icon-wodechuangjian', value: 'create' },
{ name: '最近浏览', icon: 'nz-icon-liulanlishi', value: 'browse' }
{ name: this.$t('dashboard.allDashboards'), icon: 'nz-icon-a-leimucuquanbu', value: 'all' },
{ name: this.$t('dashboard.starredDashboards'), icon: 'nz-icon-xingzhuang', value: 'starred' },
{ name: this.$t('dashboard.createdByYou'), icon: 'nz-icon-wodechuangjian', value: 'create' },
{ name: this.$t('dashboard.recentlyViewed'), icon: 'nz-icon-liulanlishi', value: 'browse' }
],
currentTab: 'all',
filterPanel: '',
treeData: []
treeData: [],
starredList: []
}
},
methods: {
@@ -115,68 +122,117 @@ export default {
tabChange (value) {
if (this.currentTab !== value) {
this.currentTab = value
this.filterPanel = ''
}
this.setData()
},
// 获取数据
getData (type) {
if (type === 'all') {
this.treeData = this.panelData
// 设置树形菜单数据
setData (type = this.currentTab) {
if (type === 'all') { // 全部
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 = {
// type: 'panel'
// }
// const response = await this.$get('/sys/user/starred', params)
// if (response.code === 200) {
// this.tempArr = []
// 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 })
// }
// }
const params = {
type: 'panel'
}
const response = await this.$get('/sys/user/starred', params)
this.starredList = []
this.recursionStarred(this.panelData, response.data ? response.data.list : [])
},
// 比对收藏的列表和全部列表 改变状态
// 比对收藏的列表和全部列表 设置starred状态
recursionStarred (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)) {
item.starred = true
this.tempArr.push({
...item,
children: []
})
const that = this
function handler (allList, starredList) {
allList.forEach((item) => {
item.starred = false
starredList.forEach((subItem) => {
// 判断全部列表每一项的id和收藏列表每一项的id是否相等
if (item.id === subItem.tid) {
if (that.starredList.every(val => val.id !== item.id)) {
item.starred = true
that.starredList.push({
...item,
children: []
})
}
}
})
if (item.children && item.children.length) {
handler(item.children, starredList)
}
})
if (item.children && item.children.length) {
this.recursionStarred(item.children, starredList)
}
})
}
handler(allList, starredList)
},
// 格式化收藏列表 (树形)
formatStarred (list) {
const arr = JSON.parse(JSON.stringify(list))
arr.reverse()
for (let i = 0; i < arr.length; i++) {
if (arr[i].pid) {
// 找到父级所在下标
const parentIndex = arr.findIndex(subItem => subItem.id === arr[i].pid)
if (parentIndex > -1) {
arr[parentIndex].children.unshift(arr[i])
arr.splice(i, 1)
i--
// 数组对象扁平化
flatten (arr) {
const tempArr = JSON.parse(JSON.stringify(arr))
// 递归调用
function handler (tempArr) {
const newArr = []
tempArr.forEach(element => {
newArr.push(element)
if (element.children) {
newArr.push.apply(newArr, handler(element.children))
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--
}
}
return arr.reverse()
// 若已经存在 则先删除
const value = browseArr.find(item => item.id === this.panel.id)
if (value) {
browseArr = browseArr.filter(item => item.id !== value.id)
}
// 追加到数组前边
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)

45
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -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: {
// 刷新树形菜单视图
refreshStarred ({ data, type }) {
// if (type === 'tree') {
// 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)
// 更新Weight
updateWeight (value) {
this.panelData = JSON.parse(JSON.stringify(value))
},
// 新增收藏
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)