From 94f00a35b74912de7d3fc6f3448e2643710cbf02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <523037378@qq.com>
Date: Fri, 6 Mar 2020 20:54:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20dashboard=20=E5=9B=BE=E8=A1=A8=E6=9C=80?=
 =?UTF-8?q?=E5=A4=A7=E5=8C=96=E3=80=81endpoint=20view=20graph=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.统一高度设为80%
---
 nezha-fronted/src/assets/stylus/main.scss     | 15 +++++++++-
 .../src/components/charts/chart-table.vue     |  6 ++--
 .../components/charts/line-chart-block.scss   | 11 +++++--
 .../components/charts/line-chart-block.vue    | 30 +++++++++++--------
 .../src/components/common/exportXLSX.vue      |  8 ++---
 .../src/components/page/project/project.vue   | 25 +++++++++-------
 6 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 2ced6eb50..f98f7f645 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1107,8 +1107,21 @@ li{
 /* --end--复选框自定义颜色 */
 
 /* dashboard-dialog */
+.nz-dialog {
+  overflow: hidden;
+}
 .nz-dialog .el-dialog {
-  border-radius: 10px;
+  border-radius: 5px;
+}
+.line-chart-block-modal .el-dialog {
+  margin-top: 5% !important;
+}
+.table-chart-dialog .el-dialog {
+  height: 80%;
+  margin-top: 5% !important;
+}
+.table-chart-dialog .el-dialog .el-dialog__body {
+  height: calc(100% - 100px);
 }
 .nz-dialog .el-dialog__body {
   padding: 0 20px 30px 20px;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index e6f96e372..eaf69ada3 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -25,7 +25,7 @@
 
         </div>
         <div class="mt-10" v-cloak  v-show="firstShow">
-            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
+            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="350" :data="seriesItem" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
 <!--                <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
 <!--                <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
               <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -38,7 +38,7 @@
             </el-table>
         </div>
         <!--全屏-->
-          <el-dialog class="nz-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false;" >
+          <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false;" >
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
               <div class="float-right panel-calendar dialog-tool">
@@ -47,7 +47,7 @@
                 <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
               </div>
             </div>
-                <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  tooltip-effect="light" v-scrollBar:el-table>
+                <el-table style="margin-top: 30px;" class="nz-table" height="100%" :data="seriesItemScreen" border  tooltip-effect="light" v-scrollBar:el-table>
 <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
 <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
                   <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index b5279bb16..d2a4a9e39 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -29,6 +29,9 @@
   line-height: 18px;
   font-family: Roboto,Helvetica Neue,Arial,sans-serif;
 }
+.legend-container-screen.legend-container {
+  height: 115px;
+}
 .legend-item{
   text-overflow:ellipsis;
   white-space:nowrap;
@@ -107,12 +110,12 @@
 }
 .line-chart-block-modal {
   .el-dialog{
-    height:480px;
+    height: 80%;
   }
   .line-area {
     box-sizing: border-box;
     background: #FFF;
-    min-height: 95px;
+    height: 100%;
     span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
       display: block !important;
       width: 50%;
@@ -135,4 +138,8 @@
   .pt10{
     padding-top:10px;
   }
+  .el-dialog__body {
+    height: calc(100% - 200px);
+  }
+
 }
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 9e379868e..b77eb6e2d 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -37,10 +37,10 @@
 
     <div class="legend-container"   id="legendArea" ref="legendArea" v-show="firstShow">
       <el-scrollbar style="height: 100%;">
-      <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-        <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
-        <br/><!--bgColorList[index]-->
-      </div>
+        <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
+          <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+          <br/><!--bgColorList[index]-->
+        </div>
       </el-scrollbar>
     </div>
     <!--
@@ -68,13 +68,17 @@
           <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
       </div>
-      <div class="line-area " ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
-      <div class="legend-container"  id="screenLegendArea" ref="screenLegendArea"  v-show="showLegend">
-        <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-          <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
-          <br/><!--bgColorList[index]-->
-        </div>
+      <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
+
+      <div class="legend-container legend-container-screen"  id="screenLegendArea" ref="screenLegendArea"  v-show="showLegend">
+        <el-scrollbar style="height: 100%;" ref="screenLegendScrollbar">
+          <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
+            <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+            <br/><!--bgColorList[index]-->
+          </div>
+        </el-scrollbar>
       </div>
+
       <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
     </el-dialog>
     <!--</Modal>-->
@@ -605,7 +609,6 @@
             //bottom:0
           },
           grid: {
-            //height:"50%",
             top: 13,
             left: 0,
             right: 30,
@@ -854,8 +857,9 @@
             });
           }
           this.$nextTick(() => {
-            let divHeight = this.$refs.screenLegendArea.offsetHeight;
-            this.echartModalStore.resize({height:(400-divHeight)});
+            this.$refs.screenLegendScrollbar.update();
+            /*let divHeight = this.$refs.screenLegendArea.offsetHeight;
+            this.echartModalStore.resize({height: '100%'});*/
           });
         }
       },
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index ec39fd0ad..9be3f4d7d 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -260,7 +260,7 @@
   /*去除上传文件动画end*/
 </style>
 <style>
-  .el-dialog__body{
+  .export-xlsx .el-dialog__body{
     padding: 10px 20px 20px 20px;
   }
   .export-xlsx .el-button:focus, .export-xlsx .el-button:hover {
@@ -291,7 +291,7 @@
     position: relative;
     top:-2px;
   }
-  .el-dropdown .el-dropdown__caret-button {
+  .export-xlsx .el-dropdown .el-dropdown__caret-button {
     padding-left: 5px;
     padding-right: 5px;
     border-left: none;
@@ -326,7 +326,7 @@
     font-weight: bold;
   }
   /**dialog 在视图中居中显示start*/
-  .el-dialog{
+  .export-xlsx .el-dialog{
     display: flex;
     flex-direction: column;
     margin:0 !important;
@@ -338,7 +338,7 @@
     max-height:calc(100% - 30px);
     max-width:calc(100% - 30px);
   }
-  .el-dialog .el-dialog__body{
+  .export-xlsx .el-dialog .el-dialog__body{
     flex:1;
     overflow: auto;
   }
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 1b0130949..1e6ba0393 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -26,6 +26,7 @@
 <style scope>
   .chart-bottom {
     text-align: center;
+    margin-top: 16px;
   }
 </style>
 <template>
@@ -300,14 +301,16 @@
           <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
       </div>
-      <div class="line-area " style="height: 300px"  ref="viewGraphChart"  id="viewGraphChart"></div>
+      <div class="line-area" ref="viewGraphChart" id="viewGraphChart"></div>
       <div class="legend-container"   id="legendArea" ref="legendArea">
-        <div v-for="(item, index) in legend" :title="hideSameLabels&&item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-          <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{hideSameLabels&&item.alias?item.alias:item.name}}
-          <br/>
-        </div>
+        <el-scrollbar style="height: 100%" ref="chartScrollbar">
+          <div v-for="(item, index) in legend" :title="hideSameLabels&&item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{hideSameLabels&&item.alias?item.alias:item.name}}
+            <br/>
+          </div>
+        </el-scrollbar>
       </div>
-      <div class="line-100 margin-t-20 margin-b-30"></div>
+      <div class="line-100 margin-t-10"></div>
       <div class="chart-bottom">
         <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
       </div>
@@ -659,10 +662,11 @@
             y:'bottom',
           },
           grid: {
-            //height:"50%",
-            //top: '13%',
-            containLabel: false,
-            bottom:70,//156
+            top: 13,
+            left: 0,
+            right: 30,
+            containLabel: true,
+            bottom:35,//156
           },
           dataZoom: [{
             type: 'slider',
@@ -1343,6 +1347,7 @@
               this.chartOptions.color=this.bgColorList;
               this.chartOptions.series=this.chartDatas;
               this.graphChart.setOption(this.chartOptions);//创建图表
+              this.$refs.chartScrollbar.update();
             });
         })
       },