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></showmap>
        <div class="eventlist-box">
          <devInfo></devInfo>
        </div>
        <div class="video-box">
          <videoPlay ref="ocx"></videoPlay>
        </div>
      </div>
      <div style="clear: both;"></div>
    </el-col>
    <el-col :span="9">
      <el-row 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>
      </el-row>
      <el-row class="bottom-box" style="margin-top:1vh">
        <div class="bottom-item-box">
          <behaviortrend></behaviortrend>
        </div>
      </el-row>
      <el-row style="margin-top:1vh">
        <div class="bottom-item-box">
          <behaviordis></behaviordis>
        </div>
      </el-row>
      <el-row style="margin-top:1vh">
        <div class="bottom-item-box">
          <div class="title">实时事件</div>
          <alarmEvent></alarmEvent>
        </div>
      </el-row>
      <div style="clear: both;"></div>
    </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 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>