<template>
|
<div v-if="value" class="wrapper">
|
<el-row justify="center">
|
<el-text size="large">{{ value.districtName }}</el-text>
|
<!-- <el-tag type="info">{{ value.districtName }}</el-tag> -->
|
</el-row>
|
<div>
|
<div class="text_title">实施进度</div>
|
<template v-if="value._totaltask > 0">
|
<el-space>
|
<!-- <el-text size="default">{{ value._completetask + '/' + value._totaltask }}</el-text> -->
|
<el-text>总计</el-text>
|
<el-progress
|
style="width: 350px"
|
type="line"
|
status="warning"
|
:text-inside="true"
|
:stroke-width="22"
|
:striped="percentFormat(value._completetask, value._totaltask) < 100"
|
striped-flow
|
:percentage="percentFormat(value._completetask, value._totaltask)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value">{{
|
`${value._completetask}/${value._totaltask} (${percentage}%)`
|
}}</span>
|
</template>
|
</el-progress>
|
</el-space>
|
</template>
|
<template v-else>
|
<el-space>
|
<!-- <el-text size="default">{{ value.completetask + '/' + value.totaltask }}</el-text> -->
|
<el-text>总计</el-text>
|
<el-progress
|
style="width: 350px"
|
type="line"
|
status="warning"
|
:text-inside="true"
|
:stroke-width="22"
|
:striped="percentFormat(value.completetask, value.totaltask) < 100"
|
striped-flow
|
:percentage="percentFormat(value.completetask, value.totaltask)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value">{{
|
`${value.completetask}/${value.totaltask} (${percentage}%)`
|
}}</span>
|
</template>
|
</el-progress>
|
</el-space>
|
</template>
|
</div>
|
<!-- </el-col> -->
|
<!-- <el-col span="12" class="flex-bottom"> -->
|
<!-- <div>{{ name }}</div> -->
|
<!-- <div>{{ planTime }}</div> -->
|
<!-- <div>{{ userName }}</div> -->
|
<!-- :style="'width: ' + 300 / value.count.length + 'px'" -->
|
<!-- <el-row class="m-t-8"> -->
|
<div v-for="item in value.count" :key="item.sceneType">
|
<el-space v-if="item.finish > 0">
|
<el-text size="default" truncated>{{ item.sceneType }}</el-text>
|
<el-progress
|
:style="'width:' + width"
|
:stroke-width="16"
|
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">{{
|
`${item.finish}/${item.total} (${percentage}%)`
|
}}</span>
|
</template>
|
</el-progress>
|
<!-- <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> -->
|
</el-space>
|
</div>
|
<div>
|
<div class="text_title">日程进度</div>
|
<el-space>
|
<el-text style="color: transparent;">日程</el-text>
|
<el-progress
|
style="width: 350px"
|
type="line"
|
color="#00b487"
|
:text-inside="true"
|
:stroke-width="22"
|
:percentage="percentFormat(date, dayCount)"
|
>
|
<template #default="{ percentage }">
|
<span class="percentage-value">{{ `${dateStr} (${percentage}%)` }}</span>
|
</template>
|
</el-progress>
|
</el-space>
|
</div>
|
<!-- </el-row> -->
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
import { useAreaStore } from '@/stores/area.js'
|
import dayjs from 'dayjs'
|
|
/**
|
* 巡查任务区域统计信息
|
*/
|
const areaStore = useAreaStore()
|
|
const props = defineProps({
|
value: Object
|
})
|
|
const width = ref('300px')
|
|
const dayCount = computed(() => dayjs(areaStore.area.endtime).daysInMonth())
|
const date = computed(() => {
|
const today = dayjs()
|
const planEndTime = dayjs(areaStore.area.endtime)
|
if (today.isBefore(planEndTime)) {
|
return today.date()
|
} else {
|
return planEndTime.daysInMonth()
|
}
|
})
|
const dateStr = computed(()=>{
|
const today = dayjs()
|
const planEndTime = dayjs(areaStore.area.endtime)
|
if (today.isBefore(planEndTime)) {
|
return today.format('MM月DD日')
|
} else {
|
return today.format('MM月DD日')
|
}
|
})
|
|
function percentFormat(finish, total) {
|
if (total == 0) {
|
return 0
|
} else {
|
const per = finish / total > 1 ? 1 : finish / total
|
return Math.round(per * 100)
|
}
|
}
|
function format(percentage) {
|
percentage === 100 ? 'Full' : `${percentage}%`
|
}
|
</script>
|
|
<style scoped>
|
.wrapper {
|
border: var(--el-border);
|
border-radius: var(--el-border-radius-base);
|
box-shadow: var(--el-box-shadow-lighter);
|
background-color: rgba(161, 161, 161, 0.068);
|
padding: 8px 8px;
|
}
|
|
.text_title {
|
border-left: 6px solid rgb(49, 221, 6);
|
border-bottom: 1px solid rgb(49, 221, 6);
|
padding: 0px 4px 0px 4px;
|
width: 100px;
|
font-size: 15px;
|
margin-bottom: 4px;
|
/* color: #00b487; */
|
}
|
|
.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);
|
}
|
:deep(.el-progress-bar__outer) {
|
background-color: rgba(211, 211, 211, 0.411);
|
}
|
</style>
|
