From 18a4ceb020f5a95b43e069bb7a4c43a300d1df41 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Thu, 13 Feb 2020 13:10:42 +0800
Subject: [PATCH] =?UTF-8?q?pref:endpoint=20=E6=9C=80=E6=96=B0=E6=8C=87?=
 =?UTF-8?q?=E6=A0=87=E5=88=97=E8=A1=A8=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/page/project/project.vue   | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 13e463ee8..24e978869 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -158,9 +158,9 @@
         </div>
         <!--时间选择器-->
         <div class="top-tool-right">
-          <div class="top-tool-search">
+          <div class="top-tool-search" >
 <!--            <metric-search :metrics="metricList" :labels="labelList"  v-if="tableShow == 3" @expression-change="tableFilter"></metric-search>-->
-            <el-input id="elementQuery" v-model="queryExpression" suffix-icon="el-icon-search" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" ></el-input>
+            <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" suffix-icon="el-icon-search" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" ></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>
@@ -1184,6 +1184,21 @@
             }
 
         }
+      },
+      queryInputInitStyle:function(){
+        document.getElementById('elementQuery').parentElement.style.width='40px';
+        document.getElementById('elementQuery').parentElement.style.float='right';
+      },
+      focusInput:function(){
+        document.getElementById('elementQuery').parentElement.style='';
+      },
+      blurInput:function(){
+        if(!this.queryExpression || this.queryExpression == ''){
+          setTimeout(this.queryInputInitStyle(),100)
+        }
+      },
+      clearInput:function(){
+        this.blurInput();
       }
     },
     created() {
@@ -1203,6 +1218,7 @@
       this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.endpointTableTitle;
+      this.queryInputInitStyle();
     },
     computed: {
       currentProjectChange() {
@@ -1488,12 +1504,4 @@
     line-height: 37px;
   }
   /* end--覆盖分页组件样式*/
-  .query-inactive{
-    border: 1px solid #dfdfdf;
-    background-color: #dfdfdf;
-    border-radius:20%;
-    width: 40px;
-    height: 26px;
-    padding: 2px 10px 2px 10px;
-  }
 </style>