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="停车位统计" :resInfo="data.tingche" />
            <conferenceRoomStatistics alt="会议室统计" @postMsg="postMsg" :resInfo="data.huiyi"/>
            <cnergyConsumptionStatistics alt="能耗统计" :resInfo="data.nenghao"/>
            <restaurant alt="智慧餐饮" @canyinClick="canyinClick" :resInfo="data.canyin"/>
          </el-col>
        </el-col>
        <el-col  id="middleWrap" >
          <!-- <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='http://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
          <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='http://10.21.39.6:9000/'></iframe>
        </el-col>
        <el-col  class="rightWrap">
          <weather alt="天气"/>
          <el-col class="leftR mt16">
            <wenyin alt="文印助手" @postMsg="postMsg" :resInfo="data.wenyin" />
            <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 id="loader-wrapper2" v-if="sanwei">
        <div id="loader2"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">三维模型加载中...</div>
      </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 {
      sanwei:true,
      springFrameState:false,
      springFrameItem:{
        video:undefined,
        xg:undefined,
        hy:undefined,
        dyj:undefined,
        canyin:false,
        gjxx:undefined,
        rqgj:undefined,
        xfgj:undefined,
      },
      Pshow:false,


      //数据
      data:{
        tingche:{},
        huiyi:{},
        nenghao:{},
        canyin:{},
        wenyin:{}
      }

    };
  },
  created(){
    setTimeout(() =>{
      document.getElementById("middleWrap").style.zIndex= "9"
      this.sanwei = false
    },5000)
    axios({
        method: 'get',
        url: 'https://smartpark.caih.com/dxapi/system/config/configKey/large.json.config',
        timeout: 10000,
    }).then(res =>{
      this.data = JSON.parse(res.data.data)
    })
    setInterval(()=>{
      axios({
          method: 'get',
          url: 'https://smartpark.caih.com/dxapi/system/config/configKey/large.json.config',
          timeout: 10000,
      }).then(res =>{
        this.data = JSON.parse(res.data.data)
      })
    },1000*60*10)
  },
  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:560px;
          }

        }
        .rightR{
          width:700px;
          display: inline-block;
          .equipmentStatus{
            height:267.8px;
          }
          .fireHazard,.keepWatch{
            height:272.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: -1;
  }
  .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;
}

#loader-wrapper2 {
      position: fixed;
      top: 0;
      left: 0;
      width: 200px;
      margin:0 calc(50vw - 100px);
      height: 100%;
      z-index: 0;
  }

  #loader2 {
      display: block;
      position: fixed;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      z-index: 1001;

  }

  #loader2:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
  }

  #loader2:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
  }

  @-webkit-keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }

  @keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }

  #loader-wrapper2 .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;

      z-index: 0;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
  }

  #loader-wrapper2 .loader-section.section-left {
      left: 0;
  }

  #loader-wrapper2 .loader-section.section-right {
      right: 0;
  }

  .loaded #loader-wrapper2 .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  }

  .loaded #loader-wrapper2 .loader-section.section-right {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  }

  .loaded #loader2 {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
  }

  .loaded #loader-wrapper2 {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
  }

  .no-js #loader-wrapper2 {
      display: none;
  }

  .no-js h1 {
      color: #222222;
  }

  #loader-wrapper2 .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: fixed;
      top: 60%;
      left:0;
      opacity: 1;
      line-height: 30px;
  }

  #loader-wrapper2 .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
  }
</style>