<template>
<div>
<div class="content-view">
<div v-for="(item, index) in progressList" class="item-view" :key="index">
<el-progress
:text-inside="true"
:stroke-width="26"
:percentage="setItemProgress(item)"
v-if="!isNaN(parseInt((item.planNum / item.completeNum) * 100))"
:status="setItemStatus(item)"
:format="setItemText(item)"
></el-progress>
<el-button @click="call"></el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
index:0,
arr:[1,2,3,5,6,8,7,9,33,55],
num:40,
progressList: [
{
planNum: 40,
completeNum: 20,
},
],
};
},
mounted(){
// let totalWidth = document.getElementsByClassName('el-progress-bar__inner')
// let word = document.getElementsByClassName('el-progress-bar__innerText')
// let str = word[0].innerHTML
},
methods: {
call(){
this.arr.push(num)
},
setItemProgress(data) {
if (data.planNum > data.completeNum) {
return 47;
} else {
return parseInt((data.planNum / data.completeNum).toFixed(1) * 100);
}
},
setItemText(row) {
return () => {
// return "计划: " + row.planNum + ",完成: " + row.completeNum;
return "进度条为40%";
};
},
setItemStatus(data) {
if (data.planNum > data.completeNum) {
return "exception";
} else if (data.planNum === data.completeNum) {
return "success";
} else {
return "warning";
}
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-progress-bar__inner,
::v-deep .el-progress-bar__outer{
border-radius: 0;
}
//字体显示
::v-deep .el-progress-bar__innerText {
margin-right: -40px;
}
.content-view {
height: calc(100vh - 84px);
background-color: #ffffff;
padding: 20px;
}
.item-view {
margin-bottom: 1rem;
}
</style>