SnapShotRecordSearchDialog.vue

<template>
  <a-modal v-model:visible="visible" :title="`抓拍搜索(${submitForm.startTime}至${submitForm.endTime})地点: ${submitForm.gate_name}`" :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="handleAddToCluster(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, ElMessageBox } 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 handleAddToCluster = (item) =>{
  // 二级确认
  ElMessageBox.confirm('确认添加到聚类吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 确认添加到聚类
    onSave(item)
  }).catch(() => {
    // 取消添加到聚类
  });
}

    const onSave = (item) => {
      const { person_unid } = submitForm.value.others
      const params = {
        unid: item.unid,
        personUnid: person_unid,
        // countdate只要年月日
        countdate: item.counttime.split(' ')[0],
      }
      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) => {
  dataList.value = []
  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>