eventDetail.vue

<template>
  <div class="pic-detail">
    <el-dialog
      title="详情"
      :visible.sync="isShow"
      :before-close="beforeHideModal"
    >
      <el-row>
        <el-col :span="24">
          <div class="pic-wrap">
            <el-image
              style="width: 100%"
              :src="curPicData.bigpic"
              :preview-src-list="srcList"
            >
              <div slot="error" class="image-slot">
                <img
                  :src="curPicData.bigpic"
                  alt=""
                  style="width: 30%; display: block; margin: 0 auto"
                />
              </div>
            </el-image>

            <!-- <img v-if="curPicData.pics" :src="carImg" alt="暂无图片" slot="reference" class='pictures small' /> -->
            <!-- <el-popover
              placement="left-end"
              width="305"
              trigger="hover"
              v-if="!curPicData.picsEmpty"
            >
              <div
                :style="{
                  backgroundImage: 'url(' + curPicData.bigpic + ')',
                  backgroundRepeat: 'no-repeat'
                }"
                alt=""
                id="big"
                class="big"
              ></div>
              <img
                :src="curPicData.bigpic"
                alt=""
                slot="reference"
                class="pictures small"
              />
            </el-popover> -->
          </div>
        </el-col>
        <!-- 交通 -->
        <el-col
          :span="24"
          v-if="
            curPicData.event_type === 'vehicle' ||
            curPicData.event_type === 'xcycle' ||
            curPicData.event_type === 'pedestrian'
          "
        >
          <ul class="pic-info">
            <div v-if="curPicData.event_type === 'vehicle'">
              <li :title="curPicData.vehicle_body_type_text">
                <span>车辆类型:</span>
                <span>{{ curPicData.vehicle_body_type_text }}</span>
              </li>
              <li :title="curPicData.vehicle_plate_text">
                <span>车牌号码:</span>
                <span>{{ curPicData.vehicle_plate_text }}</span>
              </li>
              <li :title="curPicData.plate_type_text">
                <span>车牌类型:</span>
                <span>{{ curPicData.plate_type_text }}</span>
              </li>
            </div>

            <li :title="curPicData.shoot_date">
              <span>经过日期:</span>
              <span>{{ curPicData.shoot_date }}</span>
            </li>
            <li :title="curPicData.shoot_time">
              <span>经过时间:</span>
              <span>{{ curPicData.shoot_time }}</span>
            </li>
            <li :title="curPicData.location_name">
              <span>经过地点:</span>
              <span>{{ curPicData.location_name }}</span>
            </li>

            <div v-if="curPicData.event_type === 'vehicle'">
              <li :title="curPicData.vehicle_body_logo_text">
                <span>车辆品牌:</span>
                <span>{{ curPicData.vehicle_body_logo_text }}</span>
              </li>
              <!-- 机动车 -->
              <li :title="curPicData.plate_color_text">
                <span>车牌颜色:</span>
                <span>{{ curPicData.plate_color_text }}</span>
              </li>
              <li :title="curPicData.vehicle_body_color_text">
                <span>车身颜色:</span>
                <span>{{ curPicData.vehicle_body_color_text }}</span>
              </li>
              <li hidden :title="curPicData.RefinedFeature_text">
                <span>标志物:</span>
                <span>{{ curPicData.RefinedFeature_text }}</span>
              </li>
            </div>

            <!-- 非机动车 -->
            <div v-if="curPicData.event_type === 'xcycle'">
              <li :title="curPicData.xcycle_type_text">
                <span>骑车类型:</span>
                <span>{{ curPicData.xcycle_type_text }}</span>
              </li>
              <li :title="curPicData.xcycle_color_type">
                <span>车辆颜色:</span>
                <span>{{ curPicData.xcycle_color_type }}</span>
              </li>
              <li :title="curPicData.driver_face_sex">
                <span>性别:</span>
                <span>{{ curPicData.driver_face_sex }}</span>
              </li>
              <li :title="curPicData.company">
                <span>运营公司:</span>
                <span>{{ curPicData.company }}</span>
              </li>
              <li :title="curPicData.driver_face_upbody_text">
                <span>上身颜色:</span>
                <span>{{ curPicData.driver_face_upbody_text }}</span>
              </li>
              <li :title="curPicData.driver_face_lobody_text">
                <span>速度:</span>
                <span>{{ curPicData.location_speed }}</span>
              </li>
              <li :title="curPicData.driver_face_lobody_text">
                <span>戴帽子:</span>
                <span>{{ curPicData.driver_face_with_hats }}</span>
              </li>
            </div>

            <!-- 行人 -->
            <div v-if="curPicData.event_type === 'pedestrian'">
              <li :title="curPicData.driver_face_sex">
                <span>性别:</span>
                <span>{{ curPicData.driver_face_sex }}</span>
              </li>
              <li :title="curPicData.driver_face_upbody_text">
                <span>上身颜色:</span>
                <span>{{ curPicData.driver_face_upbody_text }}</span>
              </li>
              <li :title="curPicData.driver_face_lobody_text">
                <span>下身颜色:</span>
                <span>{{ curPicData.driver_face_lobody_text }}</span>
              </li>
              <li :title="curPicData.pedestrian_height">
                <span>身高:</span>
                <span>{{ curPicData.pedestrian_height }}</span>
              </li>
              <li :title="curPicData.driver_face_lobody_text">
                <span>速度:</span>
                <span>{{ curPicData.location_speed }}</span>
              </li>
              <li :title="curPicData.driver_face_lobody_text">
                <span>戴帽子:</span>
                <span>{{ curPicData.driver_face_with_hats }}</span>
              </li>
            </div>

            <li v-if="curPicData.illegalType" :title="curPicData.illegalType">
              <span>违法类型:</span>
              <span>{{ curPicData.illegalType }}</span>
            </li>
            <li v-if="curPicData.illegalType" :title="curPicData.illegalType">
              <span>特殊车辆:</span>
              <span>{{ curPicData.special_text }}</span>
            </li>
          </ul>
        </el-col>
        <el-col :span="24" v-if="curPicData.event_cate === 'behavior'">
          <ul class="pic-info">
            <li :title="curPicData.shoot_date">
              <span>抓拍日期:</span>
              <span>{{ curPicData.shoot_date }}</span>
            </li>
            <li :title="curPicData.shoot_time">
              <span>抓拍时间:</span>
              <span>{{ curPicData.shoot_time }}</span>
            </li>
            <li :title="getCode('安防事件', curPicData.event_type)">
              <span>事件类型:</span>
              <span>{{ curPicData.event_type }}</span>
            </li>
            <li
              :title="curPicData.shoot_time"
              v-if="curPicData.event_type == '21'"
            >
              <span>区域人数:</span>
              <span>{{ curPicData.event_data.density.persons }}人</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <span slot="footer">
        <button
          class="el-button el-button--default el-button--small"
          @click="beforeHideModal"
        >
          关闭
        </button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carImg: "",
      isShow: false,
      curPicData: {},
      srcList: [],
    };
  },
  methods: {
    detailInfo: function (data) {
      this.curPicData = {};
      this.curPicData = data;
      this.srcList = [];
      console.log('curPicData', this.curPicData);
      setTimeout(() => {
        if (data.bigpic) {
          this.srcList.push(data.bigpic);
        }
      }, 0);
      this.isShow = true;
      this.$store.commit("setocxstate", 0);
    },
    beforeHideModal: function () {
      this.isShow = false;
      this.$emit("closeDetailModal");
    },
    picMove: function (e) {
      var e = e || window.event;
      if (e.target.getAttribute("class").indexOf("small") > -1) {
        let imgWidth = e.target.width;
        let imgHeight = e.target.height;
        let x = 150 - (e.offsetX / imgWidth) * 1800;
        let y = 100 - (e.offsetY / imgHeight) * 1200;
        let bigimg = document.getElementById("big");
        bigimg.style.backgroundPosition = x + "px " + y + "px";
      } else {
        return;
      }
    },
  },
};
</script>

<style scoped>
.pictures {
  width: 100%;
  max-height: 528px;
  cursor: zoom-in;
}

.pic-info {
  margin-bottom: 0;
}

.pic-info li {
  height: 30px;
  line-height: 30px;
  width: 33%;
  float: left;
}

.pic-info li span {
  float: left;
  font-size: 14px;
  color: #606266;
}

.pic-info li span:first-child {
  padding-left: 3%;
  margin-right: 10px;
  width: 91px;
}
.pic-info li span:last-child {
  width: 100px; /*40%*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.big {
  width: 300px;
  height: 200px;
  background-size: 1800px 1200px;
}
.closebtn {
  height: 30px;
  line-height: 30px;
}
</style>