diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 6f70617e2..8e4ef237c 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -223,6 +223,10 @@ } } .chart__canvas { + div{ + width: 100% !important; + height: 100% !important; + } .nz-chart__tooltip { .row__label,.row__value { color: $--color-text-regular; @@ -586,3 +590,9 @@ } } } +.opacityItem{ + opacity: 0; +} +.hiddenItem{ + box-shadow: $--chart-shadow; +} \ No newline at end of file diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index bfcb7238e..ef7fc9609 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -239,6 +239,7 @@ $--chart-border-color: $--border-color-light; /* 13.panel */ $--chart-title-hover-background-color: #323238; $--chart-box-border-color: $--border-color-light; +$--chart-shadow: -1px 0 8px -3px rgba(0,0,0,0.8); /* 14.popover */ $--popover-background-color: $--background-color-empty; diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index ad2407b6e..8506e7d97 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -235,6 +235,7 @@ $--chart-border-color: $--color-text-label; /* 13.panel */ $--chart-title-hover-background-color: $--background-color-1; $--chart-box-border-color: $--border-color-light; +$--chart-shadow: -1px 0 8px -3px #ccc; /* 14.popover */ $--popover-background-color: $--color-text-label; diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index 8c3086e80..19d9251d8 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/nezha-fronted/src/components/chart/chartList.vue @@ -31,7 +31,8 @@ :isGroup="isGroup" :class="{ 'group-hide-header':item.type === 'group' && item.param.collapse, - 'opacityItem': item.static + 'opacityItem': item.static, + 'hiddenItem': showHidden[item.id]==='hidden' }" :ref="'grid-item' + item.id" :isResizable = "item.type === 'group' ? false: null" @@ -44,6 +45,7 @@ @container-resized="containerResizedEvent" > @@ -148,6 +151,9 @@ export default { }, panelLock () { return this.$store.getters.getPanelLock + }, + variablesArr () { + return this.$store.state.panel.variablesArr } }, data () { @@ -170,7 +176,9 @@ export default { chartInfo: {} }, scrollTop: 0, - scrollTopTimer: null + scrollTopTimer: null, + // 变量比较结果 图表是否显示/隐藏 + showHidden: {} } }, methods: { @@ -431,6 +439,76 @@ export default { } }) } + }, + // 比较变量 图表是否显示/隐藏 + compareVariables () { + if (!this.panelLock) { + return false + } + const isRegExp = (v) => { + let isReg + try { + isReg = eval(v) instanceof RegExp + } catch (e) { + isReg = false + } + return isReg + } + this.showHidden = {} + this.dataList.forEach(item => { + const visibility = this.$loadsh.get(item, 'param.enable.visibility', false) + const varName = this.$loadsh.get(item, 'param.visibility.varName') + const operator = this.$loadsh.get(item, 'param.visibility.operator') + const varValue = this.$loadsh.get(item, 'param.visibility.varValue') + const result = this.$loadsh.get(item, 'param.visibility.result') + // 相反结果 若result为show则contraryResult为hidden + const contraryResult = result === 'show' ? 'hidden' : 'show' + // 是否启用显示隐藏功能 + if (visibility) { + this.variablesArr.forEach(subItem => { + // 判断当前图表的变量 + if (subItem.name === varName) { + let flag = false + switch (operator) { + case 'equal': { + flag = subItem.checked.some(value => { + return value == varValue + }) + break + } + case 'notEqual': { + flag = subItem.checked.some(value => { + return value != varValue + }) + // 判断选中的值是否为空 + if (!subItem.checked.length) { + flag = true + } + break + } + case 'match': { + flag = subItem.checked.some(value => { + const reg = isRegExp(varValue) ? eval(varValue) : new RegExp(varValue) + return value.match(eval(reg)) + }) + break + } + case 'contains': { + flag = subItem.checked.some(value => { + return value.includes(varValue) + }) + break + } + } + if (flag === true) { + this.showHidden[item.id] = result + } else { + this.showHidden[item.id] = contraryResult + } + } + }) + } + }) } }, created () { @@ -456,12 +534,29 @@ export default { // 监听查看模式变化 '$store.state.panel.mode': { immediate: true, - handler (val) { + handler () { setTimeout(() => { this.resize() }) } }, + // 监听变量数组 + variablesArr: { + handler () { + // 比较变量 图表是否显示/隐藏 + this.compareVariables() + } + }, + panelLock: { + handler (flag) { + if (!flag) { + this.showHidden = {} + } else { + // 比较变量 图表是否显示/隐藏 + this.compareVariables() + } + } + }, dataList: { immediate: true, deep: true, @@ -526,6 +621,8 @@ export default { } this.$nextTick(() => { this.copyDataList = JSON.parse(JSON.stringify(tempList)) + // 比较变量 图表是否显示/隐藏 + this.compareVariables() tempList = null setTimeout(() => { this.gridLayoutShow = true diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 59ad9f7e9..e39d14f2b 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -101,6 +101,10 @@ export default { variablesInit: { type: Boolean, default: true + }, + // 变量比较结果 图表是否显示/隐藏 + showHidden: { + type: Object } }, data () { @@ -152,6 +156,10 @@ export default { }, // 参数 isRefresh 标识是否是刷新操作 getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数 + // 如果图表被隐藏了 则不请求数据 + if (this.showHidden && this.showHidden[this.chartInfo.id] === 'hidden') { + return + } if (!this.variablesInit) { // 变量未加载完成 不请求数据 return } @@ -757,6 +765,16 @@ export default { this.chartInfo.loaded && this.getChartData(true) } } + }, + // 监听图表显示 重新请求数据渲染图表 + showHidden: { + handler (n, o) { + const newVal = n[this.chartInfo.id] + const oldVal = o[this.chartInfo.id] + if ((newVal === 'show' || newVal === undefined) && oldVal === 'hidden') { + this.getChartData(true) + } + } } }, mounted () { diff --git a/nezha-fronted/src/components/common/mixin/editRigthBox.js b/nezha-fronted/src/components/common/mixin/editRigthBox.js index 71b218ac4..b54eef3a3 100644 --- a/nezha-fronted/src/components/common/mixin/editRigthBox.js +++ b/nezha-fronted/src/components/common/mixin/editRigthBox.js @@ -50,7 +50,6 @@ export default { }, 1000) }, messageShow (msg, route, params, showNext = false, nextText = '', emit) { - // 如果存在弹框 则先清理掉 this.messageParams.route = route this.messageParams.params = params this.messageParams.emit = emit diff --git a/nezha-fronted/src/components/common/panel/panelVariables.vue b/nezha-fronted/src/components/common/panel/panelVariables.vue index fea90b23c..427225b50 100644 --- a/nezha-fronted/src/components/common/panel/panelVariables.vue +++ b/nezha-fronted/src/components/common/panel/panelVariables.vue @@ -69,7 +69,6 @@ export default { }, watch: { labelArrs: { - immediate: true, handler (n) { this.labelArr = this.labelArrs.map(item => { return { diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue index bae9f2521..625e08150 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue @@ -715,6 +715,105 @@ + + +
+
+ {{$t('dashboard.panel.showHidden')}} + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ @@ -850,7 +949,15 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' } } this.$nextTick(() => { @@ -874,7 +981,15 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' } } break @@ -896,7 +1011,15 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' } } break @@ -915,7 +1038,15 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' } } break @@ -925,7 +1056,20 @@ export default { } this.chartConfig.param = { link: this.chartConfig.param.link, - limit: 100 + limit: 100, + enable: { + legend: true, + valueMapping: false, + thresholds: false, + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break } diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue index 747d007a1..a6e32a9b1 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue @@ -80,16 +80,16 @@ - + - + - + - + @@ -162,6 +162,12 @@ export default { fromEndpoint: { type: Boolean, default: false + }, + variables: { + type: Array, + default: () => { + return [] + } } }, mixins: [rz, editRigthBox], @@ -370,10 +376,17 @@ export default { enable: { thresholds: false, legend: true, - valueMapping: false + valueMapping: false, + visibility: false }, thresholds: [{ value: undefined, color: '#eeeeeeff' }], - showHeader: this.editChart.param.showHeader + showHeader: this.editChart.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } } } @@ -384,15 +397,22 @@ export default { height: 4, unit: 2, type: 'log', - enable: { - thresholds: false, - legend: true, - valueMapping: false - }, elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }], param: { + enable: { + thresholds: false, + legend: true, + valueMapping: false, + visibility: false + }, limit: 100, - showHeader: this.editChart.param.showHeader + showHeader: this.editChart.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } } } @@ -413,7 +433,8 @@ export default { enable: { thresholds: false, legend: true, - valueMapping: false + valueMapping: false, + visibility: false }, datasource: [{ name: 'System', @@ -428,7 +449,13 @@ export default { } ], valueMapping: [], - showHeader: this.editChart.param.showHeader + showHeader: this.editChart.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } } delete this.editChart.elements @@ -439,14 +466,21 @@ export default { span: 4, height: 4, type: 'url', - enable: { - thresholds: false, - legend: true, - valueMapping: false - }, param: { + enable: { + thresholds: false, + legend: true, + valueMapping: false, + visibility: false + }, url: '', - showHeader: this.editChart.param.showHeader + showHeader: this.editChart.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } } delete this.editChart.elements @@ -524,7 +558,16 @@ export default { obj.param.enable = { thresholds: false, legend: false, - valueMapping: false + valueMapping: false, + visibility: false + } + } + if (!obj.param.visibility) { + obj.param.visibility = { + varName: '', + operator: '', + varValue: '', + result: '' } } // this.editChart.varType = 1 diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue index 7cb03fabb..5e7f34c45 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue @@ -148,6 +148,105 @@ + + +
+
+ {{$t('dashboard.panel.showHidden')}} + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ @@ -218,31 +317,81 @@ export default { this.chartConfig.span = 12 this.chartConfig.param = { link: this.chartConfig.param.link, - collapse: true + collapse: true, + enable: { + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break case 'text': this.chartConfig.param = { link: this.chartConfig.param.link, - text: '' + text: '', + enable: { + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break case 'diagram': this.chartConfig.param = { link: this.chartConfig.param.link, - topo: '' + topo: '', + enable: { + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break case 'url': this.chartConfig.param = { link: this.chartConfig.param.link, - url: '' + url: '', + enable: { + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break case 'clock': this.chartConfig.param = { link: this.chartConfig.param.link, - timeType: 'local' + timeType: 'local', + enable: { + visibility: false + }, + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break } diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js index 7bf8a6917..325a5d983 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js +++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js @@ -12,7 +12,13 @@ const rz = { } export default { props: { - params: {} + params: {}, + variables: { + type: Array, + default: () => { + return [] + } + } }, data () { return { @@ -34,6 +40,21 @@ export default { value: 'zero' }], statisticsList: this.$CONSTANTS.statisticsList, + operatorList: [ + { + label: 'equal', + value: 'equal' + }, { + label: 'not equal', + value: 'notEqual' + }, { + label: 'match', + value: 'match' + }, { + label: 'contains', + value: 'contains' + } + ], legendPositionList: [ { label: this.$t('overall.bottom'), @@ -611,5 +632,13 @@ export default { this.chartConfig.param[key][index].error = false this.$forceUpdate() } + }, + watch: { + params: { + deep: true, + handler (n) { + this.chartConfig.param.showHeader = n.param.showHeader + } + } } } diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue index ac54d1ff3..994efddaa 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue @@ -670,6 +670,105 @@ + + +
+
+ {{$t('dashboard.panel.showHidden')}} + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ @@ -801,9 +900,17 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false }, - datasource: [...this.chartConfig.param.datasource] + datasource: [...this.chartConfig.param.datasource], + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break case 'bar': @@ -824,9 +931,17 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false }, - datasource: [...this.chartConfig.param.datasource] + datasource: [...this.chartConfig.param.datasource], + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break case 'table': @@ -843,9 +958,17 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false }, - datasource: [...this.chartConfig.param.datasource] + datasource: [...this.chartConfig.param.datasource], + showHeader: this.chartConfig.param.showHeader, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } } break } diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index 83b11770c..af9db0856 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -127,6 +127,7 @@ :from="fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" + :variables="variables" @close="closeChartBox" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" @@ -225,11 +226,18 @@ export default { enable: { legend: true, valueMapping: false, - thresholds: false + thresholds: false, + visibility: false }, thresholdShow: true, thresholds: [{ value: undefined, color: randomcolor() }], - showHeader: 1 + showHeader: 1, + visibility: { + varName: '', + operator: '', + varValue: '', + result: '' + } }, elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }], panel: '',