historyCustomer.vue

<template>
  <div class="camera-wrapper">
    <ul class="shotpic-wrapper">
      <li
        v-if="!Object.keys(personData).length"
        style="text-align: center; margin: 10px 0; color: #909399; font-size: 24px"
      >{{ $t('echartsTitle.noData') }}</li>
      <div v-for="(valueItem, key, curIndex) in personData">
        <div class="contentTit">{{ key }}抓拍记录</div>
        <li class="shotpic-item all-capture-item" :key="item.id" v-for="item in valueItem">
          <div class="shotpic-img">
            <span class="shotpic-date">{{ item.counttime || '--' }}</span>
            <img :src="dealImg(item)" @error="dealErrImg" />
          </div>
          <p class="shotpic-info">
            <span class="shotpic-text__left">{{$t('table.age')}}: {{ item.age }}</span>
            <span class="shotpic-text__right">{{$t('table.gender')}}: {{ genderFormatter(item.gender) }}</span>
          </p>
          <p class="shotpic-info">
            <span class="shotpic-text__left">{{$t('table.type')}}: {{ personTypeFormatter(item.personType) }}</span>
            <span class="shotpic-text__right">{{$t('table.expression')}}: {{ moodFormatter(item.mood) }}</span>
          </p>
        </li>
        <div style="clear: both;"></div>
      </div>
    </ul>
  </div>
</template>
<script>
import defaultImg from "@/assets/img/behavior/default.png";
import femaleImg from "@/assets/img/behavior/female.png";
import maleImg from "@/assets/img/behavior/male.png";
import { param2Obj } from '@/utils'

export default {
  data() {
    return {
      personData: {},
      url: window.location.href
    };
  },
  mounted() {
    this.checkHistory();
  },
  methods: {
    checkHistory() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.personData = {};
      this.$api.flowReport
        .historyCapture({
          ...param2Obj(this.url),
          sortName: 'counttime',
          sortOrder: 'DESC'
        })
        .then(res => {
          loading.close();
          this.dealPhotoData(res);
        });
    },
    dealDate(counttime) {
      return counttime.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, '$1$2$3')
      // return dateStr;
    },
    dealImagePath(item) {
      const { dealDate } = this
      let imageUrl = ''
      if (item.facePath && item.facePic) {
        imageUrl = item.facePath + item.facePic
      } else if (item.facePic) {
        imageUrl = `/face/${dealDate(item.counttime)}/${item.channelSerialnum}/${item.facePic}`
      } else if (item.bodyPath && item.bodyPic) {
        imageUrl = item.bodyPath + item.bodyPic
      } else {
        imageUrl = `/body/${dealDate(item.counttime)}/${item.channelSerialnum}/${item.bodyPic}`
      }
      return imageUrl
    },
    dealImg(row) {
      const imageUrl = this.dealImagePath(row)
      let img_path = ''
      if (!imageUrl) {
        if (row.gender == "男" || row.gender == "Male") {
          img_path = maleImg;
        } else if (row.gender == "女" || row.gender == "Female") {
          img_path = femaleImg;
        } else {
          img_path = defaultImg;
        }
      } else {
        img_path = window._vionConfig.picUrl + "/picture/" + imageUrl;
      }
      return img_path;
    },
    genderFormatter(gender) {
      return (
        gender !== 'null' && this.getLocalDic('gender', gender)
       ) || '--'
    },
    personTypeFormatter(personType) {
      return (
        (personType || personType === 0) && this.getLocalDic('personType', personType)
      ) || this.$t('dictionary.custom')
    },
    moodFormatter(mood) {
      return mood !== 'null'
        ? this.getLocalDic('mood', mood) || this.$t('dictionary.unknow')
        : '--'
    },
    dealPhotoData(res) {
      const { dateToStamp } = this
      const { data } = res.data;
      this.personData = {};
      // 将对象 key 存入数组排序
      // 循环key数组 
      let keysArr = Object.keys(data).map(key => key).sort((a, b) => {
        return dateToStamp(b) - dateToStamp(a)
      })
      this.personData = keysArr.reduce((prev, key) => {
        prev[key] = data[key]
        return prev
      }, {})
    },
    dateToStamp(date) {
      return new Date(date.replace(/-/, '/')).getTime()
    },
    dateSort(arr, desc) {
      return arr.sort((a, b) => {
        desc
          ? dateToStamp(b) - dateToStamp(a)
          : dateToStamp(a) - dateToStamp(b)
      })
    },
    dealErrImg(e) {
      let ev = e || window.event;
      ev.target.src = defaultImg;
    },
    getLocalDic(name, val) {
      if (window.sessionStorage.getItem(name + "-" + val)) {
        return this.$t(
          "dictionary." + window.sessionStorage.getItem(name + "-" + val)
        );
      } else {
        return val;
      }
    }
  }
};
</script>
<style scoped>
.contentTit {
  background: #3bb8ff;
  color: #fff;
  font-size: 18px;
  padding: 6px 16px;
  margin-bottom: 12px;
  /* margin-left: 3px; */
  /* margin-right: 10px; */
  box-sizing: border-box;
}
.camera-wrapper {
  width: 100%;
}
.behavior-thead th {
  height: 80px !important;
}

.face-img-box {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid #dcdcdc;
  margin: 0px auto;
  cursor: zoom-in;
}
.pic-popover {
  margin: 5px 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.download-text {
  margin-left: 980px;
}
.face-img {
  width: 50px;
  height: 50px;
}
.slot-ele-total {
  margin-right: 10px;
  font-weight: 400;
  color: #606266;
  float: left;
}
</style>