diff --git a/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss b/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
new file mode 100644
index 000000000..a7bec5001
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
@@ -0,0 +1,64 @@
+.panel-variables-box{
+  display: flex;
+  position: relative;
+  z-index: 1;
+  background: #fff;
+  padding-left: 10px;
+  padding-bottom: 5px;
+  .panel-variables-content{
+    display: flex;
+    margin-right: 15px;
+  }
+  .variable-key{
+    margin-right: 5px;
+    border: 1px solid $--border-color-base;
+    color: #33a2e5;
+    padding: 3px 5px;
+    border-radius: 4px;
+  }
+  .choose-box {
+    overflow: hidden;
+    width: calc(100% - 7px);
+    white-space: nowrap;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    height: 30px;
+    border: 1px solid $--border-color-light;
+    padding-left: 8px;
+    display: flex;
+    align-items: center;
+    .nz-icon-arrow-down6{
+      font-size: 12px;
+      color: $--color-text-secondary;
+    }
+  }
+  .choose-box-content{
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: calc(100% - 24px);
+    overflow: hidden;
+    min-width: 24px;
+  }
+}
+
+.panel-variables{
+  .el-dropdown-menu__item {
+    padding: 0 5px 0 20px;
+    position: relative;
+    height: 36px;
+  }
+  .el-dropdown-menu__item .el-dropdown-menu__item-label{
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: calc(100% - 20px);
+    overflow: hidden;
+    min-width: 24px;
+  }
+  .nz-icon-check{
+    position: absolute;
+    right: 5px;
+    color: $--color-warning;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 63f21c1d0..03a3e7e76 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -75,6 +75,7 @@
 @import './common/searchInput.scss';
 @import './common/timePicker.scss';
 @import './common/filterSearch/filterSearch.scss';
+@import './common/panel/panelVariables.scss';
 
 @import './layout/container.scss';
 @import './layout/header.scss';
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index a08b68178..965b98347 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -109,7 +109,8 @@ export default {
       showAllData: false, // 是否显示所有legend
       allDataLength: 0,
       severityData: this.$store.getters.severityData, // 告警级别的数据
-      severityDataWeight: this.$store.getters.severityDataWeight
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      myVariables: []
       // isExportData: false
     }
   },
@@ -119,6 +120,9 @@ export default {
     },
     headerHPadding () { // 50px header + padding 主要用于展开的空group
       return this.$store.getters.getHeaderHPadding
+    },
+    variablesArr () {
+      return this.$store.getters.getVariablesArr
     }
   },
   methods: {
@@ -144,6 +148,8 @@ export default {
     },
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
+      this.chartData = []
+      this.myVariables = []
       this.loading = true
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''
@@ -223,7 +229,8 @@ export default {
               // if (isChartPie(this.chartInfo.type)) {
               //   query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
               // }
-              query += `&query=${encodeURIComponent(element.expression)}`
+              this.myVariables.push(this.variablesReplace(element.expression))
+              query += `&query=${encodeURIComponent(this.variablesReplace(element.expression))}`
               return this.$get(query)
             })
             if (this.multipleTime) {
@@ -519,6 +526,16 @@ export default {
         this.loading = false
       }
     },
+    variablesReplace (expression) {
+      let str = expression
+      this.variablesArr.forEach(item => {
+        const reg = new RegExp('\\$' + item.name, 'g') // 后续需要考虑 item,name 使用特殊字符的问题
+        if (reg.test(expression)) {
+          str = str.replace(reg, item.checked.map(label => label.replace(/\"/g, '\\"').replace(/\'/g, "\\'")).join('|'))
+        }
+      })
+      return str
+    },
     getHexagonFigureData () {
       return new Promise(resolve => {
         this.$get('stat/alertMessage/topN', { size: 48, dimension: 'module' }).then(response => {
@@ -705,6 +722,23 @@ export default {
       handler (n) {
         // console.log(n)
       }
+    },
+    variablesArr: {
+      handler (n) {
+        const elements = this.chartInfo.elements || []
+        const variables = elements.map((element) => {
+          return this.variablesReplace(element.expression)
+        })
+        let flag = false
+        this.myVariables.forEach((item, index) => {
+          if (item !== variables[index]) {
+            flag = true
+          }
+        })
+        if (flag) {
+          this.chartInfo.loaded && this.getChartData(true)
+        }
+      }
     }
   },
   mounted () {
diff --git a/nezha-fronted/src/components/common/panel/panelVariables.vue b/nezha-fronted/src/components/common/panel/panelVariables.vue
new file mode 100644
index 000000000..902aa7458
--- /dev/null
+++ b/nezha-fronted/src/components/common/panel/panelVariables.vue
@@ -0,0 +1,380 @@
+<template>
+  <div style="" class="panel-variables-box">
+    <div v-for="(item,index) in labelArr" :key="index" v-if="item.show" class="panel-variables-content" style="display: flex">
+      <div class="variable-key">{{item.name}}</div>
+      <el-popover
+        width="220"
+        trigger="manual"
+        placement="bottom-start"
+        v-model="item.visible"
+        v-clickoutside="close"
+        popper-class="no-style-class ping-popover panel-variables"
+      >
+        <ul class="pop-list-wrap">
+          <li class="el-dropdown-menu__item" v-if="item.allOption">
+            <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="(value)=>{checkAllChange(item)}">{{$t('overall.all')}}</el-checkbox>
+          </li>
+          <ul class="pop-list">
+            <el-checkbox-group v-model="item.checked" @change="(value)=>{checkedChange(item,value)}" v-if="item.multi">
+              <li class="el-dropdown-menu__item" v-for="value in labelValue[item.name]" :key="value.value">
+                <el-checkbox :label="value.value" >{{value.label}}</el-checkbox>
+              </li>
+            </el-checkbox-group>
+            <div v-else>
+              <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
+                <div class="el-dropdown-menu__item-label">
+                  {{value.label}}
+                </div>
+                <i class="nz-icon nz-icon-check" v-if="value.value === item.checked[0] && !item.checkAll"/>
+              </li>
+            </div>
+          </ul>
+        </ul>
+        <div slot="reference" class="choose-box"  @click="triggerVisible(item)">
+          <div class="choose-box-content">
+            {{item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')}}
+          </div>
+          <i class="nz-icon nz-icon-arrow-down6"/>
+        </div>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'panelVariables',
+  props: {
+    labelArrs: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    timeRange: Array
+  },
+
+  data () {
+    return {
+      timer: null,
+      labelValue: {},
+      labelArr: [],
+      specialKey: [
+        { name: 'label_names', reg: /^label_names\(\)\s*$/ },
+        { name: 'label_values', reg: /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]*)\)\s*$/ },
+        { name: 'metrics', reg: /^metrics\((.+)\)\s*$/ },
+        { name: 'query_result', reg: /^query_result\((.+)\)\s*$/ }
+      ]
+    }
+  },
+  watch: {
+    labelArrs: {
+      immediate: true,
+      handler (n) {
+        this.labelArr = this.labelArrs.map(item => {
+          return {
+            ...item,
+            checked: [],
+            checkAll: false,
+            visible: false,
+            isIndeterminate: false
+          }
+        })
+        this.getLabelData()
+      }
+    }
+  },
+  methods: {
+    getLabelData () {
+      const isRegExp = (v) => {
+        let isReg
+        try {
+          isReg = eval(v) instanceof RegExp
+        } catch (e) {
+          isReg = false
+        }
+        return isReg
+      }
+      const arrPromise = []
+      this.labelValue = {}
+      this.labelArr.forEach((item, index) => {
+        this.labelValue[item.name] = []
+        if (item.type === 'custom') {
+          arrPromise.push('')
+          const arr = item.customOptions.split(',')
+          arr.forEach(key => {
+            key = key.trim()
+            const arr1 = key.split(':')
+            if (arr1.length > 1) {
+              this.labelValue[item.name].push({
+                label: arr1[0],
+                value: arr1.splice(1, arr1.length - 1).join(':')
+              })
+            } else if (arr1.length === 1) {
+              this.labelValue[item.name].push({
+                label: arr1[0],
+                value: arr1[0]
+              })
+            }
+          })
+        } else if (item.type === 'query') {
+          let match = item.expression.match(this.specialKey[0].reg)
+          if (match) {
+            arrPromise.push(this.labelNamesQuery())
+            return
+          }
+          match = item.expression.match(this.specialKey[1].reg)
+          if (match) {
+            if (match[1]) {
+              arrPromise.push(this.labelValuesQuery(match[2], match[1]))
+              return
+            } else {
+              arrPromise.push(this.labelValuesQuery(match[2]))
+              return
+            }
+          }
+          match = item.expression.match(this.specialKey[2].reg)
+          console.log(match)
+          if (match) {
+            arrPromise.push(this.metricNameQuery(match[1]))
+            return
+          }
+          match = item.expression.match(this.specialKey[3].reg)
+          if (match) {
+            arrPromise.push(this.queryResultQuery(match[1]))
+            return
+          }
+          arrPromise.push(this.metricNameAndLabelsQuery(item.expression))
+        }
+      })
+      Promise.all(arrPromise).then((res) => {
+        console.log(res)
+        res.forEach((response, index) => {
+          if (response) {
+            if (this.labelArr[index].regex) {
+              const reg = isRegExp(this.labelArr[index].regex) ? eval(this.labelArr[index].regex) : new RegExp(this.labelArr[index].regex, 'g')
+              let arr = []
+              response.forEach(label => {
+                // console.log(reg.test(label.label))
+                if (reg.test(label.label)) {
+                  const str = label.label.match(reg)
+                  if (str.groups) {
+                    arr.push({
+                      label: str.groups.text,
+                      value: str.groups.value || str.groups.text
+                    })
+                  } else {
+                    arr.push({
+                      label: label.label,
+                      value: label.label
+                    })
+                  }
+                }
+              })
+              arr = this.$loadsh.uniqBy(arr, 'value')
+              // arr = this.$loadsh.uniqBy(arr, 'label')
+              arr.filter(item => item.value)
+              response = arr
+            }
+            this.labelValue[this.labelArr[index].name] = response
+          }
+        })
+        this.setLabelArrDefault()
+      })
+    },
+    labelNamesQuery () {
+      const params = {
+        start: this.momentStrToTimestamp(this.timeRange[0]) / 1000,
+        end: this.momentStrToTimestamp(this.timeRange[1]) / 1000
+      }
+
+      const url = '/prom/api/v1/labels'
+      return new Promise(resolve => {
+        this.$get(url, params).then(res => {
+          let arr = res.data.map(item => {
+            return {
+              value: item,
+              label: item
+            }
+          })
+          arr = this.$loadsh.uniqBy(arr, 'value')
+          arr.filter(item => item.value)
+          resolve(arr)
+        })
+      })
+    },
+    labelValuesQuery (label, metric) {
+      const start = this.momentStrToTimestamp(this.timeRange[0])
+      const end = this.momentStrToTimestamp(this.timeRange[1])
+      let url = ''
+      if (!metric) {
+        const params = {
+          start: start / 1000,
+          end: end / 1000
+        }
+        // return label values globally
+        url = `/prom/api/v1/label/${label}/values`
+        return new Promise(resolve => {
+          this.$get(url, params).then(res => {
+            let arr = res.data.map(item => {
+              return {
+                value: item,
+                label: item
+              }
+            })
+            arr = this.$loadsh.uniqBy(arr, 'value')
+            arr.filter(item => item.value)
+            resolve(arr)
+          })
+        })
+      } else {
+        const params = {
+          'match[]': metric,
+          start: start / 1000,
+          end: end / 1000
+        }
+        url = '/prom/api/v1/series'
+        return new Promise(resolve => {
+          this.$get(url, params).then(res => {
+            let arr = res.data.map(item => {
+              return {
+                value: item[label],
+                label: item[label]
+              }
+            })
+            arr = this.$loadsh.uniqBy(arr, 'value')
+            arr.filter(item => item.value)
+            resolve(arr)
+          })
+        })
+      }
+    },
+    metricNameQuery (metricFilterPattern) {
+      const start = this.momentStrToTimestamp(this.timeRange[0])
+      const end = this.momentStrToTimestamp(this.timeRange[1])
+      const params = {
+        start: start / 1000,
+        end: end / 1000
+      }
+      const url = '/prom/api/v1/label/__name__/values'
+      return new Promise(resolve => {
+        this.$get(url, params).then(res => {
+          let arr = res.data
+          arr.filter((metricName) => {
+            const r = new RegExp(metricFilterPattern)
+            return r.test(metricName)
+          })
+          arr = arr.map((matchedMetricName) => {
+            return {
+              value: matchedMetricName,
+              label: matchedMetricName,
+              expandable: true
+            }
+          })
+          resolve(arr)
+        })
+      })
+    },
+    queryResultQuery (query) {
+      const end = this.momentStrToTimestamp(this.timeRange[1]) / 1000
+      const url = '/prom/api/v1/query'
+      return new Promise(resolve => {
+        const params = {
+          end,
+          query: encodeURIComponent(query)
+        }
+        this.$get(url, params).then(res => {
+          console.log(res)
+          const arr = res.data.result.map((metricData) => {
+            let text = metricData.metric.__name__ || ''
+            delete metricData.metric.__name__
+            text += '{'
+            const arr = []
+            Object.keys(metricData.metric).forEach(key => {
+              arr.push(key + '="' + metricData.metric[key] + '"')
+            })
+            text += arr.join(',')
+            text += '}'
+            text += ' ' + metricData.value[1] + ' ' + metricData.value[0] * 1000
+            return {
+              label: text,
+              value: text,
+              expandable: true
+            }
+          })
+          resolve(arr)
+        })
+      })
+    },
+    metricNameAndLabelsQuery (query) {
+      const start = this.momentStrToTimestamp(this.timeRange[0])
+      const end = this.momentStrToTimestamp(this.timeRange[1])
+      const params = {
+        'match[]': query,
+        start: start / 1000,
+        end: end / 1000
+      }
+      const url = '/prom/api/v1/series'
+      return new Promise(resolve => {
+        this.$get(url, params).then(res => {
+          const arr = res.data.map(metric => {
+            return {
+              label: this.getOriginalMetricName(metric),
+              value: this.getOriginalMetricName(metric),
+              expandable: true
+            }
+          })
+          resolve(arr)
+        })
+      })
+    },
+    getOriginalMetricName (labelData) {
+      const metricName = labelData.__name__ || ''
+      delete labelData.__name__
+      const labelPart = Object.entries(labelData)
+        .map((label) => `${label[0]}="${label[1]}"`)
+        .join(',')
+      return `${metricName}{${labelPart}}`
+    },
+    setLabelArrDefault () {
+      this.labelArr.forEach((item, index) => {
+        item.checked = this.labelValue[item.name][0] ? [this.labelValue[item.name][0].value] : []
+      })
+      this.$store.dispatch('dispatchVariablesArr', this.labelArr)
+    },
+    checkAllChange (item) {
+      console.log(item)
+      const allValue = this.labelValue[item.name].map(value => {
+        return value.value
+      })
+      item.checked = item.checkAll ? allValue : []
+      item.isIndeterminate = false
+      this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
+    },
+    checkedChange (item, value) {
+      const checkedCount = value.length
+      item.checkAll = checkedCount === this.labelValue[item.name].length
+      item.isIndeterminate = checkedCount > 0 && checkedCount < this.labelValue[item.name].length
+      this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
+    },
+    selectLabelValue (item, value) {
+      item.checked = [value.value]
+      this.$store.dispatch('dispatchVariablesArr', [...this.labelArr])
+    },
+    triggerVisible (item) {
+      this.$nextTick(() => {
+        item.visible = !item.visible
+      })
+    },
+    close () {
+      this.labelArr.forEach((item) => {
+        item.visible = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index e6a5e043c..2f7c14ccb 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -100,6 +100,7 @@
                   <!-- Query expression -->
                   <el-form-item v-if="item.type==='query'" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
                     <div slot="label">
+                      <span>{{$t('dashboard.panel.queryExpression')}}</span>
                       <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
                         <table class="query-variable-table" width="640" cellspacing="5">
                           <thead>
@@ -114,7 +115,6 @@
                           </tbody>
                         </table>
                         <span slot="reference">
-                          {{$t('dashboard.panel.queryExpression')}}
                           <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
                         </span>
                       </el-popover>
@@ -132,10 +132,10 @@
                   <!-- Multi-value -->
                   <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
                     <div slot="label">
+                      <span>{{$t('dashboard.panel.multi')}}</span>
                       <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
                         <span>{{$t('dashboard.panel.multiTip')}}</span>
                         <span slot="reference">
-                          {{$t('dashboard.panel.multi')}}
                           <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
                         </span>
                       </el-popover>
@@ -151,10 +151,10 @@
                   <!-- All option -->
                   <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
                     <div slot="label">
+                      <span>{{$t('dashboard.panel.allOption')}}</span>
                       <el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
                         <span>{{$t('dashboard.panel.allOptionTip')}}</span>
                         <span slot="reference">
-                          {{$t('dashboard.panel.allOption')}}
                           <i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
                         </span>
                       </el-popover>
@@ -185,7 +185,7 @@
               <transition name="el-zoom-in-top" >
                 <div class="form-items--half-width-group">
                   <el-form-item
-                    :label="$t('backup.start')"
+                    :label="$t('overall.startTime')"
                     class="form-item--half-width"
                     prop="param.report.schedule.stime"
                   >
@@ -200,7 +200,7 @@
                       </my-date-picker>
                     </el-form-item>
                   <el-form-item
-                  :label="$t('dashboard.panel.endAt')"
+                  :label="$t('overall.endTime')"
                   class="form-item--half-width"
                   prop="param.report.schedule.etime"
                   >
@@ -218,7 +218,7 @@
                     <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-button label="month">{{ $t("config.menus.parent") }}</el-radio-button>
                     </el-radio-group>
                   </el-form-item>
                   <el-form-item
@@ -581,22 +581,22 @@ export default {
       })
     },
     changeData (flag) {
-	      if (flag) {
-	        if (this.editPanel.param.report.schedule.etime) {
-	          if (this.editPanel.param.report.schedule.stime > this.editPanel.param.report.schedule.etime) {
-	            this.editPanel.param.report.schedule.stime = ''
+      if (flag) {
+        if (this.editPanel.param.report.schedule.etime) {
+          if (this.editPanel.param.report.schedule.stime > this.editPanel.param.report.schedule.etime) {
+            this.editPanel.param.report.schedule.stime = ''
             this.$message.error(this.$t('alert.silence.timeError'))
-	          }
-	        }
-	      } else {
-	        if (this.editPanel.param.report.schedule.stime) {
-	          if (this.editPanel.param.report.schedule.stime > this.editPanel.param.report.schedule.etime) {
+          }
+        }
+      } else {
+        if (this.editPanel.param.report.schedule.stime) {
+          if (this.editPanel.param.report.schedule.stime > this.editPanel.param.report.schedule.etime) {
             this.editPanel.param.report.schedule.etime = ''
-	            this.$message.error(this.$t('alert.silence.timeError'))
-	          }
-	        }
-	      }
-	    }
+            this.$message.error(this.$t('alert.silence.timeError'))
+          }
+        }
+      }
+    }
   },
   watch: {
     obj: {
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 22d0ac458..bf517adf9 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -252,7 +252,6 @@ export default {
       return this.regNum.test(val)
     },
     addCabinet (params) {
-      console.log('addCabinet')
       if (params) {
         this.cabinet.idcId = params.dcid
       }
@@ -270,7 +269,6 @@ export default {
       })
     },
     closeRightBox (refresh) {
-      console.log('closeRightBox')
       this.rightBox.show = false
       this.cabinetBoxShow = false
       this.$store.dispatch('addCabinet', { dcid: '', cabinetBoxShow: false })
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 8be7c3722..0e36736cc 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -92,7 +92,7 @@
         <div id="tableList" class="table-list" style='overflow-y: unset'>
           <div class="table-list-box">
             <div  id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
-<!--              <panel-variables :arr="this.showPanel.variables"></panel-variables>-->
+              <panel-variables :labelArrs="variables" :time-range="searchTime"></panel-variables>
               <chart-list
                 ref="chartList"
                 name="panel"
@@ -159,6 +159,7 @@ import routerPathParams from '@/components/common/mixin/routerPathParams'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
 import * as echarts from 'echarts'
+import panelVariables from '@/components/common/panel/panelVariables'
 // import FileSaver from 'file-saver'
 // import chartData from './testData'
 export default {
@@ -296,7 +297,8 @@ export default {
       // 导出html 以及 pdf的弹窗
       exportBoxShow: false,
       // 查看模式
-      mode: ''
+      mode: '',
+      variables: []
     }
   },
   components: {
@@ -305,7 +307,8 @@ export default {
     topToolMoreOptions,
     selectDashboard,
     chartTempBox,
-    chartRightBox
+    chartRightBox,
+    panelVariables
   },
   computed: {
     chartRightBoxShow () {
@@ -343,6 +346,17 @@ export default {
       this.filter.searchName = ''
       // this.$refs.searchInput.select();
       this.showPanel = val
+      this.showPanel.param = {
+        report:
+          { enable: true, range: { type: 'previous', interval: 1, unit: 'day' }, schedule: { type: 2, repeat: 1, nums: [], stime: '2022-06-07 15:00:00', etime: '2022-06-19 15:00:00' }, receivers: [1] },
+        chartShare: 'none',
+        variables: [
+          { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' },
+          { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' },
+          { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' },
+          { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' }
+        ]
+      }
       this.showPanel.type = 'dashboard'
       this.filter.panelId = this.showPanel.id
       this.panelId = this.showPanel.id
@@ -395,7 +409,7 @@ export default {
       this.$get('visual/panel?ids=' + u.id).then(res => {
         if (res.code === 200) {
           this.panel = res.data.list[0]
-          if (!this.panel.param.report) {
+          if (!this.$loadsh.get(this.panel, 'param.report', '')) {
             this.panel = {
               ...this.panel,
               param: {
@@ -783,8 +797,64 @@ export default {
           report:
           { enable: true, range: { type: 'previous', interval: 1, unit: 'day' }, schedule: { type: 2, repeat: 1, nums: [], stime: '2022-06-07 15:00:00', etime: '2022-06-19 15:00:00' }, receivers: [1] },
           chartShare: 'none',
-          variables: [{ show: true, type: 'custom', multi: true, allOption: true, name: 'a', customOptions: 'z:1', expression: '', regex: '' }]
+          variables: [
+            { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+            { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+            { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+            { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' }
+          ]
         }
+        this.variables = [
+          { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+          { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+          { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+          { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+          {
+            name: 'bbb',
+            type: 'query',
+            multi: false,
+            allOption: true,
+            expression: 'label_names()',
+            regex: '/a\.*/',
+            show: true
+          },
+          {
+            name: 'ccc',
+            type: 'query',
+            multi: false,
+            allOption: true,
+            expression: 'label_values(up, asset)',
+            regex: '',
+            show: true
+          },
+          {
+            name: 'ddd',
+            type: 'query',
+            multi: true,
+            allOption: true,
+            expression: 'label_values(asset)',
+            regex: '',
+            show: true
+          },
+          {
+            name: 'eeee',
+            type: 'query',
+            multi: false,
+            allOption: true,
+            expression: 'label_values(up, endpoint)',
+            regex: '/.*-(?<text>.*)-(?<value>.*)-.*/',
+            show: true
+          },
+          {
+            name: 'fff',
+            type: 'query',
+            multi: false,
+            allOption: true,
+            expression: 'query_result(node_filefd_allocated{module="OLAP-Node-Exporter"})',
+            regex: '/asset="(?<text>[^"]+)\.*\asset_id="(?<value>[^"]+)/',
+            show: true
+          }
+        ]
       }).catch((error) => {
         // console.log('error................'+JSON.stringify(error));
         if (error) {
diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js
index b3c167f31..c0a7bd732 100644
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -24,7 +24,8 @@ const panel = {
     // timeSeries类型图表联动
     isConnect: 'none',
     // 当前鼠标所在的图表id
-    currentMousemove: 0
+    currentMousemove: 0,
+    variablesArr: []
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -89,6 +90,9 @@ const panel = {
     // 设置当前鼠标所在的图表id (timeSeries类型图表联动)
     setCurrentMousemove (state, value) {
       state.currentMousemove = value
+    },
+    setVariablesArr (state, value) {
+      state.variablesArr = value
     }
   },
   getters: {
@@ -139,6 +143,9 @@ const panel = {
     },
     getAddCabinetBoxParams (state) {
       return state.addCabinetBoxParams
+    },
+    getVariablesArr (state) {
+      return state.variablesArr
     }
   },
   actions: {
@@ -177,6 +184,9 @@ const panel = {
     showTopology (store, chartInfo) {
       store.commit('setTopologyChartInfo', chartInfo)
       store.commit('setTopologyShow', true)
+    },
+    dispatchVariablesArr (store, variablesArr) {
+      store.commit('setVariablesArr', variablesArr)
     }
   }
 }