From 8ce3dae06c38f033f713ee3956dd8f4f9dd47514 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 20 Jan 2020 21:25:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B0=83=E6=95=B4chart=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   9 +-
 .../components/common/rightBox/panelBox.vue   |   2 +-
 .../components/page/dashboard/chartBox.vue    |  24 +--
 .../components/page/dashboard/chartMetric.vue | 197 +++++++++---------
 4 files changed, 108 insertions(+), 124 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 4b8df6b49..e43cf19ee 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -502,12 +502,12 @@ li{
 
 /* begin--右弹框滑入滑出动画*/
 @keyframes slide-in-from-right-580 {
-  from {right: -630px}
+  from {right: -580px}
   to {right: 0px}
 }
 @keyframes slide-out-to-right-580 {
   from {right: 0px}
-  to {right: -630px}
+  to {right: -580px}
 }
 @keyframes slide-in-from-right-840 {
   from {right: -870px}
@@ -644,6 +644,11 @@ li{
   font-size: 14px;
   color: $box-title-color;
 }
+.right-box-sub-title {
+  font-size: 14px;
+  color: $box-title-color;
+  padding-bottom: 5px;
+}
 .pop-title {
   line-height: 25px;
   text-align: left;
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 2f4eca80a..5c31e972c 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -1,5 +1,5 @@
 <template key="panelBox">
-  <transition name="right-box">
+  <transition name="right-box-580">
     <div class="right-box right-box-panel z-top" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index f75cd8e06..b02605ce6 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -35,11 +35,11 @@
   .element-bottom-border {
     padding-bottom: 5px;
     border-bottom: 1px solid #dfe7f2;
-    margin-top:-25px;
+    margin-top: 15px;
   }
   /*metric样式--begin*/
   .element-item {
-    padding-bottom: 20px;
+    padding: 20px 0;
     border-bottom: 1px dashed #dfe7f2;
   }
   /*metric样式--end*/
@@ -114,9 +114,8 @@
             </el-col>
           </el-row>
 
-          <el-row class="element-bottom-border" >
-            <div >{{$t('dashboard.panel.chartForm.metric')}}</div>
-          </el-row>
+          <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"
@@ -131,18 +130,9 @@
 
           </el-row>
 
-          <el-row :gutter="20">
-            <el-col :span="20">
-              <button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
-              </button>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="20">
-             &nbsp;
-            </el-col>
-          </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>
 
         </el-form>
       </el-scrollbar>
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index cb3461152..f30f8d51b 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -22,25 +22,42 @@
   .nz-btn-style-higher{
     line-height: 22px;
   }
-  .li-list-part {
-     width: 90%;
-     height: 130px;
-     border: 1px solid #cfcfcf;
-     overflow-y: auto;
+  .symbol-area {
+    position: relative;
+    height: 135px;
+  }
+  .symbol-equal {
+    position: absolute;
+    bottom: 0;
+    left: 13px;
+    color: #c0c4cc;
+    font-size: 24px;
+  }
+  .symbol-delete {
+    padding-left: 8px;
+    cursor: pointer;
+  }
+   .symbol-delete i {
+     color: #c0c4cc;
    }
-    .li-list-part-label-val-list {
-      width: 100%;
-      height: 145px;
-      border: 1px solid #cfcfcf;
-      overflow-y: auto;
-      margin-top: 20px;/*21*/
-      border: 0px;
-    }
-  .no-list-style{
-   list-style: none;
+  .li-list-part {
+     height: 170px;
+     border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 8px 12px;
+    color: #666;
+   }
+  .li-list-part-label-val-list {
+    height: 170px;
+    border: 1px solid #dcdfe6;
+    margin-top: 33px;
+    border-radius: 4px;
+    padding: 0px 0 10px 15px;
   }
   .li-cursor{
     cursor: pointer;
+    padding: 3px 0;
+    font-size: 14px;
   }
   .activeColor {
     background-color: #409EFF;
@@ -48,14 +65,15 @@
   .metric-title-label{
     margin-bottom:8px;
   }
+
   .metric-title-position{
-    margin-bottom:-5px;
+    margin-bottom: 2px;
   }
   .metric-title-row-position{
     margin-top:-10px;
   }
   .star-red{
-    color:#ff1818;
+    color:#f56c6c;
   }
   .full-width{
     width:100%;
@@ -64,6 +82,17 @@
     margin-top:1px;
   }
 </style>
+<style>
+  .li-list-part-label-val-list .metric-title-position .el-form-item__label {
+    font-size: 14px;
+    height: 10px;
+    color: #666;
+    line-height: 14px;
+  }
+  .li-list-part-label-val-list .el-select--mini {
+    width: calc(100% - 45px);
+  }
+</style>
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
     <el-row >
@@ -72,108 +101,68 @@
       </el-col>
 
       <el-col span="8">
-
-        <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
-        <div class="nz-tab-item-box"  v-show="tableShow == 1">
-          <div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
+        <div class="nz-tab-item-box">
+          <div @click="clickTabelShow(1,'normal')" class="nz-tab-style" :class="{'nz-tab-style-light' : tableShow == 1}">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
-          <!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
-            <span>{{$t('dashboard.metric.normal')}}</span>
-          </button> -->
-          <div @click="" class="nz-tab-style nz-tab-style-light-right">
+          <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>
-          <!-- <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
-            <span>{{$t('dashboard.metric.expert')}}</span>
-          </button> -->
-        </div>
-        <div 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">
-            <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">
-            <span>{{$t('dashboard.metric.expert')}}</span>
-          </div>
-          <!-- <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
-            <span>{{$t('dashboard.metric.normal')}}</span>
-          </button>
-          <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
-            <span>{{$t('dashboard.metric.expert')}}</span>
-          </button> -->
         </div>
       </el-col>
     </el-row>
 
-    <el-row  v-if="tableShow == 2">
-      <el-col span="22" class="mt1">
-        <el-form-item prop="expression" :rules="{ required: true,  message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
-          <el-input size="mini" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col  span="2">
-        &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>
-    <el-row  v-if="tableShow == 1">
-      <el-col span="22" >
-        <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-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"
-                :value="item.metric">{{item.metric}}</el-option>
-              </el-select>
-              -->
-              <el-cascader ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small"
-                       v-model="elementInfo.metric"
-                       :options="metricCascaderList"
-                       :props="{ expandTrigger: 'hover' }"
-                       @change="selectMetric"></el-cascader>
-              <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
-        </el-form-item>
-      </el-col>
-      <el-col  span="2">
-        &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>
+    <template  v-if="tableShow == 2">
+      <el-form-item class="right-box-form-content" prop="expression" :rules="{ required: true,  message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+        <el-input size="mini" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" ref="metricExpression" type="textarea" rows="3" maxlength="512" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
+        <div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1" style="vertical-align: top">
+          <i class="el-icon-minus"></i>
+        </div>
+      </el-form-item>
+    </template>
+    <template v-if="tableShow == 1">
+      <el-form-item class="right-box-form-content" :label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+        <el-cascader ref="metricSelect" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="" size="small"
+                 v-model="elementInfo.metric"
+                 :options="metricCascaderList"
+                 :props="{ expandTrigger: 'hover' }"
+                 @change="selectMetric"></el-cascader>
+        <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
+        <div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1">
+          <i class="el-icon-minus"></i>
+        </div>
+      </el-form-item>
+    </template>
 
     <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>
+      <el-col span="8">
+        <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
-          <ul class="no-list-style">
-            <li class="li-cursor" v-if="!item.isSelect"
-                v-for="(item,index) in elementInfo.tagList"
-                @click="getLidata(index,item)"
-                :key="index">
-              <div>
-                <span >{{ item.name }}</span>
+          <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>
-            </li>
-          </ul>
+          </el-scrollbar>
         </div>
       </el-col>
-      <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-form-item class="metric-title-position"   v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-            <el-row class="metric-title-row-position" >
-            <!--多选列表 -->
-              <el-col span="20" >
-                <el-select  v-model="item.value" ref="tagSelect" size="small"
-                            placeholder=""
-                            collapse-tags
-                            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>
-              <el-col span="4" >
-                &nbsp;&nbsp;<button type="button"  @click="deleteMetricLabel(item,index)"  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>
-          </el-form-item>
+          <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
+                          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>