index.vue

<template>
  <el-row
    :gutter="12"
    style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
  >
    <el-col :span="15">
      <div class="mapbox">
        <div id="map" class="maps">
          <div class="search-vchan">
            <el-input
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              v-model="vchanname"
              class="input-with-select"
            >
            </el-input>
          </div>
          <div class="devinfobox">
            <devInfo></devInfo>
          </div>
          <showmap ref="map"></showmap>
          <div class="video-box" v-show="ocxstatus">
            <div class="video-box-close" @click="closeocx"></div>
            <!-- <videoPlay2 ref="mapvideo2" :playurl="playurl2"></videoPlay2> -->
          </div>
        </div>
      </div>
      <div style="clear: both;"></div>
      <el-row>
        <div class="collect-box card-hover">
          <div class="header-title">重点车辆分布</div>
          <div class="collect-content">
            <el-col :span="6" class="content-item">
              <div class="zd-icon" style="color:#FF9630">
                <span class="icon-fanxing-kakouzongliang"></span>
              </div>
              <div>
                <div class="zd-title">卡口数量</div>
                <div class="zd-num">{{ snapData.kakou_total_snap_num }}</div>
              </div>
            </el-col>
            <el-col :span="6" class="content-item">
              <div class="zd-icon" style="color:#3BB7FF">
                <span class="icon-fanxing-shijianzongliang"></span>
              </div>
              <div>
                <div class="zd-title">事件总量</div>
                <div class="zd-num">{{ snapData.event_total_snap_num }}</div>
              </div>
            </el-col>
            <el-col :span="6" class="content-item">
              <div class="zd-icon" style="color:#0069FF">
                <span class="icon-fanxing-weifazongliang"></span>
              </div>
              <div>
                <div class="zd-title">违法总量</div>
                <div class="zd-num">{{ snapData.illega_total_snap_num }}</div>
              </div>
            </el-col>
            <el-col :span="6" class="content-item">
              <div class="zd-icon" style="color:#7460EE">
                <span class="icon-fanxing-teshucheliangzongliang"></span>
              </div>
              <div>
                <div class="zd-title">特殊车辆总量</div>
                <div class="zd-num">{{ snapData.key_vehicle_total_snap_num }}</div>
              </div>
            </el-col>
          </div>
        </div>
      </el-row>
    </el-col>
    <el-col :span="9">
      <el-row style="background:#fff">
        <div class="card-hover">
          <illegaltrend></illegaltrend>
        </div>
      </el-row>
      <el-row :gutter="12" class="event-type-box" style="margin-top:1.5vh">
        <el-col :span="16" class="card-hover">
          <div class="right-item-box">
            <eventTypedis></eventTypedis>
          </div>
        </el-col>
        <el-col :span="8" style="padding-right:0" class="card-hover">
          <div class="right-item-box">
            <div class="title">重点车辆分布</div>
            <div class="car-dis-info">
              <div class="left-icon">
                <span class="icon-fanxing-zhatuchezhuapai1"></span>
              </div>
              <div class="right-content">
                <div><span class="car-num">10</span>辆</div>
                <div>渣土车抓拍</div>
              </div>
            </div>
            <div class="car-dis-info">
              <div class="left-icon">
                <span
                  class="icon-fanxing-weixianpin1"
                  style="color:#FF9630"
                ></span>
              </div>
              <div class="right-content">
                <div><span class="car-num">10</span>辆</div>
                <div>危险品车</div>
              </div>
            </div>
            <div class="car-dis-info">
              <div class="left-icon">
                <span
                  class="icon-fanxing-zhatuchezhuapai1"
                  style="color:#36BEA6"
                ></span>
              </div>
              <div class="right-content">
                <div class><span class="car-num">29</span>辆</div>
                <div>重型罐式车</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="clear: both;"></div>
    </el-col>
    <el-col :span="24">
      <el-row class="clearpright" style="margin-top:1.5vh">
        <div class="right-item-box card-hover">
          <div class="title">实时数据</div>
          <alarmEvent @event="alarmevent"></alarmEvent>
        </div>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// import mPlayvideo from "../public/mapvideo"
// import videoPlay from "../public/mapvideo";
// import videoPlay2 from "../public/mapvideo2";
import showmap from "./map";
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,
      ocxstatus: false,
      archiveUnid: 0,
      snap_num: 0,
      playurl: {},
      vchanname: "",
      playurl2: "",
      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,
    // mPlayvideo,
    // videoPlay,
    // videoPlay2,
    illegaltrend,
    eventTypedis,
    alarmEvent,
    devInfo,
    eventList
  },
  mounted() {
    // let urlarr = ["rtsp://192.168.9.133:8554//opt/data/vedio/1579253441478.264","tsp://192.168.9.133:8554//opt/data/vedio/1577516797543.264"]
    // urlarr.forEach((ele) => {
    // 	let obj = {}
    // 	obj.rtsp_url =ele;
    // 	setTimeout(()=>{
    // 		let obj = {}
    // 		 obj.rtsp_url = ele
    // 		this.playurl = obj
    // 		 this.$refs.mapvideo.videoPlay();
    // 	},100)
    // })
  },
  methods: {
    alarmevent(data) {
      //移动地图
      this.$refs.map.movemap(data,null,2);
    },
    searchvchan() {
      this.$refs.map.searchvchan(this.vchanname);
    },
    closeocx() {
      this.ocxstatus = false;
    },
    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.2vh;
  background: #fff;
  margin-top 1.5vh
  .header-title {
    padding: 10px 0px 0 10px;
    width:113px;
    height:20px;
    font-size:14px;
    color:rgba(0,0,0,1);
    line-height:20px;
  }

  .collect-content {
    margin-top: 1.6vh;
    overflow hidden
    .content-item {
      display flex
      text-align: center;
      align-items center
      justify-items center
      overflow hidden
    }

    .content-item:last-child {
      border-right: 0;
    }
  }
  .zd-icon {
    margin 0 10px 0 20px
  span {
    font-size 32px
  }
}
 .zd-num{
    font-size: 24px;
    font-weight 600
    color: #424242;
    margin-top 5px
  }
  .zd-title{
    font-size: 14px;
    color: #000;
  }
}

.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;
}
.mapbox{
  background #fff;
  overflow hidden
}
.maps {
  float left;
  height: 49vh;
  width: 100%;
  margin-bottom: 8px;
  position: relative;
  background url('./map.png') -12px -3px;
  background-size 100% 110%
}

.el-table__body tr {
  background: #FFFFFF !important;
}

.event-type-box {
  width: 100%;
  height: 27vh;
}

.right-item-box {
  height: 27vh;
  background: #fff;
}

.right-item-box .title {
  padding: 5px 10px;
  line-height: 3vh;
  color:rgba(0,0,0,1);
}

.car-dis-info {
  display: flex;
  flex-direction: row;
  margin: 1vh 0.3vw;
  overflow hidden
  .left-icon {
    width: 3vw;
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    overflow hidden
    span {
      font-size: 30px;
      color:#0069FF
    }
  }

}



.car-num {
  font-size: 22px;
  font-weight: 600;
  padding-right: 5px;
}

.eventlist-box {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1000;
}

.video-box {
  position: absolute;
  height 48vh
  width 35vw
  margin-bottom: 1vh;
  background: #f0f0f0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
}
.video-box-close{
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
.video-box-close:after {
		height:20px;
		width:20px;
    content: "✖";
		color:#444444;
}
.play-item{
	width:200px;
	height:200px;
}
.search-vchan{
    width 170px;
    position: absolute;
    top: 12px;
    z-index 900;
    left 20px;
    border-radius 5px;
}
.devinfobox {
  position absolute
  top 40px
  left 10
  z-index 100
}

</style>