batchesResultDialog.vue

<template>
	<a-modal
	  title="同组客流"
	  v-model:visible="isVisible"
	  width="1500px"
	  height='88%'
	  class="detail-modal"
	>
		<div v-loading="isLoading">
			<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>
								<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">unid：{{ detailData.unid||'--' }}</div>
								<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">personid：{{ detailData.person_unid||'--' }}</div>
								<div>时间：{{ detailData.counttime }}</div>
								<div>类型：{{ detailData.person_type==1?'店员':(detailData.person_type==0?'顾客':'未知') }}({{ detailData.childAdult==1?'成人':(detailData.childAdult==0?'儿童':'未知') }})</div>
								<div>性别：{{ formatGender(detailData.gender) }}({{detailData.age}})</div>
								<div>地点：{{ detailData.gate_name }}</div>
						</div>
				</a-col>
				<a-col :span='20'>
					<div class="resultContent" :style="{'height':contentHeight+'px'}">
						<div v-for="person in dataList">
							<div class="classBox" :class="person.expand?'expand':''">
								<div :class="person.checked?'checked':''">
									<div class="boxInfo">
										<span class="iconExpand" v-show="!person.expand">▶</span>
										<span class="iconExpand" v-show="person.expand">▼</span>
										<span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
										<span style="margin-left: 4px;">批次id：{{ '   ' + person.batchId }}</span>
										<span style="margin-left: 20px;">图片数量：{{ person.faceRecognitionVoList.length }}</span>
									</div>
									<el-row v-for="row in getPagedList(person.faceRecognitionVoList, 6)">
										<el-col :span="4" v-for="item in row">
											<div style="margin: 0 2px;border: 3px solid transparent;border-radius: 2px;border: 3px solid #ffffff!important;" :style="{'background': item.showColor?item.showColor:''}">
												<el-image :src="item.picture_url" :fit="'fill'" class="single-image" style="background: #ffffff;">
												</el-image>
												<div style="padding-left: 5px;padding-right: 5px;">
													<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">unid：{{ item.unid||'--' }}</div>
													<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">personid：{{ item.person_unid||'--' }}</div>
													<div>时间：{{ item.counttime }}</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>地点：{{ item.gate_name }}</div>
												</div>
											</div>
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
						<a-empty v-if='!isLoading&&dataList.length==0' style='margin: 0 auto;'></a-empty>
					</div>
				</a-col>
			</a-row>
		</div>
		<template #footer>
		  <a-button @click="onCancel">返回</a-button>
		</template>
	</a-modal>
</template>

<script>
	import {
		ref,
	} from 'vue'
	import batchesResultApi from '@/views/SnapshotCluster/batchesResultDialog/batchesResultDialogApi'
	import {
		getPagedList
	} from '@/PublicUtil/PublicUtil'
	export default {
		components: {
		},
		setup() {
			const isVisible = ref(false);
			const isLoading = ref(false);
			const detailData = ref({});
			const dataList = ref([])
			const colors = ref(['#1cd389',  '#ffc751', '#ff6e73', '#8683e6', '#d83965',"#87D14B", "#FF9631", '#9036aa', '#4054af', '#97c05c']);

			const initDialog = (record,parmas) => {
				detailData.value = record;
				isVisible.value = true;
				dataList.value = []
				isLoading.value = true
				batchesResultApi.getBatchesResultList(parmas).then(
					(r) => {
						isLoading.value = false
						console.log(12341,r.data)
						if(r.data) {
							sortDataList(r.data)
							r.data.forEach((itemPerson) => {
								itemPerson.expand = false
								itemPerson.faceRecognitionVoList.forEach((item) => {
									if (item.picture_url) {
										item.picture_url = window._baseImgUrl + item.picture_url
									}
									if (item.features_url) {
										item.features_url = window._baseImgUrl + item.features_url
									}
									item.showColor = ''
									if(itemPerson.personUnids.length>1) {
										for(let a=0;a<itemPerson.personUnids.length;a++) {
											if(itemPerson.personUnids[a]==item.person_unid){
												item.showColor = colors.value[a]?colors.value[a]:'#4fb9d1';
												break;
											}
										}
									}
								})
							})
							dataList.value = r.data
						}
					}
				)
			}
			const formatGender = function(number) {
				switch (number) {
					case 1: {
						return '男'
					}
					case -1: {
						return '未知'
					}
					case 0: {
						return '女'
					}
					default: {

						break
					}
				}
			}
			const sortDataList = function(list) {
				list.sort(
					(a, b) => {
						return (b.faceRecognitionVoList.length - a.faceRecognitionVoList.length)
					}
				)
			}
			const expandChange = function(data) {
				dataList.value.forEach(item => {
					if (data.batchId == item.batchId) {
						item.expand = !item.expand
					}
				})
			}
			const onCancel = () => {
			  isVisible.value = false;
			};
			const contentHeight = ref(0)
			const __main = function() {
					contentHeight.value = window.innerHeight - 310
			}
			__main()
			return {
				contentHeight,
				sortDataList,
				expandChange,
				colors,
				isLoading,
				dataList,
				getPagedList,
				formatGender,
				isVisible,
				detailData,
				onCancel,
				initDialog,
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "./batchesResultDialog";

	.actived {
		border: 3px solid #1890ff!important;
	}

	.checkBox {
		margin-left: 10px;
	}

	.boxInfo {
		line-height: 28px;
		margin-bottom: 10px;
	}

	.classBox {
		margin: 10px 0;
		border: solid 1px black;
		height: 485px;
		overflow-y: hidden;
	}

	.expand {
		height: auto;
		overflow: auto;
	}

	.expandWord {
		color: #1890ff;
		margin-right: 5px;
		cursor: pointer;
		float: right;
	}

	.iconExpand {
		cursor: pointer;
		float: right;
		color: #1890ff;
		margin-right: 20px;
	}

	.checked {
		background-color: #bbb;
	}

	.resultContent {
		overflow: auto;
		min-height: 500px;
	}

	.downBtn {
		color: #409EFF;
		font-size: 15px;
		cursor: pointer;
		display: inline-block;
		width: auto;
	}

	.downBtn1 {
		float: right;
	}
</style>