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="datasetName">
        <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="annotateTaskStatus" width="160">
        <template slot-scope="scope">
          <span>{{annotateTaskStatus.find(opt => opt.value === scope.row.annotateTaskStatus).label}}</span>
        </template>
      </el-table-column>
      <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.totalCount - scope.row.status0Count) + '/' + 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.totalCount - (scope.row.status2Count+scope.row.status3Count)}}</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
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleExamine(scope.row)"
            v-hasPermi="['dataCenter:task:file:audit']"
          >审核</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDimension(scope.row)"
            v-hasPermi="['dataCenter:sample:edit']"
          >智能标注</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAnnotation(scope.row)"
            v-hasPermi="['dataCenter:task:file:annotation']"
          >标注</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleRelease(scope.row)"
            v-hasPermi="['dataCenter:version:create']"
          >发布</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>

  </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'

export default {
  components: { 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,
      // 查询参数
      queryParams: {
        time:[],
        pageNum: 1,
        pageSize: 10,
        datasetName: null,
      },
    };
  },
  created() {
    this.getList();
    // 初始化表格高度
    this.updateTableHeight();
    // 监听窗口大小变化
    window.addEventListener("resize", this.updateTableHeight);
  },
  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])
      }

      console.log(this.queryParams)
      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.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){

    },
    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.totalCount - row.status0Count) / 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;
    },
  }
}
</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>