//将数组array分成长度为subGroupLength的小数组并返回新数组
//一页5条数据轮播(出库全链路监控)比如一页轮播图上有5条数据,后台返回的接口需要转一下
group(array, subGroupLength) {
let index = 0;
let newArray = [];
while(index < array.length) {
newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
},
//使用
created() {
this.warpList=this.group(this.listData, 6);
},
data里面的数据写死的 回头接口好了直接调用接口
listData :[
{ name:'异常单', status:'待处理',num:1685 },
{ name:'发货单', status:'汇波率',num:45 },
{ name:'波次单', status:'打单率',num:8 },
{ name:'拣货单', status:'作业率',num:545 },
{ name:'复核作业', status:'完成率',num:247 },
{ name:'异常单', status:'待处理',num:878 },
{ name:'异常单', status:'待处理',num:555 },
],
//结构
<div class="circleWarp" style="margin-top:1%; border-top:2px solid #ccc;padding: 0 25px;">
<Row :gutter="24">
<Carousel
v-model="value3"
:autoplay="setting.autoplay"
:autoplay-speed="setting.autoplaySpeed"
:dots="setting.dots"
:radius-dot="setting.radiusDot"
:trigger="setting.trigger"
:arrow="setting.arrow">
<CarouselItem style="padding:0 60px;" v-for="(item,i) in warpList" :key="i">
<Col :xl="4" :lg="8" :md="12" :sm="24" :xs="24" style="cursor: pointer;" v-for="(item,index) in item" :key="index" :class="{'tabs-active': index == queryParams.active}" @click="tabItemClick(index)" >
<Col span="6" style="margin-top:15px;">
<div style="font-size:16px;">{{item.name}} </div>
<div style="color:rgb(144, 144, 144); padding:15px 0 5px;">{{item.status}}</div>
<div style="font-size:20px;">{{item.num}}</div>
</Col>
<Col span="18" style="padding:32px 0;">
<Circle :percent="80"
:trail-width="12"
:stroke-width="14"
:size="60"
>
<span class="demo-Circle-inner" style="font-size:24px"></span>
</Circle>
</Col>
</Col>
</CarouselItem>
</Carousel>
</Row>
</div>
网友评论