Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit d12d07cd by Tianqing Liu
Options

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

1 parent 98948297
Inline Side-by-side
Showing 2 changed files with 151 additions and 27 deletions
src/views/SnapshotCluster/ClusterResult/PersonGroupDialog.vue
...@@ -5,20 +5,27 @@ ...@@ -5,20 +5,27 @@
v-model:visible="isVisible" v-model:visible="isVisible"
width="90%" width="90%"
height='90%' height='90%'
centered
class="detail-modal" class="detail-modal"
> >
<div class="person-group"> <div class="person-group">
<div class="seart-part"> <div class="seart-part">
<a-form :model="formData" layout="inline"> <a-form :model="formData" layout="inline">
<a-form-item label="选择日期：" style="padding: 5px 0"> <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>
<a-form-item style="padding: 5px 0"> <a-form-item style="padding: 5px 0">
<a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button> <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-item>
</a-form> </a-form>
</div> </div>
<div class="content-part">
<div class="left-part"> <div class="left-part">
<el-row> <el-row>
<el-col :span="4" v-for="item in personList" :key="item.id"> <el-col :span="4" v-for="item in personList" :key="item.id">
...@@ -43,24 +50,24 @@ ...@@ -43,24 +50,24 @@
</el-row> </el-row>
</div> </div>
<div class="right-part"> <div class="right-part">
<div class="classBox"> <div class="classBox" v-for="row in groupList" :key="row.person_unid">
<el-row v-for="row in []" :key="row.person_unid"> <el-row>
<el-col :span="3" v-for="item in row" :key="item.id"> <el-col :span="3" v-for="item in row.personList" :key="item.id">
<div <div
style="margin: 0 5px" style="margin: 0 5px"
:class="'actived'" :class="isSelectedImg(item) ? 'actived' : ''"
@click="handleClick(item)" @click="handleSelectImg(item)"
> >
<el-image :src="item.picture_url" <el-image :src="formatImgUrl(item.picture_url)"
:fit="'fill'" :fit="'fill'"
class="single-image"> class="single-image">
</el-image> </el-image>
<div>时间:{{ item.counttime }}</div> <div>时间:{{ item.counttime }}</div>
<div>人员类型:{{ item.person_type==1?'店员':(item.person_type==0?'顾客':'未知') }}({{ item.childAdult==1?'成人':(item.childAdult==0?'儿童':'未知') }})</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>性别:{{ formatGender(item.gender) }}({{item.age}})</div>-->
<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div> <!--<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div>-->
<div>地点:{{ item.gate_name }}</div> <div>地点:{{ item.gate_name }}</div>
</div> </div>
</el-col> </el-col>
...@@ -68,6 +75,7 @@ ...@@ -68,6 +75,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<template #footer> <template #footer>
<a-button @click="onCancel">返回</a-button> <a-button @click="onCancel">返回</a-button>
</template> </template>
...@@ -76,8 +84,11 @@ ...@@ -76,8 +84,11 @@
<script> <script>
import { ref } from "vue"; import { ref } from "vue";
// import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi' import moment from "moment/moment";
// import { ElMessage } from "element-plus"; // 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 { export default {
name: 'PersonGroupDialog', name: 'PersonGroupDialog',
...@@ -89,13 +100,13 @@ export default { ...@@ -89,13 +100,13 @@ export default {
// 表单 // 表单
function getInitialFormData() { function getInitialFormData() {
return { return {
personUnid: '', date: '',
age: 1, startTime: '',
gender: 0, endTime: '',
type: 0,
} }
} }
const formData = ref(getInitialFormData()) const formData = ref(getInitialFormData())
const personUnid = ref('')
const initDialog = (data) => { const initDialog = (data) => {
console.log('initDialog', data) console.log('initDialog', data)
...@@ -105,7 +116,68 @@ export default { ...@@ -105,7 +116,68 @@ export default {
// 获取组数据 // 获取组数据
personList.value = data.perrsonList || [] 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) => { const handleClick = (data) => {
console.log('handleClick', data) console.log('handleClick', data)
...@@ -117,20 +189,37 @@ export default { ...@@ -117,20 +189,37 @@ export default {
const isLoading = ref(false) const isLoading = ref(false)
const clickSearch = () => { const clickSearch = () => {
// isLoading const parmas = {
/* clusterResultApi.updatePerson(formData.value).then( person_unid: currentPerson.value.person_unid,
(r) => { pic_type: 2,
if(r.msg_code==200){
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({ ElMessage({
message: `保存成功`, message: `查询失败`,
type: 'success' type: 'error'
}) })
// 刷新列表
emit('refresh')
onCancel()
}
} }
) */ }).finally(() => {
isLoading.value = false
})
}; };
return { return {
...@@ -144,6 +233,13 @@ export default { ...@@ -144,6 +233,13 @@ export default {
clickSearch, clickSearch,
isLoading, isLoading,
currentPerson, currentPerson,
formatImgUrl,
selectedImgList,
handleSelectImg,
isSelectedImg,
handleAddGroup,
addGroupLoading,
}; };
}, },
}; };
...@@ -153,12 +249,31 @@ export default { ...@@ -153,12 +249,31 @@ export default {
.seart-part { .seart-part {
margin-bottom: 10px; margin-bottom: 10px;
} }
.content-part {
display: flex;
}
.left-part { .left-part {
width: 400px; width: 400px;
height: 560px; height: 560px;
overflow: auto; overflow: auto;
//border: solid 1px black;
margin-right: 10px;
}
.right-part {
flex: 1;
height: 560px;
overflow: auto;
} }
.actived{ .actived{
border: 3px solid red; border: 3px solid red;
} }
.classBox{
border: solid 1px black;
overflow-y: hidden;
margin: 0;
padding: 10px;
height: auto;
margin-bottom: 10px;
}
</style> </style>
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResultApi.js
...@@ -80,6 +80,15 @@ class ClusterResultApi { ...@@ -80,6 +80,15 @@ class ClusterResultApi {
} }
) )
} }
updateRecognition(data) {
return axiosInstance.request(
{
method: 'POST',
url: `/faceRecognitions/updateRecognition`,
data: data
}
)
}
} }
const clusterResultApi = new ClusterResultApi() const clusterResultApi = new ClusterResultApi()
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!