index.vue

<template>
	<el-row   :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
		<el-col :span="13" >
			<div id="map" class="maps">
				<showmap ref="map" @playvideo="playvideo"></showmap>
				<div class="eventlist-box">
					<!-- <eventList></eventList> -->
					<devInfo></devInfo>
				</div>
			</div>
	
			<div style="clear: both;"></div>
		</el-col>
		<el-col :span="11">
			<div class="video-box">
				<videoPlay ref="ocx" :playurl="playurl"></videoPlay>
			</div>
			<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>
			<div style="clear: both;"></div>
		</el-col>
		<el-col :span="24" class="clearpright">
			<el-row :gutter="12" class="bottom-box">
			<el-col :span="8">
				<div class="bottom-item-box">
					<illegaltrend></illegaltrend>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="bottom-item-box">
					<eventTypedis></eventTypedis>
				</div>
			</el-col>
			<el-col :span="3">
				<div class="bottom-item-box">
						<div class="title">重点车辆分布</div>
						<!-- <div class="car-dis-info" v-for="(item, index) in keyVehicleData" :key="index">
							<div class="left-icon">
								<span class="icon-fanxin-bianzu2"></span>
							</div>
							<div class="right-content">
								<div class="">
									<span class="car-num">{{item.total_num}}</span>辆
								</div>
								<div>{{item.vehicle_name}}</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">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-col :span="8" class="clearpright">
			<div  class="bottom-item-box">
				<div class="title">实时事件</div>
					<alarmEvent @event = "alarmevent"></alarmEvent>
				</div>
			</el-col>
		</el-row>
		</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">
	.video-box{
		height: 46.5vh;
		margin-bottom: 1vh;
		background: #444444;
	}
	.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: 59.3vh;
	  width:100%;
	  margin-bottom: 8px;
	  position: relative;
	}
	
	.el-table__body tr{
		background: #FFFFFF!important;
	}
	.bottom-box{
		width: 100%;
		height: 26.5vh;
		overflow: hidden;
	}
	.bottom-item-box {
		height: 27vh;
		background: #fff;
		overflow: hidden;
	}
	.bottom-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
}
	
</style>