DX-LargeScreen/src/views/index.vue

<template>
  <div class="app-container home" >
    <div id="main" >
      <seHeader />
      <el-row class="containWrap">
        <el-col  class="leftWrap">
          <el-col class="left">
            <realTimeVideo alt="实时视频"/>
            <populationStatistics alt="人流量"/>
            <equipmentAlarm alt="设备告警信息" @gjxxClick="gjxxClick" />
            <intrusionAlarm alt="入侵告警信息" @rqgjClick="rqgjClick" />
          </el-col>
          <el-col class="right">
            <parkingSpace alt="停车位统计"/>
            <conferenceRoomStatistics alt="会议室统计" @postMsg="postMsg"/>
            <cnergyConsumptionStatistics alt="能耗统计"/>
            <restaurant alt="智慧餐饮" @canyinClick="canyinClick" />
          </el-col>
        </el-col>
        <el-col  class="middleWrap">
          <!-- <iframe style="width:100%;height:100%;border:none;position: absolute;z-index: 9;background-color: rgba(28,33,41,1);" id="iframe" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
        </el-col>
        <el-col  class="rightWrap">
          <weather alt="天气"/>
          <el-col class="leftR mt16">
            <wenyin alt="文印助手" @postMsg="postMsg"/>
            <iOTNetworkCard alt="文印助手"/>
          </el-col>
          <el-col class="rightR mt16 ml16">
            <equipmentStatus alt="设备状态" @postMsg2="postMsg2"  />
            <fireHazard alt="消防隐患" @xfgjClick="xfgjClick" />
            <keepWatch alt="巡更计划" @xgClick="xgClick"/>
          </el-col>
        </el-col>
      </el-row>
      <SpringFrame  v-if="springFrameState" :resInfo="springFrameItem"  @close="SpringFrameClose" />
      <div v-if="springFrameState" class="mask"></div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import seHeader from "@/components2/seHeader"; //头部
import realTimeVideo from "@/components2/realTimeVideo"; //实时视频
import populationStatistics from "@/components2/populationStatistics"; //人流量统计
import equipmentAlarm from "@/components2/equipmentAlarm"; //设备告警信息
import intrusionAlarm from "@/components2/intrusionAlarm"; //入侵告警信息
import parkingSpace from "@/components2/parkingSpace"; //停车位统计
import conferenceRoomStatistics from "@/components2/conferenceRoomStatistics"; //会议室统计
import cnergyConsumptionStatistics from "@/components2/cnergyConsumptionStatistics";//能耗统计
import restaurant from "@/components2/restaurant";//智慧餐饮
import weather from "@/components2/weather";//天气
import wenyin from "@/components2/wenyin";//文印助手
import iOTNetworkCard from "@/components2/iOTNetworkCard";//物联网卡状态
import equipmentStatus from "@/components2/equipmentStatus";//设备状态
import fireHazard from "@/components2/fireHazard";//消防状态
import keepWatch from "@/components2/keepWatch";//巡更计划
import SpringFrame from "@/components2/SpringFrame";//弹框



// import pie1 from "@/components2/pie1";
export default {
  name: "index",
  components: {
		seHeader,realTimeVideo,populationStatistics,equipmentAlarm,
    intrusionAlarm,parkingSpace,conferenceRoomStatistics,
    cnergyConsumptionStatistics,restaurant,weather,iOTNetworkCard,wenyin,equipmentStatus,fireHazard,
    keepWatch,SpringFrame
  },
  data() {
    return {
      springFrameState:false,
      springFrameItem:{
        video:undefined,
        xg:undefined,
        hy:undefined,
        dyj:undefined,
        canyin:false,
        gjxx:undefined,
        rqgj:undefined,
        xfgj:undefined,
      }

    };
  },
 
  created(){
    // setTimeout(() =>{
    //   console.log(12121212)
    //   this.postMsg3()
    // },30000)
    
  },
  mounted(){
    let that = this;
		window.addEventListener("message",function (event) {
			let isDOM = typeof event.data === "object";
			let data = event.data;
      // console.log(data)
      if(data.param){
        let name = data.param.name
        let id = data.param.id
        if(name == "会议室"){
          that.springFrameState = true
          that.springFrameItem = {}
          that.springFrameItem.hy = 1
        }else if(name == "打印机"){
          that.springFrameState = true
          that.springFrameItem = {}
          that.springFrameItem.dyj = 1
        }else{
          axios({
              method: 'post',
              url: 'http://10.21.39.1:8082/dhController/getLocalChannel?pageNo=1&pageSize=1&uniType=1&id=' + id,
              timeout: 3000,
          }).then(res =>{
              if(res.data.data.pageList.length>0){
                  let resData = res.data.data.pageList[0]
                  that.springFrameState = true
                  that.springFrameItem = {}
                  that.springFrameItem.video = resData
                  that.springFrameItem.video.url  = "http://" + resData.nvr_ip + ":" + resData.hls_port + "/live/cameraid/" + resData.deviceId + "%24" + resData.id.split("$")[(resData.id.split("$")).length-1]  + "/substream/1.m3u8"
              }
          }).catch(err =>{
          })
        }
      }
		},false)
  },
  methods: {
    videoClick(row){//视频
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.video = row
    },
    xgClick(row){//巡更
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.xg = row
    },
    hyClick(){//会议
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.hy = 1
    },
    dyjClick(){//打印机
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.dyj = 1
    },
    canyinClick(id){//餐饮
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.canyin = id
    },
    gjxxClick(row){//告警信息
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.gjxx = row
    },
    rqgjClick(row){//入侵告警
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.rqgj = row
    },
    xfgjClick(row){//消防告警
      this.springFrameState = true
      this.springFrameItem = {}
      this.springFrameItem.xfgj = row
    },
    SpringFrameClose(){
      this.springFrameState = false
      this.springFrameItem = {}
    },
    postMsg(value) {
			var myframe = document.getElementById("iframe"); //获取iframe 
			myframe.contentWindow.postMessage({  name: value }, "*"); //childDomain是子页面的源（协议+主机+端口号）
		},
    postMsg2(value) {//视频
    if(value.unitType == "1"){
        let that = this
        axios({
            method: 'post',
            url: 'http://10.21.39.1:8082/dhController/getLocalChannel?pageNo=1&pageSize=1&uniType=1&id=' + value.id,
            timeout: 3000,
        }).then(res =>{
            if(res.data.data.pageList.length>0){
                let resData = res.data.data.pageList[0]
                that.springFrameState = true
                that.springFrameItem = {}
                that.springFrameItem.video = resData
                that.springFrameItem.video.url  = "http://" + resData.nvr_ip + ":" + resData.hls_port + "/live/cameraid/" + resData.deviceId + "%24" + resData.id.split("$")[(resData.id.split("$")).length-1]  + "/substream/1.m3u8"
            }
        }).catch(err =>{
        })
      }else if(value.unitType == "2"){
        var myframe = document.getElementById("iframe"); //获取iframe 
			  myframe.contentWindow.postMessage({  name: "打印机" }, "*"); //childDomain是子页面的源（协议+主机+端口号）
      }
			// var myframe = document.getElementById("iframe"); //获取iframe 
			// myframe.contentWindow.postMessage({  name: '摄像头',id:value.id }, "*"); //childDomain是子页面的源（协议+主机+端口号）
		},
    postMsg3(){//视频测试
			var myframe = document.getElementById("iframe"); //获取iframe 
			myframe.contentWindow.postMessage({  name: '摄像头',id:"1000002$1$0$7" }, "*"); //childDomain是子页面的源（协议+主机+端口号）
		},
  },
}
</script>
<style lang="scss">
@import '@/assets/styles/common.scss';
  #main{
    width:100%;
    height:auto;
    margin:auto;
    overflow: hidden;
    padding:0 20px;
    font-family: 'MicrosoftYaHei';
    .containWrap{
      clear:both;
      width:100%;
      overflow: hidden;
      padding:0 !important;
      height:950px;
      margin-top:100px;
      .leftWrap{
        display: inline-block;
        width:1167px;
        position: absolute;
        z-index: 10;
        left:0;
        .left{
          width:700px;
          .populationStatistics{
            height:262px;
          }
          .equipmentAlarm,.intrusionAlarm{
            height:180px;
          }
        }
        .right{
            width:450px;
            margin-left:16px;
            color:$white;
            .parkingSpace,.conferenceRoomStatistics,.cnergyConsumptionStatistics,.restaurant{
              height:225px;
            }
            .restaurant{
              height:227px;
            }

        }
        
      }  
      .rightWrap{
        position: absolute;
        z-index: 10;
        right:0;
        margin-left:28px;
        width:1166px;
        display: inline-block;
        overflow: hidden;
        .weather{
          height:9.25925vh;
          padding:1.57407vh 30px;
          overflow: hidden;
          
        }
        .leftR{
          width:449px;
          display: inline-block;
          .wenyin{
            height:267px;
          }
          .iOTNetworkCard{
            height:550px;
          }
          
        }
        .rightR{
          width:700px;
          display: inline-block;
          .equipmentStatus,.fireHazard,.keepWatch{
            height:267.8px;
          }
        }
       
      }
    }
    .mt16{
      margin-top:16px;
    }
    .ml16{
      margin-left:16px;
    }
  }
  .middleWrap{
    display: inline-block;
    overflow: hidden;
    width:100%;
    height:100%;
    border:none;
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index: 9;
  }
  .mask{
    position: fixed;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
    top:0;
    left:0;
    z-index: 100;
  }
//公共样式
.modular{
  background:$modularBackGround;
  color:$white;
  position: relative;
  padding:12px 0px 0px;
  margin-top:1.48148vh;
  .title{
    font-size: 20px;
    margin-left:20px;
    font-family: 'MicrosoftYaHei-Bold'
  }
  .title2{
    margin-bottom:15px;
  }
  
}
.modular:nth-child(1){
  margin-top:0px;
}
</style>