addPersonFeature.vue

<template>
  <div>
    <el-dialog
      :title="$t('button.addPhoto')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      class="manage-dialog clerk-image-dialog"
      :before-close="closeDialog">
      <el-row class="img-dialog-header">
        <el-col :span="14">
          <!-- 广场 -->
          <div class="manage-select-box">
            <el-select v-model="imgQuery.mallVal" class="mall-opt" filterable :placeholder="$t('pholder.shopSelect')" @change="chooseMall">
              <el-option v-for="(item, index) in mallList" :label="item.name" :value="item.id" :key="item.value"></el-option>
            </el-select>
          </div>
          <!-- 监控点 -->
          <div class="manage-select-box">
            <el-select v-model="imgQuery.monitoryVal" class="monitory-opt" filterable :placeholder="$t('pholder.site')" @change="chooseMonitory">
              <el-option v-for="(item, index) in monitoryList" :label="item.name" :value="item.id" :key="item.value"></el-option>
            </el-select>
          </div>
          <!-- 相机 -->
          <!-- <div class="manage-select-box" v-if="imgQuery.monitoryVal !== ''">
            <el-select v-model="imgQuery.cameraVal" class="camera-opt" filterable placeholder="请选择通道">
              <el-option v-for="item in cameraList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div> -->
          <div class="manage-select-box">
            <el-select v-model="imgQuery.uploadVal" class="camera-opt" placeholder="请选择类型" @change="uploadChange">
              <el-option v-for="item in uploadList" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="manage-select-box switch-box">
            <span>{{ $t('button.recommend') }}:</span>
            <el-switch v-model="imgQuery.filterPersonType" :active-value="1" :inactive-value="null" class="person-switch" @change="filterStaff(imgQuery.filterPersonType)">
            </el-switch>
          </div> 
        </el-col>
        <el-col :span="7" :offset="1">
          <div class="manage-input-box time-input-box date-select-box">
            <el-date-picker
              v-model="imgQuery.dateVal"
              class="time-opt date-opt"
              value-format="yyyy-MM-dd"
              :placeholder="$t('pholder.date')"
              :picker-options="pickerOptions1"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" class="search-btn" plain size="mini" @click="filterHandle">
            {{ $t('button.search') }}
          </el-button>
        </el-col>
      </el-row>
      <el-scrollbar class="img-list-scrollbar" wrap-class="list-scrollbar" :native="false" style="height: 100%; height: 450px; max-height: 450px;">
        <ul class="img-row" v-if="imgList.length > 0"  v-loading="loading">
          <li class="img-col" v-for="(item, index) in imgList" :key="item.id">
            <p>{{ item.counttime }}</p>
            <div :class="imgQuery.uploadVal === 2 ? 'clerk-img-body-box' : 'clerk-img-box'" @click="checkedImgs(index)">
              <el-image
                :class="imgQuery.uploadVal === 2 ? 'clerk-img-body' : 'clerk-img'"
                :src="imgQuery.uploadVal === 2 ? dealImg(item.bodyPic) : dealImg(item.facePic)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <span class="custom-checkbox__input" :class="item.isChecked ? 'checked' : ''" @click="checkedImgs(index)">
              <span class="custom-checkbox__inner"></span>
            </span>
          </li>
        </ul>
        <div v-else style="text-align: center; padding-top: 20px;">{{ noImgText }}</div>
      </el-scrollbar>
      <div class="page-wrapper" v-show="total > 0">
        <el-pagination
          class="manage-pagination-box"
          background
          :current-page="imgQuery.page"
          :page-sizes="pageSizes"
          :page-size="imgQuery.pageSize"
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="sizes, prev, pager, next, slot"
          :total="total"
        >
          <span class="slot-pagination-ele slot-ele-total">{{ $t('table.pageHead') }} {{ total }} {{ $t('table.pageTail') }}</span>
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitImg" class="dialog-btn dialog-confirm-btn">
          {{ $t('dialog.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import defaultImg from '@/assets/img/behavior/default.png'

export default {
  props: {
    mallList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShow: false,
      loading: true,
      checkedNum: 0,
      noImgText: '',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      personId: null,
      personUnid: '',
      pageSizes: [50, 100],
      imgQuery: {
        mallVal: null,
        monitoryVal: null,
        cameraVal: null,
        uploadVal: 1,
        dateVal: '',
        filterPersonType: 1,
        page: 1,
        pageSize: 50
      },
      total: 0,
      monitoryList: [],
      cameraList: [],
      uploadList: [
        {
          name: '人脸',
          value: 1,
        },
        {
          name: '人体',
          value: 2
        }
      ],
      checkedImgList: [],
      imgList: [],
      defaultImg,
    }
  },
  created() {
    this.imgQuery.dateVal = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')
    // this.imgQuery.dateVal = '2019-03-25'
  },
  methods: {
    async dialogInit({ id, personUnid, mallId }) {
      this.personId = id
      this.personUnid = personUnid
      this.imgQuery.mallVal = mallId
      this.imgQuery.monitoryVal = null
      // this.imgQuery.cameraVal = null
      this.monitoryList = []
      this.cameraList = []
      this.checkedImgList = []
      this.imgList = []
      this.loading = true
      this.noImgText = '图片加载中...'
      this.total = 0;
      this.imgQuery.pageSize = 50;
      this.imgQuery.page = 1;
      this.isShow = true;
      // this.getCheckedImg(id)
      await this.monitoryFetch()
      // await this.cameraFetch()
      await this.getCheckedImg(id)
      this.getImgList()
      
    },
    getCheckedImg(personId, isChanged) {
      this.$api.management.personPics({
        personId: personId,
      })
        .then(res => {
          let result = res.data.data
          result.forEach(item => {
            this.checkedImgList.push(item.recognitionId)
          })
          if (isChanged) {
            this.imgList.forEach(item => {
              item.isChecked = this.checkedImgList.includes(item.id)
            })
          }
        })
        .catch(err => {
          this.catchErrorHandle(err)
        })
    },
    getImgList() {
      this.loading = true
      this.checkedNum = 0
      this.noImgText = '图片加载中...'
      let {
        imgQuery: {
          mallVal, monitoryVal, cameraVal, dateVal, page, pageSize, filterPersonType
        }
      } = this
      this.$api.flowReport.captureRecord({
        accountId: this.$cookie.get('accountId'),
        mallId: mallVal,
        gateId: monitoryVal || null,
        channelId: cameraVal || null,
        countdate: dateVal,
        // countdate_get: this.timeVal[0].split(' ')[0],
        // countdate_lte: this.timeVal[1].split(' ')[0],
        // counttime_gte: this.timeVal[0],
        // counttime_lte: this.timeVal[1],
        // personType: this.personType,
        personUnid: this.imgQuery.filterPersonType == 1 ? this.personUnid : null,
        direction: 1,
        // facePic_null: false,
        age_gt: 0,
        sortName: 'counttime',
        sortOrder: 'DESC',
        page: page,
        pageSize: pageSize
      })
        .then(res => {
          let result = res.data.data
          result.list.forEach(item => {
            item.isChecked = this.checkedImgList.includes(item.id)
            let dateStr = this.dealDate(item.counttime)
            item.paramFacePic = dateStr + '/' + item.channelSerialnum + '/' + item.facePic
            item.paramBodyPic = dateStr + '/' + item.channelSerialnum + '/' + item.bodyPic
            item.facePic = this.dealTypeImage(item, 'face')
            item.bodyPic = this.dealTypeImage(item, 'body')
          })
          this.checkedNum = this.checkedImgList.length
          this.imgList = result.list
          if (this.imgList.length == 0) {
            this.noImgText = this.$t('echartsTitle.noData')
          }
          this.total = result.total
          this.loading = false
        })
        .catch(err => {
          this.catchErrorHandle(err)
        })
    },
    monitoryFetch() {
      return new Promise(resolve => {
        this.$api.base.gate({
          mallId: this.imgQuery.mallVal,
          isHasFace: 1,
          // type: 1,
          // isMallGate: 1
        })
          .then(res => {
            let result = res.data.data;
            if (result.length) {
              result.unshift({
                id: null,
                name: '全部监控点'
              })
              this.monitoryList = result;
              this.imgQuery.monitoryVal = result[0].id
              resolve()
              // this.getChannels(this.monitoryVal);
            }
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    cameraFetch() {
      return new Promise(resolve => {
        this.$api.base.channel({
          gateId: this.imgQuery.monitoryVal
        })
          .then(res => {
            let result = res.data.data;
            result.unshift({
              id: null,
              name: '全部通道'
            })
            this.cameraList = result;
            if (this.cameraList.length > 0) {
              this.imgQuery.cameraVal = this.cameraList[0].id;
            }
            resolve()
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    filterStaff(value) {
      this.getImgList()
    },
    filterHandle() {
      this.getImgList()
    },
    sizeChange(val) {
      this.imgQuery.pageSize = val
      this.getImgList()
    },
    currentChange(val) {
      if (this.imgQuery.page != val) {
        this.imgQuery.page = val
        this.getImgList();
      }
    },
    async chooseMall() {
      this.imgQuery.monitoryVal = null
      this.monitoryList = []
      // this.imgQuery.cameraVal = null
      this.cameraList = []
      await this.monitoryFetch()
      // await this.cameraFetch()
    },
    chooseMonitory() {
      // this.imgQuery.cameraVal = null
      // this.cameraList = []
      // this.cameraFetch()
    },
    uploadChange(val) {
      this.getCheckedImg(this.personId, true)
    },
    dealImg(rowPic) {
      return window._vionConfig.picUrl + '/picture/' + rowPic
    },
    dealErrImg(e) {
      let ev = e || window.event
      ev.target.src = this.defaultImg
    },
    checkedImgs(index) {
      let isHadImg = this.checkedImgList.some(item => item == this.imgList[index].id);
      if (isHadImg) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: this.$t('message.clerkHasAdded')
        })
        return;
      };
      if (this.imgList[index].isChecked) {
        // recognitionId
        // let $idx = this.cacheChecked.indexOf(this.imgList[index].id);
        // if($idx >= 0) {
        //     this.cacheChecked.splice($idx, 1);
        // }
        this.imgList[index].isChecked = false;
        this.checkedNum -= 1;
      } else {
        this.checkedNum += 1;
        if (this.checkedNum > 10) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: this.$t('message.addLimit')
          })
          return;
        } else {
          // this.cacheChecked.push(this.imgList[index].id)
          this.imgList[index].isChecked = true;
        }
      }
      // this.checkedNum += 1;
      // if(this.checkedNum > 10) {
      // }
      // this.imgList[index].isChecked = this.imgList[index].isChecked ? false : true;
    },
    submitImg() {
      const { personId, personUnid, imgQuery, checkedImgList } = this
      const { uploadVal } = imgQuery
      let checkedImg = [], filterChecked = []
      this.imgList.forEach(item => {
        if (item.isChecked) {
          let temp = {
            personId: personId,
            recognitionId: item.id,
            recognitionPersonUnid: item.personUnid,
            // type: item.type,
            person: {
              personUnid: personUnid
            }
            // channelSerialnum: item.channelSerialnum,
            // counttime: item.counttime
          }
          if (uploadVal === 2) {
            temp.feature = (item.bodyPath && item.bodyFeature) ? (item.bodyPath + item.bodyFeature) : null
            temp.pic = item.paramBodyPic
          } else {
            temp.feature = (item.facePath && item.faceFeature) ? (item.facePath + item.faceFeature) : null
            temp.pic = item.paramFacePic
          }
          checkedImg.push(temp)
        }
      })
      filterChecked = checkedImg.filter(item => checkedImgList.indexOf(item.recognitionId) === -1)
      // let paramList = [];
      // filterChecked.forEach(item => {
      //     paramList.push({
      //         staffId: this.staffId,
      //         recognitionId: item
      //     })
      // })
      // return;
      this.$api.management.addPersonFeature(
        uploadVal === 2 ? 'addListBody' : 'addList',
        filterChecked
      ).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          // result.data;
          this.isShow = false;
          this.$parent.getList()
        }
      })
    },
    closeDialog() {
      this.total = 0
      this.imgList = []
      this.isShow = false
    }
  }
}
</script>

<style scoped>
.img-dialog-header {
  padding-bottom: 20px;
}

.page-wrapper {
  /* text-align: center; */
  padding-bottom: 10px;
}

.img-row {}

.img-row:after,
.img-row:before {
  content: '';
  display: table;
}

.img-row:after {
  clear: both;
}

.img-col {
  float: left;
  text-align: center;
  width: 20%;
  margin-bottom: 20px;
}

.img-col:last-child {
  margin-bottom: 0;
}

.clerk-img-box {
  border: 1px solid #dcdcdc;
  margin: 0px auto;
}

.clerk-img-box,
.clerk-img {
  width: 150px;
  height: 150px;
}

.clerk-img-body-box {
  border: 1px solid #dcdcdc;
  margin: 0px auto;
}

.clerk-img-body-box,
.clerk-img-body {
  width: 150px;
  height: 400px;
}

.custom-checkbox__input.checked::after {
  content: none;
}

.custom-checkbox__input.checked .custom-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.custom-checkbox__input.checked .custom-checkbox__inner:after {
  transform: rotate(45deg) scaleY(1);
}

.person-switch {
  top: -2px;
}

.time-input-box .date-opt {
  width: 150px;
}

.switch-box {
  margin-top: 5px;
}

.date-select-box {
  float: right;
}

@media (max-width: 1680px) {
  .switch-box {
    margin-top: 2px;
  }
}
</style>