DetailDialogComparison.vue 8.53 KB
<template>
  <a-modal
    title="特征对比"
    v-model:visible="isVisible"
    width="1500px"
    class="detail-modal"
  >
    <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">
                    </el-image>
                    <span class="el-icon-document  downloadFile" @click="downloadFile(detailData,$event)"></span>
                    <div>时间:{{ detailData.counttime }}</div>
                    <div>方向:{{ formatDirection(detailData.direction) }}</div>
                    <div>地点:{{ detailData.gate_name }}</div>
                </div>
            </a-col>
            <a-col :span='20'>
                <div v-loading='isLoadingTop' class='rowBox'>
                    <p v-if="dataListLeft">
                        上方
                        <span v-if="dataListLeft.length" style="margin-left: 25px;">{{dataListLeft[0].person_unid}}</span>
                        <span v-if="dataListLeft.length" style="float: right;margin-right: 25px;">{{dataListLeft.length}}</span>
                    </p>
                    <a-row class='rowAllBox'>
                        <a-col class='colItem' :span="4" v-for="(item,index) in dataListLeft" :key='index'>
                            <div style="margin: 0 5px" class="itemBox">
                                <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                                </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>方向:{{ formatDirection(item.direction) }}</div>
                                <div>地点:{{ item.gate_name }}</div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div v-loading='isLoadingBottom' class='rowBox'>
                    <p v-if="dataListRight">
                        下方
                        <span v-if="dataListRight.length" style="margin-left: 25px;">{{dataListRight[0].person_unid}}</span> 
                        <span v-if="dataListRight.length" style="float: right;margin-right: 25px;">{{dataListRight.length}}</span>
                    </p>
                    <a-row  class='rowAllBox'>
                        <a-col class='colItem' :span="4" v-for="(item,index) in dataListRight" :key='index'>
                            <div style="margin: 0 5px" class="itemBox">
                                <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                                </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>方向:{{ formatDirection(item.direction) }}</div>
                                <div>地点:{{ item.gate_name }}</div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </a-col>
        </a-row>
    </div>
    <template #footer>
      <a-button @click="onCancel">返回</a-button>
    </template>
  </a-modal>
  <imgOtherDialog ref="imgOtherDialogRef" />
</template>

<script>
import { reactive, ref } from "vue";
import {isArray } from '@/PublicUtil/Judgment'
import comparsionResultApi from '@/views/ComparisonCapturedPictures/api'
import imgOtherDialog from "./imgOtherDialog.vue";
export default {
    components: {
      imgOtherDialog
    },
  setup() {
    const isVisible = ref(false);
    const isLoadingTop = ref(false);
    const isLoadingBottom = ref(false);
    const detailData = ref({});
    const dataListLeft = ref([])
    const dataListRight = ref([])
    const imgOtherDialogRef = ref()
    const initDialog = (record,parmas) => {
      detailData.value = record;
      isVisible.value = true;
      dataListLeft.value = []
      dataListRight.value = []
      if(parmas.persionlistLeft.length>0){
          isLoadingTop.value = true
          // 左侧
          let parmasObj = {
              mall_id:parmas.mall_id,
              picType:parmas.picType,
              pic_id:parmas.pic_id,
              countdate:parmas.countdate,
              personList:parmas.persionlistLeft
          }
          comparsionResultApi.getPersonContrastList(parmasObj).then((r) => {
              isLoadingTop.value = false
                  if (r.data&&isArray(r.data.personList)) {
                     if(r.data.personList.length>0){
                         dataListLeft.value = r.data.personList
                         console.log(r.data)
                     }
                  }
              }
          )
      }
      if(parmas.persionlistRight.length>0){
          isLoadingBottom.value = true
          let parmasObj = {
              mall_id:parmas.mall_id,
              picType:parmas.picType,
              pic_id:parmas.pic_id,
              countdate:parmas.countdate,
              personList:parmas.persionlistRight
          }
          //右侧
          comparsionResultApi.getPersonContrastList(parmasObj).then((r) => {
              isLoadingBottom.value = false
                  if (r.data&&isArray(r.data.personList)) {
                     if(r.data.personList.length>0){
                         dataListRight.value = r.data.personList
                     }
                  }
              }
          )
      }
      
      
    };
    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
        }
    }

    return {
        isVisible,
        detailData,
        onCancel,
        dataListLeft,
        dataListRight,
        initDialog,
        formatDirection,
        isLoadingTop,
        isLoadingBottom,
        downloadFile,
        openImage,
        imgOtherDialogRef
    };
  },
};
</script>
<style lang="less" scoped>
    .single-image {
        height: 200px;
        width: 150px;
    }
    .rowBox{
        border : 2px dashed #ccc;
        padding: 0 5px;
        margin-bottom: 15px;
        
    }
    .rowAllBox{
        height: 350px;
        overflow-y: auto;
    }
    .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;
    }
    .dialogImg{
        /deep/.el-dialog--center .el-dialog__body{
            text-align: center;
        }
    }
</style>