JudgePeople.vue

<template>
    <el-container>
        <el-header style="height: 100px">
            <div style="display:flex; justify-content: flex-end ">
                <el-button @click="goBack">返回上一页</el-button>
            </div>
            <div style="font-size: 20px">
                是否是一个人:{{ same }}
            </div>
            <el-row>
                <el-col :span="12">
                    <span style="font-size: 20px">ID:{{ leftPersonUnid }}</span>
                </el-col>
                <el-col :span="12">
                    <span style="font-size: 20px">ID:{{ rightPersonUnid }}</span>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-container>
                <el-aside :width="'50%'" style="border-right: red 1px solid">
                    <!--                    <VirtualList-->
                    <!--                        :dataList="leftPagedTableData"-->
                    <!--                        :key="leftPagedTableData"-->
                    <!--                        @imageClick="selectImage"-->
                    <!--                    >-->
                    <!--                    </VirtualList>-->
                    <el-row v-for="row in leftPagedTableData">
                        <el-col :span="8" v-for="item in row" @click="selectImage(item.id)">
                            <div v-bind:class="{ 'isSelected': item.isSelected}"
                                 class="single-image-parent flex-vertical-center">
                                <el-image :src="getImageUrl(item.picId)"
                                          :fit="'contain'"
                                          class="single-image">
                                </el-image>
                            </div>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>
                    <!--                    <VirtualList-->
                    <!--                        :dataList="rightPagedTableData"-->
                    <!--                        :key="rightPagedTableData"-->
                    <!--                        @imageClick="selectImage"-->
                    <!--                    >-->
                    <!--                    </VirtualList>-->
                    <el-row v-for="row in rightPagedTableData">
                        <el-col :span="8" v-for="item in row" @click="selectImage(item.id)">
                            <div v-bind:class="{ 'isSelected': item.isSelected}"
                                 class="single-image-parent flex-vertical-center">
                                <el-image :src="getImageUrl(item.picId)"
                                          :fit="'contain'"
                                          class="single-image">
                                </el-image>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </el-main>
        <el-footer>
            <div style="display: flex; justify-content:flex-end;height: 100%" class="flex-vertical-center">
                <el-button @click="splitImage">拆分图片(Q)</el-button>
                <el-button type="danger" @click="notSamePerson">不是一个人(A)</el-button>
                <el-button type="primary" @click="samePerson">是一个人(D)</el-button>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {
    getPagedList,
    getImageUrl,
} from '@/PublicUtil/PublicUtil'
import {computed, onBeforeUnmount, reactive, ref} from 'vue'
import labelingApi from '@/views/DataLabel/Labeling/LabelingApi'
import judgePeopleApi from '@/views/JudgePeople/JudgePeople'
import {ElMessage} from 'element-plus'
import dataCleanApi from '@/views/ClassAmongClean/ClassAmongClean'
import VirtualList from '@/views/DataLabel/Labeling/VirtualList/VirtualList'

export default {
    components: {
        VirtualList,
    },
    setup() {
        const id = useRoute().query.id
        const packId = useRoute().query.packId
        const name = useRoute().query.name
        const packName = useRoute().query.packName
        const same = useRoute().query.same
        const leftPersonUnid = useRoute().query.leftPersonId
        const rightPersonUnid = useRoute().query.rightPersonId
        const personId = useRoute().query.personId
        const leftPeopleImageList = ref([])
        const rightPeopleImageList = ref([])
        let leftSelectedImageIdList = []
        let rightSelectedImageIdList = []
        let allSelectedImageIdList = []

        const router = useRouter()

        const leftPagedTableData = computed(
            () => {
                return getPagedList(leftPeopleImageList.value, 3)
            }
        )

        const rightPagedTableData = computed(
            () => {
                return getPagedList(rightPeopleImageList.value, 3)
            }
        )

        const getLeftPeopleImageList = function() {
            labelingApi.getPeopleImageList(packId, leftPersonUnid).then(
                (r) => {
                    leftPeopleImageList.value = r.data

                    for (const peopleImage of leftPeopleImageList.value)
                    {
                        peopleImage['isSelected'] = false
                    }
                }
            )
        }

        const getRightPeopleImageList = function() {
            labelingApi.getPeopleImageList(packId, rightPersonUnid).then(
                (r) => {
                    rightPeopleImageList.value = r.data

                    for (const peopleImage of rightPeopleImageList.value)
                    {
                        peopleImage['isSelected'] = false
                    }
                }
            )
        }

        const nextJudge = function() {
            const data = {
                packId: packId
            }

            dataCleanApi.getCleanAmongResult(data).then(
                (r) => {
                    const data = r.data
                    if (r.code === 200)
                    {
                        router.push(
                            {
                                path: '/JudgePeople',
                                query: {
                                    id: data.id,
                                    packId: packId,
                                    leftPersonId: data.personId,
                                    rightPersonId: data.simPersonId,
                                }
                            }
                        )
                    }
                    else
                    {
                        const message = r.msg
                        ElMessage(
                            {
                                message: `${message}`,
                            }
                        )
                    }
                }
            )
        }

        const notSamePerson = function() {
            judgePeopleApi.notSamePerson(id).then(
                (r) => {
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )

                    if (r.code === 200)
                    {
                        nextJudge()
                    }
                }
            )
        }

        const samePerson = function() {
            judgePeopleApi.samePerson(id).then(
                (r) => {
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )

                    if (r.code === 200)
                    {
                        nextJudge()
                    }
                }
            )
        }

        const goBack = function() {
            router.push(
                {
                    path: '/ClassAmongClean',
                    query: {
                        packId: packId,
                        name: name,
                        packName: packName,
                    }
                }
            )
        }

        const splitImage = function() {
            labelingApi.mergeImagesAsNewPerson(
                allSelectedImageIdList.toString(),
                packId
            ).then(
                (r) => {
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )
                    window.location.reload()
                }
            )
        }

        const changeSelectedImageIdList = function(item, position) {
            item['isSelected'] = !item['isSelected']
            if (item['isSelected'] === true)
            {
                if (position === 'left')
                {
                    leftSelectedImageIdList.push(item.id)
                }
                else
                {
                    rightSelectedImageIdList.push(item.id)
                }
            }
            else
            {
                if (position === 'left')
                {
                    leftSelectedImageIdList.splice(leftSelectedImageIdList.indexOf(item.id), 1)
                }
                else
                {
                    rightSelectedImageIdList.splice(rightSelectedImageIdList.indexOf(item.id), 1)
                }
            }
            allSelectedImageIdList = leftSelectedImageIdList.concat(rightSelectedImageIdList)
            allSelectedImageIdList = [...new Set(allSelectedImageIdList)]
        }

        const selectImage = function(id) {
            for (let row of leftPagedTableData.value)
            {
                for (let item of row)
                {
                    if (item.id === id)
                    {
                        changeSelectedImageIdList(item, 'left')
                    }
                }
            }
            for (let row of rightPagedTableData.value)
            {
                for (let item of row)
                {
                    if (item.id === id)
                    {
                        changeSelectedImageIdList(item, 'right')
                    }
                }
            }

        }

        const addShortcutKey = function(event) {
            if (event.code === 'KeyA')
            {
                notSamePerson()
            }
            if (event.code === 'KeyD')
            {
                samePerson()
            }
            if (event.code === 'KeyQ')
            {
                splitImage()
            }
        }

        onBeforeUnmount(
            () => {
                document.removeEventListener('keydown', addShortcutKey)
            }
        )

        const initialize = function() {
            getLeftPeopleImageList()
            getRightPeopleImageList()
            document.addEventListener('keydown', addShortcutKey)
        }

        initialize()

        return {
            // scalar
            same,
            leftPersonUnid,
            rightPersonUnid,
            // sequence
            leftPagedTableData,
            rightPagedTableData,
            // mapping
            // function
            notSamePerson,
            samePerson,
            getImageUrl,
            goBack,
            splitImage,
            selectImage,
        }
    }

}
</script>

<style lang="less" scoped>
@import "./JudgePeople.less";
</style>