feat: 聚类弹窗，左侧部分完成

src/views/SnapshotCluster/ClusterResult/ClusterResult.vue

@@ -141,6 +141,7 @@
                                   <span class="expandWord">删除</span>
                                   <span class="expandWord">删除</span>
                                 </a-popconfirm>
                                 </a-popconfirm>
                                 <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span>
                                 <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span>
+                                <span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</span>
 
 
                                 <el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
                                 <el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
                                 人id:{{ '   ' + person.person_unid }}
                                 人id:{{ '   ' + person.person_unid }}
@@ -199,6 +200,7 @@
 	<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>
 	<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>
 
 
   <PersonGroupEditor ref='personGroupEditorRef' @refresh="clickSearch" />
   <PersonGroupEditor ref='personGroupEditorRef' @refresh="clickSearch" />
+  <PersonGroupDialog ref='personGroupDialogRef' @refresh="clickSearch" />
 </template>
 </template>
 
 
 <script>
 <script>
@@ -213,10 +215,12 @@ import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
 import DetailDialogComparison from "../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue";
 import DetailDialogComparison from "../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue";
 import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
 import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
 import PersonGroupEditor from "./PersonGroupEditor.vue";
 import PersonGroupEditor from "./PersonGroupEditor.vue";
+import PersonGroupDialog from "./PersonGroupDialog.vue";
 
 
 export default {
 export default {
     components:{
     components:{
       PersonGroupEditor,
       PersonGroupEditor,
+      PersonGroupDialog,
       // imgDialog
       // imgDialog
 		DetailDialog,
 		DetailDialog,
 		DetailDialogComparison,
 		DetailDialogComparison,
@@ -594,6 +598,24 @@ export default {
         const isSelectedPerson = (id) => {
         const isSelectedPerson = (id) => {
           return selectedPersonList.value.some(item => item.id === id)
           return selectedPersonList.value.some(item => item.id === id)
         }
         }
+        // 查询组
+        const personGroupDialogRef = ref();
+        const searchPersonInfoByGroup = function(data) {
+          console.log('searchPersonInfoByGroup', data)
+          /* let parmas = {
+            // person_unid: currobj.value.person_unid,
+            pic_type: data.picType,
+            endTime:formatDate(rawData.date) + ' ' + rawData.endTime,
+            startTime:formatDate(rawData.date) + ' ' + rawData.startTime,
+            countdate:formatDate(rawData.date),
+            pic_id:currobj.value.id,
+            ip:window._baseImgUrl,
+            plaza_id:currobj.value.mall_id
+          } */
+          // singleImgComparisonRef.value.initDialog(parmas);
+
+          personGroupDialogRef.value.initDialog(data);
+        }
 
 
         const downloadFile = function(url) {
         const downloadFile = function(url) {
             window.open(url)
             window.open(url)
@@ -771,6 +793,7 @@ export default {
             expandChange,
             expandChange,
             updatePersonInfoByGroup,
             updatePersonInfoByGroup,
             deletePersonRecord,
             deletePersonRecord,
+            searchPersonInfoByGroup,
             isSelectedPerson,
             isSelectedPerson,
             selectedPersonList,
             selectedPersonList,
 			clerkComparativeFun,
 			clerkComparativeFun,
@@ -781,9 +804,10 @@ export default {
             // ref
             // ref
             // imgModelRef,
             // imgModelRef,
 			DetailDialogRef,
 			DetailDialogRef,
+      personGroupDialogRef,
       personGroupEditorRef,
       personGroupEditorRef,
 			DetailDialogComparisonRef,
 			DetailDialogComparisonRef,
-			singleImgComparisonRef
+			singleImgComparisonRef,
         }
         }
     }
     }
 }
 }

src/views/SnapshotCluster/ClusterResult/PersonGroupDialog.vue

+<template>
+  <a-modal
+      title="人员分类"
+      v-if='isVisible'
+      v-model:visible="isVisible"
+      width="90%"
+      height='90%'
+      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-form-item>
+          <a-form-item style="padding: 5px 0">
+            <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</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
+                  style="margin: 0 5px"
+                  :class="'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>
+    </div>
+    <template #footer>
+      <a-button @click="onCancel">返回</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import { ref } from "vue";
+// import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
+// import { ElMessage } from "element-plus";
+
+export default {
+  name: 'PersonGroupDialog',
+  setup(props, { emit }) {
+    const isVisible = ref(false);
+    const personList = ref([])
+    const groupList = ref([])
+    const currentPerson = ref({})
+    // 表单
+    function getInitialFormData() {
+      return {
+        personUnid: '',
+        age: 1,
+        gender: 0,
+        type: 0,
+      }
+    }
+    const formData = ref(getInitialFormData())
+
+    const initDialog = (data) => {
+      console.log('initDialog', data)
+      formData.value = getInitialFormData()
+
+      isVisible.value = true;
+
+      // 获取组数据
+      personList.value = data.perrsonList || []
+    };
+
+    const handleClick = (data) => {
+      console.log('handleClick', data)
+      currentPerson.value = data
+    }
+    const onCancel = () => {
+      isVisible.value = false;
+    };
+
+    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()
+            }
+          }
+      ) */
+    };
+
+    return {
+      isVisible,
+      formData,
+      personList,
+      groupList,
+      handleClick,
+      onCancel,
+      initDialog,
+      clickSearch,
+      isLoading,
+      currentPerson,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.seart-part {
+  margin-bottom: 10px;
+}
+.left-part {
+  width: 400px;
+  height: 560px;
+  overflow: auto;
+}
+.actived{
+  border: 3px solid red;
+}
+</style>