294 lines
7.6 KiB
Vue
294 lines
7.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="leftBox">
|
|
<div class="leftTop">
|
|
<leftTop
|
|
title="塔吊设备"
|
|
:towerList="towerList"
|
|
:totalTowerDev="totalTowerDev"
|
|
:totalDangerTowerDev="totalDangerTowerDev"
|
|
/>
|
|
</div>
|
|
<div class="leftCenter">
|
|
<!-- <leftCenter title="AI分析"></leftCenter> -->
|
|
<leftCenter
|
|
title="升降机设备"
|
|
:lifterList="lifterList"
|
|
:totalLifterDev="totalLifterDev"
|
|
:totalDangerLifterDev="totalDangerLifterDev"
|
|
></leftCenter>
|
|
</div>
|
|
<div class="leftBottom">
|
|
<leftBottom
|
|
title="视频设备"
|
|
:videoCountList="videoCountList"
|
|
></leftBottom>
|
|
</div>
|
|
</div>
|
|
<div class="centerBox">
|
|
<div class="centerTop">
|
|
<centerTop title="建筑总览"></centerTop>
|
|
</div>
|
|
<div class="centerBottom">
|
|
<CenterBottom title="视频监控"></CenterBottom>
|
|
</div>
|
|
</div>
|
|
<div class="rightBox">
|
|
<div class="rightTop">
|
|
<rightTop title="人脸闸机" :ufaceList="ufaceList"></rightTop>
|
|
</div>
|
|
<div class="rightCenter">
|
|
<rightCenter title="AI分析"></rightCenter>
|
|
</div>
|
|
<div class="rightBottom">
|
|
<rightBottom
|
|
title="环境监测"
|
|
:onlineNum="environment.online"
|
|
:devOnline="environment.devOnline"
|
|
:offlineNum="environment.offline"
|
|
:list="environment.list"
|
|
></rightBottom>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import leftTop from './leftTop'
|
|
import leftCenter from './leftCenter'
|
|
import leftBottom from './leftBottom'
|
|
import centerTop from './centerTop'
|
|
import CenterBottom from './CenterBottom'
|
|
import rightTop from './rightTop'
|
|
import rightCenter from './rightCenter'
|
|
import rightBottom from './rightBottom'
|
|
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
|
|
import {
|
|
selectTowerDevAlarmCountList,
|
|
selectLifterDevAlarmCountList,
|
|
selectVideoCountList,
|
|
selectUfaceDevStatisticsList,
|
|
selectEnvironmentDevAlaramCountList,
|
|
getAllTowerDangerInfo,
|
|
getAllLifterDangerInfo,
|
|
getEnvironmentInfo
|
|
} from '@/assets/js/api/dataBoard'
|
|
export default {
|
|
components: {
|
|
leftTop,
|
|
leftCenter,
|
|
leftBottom,
|
|
centerTop,
|
|
CenterBottom,
|
|
rightTop,
|
|
rightCenter,
|
|
rightBottom
|
|
},
|
|
data() {
|
|
return {
|
|
towerList: [], // 塔吊设备列表
|
|
lifterList: [], // 升降机设备列表
|
|
videoCountList: {}, // 视频设备列表
|
|
ufaceList: {}, // 人脸闸机列表
|
|
uface: [],
|
|
ufaceInCount: 0, //人脸闸机今日进场人数
|
|
totalTowerDev: 0, //塔吊数量
|
|
totalDangerTowerDev: 0, // 塔吊报警数量
|
|
totalLifterDev: 0, //升降机数量
|
|
totalDangerLifterDev: 0, //升降机报警数量
|
|
|
|
// 环境监测
|
|
environment: {
|
|
online: 0,
|
|
offline: 0,
|
|
devOnline: 0,
|
|
devNum: 0,
|
|
list: []
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getAlarmInfor()
|
|
this.getAllDev()
|
|
},
|
|
methods: {
|
|
// 获取设备数量
|
|
getAlarmInfor() {
|
|
let data = {
|
|
sn: this.$store.state.projectSn
|
|
}
|
|
// 获取塔吊数量
|
|
getAllTowerDangerInfo(data).then((res) => {
|
|
if (res.code === 200) {
|
|
// console.log('获取塔吊数量',res)
|
|
let { result } = res
|
|
this.totalTowerDev = result.devCount.devNum
|
|
this.totalDangerTowerDev = result.towerAlarmCount
|
|
console.log(result)
|
|
}
|
|
})
|
|
// getAiVideoInfo
|
|
// 获取升降机数量
|
|
getAllLifterDangerInfo(data).then((res) => {
|
|
if (res.code === 200) {
|
|
let { result } = res
|
|
this.totalLifterDev = result.devCount.devNum
|
|
this.totalDangerLifterDev = result.lifterAlarmCount
|
|
}
|
|
})
|
|
// 获取环境监测数量
|
|
getEnvironmentInfo(data).then((res) => {
|
|
console.log('获取环境监测数量', res)
|
|
if (res.code === 200) {
|
|
let { result } = res
|
|
this.$set(this.environment, 'offline', result.devTotal.devNum)
|
|
this.$set(this.environment, 'devOnline', result.devTotal.devOnline)
|
|
this.$set(this.environment, 'online', result.alarmTotal.totalAlarm)
|
|
}
|
|
})
|
|
// // 获取报警列表数据
|
|
// getAIDangerList(data).then((res) => {
|
|
// if (res.code === 200) {
|
|
// let { result } = res;
|
|
// console.log(result);
|
|
// let type = [
|
|
// "烟感",
|
|
// "明火",
|
|
// "人员倒地",
|
|
// "未戴安全帽",
|
|
// "区域入侵",
|
|
// "越界入侵",
|
|
// "人员聚集衣",
|
|
// "反光衣",
|
|
// "裸土覆盖",
|
|
// ];
|
|
// this.AIDangerAlarmList = result.slice(0, 6).map((x) => {
|
|
// return {
|
|
// createTime: x.createTime,
|
|
// hardwareName: x.hardwareName,
|
|
// id: x.id,
|
|
// imageUrl: x.imageUrl,
|
|
// location: x.location,
|
|
// projectName: x.projectName,
|
|
// alarmType: type[x.alarmType - 1],
|
|
// };
|
|
// });
|
|
// }
|
|
// this.pieAnalyse()
|
|
// });
|
|
},
|
|
// 获取所有设备信息
|
|
getAllDev() {
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn
|
|
}
|
|
//获取塔吊设备信息
|
|
selectTowerDevAlarmCountList(data).then((res) => {
|
|
if (res.code === 200) {
|
|
this.towerList = res.result.devList
|
|
// console.log('获取塔吊设备信息',this.towerList)
|
|
}
|
|
})
|
|
// 获取升降机设备信息
|
|
selectLifterDevAlarmCountList(data).then((res) => {
|
|
console.log('获取升降机设备信息: ', res)
|
|
if (res.code === 200) {
|
|
this.lifterList = res.result.devList
|
|
console.log(res)
|
|
}
|
|
})
|
|
// 视频设备数量
|
|
selectVideoCountList(data).then((res) => {
|
|
if (res.code === 200) {
|
|
console.log('获取视频设备信息: ', res)
|
|
|
|
this.videoCountList = res.result
|
|
}
|
|
})
|
|
// 获取人脸闸机设备信息
|
|
selectUfaceDevStatisticsList(data).then((res) => {
|
|
if (res.code === 200) {
|
|
console.log('获取人脸闸机设备信息', res)
|
|
this.ufaceList = res.result
|
|
this.uface = res.result.devList
|
|
this.uface.forEach((item) => {
|
|
this.ufaceInCount += item.inTotalNum
|
|
})
|
|
}
|
|
})
|
|
// 获取环境监测信息
|
|
selectEnvironmentDevAlaramCountList(data).then((res) => {
|
|
if (res.code === 200) {
|
|
console.log('获取环境监测信息', res)
|
|
|
|
this.$set(this.environment, 'list', res.result.devList)
|
|
}
|
|
})
|
|
let data2 = {
|
|
sn: this.$store.state.projectSn
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #07162b;
|
|
}
|
|
.topBox {
|
|
height: 20%;
|
|
}
|
|
.leftBox {
|
|
width: 25%;
|
|
height: 100%;
|
|
margin-right: 15px;
|
|
.leftTop {
|
|
height: 35%;
|
|
margin-bottom: 15px;
|
|
}
|
|
.leftCenter {
|
|
height: 30%;
|
|
margin-bottom: 15px;
|
|
}
|
|
.leftBottom {
|
|
height: 30%;
|
|
}
|
|
}
|
|
.centerBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 60%;
|
|
height: 100%;
|
|
margin-right: 15px;
|
|
.centerTop {
|
|
height: 66.6%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.centerBottom {
|
|
height: 30%;
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.rightBox {
|
|
width: 25%;
|
|
height: 100%;
|
|
.rightTop {
|
|
height: 35%;
|
|
margin-bottom: 15px;
|
|
}
|
|
.rightCenter {
|
|
height: 30%;
|
|
margin-bottom: 15px;
|
|
}
|
|
.rightBottom {
|
|
height: 30%;
|
|
}
|
|
}
|
|
</style>
|