效果图
<div class="company">
<div class="divHeader">分公司进度图</div>
<div class="cutLine"></div>
<div class="content">
<div class="goal">
<i class="el-icon-arrow-left" @click="changeLeft"></i>
<i class="el-icon-arrow-right" @click="changeRight"></i>
<div class="goalComponent" :style="testStyle">
<div class="goalItem" v-for="(goItem,index) in transSys.goal" :key="index">
<span>{{ goItem.name }}</span>
<span class="value">{{ goItem.value }}</span>
<span>{{ goItem.unit }}</span>
</div>
</div>
</div>
<div class="yield">
<div class="progressItem" v-for="(yieldItem,index) in transSys.goal[currentIndex].progress" :key="index">
<el-progress type="circle" :percentage="(yieldItem.value/yieldItem.total)*100" :show-text="false" :width="100"
:color="yieldItem.color">
</el-progress>
<span class="progressTitle">{{ yieldItem.name }}</span>
<div class="currentYield">{{ yieldItem.value }}吨</div>
</div>
</div>
</div>
</div>
export default {
components: {},
computed: {},
mounted() {
this.testStyle = " transform: translateX(0px);"
},
data() {
return {
currentIndex: 0,
testStyle: "",
transSys: {
goal: [
{
name: "1号分公司年度目标", value: 1000, unit: "吨",
progress: [
{name: "当日产量", value: 537, total: 2000, unit: "吨", color: "#ff9b00"},
{name: "当月产量", value: 27632, total: 100000, unit: "吨", color: "#00ccff"}
]
},
{
name: "2号分公司年度目标", value: 995, unit: "吨",
progress: [
{name: "当日产量", value: 437, total: 2000, unit: "吨", color: "#ff9b00"},
{name: "当月产量", value: 37632, total: 100000, unit: "吨", color: "#00ccff"}
]
},
{
name: "3号分公司年度目标", value: 1100, unit: "吨",
progress: [
{name: "当日产量", value: 537, total: 2000, unit: "吨", color: "#ff9b00"},
{name: "当月产量", value: 27632, total: 100000, unit: "吨", color: "#00ccff"}
]
},
{
name: "4号分公司年度目标", value: 1115, unit: "吨",
progress: [
{name: "当日产量", value: 337, total: 2000, unit: "吨", color: "#ff9b00"},
{name: "当月产量", value: 57632, total: 100000, unit: "吨", color: "#00ccff"}
]
}
],
}
}
},
methods: {
changeLeft() {
if (this.currentIndex >= 1) {
this.currentIndex--
this.testStyle = this.getTestStyle()
}
},
changeRight() {
if (this.currentIndex < this.transSys.goal.length - 1) {
this.currentIndex++
} else if (this.currentIndex === this.transSys.goal.length - 1) {
this.currentIndex = 0
}
this.testStyle = this.getTestStyle()
},
getTestStyle() {
return `transform: translateX(${-25 * this.currentIndex}%);`
}
},
created() {
},
}
.company {
border-radius: 16px;
height: 32%;
width: 100%;
background: rgb(236, 235, 235);
}
.divHeader {
font-size: 15px;
padding: 10px 15px;
font-weight: bold;
}
.cutLine {
width: 100%;
height: 5px;
background-image: linear-gradient(to right, #0a3e55, #8f9192);
}
.content {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
height: calc(100% - 50px);
width: 99%;
padding: 10px 15px;
}
.goal {
position: relative;
height: 15%;
width: 99%;
font-size: 15px;
text-align: center;
}
.el-icon-arrow-left {
cursor: pointer;
position: absolute;
left: 0;
top: 30%;
z-index: 999;
}
.el-icon-arrow-right {
cursor: pointer;
position: absolute;
right: 0;
top: 30%;
z-index: 999;
}
.goalComponent {
width: 400%;
height: 100%;
transition: all 0.5s linear;
/*border: 1px solid yellow;*/
}
.goalItem {
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 23%;
height: 100%;
margin: 0 1%;
}
.value {
font-size: 16px;
font-weight: bolder;
padding: 0 5px;
}
.yield {
display: flex;
justify-content: space-around;
align-items: center;
height: 65%;
width: 100%;
margin: 0 auto;
}
.progressItem {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 23%;
height: 100%;
margin: 0 1%;
}
.progressTitle {
margin-top: 10px;
font-size: .96em;
}
.progress-item >>> svg path:first-child {
stroke: #192e3e;
}
.currentYield {
position: absolute;
top: 50%;
transform: translateY(-20%);
font-size: 16px;
}