diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
new file mode 100644
index 000000000..27ccfbed3
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -0,0 +1,153 @@
+.right-box-panel{
+  .item-receivers{
+    .el-select.el-select--small{
+      width: 100%;
+    }
+    .item-receivers-text{
+      color: $--color-text-secondary;
+    }
+  }
+    .el-input--suffix.el-date-editor--datetime .el-input__inner{
+      padding-left: 15px;
+    }
+    .form-items--half-width-group{
+      .item-receivers{
+        width: 100%;
+        .el-select.el-select--small{
+          width: 100%;
+        }
+      }
+      .form-item--half-width{
+        .el-date-editor.el-date-editor--datetime{
+          width: 100%;
+          .el-input__inner{
+            height: 32px;
+          }
+        }
+      }
+      .check-month_box{
+        .el-checkbox-group{
+          display: flex;
+          justify-content: start;
+          align-items: center;
+          flex-wrap: wrap;
+          .el-checkbox-button{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: calc(100% / 7);
+            margin-right: -2px;
+            margin-bottom: -1px;
+            border: 1px solid $--border-color-light;
+            .el-checkbox-button__inner{
+              border: 0px;
+              border-left: 0px !important;
+              border-bottom: 0px !important;
+              display: block;
+              width: 100%;
+              height: 100%;
+              background-color: $--background-color-empty;
+              border-radius: 0;
+            }
+          }
+        }
+        
+    .el-checkbox-button.is-checked .el-checkbox-button__inner {
+      color: #fff;
+      border-radius: 0;
+      background-color: $--color-primary !important;
+    }
+    }
+      .range-time{
+        width: 100%;
+        .el-form-item__content{
+          height: 41px;
+          .el-radio-group{
+            height: 100%;
+            border-left: 1px solid $--border-color-light;
+            .el-radio-button__inner{
+              height: 100%;
+              line-height: 1.5;
+              font-size: 14px;
+              color: $--color-text-primary;
+            }
+          }
+          .el-checkbox-group{
+            height: 100%;
+            .el-checkbox-button{
+              margin-right: -2px;
+              .el-checkbox-button__inner{
+                background-color: $--background-color-empty;
+                border:1px solid $--border-color-light;
+              }
+            }
+          }
+        }
+        .el-radio-group{
+          display: flex;
+          border-left: 0;
+          .el-radio-button{
+            flex: 1;
+          }
+        }
+
+        .el-checkbox-button.is-checked .el-checkbox-button__inner {
+          color: #fff;
+          border-radius: 0;
+          background-color: $--color-primary !important;
+          border: 1px solid $--color-primary !important;
+          // margin-right: -1px;
+        }
+      }
+      .form-tabs{
+        width: 100%;
+        .el-tabs__nav{
+          display: flex;
+          .el-tabs__item{
+            flex: 1;
+          }
+          .el-checkbox-button.is-checked .el-checkbox-button__inner {
+            color: #fff;
+            border-radius: 0;
+            background-color: $--color-primary !important;
+            border: 1px solid $--color-primary !important;
+            // margin-right: -1px;
+          }
+        }
+      }
+      .form-day-week{
+        width: 100%;
+        .el-input-group__append{
+          border: 1px solid $--border-color-light;
+          background-color: $--right-box-sub-title-background-color;
+        }
+      }
+   }
+ }
+      
+  .el-form-item__content{
+    text-align: unset !important;
+    .el-checkbox-button{
+      width: calc(100% / 7) !important;
+      .el-checkbox-button__inner{
+        width: 100%;
+        padding: 11px 3px;
+      }
+      
+    }
+    .el-checkbox-button.is-focus .el-checkbox-button__inner{
+      border-color: $--border-color-base;
+    }
+
+    .el-tabs__item.is-top.is-active{
+      color: #fff !important;
+      background-color: $--color-primary !important;
+    }
+    .el-radio-button.el-radio-button--small.is-active{
+      .el-radio-button__inner{
+        color: #fff !important;
+      }
+    }
+  }
+
+  
\ No newline at end of file
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 1f13dcb64..17add18bb 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -51,6 +51,7 @@
 @import './common/rightBox/chartRightBox/chartRightBox.scss';
 @import './common/rightBox/mibBox.scss';
 @import './common/rightBox/assetBactchEditBox.scss';
+@import './common/rightBox/panelBox.scss';
 @import './common/table/alert/alertMessageTable.scss';
 @import './common/table/alert/alertRuleTable.scss';
 @import './common/table/alert/alertSilenceTable.scss';
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 721426ec2..0094a6c81 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -14,6 +14,148 @@
           <el-form-item :label='$t("overall.name")' prop="name">
             <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
           </el-form-item>
+          <!--remark-->
+           <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
+            <el-input
+              v-model="editPanel.remark"
+              maxlength="256"
+              size="small" :rows="2"
+              show-word-limit
+              type="textarea">
+            </el-input>
+          </el-form-item>
+           <el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
+             <el-select v-model="editPanel.param.chartShare" clearable  placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+               <el-option value="none" label="Default">
+               <span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
+               </el-option>
+              <el-option value="crosshair" label="Share crosshair">
+               <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
+               </el-option>
+               <el-option value="tooltip" label="Share tooltip">
+               <span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
+               </el-option>
+            </el-select>
+            <div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
+            </el-form-item>
+          <!--   Report  -->
+          <div>
+            <el-form-item >
+            <div class="form__sub-title">
+              <span>{{$t('dashboard.panel.report')}}</span>
+              <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
+            </div>
+            </el-form-item>
+            <div v-if="editPanel.param.report.enable">
+              <transition name="el-zoom-in-top" >
+                <div class="form-items--half-width-group">
+                  <el-form-item
+                  :label="$t('backup.start')"
+                  class="form-item--half-width"
+                  prop="stime"
+                  >
+                  <my-date-picker align="right" class=" "
+                              v-model="editPanel.param.report.schedule.stime"
+                              :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+                              popper-class="panel-time-picker-popper right-box-select-top"
+                              prefix-icon=" "
+                              size="mini"
+                              type="datetime">
+                      </my-date-picker>
+                    </el-form-item>
+                  <el-form-item
+                  :label="$t('dashboard.panel.endAt')"
+                  class="form-item--half-width"
+                  prop="etime"
+                  >
+                     <my-date-picker align="right" class=" "
+                            v-model="editPanel.param.report.schedule.etime"
+                            :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+                            popper-class="panel-time-picker-popper right-box-select-top"
+                            prefix-icon=" "
+                            size="mini"
+                            type="datetime">
+                         </my-date-picker>
+                    </el-form-item>
+                  <el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="unit">
+                    <el-radio-group v-model="editPanel.param.report.range.unit" size="small">
+                      <el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
+                      <el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
+                      <el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
+                    </el-radio-group>
+                    </el-form-item>
+            <el-form-item
+            :label="$t('backup.schedule')"
+            prop="schType"
+            class="form-tabs">
+            <el-tabs
+              v-model="editPanel.param.report.schedule.type"
+              type="card"
+              @tab-click="datasourceChange"
+              class="backups-info-tab"
+            >
+              <el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
+              <el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
+              <el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
+            </el-tabs>
+               </el-form-item>
+          <el-form-item
+            v-if="isShow === 2 || isShow === 3 ? true :false"
+            :label="$t('backup.RepeatEvery')"
+            prop="repeat"
+            class="form-day-week">
+            <el-input
+              size="small"
+              v-model="editPanel.param.report.schedule.repeat"
+              id="chart-box-title"
+              v-if="isShow === 3 ? true :false">
+              <template slot="append">{{ $t("backup.week") }}</template>
+            </el-input>
+            <el-input
+              size="small"
+              v-model="editPanel.param.report.schedule.repeat"
+              id="chart-box-title"
+              v-if="isShow === 2 ? true :false">
+              <template slot="append">{{ $t("backup.day") }}</template>
+            </el-input>
+                </el-form-item>
+         <el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
+            <el-checkbox-group
+              v-model="editPanel.param.report.schedule.nums">
+              <el-checkbox-button
+                v-for="(item,index) in week"
+                :label="index + 1"
+                :key="index"
+                >{{item}}</el-checkbox-button>
+            </el-checkbox-group>
+                    </el-form-item>
+           <el-form-item
+            v-show="isShow === 4 ? true : false"
+            :label="$t('backup.DayOfMonth')"
+            prop="nums"
+            class="check-month_box"
+            id="day-of-month"
+          >
+             <el-checkbox-group v-model="editPanel.param.report.schedule.nums">
+               <el-checkbox-button
+                v-for="(item, index) in month"
+                :label="index === 31 ? -1 : index + 1"
+                :key="item"
+                >{{ item }}</el-checkbox-button>
+             </el-checkbox-group>
+                </el-form-item>
+           <el-form-item v-if="isShow !== 0 ? true : false" :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="receivers">
+             <el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
+               <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
+               <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+               </el-option>
+            </el-select>
+                </el-form-item>
+          </div>
+              </transition>
+            </div>
+      </div>
+
         </el-form>
       </div>
     </div>
@@ -32,6 +174,7 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
+import bus from '@/libs/bus'
 export default {
   name: 'panelBox',
   props: {
@@ -44,14 +187,91 @@ export default {
     return {
       url: 'visual/panel',
       editPanel: {},
+      isShow: 0,
+      userData: [],
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
-      }
+      },
+      week: [
+        this.$t('week.Mon'),
+        this.$t('week.Tue'),
+        this.$t('week.Wed'),
+        this.$t('week.Thu'),
+        this.$t('week.Fri'),
+        this.$t('week.Sat'),
+        this.$t('week.Sun')
+      ],
+      month: [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        25,
+        26,
+        27,
+        28,
+        29,
+        30,
+        31,
+        'Last'
+      ],
+      dateFormatStr: localStorage.getItem('nz-default-dateFormat')
+        ? localStorage.getItem('nz-default-dateFormat')
+        : 'YYYY-MM-DD HH:ss:mm'
     }
   },
+  created () {
+    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 + ''
+      this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
+      this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
+    }
+  },
+  mounted () {
+    this.getUserData()
+  },
   methods: {
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+          resolve()
+        })
+      })
+    },
+    datasourceChange (tab) {
+      this.isShow = Number(tab.name)
+      if (this.editPanel.param.report.schedule.nums) {
+        this.editPanel.param.report.schedule.nums = []
+        this.editPanel.param.report.schedule.repeat = 0
+      }
+    },
     /* 关闭弹框 */
     esc (refresh) {
       this.prevent_opt.save = false
@@ -63,6 +283,33 @@ export default {
 
     /* 保存 */
     save () {
+      const params = {
+        id: this.editPanel.id ? this.editPanel.id : '',
+        name: this.editPanel.name,
+        type: 'dashboard',
+        pid: 0,
+        remark: this.editPanel.remark,
+        param: {
+          report: {
+            enable: this.editPanel.param.report.enable,
+            range: {
+              type: 'previous',
+              interval: 1,
+              unit: this.editPanel.param.report.range.unit
+            },
+            schedule: {
+              type: Number(this.editPanel.param.report.schedule.type),
+              repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
+              stime: this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime),
+              etime: this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime),
+              nums: this.editPanel.param.report.schedule.nums
+            },
+            receivers: this.editPanel.param.report.receivers
+          },
+          chartShare: this.editPanel.param.chartShare
+        }
+      }
+      const editParam = JSON.parse(JSON.stringify(params))
       if (this.prevent_opt.save) {
         return
       }
@@ -70,7 +317,7 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           if (this.editPanel.id) {
-            this.$put(this.url, this.editPanel).then(response => {
+            this.$put(this.url, editParam).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -80,7 +327,7 @@ export default {
               }
             })
           } else {
-            this.$post(this.url, this.editPanel).then(response => {
+            this.$post(this.url, editParam).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -127,6 +374,20 @@ export default {
         this.isEdit = true
         this.editPanel = JSON.parse(JSON.stringify(n))
       }
+    },
+    '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')
+      }
+    },
+    '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')
+      }
     }
   }
 }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index baa806ecd..5da085efe 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -189,7 +189,23 @@ export default {
       },
       panel: { // 新增panel
         id: '',
-        name: ''
+        name: '',
+        remark: '',
+        param: {
+          report: {
+            enable: false,
+            range: {
+              unit: ''
+            },
+            schedule: {
+              stime: '',
+              etime: '',
+              repeat: 0,
+              nums: [],
+              type: 0
+            }
+          }
+        }
       },
       chart: {},
       blankChart: {
@@ -386,7 +402,23 @@ export default {
       // this.$refs.panelBox.show(true)
       this.panel = {
         id: '',
-        name: ''
+        name: '',
+        remark: '',
+        param: {
+          report: {
+            enable: false,
+            range: {
+              unit: ''
+            },
+            schedule: {
+              stime: '',
+              etime: '',
+              nums: [],
+              type: 0 + ''
+            }
+          },
+          chartShare: 'none'
+        }
       }
       // this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
     },