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

NEZ-2389 feat：dashboard chart（group）支持根据variable实现repeat功能

Browse Source
This commit is contained in:
zyh
2022-11-17 17:54:58 +08:00
parent a058d74f0a
commit 336b131d94
7 changed files with 170 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/chart/ChartScreenHeader.vue
View File

@@ -27,9 +27,9 @@
</span>
</el-popover>
</span>
<div class="chart-header__title" :title="chartInfo.name">
<div class="chart-header__title" :title="nameFormate()">
<slot name="title-icon"></slot>
{{chartInfo.name}}
{{nameFormate()}}
</div>
<div class="chart-header__tools">
<span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">

8
nezha-fronted/src/components/chart/chartHeader.vue
View File

@@ -40,10 +40,10 @@
</span>
</el-popover>
</span>
<div class="chart-header__title" v-if="!isGroup" :title="chartInfo.name">{{chartInfo.name}}</div>
<div class="chart-header__title" v-if="!isGroup" :title="nameFormate()">{{nameFormate()}}</div>
<div class="chart-header__title groupTitle" v-else >
<span @click="groupShow"> <i class="nz-icon" :class="chartInfo.param.collapse ? 'nz-icon-arrow-right': 'nz-icon-arrow-down'"></i></span>
{{chartInfo.name}}
{{nameFormate()}}
<span v-show="chartInfo.param.collapse" class="collapse-content">({{chartData ? chartData.length : 0}} charts)</span>
</div>
<div class="temp"></div>
@@ -56,7 +56,7 @@
<i class="nz-icon nz-icon-info-normal tool__icon"></i>
</el-tooltip>
</span>
<span v-if="chartInfo.type=='group'" class="chart-header__tool" @click="addChartGroup">
<span v-if="chartInfo.type=='group'&&!chartInfo.repeatIndex" class="chart-header__tool" @click="addChartGroup">
<!-- <el-tooltip :content="$t('button.add')" effect="light" placement="top" > -->
<i class="nz-icon nz-icon-plus tool__icon" :title="$t('tip.add')"></i>
<!-- </el-tooltip> -->
@@ -71,7 +71,7 @@
<i class="nz-icon nz-icon-maxview tool__icon"></i>
</div>
</span>
<span class="chart-header__tool">
<span class="chart-header__tool" v-if="!chartInfo.repeatIndex">
<el-dropdown v-clickoutside="clickos" v-has="['main_edit','main_delete','main_add']" trigger="click">
<i class="el-icon-more tool__icon" @click.stop="dropdownMenuShow = !dropdownMenuShow" :title="$t('overall.more')"></i>
<el-dropdown-menu style="display: none" class="temp-dropdown"></el-dropdown-menu>

41
nezha-fronted/src/components/chart/chartHeaderMixin.js
View File

@@ -84,6 +84,39 @@ export default {
},
unitChange (val) {
this.$emit('unitChange', val)
},
// 所有类型 chart name 支持变量替换
nameFormate () {
let str = this.chartInfo.name
// group图表设置repeat的name替换
if (this.chartInfo.repeatVariable) {
const variable = this.chartInfo.repeatVariable
const reg = new RegExp('\\$' + variable, 'g')
str = str.replace(reg, this.chartInfo.repeatValue.replace(/\"/g, '\\"').replace(/\'/g, "\\'"))
}
let confirmReg = []
this.variablesArr.forEach(item => {
const reg = '$' + item.name // 后续需要考虑 item,name 使用特殊字符的问题
const index = this.chartInfo.name.indexOf(reg)
if (index !== -1) {
confirmReg.push(item)
}
})
confirmReg = this.$loadsh.orderBy(confirmReg, function (item) { // 根据 匹配的name的长度排序 避免匹配的 $a 没匹配 $asset的问题
return item.name.length
}, 'desc')
if (confirmReg.length) {
confirmReg.forEach(item => {
const reg = new RegExp('\\$' + item.name, 'g') // 后续需要考虑 item,name 使用特殊字符的问题
str = str.replace(reg, item.checked.map(label => label.replace(/\"/g, '\\"').replace(/\'/g, "\\'")).join('+'))
})
}
return str
}
},
computed: {
variablesArr () {
return this.$store.getters.getVariablesArr
}
},
watch: {
@@ -94,6 +127,14 @@ export default {
this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
}
}
},
'chartInfo.repeatVariable': {
immediate: true,
handler (n) {
if (n) {
this.nameFormate()
}
}
}
}
}

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

@@ -243,7 +243,7 @@ export default {
},
movedEvent (i, newX, newY) {
if (!this.isGroup) {
this.moveChart()
this.moveChart(i, newX, newY)
this.onScroll(this.scrollTop)
} else {
bus.$emit('groupChildMove')
@@ -280,9 +280,22 @@ export default {
this.$set(this.copyDataList, index, chart)
this.onScroll(this.scrollTop)
},
moveChart () {
moveChart (id, newX, newY) {
if (!this.groupInfo) {
const moveItem = this.copyDataList.find(item => item.id == id)
const moveIndex = this.copyDataList.findIndex(item => item.id == id)
let num = 1
this.copyDataList.forEach((item, index) => {
const moveId = String(id).split('-repeat-')[0]
const repeatId = String(item.id).split('-repeat-')[0]
if (moveId == repeatId && moveIndex != index) {
item.y = moveItem.y + (num * 0.1)
num++
}
})
}
this.onScroll(this.scrollTop)
const arr = this.copyDataList.filter(item => !item.staic)
const arr = this.copyDataList.filter(item => !item.staic && !item.repeatIndex)
const charts = []
let weight = 0
arr.forEach(item => {
@@ -393,7 +406,7 @@ export default {
bus.$emit('refreshPanel')
},
createChartSuccess (params) {
const arr = this.copyDataList.filter(item => !item.staic)
const arr = this.copyDataList.filter(item => !item.staic && !item.repeatIndex)
const charts = []
let weight = 0
arr.forEach(item => {
@@ -453,6 +466,10 @@ export default {
},
// 比较变量 图表是否显示/隐藏
compareVariables () {
// 防止group中的chartList执行
if (this.groupInfo) {
return
}
const isRegExp = (v) => {
let isReg
try {
@@ -539,7 +556,75 @@ export default {
}
})
this.onScroll(this.scrollTop)
},
// group设置repeat 便利变量重复渲染图表
repeatVariableFn () {
// 防止group中的chartList执行
if (this.groupInfo) {
return
}
// 先删除掉复制的数据
for (let index = 0; index < this.copyDataList.length; index++) {
const item = this.copyDataList[index]
if (item.repeatIndex > 0) {
this.copyDataList.splice(index, 1)
index--
}
}
this.$nextTick(() => {
for (let index = 0; index < this.copyDataList.length; index++) {
const item = this.copyDataList[index]
if (this.$loadsh.get(this.showHidden[item.id], 'visibility') !== 'hidden' && this.$loadsh.get(item.param.enable, 'repeat')) {
this.variablesArr.forEach((variables) => {
const repeatVariable = this.$loadsh.get(item.param.repeat, 'variable')
if (item.type === 'group' && variables.name === repeatVariable) {
if (!variables.checked.length) {
item.children.forEach(children => {
delete children.repeatIndex
delete children.repeatVariable
delete children.repeatValue
})
return
}
variables.checked.forEach((subItem, subIndex) => {
if (subIndex > 0) {
// 复制数据 重新设置id
const repeatItem = this.$loadsh.cloneDeep(item)
repeatItem.id = item.id + '-' + 'repeat-' + subIndex
repeatItem.i = repeatItem.id
repeatItem.repeatIndex = subIndex
repeatItem.repeatVariable = repeatVariable
repeatItem.repeatValue = subItem
repeatItem.children.forEach(children => {
children.id = children.id + '-' + 'repeat-' + subIndex
children.repeatIndex = subIndex
children.repeatVariable = repeatVariable
children.repeatValue = subItem
})
index += 1
// 复制数据
this.copyDataList.splice(index, 0, repeatItem)
} else {
item.repeatIndex = 0
item.repeatVariable = repeatVariable
item.repeatValue = subItem
item.children.forEach(children => {
children.repeatIndex = 0
children.repeatVariable = repeatVariable
children.repeatValue = subItem
})
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].getChartData()
}
})
}
})
}
}
this.onScroll(this.scrollTop)
})
}
},
created () {
this.firstInit = true
@@ -572,9 +657,11 @@ export default {
},
// 监听变量数组
variablesArr: {
handler () {
handler (newVal, oldVal) {
// 比较变量 图表是否显示/隐藏
this.compareVariables()
this.repeatVariableFn()
}
},
panelLock: {
@@ -673,6 +760,8 @@ export default {
this.copyDataList = JSON.parse(JSON.stringify(tempList))
// 比较变量 图表是否显示/隐藏
this.compareVariables()
this.repeatVariableFn()
tempList = null
setTimeout(() => {
this.gridLayoutShow = true

22
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -187,9 +187,15 @@ export default {
if (!this.chartInfo.oldElements) { // 创建一个备份 用于判断变量替换 能拿到原本变量的位置
this.chartInfo.oldElements = this.chartInfo.elements ? JSON.parse(JSON.stringify(this.chartInfo.elements)) : []
}
this.chartInfo.elements = this.chartInfo.oldElements.filter(item => item.state) // 处理不显示的表达式
this.chartInfo.elements = this.chartInfo.elements.map(item => { // 处理表达式的变量
const variables = this.variablesReplace(item.expression)
// eslint-disable-next-line vue/no-mutating-props
this.chartInfo.elements = this.$loadsh.cloneDeep(this.chartInfo.oldElements.filter(item => item.state)) // 处理不显示的表达式
// eslint-disable-next-line vue/no-mutating-props
this.chartInfo.elements = this.chartInfo.elements.map((item, index) => { // 处理表达式的变量
// group图表设置repeat的表达式替换
if (this.chartInfo.repeatVariable) {
item.expression = this.variablesReplaceRepeat(item.expression)
}
const variables = this.variablesReplace((item.expression))
this.myVariables.push(variables)
return {
...item,
@@ -574,6 +580,14 @@ export default {
}
return str
},
// group图表repeat 表达式替换
variablesReplaceRepeat (expression) {
let str = expression
const variable = this.chartInfo.repeatVariable
const reg = new RegExp('\\$' + variable, 'g')
str = str.replace(reg, this.chartInfo.repeatValue.replace(/\"/g, '\\"').replace(/\'/g, "\\'"))
return str
},
getHexagonFigureData () {
return new Promise(resolve => {
this.$get('stat/alertMessage/topN', { size: 48, dimension: 'module' }).then(response => {
@@ -766,7 +780,7 @@ export default {
},
variablesArr: {
handler (n) {
const elements = this.chartInfo.oldElements || []
const elements = this.$loadsh.cloneDeep(this.chartInfo.oldElements) || []
const variables = elements.map((element) => {
return this.variablesReplace(element.expression)
})

11
nezha-fronted/src/components/common/panel/panelVariables.vue
View File

@@ -389,13 +389,22 @@ export default {
})
},
close () {
let flag = false
this.labelArr.forEach((item) => {
if (item.visible && item.multi) {
this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
flag = true
}
item.visible = false
})
if (flag) {
const oldVariables = this.$store.state.panel.variablesArr
// 如果新旧值相等 则不执行
if (JSON.stringify(oldVariables) !== JSON.stringify(this.labelArr)) {
this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
}
}
}
},
beforeDestroy () {
this.$store.dispatch('dispatchVariablesArr', [])

2
nezha-fronted/src/store/panel.js
View File

@@ -94,7 +94,7 @@ const panel = {
state.currentMousemove = value
},
setVariablesArr (state, value) {
state.variablesArr = value
state.variablesArr = JSON.parse(JSON.stringify(value))
},
setTimeBoxClass (state, value) {
state.timeBoxClass = value