PersonGroupDialog.vue

<template>
  <a-modal
      title="人员分类"
      v-if='isVisible'
      v-model:visible="isVisible"
      width="90%"
      height='90%'
      centered
      destroyOnClose
      class="detail-modal"
  >
    <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="提示：单击选择图片，再次单击，取消选择。双击预览图片。" type="info" />
          </a-form-item>
        </a-form>
      </div>

      <div class="content-part">
        <div class="left-part">
          <el-row>
            <el-col :span="4" v-for="item in personList" :key="item.id">
              <div
                  style="margin: 0 5px"
                  :class="item.id === currentPerson.id ? 'actived' : ''"
                  @click="handleClick(item)"
                  @dblclick="handlePreview(item.picture_url)"
              >

                <el-image :src="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>
        <div class="right-part">
          <template v-if="groupList.length > 0">
            <div class="classBox" v-for="row in groupList" :key="row.person_unid">
              <div style="text-align: right;margin-bottom: 10px;">
                <a-button @click="handleAddGroup(row.personList)" :loading="addGroupLoading" style="margin-left: 10px">加入此分组内图片</a-button>
              </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 groupList = ref([])
    const currentPerson = ref({})
    // 表单
    function getInitialFormData() {
      return {
        date: '',
        startTime: '',
        endTime: '',
      }
    }
    const formData = ref(getInitialFormData())
    const personUnid = ref('')

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

      isVisible.value = true;

      // 获取组数据
      personList.value = data.perrsonList || []
      personUnid.value = data.person_unid

      // 搜索搜索条件默认值
      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')
      }
    };
    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) => {
          console.log('r', r)
          if(r.msg_code === 200) {
            ElMessage({
              message: `添加成功`,
              type: 'success'
            })
            selectedImgList.value = []

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

    const handleClick = (data) => {
      console.log('handleClick', data)
      currentPerson.value = data
    }
    const handlePreview = (url) => {
      console.log('handlePreview', url)
      preview({
        images: url,
      });
    }

    const onCancel = () => {
      isVisible.value = false;
      groupList.value = []
    };

    const isLoading = ref(false)
    const clickSearch = () => {
      const parmas = {
        person_unid: currentPerson.value.person_unid,
        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: currentPerson.value.id,
        ip: window._baseImgUrl,
        plaza_id: currentPerson.value.mall_id
      }

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

    return {
      isVisible,
      formData,
      personList,
      groupList,
      handleClick,
      onCancel,
      initDialog,
      clickSearch,
      isLoading,
      currentPerson,
      formatImgUrl,

      selectedImgList,
      handleSelectImg,
      isSelectedImg,
      handleAddGroup,
      addGroupLoading,
      handlePreview,
    };
  },
};
</script>

<style lang="less" scoped>
.seart-part {
  margin-bottom: 10px;
}
.content-part {
  display: flex;
}
.left-part {
  width: 400px;
  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>