DetailDialog.vue 3.27 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">
                    <el-image :src="detailData.picture_url" :fit="'fill'" class="single-image">
                    </el-image>
                    <div>时间:{{ detailData.counttime }}</div>
                    <div>方向:{{ formatDirection(detailData.direction) }}</div>
                    <div>地点:{{ detailData.gate_name }}</div>
                </div>
            </a-col>
            <a-col :span='20'>
                <a-row v-for="(row,index) in dataList" :key='index' class='rowBox'>
                    <p>{{row.name}}  {{row.shopname}}</p>
                    <a-col :span="6" v-for="item in row.personList" class='itemBox' :key='item.id'>
                        <div style="margin: 0 5px">
                            <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                            </el-image>
                            <p class="featureNum">{{item.featureNum}}</p>
                            <div>时间:{{ item.counttime }}</div>
                        </div>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </div>
    <template #footer>
      <a-button @click="onCancel">返回</a-button>
    </template>
  </a-modal>
</template>

<script>
import { reactive, ref } from "vue";
import {isArray } from '@/PublicUtil/Judgment'
import comparsionResultApi from '@/views/ComparisonCapturedPictures/api'
export default {
  setup() {
    const isVisible = ref(false);
    const isLoading = ref(false);
    const detailData = 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){
                     dataList.value = r.data
                     console.log(r.data)
                 }
              }
          }
      )
    };
    const formatDirection = function(number) {
        switch (number) {
            case 1: {
                return '进'
            }
            case -1: {
                return '出'
            }
            case 0: {
                return '横穿'
            }
            default: {
    
                break
            }
        }
    }
    const onCancel = () => {
      isVisible.value = false;
    };


    return {
      isVisible,
      detailData,
      onCancel,
      dataList,
      initDialog,
        isLoading,
        formatDirection
    };
  },
};
</script>
<style lang="less" scoped>
    .single-image {
        height: 300px;
        width: 100%;
    }
    .rowBox{
        border : 2px dashed #ccc;
        padding: 0 5px;
        margin-bottom: 15px;
    }
    .itemBox{
        position: relative;
    }
    .featureNum{
        position: absolute;
        top: 0;
        left: 15px;
        color: red;
        font-weight: 900;
        font-size: 16px;
    }
</style>