diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index e43cf19ee..9a7762789 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -126,11 +126,12 @@ li{
 }
 .nz-btn-metric-bottom{
   position: fixed;
-  left:52%;
-  bottom:30px;
+  right:37%;
+  top:95%;
+  margin-bottom:30px;
 }
 .nz-btn-metricset-left{
-  margin: 0 20px 30px 515px;
+  margin: 0 20px 30px 780px;
 }
 .nz-btn-metric-bottom-left{
   margin-right:30px;
@@ -268,7 +269,6 @@ li{
 .nz-input-append {
   position: absolute;
   right: 8px;
-  line-height: 38px;
   color: #666;
 }
 /* end--el-input扩展 */
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index f30f8d51b..6f3856efb 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -92,20 +92,29 @@
   .li-list-part-label-val-list .el-select--mini {
     width: calc(100% - 45px);
   }
+  .nz-tab-chart-item-box{
+    padding:0;
+    display: inline-block;
+  }
+  .nz-tab-chart-style-left{
+    margin-left:40px;
+  }
+  
 </style>
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
     <el-row >
       <el-col span="16">
-        <span  class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
+        <!-- <span  class="star-red">*</span>&nbsp; -->
+        {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
 
       <el-col span="8">
-        <div class="nz-tab-item-box">
-          <div @click="clickTabelShow(1,'normal')" class="nz-tab-style" :class="{'nz-tab-style-light' : tableShow == 1}">
+        <div class="nz-tab-chart-item-box">
+          <div @click="clickTabelShow(1,'normal')" class="nz-tab-style nz-tab-chart-style-left" :class="{'nz-tab-style-light' : tableShow == 1}">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
-          <div @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right"  :class="{'nz-tab-style-light' : tableShow == 2}">
+          <div @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right "  :class="{'nz-tab-style-light' : tableShow == 2}">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </div>
         </div>
@@ -134,7 +143,9 @@
       </el-form-item>
     </template>
 
+<!-- create chart组件显示框 -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+
       <el-col span="8">
         <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
@@ -148,7 +159,9 @@
           </el-scrollbar>
         </div>
       </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-scrollbar style="height: 100%">
@@ -165,6 +178,7 @@
           </el-scrollbar>
         </div>
       </el-col>
+
     </el-row>
   </el-form>
 </template>
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 47ea1c87d..0aa841a46 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -1,28 +1,28 @@
 <style scoped>
-    .without-bottom {
-      margin-bottom: 0;
-    }
-    .ivu-select-dropdown {
-      max-height: 100px;
-    }
-    .error-info-text {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      line-height: 1;
-      padding-top: 6px;
-      color: #ed3f14;
-      white-space: nowrap;
-      word-wrap: normal;
-    }
-    .error-text {
-      color: #ed3f14;
-      line-height: 1.5;
-    }
+  .without-bottom {
+    margin-bottom: 0;
+  }
+  .ivu-select-dropdown {
+    max-height: 100px;
+  }
+  .error-info-text {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    line-height: 1;
+    padding-top: 6px;
+    color: #ed3f14;
+    white-space: nowrap;
+    word-wrap: normal;
+  }
+  .error-text {
+    color: #ed3f14;
+    line-height: 1.5;
+  }
   .nz-btn-style-higher{
     line-height: 22px;
   }
-  .li-list-part {
+  /* .li-list-part {
      width: 90%;
      height: 130px;
      border: 1px solid #cfcfcf;
@@ -34,8 +34,28 @@
       border: 1px solid #cfcfcf;
       overflow-y: auto;
       margin-top: 20px;/*21*/
-      border: 0px;
-    }
+      /* border: 0px;
+     } */
+  .li-list-part {
+    height: 200px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 8px 12px;
+    color: #666;
+    width:90%;
+   }
+  .li-list-part-label-val-list {
+    height: 250px;
+    border: 1px solid #dcdfe6;
+    margin-top: 33px;
+    border-radius: 4px;
+    padding: 0px 5px 10px 5px;
+    box-sizing:border-box;
+    width:90%;
+    margin-left:-20px;
+  
+  }
+
   .no-list-style{
    list-style: none;
   }
@@ -54,29 +74,90 @@
   .metric-title-row-position{
     margin-top:-10px;
   }
-  .star-red{
-    color:#ff1818;
-  }
+  /* .star-red{
+    /* color:#ff1818; */
+  /* }  */
   .full-width{
     width:100%;
   }
   .mt1{
     margin-top:1px;
   }
+  .symbol-area {
+    position: relative;
+    height: 135px;
+  }
+  .symbol-equal {
+    position: absolute;
+    bottom: 0;
+    left: 18px;
+    color: #c0c4cc;
+    font-size: 24px;
+  }
+  .symbol-delete {
+    padding-left: 8px;
+    cursor: pointer;
+  }
+  .symbol-delete i {
+    color: #c0c4cc;
+   }
+  .el-scrollbar__wrap{
+    /* overflow: auto !important; */
+    box-sizing:border-box;
+    margin:0 auto;
+   }
+  .el-input .el-input__inner{
+    /* width:80%; */
+    /* display:flex; */
+   }
+  .metric-title-position{
+    margin-bottom:2px;
+
+  }
+   /* .right-box-form-content-left{
+     line-height: 32px;
+     text-align: left;
+     width: 100%;
+     padding:0 10px;
+   } */
+   
+  .el-form-item__content{
+    padding-left:15px;
+    margin:0 auto;
+
+  }
+  .li-list-part-label-val-list .metric-title-position .el-form-item__label {
+    font-size: 14px;
+    height: 10px;
+    color: #666;
+    line-height: 14px;
+    margin:0 auto;
+
+}
+  .li-list-part-label-val-list .el-select--mini {
+    width: calc(100% - 45px);
+    margin:0 auto;
+
+  } 
+  .nz-tab-style-left{
+    margin-left:130px;
+  }
+   
 </style>
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
     <el-row >
       <el-col span="16">
-        <span  class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
+        <!-- <span  class="star-red">*</span>&nbsp; -->
+        {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
       <el-col span="8">
         <div class="nz-tab-item-box"  v-show="tableShow == 1">
         <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
-          <div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
+          <div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
-          <div @click="" class="nz-tab-style nz-tab-style-light-right">
+          <div  @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light-right ">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </div>
           <!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
@@ -86,13 +167,13 @@
             <span>{{$t('dashboard.metric.expert')}}</span>
           </button> -->
         </div>
-        <div class="nz-tab-item-box"  v-show="tableShow == 2">
+        <div @click="clickTabelShow(1,'expert')" class="nz-tab-item-box"  v-show="tableShow == 2">
         <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 1"> -->
-           <div @click="" class="nz-tab-style">
+           <div  class="nz-tab-style nz-tab-style-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
 
-          <div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
+          <div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right  ">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </div>
           <!-- <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
@@ -135,9 +216,46 @@
         &nbsp;&nbsp;<button type="button" v-if="countTotal > 1" @click="deleteTarget"  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
       </el-col>
     </el-row>
+<!--create chart组件显示框  -->
+<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+      <el-col span="8">
+        <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
+        <div class="li-list-part">
+          <el-scrollbar style="height: 100%">
+              <div class="li-cursor" v-if="!item.isSelect"
+                  v-for="(item,index) in elementInfo.tagList"
+                  @click="getLidata(index,item)"
+                  :key="index">
+                {{item.name}}
+              </div>
+          </el-scrollbar>
+        </div>
+      </el-col>
 
-    <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-      <el-col span="12">
+      <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-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>
+              <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+            </el-form-item>
+          </el-scrollbar>
+        </div>
+      </el-col>
+
+    </el-row>
+<!-- create chart组件显示框 -->
+    <!-- <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+      <!-- <el-col span="12">
         <div class="metric-title-label">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <ul class="no-list-style">
@@ -156,9 +274,10 @@
         <div class="li-list-part-label-val-list" >
           <el-form-item class="metric-title-position"   v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
             <el-row >{{item.name}}</el-row>
-            <el-row class="metric-title-row-position" >
+            <el-row class="metric-title-row-position" > -->
+              
             <!--多选列表 -->
-              <el-col span="20" >
+              <!-- <el-col span="20" >
                 <el-select  v-model="item.value" ref="tagSelect" size="small"
                             placeholder=""
                             collapse-tags
@@ -174,8 +293,8 @@
             </el-row>
           </el-form-item>
         </div>
-      </el-col>
-    </el-row>
+      </el-col> -->
+    <!-- </el-row>  -->
   </el-form>
 </template>
 <script>
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 721e50d86..997235d6b 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -14,8 +14,8 @@
 
 
           <div class="top-tools" >
-              <div class="float-left metric-title"  >{{$t('dashboard.metricPreview.title')}}
-              </div>
+              <!-- <div class="float-left metric-title"  >{{$t('dashboard.metricPreview.title')}}
+              </div> -->
               <div class="float-right mr-10">
                 <el-date-picker size="small" ref="calendar"
                                 format="yyyy/MM/dd HH:mm"
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.scss b/nezha-fronted/src/components/page/dashboard/metricSet.scss
index 08fa858a1..bc7e2855e 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.scss
@@ -13,6 +13,7 @@
   .metric-form {
     padding-top: 20px;
     box-sizing: border-box;
+    position: relative;
     // height: 69%;
     // max-height: 400px;
     // overflow: auto;
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index 1ae71d09a..a3ae9c1f7 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -16,6 +16,9 @@
   .common-middle{
     margin:-20px auto;
   }
+  .element-item {
+    padding: 20px 0;
+  }
 </style>
 <template>
   <div class="metric-set"  >
@@ -28,18 +31,31 @@
           @on-change-condition="getCondition"
           ></chart-metric>
       </el-row>
-      
+       <!-- <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"
+                           @on-change-condition="getCondition"
+                ></chart-metric>
+
+          </el-row> -->
+
       <el-row class="pt-5 pb-5 ml-3 operate-area">
 
         <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-metricset-left nz-btn-metricbtn">{{$t('dashboard.metric.previewChart')}}</button>
         <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
-                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal' : !(saveDisabled || loading)}"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-light' : !(saveDisabled || loading)}"
         >{{chartSwitchWord}}</button>
         
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
       </el-row>
 
-      <el-row class=" nz-btn-metric-bottom">
+      <el-row class="nz-btn-metric-bottom">
         <!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
         <button :disabled="saveDisabled" type="primary" @click="createNew"
                 :class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal  nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}"
@@ -126,6 +142,7 @@ export default {
       total: 0,
       loading: false, // 加载中
       chartModal: false, // 展示弹出框
+      elements: [1], // 指标部分 tarNum
       // 新建信息
       chartInfo: {
         title: '', // 名称
@@ -213,6 +230,38 @@ export default {
       this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
       this.$refs.panelBox.getTableData();
     },
+     // 删除指标,第一步, 新方法
+      deleteTarget(index) {
+        //alert('box第一步，循环所有的metric，为什么要循环？？');
+        this.deleteIndex = index;
+       // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
+        this.$refs.chartTag.forEach((item) => {
+          // 子组件保存内容到bus
+          item.subSave();
+        });
+      },
+       // subSave保存成功后回调,第二步
+      subOk() {
+        // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
+        //alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
+        this.subCount += 1;
+        if (this.subCount === this.elements.length) {
+          this.subCount = 0;
+          // 保存完成,进行删除操作
+          //alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
+          //alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+          this.elements.splice(this.deleteIndex, 1);
+          this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
+          bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
+          //alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+          this.$nextTick(() => {
+            this.$refs.chartTag.forEach((item, index) => {
+              item.setSubdata(index); // 将数据从bus重新赋值
+            });
+          });
+        }
+      },
+      
     /*
     // 取消创建modal
     cancel() {