index.vue

<template>
  <el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
    <el-col :span="15">
      <div id="map" class="maps">
        <showmap ref="map"></showmap>
        <div class="eventlist-box">
          <!-- <eventList></eventList> -->
          <devInfo></devInfo>
        </div>
        <!-- <div class="video-box">
        </div> -->
      </div>
      <div style="clear: both;"></div>
    </el-col>
    <el-col :span="9">
      <el-row>
        <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>
      </el-row>
      <el-row :gutter="12" class="event-type-box" style="margin-top:1vh">
        <el-col :span="16">
          <div class="right-item-box">
            <eventTypedis></eventTypedis>
          </div>
        </el-col>
        <el-col :span="8" style="padding-right:0">
          <div class="right-item-box">
            <div class="title">重点车辆分布</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-row>
      <el-row style="margin-top:1vh;background:#fff">
        <div class>
          <illegaltrend></illegaltrend>
        </div>
      </el-row>
      <el-row class="clearpright" style="margin-top:1vh">
        <div class="right-item-box">
          <div class="title">实时事件</div>
          <alarmEvent @event="alarmevent"></alarmEvent>
        </div>
      </el-row>
      <div style="clear: both;"></div>
    </el-col>
  </el-row>
</template>

<script>
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,
      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,
    illegaltrend,
    eventTypedis,
    alarmEvent,
    devInfo,
    eventList
  },
  mounted() {},
  methods: {
    alarmevent(data) {
      //移动地图
      this.$refs.map.movemap(data);
    },
    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.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: 89.3vh;
  width: 100%;
  margin-bottom: 8px;
  position: relative;
}

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

.event-type-box {
  width: 100%;
  height: 26.5vh;
  overflow: hidden;
}

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

.right-item-box .title {
  padding-left: 5px;
  line-height: 3vh;
}

.car-dis-info {
  display: flex;
  flex-direction: row;
  margin: 1vh 0.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;
}

.video-box {
  position: absolute;
  height: 46.5vh;
  width: 30vw;
  margin-bottom: 1vh;
  background: #444444;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
}
</style>