From 8ae08254d93c589c51fd058394a65ae1fc4ac6d2 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 21 Jan 2020 15:34:01 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20dashboard-metrics=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/index.html                      |  3 +-
 nezha-fronted/src/assets/stylus/main.scss     | 14 ++--
 .../components/page/dashboard/chartMetric.vue |  3 +
 .../page/dashboard/chartMetricForPreview.vue  | 65 +++++++++++--------
 .../page/dashboard/metricPreview.scss         |  5 +-
 .../page/dashboard/metricPreview.vue          | 29 +++++----
 .../components/page/dashboard/metricSet.scss  | 12 ++--
 .../components/page/dashboard/metricSet.vue   | 15 ++---
 8 files changed, 76 insertions(+), 70 deletions(-)
diff --git a/nezha-fronted/index.html b/nezha-fronted/index.html
index 56306847c..6bb5507e2 100644
--- a/nezha-fronted/index.html
+++ b/nezha-fronted/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
   <title>nezha-fronted</title>
   <style>
     * {
@@ -20,4 +21,4 @@
   <!-- built files will be auto injected -->
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 31da645b2..8d771e5fd 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -126,12 +126,9 @@ li{
 }
 .nz-btn-metric-bottom{
   position: fixed;
-  right:37%;
-  top:95%;
-  margin-bottom:30px;
-}
-.nz-btn-metricset-left{
-  margin: 0 20px 30px 780px;
+  left:calc(50% + 128px);
+  bottom: 22px;
+  transform: translateX(-50%);
 }
 .nz-btn-metric-bottom-left{
   margin-right:30px;
@@ -717,10 +714,7 @@ li{
   height: calc(100% - 132px);
   width: 100%;
 }
-.right-box-form-box .el-scrollbar__wrap {
-  overflow-x: hidden !important;
-}
-.pop-box .el-scrollbar__wrap {
+.el-scrollbar__wrap {
   overflow-x: hidden !important;
 }
 .right-box-form {
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index 6f3856efb..47e3b0430 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -88,6 +88,8 @@
     height: 10px;
     color: #666;
     line-height: 14px;
+    text-align: left;
+    width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
     width: calc(100% - 45px);
@@ -135,6 +137,7 @@
                  v-model="elementInfo.metric"
                  :options="metricCascaderList"
                  :props="{ expandTrigger: 'hover' }"
+                 :show-all-levels="false"
                  @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">
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 0aa841a46..42991e919 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -45,15 +45,12 @@
     width:90%;
    }
   .li-list-part-label-val-list {
-    height: 250px;
+    height: 218px;
     border: 1px solid #dcdfe6;
-    margin-top: 33px;
+    margin-top: 44px;
     border-radius: 4px;
-    padding: 0px 5px 10px 5px;
     box-sizing:border-box;
-    width:90%;
-    margin-left:-20px;
-  
+    padding: 15px 0 10px 15px;
   }
 
   .no-list-style{
@@ -61,12 +58,14 @@
   }
   .li-cursor{
     cursor: pointer;
+    padding: 3px 0;
+    font-size: 14px;
   }
   .activeColor {
     background-color: #409EFF;
   }
   .metric-title-label{
-    margin-bottom:8px;
+    margin-bottom: 20px;
   }
   .metric-title-position{
     margin-bottom:-5px;
@@ -85,12 +84,12 @@
   }
   .symbol-area {
     position: relative;
-    height: 135px;
+    height: 166px;
   }
   .symbol-equal {
     position: absolute;
     bottom: 0;
-    left: 18px;
+    left: 5px;
     color: #c0c4cc;
     font-size: 24px;
   }
@@ -139,10 +138,27 @@
     margin:0 auto;
 
   } 
-  .nz-tab-style-left{
-    margin-left:130px;
+
+</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;
+    text-align: left;
+    width: 100px;
+  }
+  .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"   >
@@ -151,10 +167,10 @@
         <!-- <span  class="star-red">*</span>&nbsp; -->
         {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
-      <el-col span="8">
+      <el-col span="8" style="text-align: right;">
         <div class="nz-tab-item-box"  v-show="tableShow == 1">
         <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
-          <div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-left">
+          <div @click="" class="nz-tab-style nz-tab-style-light">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
           <div  @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light-right ">
@@ -169,7 +185,7 @@
         </div>
         <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  class="nz-tab-style nz-tab-style-left">
+           <div  class="nz-tab-style">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
 
@@ -186,17 +202,14 @@
       </el-col>
     </el-row>
     <el-row  v-if="tableShow == 2">
-      <el-col span="22" class="mt1">
+      <el-col span="24" 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" @input="changeExpression" 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-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-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
@@ -208,17 +221,15 @@
                 v-model="elementInfo.metric"
                 :options="metricCascaderList"
                 :props="{ expandTrigger: 'hover' }"
+                :show-all-levels="false"
                 @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>
-<!--create chart组件显示框  -->
-<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-      <el-col span="8">
+    <!--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="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -232,7 +243,7 @@
         </div>
       </el-col>
 
-      <el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></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" >
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.scss b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
index f355170aa..49ff228b0 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
@@ -5,9 +5,10 @@
   .box-content {
     //position: relative;
    width:calc(100% - 13px);
+    height: 100%;
   }
   .table-list {
-    margin-top:30px;
+    margin-top:40px;
     overflow-y:auto;
     height: 100%;
   }
@@ -16,11 +17,9 @@
   }
   .chartBox {
     width: 100%;
-    float: left;
   }
   .chartBoxMul {
     width: 100%;
-    float: left;
   }
   .common-detail-top-title {
     font-size: 16px;
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 997235d6b..0879e55f6 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -17,7 +17,7 @@
               <!-- <div class="float-left metric-title"  >{{$t('dashboard.metricPreview.title')}}
               </div> -->
               <div class="float-right mr-10">
-                <el-date-picker size="small" ref="calendar"
+                <el-date-picker size="mini" ref="calendar"
                                 format="yyyy/MM/dd HH:mm"
                                 @change="dateChange"
                                 v-model="searchTime"
@@ -32,12 +32,11 @@
             </div>
             <div class="table-list" >
               <div class="box-content" >
-                <el-row  :gutter="20"  class="row-width" >
+                <el-row :gutter="20"  class="row-width" style="height: calc(100% - 65px);">
                   <el-col :span="12" >
-                    <div >{{$t('dashboard.panel.chartForm.metric')}}</div>
                       <metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set>
                   </el-col>
-                  <el-col :span="12" >
+                  <el-col :span="12" style="height: calc(100% - 10px);overflow-y: auto;overflow-x: hidden;">
                     <el-row class="border-area" v-show="chartCount === 'single'">
                       <div class="chartBox">
                         <line-chart-block
@@ -49,17 +48,21 @@
                         ></line-chart-block>
                       </div>
                     </el-row>
+
                     <el-row class="border-area" v-show="chartCount === 'multiple'">
-                      <div class="chartBoxMul" v-for="(item, index) in lineList">
-                        <line-chart-block
-                          :show-setting="false"
-                          ref="editChartMultiple"
-                          @on-refresh-data="refreshChart"
-                          @on-remove-chart-block="removeChart"
-                          @on-edit-chart-block="editData"
-                        ></line-chart-block>
-                      </div>
+                      <el-scrollbar style="height: 100%">
+                        <div class="chartBoxMul" v-for="(item, index) in lineList">
+                          <line-chart-block
+                            :show-setting="false"
+                            ref="editChartMultiple"
+                            @on-refresh-data="refreshChart"
+                            @on-remove-chart-block="removeChart"
+                            @on-edit-chart-block="editData"
+                          ></line-chart-block>
+                        </div>
+                      </el-scrollbar>
                     </el-row>
+
                   </el-col>
                 </el-row>
               </div>
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.scss b/nezha-fronted/src/components/page/dashboard/metricSet.scss
index bc7e2855e..f46307eb2 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.scss
@@ -1,3 +1,6 @@
+.operate-area {
+  padding-bottom: 20px;
+}
 .metric-set {
   /*搜索栏样式*/
   .search-data {
@@ -11,7 +14,6 @@
     margin-left: 10px;
   }
   .metric-form {
-    padding-top: 20px;
     box-sizing: border-box;
     position: relative;
     // height: 69%;
@@ -21,18 +23,14 @@
   .operate-area {
     // border-top: 1px solid #dfe7f2;
     border-bottom: 1px solid #dfe7f2;
-    padding: 5px 0;
-    margin-left:3px;
+    padding-bottom: 20px;
+    text-align: right;
     .operate-area-title {
       padding: 5px 0;
       font-size: 14px;
       font-weight: bold;
     }
   }
-  .element-item {
-    padding-top: 20px;
-    border-top: 1px dashed #dfe7f2;
-  }
   .ivu-form-item .ivu-form-item {
     margin-bottom: 24px;
   }
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index a3ae9c1f7..078aeac35 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -16,9 +16,6 @@
   .common-middle{
     margin:-20px auto;
   }
-  .element-item {
-    padding: 20px 0;
-  }
 </style>
 <template>
   <div class="metric-set"  >
@@ -45,11 +42,11 @@
 
           </el-row> -->
 
-      <el-row class="pt-5 pb-5 ml-3 operate-area">
+      <el-row class="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 type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal">{{$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-light' : !(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' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-light' : !(saveDisabled || loading)}"
         >{{chartSwitchWord}}</button>
         
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
@@ -82,7 +79,7 @@
           <div class="common-float-left">
             <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"
             :rules="{ required: true, type: 'number', trigger: 'change' }">
-              <el-select class="w-select" size="small" v-model="chartInfo.span" transfer>
+              <el-select class="w-select" size="mini" v-model="chartInfo.span" transfer>
                 <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
                   span-{{item}}
                 </el-option>
@@ -95,7 +92,7 @@
           <div class="common-float-left common-middle">
             <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
             :rules="{ required: true, type: 'number', trigger: 'change' }">
-              <el-input v-model="chartInfo.height" :min="400" size="small" class="w-select" placeholder=""></el-input>
+              <el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input>
               <span class='nz-input-append'>px</span>
               <!-- <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px -->
             </el-form-item>
@@ -106,7 +103,7 @@
           <div class="common-float-left">
             <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type"
               :rules="{ required: true,   trigger: 'change' }">
-              <el-select transfer class="w-select" v-model="chartInfo.type" size="small">
+              <el-select transfer class="w-select" v-model="chartInfo.type" size="mini">
                 <el-option v-for="item in typeList"
                   :key="item.id" 
                   :label="item.name" 
