From ea0b8eafefb4cb71985f2837c4575b4633195d1a Mon Sep 17 00:00:00 2001 From: likexuan Date: Fri, 17 Jun 2022 10:02:07 +0800 Subject: [PATCH] =?UTF-8?q?perf=20:=20panelBox=20=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=8F=8A=E5=85=B6=E7=BC=96=E8=BE=91=E6=97=B6=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=96=B9=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/rightBox/panelBox.scss | 19 +++++- .../components/common/rightBox/panelBox.vue | 31 ++++------ .../src/components/page/dashboard/panel.vue | 62 ++++++++++++------- 3 files changed, 70 insertions(+), 42 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss index 27ccfbed3..25d90fe35 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss @@ -1,10 +1,17 @@ .right-box-panel{ + .item-report{ + .form__sub-title{ + margin-bottom: 5px; + } + } .item-receivers{ .el-select.el-select--small{ width: 100%; } .item-receivers-text{ + font-size: 12px; color: $--color-text-secondary; + padding-left: 5px; } } .el-input--suffix.el-date-editor--datetime .el-input__inner{ @@ -64,8 +71,15 @@ height: 41px; .el-radio-group{ height: 100%; - border-left: 1px solid $--border-color-light; + .el-radio-button{ + border: 1px solid $--border-color-light; + margin-right: -1px; + } + .el-radio-button.is-active{ + border-radius: 0; + } .el-radio-button__inner{ + border: 0; height: 100%; line-height: 1.5; font-size: 14px; @@ -76,6 +90,7 @@ height: 100%; .el-checkbox-button{ margin-right: -2px; + width: calc(100% / 6.9) !important; .el-checkbox-button__inner{ background-color: $--background-color-empty; border:1px solid $--border-color-light; @@ -101,6 +116,7 @@ } .form-tabs{ width: 100%; + margin-bottom: 0 !important; .el-tabs__nav{ display: flex; .el-tabs__item{ @@ -126,7 +142,6 @@ } .el-form-item__content{ - text-align: unset !important; .el-checkbox-button{ width: calc(100% / 7) !important; .el-checkbox-button__inner{ diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue index bda8a1e91..4223c23fb 100644 --- a/nezha-fronted/src/components/common/rightBox/panelBox.vue +++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue @@ -40,7 +40,7 @@
- +
{{$t('dashboard.panel.report')}} @@ -264,17 +264,6 @@ export default { this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss' if (this.editPanel.id) { this.isShow = Number(this.editPanel.param.report.schedule.type) - this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + '' - if (this.editPanel.param.report.schedule.stime !== '') { - this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime) - } else { - this.editPanel.param.report.schedule.stime = '' - } - if (this.editPanel.param.report.schedule.etime !== '') { - this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime) - } else { - this.editPanel.param.report.schedule.etime = '' - } } }, mounted () { @@ -327,8 +316,8 @@ export default { type: Number(this.editPanel.param.report.schedule.type), repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1, nums: this.editPanel.param.report.schedule.nums, - stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime, - etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime + stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.stime, + etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.etime }, receivers: this.editPanel.param.report.receivers }, @@ -404,15 +393,21 @@ export default { 'editPanel.param.report.schedule.stime': { deep: true, handler (n) { - this.editPanel.param.report.schedule.stime = bus - .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss') + const startTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.stime', '') + if (startTime !== '') { + this.editPanel.param.report.schedule.stime = bus + .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss') + } } }, 'editPanel.param.report.schedule.etime': { deep: true, handler (n) { - this.editPanel.param.report.schedule.etime = bus - .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss') + const endTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.etime', '') + if (endTime !== '') { + this.editPanel.param.report.schedule.etime = bus + .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss') + } } } } diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index 3d3c65962..dc313d5a4 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -389,30 +389,48 @@ export default { }) }, edit (u) { - this.panel = Object.assign({}, u) - if (!this.panel.param.report) { - this.panel = { - ...u, - param: { - report: { - enable: false, - range: { - unit: '' - }, - schedule: { - type: '0', - repeat: 1, - nums: [], - stime: '', - etime: '' - }, - receivers: [] - }, - chartShare: 'none' + this.$get('visual/panel?ids=' + u.id).then(res => { + if (res.code === 200) { + this.panel = res.data.list[0] + if (!this.panel.param.report) { + this.panel = { + ...this.panel, + param: { + report: { + enable: false, + range: { + unit: '' + }, + schedule: { + type: '0', + repeat: 1, + nums: [], + stime: '', + etime: '' + }, + receivers: [] + }, + chartShare: 'none' + } + } } + this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + '' + const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '') + if (startTime !== '') { + this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss') + } else { + this.panel.param.report.schedule.stime = '' + } + const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '') + if (endTime !== '') { + this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss') + } else { + this.panel.param.report.schedule.etime = '' + } + this.rightBox.panel.show = true } - } - this.rightBox.panel.show = true + }) + // this.panel = Object.assign({}, u) }, toAdd () { if (!this.hasButton('panel_view')) {