<!-- 任务统计 -->
|
<template>
|
<div class="task-total">
|
<div class="total">
|
<div class="txt">总任务数</div>
|
<div class="num">{{ total }}</div>
|
<img src="@/assets/images/task/total.png" alt="">
|
</div>
|
<div class="other-total">
|
<div class="total" v-for="item in list">
|
<div class="value" :style="{ color:item.color }">{{ item.value }}</div>
|
<div class="name">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem';
|
import { totalJobNum, jobStatistics } from "@/api/home/task";
|
|
const total = ref(0);
|
const list = ref([
|
{ name: '计划执行', value: '0', color: '#FFFFFF'},
|
{ name: '执行中', value: '0', color: '#FFA768'},
|
{ name: '待执行', value: '0', color: '#FFE17E'},
|
{ name: '已执行', value: '0', color: '#8EFFAC'},
|
{ name: '执行失败', value: '0', color: '#FF8E8E'},
|
]);
|
|
// 获取任务统计总数
|
const getTotalJobNum = () => {
|
totalJobNum().then((res) => {
|
if (res.data.code !== 0) returen;
|
total.value = res.data.data;
|
});
|
};
|
// 获取其他任务统计
|
const getJobStatistics = () => {
|
jobStatistics().then((res) => {
|
if (res.data.code !== 0) returen;
|
list.value[1].value = res.data.data.planned_executions;
|
list.value[2].value = res.data.data.running_num;
|
list.value[3].value = res.data.data.pending_executions;
|
list.value[4].value = res.data.data.executed;
|
// list.value[5].value = res.data.data.failed_executions;
|
});
|
};
|
|
onMounted(() => {
|
getTotalJobNum();
|
getJobStatistics();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.task-total {
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
display: flex;
|
justify-content: space-between;
|
color: #ffffff;
|
.total {
|
position: relative;
|
text-align: center;
|
left: 18px;
|
.txt {
|
font-size: 16px;
|
margin-bottom: 14px;
|
margin-top: 40px;
|
}
|
img { width: 160px; height: 110px;}
|
.num {
|
width: 100px;
|
position: absolute;
|
font-size: 32px;
|
top: 90px;
|
left: 24px;
|
}
|
}
|
.other-total {
|
width: 256px;
|
height: 188px;
|
background: url('@/assets/images/task/other-total.png') no-repeat center / 100% 100%;
|
margin-top: 22px;
|
padding: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: space-around;
|
.total {
|
position: static;
|
width: 30%;
|
text-align: center;
|
left: 0;
|
.name {
|
font-size: 14px;
|
}
|
.value {
|
font-size: 26px;
|
}
|
}
|
}
|
}
|
</style>
|
