ClassInsideJudgePerson.vue

<template>
    <el-container>
        <el-header height="auto">
            <div style="display: flex; justify-content:flex-end">
                <el-button @click="goBack">返回上一页</el-button>
            </div>
            <el-row>
                <el-col :span="12">
                    <span style="font-size: 20px">ID:{{ personId }}</span>
                </el-col>
                <el-col :span="12">
                    <span style="font-size: 20px">异常图片</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.unid)">
                            <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.unid)">
                            <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 type="primary" @click="onlySplit">只拆分(A)</el-button>
                <el-button type="primary" @click="split">拆分并完成(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 {ElMessage} from 'element-plus'
import classInsideCleanApi from '@/views/ClassInsideClean/ClassInsideClean'
import VirtualList from './VirtualList/VirtualList'

export default {
    components: {
        VirtualList,
    },
    setup() {
        const name = useRoute().query.name
        const packName = useRoute().query.packName
        const personId = useRoute().query.personId
        const packId = useRoute().query.packId
        const leftPeopleImageList = ref([])
        const rightPeopleImageList = ref([])
        let leftSelectedImageUnidList = []
        let rightSelectedImageUnidList = []
        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, personId).then(
                (r) => {
                    leftPeopleImageList.value = r.data

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

        const getRightPeopleImageList = function() {
            const data = {
                personId: personId,
                packId: packId,
            }
            classInsideCleanApi.getCleanInsideResult(data).then(
                ({data}) => {
                    rightPeopleImageList.value = data
                    for (const peopleImage of rightPeopleImageList.value)
                    {
                        peopleImage['isSelected'] = false
                    }
                }
            )
        }

        const onlySplit = function() {
            const data = {
                personId: personId,
                packId: packId,
                picIds: allSelectedImageIdList.toString(),
            }
            classInsideCleanApi.split(data).then(
                (r) => {
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )
                    window.location.reload()
                }
            )
        }

        const split = function() {
            const data = {
                personId: personId,
                packId: packId,
                picIds: allSelectedImageIdList.toString(),
            }
            classInsideCleanApi.split(data).then(
                (r) => {
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )

                    if (r.code === 200)
                    {
                        classInsideCleanApi.getCleanInsideResult({packId: packId}).then(
                            ({data}) => {
                                router.push(
                                    {
                                        path: '/ClassInsideJudgePerson',
                                        query: {
                                            personId: data[0].personUnid,
                                            packId: packId,
                                        }
                                    }
                                )
                            }
                        )
                    }
                }
            )
        }

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

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

        }

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

        const addShortcutKey = function(event) {
            if (event.code === 'KeyA')
            {
                onlySplit()
            }
            if (event.code === 'KeyD')
            {
                split()
            }
        }

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

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

        initialize()

        return {
            // scalar
            personId,
            // sequence
            leftPagedTableData,
            rightPagedTableData,
            // mapping
            // function
            onlySplit,
            split,
            selectImage,
            getImageUrl,
            goBack,
        }
    }

}
</script>

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