系统资源查找功能调整

src/layout/header-aside/components/header-search-feature/index.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="header-search-feature">
+        <el-autocomplete
+            ref="input"
+            v-model="searchText"
+            class="custom-autocomplete"
+            suffix-icon="el-icon-search"
+            placeholder="功能查找"
+            :fetch-suggestions="querySearch"
+            :trigger-on-focus="false"
+            :popper-append-to-body="false"
+            clearable
+            @clear="handleClear"
+            @select="handleSelect"
+        >
+            <ibps-panel-search-item slot-scope="{ item }" :item="item" />
+        </el-autocomplete>
+    </div>
+</template>
+
+<script>
+import IbpsPanelSearchItem from '../panel-search/components/panel-search-item/index.vue'
+import { mapState } from 'vuex'
+import mixin from '../mixin/menu'
+import Fuse from 'fuse.js'
+export default {
+    components: {
+        IbpsPanelSearchItem
+    },
+    mixins: [mixin],
+    data () {
+        return {
+            searchText: '',
+            results: []
+        }
+    },
+    computed: {
+        ...mapState('ibps/search', [
+            'hotkey',
+            'pool'
+        ]),
+        // 根据 pool 更新 fuse 实例
+        fuse () {
+            return new Fuse(this.pool, {
+                shouldSort: true,
+                tokenize: true,
+                threshold: 0.6,
+                location: 0,
+                distance: 100,
+                maxPatternLength: 32,
+                minMatchCharLength: 1,
+                keys: [
+                    'fullTitle',
+                    'path'
+                ]
+            })
+        }
+    },
+    methods: {
+        /**
+     * @description 接收用户在下拉菜单中选中事件
+     */
+        async handleSelect ({ path }) {
+            // 如果用户选择的就是当前页面 就直接关闭搜索面板
+            if (path === this.$route.path) {
+                this.handleEsc()
+                return
+            }
+            // 用户选择的是其它页面
+            await this.$nextTick()
+            this.handleMenuSelect(path)
+        },
+        /**
+     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
+     */
+        querySearch (queryString, callback) {
+            const results = this.fuse.search(queryString).map(e => e.item)
+            this.results = results
+            callback(results)
+        },
+        /**
+     * @augments 接收用户触发的关闭
+     */
+        async handleEsc () {
+            this.closeSuggestion()
+            await this.$nextTick()
+            this.$emit('close')
+        },
+        closeSuggestion () {
+            if (this.$refs.input.activated) {
+                this.$refs.input.suggestions = []
+                this.$refs.input.activated = false
+            }
+        },
+        handleClear () {
+            // 清空输入框后手动让输入框失焦
+            document.activeElement.blur()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-search-feature {
+    .custom-autocomplete  ::v-deep .el-autocomplete-suggestion{
+        width: auto !important;
+    }
+}
+
+</style>

src/layout/header-aside/layout.vue

@@ -80,6 +80,7 @@
 
                 <!-- 顶栏右侧 -->
                 <div class="ibps-header-right" flex-box="0">
+                    <IbpHeaderSearchFeature></IbpHeaderSearchFeature>
                     <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$nodeEnv === 'development'" -->
                     <!-- 全局搜索放大镜、日志、环境切换、全屏 -->
                     <!-- <ibps-header-search @click="handleSearchClick" /> -->
@@ -96,7 +97,7 @@
 
                     <!-- <ibps-header-clean-cache v-if="isSuper" type="platform" />
                     <ibps-header-clean-cache v-if="isSuper" type="form" /> -->
-                    <ibps-header-tools :isSuper="isSuper" />
+                    <ibps-header-tools :is-super="isSuper" />
                     <!-- <ibps-header-clean-cache v-if="isSuper" type="oauth" />
                     <ibps-header-clean-cache v-if="isSuper" type="office" /> -->
 
@@ -200,12 +201,12 @@ import IbpsHeaderErrorLog from './components/header-error-log'
 import IbpsHeaderBaseUrl from './components/header-base-url'
 import IbpsHeaderCleanCache from './components/header-clean-cache'
 import IbpsHeaderTools from './components/header-tools'
+import IbpHeaderSearchFeature from './components/header-search-feature'
 // import IbpsHeaderDownload from './components/header-download'
 import IbpsNotifyMonitor from '@/business/platform/socket/notify-monitor'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import mixinSearch from './mixins/search'
 import mixinLock from './mixins/lock'
-
 import setting from '@/setting.js'
 import { f } from 'vue-grid-layout'
 export default {
@@ -233,7 +234,8 @@ export default {
         IbpsHeaderCleanCache,
         IbpsHeaderTools,
         // IbpsHeaderDownload,
-        IbpsNotifyMonitor
+        IbpsNotifyMonitor,
+        IbpHeaderSearchFeature
     },
     mixins: [mixinSearch, mixinLock],
     data () {
@@ -302,7 +304,7 @@ export default {
             this.$router.push({ path: '/' })
         },
         pageChange () {
-            
+
         },
         /**
          * 接收点击切换侧边栏的按钮

src/layout/header-aside/mixins/search.js

@@ -3,64 +3,64 @@ import { mapState, mapMutations } from 'vuex'
 import hotkeys from 'hotkeys-js'
 
 export default {
-  components: {
-    'ibps-panel-search': () => import('../components/panel-search')
-  },
-  mounted() {
-    // 绑定搜索功能快捷键 [ 打开 ]
-    hotkeys(this.searchHotkey.open, event => {
-      event.preventDefault()
-      this.searchPanelOpen()
-    })
-    // 绑定搜索功能快捷键 [ 关闭 ]
-    hotkeys(this.searchHotkey.close, event => {
-      event.preventDefault()
-      this.searchPanelClose()
-    })
-  },
-  beforeDestroy() {
-    hotkeys.unbind(this.searchHotkey.open)
-    hotkeys.unbind(this.searchHotkey.close)
-  },
-  computed: {
-    ...mapState('ibps', {
-      searchActive: state => state.search.active,
-      searchHotkey: state => state.search.hotkey
-    })
-  },
-  methods: {
-    ...mapMutations({
-      searchToggle: 'ibps/search/toggle',
-      searchSet: 'ibps/search/set'
-    }),
-    /**
-     * 接收点击搜索按钮
-     */
-    handleSearchClick() {
-      this.searchToggle()
-      if (this.searchActive) {
-        setTimeout(() => {
-          if (this.$refs.panelSearch) {
-            this.$refs.panelSearch.focus()
-          }
-        }, 500)
-      }
+    components: {
+        'ibps-panel-search': () => import('../components/panel-search')
     },
-    searchPanelOpen() {
-      if (!this.searchActive) {
-        this.searchSet(true)
-        setTimeout(() => {
-          if (this.$refs.panelSearch) {
-            this.$refs.panelSearch.focus()
-          }
-        }, 500)
-      }
+    mounted () {
+        // 绑定搜索功能快捷键 [ 打开 ]
+        hotkeys(this.searchHotkey.open, event => {
+            //   event.preventDefault()
+            //   this.searchPanelOpen()
+        })
+        // 绑定搜索功能快捷键 [ 关闭 ]
+        hotkeys(this.searchHotkey.close, event => {
+            //   event.preventDefault()
+            //   this.searchPanelClose()
+        })
     },
-    // 关闭搜索面板
-    searchPanelClose() {
-      if (this.searchActive) {
-        this.searchSet(false)
-      }
+    beforeDestroy () {
+        hotkeys.unbind(this.searchHotkey.open)
+        hotkeys.unbind(this.searchHotkey.close)
+    },
+    computed: {
+        ...mapState('ibps', {
+            searchActive: state => state.search.active,
+            searchHotkey: state => state.search.hotkey
+        })
+    },
+    methods: {
+        ...mapMutations({
+            searchToggle: 'ibps/search/toggle',
+            searchSet: 'ibps/search/set'
+        }),
+        /**
+         * 接收点击搜索按钮
+         */
+        handleSearchClick () {
+            this.searchToggle()
+            if (this.searchActive) {
+                setTimeout(() => {
+                    if (this.$refs.panelSearch) {
+                        this.$refs.panelSearch.focus()
+                    }
+                }, 500)
+            }
+        },
+        searchPanelOpen () {
+            if (!this.searchActive) {
+                this.searchSet(true)
+                setTimeout(() => {
+                    if (this.$refs.panelSearch) {
+                        this.$refs.panelSearch.focus()
+                    }
+                }, 500)
+            }
+        },
+        // 关闭搜索面板
+        searchPanelClose () {
+            if (this.searchActive) {
+                this.searchSet(false)
+            }
+        }
     }
-  }
 }

src/views/component/device/maintenanceStatic.vue

@@ -49,6 +49,9 @@
                         <div class="red-circle" />
                         <span>全部未完成</span>
                     </div>
+                    <div class="item-time">
+                        <span>统计时间：{{ curTime }}</span>
+                    </div>
                 </div>
                 <div class="table">
                     <div class="column">
@@ -120,6 +123,7 @@ export default {
         }
         const { userId, position, level } = this.$store.getters
         return {
+            curTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
             pickerOptions: {
                 disabledDate (time) {
                     return time.getTime() > Date.now()
@@ -393,6 +397,10 @@ export default {
             padding:20px;
             overflow-y: auto;
             .agend{
+                .item-time{
+                    margin-left: 40px;
+                    width: 200px;
+                }
                 margin: 20px 0 10px 0;
                 display: flex;
                 .item{

src/views/component/device/maintenanceStaticAll.vue

@@ -58,20 +58,26 @@
                         </div>
                     </div>
                 </div>
-                <div class="agend">
-                    <div class="item">
-                        <div class="green-circle" />
-                        <span>全部完成</span>
-                    </div>
-                    <div class="item">
-                        <div class="orange-circle" />
-                        <span>部分完成</span>
-                    </div>
-                    <div class="item">
-                        <div class="red-circle" />
-                        <span>全部未完成</span>
+                <div class="hearder">
+                    <div class="agend">
+                        <div class="item">
+                            <div class="green-circle" />
+                            <span>全部完成</span>
+                        </div>
+                        <div class="item">
+                            <div class="orange-circle" />
+                            <span>部分完成</span>
+                        </div>
+                        <div class="item">
+                            <div class="red-circle" />
+                            <span>全部未完成</span>
+                        </div>
+                        <div class="item-time">
+                            <span>统计时间：{{ curTime }}</span>
+                        </div>
                     </div>
                 </div>
+
                 <div class="table">
                     <div class="column">
                         <div class="item">设备名称/日期</div>
@@ -154,6 +160,7 @@ export default {
                     return time.getTime() > Date.now()
                 }
             },
+            curTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
             deviceNo: '',
             deviceName: '',
             monthList: monthList,
@@ -442,6 +449,10 @@ export default {
             .agend{
                 margin: 20px 0 10px 0;
                 display: flex;
+                .item-time{
+                    margin-left: 40px;
+                    width: 200px;
+                }
                 .item{
                     width: 100px;
                     display: flex;