<!--
|
* @Author: daidai
|
* @Date: 2022-02-28 16:16:42
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2022-07-20 17:57:11
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
-->
|
<template>
|
<ul class="user_Overview flex" v-if="pageflag">
|
<li class="user_Overview-item" style="color: #00fdfa">
|
<div class="user_Overview_nums allnum ">
|
<dv-digital-flop :config="inboundConfig" style="width:100%;height:100%;" />
|
</div>
|
<p>实框入库</p>
|
<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="outboundConfig" style="width:100%;height:100%;" />
|
</div>
|
<p>实框出库</p>
|
<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: #E6A23C">
|
<div class="user_Overview_nums offline">
|
<dv-digital-flop :config="backConfig" style="width:100%;height:100%;" />
|
</div>
|
<p>空框入库</p>
|
<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: #f56c6c">
|
<div class="user_Overview_nums laramnum">
|
<dv-digital-flop :config="surplusConfig" style="width:100%;height:100%;" />
|
</div>
|
<p>空框出库</p>
|
<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>3号检修台</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>4号检修台</p>
|
<br>
|
<p>{{stationstate[3].station_state}}</p>
|
<p v-if="stationstate[3].station_state == '检修中'">{{stationstate[3].station_checkName}}</p>
|
</li> -->
|
</ul>
|
<Reacquire v-else @onclick="getData" line-height="200px">
|
重新获取
|
</Reacquire>
|
</template>
|
|
<script>
|
import { currentGET } from 'api/modules'
|
import {Floorfault} from "@/api/http.js"
|
|
let style = {
|
fontSize: 24
|
}
|
export default {
|
data() {
|
return {
|
options: {},
|
userOverview: {
|
alarmNum: 2,
|
offlineNum: 3,
|
onlineNum: 5,
|
totalNum: 10,
|
},
|
stationstate:[],
|
pageflag: true,
|
timer: null,
|
backConfig: { //空框入库
|
number: [50],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#00fdfa",
|
fill: "#E6A23C",
|
},
|
},
|
surplusConfig: { //成品余料
|
number: [100],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#00fdfa",
|
fill: "#f56c6c",
|
},
|
},
|
inboundConfig: { //成品入库
|
number: [100],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#00fdfa",
|
fill: "#00fdfa",
|
},
|
},
|
outboundConfig: { //成品出库
|
number: [0],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#07f7a8",
|
fill: "#07f7a8",
|
},
|
},
|
};
|
},
|
filters: {
|
numsFilter(msg) {
|
return msg || 0;
|
},
|
},
|
created() {
|
this.getData()
|
},
|
mounted() {
|
},
|
beforeDestroy() {
|
this.clearData()
|
|
},
|
methods: {
|
clearData() {
|
if (this.timer) {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
},
|
async getData() {
|
this.pageflag = true;
|
|
var rep1 = await Floorfault();
|
var rep=rep1.filter(it=>it.roadway.includes("JZ"))
|
|
console.log(rep)
|
this.inboundConfig={
|
number: [rep.filter(task => task.taskType === "入库").length]
|
}
|
this.outboundConfig={
|
number: [rep.filter(task => task.taskType === "出库").length]
|
}
|
this.backConfig={
|
...this.backConfig,
|
number: [rep.filter(task => task.taskType === "空托盘入库").length]
|
}
|
this.surplusConfig={
|
...this.surplusConfig,
|
number: [rep.filter(task => task.taskType === "空托盘出库").length]
|
}
|
// this.onlineconfig = {
|
// ...this.onlineconfig,
|
// number: [rep[0].station_qty]
|
// }
|
// this.config = {
|
// ...this.config,
|
// number: [rep[1].station_qty]
|
// }
|
// this.offlineconfig = {
|
// ...this.offlineconfig,
|
// number: [rep[2].station_qty]
|
// }
|
// this.offlineconfig = {
|
// ...this.offlineconfig,
|
// number: [rep[3].station_qty]
|
// }
|
this.switper();
|
},
|
//轮询
|
switper() {
|
if (this.timer) {
|
return
|
}
|
let looper = (a) => {
|
this.getData()
|
};
|
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
},
|
},
|
};
|
</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 {
|
|
// background-image: url("../../assets/img/left_top_lan.png");
|
&::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>
|
