PeopleLabel.vue

<template>
    <a-layout class="PeopleLabel">
        <div style="display: flex;justify-content: space-between">
            标注
            <a-button @click="goBack">返回上一页</a-button>
        </div>
        <div>
            图片数量：
            <el-input v-model.trim="countGTE" @input="onCountGteChange" size="mini" style="width: 150px"></el-input>
            至
            <el-input v-model.trim="countLTE" @input="onCountLteChange" size="mini" style="width: 150px"></el-input>
            <a-button @click="getPeopleImageFolderList" type="primary">搜索</a-button>
        </div>
        <div>
            文件夹ID：
            <el-input v-model.trim="searchedFolderId" size="mini" style="width: 300px"></el-input>
            <a-button @click="searchFolder" type="primary">搜索</a-button>
        </div>
        <el-row>
            <el-col :span="18">
                <el-menu mode="horizontal" @select="onMenuSelect" :default-active="'1'">
                    <el-menu-item :index="'1'">
                        待标注
                    </el-menu-item>
                    <el-menu-item :index="'2'">
                        标注中
                    </el-menu-item>
                    <el-menu-item :index="'3'">
                        完成标注
                    </el-menu-item>
                    <el-menu-item :index="'-1'">
                        被回收
                    </el-menu-item>
                    <el-menu-item :index="'4'">
                        优质
                    </el-menu-item>
                    <el-menu-item :index="'7'">
                        低质
                    </el-menu-item>
                    <el-menu-item :index="''">
                        全部
                    </el-menu-item>
                    <el-menu-item :index="'我的完成标注'">
                        我的完成标注
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="6" v-if="isReviewAccessed">
                <el-button @click="confirmSubmitReview(6)" type="success" size="small">审核通过</el-button>
                <el-button @click="confirmSubmitReview(5)" type="danger" size="small">审核驳回</el-button>
            </el-col>
        </el-row>

        <div style="height: 100%; overflow: scroll" v-loading="isLoading">
            <el-row v-for="row in pagedTableData">
                <el-col :span="6" v-for="item in row">
                    <el-checkbox @change="selectImageFolder(Object.keys(item)[0])" v-if="isReviewAccessed" :key="Object.keys(item)[0]">选择文件夹</el-checkbox>
                    <div @click="enterLabeling(Object.keys(item)[0])"
                         class="folder"
                         :style="'border: 1px solid ' + getFolderColor(Object.values(item)[0][0].status)"
                    >
                        <div class="folder-title"
                             :style="'background: ' + getFolderColor(Object.values(item)[0][0].status)"
                        >
                            {{ getFolderTitle(Object.values(item)[0][0].status) }}
                        </div>
                        <div class="folder-body ">
                            <div class="folder-cover-image">
                                <el-image :src="getImageUrl(Object.values(item)[0][0].picId)"
                                          :fit="'contain'"
                                          style="height: 300px;">
                                </el-image>
                            </div>
                            <el-row>
                                <el-col :span="6" class="column-title-font">文件夹ID：</el-col>
                                <el-col :span="18">{{ Object.keys(item)[0] }}</el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" class="column-title-font">标注人：</el-col>
                                <el-col :span="18">{{ Object.values(item)[0][0].labelUserName }}</el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" class="column-title-font">图片数量：</el-col>
                                <el-col :span="18">{{ Object.values(item)[0].length }}</el-col>
                            </el-row>
                            <!--                    <el-row>-->
                            <!--                        <el-col :span="10" class="column-title-font">创建时间：</el-col>-->
                            <!--                        <el-col :span="14">{{ item.createTime }}</el-col>-->
                            <!--                    </el-row>-->
                            <!--                    <el-row>-->
                            <!--                        <el-col :span="10" class="column-title-font">完成时间：</el-col>-->
                            <!--                        <el-col :span="14">2020-2-3 23：23:43</el-col>-->
                            <!--                    </el-row>-->
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-pagination @current-change="handlePageNumChange"
                           @size-change="handlePageSizeChange"
                           :current-page="pageNum"
                           :page-size="pageSize"
                           :total="total"
                           :page-sizes="[12, 24, 36, 48]"
                           layout="total, sizes, prev, pager, next, jumper"
                           style="text-align:center"
            >
            </el-pagination>
        </div>
    </a-layout>
</template>
<script>
import {computed, defineComponent, reactive, ref, toRefs, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import peopleLabelApi from '@/views/DataLabel/PeopleLabel/PeopleLabelApi'
import {
    formatPaginatedTableData,
    getCountGte,
    getCountLte, getFolderColor,
    getFolderTitle,
    getImageUrl,
    getPagedList,
} from '@/PublicUtil/PublicUtil'
import {message} from 'ant-design-vue'
import router from '@/router'
import {isEmptyValue, isNotEmptyValue} from '@/PublicUtil/Judgment'
import {ElMessage} from 'element-plus'

export default defineComponent(
    {
        setup() {
            const getPageNum = function() {
                const pageNum = useRoute().query.pageNum
                if (isEmptyValue(pageNum))
                {
                    return 1
                }
                else
                {
                    return pageNum
                }
            }

            const pageNum = ref(getPageNum())
            const pageSize = ref(12)
            const total = ref(Number.MAX_SAFE_INTEGER)
            const isLoading = ref(false)
            const packId = useRoute().query.packId
            const isReviewAccessed = useRoute().query.isReviewAccessed === 'true'
            const router = useRouter()

            const imageData = ref()
            const countGTE = ref(getCountGte())
            const countLTE = ref(getCountLte())
            const searchedFolderId = ref()
            let selectedMenuIndex = '1'

            const pagedTableData = computed(
                () => {
                    return getPagedList(peopleFolderList.value, 4)
                }
            )
            // sequence
            const peopleFolderList = ref([])
            let selectedImageFolderIdList = []

            // function
            const handlePageNumChange = function(num) {
                pageNum.value = num
                selectedImageFolderIdList = []
                getPeopleImageFolderList()
                if (isNotEmptyValue(pageNum.value))
                {
                    localStorage.setItem('pageNum', pageNum.value)
                }
            }
            const handlePageSizeChange = function(size) {
                pageNum.value = 1
                pageSize.value = size
                selectedImageFolderIdList = []
                getPeopleImageFolderList()
                if (isNotEmptyValue(pageNum.value))
                {
                    localStorage.setItem('pageNum', pageNum.value)
                }
            }

            const enterLabeling = function(personUnid) {
                peopleLabelApi.enterLabeling(personUnid, packId).then(
                    (r) => {
                        if (r.msg === '正在被其他人标注')
                        {
                            message.info('正在被其他人标注')
                        }
                        else
                        {
                            router.push(
                                {
                                    path: '/DataLabel/Labeling',
                                    query: {
                                        packId: packId,
                                        personUnid: personUnid,
                                        status: selectedMenuIndex,
                                    }
                                }
                            )
                        }
                    }
                )
            }

            const getPeopleImageFolderList = function() {
                isLoading.value = true
                const data = {
                    packId: packId,
                    status: selectedMenuIndex === '我的完成标注' ? undefined : selectedMenuIndex,
                    annotatorId: selectedMenuIndex === '我的完成标注' ? localStorage.getItem('currentUserId') : undefined,
                    pageNum: pageNum.value,
                    pageSize: pageSize.value,
                    countGTE: getCountGte(),
                    countLTE: getCountLte(),
                }

                peopleLabelApi.getPeopleImageFolderList(data).then(
                    ({data}) => {
                        formatPaginatedTableData(
                            peopleFolderList,
                            data,
                            total,
                        )
                        isLoading.value = false
                    }
                )
            }

            const searchFolder = function() {
                isLoading.value = true
                const data = {
                    personUnid_like: searchedFolderId.value,
                    packId: packId,
                }
                peopleLabelApi.searchFolder(data).then(
                    ({data}) => {
                        isLoading.value = false

                        let l = []
                        for (let key in data)
                        {
                            const value = data[key]
                            l.push(
                                {
                                    [key]: value
                                }
                            )
                        }
                        peopleFolderList.value = l
                        // total.value = data.length
                    }
                )
            }

            const goBack = function() {
                router.push(
                    {
                        path: '/DataLabel/ImagePackage',
                    }
                )
            }

            const getFolderTitleBorderColor = function(status) {
                switch (status)
                {
                    case 1:
                    {
                        return 'folder-title-toBeLabeled'
                    }
                    case 2:
                    {
                        return 'folder-title-labeling'
                    }
                    case 3:
                    {
                        return 'folder-title-labeled'
                    }
                    case -1:
                    {
                        return 'folder-title-beRecycled'
                    }
                    case 4:
                    {
                        return 'folder-title-highQuality'
                    }
                    default:
                    {
                        return ''
                    }
                }
            }

            const onMenuSelect = function(index) {
                selectedMenuIndex = index
                getPeopleImageFolderList()
            }

            const onCountGteChange = function(v) {
                localStorage.setItem('countGTE', v)
            }

            const onCountLteChange = function(v) {
                localStorage.setItem('countLTE', v)
            }

            const selectImageFolder = function(personUnid) {
                if (selectedImageFolderIdList.includes(personUnid))
                {
                    selectedImageFolderIdList.splice(selectedImageFolderIdList.indexOf(personUnid), 1)
                }
                else
                {
                    selectedImageFolderIdList.push(personUnid)
                }
            }

            const confirmSubmitReview = function(status) {
                const data = {
                    personUnidArr: selectedImageFolderIdList,
                    status: status,
                }

                peopleLabelApi.submitReview(data).then(
                    (r) => {
                        const message = r.msg

                        ElMessage(
                            {
                                message: `${message}`,
                            }
                        )
                    }
                )
            }

            const initialize = function() {
                getPeopleImageFolderList()
            }

            initialize()

            return {
                // scalar
                pageNum,
                pageSize,
                total,
                isLoading,
                imageData,
                countGTE,
                countLTE,
                searchedFolderId,
                isReviewAccessed,
                // sequence
                peopleFolderList,
                pagedTableData,
                // mapping
                // function
                handlePageNumChange,
                handlePageSizeChange,
                getPeopleImageFolderList,
                goBack,
                getFolderTitle,
                getFolderColor,
                getFolderTitleBorderColor,
                enterLabeling,
                onMenuSelect,
                getImageUrl,
                onCountGteChange,
                onCountLteChange,
                searchFolder,
                selectImageFolder,
                confirmSubmitReview,
            }
        },
    }
)
</script>


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