feat: 任务列表状态实时更新逻辑

src/api/module/taks/index.ts

@@ -67,5 +67,6 @@ export interface TaskList {
   site: string;       // "test1"
   startTime: string;  // 开始时间（可能是空字符串）
   status: -1 | 0 | 1 | 2 | 3; // -1 失败, 0 未开始, 1 进行中, 2 取消, 3 成功
-  loading?: boolean
+  loading?: boolean,
+  snList: string,
 }

src/views/taskList/index.vue

@@ -16,7 +16,7 @@
           <el-table-column v-else-if="col.prop === 'status'" :prop="col.prop" :label="col.label"
                            :min-width="col.minWidth">
             <template #default="scope">
-              {{ taskStatus.find(r => r.value === scope.row.status)?.label || '--' }}
+              {{ statusList.find(r => r.value === scope.row.status)?.label || '--' }}
             </template>
           </el-table-column>
           <el-table-column v-else-if="col.prop === 'mode'" :prop="col.prop" :label="col.label"
@@ -40,62 +40,25 @@
 
     </EdfsWrap>
   </div>
-  <InfoDrawer ref="InfoDrawerRef" @task-finish="onTaskFinish"/>
+  <InfoDrawer ref="InfoDrawerRef"/>
 </template>
 
 <script setup lang="ts">
-import {
-  cancelTask,
-  getTaskInfo,
-  getTaskList,
-  type TaskInfo,
-  type TaskList
-} from '@/api/module/taks'
+import { cancelTask, getTaskList, type TaskList } from '@/api/module/taks'
 import { useMessage } from '@/composables/useMessage'
 import EdfsWrap from "@/components/Edfs-wrap.vue";
 import EdfsTable from "@/components/Edfs-table/index.vue";
 import EdfsButton from "@/components/Edfs-button.vue";
 import dayjs from 'dayjs'
 import InfoDrawer from './infoDrawer.vue'
+import { getSubTopic, type SubMsgData } from "@/utils/zmq";
+import ZMQWorker from "@/composables/useZMQJsonWorker";
+import { statusList, tableCol, taskMode } from "@/views/taskList/utils";
+import { onUnmounted } from "vue";
 
-const message = useMessage()
-const taskStatus = [{
-  value: -1,
-  label: '执行失败'
-}, {
-  label: '等待执行',
-  value: 0
-}, {
-  label: '执行中',
-  value: 1
-}, {
-  label: '已取消',
-  value: 2
-}, {
-  label: '执行结束',
-  value: 3
-}]
-
-const taskMode = [{
-  value: 'export',
-  label: '导出'
-}, {
-  value: 'import',
-  label: '导入'
-}, {
-  value: 'update',
-  label: '升级'
-}]
-
-const tableCol = [
-  { label: '任务ID', prop: 'id', minWidth: '10%' },
-  { label: '站点', prop: 'site', minWidth: '10%' },
-  { label: '任务类型', prop: 'mode', minWidth: '8%' },
-  { label: '任务状态', prop: 'status', minWidth: '10%' },
-  { label: '创建时间', prop: 'startTime', minWidth: '12%' },
-  { label: '任务详情', prop: 'info', minWidth: '20%' },
-]
+const worker = ZMQWorker.getInstance()
 
+const message = useMessage()
 
 const loading = ref(true)
 const total = ref(0)
@@ -139,15 +102,39 @@ const onCancel = async (id: string) => {
   await getList()
 }
 
-function onTaskFinish(id: string, status: -1 | 0 | 1 | 2 | 3) {
+function onTaskFinish(id: string, status: 0 | 1 | 3) {
   const curTask = list.value.findIndex(item => item.id === id)
   if (curTask !== -1) {
     list.value[curTask].status = status
   }
 }
 
-onMounted(() => {
-  getList()
+function zmqTaskCb(msg: SubMsgData) {
+  const { feedback } = msg
+  const taskId = feedback[0]
+  const deviceSN = feedback[1]
+  const deviceStatus = feedback[2] || '未知状态'
+  const finish = feedback[3] || 0
+  const total = feedback[4] || 0
+  const findTask = list.value.find((r: TaskList) => r.id === taskId)
+  if (findTask) {
+    try {
+      const deviceList = findTask.snList.split(',')
+      const lastDevice = deviceList[deviceList.length - 1]
+      console.log(taskId, deviceSN, lastDevice, deviceStatus, finish, total)
+      onTaskFinish(taskId, deviceSN === lastDevice && ((total - finish) === 0) ? 3 : 1)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+onMounted(async () => {
+  await getList()
+  worker.subscribe(getSubTopic('server', 'event', 'task'), zmqTaskCb)
+})
+onUnmounted(() => {
+  worker.unsubscribe(getSubTopic('server', 'event', 'task'))
 })
 </script>
 

src/views/taskList/infoDrawer.vue

@@ -44,8 +44,8 @@ import { getSubTopic, type SubMsgData } from '@/utils/zmq'
 import ZMQWorker from '@/composables/useZMQJsonWorker'
 import { getTaskInfo, type TaskInfo, type TaskList } from '@/api/module/taks'
 import { useMessage } from '@/composables/useMessage'
+import { statusList, statusTypeMap } from "./utils";
 
-const emit = defineEmits<{ 'task-finish': [string, -1 | 0 | 1 | 2 | 3] }>()
 const message = useMessage()
 const worker = ZMQWorker.getInstance()
 const isShowDrawer = defineModel<boolean>()
@@ -72,35 +72,6 @@ async function open(row: TaskList) {
   await onDetail(row)
   worker.subscribe(getSubTopic('server', 'event', 'task'), zmqTaskCb)
 }
-
-const statusList = [
-  {
-    value: -1,
-    label: '执行失败'
-  }, {
-    label: '等待执行',
-    value: 0
-  }, {
-    label: '执行中',
-    value: 1
-  }, {
-    label: '已取消',
-    value: 2
-  }, {
-    label: '执行成功',
-    value: 3
-  }
-]
-
-const statusTypeMap = {
-  '-1': 'danger',
-  '0': 'info',
-  '1': 'warning',
-  '2': 'info',
-  '3': 'primary'
-}
-
-
 function zmqTaskCb(msg: SubMsgData) {
   const { feedback } = msg
   const taskId = feedback[0]
@@ -114,9 +85,6 @@ function zmqTaskCb(msg: SubMsgData) {
   detail.status = deviceStatus
   detail.finish = finish
   detail.total = total
-  if (finish === total) {
-    emit('task-finish', taskId, deviceStatus)
-  }
 }
 
 function handleBeforeClose(done: () => void) {

src/views/taskList/utils.ts

@@ -0,0 +1,47 @@
+export const statusList = [
+  {
+    value: -1,
+    label: '执行失败'
+  }, {
+    label: '等待执行',
+    value: 0
+  }, {
+    label: '执行中',
+    value: 1
+  }, {
+    label: '已取消',
+    value: 2
+  }, {
+    label: '执行结束',
+    value: 3
+  }
+]
+
+export const statusTypeMap = {
+  '-1': 'danger',
+  '0': 'info',
+  '1': 'warning',
+  '2': 'info',
+  '3': 'primary'
+}
+
+
+export const taskMode = [{
+  value: 'export',
+  label: '导出'
+}, {
+  value: 'import',
+  label: '导入'
+}, {
+  value: 'update',
+  label: '升级'
+}]
+
+export const tableCol = [
+  { label: '任务ID', prop: 'id', minWidth: '10%' },
+  { label: '站点', prop: 'site', minWidth: '10%' },
+  { label: '任务类型', prop: 'mode', minWidth: '8%' },
+  { label: '任务状态', prop: 'status', minWidth: '10%' },
+  { label: '创建时间', prop: 'startTime', minWidth: '12%' },
+  { label: '任务详情', prop: 'info', minWidth: '20%' },
+]