From a0a1d4b4984b9c295bf9c51d7d64b3b9e8a4e031 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Fri, 8 Jul 2022 18:06:31 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-2015=20fix=EF=BC=9A=20asset=20/=20entpoint?= =?UTF-8?q?=20detail=20=E9=A1=B5=E9=9D=A2=E6=93=8D=E4=BD=9C=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20Edit=20dashboard=20=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/bottomBox/bottomBox.scss | 2 +- .../common/bottomBox/panelTabNew.scss | 11 +- .../components/common/bottomBox/bottomBox.vue | 14 +- .../common/bottomBox/tabs/panelTabNew.vue | 21 +- .../common/popBox/topToolMoreOptions.vue | 293 +++++++++++------- .../components/common/rightBox/panelBox.vue | 19 +- 6 files changed, 227 insertions(+), 133 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss index 9bf0923ee..3bd9b005d 100644 --- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss @@ -46,7 +46,7 @@ } } &>.bottom-panel{ - padding: 15px 10px 10px 10px !important; + padding: 15px 10px 0px 10px !important; } } .sub-top-tools .top-tool-btn-txt .nz-icon{ diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss index 6931f0ade..f2cb1c743 100644 --- a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss +++ b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss @@ -92,7 +92,7 @@ color: #60BEFF; font-size: 13px } - + .panel-dropdown-btn:hover { color: #409EFF; } @@ -150,6 +150,15 @@ button:hover { background: $--background-color-empty; } + .footer__btn { + background-color: $--color-primary; + border: none; + } + .footer__btn.footer__btn--light { + background-color: $--button-light-hover-background-color; + border: 1px solid $--button-light-border-color; + color: $--button-light-color; + } } .date-range-panel{ .el-button--primary{ diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue index 65356f65d..e73d1c9c9 100644 --- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue +++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue @@ -174,31 +174,31 @@ export default { }, asset: { panel: [ - { prop: 'panelTab', name: this.$t('overall.detail'), active: true }, + { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'log', name: this.$t('overall.logs'), active: false } ], alertMessage: [ - { prop: 'panelTab', name: this.$t('overall.detail'), active: false }, + { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'log', name: this.$t('overall.logs'), active: false } ], endpoint: [ - { prop: 'panelTab', name: this.$t('overall.detail'), active: false }, + { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true }, { prop: 'log', name: this.$t('overall.logs'), active: false } ], log: [ - { prop: 'panelTab', name: this.$t('overall.detail'), active: false }, + { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'log', name: this.$t('overall.logs'), active: true } ], alertMessageSub: [ - { prop: 'panelTab', name: this.$t('overall.detail'), active: false }, + { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'log', name: this.$t('overall.logs'), active: false }, @@ -214,7 +214,7 @@ export default { }, endpoint: { endpointTabTitle: [ - { prop: 'panelTab', name: this.$t('overall.detail') }, + { prop: 'panelTab', name: this.$t('overall.dashboard') }, { prop: 'endpointAlertMessage', name: this.$t('overall.alert') }, { prop: 'Metrics', name: this.$t('overall.metric') }, { prop: 'log', name: this.$t('overall.logs') } @@ -272,7 +272,7 @@ export default { const config = this.obj.configs.find(c => c.type === 'logs') const hasLog = config && config.enable === 1 const tabs = [ - { prop: 'panelTab', name: this.$t('overall.detail') }, + { prop: 'panelTab', name: this.$t('overall.dashboard') }, { prop: 'endpointAlertMessage', name: this.$t('overall.alert') }, { prop: 'Metrics', name: this.$t('overall.metric') } ] diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue index fed317e37..0640c1d27 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue @@ -99,6 +99,7 @@
+ @@ -158,6 +160,7 @@ import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin' import exportHtmlMixin from '@/components/common/mixin/exportHtml' +import panelVariables from "@/components/common/panel/panelVariables"; export default { name: 'panelTabNew', mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin], @@ -275,7 +278,9 @@ export default { panelDataList: [], batchDeleteObjs: [], nowTimeType: {}, - chartDetailInfo: {} + chartDetailInfo: {}, + variables: [], + variablesInit: false } }, components: { @@ -283,7 +288,8 @@ export default { chartList, nzBottomDataList, topToolMoreOptions, - chartTempBox + chartTempBox, + panelVariables // 处理panel变量的组件 }, methods: { // 刷新 @@ -544,10 +550,13 @@ export default { }, // 公用操作 getTableData (linkId) { + this.variablesInit = false if (this.from === this.fromRoute.alertRule) { + this.variablesInit = true this.getData(this.filter) } else { if (this.from === this.fromRoute.chartTemp) { + this.variablesInit = true if (this.obj.type === 'group') { this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => { this.panelDataList = res.data.list @@ -564,11 +573,13 @@ export default { this.getData(this.filter) } } else { - this.$get('visual/panel', { type: this.from, link: linkId }).then(response => { + this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(response => { + console.log(response) if (response.code === 200) { this.panelData = response.data.list if (this.panelData.length > 0) { this.showPanel.id = this.filter.panelId = this.panelData[0].id + this.variables = this.$loadsh.get(this.panelData, '[0].param.variables') this.getData(this.filter) } } else { @@ -787,6 +798,10 @@ export default { } else { this.exportToHtml(this.obj.name) } + }, + getPanelData () { + this.variablesInit = true + this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop) } }, mounted () { diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue index 9f2819844..da3478d44 100644 --- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue +++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue @@ -1,133 +1,145 @@