index.vue

<template>
	<el-row   :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
		<el-col :span="12" >
			<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>
	
			<div style="clear: both;"></div>
		</el-col>
		<el-col :span="12">
			<div class="video-box">
				<videoPlay ref="ocx"></videoPlay>
			</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">3</div>
			</el-col>
			<el-col :span="8" class="clearpright">
			<div  class="bottom-item-box">
				<div class="title">实时事件</div>
				<el-table
				      :data="tableData"
				      >
					  <el-table-column
					    type="index"
							align="center"
					    label="#">
					  </el-table-column>
				      <el-table-column
					  align="center"
				        prop="eventType"
				        label="事件地点"
						:formatter="eventFormatter">
				      </el-table-column>
				      <el-table-column
					  align="center"
				        prop="locationName"
				        label="抓拍类型">
				      </el-table-column>
					  <el-table-column
						  align="center"
					    prop="startDt"
					    label="发生时间">
					  </el-table-column>
					  <el-table-column
						  align="center"
					    prop="operation"
					    label="操作">
						<template slot-scope="scope">
							<el-tooltip content="详情及审核" placement="bottom" effect="light" :visible-arrow=false>
								<img src="../../assets/img/home/look.png" alt="" class="edit"  @click="editVideo(scope.$index, scope.row)">
							</el-tooltip>
							<span class="tableSpanBorder"></span>
							<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
								<img src="../../assets/img/home/del.png" alt="" class="del"  @click="delFun(scope.$index, scope.row)">
							</el-tooltip>
						</template>
					  </el-table-column>
				    </el-table>
				</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'
	export default{
		data(){
			return{
				typeList:[],
				tableData:[],
				eventTypeList:[],
				setShow:false,
				archiveUnid:0,
				startDt:moment(moment().format('YYYY-MM-DD')+' 00:00:00').utc().format('YYYY-MM-DD HH:mm:ss'),
				endDt:moment(moment().format('YYYY-MM-DD')+' 23:59:59').utc().format('YYYY-MM-DD HH:mm:ss'),
				snap_num:0,
				audit_num:0
			}
		},
		components:{
			showmap,
			videoPlay,
			illegaltrend,
			eventTypedis
		},
		mounted(){
			this.getNum();
			setTimeout(()=>{
				// this.drawLine();
				// this.getEventTypeList();
			},300)
		},
		methods:{
			getNum(){
				this.$api.map.homeNum({
					startDt:this.startDt,
					endDt:this.endDt,
					_t: Date.parse(new Date())/1000
				}).then((res)=>{
					this.typeList=res.list_data
				}).catch((error)=>{
				})
				this.$api.map.homeCatch({
					startDt:this.startDt,
					endDt:this.endDt,
					_t: Date.parse(new Date())/1000
				}).then((res)=>{
					this.snap_num=res.snap_num;
					this.audit_num=res.audit_num;
				}).catch((error)=>{
				})
			},
			getEventTypeList(){
				this.$api.map.eventTypeData({
					_t: Date.parse(new Date())/1000
				}).then((res)=>{
					this.eventTypeList=res.list_data;
					this.getData()
				})
			},
			getData(){
				this.$api.map.archive({
					startDt:this.startDt,
					endDt:this.endDt,
					_t: Date.parse(new Date())/1000
				}).then((res)=>{
					this.tableData=res.content;
				})
			},
			editVideo(index,row){
				this.setShow=true;
				this.archiveUnid=row.archive_unid;
			},
			delFun(index,row){
				this.$api.map.delEvent({},row.archive_unid).then((res)=>{
					console.log(res)
				})
				console.log(row)
			},
			eventFormatter(row, column, cellValue, index){
				let value=''
				this.eventTypeList.forEach(item=>{
					if(item.code==cellValue){
						value=item.name;
					}
				})
				return value;
			},
		}
	}
</script>

<style scoped="scoped">
	.video-box{
		height: 59.5vh;
		margin-bottom: 1vh;
		background: #444444;
	}
	.left-box{
	}
	.infoBox{
		margin-bottom: 1vh;
	}
	.infoChild{
		height: 8.5vh;
		display: inline-block;
	}
	.info-item-box{
		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;
	}
</style>