You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
497 lines
12 KiB
497 lines
12 KiB
<template>
|
|
<div class="ycl">
|
|
<template v-for="(card,i) in cards">
|
|
<div class="gxcl">
|
|
<div class="gxcl__title">{{card.title}}</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 v-if="show" :config="card.total" style="width:70%;height:35px;" />张
|
|
</div>
|
|
</div>
|
|
<div class="card-footer-item">
|
|
<div class="footer-title">重量</div>
|
|
<div class="footer-detail">
|
|
<dv-digital-flop v-if="show" :config="card.num" style="width:70%;height:35px;" />吨
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getGkjhwcqk} from "@/api/kban";
|
|
|
|
export default {
|
|
name:'MainGxChanLiang',
|
|
data(){
|
|
return {
|
|
show:false,
|
|
cards:[],
|
|
delay:null,
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getData()
|
|
this.delay=setInterval(this.getData, 30000)
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
const res=await getGkjhwcqk()
|
|
const {计划, 抛丸,理料, 划线, 切割} = this.createData(res.data)
|
|
this.show = false
|
|
this.cards = [计划, 抛丸,理料, 划线, 切割]
|
|
this.show = true
|
|
},
|
|
clear(){
|
|
clearInterval(this.delay)
|
|
},
|
|
createData (list) {
|
|
const data={
|
|
"计划": {
|
|
title: '计划',
|
|
total: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#ea6027',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
num: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#26fcd8',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
ring: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: -Math.PI / 2,
|
|
endAngle: Math.PI * 1.5,
|
|
arcLineWidth: 13,
|
|
radius: '80%',
|
|
data: [
|
|
{ name: '重量占比', value: 0 }
|
|
],
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#224590'
|
|
}
|
|
},
|
|
details: {
|
|
show: true,
|
|
formatter: '重量占比{value}%',
|
|
style: {
|
|
fill: '#1ed3e5',
|
|
fontSize: 20
|
|
}
|
|
}
|
|
}
|
|
],
|
|
color: ['#03d3ec']
|
|
}
|
|
},
|
|
"理料": {
|
|
title: '理料',
|
|
total: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#ea6027',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
num: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#26fcd8',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
ring: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: -Math.PI / 2,
|
|
endAngle: Math.PI * 1.5,
|
|
arcLineWidth: 13,
|
|
radius: '80%',
|
|
data: [
|
|
{ name: '重量占比', value: 0 }
|
|
],
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#224590'
|
|
}
|
|
},
|
|
details: {
|
|
show: true,
|
|
formatter: '重量占比{value}%',
|
|
style: {
|
|
fill: '#1ed3e5',
|
|
fontSize: 20
|
|
}
|
|
}
|
|
}
|
|
],
|
|
color: ['#03d3ec']
|
|
}
|
|
},
|
|
"划线": {
|
|
title: '划线',
|
|
total: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#ea6027',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
num: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#26fcd8',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
ring: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: -Math.PI / 2,
|
|
endAngle: Math.PI * 1.5,
|
|
arcLineWidth: 13,
|
|
radius: '80%',
|
|
data: [
|
|
{ name: '重量占比', value: 0 }
|
|
],
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#224590'
|
|
}
|
|
},
|
|
details: {
|
|
show: true,
|
|
formatter: '重量占比{value}%',
|
|
style: {
|
|
fill: '#1ed3e5',
|
|
fontSize: 20
|
|
}
|
|
}
|
|
}
|
|
],
|
|
color: ['#03d3ec']
|
|
}
|
|
},
|
|
"切割": {
|
|
title: '切割',
|
|
total: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#ea6027',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
num: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#26fcd8',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
ring: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: -Math.PI / 2,
|
|
endAngle: Math.PI * 1.5,
|
|
arcLineWidth: 13,
|
|
radius: '80%',
|
|
data: [
|
|
{ name: '重量占比', value: 0 }
|
|
],
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#224590'
|
|
}
|
|
},
|
|
details: {
|
|
show: true,
|
|
formatter: '重量占比{value}%',
|
|
style: {
|
|
fill: '#1ed3e5',
|
|
fontSize: 20
|
|
}
|
|
}
|
|
}
|
|
],
|
|
color: ['#03d3ec']
|
|
}
|
|
},
|
|
"抛丸": {
|
|
title: '抛丸',
|
|
total: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#ea6027',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
num: {
|
|
number: [0],
|
|
content: '{nt}',
|
|
textAlign: 'right',
|
|
style: {
|
|
fill: '#26fcd8',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
ring: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: -Math.PI / 2,
|
|
endAngle: Math.PI * 1.5,
|
|
arcLineWidth: 13,
|
|
radius: '80%',
|
|
data: [
|
|
{ name: '重量占比', value: 0 }
|
|
],
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
show: false
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#224590'
|
|
}
|
|
},
|
|
details: {
|
|
show: true,
|
|
formatter: '重量占比{value}%',
|
|
style: {
|
|
fill: '#1ed3e5',
|
|
fontSize: 20
|
|
}
|
|
}
|
|
}
|
|
],
|
|
color: ['#03d3ec']
|
|
}
|
|
}
|
|
}
|
|
|
|
let totalZl=0
|
|
for (const item of list) {
|
|
totalZl+=(item.bcshzl/1000)||0
|
|
if (item.zt>='2'){
|
|
data.计划.total.number[0]+=1
|
|
data.计划.num.number[0]+=(item.bcshzl/1000)||0
|
|
}
|
|
if (item.zt>='22'&&!!item.qgfkrq){
|
|
data.抛丸.total.number[0]+=1
|
|
data.抛丸.num.number[0]+=(item.bcshzl/1000)||0
|
|
}
|
|
if (item.zt>='42'&&!!item.llfkrq){
|
|
data.理料.total.number[0]+=1
|
|
data.理料.num.number[0]+=(item.bcshzl/1000)||0
|
|
}
|
|
if (item.zt>='52'&&!!item.hxfkrq){
|
|
data.划线.total.number[0]+=1
|
|
data.划线.num.number[0]+=(item.bcshzl/1000)||0
|
|
}
|
|
if (item.zt>='62'&&!!item.qgfkrq){
|
|
data.切割.total.number[0]+=1
|
|
data.切割.num.number[0]+=(item.bcshzl/1000)||0
|
|
}
|
|
}
|
|
|
|
if (totalZl!==0){
|
|
let d1=data.计划.num.number[0]/totalZl*100
|
|
d1=d1>0&&d1<1?1:d1
|
|
data.计划.ring.series[0].data[0].value=parseFloat(d1.toFixed(2))
|
|
|
|
let d3=data.理料.num.number[0]/totalZl*100
|
|
d3=d3>0&&d3<1?1:d3
|
|
data.理料.ring.series[0].data[0].value=parseFloat(d3.toFixed(2))
|
|
|
|
let d4=data.划线.num.number[0]/totalZl*100
|
|
d4=d4>0&&d4<1?1:d4
|
|
data.划线.ring.series[0].data[0].value=parseFloat(d4.toFixed(2))
|
|
|
|
let d5=data.切割.num.number[0]/totalZl*100
|
|
d5=d5>0&&d5<1?1:d5
|
|
data.切割.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
|
|
|
|
let d6=data.抛丸.num.number[0]/totalZl*100
|
|
d6=d6>0&&d6<1?1:d6
|
|
data.抛丸.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
|
|
}
|
|
|
|
return data
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ycl{
|
|
width: 1468px;
|
|
height: 342px;
|
|
text-align: center;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: 1px;
|
|
|
|
.gxcl{
|
|
width: 298px;
|
|
height: 309px;
|
|
background: url('../../../assets/kban/yclbg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.gxcl__title{
|
|
width: 231px;
|
|
height: 41px;
|
|
background: url('../../../assets/kban/cltitle.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
padding: 12px 26px;
|
|
margin-left: 25px;
|
|
}
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 45%;
|
|
|
|
.card-item {
|
|
background-color: rgba(6, 30, 93, 0.5);
|
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
|
width: 19%;
|
|
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: 40px;
|
|
color: #03d3ec;
|
|
}
|
|
}
|
|
|
|
.ring-charts {
|
|
height: 55%;
|
|
}
|
|
|
|
.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: 20px;
|
|
color: #1294fb;
|
|
display: flex;
|
|
font-size: 18px;
|
|
align-items: center;
|
|
|
|
.dv-digital-flop {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|