ClusterResult.vue
2.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<a-modal title="图片详情" v-model:visible="isVisible" width="90%" class="detail-modal" style="top: 50px" :body-style="{padding:'10px 20px'}" :footer="false">
<div class="one-match-content" v-loading="isLoading">
<el-row :gutter="12">
<el-col :span="6" v-for="(item,index) in dataList" :key="index">
<div class="one-match">
<div class="one-match-data">
<span>对比分数: {{ item.matchScore }}</span>
</div>
<div class="one-match-img-data">
<div class="one-match-img-data-one">
<el-image :src="item.srcBodyPic" :fit="'fill'" class="one-match-data-image"></el-image>
<div class="one-match-one-text">person_unid: {{ item.srcPersonUnid }}</div>
<div class="one-match-one-text">unid: {{ item.srcUnid }}</div>
<div class="one-match-one-text">抓拍时间: {{ item.srcCountTime }}</div>
</div>
<div class="one-match-img-data-one">
<el-image :src="item.targetBodyPic" :fit="'fill'" class="one-match-data-image"></el-image>
<div class="one-match-one-text">person_unid: {{ item.targetPersonUnid }}</div>
<div class="one-match-one-text">unid: {{ item.targetUnid }}</div>
<div class="one-match-one-text">抓拍时间: {{ item.targetCountTime }}</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</a-modal>
</template>
<script>
import {
ref,
} from 'vue'
import clusterResultApi from './ClusterResultApi'
export default {
components: {
},
setup() {
const isVisible = ref(false);
const isLoading = ref(false)
const dataList = ref([])
const initDialog = function(data) {
console.log(data)
isVisible.value = true;
isLoading.value = true
clusterResultApi.getPersonDetail(data).then((r) => {
isLoading.value = false
r.data.forEach((item) => {
if (item.targetBodyPic) {
item.targetBodyPic = window._baseImgUrl + item.targetBodyPic
}
if (item.srcBodyPic) {
item.srcBodyPic = window._baseImgUrl + item.srcBodyPic
}
})
dataList.value = r.data
})
}
return {
isVisible,
isLoading,
dataList,
initDialog,
}
}
}
</script>
<style lang="less" scoped>
@import "./ClusterResult";
.one-match-content{
height: 80vh;
padding:0 6px;
overflow-y: auto;
}
.one-match{
padding:0 12px 12px;
border:1px solid #eee;
border-radius: 4px;
margin-bottom: 12px;
}
.one-match-data{
display: flex;
align-items: center;
height: 26px;
font-size: 13px;
}
.one-match-img-data{
display: flex;
align-items: center;
justify-content: space-between;
}
.one-match-img-data-one{
display: inline-block;
width: 49%;
}
.one-match-one-text{
line-height: 20px;
font-size: 13px;
}
.one-match-data-image{
width: 100%;
height:250px;
}
</style>