From bb7ae31d7066a838bd177bf21c20f13ef044950b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 27 十二月 2023 17:45:45 +0800
Subject: [PATCH] 编写后台任务模块逻辑，完成80%
---
src/components/bg-task/FYBgTaskCard.vue | 200 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 154 insertions(+), 46 deletions(-)
diff --git a/src/components/bg-task/FYBgTaskCard.vue b/src/components/bg-task/FYBgTaskCard.vue
index 7a00510..0c50ec5 100644
--- a/src/components/bg-task/FYBgTaskCard.vue
+++ b/src/components/bg-task/FYBgTaskCard.vue
@@ -1,67 +1,175 @@
<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-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>
+ </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>
- <!-- <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>
</template>
<script>
-import { nTlBgTask } from '@/enum/bgTask';
+import { nTlBgTask, BG_TASK_STATUS } from '@/enum/bgTask';
+import { useTimer } from '../../composables/timer';
export default {
+ setup() {
+ const { time, startTimer, pauseTimer, stopTimer } = useTimer();
+ return { time, startTimer, pauseTimer, stopTimer };
+ },
props: {
- model: Object
+ model: Object,
+ index: Number
},
emits: ['start', 'shutDown', 'remove', 'gotoResult'],
+ data() {
+ return {
+ startConfirm: false,
+ stopConfirm: false,
+ removeConfirm: false
+ };
+ },
+ 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;
+ }
+ },
methods: {
nameToLabel(name) {
const t = nTlBgTask(name);
return t.label;
+ },
+ startTask() {
+ this.$emit('start', this.index, (res) => {
+ if (res) {
+ this.startTimer();
+ }
+ });
+ },
+ stopTask() {
+ this.$emit('shutDown', this.index, (res) => {
+ if (res) {
+ this.stopTimer();
+ }
+ });
+ },
+ removeTask() {
+ this.$emit('remove', this.index, (res) => {
+ if (res) {
+ // this.stopTimer();
+ }
+ });
+ },
+ gotoResult() {
+ this.$emit('gotoResult', this.index);
}
}
};
</script>
<style scoped>
-.bg-task-card {
- margin-bottom: 8px;
+.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;
}
</style>
--
Gitblit v1.9.3