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

NEZ-1868 feat：panel starred功能开发

Browse Source
This commit is contained in:
18317449825
2022-05-25 14:56:46 +08:00
parent c7cd680bdf
commit 6ec9fe61a3
2 changed files with 170 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
nezha-fronted/src/components/common/popBox/selectPanel.vue
View File

@@ -2,10 +2,43 @@
<el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
<div>
<div class="pop-item-wider">
<slot name="header"></slot>
<div :class="{'movable': !panelLock}" class="select-panel-tree">
<el-tree
v-if="starredData[0].children.length"
:data="starredData"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:props="{label: 'name', children: 'children'}"
@node-click="selectPanel"
default-expand-all
node-key="id"
ref="starredTree"
style="margin-bottom:8px"
>
<div class="tree--node" slot-scope="{ node, data }">
<span :title="data.chartNum?node.label + ' (' + data.chartNum +' charts）':''">{{ node.label }}</span>
<el-row class="block-col-2" style="margin-left:10px">
<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>
<el-dropdown-menu class="right-box-select-top" slot="dropdown" v-has="['main_edit', 'main_delete']">
<el-dropdown-item>
<div @click="editPanel(data)" v-has="'main_edit'"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="deletePanel(data)" v-has="'main_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template v-if="node.label!=='Starred'">
<i v-if="data.starred" class="el-rate__icon el-icon-star-on" @click.stop="delStarred(data)"></i>
<i v-else class="el-rate__icon el-icon-star-off" @click.stop="addStarred(data)"></i>
</template>
</el-col>
</el-row>
</div>
</el-tree>
<el-tree
:data="panelData"
:draggable="!panelLock"
@@ -22,9 +55,9 @@
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" v-if="!panelLock" style="width: 35px;">
<el-row class="block-col-2" style="margin-left:10px">
<el-col>
<el-dropdown placement="bottom-end" trigger="click">
<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>
<el-dropdown-menu class="right-box-select-top" slot="dropdown" v-has="['main_edit', 'main_delete']">
<el-dropdown-item>
@@ -35,6 +68,8 @@
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<i v-if="data.starred" class="el-rate__icon el-icon-star-on" @click.stop="delStarred(data)"></i>
<i v-else class="el-rate__icon el-icon-star-off" @click.stop="addStarred(data)"></i>
</el-col>
</el-row>
</div>
@@ -72,6 +107,7 @@ export default {
immediate: true,
handler (n) {
this.$refs.panelTree && this.$refs.panelTree.filter(n)
// this.$refs.starredTree && this.$refs.starredTree.filter(n)
}
},
showPanel: {
@@ -95,10 +131,88 @@ export default {
data () {
return {
popBox: { show: false },
panel: { id: 0, name: '' }
panel: { id: 0, name: '' },
starredData: [
{
name: 'Starred',
children: []
}
],
tempArr: []
}
},
methods: {
// 获取收藏的列表
async getStarred () {
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)
this.starredData[0].children = this.formatStarred(this.tempArr)
this.$emit('refreshStarred', this.panelData)
}
},
// 比对收藏的列表和全部列表 改变状态
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: []
})
}
}
})
if (item.children && item.children.length) {
this.recursionStarred(item.children, 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--
}
}
}
return arr.reverse()
},
// 新增收藏
addStarred (data) {
const params = {
type: 'panel',
tid: data.id
}
this.$post('/sys/user/starred', params).then(response => {
if (response.code === 200) {
this.getStarred()
}
})
},
// 删除收藏
delStarred (data) {
this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(response => {
if (response.code === 200) {
this.getStarred()
}
})
},
/*
* node: 被拖的节点
* relative: 发生关系的节点
@@ -119,8 +233,8 @@ export default {
updateWeight () {
const toUpdate = []
let count = 0
handler(this.panelData)
handler(this.panelData)
function handler (panelData) {
panelData.forEach(panel => {
panel.weight = count++
@@ -130,7 +244,7 @@ export default {
}
})
}
this.getStarred()
this.$put('visual/panel/tree', toUpdate)
},
deletePanel (data) {
@@ -144,6 +258,9 @@ export default {
},
// 确认选择某个节点，与父组件交互
selectPanel (data, checked, child) {
if (data.name === 'Starred') {
return false
}
this.$emit('selectPanel', data)
this.$refs.panelTree.setCurrentKey(data)
this.esc()
@@ -151,3 +268,13 @@ export default {
}
}
</script>
<style scoped>
.el-rate__icon{
cursor: pointer;
margin-right: 0px;
}
.el-icon-star-on{
color:#FF9219;
transform: scale(1.2);
}
</style>

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

@@ -13,7 +13,7 @@
</div>
<template v-else>
<div class="top-tool-left" style="cursor: pointer;">
<select-panel ref="selectPanel" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'"
<select-panel ref="selectPanel" @refreshStarred="refreshStarred" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'"
:show-panel="showPanel" style="display: inline-block;padding: 0" @deletePanel="del" @editPanel="edit" @selectPanel="panelChange">
<template v-slot:header>
<div class="panel-select-header">
@@ -24,6 +24,8 @@
<template v-slot:trigger>
<i style="color: #BEBEBE" class="el-icon-menu"></i>
<span :title="showPanel.name + ' (' + showPanel.chartNum +' charts）' " class="show-panel-name">{{showPanel.name}}</span>
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="el-rate__icon el-icon-star-on"></i>
<i @click.stop="addStarred(showPanel)" v-else class="el-rate__icon el-icon-star-off"></i>
<i style="font-size: 12px;color: #BEBEBE;" class="nz-icon nz-icon-arrow-down"></i>
</template>
<template v-slot:tail>
@@ -297,6 +299,21 @@ export default {
}
},
methods: {
refreshStarred (value) {
// 重新赋值，否则树形菜单不更新
this.panelData = JSON.parse(JSON.stringify(value))
const starredArr = this.$refs.selectPanel.tempArr
// 判断当前页面收藏状态
this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
},
// 新增收藏
addStarred (data) {
this.$refs.selectPanel.addStarred(data)
},
// 删除收藏
delStarred (data) {
this.$refs.selectPanel.delStarred(data)
},
// 刷新
refreshPanel () {
this.getData(this.filter)
@@ -357,12 +374,12 @@ export default {
return
}
this.rightBox.panel.show = true
this.$refs.panelBox.show(true)
// this.$refs.panelBox.show(true)
this.panel = {
id: '',
name: ''
}
this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
// this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
},
panelReload (clearShowPanel) {
this.getTableData(clearShowPanel)
@@ -639,8 +656,11 @@ export default {
const vm = this
this.$get('visual/panel?type=dashboard&pageSize=-1').then(response => {
if (response.code === 200) {
this.panelData = JSON.parse(JSON.stringify(response.data.list))
let isInitData = false
this.panelData = JSON.parse(JSON.stringify(response.data.list))
this.$nextTick(() => {
this.$refs.selectPanel.getStarred()
})
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))
@@ -1032,3 +1052,14 @@ export default {
}
}
</script>
<style scoped>
.el-rate__icon{
cursor: pointer;
margin-right: 0px;
transform: translateY(1px);
}
.el-icon-star-on{
color:#FF9219;
transform: translateY(1px) scale(1.2);
}
</style>