<template>
<div class="bottom-charts">
<div id="cards">
<div
class="card-item"
v-for="(card, i) in cards"
:key="card.title"
>
<div class="card-header">
<div class="card-header-left">{{ card.title }}</div>
<div class="card-header-right">{{ (i + 1) }}</div>
</div>
<dv-charts class="ring-charts" :option="card.ring" />
<div class="card-footer">
<div class="card-footer-item">
<div class="footer-title">今日已产</div>
<div class="footer-detail">
<dv-digital-flop :config="card.total" style="width:70%;height:30px;" />m³
</div>
</div>
<div class="card-footer-item">
<div class="footer-title">今日计划</div>
<div class="footer-detail">
<dv-digital-flop :config="card.num" style="width:70%;height:35px;" />m³
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Cards',
data () {
return {
cards: []
}
},
methods: {
createData () {
let postData = this.$qs.stringify({
date_type:2,//日期类型0:昨天,1:今天,2:本月,3:今年
});
var that = this;
this.$http({
method: 'post',
url:'/screen/eachCompanyProduceTotal',
data:postData
}).then((res)=>{
if(res.data.code === 200){
console.log(res.data.data);
//先给数组的每一项都填充为0,让这个数组有数据项,而不仅仅只有长度
//再用 map 替换各个项为 new Object( )
this.cards = new Array(res.data.data.length).fill(0).map((data, i) => ({
title: res.data.data[i].name,
total: {
number: [res.data.data[i].value],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
}
},
num: {
number: [res.data.data[i].plan],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '70%',
data: [
{ name: '完成率', value: res.data.data[i].percentage }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '完成率{value}%',
style: {
fill: '#EFF804',
fontSize: 15
}
}
}
],
color: ['#03d3ec']
}
}))
}
});
}
},
mounted () {
const { createData } = this
createData()
this.timer = setInterval(() => {
createData();
}, 5000);
}
}
</script>
<style lang="less">
.bottom-charts {
width: 100%;
height: 100%;
display: flex;
position: relative;
.bc-chart-item {
width: 25%;
height: 100%;
padding-top: 20px;
box-sizing: border-box;
}
.bcci-header {
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
}
.dv-active-ring-chart {
height: calc(~"100% - 80px");
}
.label-tag {
height: 30px;
}
.active-ring-name {
font-size: 18px !important;
}
.decoration-1, .decoration-2, .decoration-3 {
display: absolute;
left: 0%;
}
}
#cards {
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
.card-item {
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
width: 40%;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
height: 20%;
align-items: center;
justify-content: space-between;
.card-header-left {
font-size: 18px;
font-weight: bold;
padding-left: 20px;
}
.card-header-right {
padding-right: 20px;
font-size: 30px;
color: #03d3ec;
}
}
.ring-charts {
height: 35%;
}
.card-footer {
height: 25%;
display: flex;
align-items: center;
justify-content: space-around;
}
.card-footer-item {
padding: 5px 10px 0px 10px;
box-sizing: border-box;
width: 40%;
background-color: rgba(6, 30, 93, 0.7);
border-radius: 3px;
.footer-title {
font-size: 15px;
margin-bottom: 5px;
}
.footer-detail {
font-size: 15px;
color: #1294fb;
display: flex;
align-items: center;
.dv-digital-flop {
margin-right: 5px;
}
}
}
}
</style>
uniapp 大屏加载后端数据循环显示
最新推荐文章于 2024-06-17 09:03:43 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)