index.vue

<template>
  <div class="mark-staff-container">
    <div class="mark-staff-header">
      <div class="header-left">
        <el-select
          v-model="query.mallVal"
          class="query-select"
          filterable
          :placeholder="$t('pholder.shopSelect')"
        >
          <el-option
            v-for="item in mallList"
            :label="item.name"
            :value="item.id"
            :key="item.value"
          />
        </el-select>
        <el-select
          v-model="query.gateVal"
          class="query-select"
          filterable
          :placeholder="$t('pholder.site')"
        >
          <template v-if="gateList.length > 0">
            <el-option :label="this.$t('pholder.allGate')" :value="null" />
          </template>
          <el-option
            v-for="item in gateList"
            :label="item.name"
            :value="item.id"
            :key="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="query.dayTime"
          class="query-select"
          :clearable="false"
          value-format="yyyy-MM-dd"
          :placeholder="$t('pholder.date')"
          :picker-options="pickerOptions"
        />
      </div>
      <div class="header-right">
        <el-button
          type="primary"
          size="small"
          class="primary-btn"
          @click="onSearch"
        >{{ $t('button.confirm') }}</el-button>
      </div>
    </div>
    <!-- header end -->
    <div class="content-wrapper" v-loading="loading">
      <!-- <el-scrollbar wrap-class="shot-list-scrollbar" :style="{ maxHeight: tableHeight }"> -->
      <ul class="shotpic-wrapper" :style="{ maxHeight: tableHeight }">
        <li
          v-if="!tableData.length"
          class="empty-data"
        >{{ $t('echartsTitle.noData') }}</li>
        <li class="shotpic-item" :class="{ 'highlight-item': item.personType === 0 && item.historyArrivalCount }" v-for="(item, index) in tableData" :key="index">
          <div class="shotpic-img">
            <img
              :src="dealImg(item)"
              @error="dealErrImg"
              @click="showAllImg(item)"
            />
          </div>
          <div>
            <p class="shotpic-info snap-info-wrapper">
              <el-tooltip
                class="item"
                effect="light"
                :content="`
                  ${ personTypeFilter(item) }
                  ${ historyArrivalCountFilter(item) }
                `"
                placement="top"
              >
                <span
                  class="shotpic-text__left"
                  style="text-align: center"
                >{{ personTypeFilter(item) }}{{ historyArrivalCountFilter(item) }}</span>
              </el-tooltip>
              <span
                class="shotpic-text__right"
                style="text-align: center"
              >{{ moodFormatter(item.mood) }}</span>
            </p>
            <p class="shotpic-info snap-info-wrapper">
              <!-- <span
                class="shotpic-text__left"
                style="text-align: center"
              >{{ item.age + $t('table.ages') }}</span> -->
             <!-- <span
                class="shotpic-text__right"
                style="text-align: center"
              >{{ genderFormatter(item.gender) }}</span> -->
            </p>
            <p class="shotpic-info snap-info-wrapper" style="text-align: center">
              <el-tooltip class="item" effect="light" :content="item.counttime" placement="top">
                <span class="shotpic-text">{{ item.counttime }}</span>
              </el-tooltip>
            </p>
          </div>
        </li>
      </ul>
      <!-- </el-scrollbar> -->
      <!-- table end -->
      <el-pagination
        class="pagination-wrapper"
        background
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        @current-change="onPageChange"
        @size-change="onPageSizeChange"
        layout="sizes, prev, pager, next, slot, jumper"
        :total="total"
      >
        <span
          class="slot-ele-total"
        >{{ $t('table.pageHead') }} {{ total }} {{ $t('table.pageTail') }}</span>
      </el-pagination>
    </div>
    <mark-staff-modal ref="markStaffModalRef" :parameter="parameter" />
  </div>
</template>

<script>
import MarkStaffModal from './components/capture-modal'
import defaultImg from "@/assets/img/behavior/default.png"
import femaleImg from "@/assets/img/behavior/female.png"
import maleImg from "@/assets/img/behavior/male.png"

export default {
  name: 'MarkStaff',
  components: { MarkStaffModal },
  data() {
    return {
      isInit: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      loading: true,
      mallList: [],
      gateList: [],
      query: {
        mallVal: null,
        gateVal: null,
        dayTime: ''
      },
      page: 1,
      pageSize: 45,
      pageSizes: [45, 90, 135],
      total: 0,
      tableData: [],
      parameter: {},
      listMaxHeight: 0
    }
  },
  computed: {
    tableHeight() {
      return 4 / 5 * window.innerHeight + 'px'
    },
    isComeFromPerson() {
      return this.getSessionLocal('isPersonMark')
    }
  },
  watch: {
    'query.mallVal'(val) {
      val && this.getGates()
    },
    'query.dayTime'(val) {
      this.sessionDate('dayDate', val)
    }
  },
  mounted() {
    let { dayDate } = this.createDate()
    this.query.dayTime = dayDate
    this.isInit = true
    this.getMalls()
  },
  methods: {
    fetchData() {
      this.loading = true
      const { mallVal, gateVal, dayTime } = this.query
      // 只筛选顾客类型
      const defaultQuery = {
        accountId: this.$cookie.get('accountId'),
        age_gt: 0,
        personType: 0,
        sortName: 'counttime',
        sortOrder: 'DESC',
        direction: 1,
        group: 1,
        page: this.page,
        pageSize: this.pageSize
      }
      this.parameter = Object.assign({}, defaultQuery, {
        mallId: mallVal,
        gateId: gateVal,
        countdate: dayTime
      })
      this.$api.flowReport
        .captureRecord(this.parameter)
        .then(res => {
          const { code, data } = res.data
          if (code === 200) {
            this.total = data.total
            this.tableData = data.list
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: this.$t("message.captureFailed") + res.data.msg
            })
          }
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.catchErrorHandle(err)
        })
    },
    onSearch() {
      this.page = 1
      this.fetchData()
    },
    onPageChange(val) {
      this.page = val
      this.fetchData()
    },
    onPageSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    showAllImg(item) {
      if (!item.personUnid) {
        console.error("personUnid is not exist!!");
        return;
      }
      this.$refs.markStaffModalRef.modalInit(item)
    },
    async getMalls() {
      const { mallId } = this.$route.query
      this.mallList = []
      await this.$api.base.mall({
        accountId: this.$cookie.get('accountId'),
        // status: 1,
        status_arr: '1,3'
      }, null, true)
        .then((res) => {
          const { data } = res.data
          this.mallList = data
          if(this.getSessionLocal('mallId')) {
            this.query.mallVal = mallId - 0
          } else {
            this.mallList.forEach((item, index, arr) => {
              if (index === 0) {
                this.query.mallVal = item.id
              }
            })
          }
        })
        .catch((err) => {
          this.catchErrorHandle(err)
        })
      // this.getCommonMalls().then(resolveData => {
      //   let { mallData } = resolveData
      //   this.mallList = mallData
      //   this.query.mallVal = mallId - 0
      // })
    },
    getGates() {
      this.gateList = []
      this.query.gateVal = null
      this.$api.base.gate({
        mallId: this.query.mallVal,
        status: 1,
        isHasFace: 1
      })
        .then(res => {
          let result = res.data.data
          if (result.length) {
            this.gateList = result
            if (this.isInit) {
              this.fetchData()
              this.isInit = false
            }
            // this.query.gateVal = result[0].id
          }
        })
        .catch(err => { console.log(err) })
    },
    dealDate(counttime, fmt = "$1$2$3") {
      return counttime.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, fmt);
    },
    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)) || "--";
    },
    personTypeFilter({ personType, historyArrivalCount }) {
      const { personTypeFormatter, $t } = this
      if (personType === 1) {
        return personTypeFormatter(personType)
      } else if (personType === 0) {
        if (historyArrivalCount) {
          return $t('table.oldCustomer')
        } else {
          return personTypeFormatter(personType, true)
        }
      } else {
        return personTypeFormatter(personType, true)
      }
    },
    historyArrivalCountFilter({ personType, historyArrivalCount }) {
      return personType !== 1 && historyArrivalCount ? `: ${historyArrivalCount}${this.$t('table.times')}` : ''
    },
    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")
        : "--";
    },
    dateToStamp(date) {
      return new Date(date.replace(/-/, "/")).getTime();
    },
    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 lang="less">
  .shotpic-wrapper{
    .shotpic-img img{
      width: auto;
      height: 170px;
    }
    .shotpic-item{
      width: 10%;
      margin: 0 7px 7px 7px;
      display: inline-block;
      float: none;
    }
  }

.mark-staff-container {
  background: #fff;
  width: 1500px;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
.mark-staff-header {
  padding: 24px 30px 20px 20px;
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.1);
}
.mark-staff-header::after,
.mark-staff-header::before {
  content: '';
  display: table;
}
.mark-staff-header::after {
  clear: both;
}
.header-left {
  float: left;
}
.query-select + .query-select {
  margin-left: 10px;
}
.header-right {
  float: right;
}
.empty-data {
  text-align: center;
  margin: 10px 0;
  color: #909399;
}
.content-wrapper {
  padding: 12px;
}
.pagination-wrapper {
  padding-top: 12px;
}
</style>

<style>
.shot-list-scrollbar {
  overflow-x: hidden;
}
.el-scrollbar {
  height: 100%;
}
</style>