FeatureMatchingAccuracy.vue

<template>
    <div class="containter">
        <el-row class="contentBox" v-loading="isLoading">
            <el-col :span="7" class="box boxLeft">
                <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
                    <a-form-item label="集团：">
                        <a-select v-model:value="queryForm.account_id" style="width: 150px" :options="accountList" @change="onAccountChange" optionFilterProp="label" show-search>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="广场：">
                        <a-select v-model:value="queryForm.plaza_id" style="width: 150px" :options="plazaList" @change="onMallChange" optionFilterProp="label" show-search>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="btns">
                    <a-button type="primary" @click="confirmSearch" class="btn">搜索</a-button>
                    <a-button type="primary" @click="addPersonFun" class="btn">新增注册人员</a-button>
                    <!-- <a-button type="primary" @click="confirmSearch" class="btn">预览报告</a-button> -->
                </div>
                <el-table :data="resultList" @row-click='clickRow' :highlight-current-row='true' :rowKey="id" :height="contentHeight" style="width: 100%">
                    <el-table-column type="index" align="center" label="序号" width="80">
                        <template #default="scope">
                            <span v-text="getIndex(scope.$index)"> </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="姓名">
                    </el-table-column>
                    <el-table-column prop="regCount" align="center" label="注册图片数量">
                    </el-table-column>
                    <el-table-column prop="hitCount" align="center" label="命中目标数量">
                    </el-table-column>
                    <el-table-column prop="content" align="center" label="操作" width="150">
                        <template #default="scope">
                          <el-button
                          @click.stop
                            @click="editRow(scope.row)"
                            type="text"
                            size="small"
                            class="tab-btn"
                          >编辑</el-button>
                          <el-button
                          @click.stop
                            @click="deleteRow(scope.row)"
                            type="text"
                            size="small"
                            class="tab-btn"
                          >删除</el-button>
                          <el-button
                            @click.stop
                            @click="hitDetail(scope.row)"
                            type="text"
                            size="small"
                            class="tab-btn"
                          >命中详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <a-pagination
                    v-model:current="pageNum"
                    v-model:pageSize="pageSize"
                    :total="total"
                    :show-total="total => `共 ${total} 条`"
                    :pageSizeOptions="['10', '20', '50']"
                    @change="onPageNumChange"
                    @showSizeChange="onPageSizeChange"
                    show-size-changer
                    show-quick-jumper
                    style="text-align:center"
                />
            </el-col>
            <el-col :span="17" class="box boxRight">
                <div style="margin-bottom: 10px;min-height:350px">
                    <a-tabs type="card" v-model:activeKey="activeKey">
                        <a-tab-pane key="1" tab="注册样本" class="regBox">
                            <div>注册样本图：{{regPictureList.length}}</div>
                            <el-row :gutter="10">
                                <el-col :span="3" v-for="item in regPictureList">
                                    <div style="cursor: pointer;" class='hitBox' @click="clickPicture(item)" :class="currentId==item.id?'active':''">
                                        <el-image :src="item.picture_url"
                                                  :fit="'fill'"
                                                  class="single-image">
                                        </el-image>
                                        <span class="el-icon-delete  delHitPic" @click.stop @click="delSamplePic(item)"></span>
                                    </div>
                                </el-col>
                            </el-row>
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="命中目标" class="regBox">
                            <p>命中目标图：{{hitPictureList.length}}</p>
                            <el-row :gutter="10">
                                <el-col :span="3" v-for="item in hitPictureList">
                                    <div style="cursor: pointer;" class='hitBox' @click="clickPicture(item)" :class="currentId==item.id?'active':''">
                                        <el-image :src="item.picture_url"
                                                  :fit="'fill'"
                                                  class="single-image">
                                        </el-image>
                                        <span class="el-icon-delete  delHitPic" @click.stop @click="delHitPic(item)"></span>
                                    </div>
                                </el-col>
                            </el-row>
                        </a-tab-pane>
                    </a-tabs>
                </div>
                <a-form :model="hitSearchObj" layout="inline"  :label-col="{ style: { width: 'auto' } }">
                    <a-form-item label="监控点：" class="secondCondition">
                        <a-select v-model:value="hitSearchObj.gate_id"
                                  style="width: 250px"
                                  mode="multiple"
                                  :maxTagCount="1"
                                  :options="gateList"
                                  optionFilterProp="label"
                                  show-search
                        >
                        </a-select>
                    </a-form-item>
                    <a-form-item label="方向：" class="secondCondition">
                        <a-select v-model:value="hitSearchObj.direction"
                                  mode="multiple"
                                  :maxTagCount="1"
                                  style="width: 125px">
                            <a-select-option :value="1">进</a-select-option>
                            <a-select-option :value="-1">出</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="分数：" class="secondCondition">
                        <a-input v-model:value="hitSearchObj.score" style="width: 50px;"></a-input>
                    </a-form-item>
                    <a-form-item label="选择日期：" class="secondCondition">
                        <a-date-picker v-model:value="hitSearchObj.date" :format="'YYYY-MM-DD'" style="width: 110px"/>
                    </a-form-item>
                    <a-form-item label="选择时间：" class="secondCondition">
                        <a-time-picker v-model:value="hitSearchObj.startTime" style="width: 90px"/>
                        <a-time-picker v-model:value="hitSearchObj.endTime" style="width: 90px"/>
                    </a-form-item>
                    <a-form-item class="secondCondition">
                        <a-button type="primary" style="margin-right: 5px;" @click="searchPicture">查询</a-button>
                        <a-button type="primary" @click="checkPicture">选中</a-button>
                    </a-form-item>
                </a-form>
                <div class="identifyResult">
                    <div>识别结果：{{identifyResultList.length}}</div>
                    <el-row :gutter="10" class="identifyResultTable" :style="{height:contentHeight-340+'px'}">
                        <el-col :span="3" v-for="item in identifyResultList">
                            <div class="pictureBox">
                                <el-image :src="item.picture_url"
                                          :fit="'fill'"
                                          class="single-image">
                                </el-image>
                                <el-checkbox class="checkBox" v-model="item.checked"></el-checkbox>
                                <span class="score">{{item.featureNum}}</span>
                                <span class="text" @click="clickPicture(item)">
                                    <span class="el-icon-picture-outline iconPic"></span>
                                </span>
                            </div>
                        </el-col>
                    </el-row>
                    <a-pagination
                        v-model:current="pageNum_identify"
                        v-model:pageSize="pageSize_identify"
                        :total="total_identify"
                        :show-total="total => `共 ${total_identify} 条`"
                        :pageSizeOptions="['16', '32', '64']"
                        @change="onPageNumChange_identify"
                        @showSizeChange="onPageSizeChange_identify"
                        show-size-changer
                        show-quick-jumper
                        style="text-align:center"
                    />
                </div>
            </el-col>
        </el-row>
        <addPersonConfig ref="addPersonConfigRef" @refreshParentTable = 'confirmSearch'></addPersonConfig>
        <editPersonConfig ref="editPersonConfigRef" @refreshParentTable = 'confirmSearch'></editPersonConfig>
        <hitDetailDialog ref="hitDetailDialogRef" @refreshParentTable = 'confirmSearch'></hitDetailDialog>
    </div>

</template>

<script>
    import {
        reactive,
        ref,
        toRaw
    } from 'vue'
    import moment from 'moment'
    import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
    import {
        isArray
    } from '@/PublicUtil/Judgment'
    import {
        filterEmptyValueInObject,
        formatDate,
        formatTime
    } from '@/PublicUtil/PublicUtil'
    import FeatureMatchingAccuracyApi from '@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi'
    import {
        PlusOutlined
    } from '@ant-design/icons-vue'
    import addPersonConfig from './addPerson.vue'
    import editPersonConfig from './editPerson.vue'
    import hitDetailDialog from './hitDetailDialog.vue'
    import {ElMessage,ElMessageBox} from 'element-plus'
    export default {
        components:{
        	addPersonConfig,
            editPersonConfig,
            hitDetailDialog
        },
        setup() {
            const accountList = ref([])
            const plazaList = ref([])
            const queryForm = reactive({
                account_id: '',
                plaza_id: '',
            })
            const hitSearchObj = reactive({
                gate_id: [],
                score:75,
                direction: [1, -1],
                date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
                startTime: moment('00:00:00', 'HH:mm:ss'),
                endTime: moment('23:59:59', 'HH:mm:ss'),
            })
            const onAccountChange = function() {
                getPlazaList()
            }
            const getPlazaList = function() {
                queryForm.plaza_id = ''
                plazaList.value = []
                snapshotRecordApi.getPlazaList({
                    account_id: queryForm.account_id
                }).then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                plazaList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                            queryForm.plaza_id = r[0].id
                            getGateList()
                            confirmSearch()
                        }
                    }
                )
            }

            const getAccountList = function() {
                queryForm.account_id = ''
                accountList.value = []
                snapshotRecordApi.getAccountList().then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                accountList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                            queryForm.account_id = r[0].id
                            getPlazaList()
                        }
                    }
                )
            }
            const onMallChange = function(){
                getGateList()
            }
            const gateList = ref([])
            const getGateList = function() {
                hitSearchObj.gate_id = []
                gateList.value = []
                snapshotRecordApi.getGateList(
                    {
                        account_id: queryForm.account_id,
                        plaza_id: queryForm.plaza_id,
                        type: 0,
                    }
                ).then(
                    (r) => {
                        if (isArray(r.data))
                        {
                            for (const item of r.data)
                            {
                                gateList.value.push(
                                    {
                                        value: item.id,
                                        label: item.name,
                                    }
                                )
                            }
                        }
                    }
                )
            }
            const resultList = ref([])
            const confirmSearch = function() {
                pageNum.value = 1;
                getTableData()
            }
            const getTableData = function(){
                resultList.value = []
                const data = filterEmptyValueInObject(
                    {
                        pageNum:pageNum.value - 1,
                        pageSize:pageSize.value,
                        accountId: queryForm.account_id,
                        mallId: queryForm.plaza_id
                    }
                )
                FeatureMatchingAccuracyApi.getMatch(data).then(
                    (r) => {
                        if(r.msg_code==200){
                            resultList.value = r.data.records;
                            total.value = r.data.total;
                        }
                    }
                )
            }
            
            const onPageNumChange = function(num) {
                pageNum.value = num
                confirmSearch()
            }
            
            const onPageSizeChange = function(current, size) {
                pageNum.value = 1
                pageSize.value = size
                confirmSearch()
            }
            const isLoading = ref(false)
            const pageNum = ref(1)
            const pageSize = ref(10)
            const total = ref()
            const contentHeight = ref(0)
            const addPersonConfigRef = ref();
            const addPersonFun = function(){
                addPersonConfigRef.value.initDialog({
                    account_id:queryForm.account_id,
                    plaza_id:queryForm.plaza_id,
                });
            }
            const editPersonConfigRef = ref();
            const editRow = function(row){
                FeatureMatchingAccuracyApi.getMatchOne(row).then(
                    (r) => {
                        if(r.msg_code==200){
                            editPersonConfigRef.value.initDialog(r.data);
                        }else{
                            ElMessage({
                            	message: r.msg_info,
                            	type: 'error'
                            })
                            return false;
                        }
                    }
                )
            }
            const deleteRow = function(row){
                ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    isLoading.value = true;
                    FeatureMatchingAccuracyApi.delMatch(row).then(
                        (r) => {
                            isLoading.value = false;
                            if(r.msg_code==200){
                                ElMessage({
                                    message: r.msg_info,
                                    type: 'success'
                                })
                                confirmSearch()
                            }else{
                                ElMessage({
                                    message: r.msg_info,
                                    type: 'error'
                                })
                                return false;
                            }
                        }
                    )
                })
            }
            const hitDetailDialogRef = ref()
            const hitDetail = function(row){
                const data = filterEmptyValueInObject(
                    {
                        accountId: row.accountId,
                        mallId: row.mallId,
                        id:row.id
                    }
                )
                FeatureMatchingAccuracyApi.getMatchHitDetail(data).then(
                    (r) => {
                        if(r.msg_code==200){
                            let checkPersonId = ''
                            r.data.forEach(item=>{
                                if(item.personId == row.personUnid){
                                    checkPersonId = item.personId;
                                }
                                item.expand = false;
                                item.records.forEach(record=>{
                                    record.picture_url = window._baseImgUrl +'picture/' +record.bodyPath+record.bodyPic
                                })
                            })
                            hitDetailDialogRef.value.initDialog({
                                regId:row.id,
                                data:r.data,
                                checkPersonId:checkPersonId
                            })
                        }
                    }
                )
            }
            // 注册样本图
            const regPictureList = ref([])
            const hitPictureList = ref([])
            const regPersonId = ref()
            const redPersonObj = ref({})
            const clickRow = function(row){
                isLoading.value = true;
                redPersonObj.value = row;
                regPersonId.value = row.id;
                regPictureList.value = []
                hitPictureList.value = []
                FeatureMatchingAccuracyApi.getMatchOne(row).then(
                    (r) => {
                        isLoading.value = false;
                        if(r.msg_code==200){
                            r.data.faceList.forEach(item=>{
                                item.picture_url = window._baseImgUrl +'picture/' +item.bodyPath+item.bodyPic
                            })
                            regPictureList.value = r.data.faceList
                            r.data.hitList.forEach(item=>{
                                item.picture_url = window._baseImgUrl +'picture/' +item.bodyPath+item.bodyPic
                            })
                            hitPictureList.value = r.data.hitList
                        }
                    }
                )
            }
            // 识别结果
            const identifyResultList = ref([])
            const pageNum_identify = ref(1)
            const pageSize_identify = ref(10)
            const total_identify = ref(0)
            const onPageNumChange_identify = function(num) {
                pageNum_identify.value = num
                clickPicture()
            }
            
            const onPageSizeChange_identify = function(current, size) {
                pageNum_identify.value = 1
                pageSize_identify.value = size
                clickPicture()
            }
            const currentId = ref()
            const clickPicture = function(row){
                const rawData = toRaw(hitSearchObj)
                // if(rawData.gate_id.length<1){
                //     ElMessage({
                //     	message: '请选择监控点',
                //     	type: 'warning'
                //     })
                //     return false;
                // }
                currentId.value = row.id
                isLoading.value = true;
                let data = filterEmptyValueInObject({
                    accountId: queryForm.account_id,
                    mallId: queryForm.plaza_id,
                    gateId: rawData.gate_id.toString(),
                    score: rawData.score,
                    direction: rawData.direction.toString(),
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    faceId: currentId.value,
                    page: pageNum_identify.value - 1,
                    pageSize: pageSize_identify.value,
                    regId:regPersonId.value
                })
                FeatureMatchingAccuracyApi.getSearchByPic(data).then(
                    (r) => {
                        isLoading.value = false;
                        if(r.msg_code==200){
                            console.log(r.data.records)
                            r.data.records.forEach(item=>{
                                item.checked = false;
                                item.featureNum = item.featureNum.toFixed(2)
                                item.picture_url = window._baseImgUrl +'picture/' +item.picture_path+item.picture_url
                            })
                            identifyResultList.value = r.data.records
                            total_identify.value = r.data.total
                        }
                    }
                )
            }
            const searchPicture = function(){
                if(!currentId.value){
                    ElMessage({
                    	message: '请选择样本图',
                    	type: 'warning'
                    })
                    return false;
                }
                clickPicture({id:currentId.value})
            }
            // 选中命中目标
            const checkPicture = function(){
                let checkList = []
                identifyResultList.value.forEach(item=>{
                    if(item.checked==true){
                        checkList.push(item.id)
                    }
                })
                if(checkList.length<1){
                    ElMessage({
                    	message: '请选择识别结果图片',
                    	type: 'warning'
                    })
                    return false;
                }
                if(!regPersonId.value){
                    ElMessage({
                    	message: '请选择注册人员',
                    	type: 'warning'
                    })
                    return false;
                }
                isLoading.value = true;
                FeatureMatchingAccuracyApi.addMatchHit({
                    id:regPersonId.value,
                    faceIds:checkList
                }).then(
                    (r) => {
                        isLoading.value = false;
                        if(r.msg_code==200){
                            ElMessage({
                            	message: r.msg_info,
                            	type: 'success'
                            })
                            getTableData()
                            clickRow(redPersonObj.value)
                            searchPicture()
                        }
                    }
                )
            }
            // 删除命中目标图片
            const delHitPic = function(row){
                FeatureMatchingAccuracyApi.delMatchHit({
                    regId:regPersonId.value,
                    faceId:row.id
                }).then(
                    (r) => {
                        isLoading.value = false;
                        if(r.msg_code==200){
                            ElMessage({
                            	message: r.msg_info,
                            	type: 'success'
                            })
                            getTableData()
                            clickRow(redPersonObj.value)
                            searchPicture()
                        }
                    }
                )
            }
            // 删除样本图片
            const delSamplePic = function(row){
                FeatureMatchingAccuracyApi.delMatchSample({
                    regId:regPersonId.value,
                    faceId:row.id
                }).then(
                    (r) => {
                        isLoading.value = false;
                        if(r.msg_code==200){
                            ElMessage({
                            	message: r.msg_info,
                            	type: 'success'
                            })
                            getTableData()
                            clickRow(redPersonObj.value)
                        }
                    }
                )
            }
            const getIndex = function(val) {
                return (pageNum.value - 1) * pageSize.value + val + 1
            }
            const __main = function() {
                contentHeight.value = window.innerHeight - 200
                getAccountList()
            }
            __main()
            return {
                // sequence
                isLoading,
                pageNum,
                pageSize,
                total,
                contentHeight,
                accountList,
                plazaList,
                resultList,
                addPersonConfigRef,
                editPersonConfigRef,
                hitSearchObj,
                gateList,
                activeKey: ref('1'),
                regPictureList,
                pageNum_identify,
                pageSize_identify,
                total_identify,
                identifyResultList,
                currentId,
                hitPictureList,
                hitDetailDialogRef,
                // mapping
                queryForm,
                onAccountChange,
                confirmSearch,
                onPageNumChange,
                onPageSizeChange,
                addPersonFun,
                getIndex,
                editRow,
                deleteRow,
                onMallChange,
                clickRow,
                searchPicture,
                clickPicture,
                onPageNumChange_identify,
                onPageSizeChange_identify,
                checkPicture,
                delHitPic,
                hitDetail,
                delSamplePic
            }
        }
    }
</script>

<style lang="less" scoped>
    .active{
        border : 2px solid #40a9ff
    }
    .regBox{
        height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .hitBox{
        position: relative;
    }
    .delHitPic{
        position: absolute;
        right: 0;
        top: 0;
        color: #1890ff;
        font-size: 28px;
    }
    .secondCondition{
        margin-right: 5px !important;
    }
    .identifyResultTable{
        overflow-y: auto;
    }
    .pictureBox{
        position: relative;
        cursor: pointer;
    }
    .checkBox{
        position: absolute;
        left: 1px;
        top: 0;
    }
    .score{
        position: absolute;
        left: 50px;
        top: 0;
        color: red;
        font-weight: 900;
    }
    .iconPic{
        position: absolute;
        right: 0px;
        top: 0px;
        color: #1890ff;
        font-size: 28px;
    }
    
    .single-image{
        width: 100%;
        height: 200px;
    }
    .containter {
        height: 100%;
    }

    .contentBox {
        height: 100%;
    }

    .box {
        height: 100%;
    }

    .boxRight {
        border-left: 5px solid #ccc;
        padding-left: 5px;
    }

    .btns {
        text-align: right;
        margin-top: 10px;
        margin-right: 15px;
    }

    .btn {
        margin-left: 10px;
    }
</style>