From 6584cbef8a5829950c20b507e17445b97650e73f Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期三, 27 十一月 2024 12:15:04 +0800
Subject: [PATCH] 1. 新增消息管理类 2. socket消息类型js改为枚举类 3. 重连函数在使用时以参数传递进来

---
 src/components/bg-task/FYBgTaskCard.vue |  236 +++++++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 183 insertions(+), 53 deletions(-)

diff --git a/src/components/bg-task/FYBgTaskCard.vue b/src/components/bg-task/FYBgTaskCard.vue
index 7a00510..91c449f 100644
--- a/src/components/bg-task/FYBgTaskCard.vue
+++ b/src/components/bg-task/FYBgTaskCard.vue
@@ -1,67 +1,197 @@
 <template>
-  <el-card class="bg-task-card" shadow="hover" :body-style="{ padding: '8px' }">
-    <!-- <template #header> -->
-    <el-row style="background-color: aliceblue">
-      <!-- <el-space> -->
-      <el-tag>{{ nameToLabel(model.type) }}</el-tag>
-      <el-text style="width: 80%" tag="b" size="large" truncated>{{ model.name }}</el-text>
-      <!-- <div>{{ model.name }}asdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasda</div> -->
-      <!-- </el-space> -->
-    </el-row>
-    <!-- <div>
-      <el-text truncated>{{ model.name }}asdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasda</el-text>
-        </div> -->
-
-    <!-- </template> -->
-    <div>
-      <el-text type="info" size="small">ID锛歿{ model.id }}</el-text>
-    </div>
-
-    <div>
-      <el-text type="info" size="small">鐘舵�侊細{{ nameToLabel(model.status) }}</el-text>
-    </div>
-    <div>
-      <el-text type="info" size="small">寮�濮嬶細{{ model.startTime }}</el-text>
-    </div>
-    <div>
-      <el-text type="info" size="small">缁撴潫锛歿{ model.endTime }}</el-text>
-    </div>
-    <!-- <template #footer> -->
-    <el-row justify="end">
-      <el-button type="primary" size="small" :loading="false" @click="$emit('start', model)"
-        >寮�濮嬩换鍔�</el-button
-      >
-      <el-button type="danger" size="small" :loading="false" @click="$emit('shutDown', model)"
-        >寮哄埗缁撴潫</el-button
-      >
-      <el-button type="danger" size="small" :loading="false" @click="$emit('remove', model)"
-        >绉婚櫎浠诲姟</el-button
-      >
-      <el-button type="danger" size="small" :loading="false" @click="$emit('gotoResult', model)"
-        >鏌ョ湅缁撴灉</el-button
-      >
-    </el-row>
-    <!-- </template> -->
+  <el-card shadow="never" :body-style="{ padding: 0 }">
+    <template #header>
+      <el-row justify="space-between">
+        <div>
+          <div><el-text tag="b" size="large">鍚庡彴浠诲姟</el-text></div>
+          <el-text size="small" type="info">鏄剧ず褰撳墠姝e湪杩涜鐨勫悗鍙拌�楁椂浠诲姟鐘舵��</el-text>
+        </div>
+        <el-button
+          icon="Refresh"
+          type="primary"
+          size="default"
+          :loading="loading"
+          @click="fetchTask"
+          >鍒锋柊浠诲姟</el-button
+        >
+      </el-row>
+      <!-- <el-row>
+        <el-button type="default" size="default" @click="newTestTask">鏂板娴嬭瘯浠诲姟</el-button>
+        <el-button type="default" size="default" @click="startNewTestTask"
+          >鏂板缓骞惰繍琛屼竴涓祴璇曚换鍔�</el-button
+        >
+        <el-button type="default" size="default" @click="shutDownTask"
+          >寮哄埗鍏抽棴鎵�鏈夋祴璇曚换鍔�</el-button
+        >
+      </el-row> -->
+    </template>
+    <el-scrollbar height="70vh" class="scrollbar">
+      <template v-for="(v, i) in taskList" :key="i">
+        <FYBgTaskItem
+          :model="v"
+          :index="i"
+          @start="startTask"
+          @shutDown="shutDownTask"
+          @remove="removeTask"
+          @gotoResult="gotoResult"
+        ></FYBgTaskItem>
+      </template>
+    </el-scrollbar>
   </el-card>
 </template>
 <script>
-import { nTlBgTask } from '@/enum/bgTask';
+/**
+ * 鑷姩璇勪及浠诲姟绠$悊
+ */
+import { useFetchData } from '@/composables/fetchData';
+import bgtaskApi from '@/api/fysp/bgtaskApi';
+import { enumBgTask, BG_TASK_TYPE, BG_TASK_STATUS } from '@/enum/bgTask';
+import { SOCKET_MESSAGE_TYPE } from '@/enum/socketMessage';
+import MessageManager from '@/socket/MessageManager.js';
 
 export default {
-  props: {
-    model: Object
+  setup() {
+    const { loading, fetchData } = useFetchData();
+    return { loading, fetchData };
   },
-  emits: ['start', 'shutDown', 'remove', 'gotoResult'],
-  methods: {
-    nameToLabel(name) {
-      const t = nTlBgTask(name);
-      return t.label;
+  props: {
+    modelValue: Number
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      taskList: [],
+      taskIndex: 0
+    };
+  },
+  watch: {
+    taskList: {
+      handler(nV) {
+        let count = 0;
+        for (const e of nV) {
+          if (e.status == BG_TASK_STATUS.RUNNING.name) {
+            count++;
+          }
+        }
+        this.$emit('update:modelValue', count);
+      },
+      deep: true
     }
+  },
+  methods: {
+    registerBgTaskMessage() {
+      MessageManager.register(SOCKET_MESSAGE_TYPE.BACKGROUND_TASK.name, (data) => {
+        this.refreshTaskById(data)
+      })
+    },
+    /**
+     * 鍒锋柊涓�涓换鍔¢�氳繃id锛屽鏋滄槸鏂扮殑浠诲姟鍒欐坊鍔犲埌浠诲姟鍒楄〃taskList涓�
+     * @param data 
+     */
+    refreshTaskById(data) {
+      if (!data || data == {}) {
+        return;
+      }
+      let isNewTask = true
+      for (let index = 0; index < this.taskList.length; index++) {
+          const task = this.taskList[index];
+          if (task.id == data.id) {
+            this.taskList[index] = data
+            isNewTask = false
+            break
+          }
+        }
+        if (isNewTask) {
+          this.taskList.push(data)
+        }
+    },
+    addTask() {},
+    newTestTask() {
+      this.fetchData((page, pageSize) => {
+        return bgtaskApi.newTestTask(`Test-Task-${++this.taskIndex}`).then((res) => {
+          this.taskList.push(res.data);
+        });
+      });
+    },
+    startNewTestTask() {
+      this.fetchData((page, pageSize) => {
+        return bgtaskApi.startNewTestTask(`Test-Task-${++this.taskIndex}`).then((res) => {
+          this.taskList.push(res.data);
+        });
+      });
+    },
+
+    _getParam(taskStatus) {
+      return {
+        type: taskStatus.type,
+        id: taskStatus.id
+      };
+    },
+    fetchTask() {
+      this.fetchData((page, pageSize) => {
+        return bgtaskApi
+          .fetchTaskStatus({
+            // type: BG_TASK_TYPE.AUTO_SCORE.name
+          })
+          .then((res) => {
+            this.taskList = res.data;
+          });
+      });
+    },
+    startTask(index, callback) {
+      this.fetchData((page, pageSize) => {
+        const param = this._getParam(this.taskList[index]);
+        return bgtaskApi.startTask(param).then((res) => {
+          this.taskList[index] = res.data;
+          callback(true);
+        });
+      });
+    },
+    shutDownTask(index, callback) {
+      this.fetchData((page, pageSize) => {
+        const param = this._getParam(this.taskList[index]);
+        return bgtaskApi.shutDownTask(param).then((res) => {
+          if (index && res.data && res.data.length == 1) {
+            this.taskList[index] = res.data[0];
+          } else {
+            res.data.forEach((e) => {
+              let v = this.taskList.find((value) => {
+                return value.id == e.id;
+              });
+              const i = this.taskList.indexOf(v);
+              this.taskList[i] = e;
+            });
+          }
+          callback(true);
+        });
+      });
+    },
+    removeTask(index, callback) {
+      this.fetchData((page, pageSize) => {
+        const param = this._getParam(this.taskList[index]);
+        return bgtaskApi.removeTask(param).then((res) => {
+          if (res.data) {
+            this.taskList.splice(index, 1);
+            callback(true);
+          }
+        });
+      });
+    },
+    gotoResult(index) {}
+  },
+  created() {
+    this.registerBgTaskMessage()
+  },
+  mounted() {
+    this.fetchTask();
+    // setInterval(() => {
+    //   this.fetchTask();
+    // }, 10000);
   }
 };
 </script>
 <style scoped>
-.bg-task-card {
-  margin-bottom: 8px;
+.scrollbar {
+  padding: 8px;
 }
 </style>

--
Gitblit v1.9.3