From c7caf1ef582fbe5400b7a33a769740d83446b3d5 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Mon, 24 Feb 2020 20:31:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9BUG=20dashboard=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=201.panel=20=E5=9B=BE=E8=A1=A8tooltip=E5=9C=A8?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=87=BA=E5=9B=BE=E8=A1=A8=E5=8C=BA?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E6=97=A0=E6=B3=95=E9=9A=90=E8=97=8F=202.?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=9B=BE=E8=A1=A8=E5=8C=BA=E5=9F=9F=E7=9A=84?=
 =?UTF-8?q?=E7=A9=BA=E7=99=BD=EF=BC=88=E6=9B=B2=E7=BA=BF=E5=9B=BE=EF=BC=8C?=
 =?UTF-8?q?datazoom=EF=BC=8Clegend=EF=BC=89=203.panel=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=99=90=E5=88=B6=E6=9C=80=E5=A4=A7=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=8C=E8=B6=85=E9=95=BF=E5=86=85=E5=AE=B9=20...=20?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E9=BC=A0=E6=A0=87=E6=82=AC=E6=B5=AE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=85=A8=E9=83=A8=E5=86=85=E5=AE=B9=EF=BC=8C?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A1=86=E5=AE=BD=E5=BA=A6=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=EF=BC=8C=E5=A2=9E=E5=8A=A0border=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/line-chart-block.scss   |  2 +-
 .../components/charts/line-chart-block.vue    | 16 +++--
 .../src/components/page/dashboard/panel.vue   | 72 +++++++++++++++----
 3 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 7b94d0d10..06f09a4e9 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -19,7 +19,7 @@
   color:lightgray;
 }
 .legend-container{
-  width: calc(100% - 130px);
+  width: calc(100% - 30px);
   max-height:80px;
   min-height:40px;
   overflow-y: auto;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 250a1f1a6..3f2954d57 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -33,7 +33,7 @@
       </div>
     </div>
 
-    <div class="line-area" style="border:solid 0px red;" ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
+    <div class="line-area"  ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
 
     <div class="legend-container"   id="legendArea" ref="legendArea" v-show="firstShow">
       <div v-for="(item, index) in legendList" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
@@ -344,7 +344,7 @@
             trigger: 'axis',
             confine:false,
             extraCssText:'z-index:1000;',
-            enterable:true,
+            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
             position:function(point,params,dom,rect,size){
               dom.style.transform = "translateZ(0)";
               //提示框位置
@@ -510,10 +510,10 @@
           grid: {
             //height:"50%",
             top: 13,
-            left: 65,
-            right: 45,
-            containLabel: false,
-            bottom:70,//156
+            left: 0,
+            right: 30,
+            containLabel: true,
+            bottom:35,//156
           },
           dataZoom: [{
             type: 'slider',
@@ -522,7 +522,9 @@
             start: 0,
             end: 100,
             height:25,
-            bottom:10//96
+            bottom:10,//96
+            left:40,
+            right:48,
           }
             /*
             , {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 4a3de41b2..364028b77 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -10,14 +10,22 @@
     <div class="content-right">
       <div class="top-tools">
         <div>
-          <el-dropdown @command="panelChange" trigger="click">
-                  <span class="el-dropdown-link">
-                      {{showPanel.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-                  </span>
-            <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
+          <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" >
+            <el-row  :gutter="10" class="el-dropdown-link" style="">
+              <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
+              <el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
+            </el-row>
+            <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown" >
               <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
               <el-dropdown-item v-for="item in panelData" :key="item.id+1"
-                                :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}
+                                :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
+                <!--{{item.name}}-->
+                <el-row  :gutter="10" class="panel-list-width" >
+                  <el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
+                  <el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
+                  <el-col :span="1">&nbsp;</el-col>
+                  <el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="el-icon-edit-outline" ></i></span></el-col>
+                </el-row>
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -58,14 +66,14 @@
             </button>
           </el-popover>
           </div>
-              <!-- 2020-02-14 使用普通搜索框-->
-<!--          <div class="top-tool-search">-->
-<!--            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
-<!--          </div>-->
+          <!-- 2020-02-14 使用普通搜索框-->
+          <!--          <div class="top-tool-search">-->
+          <!--            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
+          <!--          </div>-->
 
           <button @click="toAddChart" :title="$t('overall.createChart')"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light ">
-                          <i class="nz-icon-create-square nz-icon"></i>
+            <i class="nz-icon-create-square nz-icon"></i>
           </button>
         </div>
       </div>
@@ -597,6 +605,38 @@
     border-radius: 5px;
   }
 
+  .panel-list-width {
+    width:240px;
+  }
+
+  .panel-dropdown-title {
+    line-height:25px;
+    padding-left:5px;
+    margin-left:10px;
+    text-align:left;
+    border-radius:4px;
+    width:120px;
+    height:25px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-list-title {
+    min-height:25px;
+    width:100px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-list-item {
+    width:190px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
   .content-right-option {
     cursor: pointer;
     display: inline-block;
@@ -703,9 +743,15 @@
   .nz-dashboard-dropdown {
     height: 300px;
     overflow-y: auto;
-
+    left:210px !important;
     li {
-      padding: 0 20px !important;
+      /*padding: 0 20px !important;*/
+      padding-left:20px !important;
+      padding-right:0px !important;
+      width:240px;
+      white-space:nowrap;
+      overflow-x:hidden;
+      text-overflow:ellipsis;
     }
   }