From 584908a453b9fb8d1593036a5afc0df350fda9d3 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 22 Sep 2020 10:27:13 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=B0=83=E6=95=B4=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/popData/expressionInfo.vue | 68 +++++++++----------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
index abf8842cd..bf9ac1636 100644
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -2,27 +2,19 @@
   <div class="expressionInfo" :style="{top:expressionsInfoPosition.y+'px',left:expressionsInfoPosition.x+'px'}" v-if="expressionsData.length">
     <el-tooltip v-model="show" class="item" effect="light" content="Right Bottom 提示文字" placement="right-start" >
       <div slot="content"  class="main-box">
-        <div v-if="total>10" class="more-title-other expressions-box">
+        <div v-if="total>10" class="more-title-other">
           {{$t('dashboard.panel.moreTitleOther')}}{{$t('dashboard.panel.showAllOther')}} {{ total}}
         </div>
         <div  v-for="(item,index) in expressionsData" class="expressions-box">
           <span class="expressions-box-title">{{item.name}}</span>
           <div class="expressions-box-content"  v-if="item.value.length!==0">
-            <div class="expressions-metric">
-              <span class="expressions-box-label" style="font-weight: bold">Key</span>
-              <span class="expressions-box-value" style="font-weight: bold">Value</span>
-            </div>
-            <div v-for="item1 in item.value" class="expressions-metric">
-              <span class="expressions-box-label">{{legendFormat(item.metric,item.legend)}}</span>
+            <div v-for="item1 in item.value" class="expressions-metric" :key="index">
+              <span class="expressions-box-label">{{legendFormat(item.metric,item.legend)}} :</span>
               <span class="expressions-box-value">{{ dataFormat(item.unit,item1.value[1])}}</span>
             </div>
           </div>
-          <div v-if="item.value.length===0" class="expressions-box-content" style="padding: 3px;border-bottom: 1px solid #ebeef5">
-            <div class="expressions-metric">
-              <span class="expressions-box-label" style="font-weight: bold">Key</span>
-              <span class="expressions-box-value" style="font-weight: bold">Value</span>
-            </div>
-           NoData
+          <div v-if="item.value.length===0" class="expressions-box-content">
+            NoData
           </div>
         </div>
       </div>
@@ -33,8 +25,8 @@
 
 <script>
   import chartDataFormat from "@/components/charts/chartDataFormat";
-	export default {
-		name:"expressionInfo",
+  export default {
+    name:"expressionInfo",
     props:{
       lineId:{required:true},
       edgesArray:{},
@@ -54,14 +46,14 @@
       }
     },
     data(){
-		  return{
+      return{
         expressionsData:[],
         show:true,
         total:0,
       }
     },
     mounted(){
-		  let index=0;
+      let index=0;
       let arr=this.edgesArray.find(item=>item.id===this.lineId).expressions;
       if(arr.length===0){return};
       console.log(arr);
@@ -115,15 +107,20 @@
     max-height: 200px;
     overflow: hidden;
   }
+  .item{
+    background: #FFFFFF;
+    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.11);
+    border-radius: 4px;
+  }
   .more-title-other{
+    margin-top: 5px;
     margin-bottom: 5px;
+    font-size: 14px;
+    color: #FA901C;
   }
   .main-box{
     min-width: 150px;
-    max-width: 260px;
-    overflow: hidden;
     padding: 0 5px 5px 5px;
-    border: 1px solid #ebeef5;
   }
   .expressions-box{
     min-width: 100px;
@@ -134,39 +131,38 @@
   }
   .expressions-box-title{
     margin-bottom: 5px;
-    margin-top: 5px;
+    margin-top: 10px;
     display: inline-block;
     font-weight: bold;
-    font-size: 13px;
-    color: #1a1a1a;
+    font-size: 14px;
+    color: #333333;
   }
   .expressions-box-label{
-    font-size: 12px;
-    color: #1a1a1a;
+    font-size: 14px;
+    color: #666666;
     padding: 3px;
-    border-bottom: 1px solid #ebeef5 ;
+    min-width:60px;
+    text-align: left;
   }
   .expressions-box-value{
-    font-size: 12px;
-    color: #666;
+    font-size: 14px;
+    color: #3C92F1;
     padding: 3px 3px 3px 5px;
-    border-bottom: 1px solid #ebeef5 ;
+    min-width:40px;
   }
   .expressions-box-content{
-    border: 1px solid #ebeef5;
     border-bottom: none;
   }
   .expressions-metric{
     display: flex;
   }
   .expressions-metric > span{
-    width: 50%;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-    text-align: left;
+    /*width: 50%;*/
+    /*overflow: hidden;*/
+    /*text-overflow:ellipsis;*/
+    /*white-space: nowrap;*/
+    /*text-align: left;*/
   }
   .expressions-metric > span:not(:first-child){
-    border-left: 1px solid #ebeef5;
   }
 </style>