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