feat: 聚类弹窗，人员分类完成

src/views/SnapshotCluster/ClusterResult/PersonGroupDialog.vue

@@ -5,50 +5,33 @@
       v-model:visible="isVisible"
       width="90%"
       height='90%'
+      centered
       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" :format="'YYYY-MM-DD'" style="width: 240px"/>
+            <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-form-item>
         </a-form>
       </div>
 
-      <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)"
-            >
-
-              <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">
-        <div class="classBox">
-          <el-row v-for="row in []" :key="row.person_unid">
-            <el-col :span="3" v-for="item in row" :key="item.id">
+      <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="'actived'"
+                  :class="item.id === currentPerson.id ? 'actived' : ''"
                   @click="handleClick(item)"
               >
 
@@ -57,15 +40,40 @@
                           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>时间:{{ 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">
+          <div class="classBox" v-for="row in groupList" :key="row.person_unid">
+            <el-row>
+              <el-col :span="3" v-for="item in row.personList" :key="item.id">
+                <div
+                    style="margin: 0 5px"
+                    :class="isSelectedImg(item) ? 'actived' : ''"
+                    @click="handleSelectImg(item)"
+                >
+
+                  <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>
+        </div>
       </div>
     </div>
     <template #footer>
@@ -76,8 +84,11 @@
 
 <script>
 import { ref } from "vue";
-// import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
-// import { ElMessage } from "element-plus";
+import moment from "moment/moment";
+// 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',
@@ -89,13 +100,13 @@ export default {
     // 表单
     function getInitialFormData() {
       return {
-        personUnid: '',
-        age: 1,
-        gender: 0,
-        type: 0,
+        date: '',
+        startTime: '',
+        endTime: '',
       }
     }
     const formData = ref(getInitialFormData())
+    const personUnid = ref('')
 
     const initDialog = (data) => {
       console.log('initDialog', data)
@@ -105,7 +116,68 @@ export default {
 
       // 获取组数据
       personList.value = data.perrsonList || []
+      personUnid.value = data.person_unid
+
+      // 搜索搜索条件默认值
+      formData.value.startTime = '00:00:00'
+      formData.value.endTime = '23:59:59'
+      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 = () => {
+      if (selectedImgList.value.length > 0) {
+        const strUnidList = selectedImgList.value.map((item) => item.unid).join(',')
+        const params = {
+          unid: strUnidList,
+          personUnid: personUnid.value,
+        }
+
+        addGroupLoading.value = true
+        clusterResultApi.getBodyPoint(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)
@@ -117,20 +189,37 @@ export default {
 
     const isLoading = ref(false)
     const clickSearch = () => {
-      // isLoading
-      /* clusterResultApi.updatePerson(formData.value).then(
-          (r) => {
-            if(r.msg_code==200){
-              ElMessage({
-                message: `保存成功`,
-                type: 'success'
-              })
-              // 刷新列表
-              emit('refresh')
-              onCancel()
-            }
-          }
-      ) */
+      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 {
@@ -144,6 +233,13 @@ export default {
       clickSearch,
       isLoading,
       currentPerson,
+      formatImgUrl,
+
+      selectedImgList,
+      handleSelectImg,
+      isSelectedImg,
+      handleAddGroup,
+      addGroupLoading,
     };
   },
 };
@@ -153,12 +249,31 @@ export default {
 .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;
+}
 </style>

src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResultApi.js

@@ -68,7 +68,7 @@ class ClusterResultApi {
             }
         )
     }
-    
+
     getBodyPoint(data) {
         return axiosInstance.request(
             {
@@ -80,6 +80,15 @@ class ClusterResultApi {
             }
         )
     }
+    updateRecognition(data) {
+        return axiosInstance.request(
+            {
+                method: 'POST',
+                url: `/faceRecognitions/updateRecognition`,
+                data: data
+            }
+        )
+    }
 }
 
 const clusterResultApi = new ClusterResultApi()