483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
<template>
|
|
<div class="div-main">
|
|
<!-- 顶部区域 -->
|
|
<div class="top-part">
|
|
<div class="top-content">
|
|
|
|
<!-- 右侧选择框和设置按钮 -->
|
|
<div class="top-content-right">
|
|
<el-select
|
|
v-model="taskId"
|
|
placeholder="请选择标注任务"
|
|
clearable
|
|
class="select-task"
|
|
@change="selectTask"
|
|
>
|
|
<el-option
|
|
v-for="dict in taskList"
|
|
:key="dict.taskId"
|
|
:label="dict.taskName"
|
|
:value="dict.taskId"
|
|
|
|
/>
|
|
</el-select>
|
|
<span v-if="auditFailedReason" class="settings-icon">
|
|
驳回原因:{{ auditFailedReason}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部区域 -->
|
|
<div class="bottom-part">
|
|
<div class="bottom-content">
|
|
<div class="bottom-content-left">
|
|
<div class="bottom-content-left-top">
|
|
<div>
|
|
<el-button
|
|
type="primary"
|
|
:class="{'is-selected': annotationType===0}"
|
|
plain
|
|
size="mini"
|
|
@click="toggleSelected(0)"
|
|
>全部
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
:class="{'is-selected': annotationType===1}"
|
|
plain
|
|
size="mini"
|
|
@click="toggleSelected(1)"
|
|
>已标注
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
:class="{'is-selected': annotationType===2}"
|
|
plain
|
|
size="mini"
|
|
@click="toggleSelected(2)"
|
|
>未标注
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
:class="{'is-selected': annotationType===3}"
|
|
plain
|
|
size="mini"
|
|
@click="toggleSelected(3)"
|
|
>审核驳回
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-content-left-bottom">
|
|
<div>
|
|
<ul>
|
|
<li v-for="(item, index) in images" :key="item.fileId" class="list-item">
|
|
<div @click="setItem(item, index)">
|
|
<input type="checkbox" :checked="item.fileAnnotationStatus!=='0'" disabled>
|
|
<span :class="{'highlighted': itemIndex === index}" style="font-size: 14px; margin-left: 5px;"
|
|
>{{ item.fileName }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-content-center">
|
|
<div>
|
|
<custom-label-studio :file-annotation-status="fileAnnotationStatus" :annotations="annotationResult"
|
|
:taskId="taskId || 0" :item-index="itemIndex"
|
|
:config="labelConfig" :id="task.id" :file-url="task.data.image"
|
|
@update-itemIndex="updateItemIndex"
|
|
></custom-label-studio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import customLabelStudio from './customLabelStudio.vue'
|
|
import { getMyNoAnnotatedTask, getMyAnnotationFiles } from '../../../../api/dataCenter/annotationTask'
|
|
|
|
export default {
|
|
dicts: ['ai_annotate_type'],
|
|
components: { customLabelStudio },
|
|
data() {
|
|
return {
|
|
auditFailedReason: '',
|
|
fileAnnotationStatus: '1',
|
|
itemIndex: 0,
|
|
annotationResult: [],
|
|
item: {},
|
|
taskList: [],
|
|
task: {
|
|
id: 0,
|
|
data: {
|
|
image: ''
|
|
}
|
|
},
|
|
labelConfig: `
|
|
`,
|
|
taskId: undefined, // 当前选中的任务 ID
|
|
leftIcons: [
|
|
'el-icon-circle-plus-outline',
|
|
'el-icon-remove-outline',
|
|
'el-icon-search',
|
|
'el-icon-search',
|
|
'el-icon-search',
|
|
'el-icon-search'
|
|
], // 顶部左侧按钮的图标
|
|
count: 600,
|
|
annotationType: 0,
|
|
images: []
|
|
}
|
|
},
|
|
created() {
|
|
this.loadTaskList() // 初始化时加载任务列表
|
|
},
|
|
methods: {
|
|
// 更新项的索引并切换任务数据
|
|
updateItemIndex(val, data) {
|
|
const item = this.images[val]
|
|
this.images[val - 1].fileAnnotationStatus = '1'
|
|
this.images[val - 1].annotationResult = data
|
|
this.itemIndex = val
|
|
this.updateTaskData(item)
|
|
},
|
|
|
|
// 加载未标注的任务列表
|
|
loadTaskList() {
|
|
getMyNoAnnotatedTask().then(res => {
|
|
this.taskList = res.data
|
|
})
|
|
},
|
|
|
|
// 根据任务ID选择任务并加载对应的文件
|
|
selectTask(id) {
|
|
this.resetImages()
|
|
const result = this.taskList.find(item => item.taskId === id)
|
|
const labels = result.labels.split(',').map(role => role.trim())
|
|
const labelElements = labels
|
|
.map((label, index) => `<Label value="${label}" background="${this.getColor(index)}"/>`)
|
|
.join('')
|
|
this.labelConfig = `<View>
|
|
<Image name="image" value="$image"/>
|
|
<RectangleLabels name="label" toName="image">
|
|
${labelElements}
|
|
</RectangleLabels>
|
|
</View>`
|
|
this.taskId = id
|
|
this.fetchImages()
|
|
},
|
|
getColor(index) {
|
|
const randomColor = () => {
|
|
const r = Math.floor(Math.random() * 256) // 0-255
|
|
const g = Math.floor(Math.random() * 256) // 0-255
|
|
const b = Math.floor(Math.random() * 256) // 0-255
|
|
return `rgb(${r}, ${g}, ${b})`
|
|
}
|
|
return randomColor()
|
|
},
|
|
// 切换标注类型并加载任务文件
|
|
toggleSelected(type) {
|
|
if (this.annotationType === type) return
|
|
this.annotationType = type
|
|
this.resetImages()
|
|
this.fetchImages()
|
|
},
|
|
|
|
// 设置标注项，更新任务数据和标注结果
|
|
setItem(item, index) {
|
|
this.annotationResult = JSON.parse(item.annotationResult)
|
|
this.itemIndex = index
|
|
this.updateTaskData(item)
|
|
},
|
|
|
|
// 重置图像数据
|
|
resetImages() {
|
|
this.images = []
|
|
},
|
|
|
|
// 获取当前任务ID和标注类型的图像数据
|
|
fetchImages() {
|
|
if (!this.taskId) return
|
|
getMyAnnotationFiles(this.annotationType, this.taskId).then(response => {
|
|
console.log(response)
|
|
this.itemIndex = 0
|
|
this.images = response.data
|
|
this.updateTaskData(this.images[this.itemIndex])
|
|
})
|
|
},
|
|
|
|
// 更新任务的数据
|
|
updateTaskData(item) {
|
|
this.auditFailedReason= item.auditFailedReason;
|
|
let url = JSON.parse(localStorage.getItem('minIoUrl'))
|
|
this.task.data.image = `${url.minioUrl}${item.fileUrl}`
|
|
this.task.id = item.fileId
|
|
this.fileAnnotationStatus = item.fileAnnotationStatus
|
|
this.annotationResult = JSON.parse(item.annotationResult)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
/* 默认按钮样式 */
|
|
.el-button {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 选中时的样式 */
|
|
.el-button.is-selected {
|
|
background-color: #007bff !important; /* 设置选中背景色 */
|
|
border-color: #007bff !important; /* 设置选中边框色 */
|
|
color: white !important; /* 设置字体颜色 */
|
|
}
|
|
|
|
.div-main {
|
|
width: 100%;
|
|
height: calc(100vh - 84px);
|
|
|
|
/* 顶部样式 */
|
|
.top-part {
|
|
width: 100%;
|
|
height: 60px;
|
|
padding: 10px;
|
|
|
|
.top-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
|
|
.top-content-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px; /* 按钮之间的间距 */
|
|
}
|
|
|
|
.top-content-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
.select-task {
|
|
flex-shrink: 0; /* 防止选择框缩小 */
|
|
}
|
|
|
|
.settings-icon {
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部样式 */
|
|
.bottom-part {
|
|
width: 100%;
|
|
height: calc(100% - 60px);
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
.bottom-content {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border: 1px solid #dfe4ed;
|
|
|
|
.bottom-content-left,
|
|
.bottom-content-center,
|
|
.bottom-content-right {
|
|
height: 100%;
|
|
}
|
|
|
|
.bottom-content-left {
|
|
width: 20%;
|
|
|
|
.bottom-content-left-bottom,
|
|
.bottom-content-left-top {
|
|
width: 100%;
|
|
padding: 5px;
|
|
}
|
|
|
|
.bottom-content-left-top {
|
|
height: 50px;
|
|
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
}
|
|
|
|
.bottom-content-left-bottom {
|
|
height: calc(100% - 50px);
|
|
|
|
> div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: 0;
|
|
list-style: none; /* 移除默认的点样式 */
|
|
li {
|
|
width: 100%;
|
|
padding: 1px;
|
|
background-color: #FFFFFF;
|
|
|
|
div {
|
|
height: 40px;
|
|
padding-left: 2px;
|
|
display: flex;
|
|
cursor: pointer; /* 手势效果 */
|
|
align-items: center;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
appearance: none; /* 隐藏默认复选框样式 */
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 1px solid #4d4e51;
|
|
border-radius: 4px; /* 圆角方框 */
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="checkbox"]:checked::after {
|
|
content: '✔'; /* 显示勾符号 */
|
|
color: white;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background-color: rgb(64, 158, 255); /* 改变选中颜色 */
|
|
border-color: rgb(64, 158, 255);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 针对自定义滚动条样式 */
|
|
ul::-webkit-scrollbar {
|
|
cursor: default; /* 对滚动条自定义光标 */
|
|
width: 5px;
|
|
}
|
|
|
|
ul::-webkit-scrollbar-thumb {
|
|
background-color: #888;
|
|
cursor: pointer; /* 手势效果 */
|
|
}
|
|
|
|
ul::-webkit-scrollbar-thumb:hover {
|
|
background-color: #555;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-content-center {
|
|
width: 80%;
|
|
padding: 5px;
|
|
|
|
> div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
}
|
|
}
|
|
|
|
.bottom-content-right {
|
|
width: 20%;
|
|
padding: 5px;
|
|
|
|
.bottom-content-right-center {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.bottom-content-right-top {
|
|
width: 100%;
|
|
height: calc(50% - 25px);
|
|
padding: 5px;
|
|
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
}
|
|
}
|
|
|
|
.bottom-content-right-middle {
|
|
width: 100%;
|
|
height: calc(50% - 25px);
|
|
padding: 5px;
|
|
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
}
|
|
}
|
|
|
|
.bottom-content-right-bottom {
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 5px;
|
|
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
border: 1px solid #dfe4ed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.highlighted {
|
|
color: rgb(64, 158, 255); /* 选中项文本颜色 */
|
|
font-size: 16px; /* 选中项字体大小 */
|
|
}
|
|
|
|
</style>
|