index.vue

<template>
  <el-row
    :gutter="10"
    style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
  >
    <el-col :span="15">
      <div id="map" class="maps">
        <showmap ref="map" @playvideo="playvideo"></showmap>
        <div class="eventlist-box">
          <!-- <eventList></eventList> -->
          <devInfo></devInfo>
        </div>
				<div class="video-box">
            <videoPlay ref="ocx" :playurl="playurl"></videoPlay>
          </div>
      </div>
      <div style="clear: both;"></div>
    </el-col>
    <el-col :span="9">
      <el-row>
        <div class="collect-box">
          <div class="header-title">今日抓拍量</div>
          <div class="collect-content">
            <el-col :span="6" class="content-item">
              <div class="item-num">{{ snapData.kakou_total_snap_num }}</div>
              <div>卡口总量</div>
            </el-col>
            <el-col :span="6" class="content-item">
              <div class="item-num">{{ snapData.event_total_snap_num }}</div>
              <div>事件总量</div>
            </el-col>
            <el-col :span="6" class="content-item">
              <div class="item-num">{{ snapData.illega_total_snap_num }}</div>
              <div>违法总量</div>
            </el-col>
            <el-col :span="6" class="content-item">
              <div class="item-num">
                {{ snapData.key_vehicle_total_snap_num }}
              </div>
              <div>特殊车辆总量</div>
            </el-col>
          </div>
        </div>
      </el-row>
      <el-row :gutter="12" class="event-type-box" style="margin-top:1vh">
        <el-col :span="16">
          <div class="right-item-box">
            <eventTypedis></eventTypedis>
          </div>
        </el-col>
        <el-col :span="8" style="padding-right:0">
          <div class="right-item-box">
            <div class="title">重点车辆分布</div>
            <div class="car-dis-info">
              <div class="left-icon">
                <span class="icon-fanxin-bianzu2"></span>
              </div>
              <div class="right-content">
                <div class=""><span class="car-num">10</span>辆</div>
                <div>渣土车抓拍</div>
              </div>
            </div>
            <div class="car-dis-info">
              <div class="left-icon">
                <span class="icon-fanxin-bianzu2"></span>
              </div>
              <div class="right-content">
                <div class=""><span class="car-num">10</span>辆</div>
                <div>危险品车</div>
              </div>
            </div>
            <div class="car-dis-info">
              <div class="left-icon">
                <span class="icon-fanxin-bianzu2"></span>
              </div>
              <div class="right-content">
                <div class=""><span class="car-num">29</span>辆</div>
                <div>重型罐式车</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top:1vh;background:#fff">
        <div class="">
          <illegaltrend></illegaltrend>
        </div>
      </el-row>
      <el-row class="clearpright"  style="margin-top:1vh">
        <div class="right-item-box">
          <div class="title">实时事件</div>
          <alarmEvent @event="alarmevent"></alarmEvent>
        </div>
      </el-row>
      <div style="clear: both;"></div>
    </el-col>
  </el-row>
</template>

<script>
import showmap from "./map";
import videoPlay from "../public/videoPlay";
import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis";
import eventList from "./eventList";
import alarmEvent from "./alarmEvent";
import devInfo from "../behaviorShow/devInfo";
export default {
  data() {
    return {
      typeList: [],
      tableData: [],
      eventTypeList: [],
      keyVehicleData: [],
      illageList: [],
      setShow: false,
      archiveUnid: 0,
      snap_num: 0,
      playurl: "",
      audit_num: 0,
      snapData: {
        illega_total_snap_num: 0,
        key_vehicle_total_snap_num: 0,
        event_total_snap_num: 0,
        kakou_total_snap_num: 0
      }
    };
  },
  components: {
    showmap,
    videoPlay,
    illegaltrend,
    eventTypedis,
    alarmEvent,
    devInfo,
    eventList
  },
  mounted() {},
  methods: {
    alarmevent(data) {
      //移动地图
      this.$refs.map.movemap(data);
    },
    playvideo(data) {
      let obj = {};
      if (data.vchan_name == "视频1") {
        obj.rtsp_url =
          "rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d";
      } else if (data.vchan_name == "视频2") {
        obj.rtsp_url =
          "rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac";
      }
      this.playurl = obj;

      setTimeout(() => {
        this.$refs.ocx.videoPlay();
      }, 0);

      // this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
      // 	debugger
      // 	if(res.task_list.length >0) {
      // 			var taskarr = res.task_list;
      // 			let obj = {};
      // 			for(let i = 0; i < taskarr.length; i++){
      // 				if(taskarr[i].rtsp_url !=''){
      // 					obj.rtsp_url = res.task_list[i].rtsp_url
      // 					break;
      // 				}
      // 			}
      // 			this.playurl = obj
      // 			this.$refs.ocx.videoPlay()
      // 		} else {
      // 			  this.$message({
      //         message: '该相机下没有分析任务',
      //         type: 'error'
      //       });
      // 		}

      // })
    },
    getTrafficSnap() {
      this.$api.show.getTrafficSnap().then(res => {
        this.snapData = res;
      });
    },
    getKeyVehicle() {
      this.$api.show.getKeyVehicle().then(res => {
        this.keyVehicleData = res;
      });
    }
  },
  created() {
    this.getTrafficSnap();
    this.getKeyVehicle();
  }
};
</script>

<style scoped="scoped" lang="stylus">
	.collect-box{
		height 11.8vh
		background #fff
		.header-title{
			padding 10px 0px 0 20px
		}
		.collect-content{
			margin-top 1.6vh
			.content-item{
				text-align center
				border-right 1px solid #E5E5E5
			}
			.content-item:last-child{
				border-right 0
			}
		}
		.item-num{
			font-size 16px
			color #444444
		}
	}
	.left-box{
	}
	.infoChild{
		height: 8.5vh;
		display: inline-block;
	}
	.info-item-box{
		height 100%;
		background: #FFFFFF;
	}
	.infoChild:nth-child(1) img{
		width: 27px;
		height: 27px;
		margin: 22px 20px 21px 40px;
	}
	.infoChild:nth-child(2) img{
		width: 30px;
		height: 27px;
		margin: 22px 22px 21px 37px;
	}
	.infoChild:nth-child(3) img{
		width: 28px;
		height: 28px;
		margin: 22px 22px 20px 34px;
	}
	.infoChild:nth-child(4) img{
		width: 27px;
		height: 28px;
		margin: 22px 22px 20px 34px;
	}
	.textCon{
		display: inline-block;
		vertical-align: top;
		font-size: 12px;
		color: #666666;
		margin-top: 14px;
	}
	.textCon span{
		font-size: 20px;
		margin-right: 2px;
	}
	.colorText{
		margin-top: 6px;
		color: #444444;
	}
	.ol-control button{
	  display:none!important;
	  background:red!important
	}

	.pop-info{
	  float: left;
	  padding-left: 20px;
	  width :100px
	}

	.numBox{
		width: 307px;
		height: 125px;
		background: #FFFFFF;
		color: #444444;
		position: relative;
	}
	.numBox:nth-child(1){
		margin-bottom: 6px;
	}
	.num{
		font-size: 30px;
		margin: 27px 0 0 13px;
		display: inline-block;
		font-weight:bold;
	}
	.catch{
		width: 57px;
		position: absolute;
		top:59px;
		right: 16px;
	}
	.backSea{
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}


	.ltext{
		width: 71px;
		height: 100%;
		border-right:1px solid #E5E5E5;
	}
	.lnum{
		width: 37px;
	}
	.maps{
	  height: 89.3vh;
	  width:100%;
	  margin-bottom: 8px;
	  position: relative;
	  background red
	}

	.el-table__body tr{
		background: #FFFFFF!important;
	}
	.event-type-box{
		width: 100%;
		height: 26.5vh;
		overflow: hidden;
	}
	.right-item-box {
		height: 27vh;
		background: #fff;
		overflow: hidden;
	}
	.right-item-box .title{
		padding-left: 5px;
		line-height 3vh
	}
	.car-dis-info{
		display flex
		flex-direction row
		margin 1vh .3vw
		.left-icon {
			width 3vw
			height 6vh
			line-height 6vh
			text-align center
			span{
				font-size 30px
			}
		}
	}
	.car-dis-info:nth-child(2){
		.left-icon {
			span{
				color #FF9630
			}
		}
	}
	.car-dis-info:nth-child(3){
		.left-icon {
			span{
				color #F56C6C
			}
		}
	}
	.car-dis-info:nth-child(4){
		.left-icon {
			span{
				color #36BEA6
			}
		}
	}
	.car-num{
		font-size 22px
		font-weight 600
		padding-right 5px
	}
	.eventlist-box{
		position absolute
		left 10px
		top 10px
		z-index 1000
}
.video-box{
		position absolute
		height: 46.5vh;
		width 30vw
		margin-bottom: 1vh;
		background: #444444;
		left 0
		right 0
		top 0
		bottom 0
		margin auto
		z-index 1000
}
</style>