bonus-ui/src/views/dataCenter/annotationTask/child/allTasks.vue

295 lines
9.3 KiB
Vue

<template>
<div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="85px">
<el-form-item label="任务标题" prop="taskName">
<el-input
v-model="queryParams.taskName"
placeholder="请输入任务标题"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="时间" prop="time">
<el-date-picker
v-model="queryParams.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
<el-button
style="float: right"
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['dataCenter:task:create']"
>新建
</el-button>
</el-form>
<el-table style="width: 100%" v-loading="loading" :data="list" :height="tableHeight"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center"/>
<el-table-column type="index" label="序号" align="center" min-width="50"/>
<el-table-column label="开始时间-结束时间" align="center" show-overflow-tooltip prop="datasetName"
min-width="200"
>
<template slot-scope="scope">
<span v-show="scope.row.startTime !==null && scope.row.endTime !==null"
>{{ parseTime(scope.row.startTime) + ' 至 ' + parseTime(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column label="任务标题" align="center" show-overflow-tooltip prop="taskName"/>
<el-table-column label="负责人员" align="center" show-overflow-tooltip prop="ownerName" min-width="100"/>
<el-table-column label="所属数据集" show-overflow-tooltip align="center" prop="datasetName"/>
<el-table-column label="标注进度(已标注个数/总数)" show-overflow-tooltip min-width="140" align="center"
prop="createBy"
>
<template slot-scope="scope">
<div style="display: flex;align-items: center;">
<!-- 使用 v-if 确保当 annotatedCount > 0 时渲染进度条 -->
<el-progress
v-if="scope.row.totalCount > 0"
color="#13ce66"
:percentage="getPercentage(scope.row)"
style="width: 150px;"
/>
<!-- 显示标注进度 -->
<span>({{ (scope.row.status1Count + scope.row.status2Count) + '/' + scope.row.totalCount }})</span>
</div>
</template>
</el-table-column>
<el-table-column label="待审核个数" show-overflow-tooltip align="center" prop="createBy">
<template slot-scope="scope">
<span>{{ scope.row.status1Count }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="140" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
v-if="scope.row.annotatorIds.includes(getUserId)"
size="mini"
type="text"
@click="handleExamine(scope.row)"
v-hasPermi="['dataCenter:sample:edit']"
>审核
</el-button>
<el-button
size="mini"
type="text"
@click="handleDimension(scope.row)"
v-hasPermi="['dataCenter:sample:edit']"
>智能标注
</el-button>
<el-button
v-if="scope.row.reviewerIds.includes(getUserId)"
size="mini"
type="text"
@click="handleAnnotation(scope.row)"
v-hasPermi="['dataCenter:sample:edit']"
:disabled="scope.row.status0Count ===0"
>标注
</el-button>
<el-button
size="mini"
type="text"
@click="handleRelease(scope.row)"
v-hasPermi="['dataCenter:sample:edit']"
>发布
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 新建数据集弹窗 -->
<add-task-dialog :open="addOpen" :get-list="getList" @dialog-cancel="handleCancel"></add-task-dialog>
<release-version-dialog :get-list="getList" :dataset-id="datasetId" :open="releaseOpen" :task-id="taskId"
:last-version-name="lastVersionName" @dialog-cancel="handleCancel"
></release-version-dialog>
<ai-label-dialog :open="aiOpen" :get-list="getList" :task-id="taskId" @dialog-cancel="handleCancel"
/>
</div>
</template>
<script>
import { list, setPublic } from '@/api/dataCenter/annotationTask'
import addTaskDialog from '../dialog/addTaskDialog'
import releaseVersionDialog from '../dialog/releaseVersionDialog.vue'
import { parseTime } from '@/utils/bonus'
import aiLabelDialog from '../dialog/aiLabelDialog.vue'
import store from '../../../../store'
export default {
components: { aiLabelDialog, releaseVersionDialog, addTaskDialog },
name: 'allTasks',
data() {
return {
annotateTaskStatus: [
{ label: '未标注', value: '0' },
{ label: '正在标注', value: '1' },
{ label: '已标注', value: '2' },
{ label: '正在审核', value: '3' },
{ label: '已审核', value: '4' }
],
lastVersionName: '',
taskId: 0,
datasetId: 0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
tableHeight: 0,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
addOpen: false,
releaseOpen: false,
aiOpen: false,
// 查询参数
queryParams: {
time: [],
pageNum: 1,
pageSize: 10,
taskName: null
},
showModal: false
}
},
created() {
console.log()
this.getList()
// 初始化表格高度
this.updateTableHeight()
// 监听窗口大小变化
window.addEventListener('resize', this.updateTableHeight)
},
computed: {
getUserId() {
return store.state.user.id
}
},
methods: {
parseTime,
updateTableHeight() {
// 设置表格高度为窗口高度减去其他元素高度
const headerHeight = 300 // 头部高度,可以调整
const footerHeight = 80 // 底部高度,可以调整
this.tableHeight = window.innerHeight - headerHeight - footerHeight
},
/**获取数据 **/
getList() {
this.loading = true
if (this.queryParams.time.length > 0) {
this.queryParams.startTime = parseTime(this.queryParams.time[0])
this.queryParams.endTime = parseTime(this.queryParams.time[1])
}
list(this.queryParams).then(response => {
console.log(response)
this.list = response.rows
this.total = response.total
this.loading = false
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.queryParams.time = []
this.queryParams.startTime = null
this.queryParams.endTime = null
this.handleQuery()
},
handleAdd() {
this.addOpen = true
},
handleRelease(row) {
this.datasetId = row.datasetId
this.taskId = row.taskId
this.lastVersionName = row.lastVersionName || ''
console.log(this.lastVersionName)
this.releaseOpen = true
},
handleDimension(row) {
this.aiOpen = true
this.taskId = row.taskId
},
handleAnnotation(row) {
this.$tab.openPage('数据标注', '/dataCenter/annotationTask/dataAnnotations/index/' + row.taskId)
},
handleExamine(row) {
this.$tab.openPage('数据审核', '/dataCenter/annotationTask/examine/index/' + row.taskId)
},
getPercentage(row) {
if (row.totalCount > 0 && row.status0Count >= 0) {
let percentage = Math.floor((row.status1Count / row.totalCount) * 100)
// 确保 percentage 在 0 到 100 之间
return Math.min(Math.max(percentage, 0), 100)
}
return 0 // 如果没有标注数据,返回 0%
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.datasetId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
// 处理取消事件
handleCancel() {
this.addOpen = false
this.releaseOpen = false
this.aiOpen = false
}
}
}
</script>
<style scoped>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>