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></showmap>
        <div class="eventlist-box">
          <devInfo></devInfo>
        </div>
      </div>
      <div style="clear: both;"></div>
    </el-col>
    <el-col :span="11">
      <div class="video-box">
        <videoPlay ref="ocx"></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.day_total_snap_num }}</div>
            <div>事件检测总量</div>
          </el-col>
          <el-col :span="6" class="content-item">
            <div class="item-num">{{ snapData.day_single_snap_num }}</div>
            <div>单项总量</div>
          </el-col>
          <el-col :span="6" class="content-item">
            <div class="item-num">{{ snapData.month_total_snap_num }}</div>
            <div>本月事件检测总量</div>
          </el-col>
          <el-col :span="6" class="content-item">
            <div class="item-num">{{ snapData.month_single_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">
            <behaviortrend></behaviortrend>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="bottom-item-box">
            <behaviordis></behaviordis>
          </div>
        </el-col>
        <el-col :span="11" class="clearpright">
          <div class="bottom-item-box">
            <div class="title">实时事件</div>
            <alarmEvent></alarmEvent>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import showmap from "./map";
import videoPlay from "../public/videoPlay";
import behaviortrend from "./behaviortrend";
import behaviordis from "./behaviordis";
import eventList from "./eventList";
import alarmEvent from "./alarmEvent";
import devInfo from "./devInfo";
export default {
  data() {
    return {
      collects: {},
      typeList: [],
      tableData: [],
      eventTypeList: [],
      illageList: [],
      setShow: false,
      archiveUnid: 0,
      snap_num: 0,
      audit_num: 0,
      snapData: {
        day_total_snap_num: 0,
        day_single_snap_num: 0,
        month_total_snap_num: 0,
        month_single_snap_num: 0
      }
    };
  },
  components: {
    showmap,
    videoPlay,
    behaviortrend,
    behaviordis,
    alarmEvent,
    eventList,
    devInfo
  },
  mounted() {},
  methods: {
    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);
    },

    getBehaviorSnap() {
      this.$api.show.getBehaviorSna().then(res => {
        this.snapData = res;
      });
    }
  },
  created() {
    this.getBehaviorSnap();
  }
};
</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: 59.5vh;
	  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>