From 5a0f8b09abadb079217280edc3cfd0b52409cde4 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 17 Apr 2020 15:21:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E4=BF=AE=E6=94=B9&project=20state?=
 =?UTF-8?q?=E5=88=97=E6=82=AC=E6=B5=AE=E6=A1=86=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/index.scss         |  2 ++
 nezha-fronted/src/assets/stylus/main.scss          |  2 +-
 nezha-fronted/src/components/common/leftMenu.vue   |  4 ++--
 .../src/components/page/project/project.vue        | 14 +++++++++++---
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index 342a74560..314f23d14 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -25,4 +25,6 @@ $content-left-text-color: #666; //左侧菜单默认字色
 
 $dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
 
+$left-menu-bgcolor:#FFF;
+
 @import './main.scss';
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 72db40066..741e01ee2 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1685,7 +1685,7 @@ li{
   width: 90px;
 }
 .left-menu-bg .el-collapse-item__header,.left-menu-bg .el-collapse-item__content{ //当左侧菜单含有el-collapse组件时使用
-  background-color: #e2e2e2;
+  background-color: $left-menu-bgcolor;
 }
 .transparent-pop{ //防止popover的提示框挡住页面元素无法操作
   pointer-events: none;
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index 28e09d190..0ede05858 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -4,7 +4,7 @@
         <slot name="content-left"></slot>
         <div  @click="toggleStat" class="bottom-icon">
           <div class="bottom-divider"></div>
-          <div style="display: inline-block;float: right"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
+          <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
         </div>
       </div>
       <div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
@@ -49,7 +49,7 @@
   }
   .content .left-slot{
     position: relative;
-    background-color: #e2e2e2;
+    background-color: $left-menu-bgcolor;
     /*border-bottom: 1px solid #eeeeee;*/
     /*transition: all 100ms;*/
   }
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index a56cc420e..9758f9baa 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -134,10 +134,14 @@
               </div>
 <!--              <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
               <span v-else-if="item.prop == 'state'" >
-                <el-popover placement="right" width="50" trigger="hover" :content="getStateContent(scope.row)">
+                <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
                   <div slot="reference" style="width: 20px">
                     <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
                   </div>
+                  <div >
+                    <div v-if="scope.row.state == '1'">up</div>
+                    <div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                  </div>
                 </el-popover>
               </span>
               <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -622,10 +626,10 @@
       getStateContent:function(row){
         if(row){
           if(row.state == 1){
-
             return 'up';
           }else{
-            return 'down';
+            // return 'down'+'['+this.getStateErrorMsg(row)+']';
+            return `down:${this.getStateErrorMsg(row)}`
           }
         }
       },
@@ -1120,4 +1124,8 @@
   .project .sidebar-info-item{
     margin:0px !important;
   }
+  .small-pop{
+    width: 25px !important;
+    min-width: unset !important;
+  }
 </style>