<template>
|
<div class="container">
|
<div class="box">
|
<div class="flex">
|
<span>待响应</span>
|
<el-progress style="flex: 1;margin-left: 10px" :text-inside="true" :stroke-width="26" :percentage="this.projectInfo.poolBi"></el-progress>
|
</div>
|
<div class="flex">
|
<span>进行中</span>
|
<el-progress
|
style="flex: 1;margin-left: 10px"
|
:text-inside="true"
|
:stroke-width="24"
|
:percentage="this.projectInfo.doBi"
|
status="success"
|
></el-progress>
|
</div>
|
<div class="flex">
|
<span>已处理</span>
|
<el-progress
|
:text-inside="true"
|
style="flex: 1;margin-left: 10px"
|
:stroke-width="20"
|
:percentage="this.projectInfo.doneBi"
|
status="exception"
|
></el-progress>
|
</div>
|
<div class="flex">
|
<span>已取消</span>
|
<el-progress
|
:text-inside="true"
|
style="flex: 1;margin-left: 10px"
|
:stroke-width="20"
|
:percentage="this.projectInfo.noBi"
|
status="warning"
|
></el-progress>
|
</div>
|
</div>
|
<p style="text-align: center;font-size: 16px;font-weight: 600">流程占比</p>
|
</div>
|
</template>
|
|
<script>
|
import * as dash from "@/api/dashboard/dash";
|
|
export default {
|
name: 'progressMY',
|
data() {
|
return {
|
projectInfo: {},
|
|
}
|
},
|
mounted() {
|
dash.getProcess().then(res => {
|
if (res) {
|
this.projectInfo = res
|
}
|
})
|
}
|
};
|
|
|
|
</script>
|
|
<style scoped>
|
|
.box {
|
width: 100%;
|
height: 300px;
|
|
transform: translateY(30%);
|
}
|
.flex {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
</style>
|
