CleanManagement.vue

<template>
    <el-container class="DataClean">
        <el-header height="50px">
            <div>
                <span class="title-text">清洗管理</span>
            </div>
        </el-header>


        <el-main>
            <el-button type="primary" @click="addDataClean">新建</el-button>
            <el-button type="primary" @click="refreshTable">刷新列表</el-button>
            <el-table :data="dataCleanList" v-loading="isLoading">
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="cleanType" label="清洗类型" align="center">
                    <template #default="scope">
                        {{ getTypeTitle(scope.row.cleanType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="清洗状态" align="center">
                    <template #default="scope">
                        {{ getStatusTitle(scope.row.status, scope.row.progress) }}
                    </template>
                </el-table-column>
                <el-table-column prop="packName" label="批次名" align="center"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
                <el-table-column prop="score" label="阈值" align="center"></el-table-column>
                <el-table-column prop="percent" label="占比" align="center"></el-table-column>
                <el-table-column prop="maxNum" label="抽取数量" align="center">
                    <template #default="scope">
                        {{ scope.row.cleanType === 2 ? scope.row.maxNum : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" align="center" width="350">
                    <template #default="scope">
                        <el-button @click="classInsideClean(scope.row.id)" v-if="[1, 5].includes(scope.row.status)" type="text" v-loading="isButtonLoading">类内清洗</el-button>
                        <el-button @click="classAmongClean(scope.row.id)" v-if="[1, 5].includes(scope.row.status)" type="text" v-loading="isButtonLoading">类间清洗</el-button>
                        <el-button @click="gotoHandle(scope.row)" v-if="[3].includes(scope.row.status)" type="text" v-loading="isButtonLoading">进入处理</el-button>
                        <el-button @click="completeClean(scope.row.id)" v-if="[3].includes(scope.row.status)" type="text" v-loading="isButtonLoading">完成清洗</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="onPageNumChange"
                           @size-change="onPageSizeChange"
                           :current-page="pageNum"
                           :page-size="pageSize"
                           :total="total"
                           :page-sizes="[10, 20, 40, 80]"
                           layout="total, sizes, prev, pager, next, jumper"
                           style="text-align:center"
            >
            </el-pagination>


            <el-drawer title="新建数据清洗" v-model="addDataCleanVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="dataClean-form">
                    <el-form :model="addDataCleanForm" :rules="rules" ref="ref_addDataCleanForm">
                        <el-form-item label="批次:" :label-width="'120px'">
                            <el-select v-model="addDataCleanForm.packId" style="width: 100%">
                                <el-option v-for="(name, value) in imagePackageMap" :label="name" :value="value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务名:" :label-width="'120px'">
                            <el-input v-model.trim="addDataCleanForm.name"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align:center">
                            <el-button @click="addDataCleanVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmAddDataClean">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>


            <el-dialog title="类内清洗" v-model="isClassInsideCleanVisible" width="30%" :destroy-on-close="true" center>
                <el-form :model="classInsideCleanForm">
                    <el-form-item label="阈值:">
                        <el-input-number v-model="classInsideCleanForm.score" :step="0.1" :min="0" :max="1" style="width: 100%"/>
                        <div>范围：0-1之间，可为小数</div>
                    </el-form-item>

                    <el-form-item label="比例:">
                        <el-input-number v-model="classInsideCleanForm.percent" :step="0.1" :min="0" :max="1" style="width: 100%"/>
                        <div>范围：0-1之间，可为小数</div>
                    </el-form-item>
                    <el-form-item style="text-align:center">
                        <el-button @click="isClassInsideCleanVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmClassInsideClean">确 定</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <el-dialog title="类间清洗" v-model="isClassAmongCleanVisible" width="30%" :destroy-on-close="true" center>
                <el-form :model="classAmongCleanForm">
                    <el-form-item label="阈值:" :label-width="'140px'">
                        <el-input-number v-model="classAmongCleanForm.score" :step="0.1" :min="0" :max="1" style="width: 100%"/>
                        <div>范围：0.7-1之间，可为小数</div>
                    </el-form-item>
                    <el-form-item label="比例:" :label-width="'140px'">
                        <el-input-number v-model="classAmongCleanForm.percent" :step="0.1" :min="0" :max="1" style="width: 100%"/>
                        <div>范围：0-1之间，可为小数</div>
                    </el-form-item>
                    <el-form-item label="抽取每人图片数量:" :label-width="'140px'">
                        <el-input-number v-model="classAmongCleanForm.maxNum" :step="1" :min="0" style="width: 100%"/>
                        <div>数量越小，清洗越快</div>
                    </el-form-item>
                    <el-form-item style="text-align:center">
                        <el-button @click="isClassAmongCleanVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmClassAmongClean">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
import {computed, onMounted, reactive, ref, toRaw, toRefs, watch} from "vue"
import {
    filterEmptyValueInObject,
    resetForm
} from "@/PublicUtil/PublicUtil"
import dataCleanApi from './DataCleanApi'
import {ElMessageBox} from 'element-plus'
import {ElMessage} from 'element-plus'
import {getImagePackageMap, getUserNameIdMap} from '@/Request/DictionaryRequest'
import router from '@/router'
import {useRouter} from 'vue-router'
import {isEmptyValue} from '@/PublicUtil/Judgment'
import imagePackageApi from '@/views/DataLabel/ImagePackage/ImagePackageApi'

export default {
    setup() {
        // scalar
        const pageNum = ref(1)
        const pageSize = ref(10)
        const total = ref()
        const isLoading = ref(false)
        const addDataCleanVisible = ref(false)
        const editDataCleanVisible = ref(false)
        const isButtonLoading = ref(false)
        const isClassInsideCleanVisible = ref(false)
        const isClassAmongCleanVisible = ref(false)
        const dataCleanList = ref([])

        const ref_addDataCleanForm = ref()
        const ref_editDataCleanForm = ref()
        const router = useRouter()
        // computed

        // mapping
        const rules = reactive(
            {}
        )

        const userNameIdMap = reactive({})
        const imagePackageMap = reactive({})

        const addDataCleanForm = reactive(
            {
                packId: '',
                name: '',
            }
        )

        const editDataCleanForm = reactive(
            {
                packId: '',
                name: '',
            }
        )

        const classInsideCleanForm = reactive(
            {
                taskId: '',
                score: '',
                percent: '',
            }
        )

        const classAmongCleanForm = reactive(
            {
                taskId: '',
                score: '',
                percent: '',
                maxNum: '',
            }
        )

        // function
        const onPageNumChange = function(num) {
            pageNum.value = num
            getDataCleanList()
        }
        const onPageSizeChange = function(size) {
            pageNum.value = 1
            pageSize.value = size
            getDataCleanList()
        }

        const confirmAddDataClean = function() {
            ref_addDataCleanForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        addDataCleanVisible.value = false
                        const rawData = toRaw(addDataCleanForm)
                        const data = filterEmptyValueInObject(rawData)
                        dataCleanApi.addDataClean(data).then(
                            (r) => {

                                const message = r.msg
                                ElMessage(`${message}`)

                                getDataCleanList()
                            }
                        )
                    }
                }
            )
        }

        const editDataClean = function(row) {
            editDataCleanVisible.value = true
            editDataCleanForm.id = row.id
            editDataCleanForm.name = row.name
            editDataCleanForm.managerId = row.managerId
            editDataCleanForm.description = row.description
        }

        const confirmEditDataClean = function() {
            ref_editDataCleanForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(editDataCleanForm)
                        const data = filterEmptyValueInObject(
                            {
                                name: rawData.name,
                                managerId: rawData.managerId,
                                description: rawData.description,
                            }
                        )
                        dataCleanApi.editDataClean(rawData.id, data).then(
                            (r) => {
                                const message = r.msg

                                getDataCleanList()
                                ElMessage(`${message}`)
                            }
                        )
                        editDataCleanVisible.value = false
                    }
                }
            )
        }

        const addDataClean = function() {
            resetForm(addDataCleanForm)
            addDataCleanVisible.value = true
        }

        const getDataCleanList = function() {
            isLoading.value = true
            dataCleanApi.getDataCleanList({
                pageNum: pageNum.value,
                pageSize: pageSize.value,
            }).then(
                ({data}) => {
                    isLoading.value = false
                    dataCleanList.value = data.list
                    total.value = data.total
                }
            )
        }

        const getStatusTitle = function(status, progress) {
            if (isEmptyValue(progress))
            {
                progress = ''
            }

            switch (status)
            {
                case 1:
                {
                    return '待清洗' + progress
                }
                case 2:
                {
                    return '清洗中' + progress
                }
                case 3:
                {
                    return '人工处理中' + progress
                }
                case 4:
                {
                    return '合并中' + progress
                }
                case 5:
                {
                    return '清洗完成' + progress
                }
                default:
                {
                    break
                }
            }
        }

        const classInsideClean = function(id) {
            classInsideCleanForm.taskId = id
            isClassInsideCleanVisible.value = true
        }

        const classAmongClean = function(id) {
            classAmongCleanForm.taskId = id
            isClassAmongCleanVisible.value = true
        }

        const confirmClassInsideClean = function() {
            isClassInsideCleanVisible.value = false
            isButtonLoading.value = true
            const data = filterEmptyValueInObject(toRaw(classInsideCleanForm))
            dataCleanApi.cleanInsideClean(data).then(
                (r) => {
                    isButtonLoading.value = false
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )
                    getDataCleanList()
                }
            )
        }

        const confirmClassAmongClean = function() {
            isClassAmongCleanVisible.value = false
            isButtonLoading.value = true
            const data = filterEmptyValueInObject(toRaw(classAmongCleanForm))
            dataCleanApi.cleanAmongClean(data).then(
                (r) => {
                    isButtonLoading.value = false
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )
                    getDataCleanList()
                }
            )
        }

        const getTypeTitle = function(cleanType) {
            switch (cleanType)
            {
                case 1:
                {
                    return '类内清洗'
                }
                case 2:
                {
                    return '类间清洗'
                }
                {
                    break
                }
            }
        }

        const gotoHandle = function(row) {
            switch (row.cleanType)
            {
                case 1:
                {
                    router.push(
                        {
                            path: '/ClassInsideClean',
                            query: {
                                packId: row.packId,
                                name: row.name,
                                packName: row.packName,
                            }
                        }
                    )
                    break
                }
                case 2:
                {
                    router.push(
                        {
                            path: '/ClassAmongClean',
                            query: {
                                packId: row.packId,
                                name: row.name,
                                packName: row.packName,
                            }
                        }
                    )
                    break
                }
                default:
                {

                    break
                }
            }
        }

        const completeClean = function(id) {
            isButtonLoading.value = true
            dataCleanApi.completeClean(id).then(
                (r) => {
                    isButtonLoading.value = false
                    const message = r.msg
                    ElMessage(
                        {
                            message: `${message}`,
                        }
                    )
                    getDataCleanList()
                }
            )
        }

        const getImagePackageMap = function() {
            dataCleanApi.getImagePackageMap().then(
                ({data}) => {
                    for (const item of data)
                    {
                        imagePackageMap[item.id] = item.name
                    }
                }
            )
        }

        const refreshTable = function() {
            getDataCleanList()
        }

        const initialize = function() {
            getDataCleanList()
            getImagePackageMap()
            getUserNameIdMap(userNameIdMap)
        }

        initialize()

        return {
            // scalar
            pageNum,
            pageSize,
            total,
            isLoading,
            dataCleanList,
            ref_addDataCleanForm,
            ref_editDataCleanForm,
            addDataCleanVisible,
            editDataCleanVisible,
            isButtonLoading,
            isClassInsideCleanVisible,
            isClassAmongCleanVisible,
            // mapping
            userNameIdMap,
            imagePackageMap,
            addDataCleanForm,
            editDataCleanForm,
            rules,
            classInsideCleanForm,
            classAmongCleanForm,
            // function
            onPageNumChange,
            onPageSizeChange,
            addDataClean,
            editDataClean,
            confirmEditDataClean,
            confirmAddDataClean,
            gotoHandle,
            getStatusTitle,
            getTypeTitle,
            classInsideClean,
            classAmongClean,
            completeClean,
            refreshTable,
            confirmClassInsideClean,
            confirmClassAmongClean,
        }
    },
}
</script>
<style lang="less" scoped>
@import "./DataClean.less";
</style>