allEvent.vue

<template>
  <div class="pic-content scrollbar">
    <el-row v-if="allAlarmData.length > 0">
      <!-- 交通事件类 -->
      <!-- 机动车事件 -->
      <el-col
        :span="24"
        ref="picbox"
        :class="{
          'pic-box': true,
          'pic-hover': true,
          illclass: item.illegalTypeCode == 1 ? true : false
        }"
        v-for="(item, index) in allAlarmData"
        :key="index"
        v-if="item.event_cate !== 'flow'"
      >
        <el-col :lg="12" :md="10" :sm="11" v-if="item.task_algo_type != '1'">
          <el-card :body-style="{ padding: 0 }">
            <div class="img-wrap" @click="showInfo(index)">
              <b class="img-border"></b>
              <div class="picbackground">
                <img :src="item.pic" class="photos" />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col
          :lg="11"
          :md="14"
          :sm="13"
          v-if="item.event_type === 'vehicle' || item.event_type === 'xcycle'"
        >
          <ul class="pic-info">
            <li
              v-if="item.event_type === 'vehicle'"
              :title="item.vehicle_plate_text"
            >
              <span>车牌号码:</span>
              <span>{{ item.vehicle_plate_text }}</span>
            </li>
            <li
              v-if="item.event_type === 'vehicle'"
              :title="item.vehicle_body_type_text"
            >
              <span>车辆类型:</span>
              <span>{{ item.vehicle_body_type_text }}</span>
            </li>
            <li
              v-if="item.event_type === 'vehicle'"
              :title="item.vehicle_body_color_text"
            >
              <span>车身颜色:</span>
              <span>{{ item.vehicle_body_color_text }}</span>
            </li>
            <li
              v-if="item.event_type === 'vehicle'"
              :title="item.vehicle_body_logo_text"
            >
              <span>车辆品牌:</span>
              <span>{{ item.vehicle_body_logo_text }}</span>
            </li>
            <li v-if="item.illegalType" :title="item.illegalType">
              <span>违法类型:</span>
              <span>{{ item.illegalType }}</span>
            </li>

            <!-- 非机动车 -->
            <li
              v-if="item.event_type === 'xcycle'"
              :title="item.xcycle_type_text"
            >
              <!-- 非机动车类型 -->
              <span>车辆类型:</span>
              <span>{{ item.xcycle_type_text }}</span>
            </li>
            <!-- <li v-if="item.event_type === 'xcycle'">
							<span>是否违法:</span>
							<span>{{ item.illegalType}}</span>
						</li> -->
            <!-- <li :title="item.driver_face_sex"  v-if="item.event_type === 'xcycle'">
							<span>{{ item.driver_face_sex }}</span>
						</li> -->
            <li v-if="item.event_type === 'xcycle'" :title="item.company">
              <span>运营公司:</span>
              <span>{{ item.company }}</span>
            </li>
            <li
              v-if="item.event_type === 'xcycle'"
              :title="item.xcycle_color_type"
            >
              <span>车辆颜色:</span>
              <span>{{ item.xcycle_color_type }}</span>
            </li>
            <li
              v-if="item.event_type === 'xcycle'"
              :title="item.driver_face_upbody_text"
            >
              <span>上身颜色:</span>
              <span>{{ item.driver_face_upbody_text }}</span>
            </li>
            <li
              :title="item.driver_face_lobody_text"
              v-if="item.event_type === 'xcycle'"
            >
              <span>速度:</span>
              <span>{{ item.location_speed }}</span>
            </li>
            <li
              :title="item.driver_face_lobody_text"
              v-if="item.event_type === 'xcycle'"
            >
              <span>戴帽子:</span>
              <span>{{ item.driver_face_with_hats }}</span>
            </li>
            <!-- <li v-if="item.illegalType" :title="item.illegalType">
							<span>违法类型:</span>
							<span>{{ item.illegalType }}</span>
						</li> -->
          </ul>
        </el-col>
        <!-- 行人事件 -->
        <el-col
          :lg="12"
          :md="14"
          :sm="13"
          v-if="item.event_type === 'pedestrian'"
        >
          <ul class="pic-info">
            <!-- <li :title="item.shoot_date">
							<span>抓拍日期:</span>
							<span>{{ item.shoot_date }}</span>
						</li>
						<li :title="item.shoot_time">
							<span>抓拍时间:</span>
							<span>{{ item.shoot_time }}</span>
						</li> -->
            <li :title="item.driver_face_sex">
              <span>性别:</span>
              <span>{{ item.driver_face_sex }}</span>
            </li>
            <li :title="item.driver_face_upbody_text">
              <span>上身颜色:</span>
              <span>{{ item.driver_face_upbody_text }}</span>
            </li>
            <li :title="item.driver_face_lobody_text">
              <span>下身颜色:</span>
              <span>{{ item.driver_face_lobody_text }}</span>
            </li>
            <li :title="item.pedestrian_height">
              <span>身高:</span>
              <span>{{ item.pedestrian_height }}</span>
            </li>
            <li :title="item.driver_face_lobody_text">
              <span>速度:</span>
              <span>{{ item.location_speed }}</span>
            </li>
            <li :title="item.driver_face_lobody_text">
              <span>戴帽子:</span>
              <span>{{ item.driver_face_with_hats }}</span>
            </li>
            <!-- <li v-if="item.illegalType" :title="item.illegalType">
							<span>违法类型:</span>
							<span>{{ item.illegalType }}</span>
						</li> -->
          </ul>
        </el-col>
        <!--安防事件-->
        <el-col :span="12" v-if="item.event_cate === 'behavior'">
          <ul class="pic-info">
            <li :title="item.event_type">
              <span>事件类型:</span>
              <span>{{ item.event_type }}</span>
            </li>
            <!-- 区域人数 -->
            <li v-if="item.event_type == '21'">
              <span>区域{{ item.event_data.density.persons }}人</span>
            </li>
            <li>
              <span>抓拍日期:</span>
              <span>{{ item.shoot_date }}</span>
            </li>
            <li :title="item.shoot_time">
              <span>抓拍时间:</span>
              <span>{{ item.shoot_time }}</span>
            </li>
            <!-- <li v-if="item.illegalType" :title="item.illegalType">
							<span>违法类型:</span>
							<span>{{ item.illegalType }}</span>
						</li> -->
          </ul>
        </el-col>
      </el-col>
      <!--客流事件-->
      <el-col
        :span="22"
        class="pic-box"
        v-for="(item, index) in allAlarmData"
        :key="index"
        v-if="item.event_cate === 'flow'"
      >
        <el-col :span="24">
          <ul class="pic-info">
            <li :title="item.shoot_date">
              <span class="flow-left">抓拍日期:</span>
              <span class="flow-right">{{ item.shoot_date }}</span>
            </li>
            <li :title="item.shoot_time">
              <span class="flow-left">抓拍时间:</span>
              <span class="flow-right">{{ item.shoot_time }}</span>
            </li>
            <li :title="item.event_type_text">
              <span class="flow-left">事件类型:</span>
              <span class="flow-right">{{ item.event_type_text }}</span>
            </li>
            <li v-if="item.event_type === 'inout_num'" :title="item.inNum">
              <span class="flow-left">进入人数:</span>
              <span class="flow-right">{{ item.inNum }}</span>
            </li>
            <li v-if="item.event_type === 'inout_num'" :title="item.outNum">
              <span class="flow-left">离开人数:</span>
              <span class="flow-right">{{ item.outNum }}</span>
            </li>
            <li v-if="item.event_type === 'postions'" :title="item.areaPersons">
              <span class="flow-left">人数:</span>
              <span class="flow-right">{{ item.areaPersons }}</span>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allAlarmData: [],
      curPicData: ""
    };
  },
  props: ["itemData"],
  methods: {
    showInfo: function(index) {
      this.curPicData = this.allAlarmData[index];
      if (this.curPicData) {
        this.$emit("showDitail", this.curPicData);
      }
    }
  },
  created() {},
  mounted() {},
  watch: {
    itemData(val) {
      if (val == "") {
        this.allAlarmData = [];
        return;
      }
      var timer = new Date().getTime();
      if (
        val.event_cate === "flow" ||
        val.event_type === "pflow" ||
        val.event_type === "pdensity"
      )
        return;
      if (this.allAlarmData.length > 20) {
        this.allAlarmData.pop();
      } else {
        this.allAlarmData.unshift(val);
      }
    }
  }
};
</script>
<style lang="stylus" scoped></style>