198 lines
4.1 KiB
Python
198 lines
4.1 KiB
Python
<template>
|
|
<div id="centerLeft1">
|
|
<div class="bg-color-black">
|
|
<div class="d-flex pt-2 pl-2">
|
|
<span>
|
|
<el-icon class="el-icon-s-help"></el-icon>
|
|
</span>
|
|
<div class="d-flex">
|
|
<span class="fs-xl text mx-2">二车间</span>
|
|
<dv-decoration-3 class="dv-dec-3"/>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex jc-center">
|
|
<Echart
|
|
:options="options"
|
|
id="centreLeft1Chart"
|
|
height="220px"
|
|
width="260px"
|
|
></Echart>
|
|
</div>
|
|
<!-- 4个主要的数据 -->
|
|
<div class="bottom-data">
|
|
<div
|
|
v-for="(item, index) in numberDataTwo"
|
|
:key="index"
|
|
class="item-box mt-2"
|
|
>
|
|
<div class="d-flex">
|
|
<!--<span class="coin">￥</span>-->
|
|
<dv-digital-flop class="dv-digital-flop" :config="item.number"/>
|
|
</div>
|
|
<p class="text" style="text-align: center;">
|
|
{{ item.text }}
|
|
<span class="colorYellow">(件)</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Echart from '@/components/echart'
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: {},
|
|
cdata: {
|
|
xData: ["镀膜", "夹层", "包边", "装框"],
|
|
seriesData: [
|
|
{value: 10, name: "镀膜"},
|
|
{value: 13, name: "夹层"},
|
|
{value: 15, name: "包边"},
|
|
{value: 20, name: "装框"}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
Echart
|
|
},
|
|
props:{
|
|
numberDataTwo:{
|
|
type:Array,
|
|
default:()=>{
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.changeTiming()
|
|
},
|
|
watch: {
|
|
cdata: {
|
|
handler(newData) {
|
|
this.options = {
|
|
color: [
|
|
"#fb7293",
|
|
"#ffdb5c",
|
|
"#9fe6b8",
|
|
"#ff9f7f",
|
|
"#32c5e9",
|
|
],
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
toolbox: {
|
|
show: true
|
|
},
|
|
calculable: true,
|
|
legend: {
|
|
orient: "horizontal",
|
|
icon: "circle",
|
|
bottom: 0,
|
|
x: "center",
|
|
data: newData.xData,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "通过率统计",
|
|
type: "pie",
|
|
radius: [10, 50],
|
|
roseType: "area",
|
|
center: ["50%", "40%"],
|
|
data: newData.seriesData
|
|
}
|
|
]
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
changeTiming() {
|
|
setInterval(() => {
|
|
this.changeNumber()
|
|
}, 3000)
|
|
},
|
|
changeNumber() {
|
|
this.numberDataTwo.forEach((item) => {
|
|
let num = 0;
|
|
item.number.number[0] = 0;
|
|
item.number.number[0] = num;
|
|
item.number = {...item.number}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$box-width: 300px;
|
|
$box-height: 410px;
|
|
|
|
#centerLeft1 {
|
|
padding: 16px;
|
|
height: $box-height;
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
|
|
.bg-color-black {
|
|
height: $box-height - 30px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.text {
|
|
color: #c3cbde;
|
|
}
|
|
|
|
.dv-dec-3 {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 20px;
|
|
top: -3px;
|
|
}
|
|
|
|
.bottom-data {
|
|
.item-box {
|
|
& > div {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
font-size: 14px;
|
|
float: right;
|
|
position: relative;
|
|
width: 50%;
|
|
color: #d3d6dd;
|
|
|
|
.dv-digital-flop {
|
|
width: 120px;
|
|
height: 30px;
|
|
}
|
|
|
|
// 金币
|
|
.coin {
|
|
position: relative;
|
|
top: 6px;
|
|
font-size: 20px;
|
|
color: #ffc107;
|
|
}
|
|
|
|
.colorYellow {
|
|
color: yellowgreen;
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|