<template>
|
<!-- <div class="demo-progress border-r-small"> -->
|
<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="(finish / total) * 100"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value">{{ percentage }}%</span>
|
<!-- <span class="percentage-label">{{ finish + '/' + total }}</span> -->
|
</template>
|
</el-progress>
|
<el-text size="small">{{ finish + '/' + total }}</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="(item.finish / item.total) * 100"
|
>
|
<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,
|
district: String,
|
planTime: String,
|
startTime: String,
|
endTime: String,
|
userName: String,
|
status: String,
|
|
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: {}
|
}
|
</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>
|
