From 4e8f58fe8726597f3c207c9cd1e2c17353395492 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 13 Oct 2023 11:01:30 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3213=20=20feat=20=EF=BC=9A=20logql=20?=
 =?UTF-8?q?=E8=A1=A8=E8=BE=BE=E5=BC=8F=E8=BE=93=E5=85=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=20step=20=E5=92=8C=20querytype=20=E7=BB=84=E4=BB=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/mixin/promqlInput.js    |   2 +-
 .../page/dashboard/explore/exploreItem.vue    | 252 +++++++---
 .../dashboard/explore/exploreItemMixin.js     | 467 ++++++++++++++++++
 .../page/dashboard/explore/promqlInput.vue    |   2 +-
 4 files changed, 644 insertions(+), 79 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/dashboard/explore/exploreItemMixin.js

diff --git a/nezha-fronted/src/components/common/mixin/promqlInput.js b/nezha-fronted/src/components/common/mixin/promqlInput.js
index 16c136758..ed2563470 100644
--- a/nezha-fronted/src/components/common/mixin/promqlInput.js
+++ b/nezha-fronted/src/components/common/mixin/promqlInput.js
@@ -73,7 +73,7 @@ export default {
   watch: {
   },
   created () {
-    this.queryMetrics()
+    // this.queryMetrics()
   },
   beforeDestroy () {
     this.$store.commit('setMetricsList', [])
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 42025c9a5..0fc7ea618 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="explore list-page" :class="'nz-explore-' + tabIndex" style="position:relative;">
-    <div class="main-list">
+    <div class="right-box__container main-list">
       <div class="main-container explore-split-box" ref="exploreScrollbar" @mouseenter="tableHover = true" @mouseleave="tableHover = false">
         <!-- 关闭按钮 -->
         <div v-if="closable" class="explore-close">
@@ -28,7 +28,7 @@
           <div class="top-tool-right">
             <button v-if="!closable" class="top-tool-btn top-tool-btn--text margin-r-10" style="cursor: pointer;" type="button" @click="split">
               {{$t('overall.split')}}</button>
-            <pick-time id="explore" ref="pickTime" v-model="filterTime" :class="{'margin-r-10': showMetrics}" :refresh-data-func="expressionChange" @unitChange="chartUnitChange">
+            <pick-time id="explore" ref="pickTime" v-model="filterTime" :class="{'margin-r-10': showMetrics}" :refresh-data-func="getExpression" @unitChange="chartUnitChange">
              <!-- <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template> -->
               <template slot="added-text">{{$t('overall.query')}}</template>
             </pick-time>
@@ -69,49 +69,154 @@
             </el-dropdown>
           </div>
         </div>
-        <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
-          <template v-if="showMetrics">
-            <promql-input
-              :from-father-data="true"
-              :metricOptionsParent="metricOptions"
-              v-for="index of promqlKeys.length"
-              :id="promqlKeys[index-1].id"
-              :pqid="promqlKeys[index-1].id"
-              :key="promqlKeys[index-1].id"
-              :ref="'promql-'+(index-1)"
-              :expression-list="expressions"
-              :state="promqlKeys[index-1].state"
-              :index="index-1"
-              :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy','enable', 'history']"
-              :styleType="1"
-              type="metrics"
-              @enableExpression="enableExpression"
-              @addExpression="addExpression"
-              @copyExpression="copyExpression"
-              @removeExpression="removeExpression"
-              @resetExpression="resetExpression"
-            ></promql-input>
-          </template>
-          <template v-else>
-            <promql-input
-              v-for="index of promqlKeys.length"
-              :id="promqlKeys[index-1].id"
-              :pqid="promqlKeys[index-1].id"
-              :key="promqlKeys[index-1].id"
-              :ref="'promql-'+(index-1)"
-              :expression-list="expressions"
-              :state="promqlKeys[index-1].state"
-              :index="index-1"
-              :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy','enable', 'history']"
-              :styleType="1"
-              type="log"
-              @enableExpression="enableExpression"
-              @addExpression="addExpression"
-              @copyExpression="copyExpression"
-              @removeExpression="removeExpression"
-              @resetExpression="resetExpression"
-            ></promql-input>
-          </template>
+        <div id="explore-promql-box" class="top-tools chart-config" style="padding-top: 0; flex-wrap: wrap">
+          <div class="metrics-input-box" style="width: 100%">
+            <draggable
+              v-model="promqlKeys"
+              @start="start"
+              @end="end"
+              :scroll-sensitivity="150"
+              :options="{
+              dragClass:'drag-chart-class',
+              fallbackClass:'fallback-class',
+              forceFallback:true,
+              ghostClass:'chart-ghost',
+              chosenClass:'choose-class',
+              scroll:true,
+              filter: '.drag-disabled',
+              animation: 150,
+              handle: '.drag-sort'
+          }">
+              <el-row
+                class="element-item form-row-item thresholds-from-item"
+                style="margin-bottom: 10px !important"
+                v-for="index of promqlKeys.length"
+                v-if="expressionsShow[index-1]"
+                :key="expressionsShow[index-1].id"
+              >
+                <div class="chart-title chart-title-config">
+            <span
+              class="chart-title-content el-form-item"
+              :class="{
+                'is-error' : expressionsShow[index-1].error,
+                'hide-input': expressionsShow[index-1].hideInput
+              }"
+            >
+              <i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1].show?'':'is-active'" @click.stop="showExpression(index)"></i>
+              <el-input
+                style="width: 90px"
+                @mousedown.stop
+                v-model="expressionName[index-1]"
+                size="small"
+                @input="(val)=>{expressionNameInput(val,index-1)}"
+                @change="expressionNameChange(index-1)"
+                @focus.stop="showInput(index-1,false)"
+                @blur="showInput(index-1,true)"
+              />
+              <div v-if="expressionsShow[index-1].error" class="el-form-item__error" style="top: 30px;left: 25px">{{expressionsShow[index-1].error}}</div>
+              <div class="text-ellipsis" style="flex-shrink: 0;width: calc(100% - 310px)" v-if="!expressionsShow[index-1].show" :title="expressions[index - 1]">
+                {{expressions[index - 1]}}
+              </div>
+            </span>
+                  <span>
+              <!-- 显示隐藏 -->
+              <span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
+                <i class="nz-icon nz-icon-mimakejian"></i>
+              </span>
+              <span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
+                <i class="nz-icon nz-icon-mimabukejian"></i>
+              </span>
+              <span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
+                <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+              </span>
+              <span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
+                <i class="nz-icon nz-icon-override"></i>
+              </span>
+              <span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
+                <i class="nz-icon nz-icon-minus"></i>
+              </span>
+              <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.dashboard.chartForm.sort')">
+                <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
+              </span>
+            </span>
+                </div>
+                <transition name="el-zoom-in-top">
+                  <el-row v-show="expressionsShow[index-1].show">
+                    <promql-input
+                      :from-father-data="true"
+                      :metricOptionsParent="metricOptions"
+                      :id="promqlKeys[index-1].id"
+                      :pqid="promqlKeys[index-1].id"
+                      :key="promqlKeys[index-1].id"
+                      :ref="'promql-'+(index-1)"
+                      :expression-list="expressions"
+                      :state="promqlKeys[index-1].state"
+                      :index="index-1"
+                      :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy','enable', 'history']"
+                      :styleType="1"
+                      :type="promqlType"
+                      @enableExpression="enableExpression"
+                      @addExpression="addExpression"
+                      @copyExpression="copyExpression"
+                      @removeExpression="removeExpression"
+                      @resetExpression="resetExpression"
+                    ></promql-input>
+                    <el-row style="margin-top: 18px;display: flex">
+                      <div style="min-width: 310px;flex-shrink: 0;width: 50%">
+                        <div class="legend-title-new">
+                          <span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&nbsp;</span>
+                          <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                            <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
+                            <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
+                            <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                          </el-popover>
+                        </div>
+                        <div>
+                          <el-input maxlength="512" size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
+                        </div>
+                      </div>
+                      <div style="margin-left: 10px;width: 25%; flex: 1" v-if="showMetrics">
+                        <div class="legend-title-new" style="width: 55px">
+                          <span class="legend-title__span">{{$t('overall.type')}}&nbsp;</span>
+                          <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                            <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
+                            <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
+                            <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                          </el-popover>
+                        </div>
+                        <div style="flex: 1">
+                          <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="expressionChange" style="width: 100%;">
+                            <el-option :label="'Range'" :value="1">Range</el-option>
+                            <el-option :label="'Instant'" :value="2">Instant</el-option>
+                          </el-select>
+                        </div>
+                      </div>
+                      <div style="margin-left: 10px;width: 25%;flex: 1">
+                        <div class="legend-title-new" style="margin-left: 10px;width: 55px">
+                          <span class="legend-title__span">{{$t('overall.step')}}&nbsp;</span>
+                        </div>
+                        <div style="flex: 1">
+                          <el-input-number
+                            style="width: 100%;"
+                            :disabled="expressionsShow[index-1].queryType == 2"
+                            @change="expressionChange"
+                            v-model="expressionsShow[index-1].step"
+                            size="small"
+                            :min="minStep"
+                            :precision="0"
+                            :controls="false"
+                            class="append_unit"
+                            :placeholder="$t('overall.auto')"
+                            :data-unit="$t('overall.seconds')">
+                          </el-input-number>
+                        </div>
+                      </div>
+                    </el-row>
+                  </el-row>
+                </transition>
+              </el-row>
+            </draggable>
+          </div>
         </div>
         <div style="position: relative;z-index: 1;height: auto; padding: 0 20px 10px;">
           <el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse" @change="logsCollapseChange">
@@ -3527,8 +3632,10 @@ import chartDataFormat from '../../../chart/chartDataFormat'
 import logTab from './logTab'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
+import exploreItemMixin from '@/components/page/dashboard/explore/exploreItemMixin'
 import copy from '@/components/common/copy'
 import './promqlparser/wasm_exec.js'
+import draggable from 'vuedraggable'
 
 export default {
   name: 'exploreItem',
@@ -3537,13 +3644,14 @@ export default {
     chartRightBox,
     chart,
     logTab,
-    copy
+    copy,
+    draggable
   },
   props: {
     tabIndex: Number,
     closable: Boolean
   },
-  mixins: [promqlInputMixin],
+  mixins: [promqlInputMixin, exploreItemMixin],
   data () {
     return {
       chartLoading: false,
@@ -3625,6 +3733,7 @@ export default {
     }
   },
   async created () {
+    this.init()
     this.getPanelData()
     this.resetExpression()
     // this.getExploreHistory()
@@ -3723,7 +3832,7 @@ export default {
     chartUnitChange (unit) {
       this.chartUnit = unit
       this.$nextTick(() => {
-        this.expressionChange()
+        this.getExpression()
       })
     },
     exportLog ({ limit, descending }) {
@@ -4178,7 +4287,7 @@ export default {
       const rowData = { element: temp, colorElement: colorTemp, expandElement: expandTemp }
       return rowData
     },
-    async expressionChange () {
+    async getExpression () {
       if (this.$refs.pickTime) {
         const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
@@ -4262,8 +4371,9 @@ export default {
             }
           }
         })
+        this.init()
         setTimeout(() => {
-          this.expressionChange()
+          this.getExpression()
         }, 200)
       }
     },
@@ -4384,36 +4494,11 @@ export default {
       }
       this.updatePath()
     },
-    addExpression (index) {
-      this.expressions.splice(index + 1, 0, '')
-      this.promqlKeys.splice(index + 1, 0, {
-        id: getUUID(),
-        state: 1
-      })
-      this.promqlCount++
-    },
-    copyExpression (index) {
-      this.expressions.push(this.expressions[index])
-      this.promqlKeys.push({
-        id: getUUID(),
-        state: 1
-      })
-      this.promqlCount++
-    },
-    removeExpression (index) {
-      if (this.promqlCount > 1) {
-        this.expressions.splice(index, 1)
-        this.promqlKeys.splice(index, 1)
-        this.promqlCount--
-      }
-    },
     resetExpression () {
       this.expressions = ['']
-      this.promqlKeys = [{
-        id: getUUID(),
-        state: 1
-      }]
+      this.promqlKeys = []
       this.promqlCount = 1
+      this.init()
     },
     changeChartVisible () {
       this.chartVisible = !this.chartVisible
@@ -4666,9 +4751,22 @@ export default {
       }, () => {
         this.$message.error('123')
       })
+    },
+    start () {
+
+    },
+    end () {
+
     }
   },
   computed: {
+    promqlType () {
+      const type = this.showMetrics ? 'metric' : 'log'
+      return type
+    },
+    minStep () {
+      return this.nzDefaultConfig.minStep
+    },
     language () {
       return this.$store.getters.getLanguage
     },
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItemMixin.js b/nezha-fronted/src/components/page/dashboard/explore/exploreItemMixin.js
new file mode 100644
index 000000000..e8d95ebbc
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemMixin.js
@@ -0,0 +1,467 @@
+import chartDataFormat from '@/components/chart/chartDataFormat'
+import { getUUID, resetZIndex } from '@/components/common/js/common'
+import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
+import { isStat } from '@/components/chart/chart/tools'
+import lodash from 'lodash'
+import iconList from '@/components/common/js/iconList'
+const rz = {
+  methods: {
+    rz (e) {
+      resetZIndex(e)
+    }
+  }
+}
+export default {
+  props: {
+    params: {},
+    variables: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    from: { type: String }
+  },
+  mixins: [rz],
+  data () {
+    return {
+      // language: localStorage.getItem('nz-language'),
+      chartConfig: {},
+      expressions: [],
+      expressionName: [],
+      expressionsShow: [],
+      spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      unitOptions: chartDataFormat.unitOptions(),
+      nullTypeList: [{
+        label: this.$t('chart.connected'),
+        value: 'connected'
+      }, {
+        label: this.$t('chart.null'),
+        value: 'null'
+      }, {
+        label: this.$t('chart.zero'),
+        value: 'zero'
+      }],
+      statisticsList: this.$CONSTANTS.statisticsList,
+      operatorList: [
+        {
+          label: 'equal',
+          value: 'equal'
+        }, {
+          label: 'not equal',
+          value: 'notEqual'
+        }, {
+          label: 'match',
+          value: 'match'
+        }, {
+          label: 'contains',
+          value: 'contains'
+        }
+      ],
+      legendPositionList: [
+        {
+          label: this.$t('overall.bottom'),
+          value: 'bottom'
+        }, {
+          label: this.$t('overall.left'),
+          value: 'left'
+        }, {
+          label: this.$t('overall.right'),
+          value: 'right'
+        }
+      ],
+      mappingTypeList: [
+        {
+          label: this.$t('overall.value'),
+          value: 'value'
+        }, {
+          label: this.$t('dashboard.dashboard.chartForm.valMapping.range'),
+          value: 'range'
+        }, {
+          label: this.$t('dashboard.dashboard.chartForm.valMapping.regx'),
+          value: 'regx'
+        }
+      ],
+      mappingIconList: iconList, // 获取icon列表
+      letter: [
+        'A', 'B', 'C', 'D', 'E', 'F', 'G',
+        'H', 'I', 'J', 'K', 'L', 'M', 'N',
+        'O', 'P', 'Q', 'R', 'S', 'T',
+        'U', 'V', 'W', 'X', 'Y', 'Z'
+      ],
+      metricsChartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'area',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label')
+        },
+        {
+          id: 'stat',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'hexagon',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.hexagonFigure.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'doughnut',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.doughnut.label')
+        },
+        {
+          id: 'rose',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.rose.label')
+        },
+        {
+          id: 'bubble',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.bubble.label')
+        },
+        {
+          id: 'funnel',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.funnel.label')
+        },
+        {
+          id: 'rank',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.rank.label')
+        },
+        {
+          id: 'sankey',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.sankey.label')
+        },
+        {
+          id: 'gauge',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.gauge.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.table.label')
+        }
+
+      ],
+      logChartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'area',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label')
+        },
+        {
+          id: 'stat',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'hexagon',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.hexagonFigure.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'doughnut',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.doughnut.label')
+        },
+        {
+          id: 'rose',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.rose.label')
+        },
+        {
+          id: 'bubble',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.bubble.label')
+        },
+        {
+          id: 'funnel',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.funnel.label')
+        },
+        {
+          id: 'rank',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.rank.label')
+        },
+        {
+          id: 'sankey',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.sankey.label')
+        },
+        {
+          id: 'gauge',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.gauge.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.treemap.label')
+        },
+        {
+          id: 'log',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.log.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.table.label')
+        }
+      ],
+      textList: [
+        {
+          label: this.$t('overall.exportAll'),
+          value: 'all'
+        }, {
+          label: this.$t('overall.value'),
+          value: 'value'
+        }, {
+          label: this.$t('dashboard.dashboard.chartForm.legend'),
+          value: 'legend'
+        }, {
+          label: this.$t('project.topology.none'),
+          value: 'none'
+        }
+      ],
+      timeType: [
+        {
+          value: 'local',
+          label: this.$t('dashboard.dashboard.chartForm.typeVal.local')
+        },
+        {
+          value: 'server',
+          label: this.$t('dashboard.dashboard.chartForm.typeVal.server')
+        }
+      ],
+      timeSeriesTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'area',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'point',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.point.label')
+        }
+      ],
+      sparklineTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'area',
+          name: this.$t('dashboard.dashboard.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'none',
+          name: this.$t('project.topology.none')
+        }
+      ],
+      comparisonTypeList: [
+        {
+          id: 'none',
+          name: this.$t('project.topology.none')
+        },
+        {
+          id: 'hour',
+          name: this.$t('dashboard.chartForm.comparison.hour')
+        },
+        {
+          id: 'day',
+          name: this.$t('dashboard.chartForm.comparison.day')
+        },
+        {
+          id: 'week',
+          name: this.$t('dashboard.chartForm.comparison.week')
+        },
+        {
+          id: 'month',
+          name: this.$t('dashboard.chartForm.comparison.month')
+        }
+      ]
+    }
+  },
+  methods: {
+    isStat,
+    init () {
+      // 重置相关属性
+      this.expressions = []
+      this.expressionsShow = []
+      this.expressionName = []
+      console.log(this.promqlKeys.length)
+      if (!this.promqlKeys.length) {
+        this.addExpression()
+      } else {
+        // 根据orderNum排序
+        this.promqlKeys = this.promqlKeys.sort((a, b) => a.orderNum - b.orderNum)
+        this.promqlKeys.forEach(item => {
+          this.addExpression(item)
+        })
+        this.expressionChange()
+      }
+    },
+    expressionChange: function (index) {
+      if (this.expressions.length) {
+        this.promqlKeys = []
+        this.expressions.forEach((expr, i) => {
+          if (this.expressionsShow[i]) {
+            this.promqlKeys.push({
+              id: this.expressionsShow[i].elementId,
+              expression: expr,
+              type: 'expert',
+              legend: this.expressionsShow[i].legend,
+              name: this.expressionName[i],
+              state: this.expressionsShow[i].state,
+              orderNum: i,
+              step: this.expressionsShow[i].step,
+              queryType: this.expressionsShow[i].queryType,
+            })
+          }
+        })
+      } else {
+        this.promqlKeys = []
+      }
+    },
+    switchExpression (index, flag) {
+      if (flag === 1) {
+        this.$set(this.expressionsShow[index], 'state', 0)
+      } else {
+        this.$set(this.expressionsShow[index], 'state', 1)
+      }
+      this.expressionChange()
+    },
+    expressionNameChange (index) {
+      if (this.expressionsShow[index].error) {
+        this.expressionName[index] = this.expressionsShow[index].oldName
+        this.expressionsShow[index].error = ''
+      } else if (!this.expressionName[index]) {
+        this.expressionName[index] = this.expressionsShow[index].oldName
+      } else {
+        this.expressionsShow[index].oldName = this.expressionName[index]
+      }
+      this.expressionChange()
+    },
+    expressionNameInput (val, index) {
+      const findIndex = this.expressionName.indexOf(val)
+      const lastIndex = this.expressionName.lastIndexOf(val)
+      if (findIndex !== -1 && lastIndex != -1 && lastIndex !== findIndex) {
+        this.expressionsShow[index].error = this.$t('error.nameDuplicate')
+      } else if (!val) {
+        this.expressionsShow[index].error = this.$t('validate.required')
+      } else {
+        this.expressionsShow[index].error = ''
+      }
+    },
+    showInput (index, flag) {
+      this.expressionsShow[index].hideInput = flag
+    },
+    transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
+      const self = this
+      let letter = ''
+      const loopNum = parseInt(num / 26)
+      if (loopNum > 0) {
+        letter += this.transformNumToLetter(loopNum - 1)
+      }
+      letter += self.letter[num % 26]
+      return letter
+    },
+    getExpressionName () {
+      let name = ''
+      for (let i = 0; i <= this.expressionName.length; i++) {
+        name = this.transformNumToLetter(i)
+        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+          break
+        }
+      }
+      return name
+    },
+    addExpression (item) {
+      if (!item) {
+        this.expressions.push('')
+        const expressionName = this.getExpressionName()
+        console.log(expressionName)
+        this.expressionName.push(expressionName)
+        this.expressionsShow.push({
+          id: getUUID(),
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          name: expressionName,
+          error: '',
+          legend: '',
+          elementId: '',
+          state: 1,
+          step: undefined,
+          queryType: 1
+        })
+        this.expressionChange()
+      } else {
+        this.expressions.push(item.expression)
+        this.expressionName.push(item.name)
+        this.expressionsShow.push({
+          id: getUUID(),
+          show: true,
+          hideInput: true,
+          oldName: item.name,
+          error: '',
+          elementId: item.id,
+          legend: item.legend,
+          state: item.state,
+          step: item.step,
+          queryType: item.queryType
+        })
+      }
+    },
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      const expressionName = this.getExpressionName()
+      this.expressionName.push(expressionName)
+      this.expressionsShow.push(
+        {
+          ...this.expressionsShow[index],
+          id: getUUID(),
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          error: '',
+          elementId: ''
+        }
+      )
+      this.expressionChange()
+    },
+    removeExpression (index) {
+      if (this.expressionsShow.length > 1) {
+        this.expressions.splice(index, 1)
+        this.expressionName.splice(index, 1)
+        this.expressionsShow.splice(index, 1)
+        this.expressionChange()
+      }
+    },
+    showExpression (index) {
+      this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
+      this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])
+    },
+  }
+}
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index d1392bdc2..15156f801 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -144,7 +144,7 @@
               <span>{{ appendMsg }}</span>
             </div>
           </el-col>
-          <i class="nz-icon nz-icon-alert-list" style="position: absolute;top: -5px; right: 15px" @click="queryPromptShowChange"/>
+          <i class="nz-icon nz-icon-alert-list" style="position: absolute;right: 15px;height: 24px; width: 24px;line-height: 24px;top: 3px;" @click="queryPromptShowChange"/>
           <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric" @selectLog="selectLog"/>
         </el-row>
       </template>