From d8748545999ea006a5e25ce5f1da60082330a6bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Mon, 17 Feb 2020 16:32:40 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B0=83=E6=95=B4dashboard=E3=80=81pro?=
 =?UTF-8?q?ject-query=E9=A1=B6=E9=83=A8=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     | 20 +++++++-
 .../components/page/dashboard/chartBox.vue    |  2 +-
 .../page/dashboard/metricPreview.scss         |  2 +-
 .../src/components/page/dashboard/panel.vue   | 18 ++-----
 .../src/components/page/project/project.vue   | 49 ++++++++++---------
 5 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index c6360f143..b6b808cd2 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -359,6 +359,7 @@ li{
   height: calc(90vh - 55px);
   width: 100%;
   padding-top: 24px;
+  font-size: 14px;
 }
 .content-left .sidebar-info-item {
   line-height: 20px;
@@ -436,7 +437,7 @@ li{
   display: flex;
   height: 50px;
   align-items : center;
-  justify-content: space-between
+  justify-content: space-between;
 }
 .top-tools>div {
   margin-top: 2px;
@@ -1097,3 +1098,20 @@ li{
 .green {
   background-color:lightGreen;
 }
+
+/* panel-tool-tip列表搜索框 样式重写*/
+.relative-position{
+  position: relative;
+}
+.query-input-inactive{
+  left:213px;
+  width: 18%;
+  margin-top: 1px;
+}
+.query-input-active {
+  margin-top: 1px;
+}
+.query-input-active .el-input__inner, .query-input-inactive .el-input__inner {
+  height: 25px;
+  line-height: 25px !important;
+}
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 8d143af7c..a052786a7 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -95,7 +95,7 @@
             </div>
           </el-form-item>
           <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
-            <el-input size="mini" maxlength="64" show-word-limit v-model="chart.title"></el-input>
+            <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
           </el-form-item>
 
           <el-row :gutter="10">
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.scss b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
index 01ed7290c..df8fecebd 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
@@ -44,7 +44,7 @@
   input, textarea {
     background-color: $content-right-background-color;
   }
-  .el-input__inner, .el-textarea__inner, .el-input__count {
+  .el-input__inner, .el-textarea__inner {
     background-color: $content-right-background-color;
   }
   .el-textarea {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 9ea09b57b..6aa69911c 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -533,7 +533,7 @@
       },
       focusInput:function(){
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-        classVal=classVal.replace('query-input-inactive','');
+        classVal=classVal.replace('query-input-inactive','query-input-active');
         document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
         this.$refs.queryPanel.focus();
         this.queryFocus=true;
@@ -542,7 +542,7 @@
         if(!this.filter.searchName || this.filter.searchName == ''){
           setTimeout(function(){
             let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-            classVal='query-input-inactive '+classVal;
+            classVal=classVal.replace('query-input-active','query-input-inactive');
             document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
             this.queryFocus=true;
           },100)
@@ -775,18 +775,6 @@
     padding-right: 0;
     vertical-align: top;
   }
-  /* 列表搜索框 样式重写*/
-  .relative-position{
-    position: relative;
-  }
-  .query-input-inactive{
-    left:213px;
-    width: 18%;
-    margin-top: 1px;
-  }
-  .query-input-inactive .el-input__inner{
-    height: 25px;
-    line-height: 25px;
-  }
+
 </style>
 
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index ccb309e4e..4e07770a1 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -1,12 +1,30 @@
 <style lang="scss">
   @import '../../charts/line-chart-block';
-  .project-calendar .el-input__inner {
-       height: 26px !important;
+/*  .project-calendar .el-input__inner {
+       height: 25px !important;
        border-color: #d8d8d8;
-     }
+     }*/
+  .top-tools .el-input__inner {
+    height: 25px !important;
+    border-color: #d8d8d8;
+  }
   .project .nz-table .el-table__row td:first-of-type {
     padding-left: 0;
   }
+  .change-time-height {
+    height: 23px;
+  }
+  .date-pick-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .date-pick-group button:first-of-type {
+    margin-right: 4px;
+  }
+  .date-pick-group button:last-of-type {
+    margin-left: 4px;
+  }
 </style>
 <style scope>
   .chart-bottom {
@@ -164,8 +182,8 @@
               <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput"></i>
             </el-input>
           </div>
-          <div class="margin-r-20 margin-t-m1">
-            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
+          <div class="margin-r-20 date-pick-group">
+            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-left"></i></button>
             <el-date-picker
               v-model="formatTime"
               type="datetime"
@@ -178,7 +196,7 @@
               @change="pickTime"
               >
             </el-date-picker>
-            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-right"></i></button>
+            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-right"></i></button>
           </div>
 
           <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120">
@@ -1189,7 +1207,7 @@
       },
       focusInput:function(){
         let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
-        classVal=classVal.replace('query-input-inactive','');
+        classVal=classVal.replace('query-input-inactive','query-input-active');
         document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
         this.$refs.elementQuery.focus();
       },
@@ -1197,7 +1215,7 @@
         if(!this.queryExpression || this.queryExpression == ''){
           setTimeout(function(){
             let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
-            classVal='query-input-inactive '+classVal;
+            classVal=classVal.replace('query-input-active','query-input-inactive');
             document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
           },100)
         }
@@ -1501,7 +1519,6 @@
   .el-table .disabledCheck .cell .el-checkbox__inner{
     display: none !important;
   }
-
   .el-table .disabledCheck .cell::before{
     content: '';
     text-align: center;
@@ -1509,18 +1526,4 @@
   }
   /* end--覆盖分页组件样式*/
 
-  /* 列表搜索框 样式重写*/
-  .relative-position{
-    position: relative;
-  }
-  .query-input-inactive{
-    left:213px;
-    width: 18%;
-  }
-  .query-input-inactive .el-input__inner{
-    height: 26px;
-    line-height: 26px;
-  }
-
-
 </style>