bonus-ui/src/views/dataCenter/annotationTask/child/dataAnnotations.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>