From 578b0f7b8ddb1ccd40d5890c96d82011e5ebbed3 Mon Sep 17 00:00:00 2001
From: jiang <jiang@bonus>
Date: Sun, 1 Dec 2024 15:08:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 src/api/dataCenter/annotationTask.js          |   9 +
 .../child/customLabelStudio.vue               | 246 ++++++++++--------
 .../annotationTask/child/dataAnnotations.vue  | 173 ++++++------
 4 files changed, 240 insertions(+), 190 deletions(-)

diff --git a/package.json b/package.json
index 19fb136a..2d3a208a 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "crypto-js": "^4.2.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
+    "fabric": "^5.3.0",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
@@ -51,6 +52,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "label-studio": "^1.0.1",
     "nprogress": "0.2.0",
+    "prop-types": "^15.8.1",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sm-crypto": "^0.3.13",
diff --git a/src/api/dataCenter/annotationTask.js b/src/api/dataCenter/annotationTask.js
index 25bc8b72..9ccaac76 100644
--- a/src/api/dataCenter/annotationTask.js
+++ b/src/api/dataCenter/annotationTask.js
@@ -56,4 +56,13 @@ export function getMyAnnotationFiles(annotationStatus,taskId) {
   })
 }
 
+export function manualAnnotate(data) {
+  return request({
+    url: '/ai/annotationTask/manualAnnotate',
+    method: 'post',
+    data:data
+  })
+}
+
+
 
diff --git a/src/views/dataCenter/annotationTask/child/customLabelStudio.vue b/src/views/dataCenter/annotationTask/child/customLabelStudio.vue
index 8f30988b..ff95f26a 100644
--- a/src/views/dataCenter/annotationTask/child/customLabelStudio.vue
+++ b/src/views/dataCenter/annotationTask/child/customLabelStudio.vue
@@ -1,144 +1,176 @@
 <template>
-  <div>
-    <div ref="labelStudio" id="label-studio-container"></div>
+  <div class="label-studio-annotator">
+    <div id="label-studio" class="annotation-container"></div>
   </div>
 </template>
 
 <script>
-import LabelStudio from 'label-studio'
-import 'label-studio/build/static/css/main.css'
+import LabelStudio from 'label-studio';
+import 'label-studio/build/static/css/main.css';
+import { manualAnnotate } from '../../../../api/dataCenter/annotationTask';
 
 export default {
-  name: 'CustomLabelStudio',
+  name: 'LabelStudioAnnotator',
   props: {
-    task: {
-      type: String,
-      required: true
+    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,
-      customButtons: [
-        {
-          id: "custom-button",
-          name: "自定义按钮",
-          icon: "🔍",
-          action: () => {
-            console.log("自定义按钮被点击了！")
-          }
-        }
-      ],
-      chineseLocalization: {
-        "DONE": "完成",
-        "SKIP": "跳过",
-        "SUBMIT": "提交",
-        "ANNOTATION": "标注",
-        "ANNOTATIONS": "标注",
-        "LABEL": "标签",
-        "LABELS": "标签",
-        "RELATIONS": "关系",
-        "REGIONS": "区域",
-        "RESULTS": "结果",
-        // 添加更多需要翻译的文本...
-      },
-      labelConfig: `
-        <View>
-          <Image name="image" value="$image"/>
-          <RectangleLabels name="label" toName="image">
-            <Label value="人" background="#ff0000"/>
-            <Label value="车" background="#00ff00"/>
-          </RectangleLabels>
-        </View>
-      `,
-      previousAnnotations: [] // 用于保存上次的标注框数据，用于比较变化
-    }
+      annotationsList: [] // 用于存储当前标注的结果
+    };
   },
-  watch:{
-
+  watch: {
+    fileUrl: 'resetLabelStudio' // 当文件地址变化时，重置LabelStudio
   },
   mounted() {
-    this.initLabelStudio();
-  },
-  beforeDestroy() {
-    if (this.labelStudio) {
-      this.labelStudio.destroy();
-    }
+    this.initLabelStudio(); // 组件挂载完成后初始化LabelStudio
   },
   methods: {
+    // 处理返回的标注数据
+    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
+          }
+        }))
+      }];
+    },
+    // 初始化 LabelStudio
     initLabelStudio() {
-      this.labelStudio = new LabelStudio('label-studio-container', {
-        config: this.labelConfig,
-        interfaces: [
-          "panel",
-          "update",
-          "controls",
-        ],
-        user: {
-          pk: 1,
-          firstName: "James",
-          lastName: "Dean"
-        },
-        task:JSON.parse( this.task),
-        locale: 'zh_CN',
-        messages: this.chineseLocalization,
-        onLabelStudioLoad: (LS) => {
-          console.log("Label Studio 已加载", LS);
+      console.log(this.annotations);
+      this.cleanupLabelStudio(); // 清理之前的实例
 
-          // 定期检查标注框数据
-          setInterval(() => {
-            this.checkAnnotations(LS);
-          }, 1000);  // 每秒检查一次
+      const task = {
+        id: this.id,
+        data: { image: this.fileUrl },
+      };
 
-          // 手动添加一个标注框并选中
-          const annotation = LS.annotationStore.addAnnotation({
-            userGenerate: true
-          });
-          // 获取并输出标注的几何信息
-          const box = annotation.geometry;
+      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: ["update", "submit", "controls"],
+          user: { pk: 1, firstName: '标注者', lastName: '用户' },
+          task,
+          onLabelStudioLoad: (LS) => {
+            if (!LS.annotationStore.selectedAnnotation) {
+              const annotation = LS.annotationStore.addAnnotation({ userGenerate: true });
+              LS.annotationStore.selectAnnotation(annotation.id);
+            }
+          },
+          onSubmitAnnotation: (LS, annotation) => this.handleAnnotationSubmit(LS, annotation, task),
+          onUpdateAnnotation:(LS, annotation) => this.handleAnnotationSubmit(LS, annotation, task),
+        });
       });
     },
+    // 提交标注结果
+    async handleAnnotationSubmit(LS, annotation, task) {
+      const results = annotation.serializeAnnotation();
+      if (!results) return;
 
-    // 检查标注框数据
-    checkAnnotations(LS) {
-      const currentAnnotations = LS.annotationStore.data;  // 获取当前的标注数据
-      // 如果标注数据发生了变化
-      if (this.hasAnnotationsChanged(currentAnnotations)) {
-        console.log('标注数据发生变化:', currentAnnotations);
-        this.previousAnnotations = currentAnnotations;  // 更新保存的标注数据
+      const formattedAnnotations = results.map(result => {
+        if (result.type === 'rectanglelabels') {
+          return {
+            label: result.value.rectanglelabels[0],
+            x: result.value.x,
+            y: result.value.y,
+            width: result.value.width,
+            height: result.value.height
+          };
+        }
+        return result;
+      });
+
+      const data = {
+        annotationResult: JSON.stringify(formattedAnnotations),
+        taskId: this.taskId,
+        fileId: this.id
+      };
+
+      try {
+        await manualAnnotate(data);
+        this.annotationsList.push({
+          taskId: task.id,
+          annotation: JSON.stringify(formattedAnnotations),
+          url: this.fileUrl
+        });
+        this.index++; // 更新索引
+      } catch (error) {
+        console.error('Failed to submit annotation:', error);
+      } finally {
+        this.cleanupLabelStudio(); // 清理 LabelStudio 实例
       }
     },
-
-    // 比较标注数据是否发生变化
-    hasAnnotationsChanged(currentAnnotations) {
-      if (currentAnnotations.length !== this.previousAnnotations.length) {
-        return true; // 数量不一样说明发生了变化
+    // 重置 LabelStudio
+    resetLabelStudio() {
+      this.cleanupLabelStudio();
+      this.initLabelStudio(); // 重新初始化
+    },
+    // 清理 LabelStudio 实例
+    cleanupLabelStudio() {
+      if (this.labelStudio && this.labelStudio.destroy) {
+        this.labelStudio.destroy();
       }
-
-      // 比较每个标注框的几何信息
-      for (let i = 0; i < currentAnnotations.length; i++) {
-        const current = currentAnnotations[i];
-        const previous = this.previousAnnotations[i];
-
-        // 如果标注框的几何信息有变化，返回 true
-        if (JSON.stringify(current.geometry) !== JSON.stringify(previous.geometry)) {
-          return true;
-        }
+      const labelStudioElement = document.getElementById('label-studio');
+      if (labelStudioElement) {
+        labelStudioElement.innerHTML = ''; // 清空容器
       }
-
-      return false;
+      this.labelStudio = null; // 置空实例
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.label-studio-container {
-  height: 600px;
+.label-studio-annotator {
   width: 100%;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.annotation-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 500px; /* 设置最小高度 */
 }
 </style>
diff --git a/src/views/dataCenter/annotationTask/child/dataAnnotations.vue b/src/views/dataCenter/annotationTask/child/dataAnnotations.vue
index c04c206f..a0edd708 100644
--- a/src/views/dataCenter/annotationTask/child/dataAnnotations.vue
+++ b/src/views/dataCenter/annotationTask/child/dataAnnotations.vue
@@ -3,15 +3,7 @@
     <!-- 顶部区域 -->
     <div class="top-part">
       <div class="top-content">
-        <!-- 左侧按钮组 -->
-        <div class="top-content-left">
-          <el-button v-for="(icon, index) in leftIcons"
-                     :key="index"
-                     :icon="icon"
-                     circle
-          >
-          </el-button>
-        </div>
+
         <!-- 右侧选择框和设置按钮 -->
         <div class="top-content-right">
           <el-select
@@ -29,9 +21,9 @@
 
             />
           </el-select>
-          <span class="settings-icon">
-            <i class="el-icon-setting"></i>
-          </span>
+          <!--          <span class="settings-icon">
+                      <i class="el-icon-setting"></i>
+                    </span>-->
         </div>
       </div>
     </div>
@@ -78,10 +70,11 @@
           <div class="bottom-content-left-bottom">
             <div>
               <ul>
-                <li v-for="item in images" class="list-item">
-                  <div @click="setItem(item)">
-                    <input type="checkbox" :checked="false" disabled>
-                    <span style="font-size: 14px;margin-left: 5px">{{ item.fileName }}</span>
+                <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>
@@ -90,43 +83,10 @@
         </div>
         <div class="bottom-content-center">
           <div>
-            <custom-label-studio :task="JSON.stringify(task)"/>
-          </div>
-        </div>
-        <div class="bottom-content-right">
-          <div class="bottom-content-right-center">
-            <div class="bottom-content-right-top">
-              <div>
-
-              </div>
-            </div>
-            <div class="bottom-content-right-middle">
-              <div>
-
-              </div>
-            </div>
-            <div class="bottom-content-right-bottom">
-              <div>
-                <el-button
-                  type="primary"
-                  plain
-                  size="mini"
-                >上一张
-                </el-button>
-                <el-button
-                  type="primary"
-                  plain
-                  size="mini"
-                >下一张
-                </el-button>
-                <el-button
-                  type="primary"
-                  plain
-                  size="mini"
-                >保存
-                </el-button>
-              </div>
-            </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>
@@ -136,20 +96,32 @@
 
 <script>
 import customLabelStudio from './customLabelStudio.vue'
-import { getMyNoAnnotatedTask,getMyAnnotationFiles } from '../../../../api/dataCenter/annotationTask'
+import { getMyNoAnnotatedTask, getMyAnnotationFiles } from '../../../../api/dataCenter/annotationTask'
 
 export default {
   dicts: ['ai_annotate_type'],
   components: { customLabelStudio },
   data() {
     return {
-      taskList:[],
+      itemIndex: 0,
+      annotationResult: [],
+      item: {},
+      taskList: [],
       task: {
-        id: 1,
+        id: 0,
         data: {
-          image: 'http://192.168.0.14:9090/bonus/1/测试/xigu_wangwang_3787075_37.jpg'
+          image: ''
         }
       },
+      labelConfig: `
+        <View>
+          <Image name="image" value="$image"/>
+          <RectangleLabels name="label" toName="image">
+            <Label value="人" background="#ff0000"/>
+            <Label value="车" background="#00ff00"/>
+          </RectangleLabels>
+        </View>
+      `,
       taskId: undefined, // 当前选中的任务 ID
       leftIcons: [
         'el-icon-circle-plus-outline',
@@ -165,38 +137,67 @@ export default {
     }
   },
   created() {
-    this.listSelection()
+    this.loadTaskList(); // 初始化时加载任务列表
   },
   methods: {
-    listSelection() {
-      getMyNoAnnotatedTask({}).then(res => {
-       this.taskList = res.data;
-      })
+    // 更新项的索引并切换任务数据
+    updateItemIndex(val) {
+      const item = this.images[val];
+      this.images[val - 1].fileAnnotationStatus = '1';
+      this.itemIndex = val;
+      this.updateTaskData(item);
     },
-    selectTask(id){
-      this.images = [];
-      this.annotationType = 0;
+
+    // 加载未标注的任务列表
+    loadTaskList() {
+      getMyNoAnnotatedTask().then(res => {
+        this.taskList = res.data;
+      });
+    },
+
+    // 根据任务ID选择任务并加载对应的文件
+    selectTask(id) {
+      this.resetImages();
       this.taskId = id;
-      getMyAnnotationFiles(this.annotationType,id).then(response => {
-        this.images =response.data;
-      })
-    },
-    load() {
+      this.fetchImages();
     },
+
+    // 切换标注类型并加载任务文件
     toggleSelected(type) {
-      this.images = [];
-      if (this.annotationType !== type) {
-        this.annotationType = type
-      }
-      if (!this.taskId){
-        return
-      }
-      getMyAnnotationFiles(this.annotationType,this.taskId).then(response => {
-       this.images =response.data;
-      })
+      if (this.annotationType === type) return;
+      this.annotationType = type;
+      this.resetImages();
+      this.fetchImages();
     },
-    setItem(item) {
-      console.log(item)
+
+    // 设置标注项，更新任务数据和标注结果
+    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;
+      getMyAnnotationFiles(this.annotationType, this.taskId).then(response => {
+        this.itemIndex = 0;
+        this.images = response.data;
+        this.updateTaskData(this.images[this.itemIndex]);
+      });
+    },
+
+    // 更新任务的数据
+    updateTaskData(item) {
+      this.task.data.image = `http://192.168.0.14:9090/bonus/${item.fileUrl}`;
+      this.task.id = item.fileId;
+      this.annotationResult = JSON.parse(item.annotationResult);
     }
   }
 }
@@ -383,7 +384,7 @@ export default {
       }
 
       .bottom-content-center {
-        width: 60%;
+        width: 80%;
         padding: 5px;
 
         div {
@@ -453,4 +454,10 @@ export default {
     }
   }
 }
+
+.highlighted {
+  color: rgb(64, 158, 255); /* 选中项文本颜色 */
+  font-size: 16px; /* 选中项字体大小 */
+}
+
 </style>