hitDetailDialog.vue 5.14 KB
<template>
  <a-modal
    title="命中详情"
    v-if="isVisible"
    v-model:visible="isVisible"
    width="1500px"
    :dialog-style="{ top: '20px',height:'90%' }"
    class="detail-modal"
  >
    <div style="height: 700px;overflow-y: auto;">
        <template v-for="person in hitPersonList">
            <div class="classBox" :class="person.expand?'expand':''">
                <div class="boxInfo">
                    <span class="iconExpand" v-show="!person.expand"></span>
                    <span class="iconExpand" v-show="person.expand"></span>
                    <span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
                    人id:{{ '   ' + person.personId }}
                    图片数量:{{ person.count }}
                    <el-radio  class="checkBox" v-model="checked" :label="person.personId">以此为对比项</el-radio>
                    <el-button @click="selectRate(person)" size="mini" type="primary" style="margin-right: 10px;">查询精度</el-button>
                     <span v-if="person.personId==currentpersonId">准确率:{{results.correctRate}}</span>
                     <span v-if="person.personId==currentpersonId" style="margin-left: 10px;">召回率:{{results.recallRate}}</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="3" v-for="item in person.records">
                        <div>
                            <el-image :src="item.picture_url"
                                      :fit="'fill'"
                                      class="single-image" >
                            </el-image>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
    <template #footer>
      <a-button @click="onCancel">返回</a-button>
      <a-button @click="onConfirm" type="primary">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { reactive, ref,toRaw } from "vue";
import {isArray } from '@/PublicUtil/Judgment'
import {ElMessage} from 'element-plus'
import FeatureMatchingAccuracyApi from '@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi'
export default {
  setup(props,context) {
    const isVisible = ref(false);
    const isLoading = ref(false)
    const results=ref({})
    const currentpersonId=ref('')
    const accountId = ref('');
    const mallId = ref('');
    const checked = ref('');
    const hitPersonList = ref([])
    const regId = ref()
    const initDialog = function(parmas) {
        regId.value = parmas.regId
        hitPersonList.value = parmas.data
        checked.value = parmas.checkPersonId
        isVisible.value = true;
    };
    const expandChange = function(data){
        hitPersonList.value.forEach(item=>{
        	if (data.personId == item.personId) {
        		item.expand = !item.expand
        	}
        })
    }
    const refreshParentTable = function(){
        context.emit('refreshParentTable')
    }
    const onCancel = () => {
        isVisible.value = false;
    };
    const onConfirm = function(){
        if(!checked.value){
            ElMessage({
            	message: `请选择对比项`,
            	type: 'warning'
            })
            return false;
        }
        FeatureMatchingAccuracyApi.getMatchHit({
            id:regId.value,
            personUnid:checked.value
        }).then(
            (r) => {
                if(r.msg_code==200){
                    ElMessage({
                    	message: `${r.msg_info}`,
                    	type: 'success'
                    })
                    refreshParentTable()
                    isVisible.value = false;
                }else{
                    ElMessage({
                    	message: `${r.msg_info}`,
                    	type: 'error'
                    })
                }
            }
        )
    }
    const selectRate=(row)=>{
        console.log(row ,regId.value )
        currentpersonId.value=row.personId
        FeatureMatchingAccuracyApi.GetmatchPrecision({
            regId:regId.value,
            personUnid:row.personId
        }).then(res=>{
            console.log(res,'66666')
            results.value=res
        })
    }
    return {
        isVisible,
        selectRate,
        currentpersonId,
        results,
        onCancel,
        onConfirm,
        initDialog,
        hitPersonList,
        expandChange,
        checked,
        refreshParentTable
    };
  },
};
</script>
<style lang="less" scoped>
    .single-image{
        width: 100%;
        height: 220px;
    }
    .boxInfo{
        line-height: 28px;
        margin-bottom: 10px;
    }
    .checkBox{
        margin-left: 15px;
    }
    .classBox{
        margin-bottom: 10px;
        border: solid 1px black;
        height: 265px;
        overflow: hidden;
        padding: 5px;
    }
    .expand{
        height: auto;
        overflow-y: auto;
    }
    .expandWord{
        color: #1890ff;
        margin-right: 5px;
        cursor: pointer;
        float: right;
    }
    .iconExpand{
        cursor: pointer;
        float: right;
        color: #1890ff;
        margin-right: 20px;
    }
</style>