index.vue

<template>
	<el-row   :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
		<el-col :span="14" >
			<el-row class="infoBox" :gutter="9">
				<el-col :span="6" class="infoChild">
					<div class="info-item-box">
						<img src="../../assets/img/map/syn.png" alt="">
						<span class="textCon">
							<div>分析资源</div>
							<div class="colorText"><span>64</span>路</div>
						</span>
					</div>
				</el-col>
				<el-col :span="6" class="infoChild">
					<div class="info-item-box">
						<img src="../../assets/img/map/car.png" alt="">
						<span class="textCon">
							<div>运行路数</div>
							<div class="colorText"><span>47</span>路</div>
						</span>
					</div>
				</el-col>
				<el-col :span="6" class="infoChild">
					<div class="info-item-box">
						<img src="../../assets/img/map/warn.png" alt="">
						<span class="textCon">
							<div>运行异常资源</div>
							<div class="colorText"><span>7</span>个</div>
						</span>
					</div>
				</el-col>
				<el-col :span="6" class="infoChild">
					<div class="info-item-box">
						<img src="../../assets/img/map/total.png" alt="">
						<span class="textCon">
							<div>数量总数</div>
							<div class="colorText"><span>23548</span>路</div>
						</span>
					</div>
				</el-col>
			</el-row>
			<div id="map" class="maps">
				<showmap></showmap>
				<div class="eventlist-box">
					<eventList></eventList>
				</div>
			</div>
	
			<div style="clear: both;"></div>
		</el-col>
		<el-col :span="10">
			<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}}</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="10" 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">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'
	export default{
		data(){
			return{
				typeList:[],
				tableData:[],
				eventTypeList:[],
				keyVehicleData:[],
				illageList:[],
				setShow:false,
				archiveUnid:0,
				snap_num:0,
				playurl:'',
				audit_num:0,
				snapData:{
					card:"246",
					event:145,
					illage:341,
					car:134
				}
			}
		},
		components:{
			showmap,
			videoPlay,
			illegaltrend,
			eventTypedis,
			alarmEvent,
			eventList
		},
		mounted(){
			
		},
		methods:{
			alarmevent(data){
				//移动地图
				this.$ref.map.movemap(data)
				//播放视频
				this.playurl = data.playurl
				this.$ref.ocx.videoPlay()
			},

			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{
	}
	.infoBox{
		margin-bottom: 1vh;
	}
	.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: 50vh;
	  width:100%;
	  margin-bottom: 8px;
	  position: relative;
	}
	
	.el-table__body tr{
		background: #FFFFFF!important;
	}
	.bottom-box{
		width: 100%;
		height: 25vh;
		overflow: hidden;
	}
	.bottom-item-box {
		height: 25vh;
		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>