perf: dashboard 图表最大化、endpoint view graph弹窗修改

1.统一高度设为80%

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;

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>

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);
+  }
+
 }

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -69,12 +69,16 @@
         </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 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.$refs.screenLegendScrollbar.update();
-            this.echartModalStore.resize({height:(400-divHeight)});
+            /*let divHeight = this.$refs.screenLegendArea.offsetHeight;
+            this.echartModalStore.resize({height: '100%'});*/
           });
         }
       },

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;
   }

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">
+        <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,
-            //top: '13%',
+            left: 0,
-            containLabel: false,
+            right: 30,
-            bottom:70,//156
+            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();
             });
         })
       },