<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>
|
</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-card>
|
</template>
|
<script>
|
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,
|
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>
|
.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>
|
