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:
孙阿龙
2022-08-12 11:06:53 +08:00
parent ce7bbf8c46
commit 0934096254
2 changed files with 217 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
vue/src/views/bigScreen/indexs/center-map.vue
View File

@@ -43,7 +43,8 @@ export default {
methods: { methods: {
getData(code) { getData(code) {
currentGET('big8',{regionCode:code}).then(res => { currentGET('big8',{regionCode:code}).then(res => {
console.log('设备分布', res); console.log('设备分布', JSON.stringify(res));
//{"success":true,"data":{"dataList":[{"name":"湖北省","value":430},{"name":"浙江省","value":143},{"name":"广东省","value":668},{"name":"湖南省","value":460},{"name":"陕西省","value":764},{"name":"吉林省","value":405},{"name":"重庆","value":753},{"name":"江苏省","value":849}],"regionCode":-1}}
if (res.success) { if (res.success) {
if (!code) { if (!code) {
this.userCode = res.data.regionCode; this.userCode = res.data.regionCode;
@@ -57,7 +58,8 @@ export default {
}) })
}, },
getGeojson(name, mydata) { getGeojson(name, mydata) {
console.log('设备分布1', name);
console.log('设备分布2', mydata);
if (name == -1) { if (name == -1) {
name = 'china' name = 'china'
} }
@@ -306,10 +308,11 @@ export default {
this.options = option; this.options = option;
}, },
message(text) { message(text) {
this.$Message({ // this.$Message({
text: text, // text: text,
type: 'warning' // type: 'warning'
}) // })
alert(text);
}, },
mapclick() { mapclick() {
if (this.echartBindClick || this.userCode !== -1) return if (this.echartBindClick || this.userCode !== -1) return
@@ -317,10 +320,12 @@ export default {
this.$refs.CenterMap.chart.on("click", (params) => { this.$refs.CenterMap.chart.on("click", (params) => {
// console.log(params); // console.log(params);
let xzqData = xzqCode[params.name]; let xzqData = xzqCode[params.name];
console.log(xzqData)
if (xzqData) { if (xzqData) {
this.getData(xzqData.adcode); this.getData(xzqData.adcode);
} else { } else {
this.message("暂无下级地市!"); // alert("暂无下级地市!");
// this.message("暂无下级地市!");
} }
}); });
this.echartBindClick = true this.echartBindClick = true

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

@@ -1,222 +1,245 @@
<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.switper()
this.pageflag = true; } else {
currentGET("big2").then((res) => { this.pageflag = false;
if (!this.timer) { this.$Message.warning(res.msg);
console.log("设备总览", res); }
} });
if (res.success) { },
this.userOverview = res.data; //轮询
this.onlineconfig = { switper() {
...this.onlineconfig, if (this.timer) {
number: [res.data.onlineNum] return
} }
this.config = { let looper = (a) => {
...this.config, this.getData()
number: [res.data.totalNum] };
} this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
this.offlineconfig = { },
...this.offlineconfig, /**查询所有设备 */
number: [res.data.offlineNum] getAllDevice() {
} listAllDeviceShort(this.queryParams).then(response => {
this.laramnumconfig = { this.deviceList = response.rows;
...this.laramnumconfig, this.deviceCount = response.total;
number: [res.data.alarmNum] let online = this.deviceList.filter(x => x.status == 3).length;
} let offline = this.deviceList.length - online;
this.switper() this.config = {
} else { ...this.config,
this.pageflag = false; number: [this.deviceCount]
this.$Message.warning(res.msg); }
} this.onlineconfig = {
}); ...this.onlineconfig,
}, number: [online]
//轮询 }
switper() { this.offlineconfig = {
if (this.timer) { ...this.offlineconfig,
return 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>