perf : panelBox 样式及其编辑时数据请求方式调整

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{

nezha-fronted/src/components/common/rightBox/panelBox.vue

@@ -40,7 +40,7 @@
             </el-form-item>
           <!--   Report  -->
           <div>
-            <el-form-item >
+            <el-form-item class="item-report">
             <div class="form__sub-title">
               <span>{{$t('dashboard.panel.report')}}</span>
               <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
@@ -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,
+              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) : this.editPanel.param.report.schedule.etime
+              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,17 +393,23 @@ export default {
     'editPanel.param.report.schedule.stime': {
       deep: true,
       handler (n) {
+        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) {
+        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')
         }
       }
     }
   }
+}
 </script>

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -389,10 +389,12 @@ export default {
       })
     },
     edit (u) {
-      this.panel = Object.assign({}, u)
+      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 = {
-          ...u,
+              ...this.panel,
               param: {
                 report: {
                   enable: false,
@@ -412,7 +414,23 @@ export default {
               }
             }
           }
+          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.panel = Object.assign({}, u)
     },
     toAdd () {
       if (!this.hasButton('panel_view')) {