singleImgComparisonDialog.vue

<template>
	<a-modal title="单张图片特征对比" v-if='isVisible' v-model:visible="isVisible" width="1066px" height='90%'
		class="detail-modal">
		<el-row :gutter="20">
			<el-col :span="12" 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>
						<span class="el-icon-picture-outline  openImage" @click="openImage(item,$event)"></span>
						<p class="featureNum">{{(item.featureNum).toFixed(2)}}</p>
						<div>时间:{{ item.counttime }}</div>
						<div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div>
						<div class="direction" :class="'direction'+item.direction">方向:{{ 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="12" class='imgBox1' v-loading='isLoading1'>
				<p class="title">
					<span class="name">特征比对</span>
					<span class="num">{{comparisonList&&comparisonList.length > 0?comparisonList[0].numLength:0}}张</span>
				</p>
				<el-row class="imgBox1_top">
					<el-row :gutter="10" v-for="(one,ind) in comparisonList" style="width: 100%;border-radius: 5px;border:1px solid #ccc;margin: 0px 0px 5px!important;">
						<div style="height: 30px;line-height: 30px;width: 100%;padding-left: 5px;margin-bottom: 5px;">
							{{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-document  downloadFile" @click="downloadFile(item,$event)"></span>
							<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
							<div>时间:{{ item.counttime }}</div>
							<div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div>
							<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div>
							<div>地点:{{ item.gate_name }}</div>
						</el-col>
					</el-row>
					<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-picture-outline  openImage" @click="openImage(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>
				    <div>时间:{{ item.counttime }}</div>
                    <div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div>
				    <div class="direction" :class="'direction'+item.direction">方向:{{ 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>
	<imgOtherDialog ref="imgOtherDialogRef"></imgOtherDialog>
</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'
	import imgOtherDialog from "../ComparisonCapturedPictures/imgOtherDialog.vue";
	export default {
		components: {
			imgDialog,
			imgOtherDialog
		},
		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 imgOtherDialogRef = 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 = []
				reComparisonList.value = []
				let par = {
			    person_unid:data.person_unid,
			    pic_type:data.pic_type,
			    countdate:data.countdate,
			    pic_id:data.pic_id,
			    ip:data.ip,
			    plaza_id:data.plaza_id,
				}
				featureApi.getPersonContrastList(par).then((r1) => {
					isLoading.value = false
					if (r1.data && isArray(r1.data.personList)) {
						r1.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 = r1.data.personList
					}
				})
				comparisonList.value = []
				featureApi.getAllPersonContrastList(data).then((r) => {
					isLoading1.value = false
					if (isArray(r.data)) {
						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
										}
										if (one.features_url) {
											one.features_url = window._baseImgUrl + one.features_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) => {
							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) {
				console.log(data)
				clusterResultApi.getBodyPoint({
					'feature_url': data.features_url
				}).then((r) => {
					imgModelRef.value.initDialog(data.unid, 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 openImage = function(item, event) {
				event.stopPropagation()
				if (item.features_url) {
					let url = item.picture_url
					imgOtherDialogRef.value.initDialog(url.split('0.jpg')[0] + '1.jpg')
				} 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,
				openImage,
				imgOtherDialogRef
			};
		},
	};
</script>
<style lang="less" scoped>
	.single-image {
		height: 200px;
		width: 150px;
		cursor: pointer;
	}

	.direction {
		font-weight: 900;
		background-color: red;
		color: white;
	}

	.direction1 {
		background-color: green;
	}

	.direction0 {
		background-color: orange;
	}

	.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;
		}

		.openImage {
			position: absolute;
			color: #1890ff;
			font-size: 32px;
			top: 0;
			left: 90px;
			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>