singleImgComparisonDialog.vue

<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>人员类型:{{ 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="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>人员类型:{{ 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='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>人员类型:{{ 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>
</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 = []
        reComparisonList.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;
	}
    .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;
	    }
	    .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>