eventAlarm.vue

<template>
  <div class="pic-content scrollbar">
    <el-row v-if="eventAlarmData.length > 0">
      <!-- 交通事件类 -->
      <!-- 机动车事件 -->
      <el-col
        :span="22"
        class="pic-box"
        v-for="(item, index) in eventAlarmData"
        :key="index"
      >
        <el-col :span="12" 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 :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.location_name">
							<span>地点名称:</span>
							<span>{{ item.location_name }}</span>
						</li> -->
            <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.event_type === 'vehicle'"
              :title="item.vehicle_RefinedFeature_text"
            >
              <span>标志物:</span>
              <span>{{ item.RefinedFeature_text }}</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'"
              :title="item.xcycle_color_type"
            >
              <span>车辆颜色:</span>
              <span>{{ item.xcycle_color_type }}</span>
            </li>
            <li
              :title="item.driver_face_sex"
              v-if="item.event_type === 'xcycle'"
            >
              <span>性别:</span>
              <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.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 :span="12" 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="getCode('安防事件', item.event_type)">
              <span>事件类型:</span>
              <span>{{ item.event_type }}</span>
            </li>
            <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 v-if="item.event_type == '21'">
              <span>区域人数:</span>
              <span>{{ item.event_data.density.persons }}人</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 eventAlarmData"
        :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">
              <span class="flow-left">事件类型:</span>
              <span class="flow-right">{{ item.event_type }}</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 {
      eventAlarmData: []
    };
  },
  props: ["itemData"],
  methods: {
    showInfo: function(index) {
      this.curPicData = this.eventAlarmData[index];
      if (this.curPicData) {
        this.$emit("showDitail", this.curPicData);
      }
    }
  },
  created() {},
  mounted() {},
  watch: {
    itemData(val) {
      if (val == "") {
        this.eventAlarmData = [];
			}
			if (val.event_cate == "behavior") {
        if (this.eventAlarmData.length > 20) {
          this.eventAlarmData.pop();
        } else {
          this.eventAlarmData.unshift(val);
        }
		}
		}
  }
};
</script>
<style scoped lang="stylus"></style>