bonus-ui/src/views/dataCenter/annotationTask/child/initiatedTasks.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
            v-if="scope.row.reviewerIds.includes(getUserId)"
            :disabled="scope.row.status0Count ===0"
            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 { creation, 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])
      }

      creation(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
    },
    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>