image

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

@@ -114,36 +114,52 @@ export default {
       scaleSize: 1,
       height_res: 0,
       activeIndex1: 1,
-      // 这个测试数据可以么
-      testData: {
-        "relationId": 123,
-        "imageUrl": "...",
-        "labelList": [{
-          "labelId": 0,
-          "labelName": "label1",
-          "pointList": [{
-              "pointId": "1-1",
-              "X": 1.1,
-              "Y": 2.2
+      // 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
+      testData: [{
+        relationId: 123,
+        imageUrl: "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png",
+        labelList: [{
+          labelId: 0,
+          label: "label1",
+          pointList: [{
+              pointId: "1-1",
+              X: 1.1,
+              Y: 2.2
           }, {
-              "pointId": "1-2",
-              "X": 1.2,
-              "Y": 2.3
+              pointId: "1-2",
+              X: 1.2,
+              Y: 2.3
           }]
         },{
-          "labelId": 1,
-          "labelName": "label2",
-          "pointList": [{
-              "pointId": "2-1",
-              "X": 1.1,
-              "Y": 2.2
+          labelId: 1,
+          label: "label2",
+          pointList: [{
+              pointId: "2-1",
+              X: 1.1,
+              Y: 2.2
           }, {
-              "pointId": "2-2",
-              "X": 1.2,
-              "Y": 2.3
+              pointId: "2-2",
+              X: 1.2,
+              Y: 2.3
           }]
         }]
-      },
+      },{
+        relationId: 233,
+        imageUrl: "https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg",
+        labelList: [{
+          labelId: 0,
+          label: "label1",
+          pointList: [{
+              pointId: "1-1",
+              X: 1.1,
+              Y: 2.2
+          }, {
+              pointId: "1-2",
+              X: 1.2,
+              Y: 2.3
+          }]
+        }]
+      }],
       imageNum: -1,
       data: {
         
@@ -160,7 +176,7 @@ export default {
     //加载图片
     var myParent = document.getElementById('center_pic');
     var myImage = document.createElement('img');
-    myImage.src = this.data[0].url;
+    myImage.src = this.data[0].imageUrl;
     myParent.appendChild(myImage);
     this.pictureId = 0;
 
@@ -235,7 +251,7 @@ export default {
         var myParent = document.getElementById('center_pic');
         myParent.removeChild(myParent.childNodes[0]);
         var myImage = document.createElement('img');
-        myImage.src = this.data[this.pictureId].url;
+        myImage.src = this.data[this.pictureId].imageUrl;
         myParent.appendChild(myImage);
       }
       else {
@@ -253,7 +269,7 @@ export default {
         var myParent = document.getElementById('center_pic');
         myParent.removeChild(myParent.childNodes[0]);
         var myImage = document.createElement('img');
-        myImage.src = this.data[this.pictureId].url;
+        myImage.src = this.data[this.pictureId].imageUrl;
         myParent.appendChild(myImage);
 
       }
@@ -262,34 +278,47 @@ export default {
       }
     },
     getLabelList() {
-      this.data = [{
-        id: 0,
-        label: '图片1',
-        url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
-        children: [{
-          id: 0,
-          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;
+      // this.data = [{
+      //   label: '图片1',
+      //   url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
+      //   children: [{
+      //     id: 0,
+      //     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.data = [];
+      this.testData.forEach(element => {
+        let newData = {
+          relationId: element.relationId,
+          imageUrl: element.imageUrl,
+          label: this.getImageName(element.imageUrl),
+          children: element.labelList,
+        }
+        this.data.push(newData);
+      });
+      this.imageNum = this.testData.len;
     },
     addLabel() {
       let currentImageId = this.pictureId;
@@ -305,6 +334,17 @@ export default {
       let currentLabelId = 0;
       let currentImageId = this.pictureId;
       this.data[currentImageId].children.splice(currentLabelId, 1);
+    },
+    /**
+     * 从图片url中拿到图片名
+     */
+    getImageName(imageUrl) { 
+      let i = -1;
+      for (let index = 0; index < imageUrl.length; index++) {
+        if (imageUrl[index] == '/')
+          i = index;
+      }
+      return imageUrl.substr(i + 1);
     }
   }
 }