feat: 网盘设置界面新增视频转码或OCR识别的任务进度

src/api/setting-api.js

@@ -103,3 +103,11 @@ export function getHeartwings(params) {
     params
   })
 }
+
+export function getTaskProgress(params) {
+  return request({
+    url: '/cloud/task/progress',
+    method: 'get',
+    params
+  })
+}

src/components/TaskProgress/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="container">
+    <table-list
+      ref="tableList"
+      :less-client-height="245"
+      :tableData="dataList"
+      :loading="loading"
+      :hasSelection="false"
+      :border="false"
+      :tableHeader="tableHeader"
+    ></table-list>
+  </div>
+</template>
+
+<script>
+import TableList from "@/components/table/TableList"
+import {mapState} from "vuex";
+
+export default {
+  name: 'TaskProgress',
+  components: {
+    TableList
+  },
+  props: {
+    data: {
+      type: Array,
+      default: []
+    },
+  },
+  computed: {
+    ...mapState(['message'])
+  },
+  data() {
+    return {
+      dataList: [],
+      loading: false,
+      tableHeader: [
+        {prop: 'type', width: 100, label: '任务类型'},
+        {prop: 'name', minWidth: 100, label: '名称'},
+        {prop: 'progress', width: 100, label: '进度'},
+      ]
+    }
+  },
+  watch: {
+    data(val) {
+      console.log('data', val)
+      this.dataList = val
+    },
+    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
+          } else {
+            this.dataList.splice(index, 1)
+          }
+        } else {
+          if (taskProgress.progress) {
+            this.dataList.push(taskProgress)
+          }
+        }
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/sse/SSEClient.js

@@ -55,6 +55,8 @@ function onMessage(msg) {
   const url = msg.url
   if (url === 'synced') {
     store.dispatch('updateMessage', {event: 'msg/synced', data: msg})
+  } else if (url === 'taskProgress') {
+    store.dispatch('updateMessage', {event: 'msg/taskProgress', data: msg})
   } else if (url === 'uploaderChunkSize') {
     store.dispatch('updateMessage', {event: 'uploaderChunkSize', data: msg.body})
   } else {

src/views/setting/cloudManager.vue

@@ -124,13 +124,25 @@
         </el-tabs>
       </div>
     </el-card>
+    <el-card class="box-card">
+      <div slot="header">
+        <div class="box-card-header">
+          <div class="clearfix card-header-back">
+            <span>任务进度</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <task-progress :data="taskProgressDataList"></task-progress>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 
 import config from '@/../package.json'
-import settingApi, {getSetting} from "@/api/setting-api";
+import settingApi, { getSetting, getTaskProgress } from "@/api/setting-api";
 import Logo from "@/components/Logo";
 import getPageTitle from "@/utils/get-page-title";
 import UploadImageInput from "@/components/input/UploadImageInput.vue";
@@ -138,9 +150,10 @@ import roleApi from "@/api/role";
 import { loadLdapConfig, testLdapConfig, updateLdapConfig} from '@/api/user'
 import {mapGetters, mapState} from "vuex";
 import store from "@/store";
+import TaskProgress from "@/components/TaskProgress/index.vue";
 
 export default {
-  components: {UploadImageInput, Logo},
+  components: {TaskProgress, UploadImageInput, Logo},
   data() {
     return {
       activeName: '1',
@@ -150,6 +163,7 @@ export default {
       clickSync: false,
       indexingPercent: 100,
       syncPercent: 100,
+      taskProgressDataList: [],
       resetLoading: false,
       webpEnabled: false,
       logoFileName: '',
@@ -208,6 +222,10 @@ export default {
         this.getLdapConfig()
       }
     }
+    getTaskProgress().then(res => {
+      this.taskProgressDataList = res.data
+      this.taskProgressChange(this.taskProgressDataList.length)
+    })
   },
   computed: {
     ...mapState(['message']),
@@ -405,7 +423,7 @@ export default {
       }).catch(() => {
         this.webpEnabled = !this.webpEnabled
       })
-    }
+    },
   }
 }
 </script>