From ff7cb3011a476d8b2531ff0fcf13303caea049b0 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 25 Sep 2020 17:08:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=86=8D=E6=AC=A1=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=20&=20panel=E4=B8=8B=E6=8B=89=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/leftMenu.vue        | 13 +++++---
 .../src/components/page/dashboard/panel.vue   | 30 ++++++++++++++++---
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index f54e17f24..e49c4f23c 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -136,7 +136,7 @@
         <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}">
-      <router-view/>
+      <router-view v-if="isRouterAlive"/>
     </div>
 
     <transition name="right-box">
@@ -187,6 +187,7 @@
           tagCheckMap:{},
           lastCheckSize:0,
           assetPingSwitch:true,
+          isRouterAlive: true
         }
       },
       computed: {
@@ -619,15 +620,19 @@
           }
         },
         jumpTo(route) {
-          /*bus.$emit("menu-change", route);
-          localStorage.setItem('nz-parent-menu', this.parentMenu);
-          localStorage.setItem('nz-menu-change', route);*/
+          if(route == this.route){
+            this.reload();
+          }
           this.$router.push({
             path: route,
             query: {
               t: +new Date()
             }
           });
+        },
+        reload () {
+          this.isRouterAlive = false
+          this.$nextTick(() => (this.isRouterAlive = true))
         }
       },
     }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 6b086e04e..1acf67fb5 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -6,13 +6,19 @@
       </div>
       <template v-else>
         <div class="top-tool-main-left">
-          <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
+          <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown >
             <el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
               <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="nz-icon nz-icon-arrow-down"></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>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>-->
+              <el-dropdown-item >
+                <el-row class="panel-list-width" :gutter="10" >
+                  <el-col :span="21"><el-input size="mini" v-model="filterPanel"  @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable :placeholder="$t('overall.search')"></el-input></el-col>
+                  <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd"><i class="nz-icon nz-icon-plus"></i></span></el-col>
+                </el-row>
+              </el-dropdown-item>
               <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
                          :scroll-sensitivity="150"
                          :options="{
@@ -27,7 +33,7 @@
                animation:150,
                handle:'.panelContent',
              }"  >
-                <el-dropdown-item v-for="item in panelData" :key="item.id+1" class="panel-title-li"
+                <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
                                   :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
                   <!--{{item.name}}-->
                   <el-row  :gutter="10" class="panel-list-width" >
@@ -164,6 +170,8 @@
           searchName: ''
         },
         panelId: 0,
+        filterPanel:'',
+        showPanelList:[],
         //---图表相关参数--end
       }
     },
@@ -186,7 +194,6 @@
       //面板相关操作
       panelChange(val) {
         if (!val) {
-          this.toAdd();
           return false;
         }
         this.filter.searchName='';
@@ -375,6 +382,7 @@
         this.$get('panel').then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
+            this.showPanelList = this.panelData;
             for (let i = 0; i < this.panelData.length; i++) {
               if (this.panelData[i].id == this.showPanel.id) {
                 this.showPanel.name = this.panelData[i].name;
@@ -388,6 +396,7 @@
         this.$get('panel?type=dashboard').then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
+            this.showPanelList = this.panelData;
             this.dataTotalListBak=[...response.data.list]
             let isInitData = false;
             if (response.data.list.length > 0) {
@@ -652,6 +661,18 @@
         panelContent.style.background = '#d8dce1';
 
       },
+      filterPanelFocus:function(e){
+        e.stopPropagation();
+      },
+      filterPanelFunc:function(){
+        let $self=this;
+        if($self.filterPanel&&$self.filterPanel.trim() != ''){
+          this.showPanelList=this.panelData.filter(item=>item.name.toLowerCase().indexOf($self.filterPanel.toLowerCase()) != -1)
+        }else{
+          this.showPanelList = this.panelData;
+        }
+
+      }
     },
     created() {
       this.getTableData();
@@ -686,6 +707,7 @@
 
   .panel-list-width {
     width:240px;
+    overflow: hidden;
   }
 
   .panel-dropdown-title {