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

<template>
  	<div class="home">
	  	<div v-wechat-title="$route.meta.title" ></div>
		<div class="btn" @click="btn2" >消防互联网</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" @monitorChange="monitorChange" v-if="monitorStatus"/>
				<!-- <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">
			<energy class="energy"   @energyClick="energyClick" />
			<el-row :gutter="6">
				<el-col :span="12">
					<access-control class="accessControl" :resInfo="data.accessControl" :websocket="data.waccessControl" />
				</el-col>
				<el-col :span="12">
					<emergencyDisasterPrevention class="emergencyDisasterPrevention" :resInfo="data.emergencyDisasterPrevention"  />
				</el-col>
			</el-row>
			<computerRoom class="computerRoom" :resInfo="data.computerRoom" :websocket="data.wcomputerRoom" style="margin-top:-10px" />
			<giveAnAlarm class="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 energy from "../components/SD-school/energy"; // 能源
import { Message } from 'element-ui'

import SpringFrame from "../components/SD-school/Spring-frame"; // 弹框
import axios from 'axios'
import { encrypt } from '../util/jsencrypt';
import { 
	accessControlAllApi, 
	movingRing, 
	emergencyDisasterPreventionApi, 
	infoApi,
	tbDevice,
	nodes,
	parkingInfo,
	goldResult,
	btRoomGet,
} from "@/plugins/api";
export default {
  	name: "Home",
  	components: {
		info,
		parkingLot,
		monitor,
		emergencyDisasterPrevention,
		accessControl,
		computerRoom,
		giveAnAlarm,
		SpringFrame,
		energy
  	},
  	data() {
		return {
			// isLeft: true,
			// isRight: true,
			// resList:[],
			// imageList:[],
			monitorStatus:true,
			data:{//主页各系统板块初始数据及websocket数据
				"accessControl":[],
				"parkingLot":[],
				"computerRoom":[],
				"emergencyDisasterPrevention":[],
				"parkingLot":[],
				"info":[],
				"giveAnAlarm":undefined,
				"winfo":[],

				
				"wparkingLot":[],
				"wemergencyDisasterPrevention":[],
				"waccessControl":[],
				"wcomputerRoom":[],
				"wgiveAnAlarm":[],
				"computerRoom":[]
				
			},
			springFrameState:true,//弹框
			item:{ //弹框下各系统板块
				"warningState":false,
				"meetingState":false,
				"equipmentState":false,
				"videoState":false,
				"xinfaState":false,
				"baState":false,
				"entranceGuardState":false,
				"vehicleInformationState":false,
				"yongtianState":false,
				"energyState":false,
				"roomState":false,
				"computerRoomState":false,

				"warningMessage":{},
				"equipmentMessage":{},
				"videoMessage":{
					name:undefined,
					code:undefined
				},
				"xinfaMessage":{},
				"time":null,
				"close":false,
				"xinfaMessage":{},
				"baMessage":{},
				"entranceGuardMessage":{},
				"vehicleInformationMessage":undefined,
				"yongtianMessage":undefined,
				"energyMessage":undefined,
				"roomMessage":undefined,
				"computerRoomMessage":undefined
				
				// "alertMessage":{ //
				// 	name:null,
				// 	data:{}
				// },
				
				// "time":false
				// "music":false
			},
		};
	},
	created() {
		this.getData()
		this.getComputerRoom()//机房数据单独获取
		//this.ceshi() //测试宿舍设备
		//this.ceshi() //测试机房设备
	},
	mounted() {
		var that = this;
		window.addEventListener("message",function (event) {
			var isDOM = typeof event.data === "object";
			// // 监听父窗口发送过来的数据向服务器发送post请求
			var data = event.data;
			// console.log(data)
			if (isDOM == true) {
				if ("param" in data == true) {
					let name = data.param.name
					if (name === "1楼会议室" && data.param.id === "109") { //会议室弹框开启
						that.SpringFrameChange()
						setTimeout(()=>{
							that.springFrameState = true
							that.item.meetingState = true
						},2)
					}else if (name === "停车位") { //车位信息弹框开启
						that.SpringFrameChange()
						setTimeout(()=>{
							that.springFrameState = true
							that.item.vehicleInformationState = true
							that.item.vehicleInformationMessage = (data.param.id).split('-')[0] + (data.param.id).split('-')[1]
						},2)
					}else if (name === "停车系统") { //向三位模型传输全部停车位状态
						parkingInfo().then(Response =>{
							if(Response.status == "SUCCESS"){
								let myframe = document.getElementById("iframe"); //获取iframe 
								let arr = JSON.parse(Response.data)
								myframe.contentWindow.postMessage({ name: "停车系统" , data: Response.data}, "*");
							}
						})
					}else if (name.indexOf("摄像头")>-1) { 
						nodes({"name":(data.param.id).split('·')[1],"pageNo":1,"pageSize":10}).then(res =>{ //获取code
							that.SpringFrameChange()
							setTimeout(()=>{
								that.springFrameState = true
								that.item.videoState = true
								that.item.videoMessage.name = (data.param.id).split('·')[1]
								that.item.videoMessage.code = res.data.list[0].indexCode
							},2)
						})
					}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过滤
					}else if(name === "宿舍" || name === "卫生间" || name === "淋浴间"){
						let id = (data.param.id).split("/")[0]
						let params = {
							"page_util":{
								"page_index":1,
								"page_size":2
							},
							"room_no":"",
						}
						params.room_no = id 
						let arr = []
						arr.num = params.room_no
						goldResult({url:"http://10.108.35.110:2016/api/v2/base/getrooominfo",param:JSON.stringify(params)}).then(res =>{ //设备信息查询
							let data = JSON.parse((res.data.split('\">')[1]).split('</string>')[0])
							
							if(data.return_code == "-1"){
								Message({
									message:data.return_msg,
									type: 'error'
								});
							}else{
								arr.roomStatus = data.data.list[0].original_room_state_code
								arr.hotelCode = "ff80808179c6599a0179c65caf9a0001"
								let url = "http://www.limark.net:81/api/hotel/control/device/list.do?" + "hotelCode=ff80808179c6599a0179c65caf9a0001" + "&roomNo=" + id 
								btRoomGet({url:url}).then(res =>{
									// console.log(url,res)
									if(JSON.parse(res.data).return_code == "-1"){
										Message({
											message:JSON.parse(res.data).return_msg,
											type: 'error'
										});
									}else{
										arr.data = JSON.parse(res.data)
										that.SpringFrameChange()
										setTimeout(()=>{
											that.springFrameState = true
											that.item.roomState = true
											that.item.roomMessage = arr
										},2)
									}
								})
							}
							
						})
					}else{
					// }else if((data.param.id).length>7){
						tbDevice(data.param.id).then(res =>{ //设备信息查询
							that.SpringFrameChange()
							setTimeout(()=>{
								let name = data.param.name
								if(res.data){
									if(res.data.manufacturer == 2){//永天设备
										//console.log("永天设备")
										that.springFrameState = true
										that.item.yongtianState = true
										that.item.yongtianMessage = res.data
									}else if(res.data.manufacturer == 3){//信发
										//console.log("信发")
										that.springFrameState = true
										that.item.xinfaState = true
										that.item.xinfaMessage = res.data
									}else if(res.data.manufacturer == 4 ){//ba
										//console.log("ba设备")
										that.springFrameState = true
										that.item.baState = true
										that.item.baMessage = res.data
									}else if(res.data.manufacturer == 5){//门禁
										//console.log("门禁设备")
										that.springFrameState = true
										that.item.entranceGuardState = true
										that.item.entranceGuardMessage = res.data
									}else if(res.data.manufacturer == 6){//机房各设备
										//console.log("机房各设备")
										that.springFrameState = true
										that.item.computerRoomState = true
										that.item.computerRoomMessage = res.data
									}else{
										//console.log("除永天设备、信发、摄像头、ba、门禁外设备")
										that.springFrameState = true
										that.item.equipmentState = true
										that.item.equipmentMessage = res.data
									}
								}else{
									//console.log("永天、信发、ba、门禁外设备 数据为空")
									that.springFrameState = true
									that.item.equipmentState = true
									that.item.equipmentMessage = res.data
								}
							},2)
						})
					
					}
					// else{
					// 	console.log("三维响应id为常规响应，未绑定设备")
					// }
				}
			}
		},false)
	},
	methods: {
		ceshi(){
			//let id = (data.param.id).split("/")[0]
			let params = {
				"page_util":{
					"page_index":1,
					"page_size":2
				},
				"room_no":"",
			}
			params.room_no = "402"
			let arr = []
			arr.num = params.room_no
			goldResult({url:"http://10.108.35.110:2016/api/v2/base/getrooominfo",param:JSON.stringify(params)}).then(res =>{ //设备信息查询
				let data = JSON.parse((res.data.split('\">')[1]).split('</string>')[0])
				let roomStatus = data.data.list[0].original_room_state_code
				arr.roomStatus = data.data.list[0].original_room_state_code
				arr.hotelCode = "ff80808179c6599a0179c65caf9a0001"
				let params2 = {
					hotelCode:"ff80808179c6599a0179c65caf9a0001",
    				roomNo:"402"
				}
				let url = "http://www.limark.net:81/api/hotel/control/device/list.do?" + "hotelCode=ff80808179c6599a0179c65caf9a0001" + "&roomNo=" + "402"
				btRoomGet({url:url}).then(res =>{
					arr.data = JSON.parse(res.data)
					let that = this
					that.SpringFrameChange()
					setTimeout(()=>{
						that.springFrameState = true
						that.item.roomState = true
						that.item.roomMessage = arr
					},2)
				})
			})
		},
		btn2(){
			let parmas = encrypt(123)
			let url = window.location.host
			window.location.href = `http://10.108.34.2/fire/company.html?params=${parmas}`
		},
		mouseclick(event){
			if (event.button == 0) {
				
			} else if (event.button == 1) {
				
			}else if (event.button == 2) {
				console.log("右键");
			}
		},
		postMsg(newValue) {
			var myframe = document.getElementById("iframe"); //获取iframe 
			myframe.contentWindow.postMessage({ state: false, name: "门禁" }, "*"); //childDomain是子页面的源（协议+主机+端口号）
		},
		getData(){
			setInterval(() =>{//机房数据定时获取
				this.getComputerRoom()
			},10*60*1000)
			let myDate = new Date();
			let y = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
			let mo = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
			let d = myDate.getDate();        //获取当前日(1-31)

			let h = myDate.getHours();       //获取当前小时数(0-23)
			let m = myDate.getMinutes();     //获取当前分钟数(0-59)
			let s = myDate.getSeconds();     //获取当前秒数(0-59)
			if(mo<10){
				mo = "0" + mo
			}
			if(d<10){
				d = "0" + d
			}
			if(h<10){
				h = "0" + h
			}
			if(m<10){
				m = "0" + m
			}
			if(s<10){
				s = "0" + s
			}
			let startTime = y + "-" + mo + "-" + d + " 00:00:00"
			let endTime = y + "-" + mo + "-" + d + " " + h + ":" + m +":" +s
			accessControlAllApi({startTime:startTime,endTime:endTime}).then(res =>{ // 门禁进出入统计
				this.data.accessControl = res.data
			})
			emergencyDisasterPreventionApi({sysCode:2}).then(res =>{ //应急防灾
				this.data.emergencyDisasterPrevention = res.data
			})
			// parkingLotApi().then(res =>{ //停车场统计
			// 	this.data.parkingLot = res.data
			// })
			infoApi().then(res =>{ //综合信息统计 告警信息饼形图
				this.data.info = res.data
			})
			// 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消息
					console.log(res)
					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
						})
						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();
					}, 1000 * 60);
				}
			} else {
				// 浏览器不支持 WebSocket
				alert("您的浏览器不支持 WebSocket!");
			}
		},
		//机房数据获取
		getComputerRoom(){
			movingRing({url:"http://10.108.56.30:80/html5/GETTAGVAL/WSD1_R1.温湿度1_温度,WSD1_R1.温湿度1_湿度",deviceId:"WSD1_R1_1"}).then(res =>{ // 机房温度、湿度平均值
				let arr1 = res.data.split("|")
				let arrData = []
				for(let i = 0;i<arr1.length;i++){
					arrData.push(arr1[i].split(",")[1])
				}
				movingRing({url:"http://10.108.56.30:80/html5/GETTAGVAL/WSD1_R1.温湿度2_温度,WSD1_R1.温湿度2_湿度",deviceId:"WSD1_R1_2"}).then(res2 =>{ // 机房温度、湿度平均值
					let arr2 = res2.data.split("|")
					for(let i = 0;i<arr2.length;i++){
						arrData.push(arr2[i].split(",")[1])
					}
					this.data.computerRoom = arrData
				})
			})
		},
		
		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(()=>{
				let myframe = document.getElementById("iframe"); //获取iframe
			    myframe.contentWindow.postMessage({ name: "告警" , id: val.deviceId}, "*"); //childDomain是子页面的源（协议+主机+端口号）
				this.item.warningMessage = val	
				this.item.warningState = true
				this.springFrameState = true
			},1)
			
		},
		energyClick(val){ //告警列表数据传值
			setTimeout(()=>{
				this.springFrameState = false
			},0)
			setTimeout(()=>{	
				this.item.energyMessage = val
				this.item.energyState = true
				this.springFrameState = true
			},1)
			
		},
		water(){

		},
		monitorChange(){
			this.monitorStatus = false
			setTimeout(()=>{
				this.monitorStatus = true
			},1)

		},
		SpringFrameChange(){
			this.springFrameState = false
			this.item.warningState = false
			this.item.meetingState = false
			this.item.equipmentState = false
			this.item.videoState = false
			this.item.xinfaState = false
			this.item.baState = false
			this.item.vehicleInformationState = false
			this.item.entranceGuardState = false
			this.item.yongtianState = 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 {
	width:100%;
	height:100%;
	.btn{
		position: absolute;
		z-index: 10;
		right:20px;
		top:-40px;
	}
  .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%;
  }
  .energy{
	  height:35%;
  }
  .giveAnAlarm{
	  height:45%;
  }
  
}

</style>