DetailDialogComparisonNew.vue

<template>
  <a-modal
    title="特征对比"
    v-model:visible="isVisible"
    width="1500px"
    class="detail-modal"
    style="top: 50px"
    :body-style="{
        padding:'10px 20px'
    }"
  >
    <div>
        <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>
                    <span class="el-icon-document  downloadFile" @click="downloadFile(detailData,$event)"></span>
                    <div>时间:{{ detailData.counttime }}</div>
                    <div>人员类型:{{ detailData.person_type==1?'店员':'顾客' }}</div>
                    <div class="direction" :class="'direction'+detailData.direction">方向:{{ formatDirection(detailData.direction) }}</div>
                    <div>地点:{{ detailData.gate_name }}</div>
                </div>
            </a-col>
            <a-col :span='20'>
                <div v-loading='isLoadingTop' class='rowBox'>
					<div v-for="list in comparisonNewList" class="singleBox">
						<p class="title" v-if="list.data.length">
						    <span style="margin-left: 5px;">{{list.data[0].person_unid}}</span>
						    <span style="margin-left: 25px;">共{{list.data.length}}张</span>
							<span class="shrink" v-if="list.show==1" @click="changeShowFun(list,2)">收起</span>
							<span class="shrink" v-else @click="changeShowFun(list,1)">展开</span>
						</p>
						<a-row class='rowAllBox' v-show='list.show==1'>
						    <a-col class='colItem' :span="4" v-for="(item,index) in list.data" :key='index'>
						        <div style="margin: 0 5px" class="itemBox">
						            <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?(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>
						        </div>
						    </a-col>
						</a-row>
					</div>
                </div>
            </a-col>
        </a-row>
    </div>
    <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 {isArray } from '@/PublicUtil/Judgment'
import comparsionResultApi from '@/views/ComparisonCapturedPictures/api'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import imgDialog from '../SnapshotCluster/imgDialog.vue'
import imgOtherDialog from "./imgOtherDialog.vue";
export default {
	components:{
		imgDialog,
        imgOtherDialog
	},
  setup() {
    const isVisible = ref(false);
    const isLoadingTop = ref(false);
    const isLoadingBottom = ref(false);
    const detailData = ref({});
    const dataListLeft = ref([])
    const dataListRight = ref([])
	const comparisonList = ref([])
	const comparisonNewList = ref([])
	const imgModelRef = ref();
    const imgOtherDialogRef = ref();
	watch(comparisonList,(newVal,oldVal)=>{
		comparisonNewList.value = []
		newVal.forEach(item=>{
			comparisonNewList.value.push({
				show:1,
				data:item
			})
		})
	},{deep:true})
    const initDialog = (record,parmas) => {
      detailData.value = record;
      isVisible.value = true;
	  comparisonList.value = []
	  parmas.dataList.forEach(item=>{
		  isLoadingTop.value = true
		  let parmasObj = {
		      mall_id:parmas.mall_id,
		      picType:parmas.picType,
		      pic_id:parmas.pic_id,
		      countdate:parmas.countdate,
		      personList:item.perrsonList
		  }
		  comparsionResultApi.getPersonContrastList(parmasObj).then((r) => {
		      isLoadingTop.value = false
		          if (r.data&&isArray(r.data.personList)) {
		             if(r.data.personList.length>0){
		                 comparisonList.value.push(r.data.personList)
		             }
		          }
		      }
		  )
	  })
    };
	const changeShowFun=function(data,val){
		data.show=val
	}
    const formatDirection = function(number) {
        switch (number) {
            case 1: {
                return '进'
            }
            case -1: {
                return '出'
            }
            case 0: {
                return '横穿'
            }
            default: {
    
                break
            }
        }
    }
    const onCancel = () => {
      isVisible.value = false;
    };
    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 clickItem = function(data){
		clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => {
			imgModelRef.value.initDialog(data.unid, data.picture_url, r.data);
		})
	}
    return {
        isVisible,
        detailData,
        onCancel,
        dataListLeft,
        dataListRight,
        initDialog,
        formatDirection,
        isLoadingTop,
        isLoadingBottom,
        downloadFile,
		comparisonList,
		comparisonNewList,
		changeShowFun,
		clickItem,
		imgModelRef,
        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;
    }
    .rowBox{
        height: 700px;
        overflow-y: auto;
    }
	.singleBox{
		border : 2px dashed #ccc;
		padding: 0 5px;
		margin-bottom: 15px;
		p{
			padding-bottom: 0;
			height: 32px;
			line-height: 32px;
            margin-bottom: 0;
		}
	}
    .itemBox{
        position: relative;
        .downloadFile{
           position: absolute;
           color: #1890ff;
           font-size: 32px;
           top: 0;
           left: 120px;
           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;
    }
	.shrink{
		float:right;
		margin-right: 25px;
		cursor: pointer;
		color: #1890ff;
	}
</style>