<template>
|
<!-- <div class="demo-progress border-r-small"> -->
|
<el-row justify="end">
|
<el-text type="info">{{ name }}</el-text>
|
</el-row>
|
<el-row justify="space-evenly">
|
<el-col span="12">
|
<div class="v-center">
|
<el-text>总量</el-text>
|
<el-progress
|
:width="100"
|
type="circle"
|
status="warning"
|
:percentage="percentFormat(completetask, totaltask)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value">{{ percentage }}%</span>
|
<!-- <span class="percentage-label">{{ finish + '/' + total }}</span> -->
|
</template>
|
</el-progress>
|
<el-text size="small">{{ completetask + '/' + totaltask }}</el-text>
|
</div>
|
</el-col>
|
<el-col span="12" class="flex-bottom">
|
<!-- <div>{{ name }}</div> -->
|
<!-- <div>{{ planTime }}</div> -->
|
<!-- <div>{{ userName }}</div> -->
|
<el-row style="gap: 40px" justify="space-between">
|
<div class="v-center" v-for="item in count" :key="item.sceneType">
|
<el-text size="small">{{ item.sceneType }}</el-text>
|
<el-progress
|
:width="50"
|
:stroke-width="3"
|
type="circle"
|
status="warning"
|
:percentage="percentFormat(item.finish, item.total)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value-small">{{ percentage }}%</span>
|
</template>
|
</el-progress>
|
<el-text size="small">{{ item.finish + '/' + item.total }}</el-text>
|
<!-- <div class="percentage-label-small">{{ item.sceneType }}</div> -->
|
<!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> -->
|
</div>
|
</el-row>
|
</el-col>
|
</el-row>
|
<!-- </div> -->
|
</template>
|
|
<script>
|
/**
|
* 巡查任务区域统计信息
|
*/
|
export default {
|
props: {
|
name: String,
|
province: String,
|
district: String,
|
planTime: String,
|
startTime: String,
|
endTime: String,
|
userName: String,
|
status: String,
|
totaltask: Number,
|
completetask: Number,
|
|
count: Array
|
},
|
data() {
|
return {}
|
},
|
watch: {},
|
computed: {
|
// total() {
|
// let t = 0
|
// this.count.forEach((c) => {
|
// t += c.total
|
// })
|
// return t
|
// },
|
// finish() {
|
// let t = 0
|
// this.count.forEach((c) => {
|
// t += c.finish
|
// })
|
// return t
|
// }
|
},
|
methods: {
|
percentFormat(finish, total) {
|
if (total == 0) {
|
return 0
|
} else {
|
return Math.round((finish / total) * 100)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.wrapper {
|
border: var(--el-border);
|
border-radius: var(--el-border-radius-base);
|
}
|
|
.flex-bottom {
|
display: flex;
|
flex-direction: column;
|
justify-content: end;
|
}
|
|
.percentage-value {
|
display: block;
|
margin-top: 10px;
|
font-size: var(--el-font-size-base);
|
}
|
.percentage-value-small {
|
display: block;
|
/* margin-top: 10px; */
|
font-size: var(--el-font-size-small);
|
}
|
.percentage-label {
|
display: block;
|
margin-top: 10px;
|
font-size: var(--el-font-size-base);
|
}
|
.percentage-label-small {
|
display: block;
|
/* margin-top: 10px; */
|
font-size: var(--el-font-size-small);
|
}
|
</style>
|
