From 546697eee8c7c2f892dd4e667832cd066583757d Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 5 Jun 2024 19:47:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E7=9B=98=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91=E8=BD=AC?=
 =?UTF-8?q?=E7=A0=81=E6=88=96OCR=E8=AF=86=E5=88=AB=E7=9A=84=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E8=BF=9B=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/setting-api.js                |  8 +++
 src/components/TaskProgress/index.vue | 73 +++++++++++++++++++++++++++
 src/sse/SSEClient.js                  |  2 +
 src/views/setting/cloudManager.vue    | 24 +++++++--
 4 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TaskProgress/index.vue

diff --git a/src/api/setting-api.js b/src/api/setting-api.js
index 98c68e6..cde7def 100644
--- a/src/api/setting-api.js
+++ b/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
+  })
+}
diff --git a/src/components/TaskProgress/index.vue b/src/components/TaskProgress/index.vue
new file mode 100644
index 0000000..3332202
--- /dev/null
+++ b/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>
diff --git a/src/sse/SSEClient.js b/src/sse/SSEClient.js
index 90434f7..9af1157 100644
--- a/src/sse/SSEClient.js
+++ b/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 {
diff --git a/src/views/setting/cloudManager.vue b/src/views/setting/cloudManager.vue
index 7b37566..f1cacf0 100644
--- a/src/views/setting/cloudManager.vue
+++ b/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>