<template>
	<div class="bigScreenView">
		<!-- 头部标题 -->
		<div class="top_title">
			<div class="top_titl_left">
        <div></div>
				<div v-for="(item,index) in topSmallTitleLeftData" :key="index" style="cursor: pointer;" @click="changeOver(item)">
					<div :class="selectModule == item.componentName ? 'top_titl_left_textStyle2' : 'top_titl_left_textStyle1' ">{{item.title}}</div>
					<img src="../../assets/images/cutGraph/light7.png" width="85" style="margin-top:-1vh;" v-if="selectModule == item.componentName">
				</div>
			</div>
			<div class="top_titl_right">
				<div v-for="(item,index) in topSmallTitleRightData" :key="index" style="cursor: pointer;" @click="changeOver(item)">
					<div :class="selectModule == item.componentName ? 'top_titl_left_textStyle2' : 'top_titl_left_textStyle1' ">{{item.title}}</div>
					<img src="../../assets/images/cutGraph/light7.png" width="85" style="margin-top:-1vh;" v-if="selectModule == item.componentName">
				</div>
			</div>
			<!-- 时间 -->
			<div class="currentTimeStyle">{{currentTime}}</div>
		</div>
		<div class="videoSelectView" v-show="videoSelect1">
			<div @click="lookFn2()" :class="videoSelectStyle == 2 ? 'videoSelectStyle1' : 'videoSelectStyle2'">车辆视频监控</div>
			<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : 'videoSelectStyle2'">矿山视频监控</div>
		</div>
		<!-- 内容 -->
		<div class="content_view" v-if="content_view_Show">
			<div class="content_view_left">
				<components :is="item.componentName" v-for="(item,index) in allComponents.left" :key="index"></components>
			</div>
			<div class="content_view_center">
				<components :is="item.componentName" v-for="(item,index) in allComponents.center" :key="index"></components>
			</div>
			<div class="content_view_right">
				<components :is="item.componentName" v-for="(item,index) in allComponents.right" :key="index"></components>
			</div>
		</div>
		<!-- 监控区域 -->
		<div class="jiankongView">
			<carsEZUIKitJs  v-if="carsEZUIKitJsShow"/>
			<kaungEZUIKitJs  v-if="kaungEZUIKitJsShow"/>
		</div>
		<!-- 嵌入三维地图页面 -->
<!--		<iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
    <iframe ref="iframe" src="http://192.168.3.60:18041//#/Index" frameborder="0" class="mapcontainer1"></iframe>
<!--    <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
		<!-- 单个车辆视频监控 -->

		<div class="monitorCover1" v-show="monitorCover1Show">
			<div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div>
      <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered monitorCover1_Video" controls preload="auto" data-setup="{}">
        您的浏览器不支持：HTML5 video.
      </video>
		</div>
		<img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img">
	</div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
import DPcomputer1 from './components/smallComponents/DPcomputer1.vue'
import DPcomputer2 from './components/smallComponents/DPcomputer2.vue'
import DPcomputer3 from './components/smallComponents/DPcomputer3.vue'
import DPcomputer4 from './components/smallComponents/DPcomputer4.vue'
import DPcomputer5 from './components/smallComponents/DPcomputer5.vue'
import DPcomputer6 from './components/smallComponents/DPcomputer6.vue'
import DPcomputer7 from './components/smallComponents/DPcomputer7.vue'
import DPcomputer8 from './components/smallComponents/DPcomputer8.vue'
import DPcomputer9 from './components/smallComponents/DPcomputer9.vue'
import DPcomputer10 from './components/smallComponents/DPcomputer10.vue'
import DPcomputer11 from './components/smallComponents/DPcomputer11.vue'
import DPcomputer12 from './components/smallComponents/DPcomputer12.vue'
import DPcomputer13 from './components/smallComponents/DPcomputer13.vue'
import DPcomputer14 from './components/smallComponents/DPcomputer14.vue'
import DPcomputer15 from './components/smallComponents/DPcomputer15.vue'
import DPcomputer16 from './components/smallComponents/DPcomputer16.vue'
import DPcomputer17 from './components/smallComponents/DPcomputer17.vue'
import DPcomputer18 from './components/smallComponents/DPcomputer18.vue'
import DPcomputer19 from './components/smallComponents/DPcomputer19.vue'
import DPcomputer20 from './components/smallComponents/DPcomputer20.vue'
import DPcomputer21 from './components/smallComponents/DPcomputer21.vue'
import DPcomputer22 from './components/smallComponents/DPcomputer22.vue'
import DPcomputer23 from './components/smallComponents/DPcomputer23.vue'
import DPcomputer24 from './components/smallComponents/DPcomputer24.vue'
import DPcomputer25 from './components/smallComponents/DPcomputer25.vue'
import DPcomputer26 from './components/smallComponents/DPcomputer26.vue'
import DPcomputer27 from './components/smallComponents/DPcomputer27.vue'
import DPcomputer28 from './components/smallComponents/DPcomputer28.vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
	components: {
		carsEZUIKitJs,
		kaungEZUIKitJs,
		DPcomputer1,
		DPcomputer2,
		DPcomputer3,
		DPcomputer4,
		DPcomputer5,
		DPcomputer6,
		DPcomputer7,
		DPcomputer8,
		DPcomputer9,
		DPcomputer10,
		DPcomputer11,
		DPcomputer12,
		DPcomputer13,
		DPcomputer14,
		DPcomputer15,
		DPcomputer16,
		DPcomputer17,
		DPcomputer18,
		DPcomputer19,
		DPcomputer20,
		DPcomputer21,
		DPcomputer22,
		DPcomputer23,
		DPcomputer24,
		DPcomputer25,
		DPcomputer26,
		DPcomputer27,
		DPcomputer28,
	},
	data() {
		return {
			websocket: null,
			websocketHeadBeatTimer:null,
			//监控视频
			iframeSrc:'',
      		defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
			url:process.env.VUE_APP_LOCAL_API2 + 'map',
			//时间
			timer:null,
			currentTime:'',
			//选择模块
			selectModule:'',
			//标题菜单数据
			topSmallTitleLeftData:[],
			topSmallTitleRightData:[],
			//监控选择
			videoSelect1:false,
			carsEZUIKitJsShow:false,
			kaungEZUIKitJsShow:false,
			//单个车辆视频展示
			monitorCover1Show:false,
			//视频监控配置
			videoSelectStyle:2,
			//组件数据
			allComponents:{
				left:[],
				center:[],
				right:[],
			},
			//各模块展示
			isShow:{
				dataScreening:false,
				carManagement:false,
				intelligentSchedul:false,
				dataAnalysis:false,
			},
			//内容区域展示
			content_view_Show:false,
		}
	},
	mounted() {
		this.loadData();
		//右上角时钟
		this.setNowTimes();
		this.timer = setInterval(() => {
            this.setNowTimes();
        }, 1000)
		//开启WebSocket连接以及心跳
		this.initWebSocket();
		this.websocketHeadBeatTimer = setInterval(() => {
			this.reconnect();
		}, 20000)
		//与嵌入的地图页面进行交互
		window.addEventListener('message', this.handleMessage);
    this.videoPlayer = videojs('videoRealtime', {
      bigPlayButton: false,
      textTrackDisplay: false,
      posterImage: true,
      errorDisplay: false,
      controlBar: true
    }, function () {
      console.log('video ready!')
    })
	},
	methods: {
    locateCarByNumber(number){
      this.iframeWin = this.$refs.iframe.contentWindow;
      this.iframeWin.postMessage({
        fnName: 'locateCarByNumber',
        parameter: number
      }, '*')
    },
		loadData() {
			let leftTemporaryData = [];
			let rightTemporaryData = [];
			this.$nextTick(()=>{
				HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,status:1,pid:0,sort:'dsort'}).then((res) => {
					if(res.code == 200){
						let array1 = res.data.content.sort(function(a,b){
							return parseInt(a.dsort) - parseInt(b.dsort);
						});
						for(let i = 0 ; i<2 ; i++){
							leftTemporaryData.push(array1[i]);
						}
						for(let j = 2 ; j<res.data.totalElements ; j++){
							rightTemporaryData.push(array1[j]);
						}
						this.topSmallTitleLeftData = leftTemporaryData;
						this.topSmallTitleRightData = rightTemporaryData;
					}
				})
			})
		},
		//选择展示模块
		changeOver(item){
			this.selectModule = item.componentName;
			if(item.componentName == 'dataScreening'){
				if(this.isShow.dataScreening == false){
					this.isShow.dataScreening = true;
					this.content_view_Show = true;
					HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
						if(res.code == 200){
							let left1 = [];
							let center1 = [];
							let right1 = [];
							let array1 = res.data.content.sort(function(a,b){
								return parseInt(a.dsort) - parseInt(b.dsort);
							});
							array1.forEach((item,index)=>{
								if(item.pos == 'left'){
									left1.push(item);
								}else if(item.pos == 'right'){
									right1.push(item);
								}else if(item.pos == 'center'){
									center1.push(item);
								}
							})
							this.allComponents.left = left1;
							this.allComponents.center = center1;
							this.allComponents.right = right1;
						}
					})
				}else{
					this.isShow.dataScreening = false;
					this.content_view_Show = false;
					this.allComponents.left = [];
					this.allComponents.center = [];
					this.allComponents.right = [];
				}
				this.isShow.carManagement = false;
				this.isShow.intelligentSchedul = false;
				this.isShow.dataAnalysis = false;
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'carManagement'){
				if(this.isShow.carManagement == false){
					this.isShow.carManagement = true;
					this.content_view_Show = true;
					HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
						if(res.code == 200){
							let left1 = [];
							let center1 = [];
							let right1 = [];
							let array1 = res.data.content.sort(function(a,b){
								return parseInt(a.dsort) - parseInt(b.dsort);
							});
							array1.forEach((item,index)=>{
								if(item.pos == 'left'){
									left1.push(item);
								}else if(item.pos == 'right'){
									right1.push(item);
								}else if(item.pos == 'center'){
									center1.push(item);
								}
							})
							this.allComponents.left = left1;
							this.allComponents.center = center1;
							this.allComponents.right = right1;
						}
					})
				}else{
					this.isShow.carManagement = false;
					this.content_view_Show = false;
					this.allComponents.left = [];
					this.allComponents.center = [];
					this.allComponents.right = [];
				}
				this.isShow.dataScreening = false;
				this.isShow.intelligentSchedul = false;
				this.isShow.dataAnalysis = false;
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'intelligentSchedul'){
				if(this.isShow.intelligentSchedul == false){
					this.isShow.intelligentSchedul = true;
					this.content_view_Show = true;
					HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
						if(res.code == 200){
							let left1 = [];
							let center1 = [];
							let right1 = [];
							let array1 = res.data.content.sort(function(a,b){
								return parseInt(a.dsort) - parseInt(b.dsort);
							});
							array1.forEach((item,index)=>{
								if(item.pos == 'left'){
									left1.push(item);
								}else if(item.pos == 'right'){
									right1.push(item);
								}else if(item.pos == 'center'){
									center1.push(item);
								}
							})
							this.allComponents.left = left1;
							this.allComponents.center = center1;
							this.allComponents.right = right1;
						}
					})
				}else{
					this.isShow.intelligentSchedul = false;
					this.content_view_Show = false;
					this.allComponents.left = [];
					this.allComponents.center = [];
					this.allComponents.right = [];
				}
				this.isShow.dataScreening = false;
				this.isShow.carManagement = false;
				this.isShow.dataAnalysis = false;
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'dataAnalysis'){
				if(this.isShow.dataAnalysis == false){
					this.isShow.dataAnalysis = true;
					this.content_view_Show = true;
					HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
						if(res.code == 200){
							let left1 = [];
							let center1 = [];
							let right1 = [];
							let array1 = res.data.content.sort(function(a,b){
								return parseInt(a.dsort) - parseInt(b.dsort);
							});
							array1.forEach((item,index)=>{
								if(item.pos == 'left'){
									left1.push(item);
								}else if(item.pos == 'right'){
									right1.push(item);
								}else if(item.pos == 'center'){
									center1.push(item);
								}
							})
							this.allComponents.left = left1;
							this.allComponents.center = center1;
							this.allComponents.right = right1;
						}
					})
				}else{
					this.isShow.dataAnalysis = false;
					this.content_view_Show = false;
					this.allComponents.left = [];
					this.allComponents.center = [];
					this.allComponents.right = [];
				}
				this.isShow.dataScreening = false;
				this.isShow.carManagement = false;
				this.isShow.intelligentSchedul = false;
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'backstage'){
				this.isShow.dataScreening = false;
				this.isShow.carManagement = false;
				this.isShow.intelligentSchedul = false;
				this.isShow.dataAnalysis = false;
				this.allComponents.left = [];
				this.allComponents.center = [];
				this.allComponents.right = [];
				this.content_view_Show = false;
				this.$nextTick(()=>{
					let routeUrl = this.$router.resolve({
						path: "/dashboard",
					});
					window.open(routeUrl.href, '_blank');
				})
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'toVideoSurveillance'){
				this.isShow.dataScreening = false;
				this.isShow.carManagement = false;
				this.isShow.intelligentSchedul = false;
				this.isShow.dataAnalysis = false;
				this.allComponents.left = [];
				this.allComponents.center = [];
				this.allComponents.right = [];
				this.content_view_Show = false;
				if(this.videoSelect1 == false){
					this.videoSelect1 = true;
					this.lookFn2();
				}else{
					this.videoSelect1 = false;
					this.kaungEZUIKitJsShow = false;
					this.carsEZUIKitJsShow = false;
				}
			}
		},
		//矿山监控
		lookFn1(){
			this.kaungEZUIKitJsShow = true;
			this.carsEZUIKitJsShow = false;
			this.videoSelectStyle = 1;
		},
		//车辆监控
		lookFn2(){
			this.kaungEZUIKitJsShow = false;
			this.carsEZUIKitJsShow = true;
			this.videoSelectStyle = 2;
		},
		//获取当前时间
    setNowTimes() {
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = String((myDate.getMonth() + 1) < 10 ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1));
      let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
      let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
      let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
      let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      let week = weeks[wk];
      this.currentTime = yy + '/' + mm + '/' + dd + ' ' + hou + ':' + min;
    },
    videoPlay() {
      this.videoPlayer.src({src: this.cameraSrc, type: 'application/x-mpegURL'});
      this.videoPlayer.play();
    },
		//与iframe的页面进行数据交互
		handleMessage(event){//event.data为传递的参数
			//这里的判断是因为此方法会多次触发，通过参数是否存在可以判断是否为子页面传递的参数，再做出相应的操作
			if(event.data.data.hasOwnProperty("url")){
				if(event.data.data.url == '监控'){
					let number = event.data.data.data;
          HttpReq.truckDispatching.jkcarMonitorFind({carNumber: number}).then((res) => {
            if (res.code == 200) {
              if(res.data && res.data.length){
                this.noPtz = true;
                this.cameraList = res.data;
                this.cameraSrc = this.cameraList[0].monitorUrl;
                this.videoPlay();
              }else{
                this.$notify({
                  title: '该车无视频监控！',
                  type: 'warning',
                  duration: 2500
                });
              }
            }
          })
					this.monitorCover1Show = true;
				}
			}
		},
		//关闭视频蒙层
		closeMonitorCoverFn(){
			this.iframeSrc = '';
			this.monitorCover1Show = false;
		},


		//初始化weosocket
        initWebSocket(){
            //const wsuri = "ws://114.116.108.246:81/websocket/socketServer?userId="+userId;//连接地址，可加参数
            const wsuri = process.env.VUE_APP_WS_API + "/" + 'pcBigScreen';
            this.websocket = new WebSocket(wsuri);
            this.websocket.onopen = this.websocketonopen;
            this.websocket.onerror = this.websocketonerror;
            this.websocket.onmessage = this.websocketonmessage;
            this.websocket.onclose = this.websocketclose;
            this.websocketonmessage();
        },
        //WebSocket连接成功
        websocketonopen() {
            console.log("WebSocket连接成功");
        },
        //WebSocket连接错误
        websocketonerror(e) {
            console.log("WebSocket连接发生错误");
        },
        //WebSocket数据接收
        websocketonmessage(e){
            //console.log("e",e);
			if(e == undefined){
				return
			}else{
				let obj1 = JSON.parse(e.data);
                HttpReq.truckDispatching.recentNoticeAdd({noticeClass:obj1.fromUserId,flag:1,videoContent:obj1.contentText}).then((res) => {}).catch(function(error) { });
			}
        },
        //WebSocket数据发送
        websocketsend(agentData){
            this.websocket.send(agentData);
        },
        //WebSocket关闭
        websocketclose(e){
            //console.log("connection closed (" + e.code + ")");
            console.log("connection closed !");
        },
        //WebSocket重连
		reconnect(){
			var This=this;
			if (this.websocket.readyState === 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
				This.websocketonmessage();
			} else if (this.websocket.readyState === 0) { // 表示正在连接，设置300ms后发送信息
				setTimeout(function () {
					This.websocketonmessage();
				}, 300);
			} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
				This.initWebSocket();
				setTimeout(function () {
					This.websocketonmessage();
				}, 500);
			}
		},

	},
	beforeDestroy(){
		if(this.timer) {
			clearInterval(this.timer);
			this.timer = null;
		}
		if(this.websocketHeadBeatTimer) {
			clearInterval(this.websocketHeadBeatTimer);
			this.websocketHeadBeatTimer = null;
		}
		//页面销毁时关闭长连接
		this.websocketclose();
    }
}
</script>

<style scope>
*{
  margin: 0;
  padding: 0;
}
.mapcontainer1 {
  height: 100vh;
  width: 100vw;
  top: 0px;
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
.maplogo1Img{
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 3;
	width: 7vw;
	height: 3vh;
}
.bigScreenView{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.top_title{
	width: 100%;
	height: 5.5vh;
	overflow: hidden;
	background:no-repeat center center url('~@/assets/images/cutGraph/top_title.png');
	background-size:100% 100%;
	position: relative;
	z-index: 4;
}
.content_view{
	width: 100vw;
	height: 96vh;
	overflow: hidden;
	position: relative;
	bottom: 0px;
	display: flex;
	justify-content: space-between;
}
.content_view_left{
	width: 20vw;
	height: 96vh;
	overflow-y: scroll;
	z-index: 4;
}
.content_view_left::-webkit-scrollbar {
  display: none;
}
.content_view_center{
	width: 60vw;
    height: 23.5vh;
	overflow: hidden;
	position: absolute;
	left: 20vw;
	bottom: 2vh;
	z-index: 4;
}
.content_view_right{
	width: 20vw;
	height: 96vh;
	overflow-y: scroll;
	z-index: 4;
}
.content_view_right::-webkit-scrollbar {
  display: none;
}
.videoSelectView{
	position: absolute;
	top: 5.5vh;
	z-index: 5;
	width: 20vw;
	height: 5.5vh;
	background-color: rgba(32,42,67,0.95);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	font-size: 15px;
}

.videoSelectStyle1{
	width: 45%;
	height: 3.5vh;
	line-height: 3.5vh;
	color: #01EDF7;
	font-size: 18px;
	text-align: center;
	border:1px solid #01A6FC;
	border-radius: 5px;
	opacity: 1;
	cursor: pointer;
	letter-spacing: 1px;
}
.videoSelectStyle2{
	width: 45%;
	height: 3.5vh;
	line-height: 3.5vh;
	color: #01EDF7;
	font-size: 18px;
	text-align: center;
	border:1px solid #01A6FC;
	border-radius: 5px;
	opacity: 0.5;
	cursor: pointer;
	letter-spacing: 1px;
}
.jiankongView{
	position: absolute;
	top: 5.5vh;
	width: 100%;
}
.top_titl_left{
	display: flex;
	justify-content: space-evenly;
	position: absolute;
	top: 2vh;
	width: 35%;
	font-size: 22px;
}
.top_titl_right{
	display: flex;
	justify-content: space-evenly;
	position: absolute;
	top: 2vh;
	right: 12vw;
	width: 23%;
	font-size: 22px;
}
.top_titl_left_textStyle1{
	color: gainsboro;
}
.top_titl_left_textStyle2{
	color: white;
	text-shadow: 1px 1px 1px skyblue
}
.currentTimeStyle{
	position: absolute;
	top: 2vh;
	right: 1vw;
	font-size: 24px;
	color: #03FEFE;
}
.carExample{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 30px;
	color: blue;
	cursor: pointer;
	z-index: 1;
}
.monitorCover1{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background-color: rgba(0,0,0,0.3);
}
.monitorCover1_closePic{
	width: 7vh;
	height: 7vh;
	background:no-repeat center center url('~@/assets/images/cutGraph/close2.png');
	background-size:100% 100%;
	position: absolute;
	top: 6vh;
	right: 3vw;
	cursor: pointer;
}
.monitorCover1_Video{
	position: absolute;
	top: 5.5vh;
	left: 50vw;
	transform: translateX(-50%);
	width: 80vw;
  height: 90vh;
}
</style>
