<template>
|
<ul class="user_Overview flex">
|
<li class="user_Overview-item" style="color: #00fdfa">
|
<div class="user_Overview_nums allnum ">
|
<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
|
</div>
|
<br>
|
<p>{{stationstate[0].station_state}}</p>
|
<p v-if="stationstate[0].station_state == '检修中'">{{stationstate[0].station_checkName}}</p>
|
</li>
|
<li class="user_Overview-item" style="color: #07f7a8">
|
<div class="user_Overview_nums online">
|
<dv-digital-flop :config="config" style="width:100%;height:100%;" />
|
</div>
|
<br>
|
<p>{{stationstate[1].station_state}}</p>
|
<p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p>
|
</li>
|
<!-- <li class="user_Overview-item" style="color: #e3b337">
|
<div class="user_Overview_nums offline">
|
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
|
</div>
|
<p>7号检修台</p>
|
<br>
|
<p>{{stationstate[2].station_state}}</p>
|
<p v-if="stationstate[2].station_state == '检修中'">{{stationstate[2].station_checkName}}</p>
|
</li>
|
<li class="user_Overview-item" style="color: #e3b337">
|
<div class="user_Overview_nums offline">
|
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
|
</div>
|
<p>8号检修台</p>
|
<br>
|
<p>{{stationstate[3].station_state}}</p>
|
<p v-if="stationstate[3].station_state == '检修中'">{{stationstate[3].station_checkName}}</p>
|
</li> -->
|
</ul>
|
</template>
|
|
<script>
|
let style = {
|
fontSize: 24
|
}
|
export default {
|
data() {
|
return {
|
stationstate: [
|
{ station_state: '入库量', station_checkName: '' },
|
{ station_state: '出库量', station_checkName: '' },
|
{ station_state: '待机中', station_checkName: '' },
|
{ station_state: '故障中', station_checkName: '' }
|
],
|
config: {
|
number: [7],
|
content: '{nt}',
|
style: {
|
...style,
|
fill: "#00fdfa",
|
},
|
},
|
onlineconfig: {
|
number: [1],
|
content: '{nt}',
|
style: {
|
...style,
|
fill: "#07f7a8",
|
},
|
},
|
offlineconfig: {
|
number: [4],
|
content: '{nt}',
|
style: {
|
...style,
|
fill: "#e3b337",
|
},
|
},
|
};
|
},
|
filters: {
|
numsFilter(msg) {
|
return msg || 0;
|
},
|
},
|
};
|
</script>
|
|
<style lang='scss' scoped>
|
.user_Overview {
|
li {
|
flex: 1;
|
|
p {
|
text-align: center;
|
height: 16px;
|
font-size: 16px;
|
}
|
|
.user_Overview_nums {
|
width: 100px;
|
height: 100px;
|
text-align: center;
|
line-height: 100px;
|
font-size: 22px;
|
margin: 50px auto 30px;
|
background-size: cover;
|
background-position: center center;
|
position: relative;
|
|
&::before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
}
|
|
&.bgdonghua::before {
|
animation: rotating 14s linear infinite;
|
}
|
}
|
|
.allnum {
|
&::before {
|
background-image: url("../../assets/img/left_top_lan.png");
|
}
|
}
|
|
.online {
|
&::before {
|
background-image: url("../../assets/img/left_top_lv.png");
|
}
|
}
|
|
.offline {
|
&::before {
|
background-image: url("../../assets/img/left_top_huang.png");
|
}
|
}
|
|
.laramnum {
|
&::before {
|
background-image: url("../../assets/img/left_top_hong.png");
|
}
|
}
|
}
|
}
|
</style>
|
