Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit b08ea82a by 李乾广
Options

增加批次客流页面，抓拍记录增加同组客流弹出框

1 parent 10cbbf7e
Expand all
Inline Side-by-side
Showing 9 changed files with 394 additions and 0 deletions
src/router/index.js
......@@ -33,6 +33,10 @@ const menuRoute = [
path: 'SnapshotCluster',
component: () => import("@/views/SnapshotCluster/SnapshotCluster.vue"),
},
{
path: 'batchesResult',
component: () => import("@/views/batchesResult/batchesResult.vue"),
},
{
path: 'SnapshotCluster1',
component: () => import("@/views/SnapshotCluster1/SnapshotCluster.vue"),
......
src/views/Main/Main.vue
......@@ -29,6 +29,11 @@
<span style="padding: 0 5px">抓拍聚类</span>
</div>
</a-menu-item>
<a-menu-item :key="'/Main/batchesResult'">
<div class="flex-vertical-center">
<span style="padding: 0 5px">批次客流</span>
</div>
</a-menu-item>
</a-sub-menu>
<a-sub-menu title="数据验证" key="dataValidation">
<template #icon>
......
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.vue
......@@ -104,6 +104,9 @@
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="singleComparativeFun">单张特征对比</a-button>
</a-form-item>
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="batchesResultFun">同组客流</a-button>
</a-form-item>
</a-form>
<div v-loading="isLoading">
......@@ -196,6 +199,7 @@
</div>
<!-- <imgDialog ref='imgModelRef'></imgDialog> -->
<DetailDialog ref="DetailDialogRef" />
<batchesResultDialog ref="batchesResultDialogRef" />
<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>
</template>
......@@ -208,11 +212,13 @@ import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/
// import imgDialog from '../imgDialog.vue'
import {ElMessage} from 'element-plus'
import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
import batchesResultDialog from "../batchesResultDialog/batchesResultDialog.vue";
import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
export default {
components:{
// imgDialog ,
DetailDialog,
batchesResultDialog,
singleImgComparisonDialog
},
setup() {
......@@ -233,6 +239,7 @@ export default {
const currobj = ref({})
// ref
const DetailDialogRef = ref();
const batchesResultDialogRef = ref();
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
......@@ -857,6 +864,32 @@ export default {
}
DetailDialogRef.value.initDialog(currobj.value,parmas);
}
// 抓拍记录批次
const batchesResultFun = function(){
if(!currobj.value.id){
ElMessage({
message: `请选择图片`,
type: 'warning'
});
return false
}
if(!currobj.value.picture_url){
ElMessage({
message: `该图片没有特征，请选择有效的图片`,
type: 'warning'
})
return
}
const rawData = toRaw(queryForm)
let parmas = {
mallId:currobj.value.mall_id,
personUnid:currobj.value.person_unid,
unid:currobj.value.unid,
countDate:formatDate(rawData.date)
}
batchesResultDialogRef.value.initDialog(currobj.value,parmas);
}
//单张特征对比
const singleImgComparisonRef = ref()
const singleComparativeFun = function(){
......@@ -939,10 +972,12 @@ export default {
downloadTrajectoryFile,
handleClick,
comparativeFun,
batchesResultFun,
formatGender,
clickSearch,
// ref
DetailDialogRef,
batchesResultDialogRef,
imgModelRef,
singleComparativeFun,
singleImgComparisonRef,
......
src/views/SnapshotCluster/batchesResultDialog/batchesResultDialog.less 0 → 100644
.single-image {
height: 300px;
width: 100%;
}
.direction{
font-weight: 900;
background-color: red;
color: white;
}
.direction1{
background-color: green;
}
.direction0{
background-color: orange;
}
src/views/SnapshotCluster/batchesResultDialog/batchesResultDialog.vue 0 → 100644
<template>
<a-modal
title="同组客流"
v-model:visible="isVisible"
width="1500px"
height='88%'
class="detail-modal"
>
<div v-loading="isLoading">
<a-row :gutter="[16,16]">
<a-col :span='4'>
<div style="margin: 0 5px" class="itemBox">
<el-image :src="detailData.picture_url" :fit="'fill'" class="single-image" @click='clickItem(detailData)'>
</el-image>
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">unid：{{ detailData.unid||'--' }}</div>
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">personid：{{ detailData.person_unid||'--' }}</div>
<div>时间：{{ detailData.counttime }}</div>
<div>类型：{{ detailData.person_type==1?'店员':(detailData.person_type==0?'顾客':'未知') }}({{ detailData.childAdult==1?'成人':(detailData.childAdult==0?'儿童':'未知') }})</div>
<div>性别：{{ formatGender(detailData.gender) }}({{detailData.age}})</div>
<div>地点：{{ detailData.gate_name }}</div>
</div>
</a-col>
<a-col :span='20'>
<div class="resultContent" :style="{'height':contentHeight+'px'}">
<div v-for="person in dataList">
<div class="classBox" :class="person.expand?'expand':''">
<div :class="person.checked?'checked':''">
<div class="boxInfo">
<span class="iconExpand" v-show="!person.expand">▶</span>
<span class="iconExpand" v-show="person.expand">▼</span>
<span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
<span style="margin-left: 4px;">批次id：{{ ' ' + person.batchId }}</span>
<span style="margin-left: 20px;">图片数量：{{ person.faceRecognitionVoList.length }}</span>
</div>
<el-row v-for="row in getPagedList(person.faceRecognitionVoList, 6)">
<el-col :span="4" v-for="item in row">
<div style="margin: 0 2px;border: 3px solid transparent;border-radius: 2px;border: 3px solid #ffffff!important;" :style="{'background': item.showColor?item.showColor:''}">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" style="background: #ffffff;">
</el-image>
<div style="padding-left: 5px;padding-right: 5px;">
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">unid：{{ item.unid||'--' }}</div>
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">personid：{{ item.person_unid||'--' }}</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>地点：{{ item.gate_name }}</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<a-empty v-if='!isLoading&&dataList.length==0' style='margin: 0 auto;'></a-empty>
</div>
</a-col>
</a-row>
</div>
<template #footer>
<a-button @click="onCancel">返回</a-button>
</template>
</a-modal>
</template>
<script>
import {
ref,
} from 'vue'
import batchesResultApi from '@/views/SnapshotCluster/batchesResultDialog/batchesResultDialogApi'
import {
getPagedList
} from '@/PublicUtil/PublicUtil'
export default {
components: {
},
setup() {
const isVisible = ref(false);
const isLoading = ref(false);
const detailData = ref({});
const dataList = ref([])
const colors = ref(['#1cd389', '#ffc751', '#ff6e73', '#8683e6', '#d83965',"#87D14B", "#FF9631", '#9036aa', '#4054af', '#97c05c']);
const initDialog = (record,parmas) => {
detailData.value = record;
isVisible.value = true;
dataList.value = []
isLoading.value = true
batchesResultApi.getBatchesResultList(parmas).then(
(r) => {
isLoading.value = false
console.log(12341,r.data)
if(r.data) {
sortDataList(r.data)
r.data.forEach((itemPerson) => {
itemPerson.expand = false
itemPerson.faceRecognitionVoList.forEach((item) => {
if (item.picture_url) {
item.picture_url = window._baseImgUrl + item.picture_url
}
if (item.features_url) {
item.features_url = window._baseImgUrl + item.features_url
}
item.showColor = ''
if(itemPerson.personUnids.length>1) {
for(let a=0;a<itemPerson.personUnids.length;a++) {
if(itemPerson.personUnids[a]==item.person_unid){
item.showColor = colors.value[a]?colors.value[a]:'#4fb9d1';
break;
}
}
}
})
})
dataList.value = r.data
}
}
)
}
const formatGender = function(number) {
switch (number) {
case 1: {
return '男'
}
case -1: {
return '未知'
}
case 0: {
return '女'
}
default: {
break
}
}
}
const sortDataList = function(list) {
list.sort(
(a, b) => {
return (b.faceRecognitionVoList.length - a.faceRecognitionVoList.length)
}
)
}
const expandChange = function(data) {
dataList.value.forEach(item => {
if (data.batchId == item.batchId) {
item.expand = !item.expand
}
})
}
const onCancel = () => {
isVisible.value = false;
};
const contentHeight = ref(0)
const __main = function() {
contentHeight.value = window.innerHeight - 310
}
__main()
return {
contentHeight,
sortDataList,
expandChange,
colors,
isLoading,
dataList,
getPagedList,
formatGender,
isVisible,
detailData,
onCancel,
initDialog,
}
}
}
</script>
<style lang="less" scoped>
@import "./batchesResultDialog";
.actived {
border: 3px solid #1890ff!important;
}
.checkBox {
margin-left: 10px;
}
.boxInfo {
line-height: 28px;
margin-bottom: 10px;
}
.classBox {
margin: 10px 0;
border: solid 1px black;
height: 485px;
overflow-y: hidden;
}
.expand {
height: auto;
overflow: auto;
}
.expandWord {
color: #1890ff;
margin-right: 5px;
cursor: pointer;
float: right;
}
.iconExpand {
cursor: pointer;
float: right;
color: #1890ff;
margin-right: 20px;
}
.checked {
background-color: #bbb;
}
.resultContent {
overflow: auto;
min-height: 500px;
}
.downBtn {
color: #409EFF;
font-size: 15px;
cursor: pointer;
display: inline-block;
width: auto;
}
.downBtn1 {
float: right;
}
</style>
src/views/SnapshotCluster/batchesResultDialog/batchesResultDialogApi.js 0 → 100644
import axiosInstance from "@/Request/PublicAxiosInstance"
import {filterEmptyValueInObject} from "@/PublicUtil/PublicUtil"
class ClusterResultApi {
getBatchesResultList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/personBatch/sameBatch`,
params: filterEmptyValueInObject(data)
}
)
}
}
const clusterResultApi = new ClusterResultApi()
export default clusterResultApi
src/views/batchesResult/batchesResult.less 0 → 100644
.single-image {
height: 300px;
width: 100%;
}
.direction{
font-weight: 900;
background-color: red;
color: white;
}
.direction1{
background-color: green;
}
.direction0{
background-color: orange;
}
src/views/batchesResult/batchesResultApi.js 0 → 100644
import axiosInstance from "@/Request/PublicAxiosInstance"
import {filterEmptyValueInObject} from "@/PublicUtil/PublicUtil"
class ClusterResultApi {
getBatchesResultList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/personBatch/page`,
params: filterEmptyValueInObject(data)
}
)
}
getAccountList() {
return axiosInstance.request(
{
method: 'GET',
url: `/accounts`,
}
)
}
getPlazaList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/malls`,
params: filterEmptyValueInObject(
{
accountIds: data.account_id
},
)
}
)
}
// 合并批次分组
concatTwoBatches(data) {
return axiosInstance.request(
{
method: 'PUT',
url: `/personBatch/merge`,
data: filterEmptyValueInObject(data)
}
)
}
// 删除批次记录
deleteOneBatches(data) {
return axiosInstance.request(
{
method: 'PUT',
url: `/personBatch/remove`,
data: filterEmptyValueInObject(data)
}
)
}
}
const clusterResultApi = new ClusterResultApi()
export default clusterResultApi
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!