Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 0c999ad4 by 李乾广
Options

修改bug，数据聚类--单张特征对比功能优化

1 parent 57a5e9d7
Inline Side-by-side
Showing 5 changed files with 164 additions and 80 deletions
src/views/FeatureComparisonVerification/api.js
...@@ -17,7 +17,8 @@ class FeatureResultApi { ...@@ -17,7 +17,8 @@ class FeatureResultApi {
return axiosInstance.request( return axiosInstance.request(
{ {
method: 'GET', method: 'GET',
url: `/feature/allPersonContrast`, // url: `/feature/allPersonContrast`,
url: `/feature/allPersonContrastGroup`,
params: filterEmptyValueInObject( params: filterEmptyValueInObject(
data data
) )
......
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
...@@ -630,6 +630,8 @@ export default { ...@@ -630,6 +630,8 @@ export default {
let parmas = { let parmas = {
person_unid:currobj.value.person_unid, person_unid:currobj.value.person_unid,
pic_type:rawData.picType, pic_type:rawData.picType,
endTime:rawData.endTime,
startTime:rawData.startTime,
countdate:formatDate(rawData.date), countdate:formatDate(rawData.date),
pic_id:currobj.value.id, pic_id:currobj.value.id,
ip:window._baseImgUrl, ip:window._baseImgUrl,
......
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.vue
...@@ -105,6 +105,9 @@ ...@@ -105,6 +105,9 @@
<a-form-item style="padding: 5px 0"> <a-form-item style="padding: 5px 0">
<a-button type="primary" @click="comparativeFun">特征对比验证</a-button> <a-button type="primary" @click="comparativeFun">特征对比验证</a-button>
</a-form-item> </a-form-item>
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="singleComparativeFun">单张特征对比</a-button>
</a-form-item>
</a-form> </a-form>
<div v-loading="isLoading"> <div v-loading="isLoading">
...@@ -150,6 +153,7 @@ ...@@ -150,6 +153,7 @@
</div> </div>
<!-- <imgDialog ref='imgModelRef'></imgDialog> --> <!-- <imgDialog ref='imgModelRef'></imgDialog> -->
<DetailDialog ref="DetailDialogRef" /> <DetailDialog ref="DetailDialogRef" />
<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>
</template> </template>
<script> <script>
...@@ -161,10 +165,12 @@ import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/ ...@@ -161,10 +165,12 @@ import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/
// import imgDialog from '../imgDialog.vue' // import imgDialog from '../imgDialog.vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue"; import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
export default { export default {
components:{ components:{
// imgDialog , // imgDialog ,
DetailDialog DetailDialog,
singleImgComparisonDialog
}, },
setup() { setup() {
// scalar // scalar
...@@ -512,6 +518,40 @@ export default { ...@@ -512,6 +518,40 @@ export default {
} }
DetailDialogRef.value.initDialog(currobj.value,parmas); DetailDialogRef.value.initDialog(currobj.value,parmas);
} }
//单张特征对比
const singleImgComparisonRef = ref()
const singleComparativeFun = function(){
if(!currobj.value.id){
ElMessage(
{
message: `请选择图片`,
type: 'warning'
}
)
return
}
if(!currobj.value.picture_url){
ElMessage(
{
message: `该图片没有特征，请选择有效的图片`,
type: 'warning'
}
)
return
}
const rawData = toRaw(queryForm)
let parmas = {
person_unid:currobj.value.person_unid,
pic_type:rawData.picType,
endTime:rawData.endTime,
startTime:rawData.startTime,
countdate:formatDate(rawData.date),
pic_id:currobj.value.id,
ip:window._baseImgUrl,
plaza_id:currobj.value.mall_id
}
singleImgComparisonRef.value.initDialog(parmas);
}
const clickSearch = function() { const clickSearch = function() {
pageNum.value = 1 pageNum.value = 1
confirmSearch() confirmSearch()
...@@ -557,7 +597,9 @@ export default { ...@@ -557,7 +597,9 @@ export default {
clickSearch, clickSearch,
// ref // ref
DetailDialogRef, DetailDialogRef,
imgModelRef imgModelRef,
singleComparativeFun,
singleImgComparisonRef
} }
} }
} }
......
src/views/SnapshotCluster/imgDialog.vue
<template> <template>
<a-modal <a-modal
title="图片" :title="'图片' + ' ' + unidStr"
v-if='isVisible' v-if='isVisible'
v-model:visible="isVisible" v-model:visible="isVisible"
width="1200px" width="1200px"
...@@ -25,8 +25,11 @@ export default { ...@@ -25,8 +25,11 @@ export default {
const imgUrl = ref() const imgUrl = ref()
const canvas = ref() const canvas = ref()
const ctx = ref() const ctx = ref()
const initDialog = (url,data) => { const unidStr = ref('')
const initDialog = (unid,url,data) => {
console.log(unid,url,data,)
imgUrl.value = url imgUrl.value = url
unidStr.value = unid
isVisible.value = true; isVisible.value = true;
setTimeout(()=>{ setTimeout(()=>{
var imgscream=document.getElementById("img"); var imgscream=document.getElementById("img");
...@@ -56,6 +59,7 @@ export default { ...@@ -56,6 +59,7 @@ export default {
initDialog, initDialog,
isLoading, isLoading,
imgUrl, imgUrl,
unidStr,
detailData detailData
}; };
}, },
......
src/views/SnapshotCluster/singleImgComparisonDialog.vue
<template> <template>
<a-modal <a-modal title="单张图片特征对比" v-if='isVisible' v-model:visible="isVisible" width="1066px" height='90%'
title="单张图片特征对比" class="detail-modal">
v-if='isVisible'
v-model:visible="isVisible"
width="1600px"
height='90%'
class="detail-modal"
>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8" class='imgBox1' v-loading='isLoading'> <el-col :span="12" class='imgBox1' v-loading='isLoading'>
<p class="title"> <p class="title">
<span class="name">现在聚类</span> <span class="name">现在聚类</span>
<span class="id">{{detailData.person_unid}}</span> <span class="id">{{detailData.person_unid}}</span>
...@@ -29,15 +23,19 @@ ...@@ -29,15 +23,19 @@
<a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty> <a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="8" class='imgBox1' v-loading='isLoading1'> <el-col :span="12" class='imgBox1' v-loading='isLoading1'>
<p class="title"> <p class="title">
<span class="name">特征比对</span> <span class="name">特征比对</span>
<span class="num">{{comparisonList.length}}张</span> <span class="num">{{comparisonList&&comparisonList.length > 0?comparisonList[0].numLength:0}}张</span>
</p> </p>
<el-row :gutter="10" class="imgBox1_top"> <el-row class="imgBox1_top">
<el-col :span="8" class="itemBox" v-for="item in comparisonList"> <el-row :gutter="10" v-for="(one,ind) in comparisonList" style="width: 100%;">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'> <div style="height: 30px;line-height: 30px;width: 100%;padding-left: 5px;margin-bottom: 5px;">
</el-image> {{one.person_unid}}
<span style="float: right;padding-right: 11px;" v-if="one.personList">{{one.personList.length}}张</span>
</div>
<el-col :span="8" class="itemBox" v-for="(item,index) in one.personList">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'></el-image>
<span class="el-icon-picture-outline openImage" @click="openImage(item,$event)"></span> <span class="el-icon-picture-outline openImage" @click="openImage(item,$event)"></span>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span> <span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span>
<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p> <p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
...@@ -46,10 +44,11 @@ ...@@ -46,10 +44,11 @@
<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>
</el-col> </el-col>
</el-row>
<a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty> <a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="8" class='imgBox1' v-loading='isLoading2'> <!-- <el-col :span="8" class='imgBox1' v-loading='isLoading2'>
<p class="title"> <p class="title">
<span class="name">重提特征后比对</span> <span class="name">重提特征后比对</span>
<a-button class="id" type="primary" @click="reComparisonFeature" >重提特征比对</a-button> <a-button class="id" type="primary" @click="reComparisonFeature" >重提特征比对</a-button>
...@@ -69,25 +68,31 @@ ...@@ -69,25 +68,31 @@
</el-col> </el-col>
<a-empty v-if='reComparisonList.length==0' style='margin: 0 auto;'></a-empty> <a-empty v-if='reComparisonList.length==0' style='margin: 0 auto;'></a-empty>
</el-row> </el-row>
</el-col> </el-col> -->
</el-row> </el-row>
<template #footer> <template #footer>
<a-button @click="onCancel">返回</a-button> <a-button @click="onCancel">返回</a-button>
</template> </template>
</a-modal> </a-modal>
<imgDialog ref='imgModelRef'></imgDialog> <imgDialog ref='imgModelRef'></imgDialog>
<imgOtherDialog ref="imgOtherDialogRef" ></imgOtherDialog> <imgOtherDialog ref="imgOtherDialogRef"></imgOtherDialog>
</template> </template>
<script> <script>
import { reactive, ref, watch } from "vue"; import {
import featureApi from '@/views/FeatureComparisonVerification/api.js' reactive,
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi' ref,
import {isArray} from '@/PublicUtil/Judgment' watch
import imgDialog from './imgDialog.vue' } from "vue";
import imgOtherDialog from "../ComparisonCapturedPictures/imgOtherDialog.vue"; import featureApi from '@/views/FeatureComparisonVerification/api.js'
export default { import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
components:{ import {
isArray
} from '@/PublicUtil/Judgment'
import imgDialog from './imgDialog.vue'
import imgOtherDialog from "../ComparisonCapturedPictures/imgOtherDialog.vue";
export default {
components: {
imgDialog, imgDialog,
imgOtherDialog imgOtherDialog
}, },
...@@ -95,7 +100,7 @@ export default { ...@@ -95,7 +100,7 @@ export default {
const isVisible = ref(false); const isVisible = ref(false);
const isLoading = ref(false); const isLoading = ref(false);
const isLoading1 = ref(false); const isLoading1 = ref(false);
const isLoading2= ref(false); const isLoading2 = ref(false);
const detailData = ref({}); const detailData = ref({});
const featureList = ref([]) const featureList = ref([])
const imgModelRef = ref(); const imgModelRef = ref();
...@@ -119,9 +124,11 @@ export default { ...@@ -119,9 +124,11 @@ export default {
} }
} }
} }
watch([featureList],(newVal,oldVal)=>{ watch([featureList], (newVal, oldVal) => {
},{deep:true}) }, {
deep: true
})
const initDialog = (data) => { const initDialog = (data) => {
isLoading.value = true; isLoading.value = true;
isLoading1.value = true; isLoading1.value = true;
...@@ -129,10 +136,10 @@ export default { ...@@ -129,10 +136,10 @@ export default {
detailData.value = data; detailData.value = data;
featureList.value = [] featureList.value = []
reComparisonList.value = [] reComparisonList.value = []
featureApi.getPersonContrastList(data).then((r) => { featureApi.getPersonContrastList(data).then((r1) => {
isLoading.value = false isLoading.value = false
if (r.data&&isArray(r.data.personList)) { if (r1.data && isArray(r1.data.personList)) {
r.data.personList.forEach((item) => { r1.data.personList.forEach((item) => {
if (item.features_url) { if (item.features_url) {
item.features_url = window._baseImgUrl + item.features_url item.features_url = window._baseImgUrl + item.features_url
} }
...@@ -140,15 +147,33 @@ export default { ...@@ -140,15 +147,33 @@ export default {
item.picture_url = window._baseImgUrl + item.picture_url item.picture_url = window._baseImgUrl + item.picture_url
} }
}) })
featureList.value = r.data.personList featureList.value = r1.data.personList
} }
} })
)
comparisonList.value = [] comparisonList.value = []
featureApi.getAllPersonContrastList(data).then((r) => { featureApi.getAllPersonContrastList(data).then((r) => {
isLoading1.value = false isLoading1.value = false
if (isArray(r.data)) { if (isArray(r.data)) {
if(r.data.length>0){ if (r.data.length > 0) {
let numLength = 0
r.data.forEach((item) => {
if(item.personList&&item.personList.length>0) {
numLength += item.personList.length
item.personList.forEach((one) => {
if (one.picture_url) {
one.picture_url = window._baseImgUrl + one.picture_url
}
})
}
})
r.data[0].numLength = numLength
comparisonList.value = r.data
}
}
/* isLoading1.value = false
console.log(r)
if (isArray(r.data)) {
if (r.data.length > 0) {
r.data.forEach((item) => { r.data.forEach((item) => {
if (item.features_url) { if (item.features_url) {
item.features_url = window._baseImgUrl + item.features_url item.features_url = window._baseImgUrl + item.features_url
...@@ -159,23 +184,25 @@ export default { ...@@ -159,23 +184,25 @@ export default {
}) })
comparisonList.value = r.data comparisonList.value = r.data
} }
} } */
} })
)
isVisible.value = true; isVisible.value = true;
}; };
const clickItem = function(data){ const clickItem = function(data) {
clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => { console.log(data)
imgModelRef.value.initDialog(data.picture_url,r.data); clusterResultApi.getBodyPoint({
'feature_url': data.features_url
}).then((r) => {
imgModelRef.value.initDialog(data.unid, data.picture_url, r.data);
}) })
} }
const reComparisonFeature = function(){ const reComparisonFeature = function() {
isLoading2.value = true isLoading2.value = true
reComparisonList.value = [] reComparisonList.value = []
featureApi.getNewPersonContrastList(detailData.value).then((r) => { featureApi.getNewPersonContrastList(detailData.value).then((r) => {
isLoading2.value = false isLoading2.value = false
if (isArray(r.data)) { if (isArray(r.data)) {
if(r.data.length>0){ if (r.data.length > 0) {
r.data.forEach((item) => { r.data.forEach((item) => {
if (item.features_url) { if (item.features_url) {
item.features_url = window._baseImgUrl + item.features_url item.features_url = window._baseImgUrl + item.features_url
...@@ -187,36 +214,31 @@ export default { ...@@ -187,36 +214,31 @@ export default {
reComparisonList.value = r.data reComparisonList.value = r.data
} }
} }
})
} }
) const downloadFile = function(item, event) {
}
const downloadFile = function(item,event){
event.stopPropagation() event.stopPropagation()
if(item.features_url){ if (item.features_url) {
window.open(item.features_url) window.open(item.features_url)
}else{ } else {
ElMessage( ElMessage({
{
message: `该图片没有特征`, message: `该图片没有特征`,
type: 'warning' type: 'warning'
} })
)
return return
} }
} }
const openImage = function(item,event){ const openImage = function(item, event) {
event.stopPropagation() event.stopPropagation()
if(item.features_url){ if (item.features_url) {
let url = item.picture_url let url = item.picture_url
imgOtherDialogRef.value.initDialog(url.split('0.jpg')[0]+'1.jpg') imgOtherDialogRef.value.initDialog(url.split('0.jpg')[0] + '1.jpg')
}else{ } else {
ElMessage( ElMessage({
{
message: `该图片没有特征`, message: `该图片没有特征`,
type: 'warning' type: 'warning'
} })
)
return return
} }
} }
...@@ -244,7 +266,7 @@ export default { ...@@ -244,7 +266,7 @@ export default {
imgOtherDialogRef imgOtherDialogRef
}; };
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.single-image { .single-image {
...@@ -252,41 +274,51 @@ export default { ...@@ -252,41 +274,51 @@ export default {
width: 150px; width: 150px;
cursor: pointer; cursor: pointer;
} }
.direction{
.direction {
font-weight: 900; font-weight: 900;
background-color: red; background-color: red;
color: white; color: white;
} }
.direction1{
.direction1 {
background-color: green; background-color: green;
} }
.direction0{
.direction0 {
background-color: orange; background-color: orange;
} }
.title{
.title {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
padding: 0; padding: 0;
.name{
.name {
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 18px;
} }
.id{
.id {
margin-left: 20px; margin-left: 20px;
} }
.num{
.num {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
} }
} }
.imgBox1{
.imgBox1 {
// border-left: 10px solid #efefef; // border-left: 10px solid #efefef;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
.itemBox{
.itemBox {
position: relative; position: relative;
} }
.downloadFile{
.downloadFile {
position: absolute; position: absolute;
color: #1890ff; color: #1890ff;
font-size: 32px; font-size: 32px;
...@@ -294,7 +326,8 @@ export default { ...@@ -294,7 +326,8 @@ export default {
right: 10px; right: 10px;
cursor: pointer; cursor: pointer;
} }
.openImage{
.openImage {
position: absolute; position: absolute;
color: #1890ff; color: #1890ff;
font-size: 32px; font-size: 32px;
...@@ -302,7 +335,8 @@ export default { ...@@ -302,7 +335,8 @@ export default {
left: 90px; left: 90px;
cursor: pointer; cursor: pointer;
} }
.featureNum{
.featureNum {
position: absolute; position: absolute;
top: 0; top: 0;
left: 15px; left: 15px;
...@@ -311,7 +345,8 @@ export default { ...@@ -311,7 +345,8 @@ export default {
font-size: 16px; font-size: 16px;
} }
} }
.imgBox1_top{
.imgBox1_top {
min-height: 400px; min-height: 400px;
max-height: 600px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!