From e732f79fb39ca207464705308c9ee2deb3a79307 Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期二, 03 十二月 2024 11:21:41 +0800
Subject: [PATCH] 后台任务状态实时刷新同步后台更改 1. startTime和endTime对象结构修改 2. runTime根据后端逻辑生成runTime
---
src/components/bg-task/FYBgTaskCard.vue | 360 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 217 insertions(+), 143 deletions(-)
diff --git a/src/components/bg-task/FYBgTaskCard.vue b/src/components/bg-task/FYBgTaskCard.vue
index 0c50ec5..2113c19 100644
--- a/src/components/bg-task/FYBgTaskCard.vue
+++ b/src/components/bg-task/FYBgTaskCard.vue
@@ -1,175 +1,249 @@
<template>
- <el-card class="m-b-8" shadow="always" :body-style="{ padding: '8px' }">
- <el-row>
- <el-col :span="4">
- <div class="status-btn">
- <el-icon v-if="waiting" color="var(--el-color-info)" :size="50"><VideoPlay /></el-icon>
- <el-icon v-else-if="running" color="var(--el-color-primary)" :size="50" class="is-loading"
- ><Loading
- /></el-icon>
- <el-icon v-else-if="success" color="var(--el-color-success)" :size="50"
- ><CircleCheck
- /></el-icon>
- <el-icon v-else-if="fail" color="var(--el-color-error)" :size="50"
- ><CircleClose
- /></el-icon>
- <el-icon v-else color="var(--el-color-warning)" :size="50"><Warning /></el-icon>
- <el-text type="info" size="small" style="position: absolute; bottom: 0">{{
- nameToLabel(model.status)
- }}</el-text>
+ <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">鏄剧ず褰撳墠姝ｅ湪杩涜鐨勫悗鍙拌�楁椂浠诲姟鐘舵��</el-text>
</div>
- </el-col>
- <el-col :span="20" class="p-l-8">
- <el-row justify="space-between">
- <el-text class="m-l-4px w-150px" tag="b" size="large" truncated>{{ model.name }}</el-text>
- <el-tag>{{ nameToLabel(model.type) }}</el-tag>
- </el-row>
- <el-row class="p-v-8" align="bottom">
- <el-col :span="12">
- <span class="timer">{{ time }}</span>
- <el-text type="info" size="small" tag="div">杩愯鏃堕暱</el-text>
- </el-col>
- <el-col :span="12">
- <el-text type="default" size="default" tag="div"
- >寮�濮嬶細{{ $fm.formatYMDH(model.startTime) }}</el-text
- >
- <el-text type="default" size="default" tag="div"
- >缁撴潫锛歿{ $fm.formatYMDH(model.endTime) }}</el-text
- >
- </el-col>
- </el-row>
- <el-row justify="end" align="bottom">
- <!-- <span class="f-s color-i">ID锛歿{ model.id }}</span> -->
- <el-row>
- <FYReconfrimButton v-if="waiting" @confirm="startTask" v-model="startConfirm">
- <el-button
- plain
- icon="VideoPlay"
- type="primary"
- size="small"
- :loading="false"
- @click="startConfirm = true"
- >寮�濮嬩换鍔�</el-button
- >
- </FYReconfrimButton>
- <FYReconfrimButton v-if="running" @confirm="stopTask" v-model="stopConfirm">
- <el-button
- icon="VideoPause"
- plain
- type="danger"
- size="small"
- :loading="false"
- @click="stopConfirm = true"
- >寮哄埗缁撴潫</el-button
- >
- </FYReconfrimButton>
- <FYReconfrimButton v-if="!running" @confirm="removeTask" v-model="removeConfirm">
- <el-button
- icon="Delete"
- plain
- type="danger"
- size="small"
- :loading="false"
- @click="removeConfirm = true"
- >绉婚櫎浠诲姟</el-button
- >
- </FYReconfrimButton>
- <el-button
- v-if="success"
- plain
- type="success"
- size="small"
- :loading="false"
- @click="gotoResult"
- >鏌ョ湅缁撴灉<el-icon class="m-l-4"><Right /></el-icon
- ></el-button>
- </el-row>
- </el-row>
- </el-col>
- </el-row>
+ <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, BG_TASK_STATUS } from '@/enum/bgTask';
-import { useTimer } from '../../composables/timer';
+/**
+ * 鑷姩璇勪及浠诲姟绠＄悊
+ */
+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 {
setup() {
- const { time, startTimer, pauseTimer, stopTimer } = useTimer();
- return { time, startTimer, pauseTimer, stopTimer };
+ const { loading, fetchData } = useFetchData();
+ return { loading, fetchData };
},
props: {
- model: Object,
- index: Number
+ modelValue: Number
},
- emits: ['start', 'shutDown', 'remove', 'gotoResult'],
+ emits: ['update:modelValue'],
data() {
return {
- startConfirm: false,
- stopConfirm: false,
- removeConfirm: false
+ taskList: [],
+ taskIndex: 0
};
},
- computed: {
- waiting() {
- return this.model.status == BG_TASK_STATUS.WAITING.name;
- },
- running() {
- return this.model.status == BG_TASK_STATUS.RUNNING.name;
- },
- success() {
- return this.model.status == BG_TASK_STATUS.SUCCESS.name;
- },
- fail() {
- return this.model.status == BG_TASK_STATUS.FAIL.name;
- },
- shutdown() {
- return this.model.status == BG_TASK_STATUS.SHUTDOWN.name;
+ 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: {
- nameToLabel(name) {
- const t = nTlBgTask(name);
- return t.label;
+ registerBgTaskMessage() {
+ MessageManager.register(SOCKET_MESSAGE_TYPE.BACKGROUND_TASK.name, (data) => {
+ this.refreshTaskById(data)
+ })
},
- startTask() {
- this.$emit('start', this.index, (res) => {
- if (res) {
- this.startTimer();
+ computeRunTime(data) {
+ const taskStatus = data.status
+ const startTime = new Date(data.startTime).getTime()
+ const endTime = new Date(data.endTime).getTime()
+ const now = (new Date()).getTime();
+ switch (taskStatus) {
+ case BG_TASK_STATUS.WAITING.name:
+ return 0;
+ case BG_TASK_STATUS.RUNNING.name:
+ return (now - startTime) / 1000; // 杞崲涓虹
+ case BG_TASK_STATUS.SUCCESS.name:
+ case BG_TASK_STATUS.FAIL.name:
+ case BG_TASK_STATUS.SHUTDOWN.name:
+ return (endTime - startTime) / 1000; // 杞崲涓虹
+ }
+ },
+ /**
+ * 鍒锋柊涓�涓换鍔￠�氳繃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
+ // 鏃堕棿杞崲
+ const hasStartTime = 'startTime' in data && data.startTime != {}
+ const hasEndTime = 'endTime' in data && data.endTime != {}
+ if (hasEndTime) {
+ this.taskList[index].endTime = this.formatDate(data.endTime)
+ }
+ if (hasStartTime) {
+ this.taskList[index].startTime = this.formatDate(data.startTime)
+ }
+ if (hasStartTime && hasEndTime) {
+ this.taskList[index].runTime = this.computeRunTime(this.taskList[index])
+ }
+ isNewTask = false
+ break
}
+ }
+ if (isNewTask) {
+ this.taskList.push(data)
+ }
+ },
+ /**
+ * 鎷疯礉灞炴��
+ * @param from
+ * @param to
+ */
+ copyProperties(from, to) {
+ for (const prop in to) {
+ if (prop in from) {
+ to[prop] = from[prop]
+ }
+ }
+ },
+ formatDate(date) {
+ const dateObj = date.date
+ const timeObj = date.time
+ let year = dateObj.year;
+ let month = dateObj.month < 10 ? '0' + dateObj.month : dateObj.month;
+ let day = dateObj.day < 10 ? '0' + dateObj.day : dateObj.day;
+ let hour = timeObj.hour < 10 ? '0' + timeObj.hour : timeObj.hour;
+ let minute = timeObj.minute < 10 ? '0' + timeObj.minute : timeObj.minute;
+ let second = timeObj.second < 10 ? '0' + timeObj.second : timeObj.second;
+
+ return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+ },
+ addTask() {},
+ newTestTask() {
+ this.fetchData((page, pageSize) => {
+ return bgtaskApi.newTestTask(`Test-Task-${++this.taskIndex}`).then((res) => {
+ this.taskList.push(res.data);
+ });
});
},
- stopTask() {
- this.$emit('shutDown', this.index, (res) => {
- if (res) {
- this.stopTimer();
- }
+ startNewTestTask() {
+ this.fetchData((page, pageSize) => {
+ return bgtaskApi.startNewTestTask(`Test-Task-${++this.taskIndex}`).then((res) => {
+ this.taskList.push(res.data);
+ });
});
},
- removeTask() {
- this.$emit('remove', this.index, (res) => {
- if (res) {
- // this.stopTimer();
- }
+
+ _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;
+ });
});
},
- gotoResult() {
- this.$emit('gotoResult', this.index);
- }
+ 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>
-.status-btn {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- border: var(--el-border);
- border-radius: var(--el-border-radius-base);
-}
-.timer {
- font-size: 30px;
+.scrollbar {
+ padding: 8px;
}
</style>
--
Gitblit v1.9.3