Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 5140abf0 by 李君
Options

优化

1 parent fbf79020
Inline Side-by-side
Showing 2 changed files with 488 additions and 0 deletions
src/views/ComparisonCapturedPictures/DetailDialogComparisonNew.vue 0 → 100644
<template>
<a-modal
title="特征对比"
v-model:visible="isVisible"
width="1500px"
class="detail-modal"
>
<div>
<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>
<span class="el-icon-document downloadFile" @click="downloadFile(detailData,$event)"></span>
<div>时间:{{ detailData.counttime }}</div>
<div>方向:{{ formatDirection(detailData.direction) }}</div>
<div>地点:{{ detailData.gate_name }}</div>
</div>
</a-col>
<a-col :span='20'>
<div v-loading='isLoadingTop' class='rowBox'>
<div v-for="list in comparisonNewList" class="singleBox">
<p class="title" v-if="list.data.length">
<span style="margin-left: 5px;">{{list.data[0].person_unid}}</span>
<span style="margin-left: 25px;">共{{list.data.length}}张</span>
<span class="shrink" v-if="list.show==1" @click="changeShowFun(list,2)">收起</span>
<span class="shrink" v-else @click="changeShowFun(list,1)">展开</span>
</p>
<a-row class='rowAllBox' v-show='list.show==1'>
<a-col class='colItem' :span="4" v-for="(item,index) in list.data" :key='index'>
<div style="margin: 0 5px" class="itemBox">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'>
</el-image>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span>
<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
<div>时间:{{ item.counttime }}</div>
<div>方向:{{ formatDirection(item.direction) }}</div>
<div>地点:{{ item.gate_name }}</div>
</div>
</a-col>
</a-row>
</div>
</div>
</a-col>
</a-row>
</div>
<template #footer>
<a-button @click="onCancel">返回</a-button>
</template>
</a-modal>
<imgDialog ref='imgModelRef'></imgDialog>
</template>
<script>
import { reactive, ref,watch } from "vue";
import {isArray } from '@/PublicUtil/Judgment'
import comparsionResultApi from '@/views/ComparisonCapturedPictures/api'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import imgDialog from '../SnapshotCluster/imgDialog.vue'
export default {
components:{
imgDialog
},
setup() {
const isVisible = ref(false);
const isLoadingTop = ref(false);
const isLoadingBottom = ref(false);
const detailData = ref({});
const dataListLeft = ref([])
const dataListRight = ref([])
const comparisonList = ref([])
const comparisonNewList = ref([])
const imgModelRef = ref();
watch(comparisonList,(newVal,oldVal)=>{
comparisonNewList.value = []
newVal.forEach(item=>{
comparisonNewList.value.push({
show:1,
data:item
})
})
},{deep:true})
const initDialog = (record,parmas) => {
detailData.value = record;
isVisible.value = true;
comparisonList.value = []
parmas.dataList.forEach(item=>{
isLoadingTop.value = true
let parmasObj = {
mall_id:parmas.mall_id,
picType:parmas.picType,
pic_id:parmas.pic_id,
countdate:parmas.countdate,
personList:item.perrsonList
}
comparsionResultApi.getPersonContrastList(parmasObj).then((r) => {
isLoadingTop.value = false
if (r.data&&isArray(r.data.personList)) {
if(r.data.personList.length>0){
comparisonList.value.push(r.data.personList)
}
}
}
)
})
};
const changeShowFun=function(data,val){
data.show=val
}
const formatDirection = function(number) {
switch (number) {
case 1: {
return '进'
}
case -1: {
return '出'
}
case 0: {
return '横穿'
}
default: {
break
}
}
}
const onCancel = () => {
isVisible.value = false;
};
const downloadFile = function(item,event){
event.stopPropagation()
if(item.features_url){
window.open(item.features_url)
}else{
ElMessage(
{
message: `该图片没有特征`,
type: 'warning'
}
)
return
}
}
const clickItem = function(data){
clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => {
imgModelRef.value.initDialog(data.picture_url,r.data);
})
}
return {
isVisible,
detailData,
onCancel,
dataListLeft,
dataListRight,
initDialog,
formatDirection,
isLoadingTop,
isLoadingBottom,
downloadFile,
comparisonList,
comparisonNewList,
changeShowFun,
clickItem,
imgModelRef
};
},
};
</script>
<style lang="less" scoped>
.single-image {
height: 200px;
width: 150px;
cursor: pointer;
}
.rowBox{
height: 600px;
overflow-y: auto;
}
.singleBox{
border : 2px dashed #ccc;
padding: 0 5px;
margin-bottom: 15px;
p{
padding-bottom: 0;
height: 32px;
line-height: 32px;
}
}
.itemBox{
position: relative;
.downloadFile{
position: absolute;
color: #1890ff;
font-size: 32px;
top: 0;
left: 120px;
cursor: pointer;
}
}
.featureNum{
position: absolute;
top: 0;
left: 15px;
color: red;
font-weight: 900;
font-size: 16px;
}
.shrink{
float:right;
margin-right: 25px;
cursor: pointer;
color: #1890ff;
}
</style>
src/views/SnapshotCluster/singleImgComparisonDialog.vue 0 → 100644
<template>
<a-modal
title="特征对比"
v-if='isVisible'
v-model:visible="isVisible"
width="1600px"
height='90%'
class="detail-modal"
>
<el-row :gutter="20">
<el-col :span="8" class='imgBox1' v-loading='isLoading'>
<p class="title">
<span class="name">现在聚类</span>
<span class="id">{{detailData.person_unid}}</span>
<span class="num">{{featureList.length}}张</span>
</p>
<el-row :gutter="10" class="imgBox1_top">
<el-col :span="8" class="itemBox" v-for="item in featureList">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'>
</el-image>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span>
<p class="featureNum">{{(item.featureNum).toFixed(2)}}</p>
<div>时间:{{ item.counttime }}</div>
<div>方向:{{ formatDirection(item.direction) }}</div>
<div>地点:{{ item.gate_name }}</div>
</el-col>
<a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty>
</el-row>
</el-col>
<el-col :span="8" class='imgBox1' v-loading='isLoading1'>
<p class="title">
<span class="name">特征比对</span>
<span class="num">{{comparisonList.length}}张</span>
</p>
<el-row :gutter="10" class="imgBox1_top">
<el-col :span="8" class="itemBox" v-for="item in comparisonList">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'>
</el-image>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span>
<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
<div>时间:{{ item.counttime }}</div>
<div>方向:{{ formatDirection(item.direction) }}</div>
<div>地点:{{ item.gate_name }}</div>
</el-col>
<a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty>
</el-row>
</el-col>
<el-col :span="8" class='imgBox1' v-loading='isLoading2'>
<p class="title">
<span class="name">重提特征后比对</span>
<a-button class="id" type="primary" @click="reComparisonFeature" >重提特征比对</a-button>
<span class="num">{{reComparisonList.length}}张</span>
</p>
<el-row :gutter="10" class="imgBox1_top">
<el-col :span="8" class="itemBox" v-for="item in reComparisonList">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'>
</el-image>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span>
<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
<div>时间:{{ item.counttime }}</div>
<div>方向:{{ formatDirection(item.direction) }}</div>
<div>地点:{{ item.gate_name }}</div>
</el-col>
<a-empty v-if='reComparisonList.length==0' style='margin: 0 auto;'></a-empty>
</el-row>
</el-col>
</el-row>
<template #footer>
<a-button @click="onCancel">返回</a-button>
</template>
</a-modal>
<imgDialog ref='imgModelRef'></imgDialog>
</template>
<script>
import { reactive, ref, watch } from "vue";
import featureApi from '@/views/FeatureComparisonVerification/api.js'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import {isArray} from '@/PublicUtil/Judgment'
import imgDialog from './imgDialog.vue'
export default {
components:{
imgDialog
},
setup() {
const isVisible = ref(false);
const isLoading = ref(false);
const isLoading1 = ref(false);
const isLoading2= ref(false);
const detailData = ref({});
const featureList = ref([])
const imgModelRef = ref();
const comparisonList = ref([])
const reComparisonList = ref([])
const formatDirection = function(number) {
switch (number) {
case 1: {
return '进'
}
case -1: {
return '出'
}
case 0: {
return '横穿'
}
default: {
break
}
}
}
watch([featureList],(newVal,oldVal)=>{
},{deep:true})
const initDialog = (data) => {
isLoading.value = true;
isLoading1.value = true;
isLoading2.value = false;
detailData.value = data;
featureList.value = []
featureApi.getPersonContrastList(data).then((r) => {
isLoading.value = false
if (r.data&&isArray(r.data.personList)) {
r.data.personList.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
}
})
featureList.value = r.data.personList
}
}
)
comparisonList.value = []
featureApi.getAllPersonContrastList(data).then((r) => {
isLoading1.value = false
if (isArray(r.data)) {
if(r.data.length>0){
r.data.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
}
})
comparisonList.value = r.data
}
}
}
)
isVisible.value = true;
};
const clickItem = function(data){
clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => {
imgModelRef.value.initDialog(data.picture_url,r.data);
})
}
const reComparisonFeature = function(){
isLoading2.value = true
reComparisonList.value = []
featureApi.getNewPersonContrastList(detailData.value).then((r) => {
isLoading2.value = false
if (isArray(r.data)) {
if(r.data.length>0){
r.data.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
}
})
reComparisonList.value = r.data
}
}
}
)
}
const downloadFile = function(item,event){
event.stopPropagation()
if(item.features_url){
window.open(item.features_url)
}else{
ElMessage(
{
message: `该图片没有特征`,
type: 'warning'
}
)
return
}
}
const onCancel = () => {
isVisible.value = false;
};
return {
isVisible,
onCancel,
initDialog,
isLoading,
isLoading1,
isLoading2,
detailData,
featureList,
formatDirection,
downloadFile,
clickItem,
imgModelRef,
comparisonList,
reComparisonList,
reComparisonFeature
};
},
};
</script>
<style lang="less" scoped>
.single-image {
height: 200px;
width: 150px;
cursor: pointer;
}
.title{
height: 32px;
line-height: 32px;
padding: 0;
.name{
font-weight: 900;
font-size: 18px;
}
.id{
margin-left: 20px;
}
.num{
float: right;
margin-right: 15px;
}
}
.imgBox1{
// border-left: 10px solid #efefef;
box-sizing: border-box;
min-height: 100%;
.itemBox{
position: relative;
}
.downloadFile{
position: absolute;
color: #1890ff;
font-size: 32px;
top: 0;
right: 10px;
cursor: pointer;
}
.featureNum{
position: absolute;
top: 0;
left: 15px;
color: red;
font-weight: 900;
font-size: 16px;
}
}
.imgBox1_top{
min-height: 400px;
max-height: 600px;
overflow-y: auto;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!