showallDialog.vue
3.62 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
108
109
110
111
112
113
114
115
116
117
118
<template>
<el-dialog
:visible.sync="isShow"
class="manage-dialog xy-dialog track-dialog"
:close-on-click-modal="false"
:title="$t('dialog.showAllPic')"
:before-close="closeDialog">
<div>
<el-scrollbar class="track-list-scrollbar" wrap-class="list-scrollbar" :native="false" style="height: 100%; height: 600px; max-height: 600px;">
<ul class="img-container">
<li v-for="(item, index) in imgList" :key="index" class="catch-item">
<img :src="item.catchpic" class="catch-img" :onerror="defaultImg" />
<p>{{ item.catchtime }}</p>
</li>
<li v-if="imgList.length == 0" class="nodata-item">{{ noData }}</li>
</ul>
</el-scrollbar>
</div>
</el-dialog>
</template>
<script>
import defaultImg from '@/assets/img/behavior/default.png'
export default {
data() {
return {
isShow: false,
imgList: [],
noData: '',
defaultImg: 'this.src="' + defaultImg + '"',
}
},
methods: {
dialogInit(personUnid, param) {
this.isShow = true;
this.noData = 'loading...';
this.imgList = [];
this.$api.flowReport.captureRecord({
mallId: param.asis_org,// param.asis_org
// orgType: 'mall',
personUnid: personUnid,
countdate: param.asis_time
})
.then(res => {
let result = res.data;
result.data.forEach(item => {
const dateStr = item.counttime.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$1$2$3')
this.imgList.unshift({
catchtime: item.counttime,
catchpic: this.dealImg(item)
})
})
this.noData = this.imgList.length === 0 ? '已开启隐私模式，无图片' : '';
})
.catch(err => {
this.catchErrorHandle(err)
})
},
dealDate(counttime, fmt = "$1$2$3") {
return counttime.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, fmt);
},
dealImg(item) {
const { dealDate } = this;
let imageUrl = "";
if (item.bodyPic) {
imageUrl = item.bodyPath && item.bodyPic
? item.bodyPath + item.bodyPic
: `body/${dealDate(item.counttime)}/${item.channelSerialnum}/${item.bodyPic}`
} else {
// if (item.facePath && item.facePic) {
imageUrl = item.facePath && item.facePic
? item.facePath + item.facePic
: `/face/${dealDate(item.counttime)}/${item.channelSerialnum}/${item.facePic}`
}
return window._vionConfig.picUrl + "/picture/" + imageUrl;
},
closeDialog() {
this.isShow = false;
this.imgList = [];
}
}
}
</script>
<style scoped>
.img-container:after
.img-container:before {
content: '';
display: table;
}
.img-container:after {
clear: both;
}
.img-container {
/* max-height: 400px;
overflow-x: hidden;
overflow-y: auto; */
}
.catch-item {
float: left;
padding: 14px;
text-align: center;
}
.nodata-item {
text-align: center;
font-size: 16px;
}
.catch-img {
height: 150px;
width: 105px;
}
</style>