PersonGroupDialog.vue

<template>
  <a-modal
      title="人员分类"
      v-if='isVisible'
      v-model:visible="isVisible"
      width="90%"
      height='90%'
      centered
      destroyOnClose
      class="detail-modal"
			@cancel="onCancel"
  >
    <div class="person-group">
      <div class="seart-part">
        <a-form :model="formData" layout="inline">
          <a-form-item label="选择日期：" style="padding: 5px 0">
            <a-date-picker v-model:value="formData.date" valueFormat="YYYY-MM-DD" :format="'YYYY-MM-DD'" style="width: 240px"/>
          </a-form-item>
          <a-form-item label="选择时间：" style="padding: 5px 0">
            <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="formData.startTime" style="width: 140px;margin-right: 10px"/>
            <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="formData.endTime" style="width: 140px"/>
          </a-form-item>
          <a-form-item style="padding: 5px 0">
            <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
            <a-button @click="handleAddGroup()" :loading="addGroupLoading" style="margin-left: 10px">加入选中图片</a-button>
            <a-alert style="display: inline-block;margin-left: 20px" message="提示：单击选择图片，再次单击，取消选择。双击预览图片。Ctrl+单击图片可搜索该图片后最近20条抓拍记录。" type="info" />
          </a-form-item>
        </a-form>
      </div>

      <div class="content-part">
        <div class="left-part">
          <el-row style="height: 270px;overflow: auto;display: block;">
            <el-col :span="4" v-for="item in personList" :key="item.id">
              <div
                  style="margin: 0 5px"
                  :class="currentPersonIds.indexOf(item.id) != -1 ? 'actived' : ''"
                  @click="handleClick(item,true)"
                  @dblclick="handlePreview(item.picture_url)"
              >

                <!-- <el-image :src="item.picture_url" -->
                <el-image :src="formatImgUrl(item.picture_url)"
                          :fit="'fill'"
                          class="single-image">
                </el-image>
                <!--<div>时间:{{ item.counttime }}</div>-->
                <!--<div>人员类型:{{ item.person_type==1?'店员':(item.person_type==0?'顾客':'未知') }}({{ item.childAdult==1?'成人':(item.childAdult==0?'儿童':'未知') }})</div>-->
                <!--<div>性别:{{ formatGender(item.gender) }}({{item.age}})</div>-->
                <!--<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div>-->
                <!--<div>地点:{{ item.gate_name }}</div>-->
              </div>
            </el-col>
          </el-row>
					<div style="margin-top: 10px;">指定图片时间后最近抓拍记录</div	>
					<el-row style="height: 270px;overflow: auto;display: block;">
					  <el-col :span="4" v-for="item in personQuerList" :key="item.id">
					    <div style="margin: 0 5px" :class="currentPersonIds.indexOf(item.id) != -1 ? 'actived' : ''" @click="handleClick(item,false)" @dblclick="handlePreview(item.picture_url)">
					      <el-image :src="formatImgUrl(item.picture_url)" :fit="'fill'" class="single-image"></el-image>
					    </div>
					  </el-col>
					</el-row>
        </div>
        <div class="right-part">
          <template v-if="groupList.length > 0">
            <div class="classBox" v-for="row in groupList" :key="row.person_unid">
							<div style="display: flex;align-items: center;justify-content: space-between;position: relative;top:-5px;">
								<span>{{row.person_unid}}</span>
								<div>
								  <a-button @click="handleAddGroup(row.personList)" :loading="addGroupLoading">加入此分组内图片</a-button>
								</div>
							</div>
              <el-row>
                <el-col class="itemBox" :span="3" v-for="item in row.personList" :key="item.id">
                  <div
                      style="margin: 0 5px"
                      :class="isSelectedImg(item) ? 'actived' : ''"
                      @click="handleSelectImg(item)"
                      @dblclick="handlePreview(formatImgUrl(item.picture_url))"
                  >

                    <el-image :src="formatImgUrl(item.picture_url)"
                              :fit="'fill'"
                              class="single-image">
                    </el-image>

                    <p class="featureNum">{{(item.featureNum).toFixed(2)}}</p>
                    <div>时间:{{ item.counttime }}</div>
                    <!--<div>人员类型:{{ item.person_type==1?'店员':(item.person_type==0?'顾客':'未知') }}({{ item.childAdult==1?'成人':(item.childAdult==0?'儿童':'未知') }})</div>-->
                    <!--<div>性别:{{ formatGender(item.gender) }}({{item.age}})</div>-->
                    <div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div>
                    <div>地点:{{ item.gate_name }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
          <a-empty style="margin-top: 200px;" v-else />
        </div>
      </div>
    </div>

    <!--<div v-if="" class="preview-image">
      <a-image :width="200" src="" />
    </div>-->
    <template #footer>
      <a-button @click="onCancel">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import { ref } from "vue";
import moment from "moment/moment";
import { preview } from 'vue3-image-preview';
// import { formatDate } from "@/PublicUtil/PublicUtil";
import featureApi from "@/views/FeatureComparisonVerification/api";
import { ElMessage } from "element-plus";
import clusterResultApi from "@/views/SnapshotCluster/ClusterResult/ClusterResultApi";

export default {
  name: 'PersonGroupDialog',
  props: ['queryForm'],
  setup(props, { emit }) {
    const isVisible = ref(false);
    const personList = ref([])
    const personQuerList = ref([])
    // 右侧分组
    const groupList = ref([])
    const currentPerson = ref([])
    const currentPersonIds = ref('')
    // 表单
    function getInitialFormData() {
      return {
        date: '',
        startTime: '',
        endTime: '',
      }
    }
    const formData = ref(getInitialFormData())
    const personUnid = ref('')
    const plazaId = ref('')

    const initDialog = (data) => {
      console.log('initDialog', data)
      formData.value = getInitialFormData()
      // 初始化数据
      groupList.value = []
      personList.value = []
			personQuerList.value = []
			currentPersonIds.value = ''
			currentPerson.value = []
      isLoading.value = false

      isVisible.value = true;

      // 获取组数据
      personUnid.value = data.person_unid
      plazaId.value = data.plaza_id
      // 搜索搜索条件默认值
      formData.value.startTime = '00:00:00'
      formData.value.endTime = '23:59:59'
      if (props.queryForm && props.queryForm.date) {
        formData.value.date = moment(props.queryForm.date).format('YYYY-MM-DD')
      } else {
        formData.value.date = moment().format('YYYY-MM-DD')
      }
			getAllLeftPic(data)
			document.addEventListener('keydown', keydownClick);
			document.addEventListener('keyup', keyupClick);
    };
		// 查询左侧聚类结果
		const getAllLeftPic = () => {
		  const parmas = {
		    person_unid: personUnid.value,
				plaza_id: plazaId.value,
		    endTime: formData.value.date + ' 23:59:59',
		    startTime: formData.value.date + ' 00:00:00',
		    countdate: formData.value.date,
		  }
		  clusterResultApi.getAllfacePic(parmas).then((r) => {
		    if(r.msg_code === 200) {
					personList.value = r.data || []
		    } else {
		      ElMessage({
		        message: `查询失败`,
		        type: 'error'
		      })
		    }
		  }).finally(() => {
		  })
		};
		// 查询指定抓拍记录最近的20个抓拍记录
		const getAllLeftQuerPic = (unids) => {
		  const parmas = {
		    unids: [unids],
				mallId: plazaId.value,
		    countdate: formData.value.date + ' 00:00:00',
		  }
		  clusterResultApi.getAllFaceQuerPic(parmas).then((r) => {
		    if(r.msg_code === 200&&r.data&&r.data[0]&&r.data[0].perrsonList) {
					personQuerList.value = personQuerList.value.concat(r.data[0].perrsonList)
		    } else {
		      ElMessage({
		        message: `查询失败`,
		        type: 'error'
		      })
		    }
		  }).finally(() => {
		  })
		};
		
    const formatImgUrl = (url) => {
      return window._baseImgUrl + url
    }

    const selectedImgList = ref([])
    const handleSelectImg = (data) => {
      // console.log('handleSelectImg', data)
      const isExist = selectedImgList.value.some(item => item.id === data.id)
      if (isExist) {
        // 删除
        selectedImgList.value = selectedImgList.value.filter(item => item.id !== data.id)
      } else {
        // 添加
        selectedImgList.value.push(data)
      }
    }
    const isSelectedImg = (data) => {
      return selectedImgList.value.some(item => item.id === data.id)
    }
    const addGroupLoading = ref(false)
    const handleAddGroup = (dataList) => {
      const targetDataList = dataList || selectedImgList.value
      if (targetDataList.length > 0) {
        const strUnidList = targetDataList.map((item) => item.unid).join(',')
        const params = {
          unid: strUnidList,
          personUnid: personUnid.value,
					countdate:formData.value.date,
        }
        addGroupLoading.value = true
        clusterResultApi.updateRecognition(params).then((r) => {
          if(r.msg_code === 200) {
            ElMessage({
              message: `添加成功`,
              type: 'success'
            })
						for(let i=0;i<targetDataList.length;i++) {
							targetDataList[i].person_unid = personList.value[0].person_unid
						}
						personList.value = personList.value.concat(targetDataList)
            selectedImgList.value = []

            clickSearch()
          } else {
            ElMessage({
              message: `添加失败`,
              type: 'error'
            })
          }
        }).finally(() => {
          addGroupLoading.value = false
        })
      } else {
        ElMessage({
          message: `请选择分组图片`,
          type: 'error'
        })
      }
    }

    const handleClick = (data,type) => {
      // console.log('handleClick', data.id)
			if(keydownCtrlKey.value&&type) {
				console.log('搜索20条')
				getAllLeftQuerPic(data.unid)
			} else {
				let currentPersonArr = currentPersonIds.value?currentPersonIds.value.split(','):[];
				if(currentPersonIds.value.indexOf(data.id)!=-1) {
					for(let i=0;i<currentPersonArr.length;i++) {
						if(currentPersonArr[i]==data.id){
							currentPerson.value.splice(i,1)
							currentPersonArr.splice(i,1)
							break;
						}
					}
				} else {
					currentPerson.value.push(data)
					currentPersonArr.push(data.id)
				}
				currentPersonIds.value = currentPersonArr.join(',')
				// 计算开始结束时间
				if(currentPerson.value.length>0) {
					let currentDay = currentPerson.value[0].counttime.split(' ')[0] + ' '
					let startTime = ''
					let endTime = ''
					for(let j=0;j<currentPerson.value.length;j++) {
						let oneTime = currentPerson.value[j].counttime.split(' ')[1]
						startTime = new Date(currentPerson.value[j].counttime).getHours()<3?'03:00:00':(startTime==''||oneTime<startTime)?oneTime:startTime
						endTime = new Date(currentPerson.value[j].counttime).getHours()>20?'20:59:59':(endTime==''||oneTime>endTime)?oneTime:endTime
					}
					formData.value.startTime = moment(currentDay+startTime).subtract('hours',3).format('HH:mm:ss')
					formData.value.endTime = moment(currentDay+endTime).add('hours',3).format('HH:mm:ss')
				} else {
					formData.value.startTime = '00:00:00'
					formData.value.endTime = '23:59:59'
				}
			}
    }
    const handlePreview = (url) => {
      console.log('handlePreview', url)
      preview({
        images: url,
      });
    }
		const formatDirection = function(number) {
		    switch (number)
		    {
		        case 1:
		        {
		            return '进'
		        }
		        case -1:
		        {
		            return '出'
		        }
		        case 0:
		        {
		            return '横穿'
		        }
		        default:
		        {
		
		            break
		        }
		    }
		}
		const keydownCtrlKey = ref(false)
		const keydownClick = (event) => {
			if (event.ctrlKey) {
					keydownCtrlKey.value = true
			} else {
				keydownCtrlKey.value = false
			}
		};
		const keyupClick = () => {
			keydownCtrlKey.value = false
		};
    const onCancel = () => {
			document.removeEventListener('keydown',keydownClick)
			document.removeEventListener('keyup',keyupClick)
      isVisible.value = false;
      groupList.value = []
    };

    const isLoading = ref(false)
    const clickSearch = () => {
      const parmas = {
        person_unid: personUnid.value,
        pic_type: 2,

        endTime: formData.value.date + ' ' + formData.value.endTime,
        startTime: formData.value.date + ' ' + formData.value.startTime,
        countdate: formData.value.date,

        /* startTime: '2024-04-10 00:00:00',
        endTime: '2024-04-10 23:59:59',
        countdate: '2024-04-10', */

        pic_id: currentPersonIds.value,
        ip: window._baseImgUrl,
        plaza_id: plazaId.value,
      }
      isLoading.value = true
      featureApi.getAllPersonContrastList(parmas).then((r) => {
        if(r.msg_code === 200) {
          groupList.value = r.data
        } else {
          ElMessage({
            message: `查询失败`,
            type: 'error'
          })
        }
      }).finally(() => {
        isLoading.value = false
      })
    };
		
		

    return {
			keydownClick,
      isVisible,
      formData,
      personList,
			personQuerList,
      groupList,
      handleClick,
      onCancel,
      initDialog,
      clickSearch,
      isLoading,
      currentPerson,
			currentPersonIds,
      formatImgUrl,
			formatDirection,
      selectedImgList,
      handleSelectImg,
      isSelectedImg,
      handleAddGroup,
      addGroupLoading,
      handlePreview,
			getAllLeftPic,
			getAllLeftQuerPic,
    };
  },
};
</script>

<style lang="less" scoped>
.direction{
    font-weight: 900;
    background-color: red;
    color: white;
}
.direction1{
    background-color: green;
}
.direction0{
    background-color: orange;
}
.seart-part {
  margin-bottom: 10px;
}
.content-part {
  display: flex;
}
.left-part {
  width: 500px;
  height: 560px;
  // overflow: auto;
  //border: solid 1px black;
  margin-right: 10px;
}
.right-part {
  flex: 1;
  height: 560px;
  overflow: auto;
}
.actived{
  border: 3px solid red;
}

.classBox{
  border: solid 1px black;
  overflow-y: hidden;
  margin: 0;
  padding: 10px;
  height: auto;
  margin-bottom: 10px;
}

.itemBox {
  position: relative;
  .featureNum {
    position: absolute;
    top: 0;
    left: 15px;
    color: red;
    font-weight: 900;
    font-size: 16px;
  }
}
</style>