<template>
|
<el-row justify="start">
|
<el-text>{{ name }}</el-text>
|
</el-row>
|
<div>
|
<el-text>总量</el-text>
|
<el-text size="default">{{ completetask + '/' + totaltask }}</el-text>
|
<el-progress
|
style="width: 300px"
|
type="line"
|
status="warning"
|
:text-inside="true"
|
:stroke-width="18"
|
:striped="percentFormat(completetask, totaltask) < 100"
|
striped-flow
|
:percentage="percentFormat(completetask, totaltask)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value">{{ percentage }}%</span>
|
</template>
|
</el-progress>
|
</div>
|
<!-- </el-col> -->
|
<!-- <el-col span="12" class="flex-bottom"> -->
|
<!-- <div>{{ name }}</div> -->
|
<!-- <div>{{ planTime }}</div> -->
|
<!-- <div>{{ userName }}</div> -->
|
<el-row class="m-t-8">
|
<div
|
align="center"
|
:style="'width: ' + 300 / count.length + 'px'"
|
v-for="item in count"
|
:key="item.sceneType"
|
>
|
<el-progress
|
:stroke-width="18"
|
status="exception"
|
:text-inside="true"
|
:striped="percentFormat(item.finish, item.total) < 100"
|
striped-flow
|
:percentage="percentFormat(item.finish, item.total)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value-small">{{ percentage }}%</span>
|
</template>
|
</el-progress>
|
<el-text size="small" truncated>{{ item.sceneType }}</el-text>
|
<!-- <el-text size="small">{{ item.finish + '/' + item.total }}</el-text> -->
|
<!-- <span class="percentage-value-small">{{ percentFormat(item.finish, item.total) }}%</span> -->
|
<!-- <div class="percentage-label-small">{{ item.sceneType }}</div> -->
|
<!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> -->
|
</div>
|
</el-row>
|
</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 {
|
const per = finish / total > 1 ? 1 : finish / total
|
return Math.round(per * 100)
|
}
|
},
|
format(percentage) {
|
percentage === 100 ? 'Full' : `${percentage}%`
|
}
|
}
|
}
|
</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;
|
font-size: var(--el-font-size-small);
|
}
|
.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>
|
