From b1a426fb36a3764c082b69510c0af1cfc9b93655 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Fri, 21 Feb 2020 17:32:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9BUG=20dashboard=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=201.=E9=A2=84=E8=A7=88=E6=A8=A1=E5=9D=97loading?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=EF=BC=8C=E5=8F=8A=E9=A2=84=E8=A7=88=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E6=8C=89=E6=97=B6=E9=97=B4=E6=9F=A5=E8=AF=A2=E4=B8=8D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=95=B0=E6=8D=AE=202.=E4=BF=AE=E6=94=B9metr?=
 =?UTF-8?q?ic=E5=8F=8Alabel=E6=8E=A5=E5=8F=A3=EF=BC=8C=E5=B9=B6=E6=8A=8Ala?=
 =?UTF-8?q?bel=E4=BF=AE=E6=94=B9=E4=B8=BAowl=E7=9A=84=E6=A0=B7=E5=BC=8F=20?=
 =?UTF-8?q?3.=E8=B0=83=E6=95=B4=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=A0=B7=E5=BC=8F=EF=BC=88=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E3=80=81=E9=AB=98=E7=AD=89=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-table.vue     |  27 +-
 .../components/charts/line-chart-block.vue    |  21 +-
 .../components/page/dashboard/chartBox.vue    | 261 ++++++++---------
 .../components/page/dashboard/chartMetric.vue | 262 ++++++++++--------
 .../page/dashboard/chartMetricForPreview.vue  | 111 +++++---
 .../page/dashboard/metricPreview.vue          |   4 +
 .../components/page/dashboard/metricSet.scss  |   1 +
 .../components/page/dashboard/metricSet.vue   |  13 +-
 8 files changed, 390 insertions(+), 310 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index cab62355a..3ce6d65a9 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -3,12 +3,15 @@
 </style>
 <template>
     <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
+        <loading  :ref="'localLoading'+chartIndex"></loading>
+      <!--
         <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
           <div class="el-loading-spinner">
             <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
             <p class="el-loading-text loading-font">loading</p>
           </div>
         </div>
+        -->
         <div class="clearfix">
             <div class="table-title" v-show="firstShow">
                 {{data.title}}
@@ -46,12 +49,15 @@
                     <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
 
                 </el-table>
+                <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+            <!--
                 <div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
                   <div class="el-loading-spinner">
                     <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
                     <p class="el-loading-text loading-font">loading</p>
                   </div>
                 </div>
+                -->
         </el-dialog>
     </div>
 </template>
@@ -59,10 +65,13 @@
 <script>
 import bus from '../../libs/bus';
 import {Loading} from 'element-ui';
+import loading from "../common/loading";
 
 export default {
     name: 'chartTable',
-    components: {},
+  components: {
+    'loading': loading,
+  },
     props: {
         // 看板id
         panelId: {
@@ -93,8 +102,8 @@ export default {
             },
             panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
             firstLoad: false, // 是否第一次加载
-            showLoading:true,
-            showLoadingScreen:false,
+            //showLoading:true,
+            //showLoadingScreen:false,
             //showTable:true,
             chartType: 'table', // 图表类型
             screenModal: false,
@@ -218,9 +227,11 @@ export default {
     methods: {
         startLoading(area){
           if(area==='screen'){
-            this.showLoadingScreen = true;
+            //this.showLoadingScreen = true;
+            this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
           }else {
-            this.showLoading = true;
+            //this.showLoading = true;
+            this.$refs['localLoading'+this.chartIndex].startLoading();
           }
 /*
           //this.loading = this.$loading({
@@ -236,9 +247,11 @@ export default {
         },
         endLoading(area){
           if(area==='screen'){
-            this.showLoadingScreen = false;
+            //this.showLoadingScreen = false;
+            this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
           }else {
-            this.showLoading = false;
+            //this.showLoading = false;
+            this.$refs['localLoading'+this.chartIndex].endLoading();
           }
         },
         clearData(){
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 2af598619..7beac3e68 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -243,6 +243,9 @@
     },
     watch: {},
     methods: {
+      setDivFirstShow(showDiv){
+        this.divFirstShow = showDiv;
+      },
       clickLegend(legendName,index){
         if (this.echartStore) {
           this.echartStore.dispatchAction({
@@ -654,7 +657,7 @@
           this.echartStore.setOption(option);//创建图表
           //this.echartStore.hideLoading();
           this.$refs['localLoading'+this.chartIndex].endLoading();
-          if(legend && legend.length>0){
+          if(legend){
             this.legendList = [];
             legend.forEach((item, i) => {
               const legend = {
@@ -721,14 +724,16 @@
           });
           */
           // eslint-disable-next-line
-          this.echartModalStore.clear();
+          if(this.echartModalStore){
+            this.echartModalStore.clear();
+          }
           option.title = {};
           this.echartModalStore.setOption(option);//显示全屏界面
           //this.echartModalStore.hideLoading();
           this.showLegend = true;
           this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
           //this.echartModalStore.resize({height:chartInfo.height});
-          if(legend && legend.length>0){
+          if(legend){
             this.screenLegendList = [];
             legend.forEach((item, i) => {
               const legend = {
@@ -950,6 +955,9 @@
                 visible: true,
                 threshold: null,
               };
+              if(!this.data.type){
+                this.data.type='line';
+              }
               res.forEach((response) => {
                 if (response.status === 'success') {
                   if (response.data.result) {
@@ -1029,10 +1037,7 @@
             }
           }).catch((error) => {
             if (error) {
-              this.$message.warning({
-                content: this.$t("tip.refreshLater"),//'Please refesh later',//请稍后刷新
-                duration: 3,
-              });
+              this.$message.error(error.toString());
             }
           });
         });
@@ -1050,6 +1055,8 @@
          // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
           //tableBox.style.height = `${height-75}px`;
         });
+        this.clearData();
+        this.firstShow = false;
         this.$refs['localLoading'+this.chartIndex].startLoading();
         this.divFirstShow = true;
 
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index ff171c33e..c18228de4 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -44,7 +44,8 @@
   }
   /*metric样式--end*/
   .label-center{
-    margin-top:6px;
+    vertical-align: middle;
+    line-height: 34px;
   }
 
   .z-top {
@@ -52,140 +53,141 @@
   }
 </style>
 <template key="chartBox">
-<div>
-  <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
+  <div>
+    <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
 
-  <transition name="right-box">
-    <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
+    <transition name="right-box">
+      <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns">
+          <button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+            <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+            <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+          </button>
+        </div>
+        <!-- end--顶部按钮-->
 
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
+        <!-- begin--标题-->
+        <div class="right-box-title">{{rightBox.title}}</div>
+        <!-- end--标题-->
 
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
-          <el-form-item :label="$t('dashboard.panel.title')">
-            <div class="right-box-form-content">
-              <el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown"
-                         v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
-                <el-option v-for="item in panelData" :key="item.id" :label="item.name"
-                           :value="item.id" :id="'chart-box-panel-'+item.id">
-                  <span class="config-dropdown-label-txt">{{item.name}}</span>
-                  <div class="config-dropdown-label-icons">
+        <!-- begin--表单-->
+        <el-scrollbar class="right-box-form-box">
+          <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
+            <el-form-item :label="$t('dashboard.panel.title')">
+              <div class="right-box-form-content">
+                <el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown"
+                           v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
+                  <el-option v-for="item in panelData" :key="item.id" :label="item.name"
+                             :value="item.id" :id="'chart-box-panel-'+item.id">
+                    <span class="config-dropdown-label-txt">{{item.name}}</span>
+                    <div class="config-dropdown-label-icons">
                     <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
                           :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
-                    <span class="config-dropdown-btn" @click.stop="editPanel(item)"
-                    :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
-                  </div>
-                </el-option>
-              </el-select>
+                      <span class="config-dropdown-btn" @click.stop="editPanel(item)"
+                            :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
+                    </div>
+                  </el-option>
+                </el-select>
 
-              <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
-                <i class="el-icon-plus" id="chart-box-panel-plus"></i>
+                <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
+                  <i class="el-icon-plus" id="chart-box-panel-plus"></i>
+                </div>
               </div>
-            </div>
-          </el-form-item>
-          <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
-            <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
-          </el-form-item>
+            </el-form-item>
+            <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
+              <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
+            </el-form-item>
 
-          <el-row :gutter="10">
-            <el-col :span="3" >
-              <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="grid-content ">
+            <el-row :gutter="10">
+              <el-col :span="2" >
+                <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
+              </el-col>
+              <el-col :span="6" style="margin-left:-7px;">
+                <div class="grid-content ">
                   <el-form-item prop="type">
-                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown" v-model="chart.type" placeholder="" size="mini">
+                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
                       <el-option v-for="item in chartTypeList" :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>
-            </el-col>
-            <el-col :span="3">
-              <div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="grid-content ">
-                <el-form-item prop="span">
-                  <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
-                    <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-                      <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-              </div>
-            </el-col>
-            <el-col :span="3">
-              <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
-            </el-col><el-col :span="5">
-              <div class="grid-content ">
-                <el-form-item prop="heigh">
-<!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
-                  <el-autocomplete
-                    v-model="chart.height"
-                    :fetch-suggestions="querySearch"
-                    placeholder=""
-                    size="mini"
-                    popper-class="popper-z-index"
-                    @select="handleSelect">
-                    <template slot-scope="{ item }">
-                      <div class="name">{{ item }}</div>
-                    </template>
-                  </el-autocomplete>
-                  <span class="nz-input-append">px</span>
-                </el-form-item>
-              </div>
-            </el-col>
-          </el-row>
+                </div>
+              </el-col>
+              <el-col :span="2" style="margin-left: 7px;">
+                <div class="label-center"  >{{$t('dashboard.panel.chartForm.width')}}</div>
+              </el-col>
+              <el-col :span="6" style="margin-left:0px;">
+                <div class="grid-content ">
+                  <el-form-item prop="span">
+                    <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
+                      <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+                        <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </el-col>
+              <el-col :span="2" style="padding-left: 10px;">
+                <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
+              </el-col>
+              <el-col :span="6" style="margin-left: 0px;">
+                <div class="grid-content" >
+                  <el-form-item prop="heigh">
+                    <!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
+                    <el-autocomplete
+                      v-model="chart.height"
+                      :fetch-suggestions="querySearch"
+                      placeholder=""
+                      size="mini"
+                      popper-class="popper-z-index"
+                      @select="handleSelect">
+                      <template slot-scope="{ item }">
+                        <div class="name">{{ item }}</div>
+                      </template>
+                    </el-autocomplete>
+                    <span class="nz-input-append">px</span>
+                  </el-form-item>
+                </div>
+              </el-col>
+            </el-row>
 
-          <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
-          <div class="line-100"></div>
+            <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
+            <div class="line-100"></div>
 
-          <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
-            <chart-metric ref="chartTag"
-                           :pointer="index"
-                           :metric-list="metricList"
-                          :metricCascaderList="metricCascaderList"
-                           :count-total="elements.length"
-                           @on-delete-target="deleteTarget"
-                           @sub-save-ok="subOk"
-                           @on-add-target-success="getTarget"
-                ></chart-metric>
+            <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
+              <chart-metric ref="chartTag"
+                            :pointer="index"
+                            :metric-list="metricList"
+                            :metricCascaderList="metricCascaderList"
+                            :count-total="elements.length"
+                            @on-delete-target="deleteTarget"
+                            @sub-save-ok="subOk"
+                            @on-add-target-success="getTarget"
+              ></chart-metric>
 
-          </el-row>
+            </el-row>
 
-          <button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
-            <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
+            <button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
+              <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
+            </button>
+
+          </el-form>
+        </el-scrollbar>
+
+        <!--底部按钮-->
+        <div class="right-box-bottom-btns">
+          <button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+            <span>{{$t('overall.cancel')}}</span>
           </button>
-
-        </el-form>
-      </el-scrollbar>
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
+          <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+            <span>{{$t('overall.save')}}</span>
+          </button>
+        </div>
       </div>
-    </div>
-  </transition>
+    </transition>
 
-</div>
+  </div>
 </template>
 
 <script>
@@ -221,11 +223,11 @@
           title: [
             {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
           ]
-         /*
-          heigh: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ]
-          */
+          /*
+           heigh: [
+             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+           ]
+           */
         },
         chartTypeList: [
           {
@@ -378,7 +380,7 @@
       deleteTarget(index) {
         //alert('box第一步，循环所有的metric，为什么要循环？？');
         this.deleteIndex = index;
-       // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
+        // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
         this.$refs.chartTag.forEach((item) => {
           // 子组件保存内容到bus
           item.subSave();
@@ -447,7 +449,6 @@
             this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
             this.$refs.chartForm.resetFields();//清空表单
             let panel = this.panelData.find(p => p.id === this.panelId);
-            //console.info("panel", panel)
             this.$emit('on-create-success', 'create', response.data,params, panel);
           } else {
             this.$message.error(response.msg);
@@ -473,7 +474,7 @@
         if (this.elementTarget.length === this.elements.length) {
           this.$refs.chartForm.validate((valid) => {
             const params = {
-             // productId: this.productId,
+              // productId: this.productId,
               //panelId: this.panelId,
               title: this.chart.title,//this.chart
               span: this.chart.span,
@@ -525,14 +526,17 @@
 
       // 获取metric列表
       getSuggestMetric() {
-        this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
-          if (response.code === 200) {
-            this.metricList = response.data.list;
+        //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
+        this.$get('/prom/api/v1/label/__name__/values').then(response => {
+          //if (response.code === 200) {
+          if (response.status === 'success') {
+            this.metricList = response.data;
             const cascaderMap = new Map();
             this.metricList.forEach((item,index) => {
               let arr = [];
               let par = '';//父value
-              let metricTmp = item.metric;//子value
+              //let metricTmp = item.metric;//子value
+              let metricTmp = item;//子value
               if(metricTmp){
                 arr  = metricTmp.split('_');
                 par = arr[0];
@@ -552,7 +556,7 @@
             let metricCascaderArr = [];
             cascaderMap.forEach(function(value,index){
               const option = {
-                value: index,
+                value: index+"_par",
                 label: index,
                 children:value,
               };
@@ -567,7 +571,6 @@
       },
       // 创建打开
       createData(panelId, elementInfo) {
-        //console.info('bbb', elementInfo)
         if (panelId == -1) {
           this.panelId = this.panelData[0].id;
         } else {
@@ -584,7 +587,6 @@
               let dSet = this.$refs.chartTag;
               this.$nextTick(() => {
                 dSet.forEach((item, index) => {
-                  //console.info('bbb', elementInfo.elements[index])
                   item.setMdata(elementInfo.elements[index]);
                 });
               });
@@ -653,7 +655,6 @@
 
       /*metric部分相关方法--end*/
       querySearch(queryString, cb) {
-        console.log(queryString)
         var suggestions = this.heightSuggestions;
         // var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
         var results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[];
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index baaf24ac3..d93024200 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -48,10 +48,12 @@
     color: #666;
    }
   .li-list-part-label-val-list {
-    height: 176px;
-    border: 1px solid #dcdfe6;
+    height: 248px;
+   /* border: 1px solid #dcdfe6;*/
     border-radius: 4px;
     padding: 0px 0 10px 15px;
+    margin-bottom:0px !important;
+    width:100%;
   }
   .li-cursor{
     cursor: pointer;
@@ -66,7 +68,7 @@
   }
 
   .metric-title-position{
-    margin-bottom: 2px;
+    margin-bottom: 8px;
   }
   .metric-title-row-position{
     margin-top:-10px;
@@ -91,8 +93,9 @@
     width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px) !important;
+    width: calc(100% - 15px) ;
   }
+
   .nz-tab-chart-item-box{
     padding:0;
     display: inline-block;
@@ -146,7 +149,7 @@
 
 <!-- create chart组件显示框 -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-
+<!--
       <el-col :span="8">
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -161,20 +164,29 @@
       </el-col>
 
       <el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
-
-      <el-col :span="14">
-        <div class="li-list-part-label-val-list" >
+-->
+      <el-col :span="24">
+        <div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-              <el-select  v-model="item.value" ref="tagSelect" size="mini"
-                          placeholder=""
-                          collapse-tags
-                          popper-class="metric-dropdown"
-                          filterable
-                          multiple>
-                <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
-              </el-select>
-              <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+            <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+              <el-row :gutter="10" >
+                <el-col :span="4" >
+                  <div style="text-align:right;padding-right:5px;">{{item.name}}</div>
+                </el-col>
+                <el-col :span="20" >
+                  <el-select  v-model="item.value" ref="tagSelect" size="mini"
+                              placeholder=""
+                              collapse-tags
+                              popper-class="metric-dropdown"
+                              filterable
+                              multiple>
+                    <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
+                  </el-select>
+                </el-col>
+                <!--
+                <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+                -->
+              </el-row>
             </el-form-item>
           </el-scrollbar>
         </div>
@@ -281,7 +293,19 @@ export default {
         });
       }
     },
+    setLabelDivHeight(count){
+        if (count === 0) {
+          const chartBox = document.getElementById('scrollDiv' + this.pointer);
+          chartBox.style.height = `${10}px`;
+        } else if (count < 6) {//小于6个需要调整容器的高度
+          const chartBox = document.getElementById('scrollDiv' + this.pointer);
+          chartBox.style.height = `${(248 / 6) * count + 10}px`;
+        } else {
+          const chartBox = document.getElementById('scrollDiv' + this.pointer);
+          chartBox.style.height = `${248}px`;
+        }
 
+    },
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
@@ -289,6 +313,7 @@ export default {
         this.getSuggestTags(this.elementInfo.metric);
       } else {
         this.elementInfo.tagList = [];
+        this.setLabelDivHeight(0);
       }
     },
     // 选择主机
@@ -310,31 +335,25 @@ export default {
     */
     // 获取tags列表
     getSuggestTags(metric) {
-      this.$get('metric/labelName?metric='+metric).then(response => {
+      //this.$get('metric/labelName?metric='+metric).then(response => {
+      this.$get('/metric/series?match[]='+metric).then(response => {
         this.elementInfo.selectedTagList = [];
-        this.elementInfo.tagList = [];
+        //this.elementInfo.tagList = [];
         if (response.code === 200) {
-          if(response.data.list){
-            //this.elementInfo.tagList = response.data.list;
-            response.data.list.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false//当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }else{
-            response.data.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false //当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }
-          //this.elementInfo.tagList = response.data.list;
+          const objList = Object.entries(response.data);
+          objList.forEach((item) => {
+            const tagObj = {
+              name: item[0],
+              list:item[1],
+              value:[]//最终选择的值
+            };
+            this.elementInfo.selectedTagList.push(tagObj);
+          });
+          let tagNum = this.elementInfo.selectedTagList.length;
+          this.setLabelDivHeight(tagNum);
         }else {
-          this.elementInfo.tagList = [];
+          this.elementInfo.selectedTagList = [];
+          this.setLabelDivHeight(0);
         }
       });
     },
@@ -367,91 +386,102 @@ export default {
         }else {
           this.elementInfo.metric = expression;
         }
-
-        //alert(this.elementInfo.metric);
-        //this.selectMetric(); // 获取tag
-        this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
+        //this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
+        this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
           this.elementInfo.selectedTagList = [];
-          this.elementInfo.tagList = [];
+          //this.elementInfo.tagList = [];
           if (response.code === 200) {
-              //this.elementInfo.tagList = response.data.list;
-              if(response.data.list){
-                response.data.list.forEach((item) => {
-                  const tagObj = {
-                    name: item.name,
-                    isSelect:false//当前元素是否被选中，默认都未选中
-                  };
-                  this.elementInfo.tagList.push(tagObj);
+              const objList = Object.entries(response.data);
+              objList.forEach((item) => {
+                const tagObj = {
+                  name: item[0],
+                  list:item[1],
+                  value:[]//最终选择的值
+                };
+                let labelName = item[0];
+                let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
+                let labArr = labelValList.split(',');
+                labArr.forEach((item, index) => {//b=~'1|2|3'
+                    let labNameTmp = item.substring(0,item.indexOf('='));
+                    if(labNameTmp===labelName){
+                      let labVal = item.substring(item.indexOf('=')+1,item.length);
+                      if(labVal.indexOf('~')!=-1){
+                        labVal = labVal.substring(2,labVal.length-1);
+                        let valArr = labVal.split('|');
+                        valArr.forEach((labItem, labIndex) => {
+                          tagObj.value.push(labItem);
+                        });
+                      }else {
+                        labVal = labVal.substring(1,labVal.length-1);
+                        tagObj.value.push(labVal);
+                      }
+                    }
                 });
-              }else {
-                response.data.forEach((item) => {
-                  const tagObj = {
-                    name: item.name,
-                    isSelect:false//当前元素是否被选中，默认都未选中
-                  };
-                  this.elementInfo.tagList.push(tagObj);
-                });
-              }
-            if(expression.indexOf('{')>-1){
-              let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
-              this.stringToTags(labValArrStr);
-            }
+
+                this.elementInfo.selectedTagList.push(tagObj);
+              });
+              let tagNum = this.elementInfo.selectedTagList.length;
+              this.setLabelDivHeight(tagNum);
           }else {
-            this.elementInfo.tagList = [];
+            this.elementInfo.selectedTagList = [];
+            this.setLabelDivHeight(0);
           }
         });
       }
     },
-    //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
-    stringToTags(str) {
-      let labArr = str.split(',');
-      labArr.forEach((item, index) => {//b=~'1|2|3'
-        let labName = item.substring(0,item.indexOf('='));
-        this.elementInfo.tagList.every((tagItem,index) => {
-          if(tagItem.name===labName){
-            tagItem.isSelect = true;
-            return false;
-          }else {
-            return true;
-          }
-        });
 
-        //查询metricLabel名称对应的LabelValue
-        this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
-          const tagObj = {
-            name:labName,//选中的metricLabel名称
-            list:[],//metricLabel名称对应的LabelValue
-            value:[]//最终选择的值
-          };
-          let labVal = item.substring(item.indexOf('=')+1,item.length);
-          if(labVal.indexOf('~')!=-1){
-            labVal = labVal.substring(2,labVal.length-1);
-            let valArr = labVal.split('|');
-            valArr.forEach((labItem, labIndex) => {
-              tagObj.value.push(labItem);
-            });
-          }else {
-            labVal = labVal.substring(1,labVal.length-1);
-            tagObj.value.push(labVal);
-          }
-          if (response.code === 200) {
-            if(response.data.list){
-              response.data.list.forEach((resItem) => {
-                tagObj.list.push(resItem.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }else{
-              response.data.forEach((resItem) => {
-                tagObj.list.push(resItem.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }
-          }else {
-            this.elementInfo.selectedTagList.push(tagObj);
-          }
-        });
-      });
-    },
+    /*
+   //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
+   stringToTags(str) {
+     let labArr = str.split(',');
+     labArr.forEach((item, index) => {//b=~'1|2|3'
+       let labName = item.substring(0,item.indexOf('='));
+       this.elementInfo.tagList.every((tagItem,index) => {
+         if(tagItem.name===labName){
+           tagItem.isSelect = true;
+           return false;
+         }else {
+           return true;
+         }
+       });
+
+       //查询metricLabel名称对应的LabelValue
+       this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
+         const tagObj = {
+           name:labName,//选中的metricLabel名称
+           list:[],//metricLabel名称对应的LabelValue
+           value:[]//最终选择的值
+         };
+         let labVal = item.substring(item.indexOf('=')+1,item.length);
+         if(labVal.indexOf('~')!=-1){
+           labVal = labVal.substring(2,labVal.length-1);
+           let valArr = labVal.split('|');
+           valArr.forEach((labItem, labIndex) => {
+             tagObj.value.push(labItem);
+           });
+         }else {
+           labVal = labVal.substring(1,labVal.length-1);
+           tagObj.value.push(labVal);
+         }
+         if (response.code === 200) {
+           if(response.data.list){
+             response.data.list.forEach((resItem) => {
+               tagObj.list.push(resItem.value)
+             });
+             this.elementInfo.selectedTagList.push(tagObj);
+           }else{
+             response.data.forEach((resItem) => {
+               tagObj.list.push(resItem.value)
+             });
+             this.elementInfo.selectedTagList.push(tagObj);
+           }
+         }else {
+           this.elementInfo.selectedTagList.push(tagObj);
+         }
+       });
+     });
+   },
+   */
 
     clearHistory() {
       this.elementInfo.metric = '';
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 0a4643a93..3fb7d35d7 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -45,11 +45,12 @@
     width:90%;
    }
   .li-list-part-label-val-list {
-    height: 218px;
-    border: 1px solid #dcdfe6;
+    height: 280px;
+    /*border: 1px solid #dcdfe6;*/
     border-radius: 4px;
     box-sizing:border-box;
-    padding: 15px 0 10px 15px;
+    padding: 7px 0 10px 15px;
+    margin-bottom:0px !important;
   }
 
   .no-list-style{
@@ -103,6 +104,7 @@
     /* overflow: auto !important; */
     box-sizing:border-box;
     margin:0 auto;
+    margin-bottom:0px !important;
    }
   .el-input .el-input__inner{
     /* width:80%; */
@@ -133,7 +135,7 @@
 
 }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px);
+    width: calc(100% - 15px);/*calc(100% - 45px);*/
     margin:0 auto;
 
   } 
@@ -149,7 +151,13 @@
     width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px);
+    width: calc(100% - 15px);
+  }
+  .li-list-part-label-val-list .el-scrollbar__wrap{
+    /* overflow: auto !important; */
+    box-sizing:border-box;
+    margin:0 auto;
+    margin-bottom:0px !important;
   }
   .nz-tab-chart-item-box{
     padding:0;
@@ -195,7 +203,7 @@
     </el-row>
     <el-row  v-if="tableShow == 1">
       <el-col :span="24" >
-        <el-form-item label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+        <el-form-item style="margin-bottom:0px;" label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
               <!--
               <el-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
                 <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -214,6 +222,7 @@
     </el-row>
     <!--create chart组件显示框  -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+      <!--
       <el-col :span="9" style="margin-bottom: 20px;">
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -228,20 +237,28 @@
       </el-col>
 
       <el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
-
-      <el-col :span="14">
-        <div class="li-list-part-label-val-list" >
+-->
+      <el-col :span="24">
+        <div class="li-list-part-label-val-list" id="scrollDiv">
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-              <el-select  v-model="item.value" ref="tagSelect" size="mini"
-                          placeholder=""
-                          collapse-tags
-                          filterable
-                          @change="changeTag"
-                          multiple>
-                <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
-              </el-select>
+            <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index"  label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+              <el-row :gutter="10" >
+                <el-col :span="4" >
+                  <div style="text-align:right;padding-right:5px;">{{item.name}}</div>
+                </el-col>
+                <el-col :span="20" >
+                  <el-select  v-model="item.value" ref="tagSelect" size="mini"
+                              placeholder=""
+                              filterable
+                              @change="changeTag"
+                              multiple>
+                    <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
+                  </el-select>
+                </el-col>
+              <!--
               <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+              -->
+                </el-row>
             </el-form-item>
           </el-scrollbar>
         </div>
@@ -309,10 +326,6 @@ export default {
         }
       });
     },
-
-
-
-
     // 删除该选项,第一步,传递要删除的参数
     deleteTarget() {
       //alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
@@ -349,43 +362,51 @@ export default {
       }
     },
 
+    setLabelDivHeight(count){
+      if(count===0){
+        const chartBox = document.getElementById('scrollDiv');
+        chartBox.style.height = `${10}px`;
+      }else if(count<6){//小于6个需要调整容器的高度
+        const chartBox = document.getElementById('scrollDiv');
+        chartBox.style.height = `${(280 / 6) * count+10}px`;
+      }else {
+        const chartBox = document.getElementById('scrollDiv');
+        chartBox.style.height = `${280}px`;
+      }
+    },
+
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
         this.elementInfo.metric = this.elementInfo.metric[1];
         this.getSuggestTags(this.elementInfo.metric);
       } else {
-        this.elementInfo.tagList = [];
+        this.elementInfo.selectedTagList = [];
+        this.setLabelDivHeight(0);
       }
       this.$emit('on-change-condition');
     },
     // 获取tags列表
     getSuggestTags(metric) {
-      this.$get('metric/labelName?metric='+metric).then(response => {
+      //this.$get('metric/labelName?metric='+metric).then(response => {
+      this.$get('/metric/series?match[]='+metric).then(response => {
         this.elementInfo.selectedTagList = [];
-        this.elementInfo.tagList = [];
+        //this.elementInfo.tagList = [];
         if (response.code === 200) {
-          if(response.data.list){
-            //this.elementInfo.tagList = response.data.list;
-            response.data.list.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false//当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }else{
-            response.data.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false //当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }
-          //this.elementInfo.tagList = response.data.list;
+          const objList = Object.entries(response.data);
+          objList.forEach((item) => {
+            const tagObj = {
+              name: item[0],
+              list:item[1],
+              value:[]//最终选择的值
+            };
+            this.elementInfo.selectedTagList.push(tagObj);
+          });
+          let tagNum = this.elementInfo.selectedTagList.length;
+          this.setLabelDivHeight(tagNum);
         }else {
-          this.elementInfo.tagList = [];
+          this.elementInfo.selectedTagList = [];
+          this.setLabelDivHeight(0);
         }
       });
     },
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index c8b70de3f..86a4b2815 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -214,6 +214,7 @@ export default {
       end.setSeconds(59);
       this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
       this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
+      this.$refs.editChartSingle.setDivFirstShow(true);
     },
     dateChange(time) {
       this.filter.start_time = `${time[0]}:00`;
@@ -263,6 +264,9 @@ export default {
             if (response.data.result.length === 1) {
               this.chartCount = 'single';
             }
+            if (response.data.result.length === 0) {
+              this.$refs.editChartSingle.setData(params, [], 0, this.filter,[]);
+            }
           }
           this.getChartData(response, params);
         }else {
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.scss b/nezha-fronted/src/components/page/dashboard/metricSet.scss
index 5a775c989..5131b1924 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.scss
@@ -24,6 +24,7 @@
     // border-top: 1px solid #dfe7f2;
     // border-bottom: 1px solid #dfe7f2;
     padding-bottom: 20px;
+    padding-top:20px;
     text-align: right;
     .operate-area-title {
       padding: 5px 0;
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index fd197c0cf..e17b9ab5c 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -551,14 +551,17 @@ export default {
     */
     // 获取metric列表
     getSuggestMetric(id) {
-      this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
-        if (response.code === 200) {
-          this.metricList = response.data.list;
+      //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
+      this.$get('/prom/api/v1/label/__name__/values', {pageNo: 1, pageSize: -1}).then(response => {
+        //if (response.code === 200) {
+        if (response.status === 'success') {
+          this.metricList = response.data;
           const cascaderMap = new Map();
           this.metricList.forEach((item,index) => {
             let arr = [];
             let par = '';//父value
-            let metricTmp = item.metric;//子value
+            //let metricTmp = item.metric;//子value
+            let metricTmp = item;//子value
             if(metricTmp){
               arr  = metricTmp.split('_');
               par = arr[0];
@@ -578,7 +581,7 @@ export default {
           let metricCascaderArr = [];
           cascaderMap.forEach(function(value,index){
             const option = {
-              value: index,
+              value: index+"_par",//父节点和子节点的value相同，会出现点击与父节点label同名的子节点时，不显示选择的内容
               label: index,
               children:value,
             };