DetailDialog.vue 6.5 KB
<template>
  <a-modal
    title="店员特征对比"
    v-model:visible="isVisible"
    width="1500px"
    height='90%'
    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>
                    <span class="el-icon-document  downloadFile" @click="downloadFile(detailData,$event)"></span>
                    <div>时间:{{ detailData.counttime }}</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-for="(row,index) in dataList" :key='index' class='rowBox'>
                    <p>{{row.name}}  {{row.shopname}}</p>
                    <a-row>
                        <a-col :span="4" v-for="item in row.personList" :key='item.id' class='colItem'>
                            <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-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>
                        </a-col>
                    </a-row>
                </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 } 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 isLoading = ref(false);
    const detailData = ref({});
	const imgModelRef = ref();
	const imgOtherDialogRef = ref();
    const dataList = ref([])
    const initDialog = (record,parmas) => {
      detailData.value = record;
      isVisible.value = true;
      dataList.value = []
      isLoading.value = true
      comparsionResultApi.getStaffContrastList(parmas).then((r) => {
          isLoading.value = false
              if (isArray(r.data)) {
                 if(r.data.length>0){
                     r.data.forEach((item) => {
                         item.personList.forEach((item1)=>{
                             if (item1.features_url) {
                                 item1.features_url = window._baseImgUrl + item1.features_url
                             }
                             if (item1.picture_url) {
                                 item1.picture_url = window._baseImgUrl + item1.picture_url
                             }
                         })
                     })
                     dataList.value = r.data
                 }
              }
          }
      )
    };
    const formatDirection = function(number) {
        switch (number) {
            case 1: {
                return '进'
            }
            case -1: {
                return '出'
            }
            case 0: {
                return '横穿'
            }
            default: {
    
                break
            }
        }
    }
	const clickItem = function(data){
		clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => {
			// imgModelRef.value.initDialog(data.picture_url,r.data);
			imgModelRef.value.initDialog(data.unid?data.unid:'', data.picture_url, r.data);
		})
	}
    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
        }
    }
    return {
        isVisible,
        detailData,
        onCancel,
        dataList,
        initDialog,
        isLoading,
        formatDirection,
        downloadFile,
		clickItem,
		imgModelRef,
        imgOtherDialogRef,
        openImage
    };
  },
};
</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{
        border : 2px dashed #ccc;
        padding: 0 5px;
        margin-bottom: 15px;
    }
    .colItem{
        flex: 0 0 20%;
        max-width: 20%;
    }
    .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;
    }
</style>