code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-17 16:36:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

大屏展示绑定设备相关数据

Browse Source
This commit is contained in:
kerwincui
2022-08-17 22:21:58 +08:00
parent e9f0175286
commit bdbfb187ab
2 changed files with 207 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue/src/views/bigScreen/home.vue
View File

@@ -10,7 +10,7 @@
<div class="guang"></div> <div class="guang"></div>
<div class="d-flex jc-center"> <div class="d-flex jc-center">
<div class="title"> <div class="title">
<span class="title-text">物美智能系统</span> <span class="title-text">物美智能物联网平台</span>
</div> </div>
</div> </div>
<div class="timers "> <div class="timers ">

388
vue/src/views/bigScreen/indexs/left-top.vue
View File

@@ -1,222 +1,246 @@
<template> <template>
<ul class="user_Overview flex" v-if="pageflag"> <ul class="user_Overview flex" v-if="pageflag">
<li class="user_Overview-item" style="color: #00fdfa"> <li class="user_Overview-item" style="color: #00fdfa">
<div class="user_Overview_nums allnum "> <div class="user_Overview_nums allnum ">
<dv-digital-flop :config="config" style="width:100%;height:100%;" /> <dv-digital-flop :config="config" style="width:100%;height:100%;" />
</div> </div>
<p>总设备数</p> <p>总设备数</p>
</li> </li>
<li class="user_Overview-item" style="color: #07f7a8"> <li class="user_Overview-item" style="color: #07f7a8">
<div class="user_Overview_nums online"> <div class="user_Overview_nums online">
<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" /> <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
</div> </div>
<p>在线数</p> <p>在线数</p>
</li> </li>
<li class="user_Overview-item" style="color: #e3b337"> <li class="user_Overview-item" style="color: #e3b337">
<div class="user_Overview_nums offline"> <div class="user_Overview_nums offline">
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" /> <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
</div> </div>
<p>掉线数</p> <p>掉线数</p>
</li> </li>
<li class="user_Overview-item" style="color: #f5023d"> <li class="user_Overview-item" style="color: #f5023d">
<div class="user_Overview_nums laramnum"> <div class="user_Overview_nums laramnum">
<dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" /> <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
</div> </div>
<p>告警次数</p> <p>告警次数</p>
</li> </li>
</ul> </ul>
<Reacquire v-else @onclick="getData" line-height="200px"> <Reacquire v-else @onclick="getData" line-height="200px">
重新获取 重新获取
</Reacquire> </Reacquire>
</template> </template>
<script> <script>
import { currentGET } from '@/api/bigScreen/modules' import {
let style = { getDeviceStatistic,
} from "@/api/iot/device";
import {
listAllDeviceShort,
} from "@/api/iot/device";
let style = {
fontSize: 24 fontSize: 24
} }
export default { export default {
data() { data() {
return { return {
options: {}, // 设备列表
userOverview: { deviceList: [],
alarmNum: 0, // 设备统计信息
offlineNum: 0, deviceStatistic: {},
onlineNum: 0, // 设备总数
totalNum: 0, deviceCount: 0,
}, options: {},
pageflag: true, userOverview: {
timer: null, alarmNum: 0,
config: { offlineNum: 0,
number: [100], onlineNum: 0,
content: '{nt}', totalNum: 0,
style: { },
...style, pageflag: true,
// stroke: "#00fdfa", timer: null,
fill: "#00fdfa", config: {
}, number: [],
}, content: '{nt}',
onlineconfig: { style: {
number: [0], ...style,
content: '{nt}', // stroke: "#00fdfa",
style: { fill: "#00fdfa",
...style, },
// stroke: "#07f7a8", },
fill: "#07f7a8", onlineconfig: {
}, number: [0],
}, content: '{nt}',
offlineconfig: { style: {
number: [0], ...style,
content: '{nt}', // stroke: "#07f7a8",
style: { fill: "#07f7a8",
...style, },
// stroke: "#e3b337", },
fill: "#e3b337", offlineconfig: {
}, number: [0],
}, content: '{nt}',
laramnumconfig: { style: {
number: [0], ...style,
content: '{nt}', // stroke: "#e3b337",
style: { fill: "#e3b337",
...style, },
// stroke: "#f5023d", },
fill: "#f5023d", laramnumconfig: {
}, number: [0],
} content: '{nt}',
style: {
...style,
// stroke: "#f5023d",
fill: "#f5023d",
},
}
}; };
}, },
filters: { filters: {
numsFilter(msg) { numsFilter(msg) {
return msg || 0; return msg || 0;
}, },
}, },
created() { created() {
this.getData() this.getData()
},
mounted() {
}, },
mounted() {},
beforeDestroy() { beforeDestroy() {
this.clearData() this.clearData()
}, },
methods: { methods: {
clearData() { clearData() {
if (this.timer) { if (this.timer) {
clearInterval(this.timer) clearInterval(this.timer)
this.timer = null this.timer = null
}
},
getData() {
this.pageflag = true;
getDeviceStatistic().then(res => {
// this.deviceStatistic = response.data;
if (!this.timer) {
console.log("设备总览", res);
}
if (res.code == 200) {
this.userOverview = res.data;
this.laramnumconfig = {
...this.laramnumconfig,
number: [res.data.alertCount]
} }
}, this.getAllDevice();
getData() { // 轮询
this.pageflag = true; this.switper()
currentGET("big2").then((res) => { } else {
if (!this.timer) { this.pageflag = false;
console.log("设备总览", res); this.$Message.warning(res.msg);
} }
if (res.success) { });
this.userOverview = res.data; },
this.onlineconfig = { //轮询
...this.onlineconfig, switper() {
number: [res.data.onlineNum] if (this.timer) {
} return
this.config = { }
...this.config, let looper = (a) => {
number: [res.data.totalNum] // this.getData()
} };
this.offlineconfig = { this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
...this.offlineconfig, },
number: [res.data.offlineNum] /**查询所有设备 */
} getAllDevice() {
this.laramnumconfig = { listAllDeviceShort(this.queryParams).then(response => {
...this.laramnumconfig, this.deviceList = response.rows;
number: [res.data.alarmNum] this.deviceCount = response.total;
} let online = this.deviceList.filter(x => x.status == 3).length;
this.switper() let offline = this.deviceList.length - online;
} else { this.config = {
this.pageflag = false; ...this.config,
this.$Message.warning(res.msg); number: [this.deviceCount]
} }
}); this.onlineconfig = {
}, ...this.onlineconfig,
//轮询 number: [online]
switper() { }
if (this.timer) { this.offlineconfig = {
return ...this.offlineconfig,
} number: [offline]
let looper = (a) => { }
this.getData() })
}; },
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
},
}, },
}; };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.user_Overview { .user_Overview {
li { li {
flex: 1; flex: 1;
p { p {
text-align: center; text-align: center;
height: 16px; height: 16px;
font-size: 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;
} }
.user_Overview_nums { &.bgdonghua::before {
width: 100px; animation: rotating 14s linear infinite;
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 { .allnum {
// background-image: url("../../assets/img/left_top_lan.png"); // background-image: url("../../assets/img/left_top_lan.png");
&::before { &::before {
background-image: url("../../../assets/bigScreen/img/left_top_lan.png"); background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
}
} }
}
.online { .online {
&::before { &::before {
background-image: url("../../../assets/bigScreen/img/left_top_lv.png"); background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
}
} }
}
.offline { .offline {
&::before { &::before {
background-image: url("../../../assets/bigScreen/img/left_top_huang.png"); background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
}
} }
}
.laramnum { .laramnum {
&::before { &::before {
background-image: url("../../../assets/bigScreen/img/left_top_hong.png"); background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
}
} }
}
} }
} }
</style>
</style>