<!-- 任务统计 -->
|
<template>
|
<common-title title="任务统计" :style="{ marginLeft: pxToRem(14) }"></common-title>
|
<div class="task-total">
|
<div class="card" v-for="item in list">
|
<div>
|
<div class="value">{{ item.value }}</div>
|
<div class="name">{{item.name}}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem';
|
import CommonTitle from '@/components/CommonTitle.vue';
|
import { totalJobNum, jobStatistics } from "@/api/home/task";
|
|
const list = ref([
|
{ name: '总任务数', value: '1888'},
|
{ name: '计划执行', value: '18'},
|
{ name: '执行中', value: '999'},
|
{ name: '待执行', value: '8888'},
|
{ name: '已执行', value: '666'},
|
{ name: '执行失败', value: '2222'},
|
]);
|
|
// 获取任务统计总数
|
const getTotalJobNum = () => {
|
totalJobNum().then((res) => {
|
if (res.data.code !== 0) returen;
|
list.value[0].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;
|
margin-left: 29px;
|
padding: 16px 16px;
|
width: 340px;
|
height: 400px;
|
background: linear-gradient(
|
270deg,
|
rgba(31, 62, 122, 0) 0%,
|
rgba(31, 62, 122, 0.35) 21%,
|
#1f3e7a 100%
|
);
|
border-radius: 0px 0px 0px 0px;
|
opacity: 0.85;
|
margin-bottom: 12px;
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
grid-template-rows: repeat(3, 1fr);
|
gap: 20px;
|
padding: 20px;
|
.card {
|
/* position: absolute;
|
top: 8px;
|
right: 10px;
|
width: 200px; */
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
justify-content: flex-start;
|
line-height: 22px;
|
padding: 0 10px 10px 0;
|
color: #ffffff;
|
.name {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
|
}
|
|
.value {
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 26px;
|
}
|
}
|
}
|
</style>
|
