SD-party-school/src/views/Home.vue

<template>
  	<div class="home">
	  	<div v-wechat-title="$route.meta.title"></div>
		<el-row class="contentClass contnetLift">
			<template>
				<info class="info" :resInfo="data.info" :websocket="data.winfo" />
				<!-- <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control> -->
				<parking-lot class="parkingLot"  :resInfo="data.parkingLot" :websocket="data.wparkingLot" />
				<!-- <monitor class="monitor" /> -->
				<!-- <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
				<give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm> -->
			</template>
		</el-row>
		<el-row class="contnetCenter" >
			<!-- <iframe src="https://www.thingjs.com/s/cd7b1592538e0f4a9572c55e?params=105b0f77fd24654d4eebc434e9" frameborder="0" id="iframe"></iframe> -->
		</el-row>
		<el-row class="contentClass contnetRight">
			<emergencyDisasterPrevention class="emergencyDisasterPrevention" :resInfo="data.emergencyDisasterPrevention"  />
			<access-control class="accessControl" :resInfo="data.accessControl" :websocket="data.waccessControl" />
			<computerRoom class="computerRoom" :resInfo="data.computerRoom" :websocket="data.wcomputerRoom" />
			<giveAnAlarm class="giveAnAlarm" :resInfo="data.giveAnAlarm"  :websocket="data.wgiveAnAlarm" @giveAnAlarmClick="giveAnAlarmClick" />
		</el-row>
		<SpringFrame  v-if="springFrameState" :resInfo="item" :close2="item.close" @close="SpringFrameChange" />
	</div>
</template>
<script>
// 党校
import info from "../components/SD-school/info"; // 综合信息统计
import accessControl from "../components/SD-school/access-control"; // 门禁进出入统计
import parkingLot from "../components/SD-school/parking-lot"; // 停车场统计
import monitor from "../components/SD-school/monitor"; // 视频监控
import emergencyDisasterPrevention from "../components/SD-school/emergency-disaster-prevention" //应急防灾
import computerRoom from "../components/SD-school/computer-room"; // 机房温度
// import conferenceRoom from "../components/SD-school/conference-room"; // 会议室统计
import giveAnAlarm from "../components/SD-school/give-an-alarm"; // 综合告警列表

import SpringFrame from "../components/SD-school/Spring-frame"; // 弹框
import { 
	accessControlApi, 
	computerRoomApi, 
	emergencyDisasterPreventionApi, 
	parkingLotApi, 
	infoApi,
	typeApi,
	shebeifyApi,
	tbDevice,
} from "@/plugins/api";
export default {
  	name: "Home",
  	components: {
		info,
		parkingLot,
		monitor,
		emergencyDisasterPrevention,
		accessControl,
		computerRoom,
		giveAnAlarm,
		SpringFrame,
		
  	},
  	data() {
		return {
			// isLeft: true,
			// isRight: true,
			// resList:[],
			// imageList:[],
			
			data:{//主页各系统板块初始数据及websocket数据
				"accessControl":[],
				"parkingLot":[],
				"computerRoom":[],
				"emergencyDisasterPrevention":[],
				"parkingLot":[],
				"info":[],
				"giveAnAlarm":[],
				"winfo":[],

				
				"wparkingLot":[],
				"wemergencyDisasterPrevention":[],
				"waccessControl":[],
				"wcomputerRoom":[],
				"wgiveAnAlarm":[],
				
			},
			springFrameState:true,//弹框
			item:{ //弹框下各系统板块
				"warningState":false,
				"meetingState":true,
				"equipmentState":false,
				"videoState":false,
				"xinfaState":false,

				"warningMessage":{},
				"equipmentMessage":{},
				"videoMessage":{},
				"xinfaMessage":{},
				"time":null,
				"close":false,
				"xinfaMessage":{},
				
				// "alertMessage":{ //
				// 	name:null,
				// 	data:{}
				// },
				
				// "time":false
				// "music":false
			},
		};
	},
	created() {
		this.getData()
	},
	mounted() {
		var that = this;
		window.addEventListener("message",function (event) {
			console.log(event)
			var isDOM = typeof event.data === "object";
			// // 监听父窗口发送过来的数据向服务器发送post请求
			var data = event.data;
			if (isDOM == true) {
				if ("param" in data == true) {
					if (data.param.name === "1楼会议室" && data.param.id === "109") { //会议室弹框开启
						// setTimeout(()=>{
						// 	that.springFrameState = false
						// },1)
						// setTimeout(()=>{
						// 	that.springFrameState = true
						// 	that.item.meetingState = true
						// },2)
						console.log("会议室弹框暂时关闭")
					}else if(data.param.id =="B1" || data.param.id =="F1" || data.param.id =="F2" || data.param.id =="F3" || data.param.id =="F4" 
						|| data.param.id =="F5" || data.param.id =="F6" || data.param.id =="F7" || data.param.id =="F8" || data.param.id =="F9" 
						|| data.param.id =="F10" || data.param.id =="F11" || data.param.id =="F12" || data.param.id =="F13"){ //楼层id过滤
						console.log("楼层")
					}else{
						tbDevice(data.param.id).then(res =>{ //设备信息查询
						console.log(res)
							setTimeout(()=>{
								that.springFrameState = false
							},1)
							setTimeout(()=>{
								console.log(res.data.detail)
								let name = data.param.name
								if(name.indexOf("摄像头")>-1){ //摄像头
									console.log("摄像头")
									that.springFrameState = true
									that.item.videoState = true
									that.item.videoMessage = res.data.detail
								}else{//设备
									console.log("设备")
									if(res.data.detail){
										if(res.data.detail.manufacturer == 3){
											console.log("信发")
											that.springFrameState = true
											that.item.xinfaState = true
											that.item.xinfaMessage = res.data.detail
										}else{
											console.log("信发、摄像头外设备")
											that.springFrameState = true
											that.item.equipmentState = true
											that.item.equipmentMessage = res.data.detail
										}
									}else{
										console.log("信发、摄像头外设备")
										that.springFrameState = true
										that.item.equipmentState = true
										that.item.equipmentMessage = res.data.detail
									}
								}
							},2)
							
							
						})
					}
				}
			}
		},false)
	},
	methods: {
		postMsg(newValue) {
			var myframe = document.getElementById("iframe"); //获取iframe 
			myframe.contentWindow.postMessage({ state: false, name: "门禁" }, "*"); //childDomain是子页面的源（协议+主机+端口号）
		},
		async getData(){
			
			accessControlApi().then(res =>{ // 门禁进出入统计
				this.data.accessControl = res.data
			})
			computerRoomApi().then(res =>{ // 机房温度
				this.data.computerRoom = res.data
			})
			emergencyDisasterPreventionApi().then(res =>{ //应急防灾
				this.data.emergencyDisasterPrevention = res.data
			})
			parkingLotApi().then(res =>{ //停车场统计
				this.data.parkingLot = res.data
			})
			infoApi().then(res =>{ //综合信息统计 告警信息
				this.data.info = res.data
			})
			// typeApi().then(res =>{ //综合信息统计 告警信息
				shebeifyApi({"current":"1","size":"10"}).then(res =>{
				this.data.giveAnAlarm = res.data.records
				})
			// })
			console.log(this.$store.state.wsUrl)
			console.log("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush")
			if ("WebSocket" in window) {
				this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush");
				console.log(this.ws)
				this.ws.onopen = ()=> {
				console.log("websocket连接成功");
				//this.sendWs({aa:22});
				};
				this.ws.onmessage = (res) => { //接收websocket消息
					let data = JSON.parse(res.data)
					console.log(data)
					if(data.describe == "parkingLotALL"){ //停车总数
						this.data.wparkingLot = data
					}else if(data.describe == "meeting"){ //会议数据
						this.item.meetingState = true
					}else if(data.describe == "emergencyDisasterPreventionALL"){ //应急防灾总数
						this.data.emergencyDisasterPrevention = data.data
					}else if(data.describe == "accessControlAll"){ //门禁总数
						this.data.waccessControl = data
					}else if(data.describe == "computerRoom"){ //机房温度
						computerRoomApi().then(res =>{ 
							this.data.computerRoom = res.data
						})
					}else if(data.describe == "infoAdd"){ //手推告警记录
						infoApi().then(res =>{ //综合信息统计 告警信息
							this.data.info = res.data
							console.log(this.data.info)
						})
						this.data.wgiveAnAlarm = data
						
					  
					}else if(data.describe == "accessControlSwitch"){ //三维建筑门禁开关
						let state = JSON.parse(res.data).data.state
						var myframe = document.getElementById("iframe"); //获取iframe
						myframe.contentWindow.postMessage({ state: state, name: "门禁" , id: "F13XCMJ2"}, "*"); //childDomain是子页面的源（协议+主机+端口号）
					}else{ //综合信息统计 、综合列表告警
						infoApi().then(res =>{ //综合信息统计 告警信息
							this.data.info = res.data
						})
						this.data.wgiveAnAlarm = data
					}
				};
				this.ws.onclose = ()=> { //关闭websocket
					// 关闭 websocket
					//console.log("连接已关闭...");
					//断线重新连接
					setTimeout(() => {
						this.getData();
					}, 2000);
				}
			} else {
				// 浏览器不支持 WebSocket
				console.log("您的浏览器不支持 WebSocket!");
			}
		},
		sendWs(val){
			if (this.ws && this.ws.readyState == 1) {
				this.ws.send(JSON.stringify(val));
				console.log('发送成功')
			} else {
				setTimeout(() => {
				this.sendWs(val);
				}, 100);
			}
		},
		giveAnAlarmClick(val){ //告警列表数据传值
			setTimeout(()=>{
				this.springFrameState = false
			},0)
			setTimeout(()=>{
				this.item.warningMessage = val	
				this.item.warningState = true
				this.springFrameState = true
			},1)
			
		},
		SpringFrameChange(){
			this.springFrameState = false
			this.item.warningState = false
			this.item.meetingState = false
			this.item.equipmentState = false
			this.item.videoState = false
		},
		// roomBox(val){
		// 	val === 'left' ? this.isLeft = !this.isLeft : (this.isRight = !this.isRight)
		// },
		// changeImage(val){
		// 	this.imageList.unshift(...val)
		// },
		footerImage(val){
			this.footerList.unshift(...val)
			this.footerList = this.footerList.slice(0,7)
		}
	},
};
</script>
<style lang="scss" scoped>
.home {
  .iframe{
    position: absolute;
    width:100%;
    height:100%;
    z-index: -1;
    top:0;
    left:0;
    right:0
  }
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 0 20px 15px;
  box-sizing: border-box;
  position: relative;
  iframe{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .contentBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .contentClass {
    width: 25%;
    min-width: 500px;
    height: 102%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .contnetCenter{
    flex: 1;
  }
  .info {
    width: 100%;
    height: 40%;
  }
  .accessControl {
    width: 100%;
    height: 28%;
  }
  .monitor {
    width: 100%;
    height: 32%;
  }
  .parkingLot,
  .conferenceRoom,
  .giveAnAlarm,
  .equipment,
  .giveAnAlarmAf,
  .warningInfo,
  .screenEquipment,
  .currentState,
  .monitorInfo {
    width: 100%;
    height: 31%;
    overflow: hidden;
    // flex: 1;
  }
  .emergencyDisasterPrevention,.computerRoom{
    width: 100%;
    height:25%;
  }
  .contnetRight{
    margin-left:15px;
  }
  .contnetCenter{
    height:100.4%;
    border-radius: 6px;
  }
  .accessControl{
	  height:20%;
  }
  .giveAnAlarm{
	  height:45%;
  }
  
}

</style>