From 7e118b0601a82cc665a2d8c55f7ee5f4a517aabd Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Mon, 17 Feb 2020 19:37:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9BUG=20dashboard=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=201.=E7=99=BB=E9=99=86=E8=BF=9B=E5=85=A5=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20header=E8=8F=9C=E5=8D=95=E6=B2=A1=E6=9C=89=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E9=80=89=E4=B8=AD=EF=BC=88NEZ-121=EF=BC=89=202.?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=B1=BB=E5=9E=8B=E5=9B=BE=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9height=E6=97=A0=E6=95=88=EF=BC=88NEZ-121?=
 =?UTF-8?q?=EF=BC=89=203.=E6=8A=98=E7=BA=BF=E5=9B=BE=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E9=AB=98=E5=BA=A6=E4=B8=BA=20200px?=
 =?UTF-8?q?=EF=BC=8C=E6=98=BE=E7=A4=BA=E4=B8=8D=E6=AD=A3=E5=B8=B8=EF=BC=8C?=
 =?UTF-8?q?height=E5=BA=94=E8=AF=A5=E6=98=AF=E6=95=B4=E4=B8=AA=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E9=AB=98=E5=BA=A6=EF=BC=8C=E8=80=8C=E4=B8=8D?=
 =?UTF-8?q?=E6=98=AF=E5=8F=AA=E6=98=AFecharts=E5=9B=BE=E7=9A=84=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=88NEZ-121=EF=BC=89=204.=E8=A1=A8=E6=A0=BC=20tim?=
 =?UTF-8?q?e=E6=A0=BC=E5=BC=8F=E5=8C=96=20=E5=8C=85=E5=90=AB=E7=A7=92?=
 =?UTF-8?q?=EF=BC=88NEZ-121=EF=BC=89=205.=E9=A2=84=E8=A7=88=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E4=B8=93=E5=AE=B6=E6=A8=A1=E5=BC=8F=EF=BC=8C=E8=A1=A8?=
 =?UTF-8?q?=E8=BE=BE=E5=BC=8F=E8=BE=93=E5=85=A5=E9=94=99=E8=AF=AF=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF=EF=BC=88=EF=BC=88?=
 =?UTF-8?q?NEZ-56=EF=BC=89=EF=BC=89=206.panel=E5=88=97=E8=A1=A8=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E4=B8=93=E5=AE=B6=E6=A8=A1=E5=BC=8F=E8=A1=A8=E8=BE=BE?=
 =?UTF-8?q?=E5=BC=8F=E9=94=99=E8=AF=AF=E7=9A=84panel=EF=BC=8C=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E9=94=99=E8=AF=AF=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=EF=BC=88NEZ-63=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      |  4 +-
 .../src/components/charts/chart-table.scss    |  2 +-
 .../src/components/charts/chart-table.vue     | 16 +++++--
 .../components/charts/line-chart-block.scss   | 48 ++-----------------
 .../components/charts/line-chart-block.vue    |  8 ++--
 .../src/components/common/header.vue          |  1 +
 .../components/page/dashboard/chartMetric.vue |  4 +-
 .../page/dashboard/chartMetricForPreview.vue  |  2 +-
 8 files changed, 27 insertions(+), 58 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index afee9cd37..04624ed90 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -15,7 +15,7 @@
 <template>
 
   <div class="list-width">
-    <div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="item.title+'_'+item.id">
+    <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id">
 
       <line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
       ref="editChart" 
@@ -288,7 +288,7 @@ export default {
                           }
                           */
                           let t_date = new Date(dpsItem[0] * 1000);
-                          let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm');
+                          let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
                           tableData.push({//表格数据
                             label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
                             metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
diff --git a/nezha-fronted/src/components/charts/chart-table.scss b/nezha-fronted/src/components/charts/chart-table.scss
index 19dd8fe6b..efc9ac482 100644
--- a/nezha-fronted/src/components/charts/chart-table.scss
+++ b/nezha-fronted/src/components/charts/chart-table.scss
@@ -12,7 +12,7 @@
 }
 .chart-table {
   width: calc(100% - 62px);
-  height: calc(100% - 40px);
+  height: 100%;//calc(100% - 40px);
   // min-height: 500px;
   position: relative;
   background: #FFF;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index d9c4c76d7..28487160d 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -2,12 +2,12 @@
 @import './chart-table.scss';
 </style>
 <template>
-<div class="chart-table">
+<div class="chart-table" id="chartTableDiv">
     <div class="clearfix">
         <div class="table-title">
             {{data.title}}
         </div>
-        <div class="nz-btn-group nz-btn-group-light edit">
+        <div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
           <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
           @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="nz-icon nz-icon-edit"></i></button><button
           @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
@@ -35,7 +35,7 @@
     <div class="mt-10" v-cloak>
         <!--
       <el-table  size="small"   :loading="tableLoading">-->
-        <el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light" v-cloak>
+        <el-table class="nz-table" id="tableContainer" ref="tableContainer" :data="seriesItem" :height="350" border v-loading="tableLoading" tooltip-effect="light" v-cloak>
             <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>
@@ -52,7 +52,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="padding-top: 30px;" class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light">
+            <el-table style="padding-top: 30px;" class="nz-table" :data="seriesItem" :height="350" border v-loading="tableLoading" tooltip-effect="light">
                 <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>
@@ -254,6 +254,14 @@ export default {
             this.searchTime[0] = filter.start_time;
             this.searchTime[1] = filter.end_time;
             this.oldSearchTime = this.searchTime;
+            //设置高度 chart-table
+            this.$nextTick(() => {
+              const chartBox = document.getElementById('chartTableDiv');
+              let height = chartItem.height;
+              chartBox.style.height = `${height-25}px`;
+              const tableBox = document.getElementById('tableContainer');
+              tableBox.style.height = `${height-75}px`;
+            });
         },
         // 获取格式
         getNumStr(num) {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index c8e078ded..0f1522595 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -43,7 +43,7 @@
 }
 .line-chart-block {
   height: 100%;
-  // min-height: 500px;
+  //min-height: 0px;
   position: relative;
   background: #FFF;
   border: 1px solid #d8dce1;
@@ -53,15 +53,7 @@
   .line-area {
     box-sizing: border-box;
     background: #FFF;
-    min-height: 300px;
-    span.highcharts-title {
-      display: block !important;
-      width: 50%;
-      font-size: 14px !important;
-      overflow: hidden;
-      word-wrap: break-word !important;
-      white-space: pre-wrap !important;
-    }
+    min-height: 95px;
   }
   /*.edit:after{
     display: block;
@@ -73,39 +65,7 @@
     right: 20px;
     top: 17px;
     z-index: 10;
-    /*background: $btn-light-background-color;
-    border-radius: 6px;;
-    border: 1px solid #ccc;
-    .set-icon {
-      display: inline-block;
-      cursor: pointer;
-      padding: 5px 15px;
-      margin-right: -3px;
-      border-right: 1px solid #ccc;
-    }
-    .set-icon:hover{
-      background: $btn-light-background-color-hover;
-    }
-    .set-icon:last-child:hover{
-    }
-    .set-icon:last-child{
-      border-right: none !important;
-    }
-    .el-icon-refresh-right{
-      color: #F0BF84;
-    }
-    i{
-      font-size: 16px;
-      color: #000;
-    }
-    .list-icon {
-      float: left;
-    }
-    .show-icon {
-      cursor: pointer;
-      float: right;
-      font-size: 14px;
-    }*/
+
   }
   .chart-select {
     position: absolute;
@@ -138,7 +98,7 @@
   .line-area {
     box-sizing: border-box;
     background: #FFF;
-    min-height: 300px;
+    min-height: 95px;
     span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
       display: block !important;
       width: 50%;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 05a989ec4..a39454e54 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -645,7 +645,7 @@
           option.title = title;
           this.echartStore.setOption(option);//创建图表
           this.echartStore.hideLoading();
-          this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
+          //this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
           if(legend && legend.length>0){
             this.legendList = [];
             legend.forEach((item, i) => {
@@ -662,7 +662,7 @@
             if(!chartInfo.height){
               this.echartStore.resize({height:(400-divHeight)});
             }else {
-              this.echartStore.resize({height:(chartInfo.height-divHeight)});
+              this.echartStore.resize({height:(chartInfo.height-divHeight-25)});
             }
           });
         } else if (chartSite === 'screen') { // 全屏显示
@@ -716,7 +716,7 @@
           option.title = {};
           this.echartModalStore.setOption(option);//显示全屏界面
           this.echartModalStore.hideLoading();
-          this.echartModalStore.resize({height:chartInfo.height});
+          //this.echartModalStore.resize({height:chartInfo.height});
           if(legend && legend.length>0){
             this.screenLegendList = [];
             legend.forEach((item, i) => {
@@ -733,7 +733,7 @@
             if(!chartInfo.height){
               this.echartModalStore.resize({height:(400-divHeight)});
             }else {
-              this.echartModalStore.resize({height:(chartInfo.height-divHeight)});
+              this.echartModalStore.resize({height:(chartInfo.height-divHeight-25)});
             }
           });
         }
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 8a27fecbd..ba6e51270 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -4,6 +4,7 @@
     <el-menu
       class="nz-menu float-right"
       mode="horizontal"
+      active="1"
       unique-opened
     >
       <el-submenu index="0" popper-class="nz-submenu">
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index df87f1f84..5d53b9f24 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -124,7 +124,7 @@
 
     <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>
+        <el-input size="mini"  :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" ref="metricExpression" type="textarea" rows="7" maxlength="1024" 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>
@@ -132,7 +132,7 @@
     </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="chart-box-dropdown" size="small"
+        <el-cascader ref="metricSelect"  :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="chart-box-dropdown" size="small"
                  v-model="elementInfo.metric"
                  :options="metricCascaderList"
                  :props="{ expandTrigger: 'hover' }"
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index f9ad52bda..188edf160 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -190,7 +190,7 @@
     <el-row  v-if="tableShow == 2">
       <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-input size="mini" rows="7" @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-row>