NEZ-1514 feat:全局搜索功能

2022-01-17 16:32:00 +08:00
parent 7f6c7c504c
commit cc73e85860
14 changed files with 82 additions and 21 deletions
--- a/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss
+++ b/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;
+}
--- a/nezha-fronted/src/assets/css/components/common/globalSearch/searchItemInfo.scss
+++ b/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;
--- a/nezha-fronted/src/components/chart/chartDetail.vue
+++ b/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)
--- a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
+++ b/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)
--- a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
+++ b/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) {
+      if (key === 'pingInfo.rtt' && str && str !== '--') {
        str += ' ms'
      }
      if (key === 'type' && this.obj.type === 'alertrule') {
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/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);
  }
 }
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/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(',')}}
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/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>
--- a/nezha-fronted/src/components/layout/container.vue
+++ b/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 () {
-    return {
+  computed: {
+    isRouteLive () {
+      return this.$store.getters.getIsRouteLive
    }
  }
 }
--- a/nezha-fronted/src/store/index.js
+++ b/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
    }