<!--
|
* @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="onlineconfig" style="width:100%;height:100%;" />
|
</div>
|
<p>10号检修台</p>
|
<br>
|
<p>{{stationstate[9].station_state}}</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>
|
<p>11号检修台</p>
|
<br>
|
<p>{{stationstate[10].station_state}}</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>12号检修台</p>
|
<br>
|
<p>{{stationstate[11].station_state}}</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: {},
|
stationstate:[],
|
userOverview: {
|
alarmNum: 2,
|
offlineNum: 3,
|
onlineNum: 5,
|
totalNum: 10,
|
},
|
pageflag: true,
|
timer: null,
|
config: {
|
number: [100],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#00fdfa",
|
fill: "#00fdfa",
|
},
|
},
|
onlineconfig: {
|
number: [0],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#07f7a8",
|
fill: "#07f7a8",
|
},
|
},
|
offlineconfig: {
|
number: [0],
|
content: '{nt}',
|
style: {
|
...style,
|
// stroke: "#e3b337",
|
fill: "#e3b337",
|
},
|
},
|
};
|
},
|
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;
|
// currentGET("big2").then((res) => {
|
// if (!this.timer) {
|
// console.log("设备总览2", res);
|
// }
|
// if (res.success) {
|
// this.userOverview = res.data;
|
// this.onlineconfig = {
|
// ...this.onlineconfig,
|
// number: [1]
|
// }
|
// this.config = {
|
// ...this.config,
|
// number: [7]
|
// }
|
// this.offlineconfig = {
|
// ...this.offlineconfig,
|
// number: [4]
|
// }
|
// this.laramnumconfig = {
|
// ...this.laramnumconfig,
|
// number: [10]
|
// }
|
// this.switper();
|
// } else {
|
// this.pageflag = false;
|
// this.$Message.warning(res.msg);
|
// }
|
// });
|
let rep = await Floorfault((a)=>{
|
});
|
this.stationstate=rep;
|
this.onlineconfig = {
|
...this.onlineconfig,
|
number: [rep[9].station_qty]
|
}
|
this.config = {
|
...this.config,
|
number: [rep[10].station_qty]
|
}
|
this.offlineconfig = {
|
...this.offlineconfig,
|
number: [rep[11].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>
|
