feat: 增加搜索抓拍功能

src/views/SnapshotCluster/ClusterResult/ClusterResult.vue

@@ -256,18 +256,20 @@
 																<span style="margin-left: 20px;">当前显示：{{person.imageDisplayType?'事件图':'抓拍图'}}</span>
 																<span style="color: #1890ff;margin-left: 20px;cursor: pointer;" @click='toggleImageDisplayType(person)'>{{person.imageDisplayType?'切换显示抓拍图':'切换显示事件图'}}</span>
                             </div>
-                            <el-row v-for="row in getPagedList(person.perrsonList, 8)">
-                                <el-col :span="3" v-for="item in row">
+                            <el-row v-for="(row,rowIndex) in getPagedList(person.perrsonList, 8)">
+                                <el-col :span="3" v-for="(item,index) in row">
                                     <div
                                         style="margin: 0 5px"
                                         :class="[(currentItemId==item.id)?'actived':'', isSelectedPerson(item.id)?'actived-red':'']"
                                         @click="handleClick(item, $event,person.perrsonList)"
                                     >
-                                        <div style="">
+                                        <div style="display: flex;justify-content: space-between;">
                                             <span @click="downloadTrajectoryFile(item.track_url)"
                                                   class="downBtn">
                                                 轨迹
                                             </span>
+                                <span class="downBtn" v-if="item.direction === 1 || item.direction === -1" @click="handleShotSearch(person.perrsonList,item,rowIndex*8+index)">搜索抓拍</span>
+
                                             <span @click="downloadFile(item.features_url)"
                                                   class="downBtn downBtn1">
                                                 特征
@@ -332,6 +334,7 @@
 	<AddPersonnelPool ref='personnelPoolRef' :data-params="currentSearchCondition" @refresh="handleRefresh" />
   <PersonGroupDialog ref='personGroupDialogRef' :query-form="queryForm" @refresh="handleRefresh" />
   <AddEditSnapshotClusterDialog ref="addEditSnapshotClusterRef" />
+  <SnapShotRecordSearchDialog ref="snapShotRecordSearchDialogRef" @refresh="handleRefresh" />
 
 </template>
 
@@ -354,6 +357,8 @@ import UploadGroupDataEditor from "./UploadGroupDataEditor.vue";
 import PersonGroupDialog from "./PersonGroupDialog.vue";
 import PersonGroupMover from "./PersonGroupMover.vue";
 import AddPersonnelPool from "./AddPersonnelPool.vue";
+import SnapShotRecordSearchDialog from "./components/SnapShotRecordSearchDialog.vue";
+
 import AddEditSnapshotClusterDialog from './components/AddEditSnapshotClusterDialog.vue'
 import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi";
 
@@ -371,6 +376,9 @@ export default {
 		PersonnelDialog,
 		DetailDialogComparison,
 		singleImgComparisonDialog,
+      SnapShotRecordSearchDialog,
+
+
 
     },
     setup() {
@@ -478,6 +486,51 @@ export default {
                 filter:0
             }
         )
+
+        const snapShotRecordSearchDialogRef = ref()
+        const handleShotSearch = (dataList,item,dataIndex) => {
+          // 方向是进 找从dataIndex到dataList.length - 1中第一个方向是出的 并且地点id相同 gate_id
+          const gateId = item.gate_id
+
+          let index = 0,lastIndex = 0;
+          if(item.direction === 1){
+            index = dataIndex
+            lastIndex = dataList.findIndex((v,index) => index > dataIndex && v.direction === -1 && v.gate_id === gateId)
+            if(lastIndex === -1){
+              ElMessage.error('未找到匹配的出方向的数据')
+              return false
+            }
+          }else if(item.direction === -1){
+            lastIndex = dataIndex
+            const list = dataList.slice(0,dataIndex)
+            index = list.findLastIndex((v,index) => index < dataIndex && v.direction === 1 && v.gate_id === gateId)
+            if(index === -1){
+              ElMessage.error('未找到匹配的出方向的数据')
+              return false
+            }
+          }
+          if(!index && !lastIndex){
+            ElMessage.error('数据错误')
+            return false
+          }
+          const params = {
+            account_id: queryForm.account_id,
+            plaza_id: queryForm.plaza_id,
+            type:queryForm.type,
+            gate_id: gateId,
+            direction:[item.direction===1?-1:1],
+            picType:queryForm.picType,
+            startTime: dataList[index].counttime,
+            endTime: dataList[lastIndex].counttime,
+            personType: queryForm.personType,
+            others:{
+              ids:[dataList[index].id,dataList[lastIndex].id],
+              ...dataList[dataIndex]
+            }
+          }
+          snapShotRecordSearchDialogRef.value?.initDialog(params, { personTypeList:personTypeList.value })
+        }
+
         const searchCondition = ref({})
         if(window.localStorage.getItem('searchCondition')){
             searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
@@ -720,6 +773,7 @@ export default {
 			confirmSearch()
 		}
 		const handleRefresh = function() {
+      currentItemId.value = ''
 		  isMultipleOperation.value = false
 		  selectedPersonList.value = []
 		  confirmSearch(1)
@@ -1495,6 +1549,7 @@ export default {
 			personnelComparativeFun,
 			singleComparativeFun,
 			personTypeStr,
+      handleShotSearch,
             formatGender,
             downloadTrajectoryFile,
 			clickSearch,
@@ -1514,6 +1569,7 @@ export default {
 			singleImgComparisonRef,
       personGroupMoverRef,
 			personnelPoolRef,
+      snapShotRecordSearchDialogRef,
 			reqPersonType,
 
           isMultipleOperation,

src/views/SnapshotCluster/ClusterResult/components/SnapShotRecordSearchDialog.vue

+<template>
+  <a-modal v-model:visible="visible" :title="`抓拍搜索`" :width="1800">
+    <div v-loading="isLoading">
+      <div class="resultContent" :style="{ height: 300 + 'px' }" v-if="pagedTableDataList.length > 0">
+        <el-row v-for="(row, rowIndex) in pagedTableDataList" :key="rowIndex">
+          <el-col :span="3" v-for="item in row" :key="item.id">
+            <div
+              style="margin: 0 5px; cursor: pointer"
+              :class="currentItemId == item.id ? 'actived' : ''"
+            >
+              <!-- @click="handleClick(item)" -->
+              <div style="">
+                <span  @click="onSave(item)"  class="downBtn">
+                  添加到聚类
+                </span>
+              </div>
+              <el-image
+                :src="item.picture_url"
+                :fit="'fill'"
+                class="single-image"
+                :style="{ height: imgHeight + 'px' }"
+              >
+                <template #error>
+                  <div class="image-slot">
+                    {{ dataSources == 1 ? "去加载" : "加载失败" }}
+                  </div>
+                </template>
+              </el-image>
+              <div>人id: {{ item.person_unid }}</div>
+              <div>时间:{{ item.counttime }}</div>
+              <div>
+                人员类型:{{ personTypeStr(item.person_type) }}({{
+                  formatChildAdult(item.childAdult)
+                }})
+              </div>
+              <div></div>
+              <div class="direction" :class="'direction' + item.direction">
+                方向:{{ formatDirection(item.direction) }}
+              </div>
+              <div>地点:{{ item.gate_name }}</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-else style="text-align: center; line-height: 300px;height: 300px;">没有相关抓拍数据</div>
+      <a-pagination
+        v-model:current="pageNum"
+        v-model:pageSize="pageSize"
+        :total="total"
+        :show-total="(total) => `共 ${total} 条`"
+        :pageSizeOptions="['24', '48', '96', '192']"
+        @change="onPageNumChange"
+        @showSizeChange="onPageSizeChange"
+        show-size-changer
+        show-quick-jumper
+        style="text-align: center; margin-top: 10px"
+      />
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose, defineEmits, ref, computed } from "vue";
+import { cloneDeep } from "lodash";
+import { ElMessage } from 'element-plus'
+import { getPagedList } from "@/PublicUtil/PublicUtil";
+import clusterResultApi from "../ClusterResultApi";
+import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi";
+
+const submitForm = ref({});
+const visible = ref(false);
+
+const pagedTableDataList = computed(() => {
+  return getPagedList(dataList.value, 8);
+});
+const pageNum = ref(1);
+const pageSize = ref(8);
+const total = ref(0);
+const emit = defineEmits(['refresh'])
+
+const childAdultOptions = ref([
+  { value: 0, label: "儿童" },
+  { value: 1, label: "成人" },
+  { value: -1, label: "未知" },
+]);
+
+const personTypeList = ref([]);
+const personTypeStr = function (val) {
+  return (
+    personTypeList.value.filter((v) => v.value == val)[0] || { label: "--" }
+  ).label;
+};
+
+const formatChildAdult = function (val) {
+  const targetitem = childAdultOptions.value.find((item) => item.value === val);
+  if (targetitem) return targetitem.label;
+  else return "未知";
+};
+
+    const onSave = (item) => {
+      const { person_unid } = submitForm.value.others
+      const params = {
+        unid: item.unid,
+        personUnid: person_unid,
+        countdate: item.counttime,
+      }
+      clusterResultApi.updateRecognition(params).then(
+          (r) => {
+            if(r.msg_code==200){
+              ElMessage({
+                message: `保存成功`,
+                type: 'success'
+              })
+              // 刷新列表
+              emit('refresh')
+              visible.value = false
+            } else {
+              ElMessage({
+                message: `保存失败`,
+                type: 'error'
+              })
+            }
+          }
+      )
+    };
+
+
+const dataList = ref([]);
+const formatDirection = function (number) {
+  switch (number) {
+    case 1: {
+      return "进";
+    }
+    case -1: {
+      return "出";
+    }
+    case 4: {
+      return "从左到右";
+    }
+    case 5: {
+      return "从右到左";
+    }
+    case 7: {
+      return "关注";
+    }
+    case 8: {
+      return "触达";
+    }
+    case 0: {
+      return "横穿";
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+const onPageNumChange = function (num) {
+  pageNum.value = num;
+  confirmSearch();
+};
+
+const onPageSizeChange = function (current, size) {
+  pageNum.value = 1;
+  pageSize.value = size;
+  confirmSearch();
+};
+
+// 初始化弹窗
+const initDialog = (form, selectOptionsMap) => {
+  submitForm.value = cloneDeep(form);
+  personTypeList.value = selectOptionsMap.personTypeList || [];
+  visible.value = true;
+  confirmSearch();
+};
+const isLoading = ref(false);
+const confirmSearch = function () {
+  isLoading.value = true;
+  const data = {
+    account_id: submitForm.value.account_id,
+    type: submitForm.value.type,
+    plaza_id: submitForm.value.plaza_id,
+    productId: submitForm.value.productId
+      ? submitForm.value.productId.toString()
+      : "",
+    zone_id: submitForm.value.zone_id
+      ? submitForm.value.zone_id.toString()
+      : "",
+    positionId: submitForm.value.positionId
+      ? submitForm.value.positionId.toString()
+      : "",
+    gate_id: submitForm.value.gate_id
+      ? submitForm.value.gate_id.toString()
+      : "",
+    direction: submitForm.value.direction
+      ? submitForm.value.direction.toString()
+      : "",
+    picType: submitForm.value.picType,
+    personType: submitForm.value.personType
+      ? submitForm.value.personType.toString()
+      : "",
+    startTime: submitForm.value.startTime,
+    endTime: submitForm.value.endTime,
+    page: pageNum.value - 1,
+    pageSize: pageSize.value,
+  };
+  snapshotRecordApi.getSnapshotRecordList(data).then((r) => {
+    isLoading.value = false;
+    r.data.persons.forEach((item) => {
+      if (item.features_url) {
+        item.features_url = window._baseImgUrl + item.features_url;
+      }
+      if (item.picture_url) {
+        item.picture_url = window._baseImgUrl + item.picture_url;
+      }
+      if (item.track_url) {
+        item.track_url = window._baseImgUrl + item.track_url;
+      }
+    });
+    dataList.value =
+      r.data.persons.filter(
+        (item) => !submitForm.value.others.ids.includes(item.id)
+      ) || [];
+    total.value = r.data.pageNum;
+    document.getElementsByClassName("resultContent")[0].scrollTop = 0;
+  });
+};
+
+defineExpose({
+  initDialog,
+});
+</script>
+
+<style scoped lang="less">
+@import "../../SnapshotRecord/SnapshotRecord.less";
+.actived {
+  border: 3px solid #1890ff;
+}
+.resultContent {
+  overflow: auto;
+  min-height: 500px;
+}
+.downBtn {
+  color: #409eff;
+  font-size: 15px;
+  cursor: pointer;
+  display: inline-block;
+  width: auto;
+}
+.downBtn1 {
+  float: right;
+}
+.person-tag-one {
+  line-height: 24px;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #c0c4cc;
+  font-size: 14px;
+  background: #f5f7fa;
+}
+</style>