NEZ-1514 feat:全局搜索功能

nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss

@@ -14,14 +14,14 @@
 }
 .global-search-box.search-after{
   height: 82%;
-  min-height: 894px;
+  min-height: 600px;
 }
 .global-search-box {
   //background: $--background-color-empty;
   background: rgba(0,0,0,0);
   width: 80%;
   max-width: 1040px;
-  min-width: 894px;
+  min-width: 600px;
   height: auto;
   display: flex;
   flex-direction: column;
@@ -48,6 +48,7 @@
       height: 40px;
       line-height: 72px;
       color: $--color-text-regular;
+      padding-left: 0;
       vertical-align: middle;
     }
     .global-search-cancel{
@@ -118,7 +119,7 @@
         }
         .is-jump{
           position: absolute;
-          right: 20px;
+          right: 5px;
           top: 20px;
           padding: 0;
           width: 24px;
@@ -132,6 +133,10 @@
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          padding-right: 30px;
+          .nz-icon {
+            margin-right: 15px;
+          }
           .list-item-highlight{
             background: none;
             color: $--color-primary;
@@ -142,7 +147,7 @@
           color: $--color-info;
           font-weight: 400;
           margin-top: 2px;
-          padding-left: 40px;
+          padding-left: 55px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -207,3 +212,6 @@
     }
   }
 }
+.fz12{
+  font-size: 12px;
+}

nezha-fronted/src/assets/css/components/common/globalSearch/searchItemInfo.scss

@@ -8,6 +8,10 @@
   align-items: center;
   box-sizing: border-box;
   padding: 60px 75px 0 75px;
+  .el-skeleton{
+    height: 100%;
+    overflow-y: auto;
+  }
   .search-item-title-icon{
     .nz-icon{
       font-size: 32px;

nezha-fronted/src/components/chart/chartDetail.vue

@@ -162,7 +162,6 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        console.log(n.fields)
         n.fields.map(e => {
           if (e.name === 'time') {
             e.value[0] = bus.timeFormate(e.value[0], this.timeFormatMain)

nezha-fronted/src/components/common/globalSearch/globalSearch.vue

@@ -3,7 +3,7 @@
     <div class="global-search-box" :class="firstShow? '' : 'search-after'" @click.self="close">
       <div class="global-search-input" :class="firstShow? '' : 'search-after'">
         <i class="nz-icon nz-icon-search" v-loading="loading"></i>
-        <el-input v-model="searchStr" @input="searchAll" ref="searchStr" :placeholder="$t('globalSearch.placeholder')"  clearable></el-input>
+        <el-input v-model="searchStr" @input="searchAll" ref="searchStr" :placeholder="$t('globalSearch.placeholder')" @keydown="inputKeydown" @keyup="inputKeydown" @keypress="inputKeydown"  clearable></el-input>
         <div @click="close" class="global-search-cancel">
           Cancel
         </div>
@@ -49,6 +49,7 @@
                     :key="index"
                     :ref="'item'+ index"
                     @mouseenter="changeSelectIndex(index)"
+                    @click="jumpTo"
                   >
                     <div class="list-item-content">
                       <i class="nz-icon" :class="selectIcon(item)" />
@@ -150,7 +151,7 @@ export default {
       // scope: ['asset', 'datacenter', 'project', 'module', 'endpoint', 'alertrule'],
       scope: [
         {
-          type: 'asseet',
+          type: 'asset',
           isSelect: true
         }, {
           type: 'datacenter',
@@ -207,7 +208,7 @@ export default {
     selectIcon (item) {
       switch (item.type) {
         case 'asset' : return 'nz-icon-overview-project'
-        case 'datacenter' : return 'nz-icon-model'
+        case 'datacenter' : return 'nz-icon-datacenter1'
         case 'project' : return 'nz-icon-project'
         case 'module' : return 'nz-icon-overview-module'
         case 'endpoint' : return 'nz-icon-overview-endpoint'
@@ -249,6 +250,11 @@ export default {
       this.selectIndex = index
       this.getItemInfo()
     },
+    inputKeydown (e) {
+      if (e.keyCode === 40 || e.keyCode === 38) {
+        event.preventDefault()
+      }
+    },
     keyDown (e) {
       if (this.jumpLoading) {
         return
@@ -299,6 +305,7 @@ export default {
       this.$get('/stat/rownum', params).then(res => {
         if (res.code === 200) {
           this.close()
+          this.$store.commit('setGlobalSearchId', params.id)
           this.$router.push({
             path: routerPath.route,
             query: {
@@ -307,6 +314,10 @@ export default {
               rownum: res.data.rownum
             }
           })
+          if (routerPath.route === this.$route.path) {
+            this.$store.commit('setIsRouteLive')
+            // this.routeReload()
+          }
         } else {
           this.$message.error(res.msg)
           this.jumpLoading = false
@@ -342,7 +353,7 @@ export default {
     getItemInfo () {
       this.obj = {}
     },
-    searchAll () {
+    searchAll (e) {
       // this.getSeverityData()
       if (this.searchTimer) {
         clearInterval(this.searchTimer)

nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue

@@ -59,7 +59,7 @@
             <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
           </div>
           <div class="search-item-value-box" v-else>
-            <i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
+            <i v-if="item.icon&&getPathContent(item.key)!=='--'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
             <span class="search-item-value">
           {{getPathContent(item.key)}}
         </span>
@@ -122,7 +122,7 @@ export default {
             label: this.$t('overall.state')
           }, {
             key: 'pingInfo.rtt',
-            icon: 'active-icon',
+            icon: 'nz-icon nz-icon-circle fz12',
             label: 'Ping'
           }, {
             key: 'dc.name',
@@ -264,7 +264,7 @@ export default {
             key: 'severityId',
             label: this.$t('alert.severity'),
             color: this.severityColor,
-            icon: 'nz-icon nz-icon-circle'
+            icon: 'nz-icon nz-icon-circle fz12'
           }, {
             key: 'expr',
             label: this.$t('alert.config.expr')
@@ -279,7 +279,7 @@ export default {
           }, {
             key: 'state',
             label: this.$t('overall.state'),
-            icon: 'nz-icon nz-icon-circle'
+            icon: 'nz-icon nz-icon-circle fz12'
           }
         ]
       },
@@ -365,7 +365,7 @@ export default {
         str += this.alertLabelData[item.key] ? 'red' : 'green'
       }
       if (item.key === 'pingInfo.rtt') {
-        str += this.alertLabelData.pingInfo.status ? 'red-bg' : 'green-bg'
+        str += this.alertLabelData.pingInfo && this.alertLabelData.pingInfo.status ? 'red' : 'green'
       }
       if (item.key === 'state' && this.obj.type === 'alertrule') {
         str += !this.alertLabelData.state ? 'red' : 'green'
@@ -391,8 +391,7 @@ export default {
     },
     getPathContent (key) {
       let str = lodash.get(this.alertLabelData, key, '--')
-      str += ''
+      if (key === 'pingInfo.rtt' && str && str !== '--') {
-      if (key === 'pingInfo.rtt' && str) {
         str += ' ms'
       }
       if (key === 'type' && this.obj.type === 'alertrule') {

nezha-fronted/src/components/common/mixin/table.js

@@ -96,6 +96,23 @@ export default {
           }
         }
       }
+    },
+    tableData: {
+      immediate: true,
+      handler (n) {
+        if (n && n.length) {
+          const id = this.$store.getters.getGlobalSearchId
+          if (id) {
+            setTimeout(() => {
+              if (document.getElementById('globalSearch' + id)) {
+                document.getElementById('globalSearch' + id).scrollIntoView(true)
+                this.$store.commit('setGlobalSearchId', '')
+              }
+            }, 500)
           }
         }
       }
+    }
+  //  document.querySelector("#header").scrollIntoView(true);
+  }
+}

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -108,6 +108,7 @@
             </div>
           </el-popover>
         </template>
+        <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
       </template>

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -103,6 +103,7 @@
         </template>
         <template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
         <template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '-'}}</template>
+        <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <template v-else>
           <span v-if="scope.row.fields&&scope.row.fields.find(field => field.name === item.prop)">
             {{scope.row.fields.find(field => field.name === item.prop).value.join(',')}}

nezha-fronted/src/components/common/table/settings/dcTable.vue

@@ -77,6 +77,7 @@
             {{scope.row[item.prop]}}
           </span>
         </template>
+        <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
         <template v-else>-</template>
       </template>

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -155,6 +155,7 @@
           <span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
           <span v-else>{{$t('project.endpoint.disable')}}</span>
         </template>
+        <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -56,6 +56,7 @@
             {{scope.row[item.prop]}}
           </span>
         </template>
+        <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -59,6 +59,7 @@
             {{scope.row[item.prop]}}
           </span>
         </template>
+        <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
     </el-table-column>

nezha-fronted/src/components/layout/container.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="container">
-    <router-view/>
+    <router-view v-if="isRouteLive"/>
   </div>
 </template>
 
 <script>
 export default {
   name: 'container',
-  data () {
+  computed: {
-    return {
+    isRouteLive () {
+      return this.$store.getters.getIsRouteLive
     }
   }
 }

nezha-fronted/src/store/index.js

@@ -41,9 +41,14 @@ const store = new Vuex.Store({
     langList: [],
     i18nReady: false,
     timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss',
-    globalShow: false
+    globalShow: false,
+    globalSearchId: '',
+    isRouteLive: true
   },
   getters: {
+    getGlobalSearchId (state) {
+      return state.globalSearchId
+    },
     getTimeFormatMain (state) {
       return state.timeFormatMain
     },
@@ -86,6 +91,9 @@ const store = new Vuex.Store({
     getLangList (state) {
       return state.langList
     },
+    getIsRouteLive (state) {
+      return state.isRouteLive
+    },
     i18nIsReady (state) {
       return state.i18nReady
     }
@@ -98,7 +106,9 @@ const store = new Vuex.Store({
     currentProjectChange (state, project) {
       state.currentProject = project
     },
-
+    setGlobalSearchId (state, id) {
+      state.globalSearchId = id
+    },
     panelShowPanelChange (state, panel) { // 用来panel页控制初始panel的
       state.showPanel.id = panel.id
       state.showPanel.name = panel.name
@@ -181,6 +191,12 @@ const store = new Vuex.Store({
     setGlobalShow (state, globalShow) {
       state.globalShow = globalShow
     },
+    setIsRouteLive (state) {
+      state.isRouteLive = false
+      setTimeout(() => {
+        state.isRouteLive = true
+      })
+    },
     i18nReady (state, ready) {
       state.i18nReady = ready
     }