image改

DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue

@@ -29,6 +29,8 @@
               <!--        <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>-->
               <el-button class="tool-button" type="primary"  >多边形标注</el-button>
               <el-button class="tool-button" type="primary"  >矩形标注</el-button>
+              <!--测试用 添加标注区域-->
+              <el-button class="tool-button" type="primary"  @click="addLabel">添加标注区域</el-button>
               <el-button class="tool-button" type="primary"  @click="deleteAnnotation">删除</el-button>
             </el-button-group>
           </div>
@@ -108,69 +110,43 @@ export default {
   name: 'imageAnnotation',
   data () {
     return {
-      pictureId: 0,
       scaleSize: 1,
       height_res: 0,
       activeIndex1: 1,
-      image_list: [{
-        label: 'image1.jpg',
-        children: [{
-          label: '标注1'
-        },
-        {
-          label: '标注2'
+      // 这个测试数据可以么
+      testData: {
+        "relationId": 123,
+        "imageUrl": "...",
+        "labelList": [{
+          "labelId": "1",
+          "labelName": "label1",
+          "pointList": [{
+              "pointId": "1-1",
+              "X": 1.1,
+              "Y": 2.2
+          }, {
+              "pointId": "1-2",
+              "X": 1.2,
+              "Y": 2.3
+          }]
+        },{
+          "labelId": "2",
+          "labelName": "label2",
+          "pointList": [{
+              "pointId": "2-1",
+              "X": 1.1,
+              "Y": 2.2
+          }, {
+              "pointId": "2-2",
+              "X": 1.2,
+              "Y": 2.3
+          }]
         }]
       },
-      {
-        label: 'image2.jpg',
-        children: [{
-          label: '标注1'
-        },
-        {
-          label: '标注2'
-        }]
-      }],
-      layer_list: [{
-        label: 'image1.jpg',
-        children: [{
-          label: '标注1'
-        },
-        {
-          label: '标注2'
-        }]
+      imageNum: -1,
+      data: {
+        
       },
-      {
-        label: 'image2.jpg',
-        children: [{
-          label: '标注1'
-        },
-        {
-          label: '标注2'
-        }]
-      }],
-      data: [{
-        label: '图片1',
-        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
-        children: [{
-          label: '二级 1-1'
-        }]
-      }, {
-        label: '图片2',
-        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
-        children: [{
-          label: '二级 2-1'
-        }, {
-          label: '二级 2-2'
-        }]
-      }, {
-        label: '图片3',
-        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
-        children: [{
-          label: '二级 3-1'
-        }, {
-          label: '二级 3-2'
-        }]
-      }],
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -178,6 +154,8 @@ export default {
     }
   },
   mounted () {
+    this.getLabelList();
+
     //加载图片
     var myParent = document.getElementById('center_pic');
     var myImage = document.createElement('img');
@@ -280,7 +258,45 @@ export default {
       else {
         alert('已经是第一张图片了');
       }
-    }
+    },
+    getLabelList() {
+      this.data = [{
+        id: 0,
+        label: '图片1',
+        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
+        children: [{
+          label: '二级 1-1'
+        }]
+      }, {
+        id: 1,
+        label: '图片2',
+        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
+        children: [{
+          label: '二级 2-1'
+        }, {
+          label: '二级 2-2'
+        }]
+      }, {
+        id: 2,
+        label: '图片3',
+        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
+        children: [{
+          label: '二级 3-1'
+        }, {
+          label: '二级 3-2'
+        }]
+      }]
+      this.imageNum = 3;
+    },
+    addLabel() {
+      let currentImageId = 1;
+      const newLabel = {label: 'new label'};
+      for (let index = 0; index < this.imageNum; index++) {
+        if (this.data[index].id == currentImageId) {
+          this.data[index].children.push(newLabel);
+        }
+      }
+    },
   }
 }
 </script>