From 27534f574c9c66ecc2bad46bfd4f701dbef8dac0 Mon Sep 17 00:00:00 2001
From: lizhenhua <1075222162@qq.com>
Date: Sun, 1 Dec 2024 18:13:04 +0800
Subject: [PATCH] tijiao

---
 src/api/dataCenter/annotationTask.js          |   7 +
 src/api/dataCenter/examine.js                 |  68 +++
 .../annotationTask/child/examLabelStudio.vue  | 257 ++++++++++
 .../annotationTask/child/examine.vue          | 459 +++++++++++++++++-
 4 files changed, 790 insertions(+), 1 deletion(-)
 create mode 100644 src/api/dataCenter/examine.js
 create mode 100644 src/views/dataCenter/annotationTask/child/examLabelStudio.vue

diff --git a/src/api/dataCenter/annotationTask.js b/src/api/dataCenter/annotationTask.js
index 9ccaac76..71f760d0 100644
--- a/src/api/dataCenter/annotationTask.js
+++ b/src/api/dataCenter/annotationTask.js
@@ -23,6 +23,13 @@ export function participant(query) {
     params: query
   })
 }
+export function agreement(query) {
+  return request({
+    url: '/ai/annotationTask/audit',
+    method: 'post',
+    data: query
+  })
+}
 
 //创建数据集
 export function add(data) {
diff --git a/src/api/dataCenter/examine.js b/src/api/dataCenter/examine.js
new file mode 100644
index 00000000..807f9940
--- /dev/null
+++ b/src/api/dataCenter/examine.js
@@ -0,0 +1,68 @@
+import request from '@/utils/request'
+
+//查询数据集
+export function list(query) {
+  return request({
+    url: '/ai/annotationTask/list/all',
+    method: 'get',
+    params: query
+  })
+}
+export function creation(query) {
+  return request({
+    url: '/ai/annotationTask/list/creation',
+    method: 'get',
+    params: query
+  })
+}
+
+export function participant(query) {
+  return request({
+    url: '/ai/annotationTask/list/participant',
+    method: 'get',
+    params: query
+  })
+}
+
+//创建数据集
+export function add(data) {
+  return request({
+    url: '/ai/annotationTask/create',
+    method: 'post',
+    data: data
+  })
+}
+// 获取标注任务文件详情
+export function getAnnotationDetails(data) {
+  return request({
+    url: '/ai/annotationTask/create',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getMyNoAnnotatedTask(data) {
+  return request({
+    url: '/ai/annotationTask/getMyNoAuditedTask',
+    method: 'get',
+    params: data
+  })
+}
+
+export function getMyAuditFiles(annotationStatus,taskId) {
+  return request({
+    url: '/ai/annotationTask/getMyAuditFiles/'+annotationStatus+'/'+taskId,
+    method: 'get',
+  })
+}
+
+export function manualAnnotate(data) {
+  return request({
+    url: '/ai/annotationTask/manualAnnotate',
+    method: 'post',
+    data:data
+  })
+}
+
+
+
diff --git a/src/views/dataCenter/annotationTask/child/examLabelStudio.vue b/src/views/dataCenter/annotationTask/child/examLabelStudio.vue
new file mode 100644
index 00000000..0395058c
--- /dev/null
+++ b/src/views/dataCenter/annotationTask/child/examLabelStudio.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="label-studio-annotator">
+    <div id="label-studio" class="annotation-container"></div>
+    <div class="button-container">
+      <button class="agree-button" @click="agreement(1)">同意</button>
+      <button class="disagree-button" @click="showDisagreement = true">不同意</button>
+    </div>
+    <!-- 弹出层 -->
+    <div v-if="showDisagreement" class="layui-layer">
+      <div class="layui-layer-content">
+        <h2><span STYLE="color: red">*</span>填写说明</h2>
+        <textarea v-model="disagreementReason" placeholder="填写不同意的原因"></textarea>
+        <div class="layui-layer-buttons">
+          <button class="layui-btn layui-btn-primary" @click="sendDisagreement">提交</button>
+          <button class="layui-btn layui-btn-danger" @click="closeDisagreementModal">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelStudio from 'label-studio';
+import 'label-studio/build/static/css/main.css';
+import {agreement, manualAnnotate } from '../../../../api/dataCenter/annotationTask';
+
+export default {
+  name: 'LabelStudioAnnotator',
+  props: {
+    fileUrl: { type: String, required: true },
+    taskId: { type: Number, required: true },
+    config: { type: String, required: true },
+    id: { type: Number, required: true },
+    itemIndex: { type: Number, required: true },
+    annotations: {
+      type: Array,
+      default: () => [] // 默认值为空数组
+    }
+  },
+  computed: {
+    index: {
+      get() {
+        return this.itemIndex;
+      },
+      set(value) {
+        this.$parent.updateItemIndex(value); // 更新父组件的索引
+      }
+    }
+  },
+  data() {
+    return {
+      labelStudio: null,
+      annotationsList: [] ,
+      showDisagreement: false, // 控制不同意说明弹出层的显示
+      disagreementReason: '' // 存储不同意的原因
+    };
+  },
+  watch: {
+    fileUrl: 'resetLabelStudio' // 当文件地址变化时，重置LabelStudio
+  },
+  mounted() {
+    this.initLabelStudio(); // 组件挂载完成后初始化LabelStudio
+  },
+  methods: {
+    // 关闭不同意说明弹出层
+    closeDisagreementModal() {
+      this.showDisagreement = false;
+      this.disagreementReason = ''; // 清空原因
+    },
+    // 发送不同意原因到后台
+    sendDisagreement() {
+      if(this.disagreementReason === ""){
+        this.$modal.msgSuccess('说明原因不能为空');
+        return;
+      }
+      agreement({
+        taskId: Number(this.taskId),
+        fileId: Number(this.id),
+        auditFailedReason: this.disagreementReason
+      }).then(response => {
+        this.$modal.msgSuccess('已提交不同意原因');
+        this.closeDisagreementModal(); // 关闭弹出层
+      }).catch(error => {
+        console.log(error);
+      });
+    },
+    // 处理返回的标注数据
+    getAnnotations() {
+      return [{
+        result: this.annotations.map(annotation => ({
+          type: "rectanglelabels",
+          from_name: "label",
+          to_name: "image",
+          value: {
+            rectanglelabels: [annotation.label],
+            x: annotation.x,
+            y: annotation.y,
+            width: annotation.width,
+            height: annotation.height
+          }
+        }))
+      }];
+    },
+    //不同意
+    disagreement(){
+
+    },
+    //同意的接口调用后台
+    agreement(){
+      agreement({
+          taskId : Number(this.taskId),
+          fileId : Number(this.id)
+      }).then(response => {
+        this.$modal.msgSuccess('已同意标注')
+      }).catch(error => {
+        console.log(error);
+      });
+    },
+    // 初始化 LabelStudio
+    initLabelStudio() {
+      this.cleanupLabelStudio(); // 清理之前的实例
+
+      const task = {
+        id: this.id,
+        data: { image: this.fileUrl },
+      };
+      if (this.annotations.length) {
+        task.annotations = this.getAnnotations();
+      }
+
+      this.$nextTick(() => {
+        const labelStudioElement = document.getElementById('label-studio');
+        if (!labelStudioElement) {
+          console.error('Label Studio element not found');
+          return;
+        }
+
+        this.labelStudio = new LabelStudio('label-studio', {
+          config: this.config,
+          interfaces: [],
+          user: { pk: 1, firstName: '标注者', lastName: '用户' },
+          task,
+          onLabelStudioLoad: (LS) => {
+            if (!LS.annotationStore.selectedAnnotation) {
+              const annotation = LS.annotationStore.addAnnotation({ userGenerate: true });
+              LS.annotationStore.selectAnnotation(annotation.id);
+            }
+          },
+        });
+      });
+    },
+    // 重置 LabelStudio
+    resetLabelStudio() {
+      this.cleanupLabelStudio();
+      this.initLabelStudio(); // 重新初始化
+    },
+    // 清理 LabelStudio 实例
+    cleanupLabelStudio() {
+      if (this.labelStudio && this.labelStudio.destroy) {
+        this.labelStudio.destroy();
+      }
+      const labelStudioElement = document.getElementById('label-studio');
+      if (labelStudioElement) {
+        labelStudioElement.innerHTML = ''; // 清空容器
+      }
+      this.labelStudio = null; // 置空实例
+    }
+  }
+};
+</script>
+
+<style scoped>
+.label-studio-annotator {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.annotation-container {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 500px; /* 设置最小高度 */
+}
+
+.button-container {
+  position: absolute;
+  float: right;
+  justify-content: center;
+  margin-left: 28%;
+  top: 53%;
+}
+
+.agree-button, .disagree-button {
+  padding: 10px 20px;
+  margin: 0 5px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.agree-button {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.disagree-button {
+  background-color: #F44336;
+  color: white;
+}
+
+/* 弹出层样式 */
+.layui-layer {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layui-layer-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  width: 400px; /* 宽度 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.layui-layer-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.layui-btn {
+  padding: 10px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.layui-btn-primary {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.layui-btn-danger {
+  background-color: #F44336;
+  color: white;
+}
+</style>
diff --git a/src/views/dataCenter/annotationTask/child/examine.vue b/src/views/dataCenter/annotationTask/child/examine.vue
index cb7768db..973f6a81 100644
--- a/src/views/dataCenter/annotationTask/child/examine.vue
+++ b/src/views/dataCenter/annotationTask/child/examine.vue
@@ -1,9 +1,466 @@
 <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 class="settings-icon">
+                      <i class="el-icon-setting"></i>
+                    </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==='1'" 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 :annotations="annotationResult" :taskId="taskId" :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>
 
+<script>
+import customLabelStudio from './examLabelStudio.vue'
+import { getMyNoAnnotatedTask, getMyAuditFiles } from '../../../../api/dataCenter/examine'
+
+export default {
+  dicts: ['ai_annotate_type'],
+  components: { customLabelStudio },
+  data() {
+    return {
+      itemIndex: 0,
+      annotationResult: [],
+      item: {},
+      taskList: [],
+      task: {
+        id: 0,
+        data: {
+          image: ''
+        }
+      },
+      labelConfig: `
+        <View>
+          <Image name="image" value="$image"/>
+          <RectangleLabels name="label" toName="image">
+          </RectangleLabels>
+        </View>
+      `,
+      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) {
+      const item = this.images[val];
+      this.images[val - 1].fileAnnotationStatus = '1';
+      this.itemIndex = val;
+      this.updateTaskData(item);
+    },
+
+    // 加载未标注的任务列表
+    loadTaskList() {
+      getMyNoAnnotatedTask().then(res => {
+        this.taskList = res.data;
+      });
+    },
+
+    // 根据任务ID选择审核并加载对应的文件
+    selectTask(id) {
+      this.resetImages();
+      this.taskId = id;
+      this.fetchImages();
+    },
+
+    // 切换标注类型并加载任务文件
+    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 = [];
+      //this.annotationType = 0;
+    },
+
+    // 获取当前任务ID审核注类型的图像数据
+    fetchImages() {
+      if (!this.taskId) return;
+      getMyAuditFiles(this.annotationType, this.taskId).then(response => {
+        //alert(JSON.stringify(response))
+        this.itemIndex = 0;
+        this.images = response.data;
+        this.updateTaskData(
+          this.images[this.itemIndex]);
+      });
+    },
+
+    // 更新任务的数据
+    updateTaskData(item) {
+      if (item !== undefined){
+        this.task.data.image = `http://192.168.0.14:9090/bonus/${item.fileUrl}`;
+        this.task.id = item.fileId;
+        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: 24px;
+          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>