<!-- 任务统计 -->
|
<template>
|
<div class="task-total">
|
<div class="title">任务数据概览</div>
|
<div class="contain">
|
<div class="left">
|
<div class="total-num">
|
<img src="@/assets/images/task/total-number.png" alt="" />
|
<div class="txt">总执行次数</div>
|
<div class="num">{{ numTotal }}</div>
|
</div>
|
</div>
|
<div class="other-total">
|
<div class="total" v-for="(item, index) in list" :key="index">
|
<div class="total-item">
|
<div class="name"><img :src="item.img" alt="" />{{ item.name }}</div>
|
<div class="value" :style="{ color: item.color }">{{ item.value }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem'
|
import { totalJobNum, jobStatistics } from '@/api/job/task'
|
import { useStore } from 'vuex'
|
import jhzxpng from '@/assets/images/task/jhzx.png'
|
import yzxpng from '@/assets/images/task/yzx.png'
|
import zxzpng from '@/assets/images/task/zxz.png'
|
import zxsbpng from '@/assets/images/task/zxsb.png'
|
import dzxpng from '@/assets/images/task/dzx.png'
|
import qxzxpng from '@/assets/images/task/qxzx.png'
|
|
const store = useStore()
|
|
const total = ref(0)
|
const numTotal = ref(0)
|
const list = ref([
|
{ name: '计划执行', value: '0', color: '#1C5CFF', img: jhzxpng },
|
{ name: '已执行', value: '0', color: '#00AA2D', img: yzxpng },
|
{ name: '执行中', value: '0', color: '#FF720F', img: zxzpng},
|
{ name: '执行失败', value: '0', color: '#FF4848', img: zxsbpng },
|
{ name: '待执行', value: '0', color: '#00CDC2', img: dzxpng },
|
{ name: '取消执行', value: '0', color: '#373333', img: qxzxpng },
|
])
|
|
|
// 获取其他任务统计
|
const getJobStatistics = value => {
|
jobStatistics(value).then(res => {
|
if (res.data.code !== 0) returen
|
const {executed = 0,failed_executions = 0,go_home_executions = 0} = res.data?.data || {}
|
numTotal.value = executed + failed_executions + go_home_executions
|
list.value[0].value = res.data.data.planned_executions || 0
|
list.value[1].value = res.data.data.executed || 0
|
list.value[2].value = res.data.data.running_num || 0
|
list.value[3].value = res.data.data.failed_executions || 0
|
list.value[4].value = res.data.data.pending_executions || 0
|
list.value[5].value = res.data.data.go_home_executions || 0
|
})
|
}
|
|
const changeKey = inject('changeKey')
|
// 添加监听
|
watch(
|
() => [store.state.task.taskSearchParams,changeKey.value],
|
() => getJobStatistics(store.state.task.taskSearchParams),
|
{ deep: true }
|
)
|
|
</script>
|
|
<style scoped lang="scss">
|
.task-total {
|
width: 300px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
background: #FFFFFF;
|
border-radius: 8px 8px 8px 8px;
|
.title {
|
padding: 10px 0 10px 16px;
|
width: 96px;
|
height: 18px;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: bold;
|
font-size: 16px;
|
color: #363636;
|
line-height: 18px;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
.contain {
|
display: flex;
|
}
|
.total-num {
|
width: 100px;
|
|
img {
|
width: 84px;
|
height: 84px;
|
}
|
.txt {
|
font-weight: 400;
|
font-size: 14px;
|
color: #363636;
|
line-height: 18px;
|
text-align: center;
|
}
|
.num {
|
font-weight: bold;
|
font-size: 20px;
|
color: #363636;
|
line-height: 18px;
|
text-align: center;
|
margin-top: 6px;
|
}
|
}
|
.other-total {
|
position: relative;
|
top: -10px;
|
width: 200px;
|
height: 160px;
|
display: flex;
|
gap: 10px;
|
|
flex-wrap: wrap;
|
align-content: space-evenly;
|
.total {
|
display: flex;
|
align-items: center;
|
margin-bottom: -18px;
|
text-align: center;
|
|
.name {
|
display: flex;
|
align-items: center;
|
width: 90px;
|
font-weight: 400;
|
font-size: 14px;
|
color: #363636;
|
line-height: 18px;
|
img {
|
width: 18px;
|
height: 18px;
|
}
|
}
|
.value {
|
font-weight: bold;
|
font-size: 16px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
