perf: 优化任务进度的显示方式

src/components/TaskProgress/index.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { getTaskProgress } from '@/api/setting-api'
 import TableList from "@/components/table/TableList"
 import {mapState} from "vuex";
 
@@ -26,6 +27,10 @@ export default {
       type: Array,
       default: []
     },
+    monitor: {
+      type: Boolean,
+      default: false
+    }
   },
   computed: {
     ...mapState(['message'])
@@ -43,21 +48,34 @@ export default {
   },
   watch: {
     data(val) {
-      this.dataList = val
+      if (val) {
+        this.dataList = val
+      }
+    },
+    mounted() {
+      getTaskProgress().then(res => {
+        this.dataList = res.data
+      })
     },
     message(msg) {
-      if (msg.event === 'msg/taskProgress') {
-        const taskProgress = msg.data.body
-        const index = this.dataList.findIndex(item => item.taskId === taskProgress.taskId)
-        if (index > -1) {
-          if (taskProgress.progress) {
-            this.dataList[index].progress = taskProgress.progress
+      if (this.monitor && msg.event === 'msg/taskCountChange') {
+        this.dataList = msg.data
+      } else {
+        if (msg.event === 'msg/taskProgress') {
+          const taskProgress = msg.data.body
+          const index = this.dataList.findIndex(item => item.taskId === taskProgress.taskId)
+          if (index > -1) {
+            if (taskProgress.progress) {
+              this.dataList[index].progress = taskProgress.progress
+            } else {
+              this.dataList.splice(index, 1)
+              this.$store.dispatch('updateMessage', { event: 'msg/taskCountChange', data: this.dataList })
+            }
           } else {
-            this.dataList.splice(index, 1)
-          }
-        } else {
-          if (taskProgress.progress) {
-            this.dataList.push(taskProgress)
+            if (taskProgress.progress) {
+              this.dataList.push(taskProgress)
+              this.$store.dispatch('updateMessage', { event: 'msg/taskCountChange', data: this.dataList })
+            }
           }
         }
       }

src/layout/components/Navbar.vue

@@ -2,8 +2,19 @@
   <div class="navbar">
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <breadcrumb class="breadcrumb-container" />
-
     <div class="right-content">
+
+      <el-popover
+        placement="bottom"
+        width="600"
+        trigger="hover">
+        <TaskProgress/>
+        <div slot="reference" class="right-content-button" v-show="showTaskProgress > 0">
+          <svg-icon icon-class="gengxinjindu" :class="progressExecuting ? 'rotate' : ''"></svg-icon>
+          {{ $t('app.taskProgress') }}
+        </div>
+      </el-popover>
+
       <app-link
        v-for="route in routes.topRouters"
        :key="route.path"
@@ -48,7 +59,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import TaskProgress from '@/components/TaskProgress/index.vue'
+import { mapGetters, mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import Icon from '@/components/Icon/Icon.vue'
@@ -62,10 +74,14 @@ export default {
       isShow: true,
       activeIndex: '1',
       imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
-      defaultAvatar: require('../../assets/img/default-avatar.png')
+      defaultAvatar: require('../../assets/img/default-avatar.png'),
+      showTaskProgress: false,
+      progressExecuting: false,
+      delayedHidden: null
     }
   },
   components: {
+    TaskProgress,
     Icon,
     Breadcrumb,
     Hamburger,
@@ -78,6 +94,7 @@ export default {
       'showName',
       'newVersion'
     ]),
+    ...mapState(['message']),
     routes() {
       let routes = {}
       let topRouters = []
@@ -98,6 +115,13 @@ export default {
   mounted() {
     this.isShow = this.$pc;
   },
+  watch: {
+    message(msg) {
+      if (msg.event === 'msg/taskCountChange') {
+        this.taskCountChange(msg.data.length)
+      }
+    }
+  },
   methods: {
     handleSelect(key, keyPath) {
     },
@@ -116,6 +140,25 @@ export default {
         return this.basePath
       }
       return path.resolve(this.basePath, routePath)
+    },
+    taskCountChange(count) {
+      if (count > 0) {
+        clearTimeout(this.delayedHidden)
+        this.showTaskProgress = true
+        this.progressExecuting = true
+      }
+      if (count <= 0 && this.progressExecuting) {
+        this.progressExecuting = false
+      }
+      if (count <= 0 && this.showTaskProgress) {
+        if (this.delayedHidden != null) {
+          clearTimeout(this.delayedHidden)
+          this.delayedHidden = null
+        }
+        this.delayedHidden = setTimeout(() => {
+          this.showTaskProgress = false
+        }, 5000)
+      }
     }
   }
 }
@@ -220,7 +263,7 @@ export default {
       }
     }
     &:hover {
-      background-color: #00000006;
+      background-color: #d9d9d980;
     }
   }
 }
@@ -240,10 +283,11 @@ export default {
 }
 
 .right-content-button {
+  cursor: pointer;
   line-height: 50px;
   padding: 0 10px;
   &:hover {
-    background-color: #00000006;
+    background-color: #d9d9d980;
   }
 }
 
@@ -252,4 +296,17 @@ export default {
     margin-right: 5px;
   }
 }
+.rotate {
+  animation: rotate 2s linear infinite;
+  color: #409eff;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

src/layout/components/Sidebar/Item.vue

@@ -10,6 +10,10 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    rotate: {
+      type: Boolean,
+      default: false
     }
   },
   render(h, context) {
@@ -17,7 +21,11 @@ export default {
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      if (context.props.rotate) {
+        vnodes.push(<svg-icon icon-class={icon} class="rotate"/>)
+      } else {
+        vnodes.push(<svg-icon icon-class={icon}/>)
+      }
     }
 
     if (title) {
@@ -27,3 +35,18 @@ export default {
   }
 }
 </script>
+<style scoped>
+.rotate {
+  animation: rotate 2s linear infinite;
+  color: #409eff;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -4,7 +4,7 @@
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <el-badge value="new" v-if="item.path === '/setting/cloudManager' && newVersion" class="new-version"/>
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title"/>
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :rotate="item.path === '/setting/taskProgress' && showTaskProgress" :title="onlyOneChild.meta.title"/>
         </el-menu-item>
       </app-link>
     </template>
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import path from 'path'
 import { isExternal } from '@/utils/validate'
 import Item from './Item'
@@ -54,12 +54,22 @@ export default {
   },
   data() {
     this.onlyOneChild = null
-    return {}
+    return {
+      showTaskProgress: false
+    }
   },
   computed: {
     ...mapGetters([
       'newVersion'
     ]),
+    ...mapState(['message'])
+  },
+  watch: {
+    message(msg) {
+      if (msg.event === 'msg/taskCountChange') {
+        this.taskCountChange(msg.data.length)
+      }
+    }
   },
   methods: {
     hasOneShowingChild(children = [], parent) {
@@ -94,6 +104,14 @@ export default {
         return this.basePath
       }
       return path.resolve(this.basePath, routePath)
+    },
+    taskCountChange(count) {
+      if (count > 0 && !this.showTaskProgress) {
+        this.showTaskProgress = true
+      }
+      if (count <= 0 && this.showTaskProgress) {
+        this.showTaskProgress = false
+      }
     }
   }
 }

src/locales/en_US.js

@@ -69,5 +69,7 @@ export default {
     startSync: 'Start scanning? ',
     confirmDeleteMenuAndRole: 'Are you sure you want to delete the current role and menu? ',
     resetSuccessfully: 'Reset successfully',
+
+    taskProgress: 'Task Progress',
   }
 }

src/locales/zh_CN.js

@@ -69,5 +69,7 @@ export default {
     startSync: '是否开始扫描? ',
     confirmDeleteMenuAndRole: '您确定要删除当前角色、菜单吗? ',
     resetSuccessfully: '重置成功',
+
+    taskProgress: '任务进度',
   }
 }

src/views/setting/taskProgress.vue

@@ -19,7 +19,7 @@
           </div>
           <el-divider></el-divider>
         </div>
-        <task-progress :data="taskProgressDataList"></task-progress>
+        <TaskProgress monitor/>
       </div>
     </el-card>
   </div>
@@ -28,7 +28,7 @@
 <script>
 
 import TaskProgress from "@/components/TaskProgress/index.vue";
-import { getTaskProgress, getTranscodeStatus } from '@/api/setting-api'
+import { getTranscodeStatus } from '@/api/setting-api'
 import { mapState } from 'vuex'
 
 export default {
@@ -43,9 +43,6 @@ export default {
     }
   },
   mounted() {
-    getTaskProgress().then(res => {
-      this.taskProgressDataList = res.data
-    })
     getTranscodeStatus().then(res => {
       this.transcodeStatus = res.data
     })