图片前端对接修改1

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

@@ -151,6 +151,8 @@ export default {
       isAlert1: false,
       radio1: '矩形标注',
       pictureId: 1,
+      relationId: null,
+      imageUrl: '',
       scaleSize: 1,
       height_res: 0,
       activeIndex1: 1,
@@ -181,18 +183,30 @@ export default {
     let routeParams = this.$route.params
     console.log("routeParams")
     console.log(routeParams)
+    let imageName = routeParams.file.url
+    this.relationId = routeParams.relationId
+    // let src = this.getimageUrl(imageName)
     // 获取图片列表并转换格式
     let imageList = await this.getLabelList()
     console.log(imageList)
     this.imageList = imageList.imageList
+
+    // 加载第一张图片
+    // 这个是原来的代码
+    // var imgUrl = this.data.length ? this.data[0].imageUrl : 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200627155321.png'
+    // 这个是现在使用的代码
+    var imgUrl = 'http://127.0.0.1:9100/api/files/getImage/' + imageName
+    // 如果不使用后端可以用这个模拟
+    // var imgUrl = 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png'
+    this.imageUrl = imgUrl
+
+    // 把这个函数放在后面是因为formExchange中可能会用到this.imageUrl
     console.log('input')
     console.log(this.imageList)
     this.formExchange(this.imageList)
     console.log('output')
     console.log(this.data)
-
-    // 加载第一张图片
-    var imgUrl = this.data.length ? this.data[0].imageUrl : 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200627155321.png'
+    
     console.log(this.data.length + ' 图片张数')
     var img = new Image()
     img.src = imgUrl
@@ -722,8 +736,7 @@ export default {
         this.data = []
         let params = {
           'relationList': [
-            123,
-            11
+            this.relationId
           ]
         }
         var self = this
@@ -749,20 +762,32 @@ export default {
         alert('请求出错！')
       }
     },
-    // 将数据库保存的数据格式转换为前端可以直接使用的格式
+    // 将数据库保存的数据格式转换为前端可以直接使用的格式，同时如果第一次标注该图片，会生成新数据
     formExchange (inputData) {
-      var index = 0
-      inputData.forEach(element => {
+      if (inputData.length > 0) {
+        var index = 0
+        inputData.forEach(element => {
+          let newData = {
+            relationId: element.relationId,
+            imageUrl: element.imageUrl,
+            label: this.getImageName(element.imageUrl),
+            children: element.labelList
+          }
+          this.data.push(newData)
+          index++
+        })
+        this.imageNum = index
+      } else {
         let newData = {
-          relationId: element.relationId,
-          imageUrl: element.imageUrl,
-          label: this.getImageName(element.imageUrl),
-          children: element.labelList
+          relationId: this.relationId,
+          imageUrl: this.imageUrl,
+          label: this.getImageName(this.imageUrl),
+          children: []
         }
         this.data.push(newData)
-        index++
-      })
-      this.imageNum = index
+        //imageNum这个虽然没啥用，但是先放着吧
+        this.imageNum = 1
+      }
     },
 
     // 添加标签前弹窗输入标签名字

DAPlatform-front/src/mock/api.js

@@ -9,44 +9,44 @@ import Mock from 'mockjs'
 //   }]
 // })
 
-Mock.mock('http://localhost:9100/api/image/getImage', {
-  code: 1,
-  data: {
-    'imageList': [{
-      'relationId': 123,
-      'imageUrl': 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
-      'labelList': []
-    }, {
-      'relationId': 11,
-      'imageUrl': 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
-      'labelList': [{
-        'labelId': 0,
-        'labelName': 'label1',
-        'pointList': [{
-          'pointId': 0,
-          'X': 500,
-          'Y': 300
-        }, {
-          'pointId': 1,
-          'X': 600,
-          'Y': 300
-        }, {
-          'pointId': 2,
-          'X': 700,
-          'Y': 350
-        }, {
-          'pointId': 3,
-          'X': 600,
-          'Y': 400
-        }, {
-          'pointId': 4,
-          'X': 450,
-          'Y': 350
-        }]
-      }]
-    }]
-  }
-})
+// Mock.mock('http://localhost:9100/api/image/getImage', {
+//   code: 1,
+//   data: {
+//     'imageList': [{
+//       'relationId': 123,
+//       'imageUrl': 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
+//       'labelList': []
+//     }, {
+//       'relationId': 11,
+//       'imageUrl': 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
+//       'labelList': [{
+//         'labelId': 0,
+//         'labelName': 'label1',
+//         'pointList': [{
+//           'pointId': 0,
+//           'X': 500,
+//           'Y': 300
+//         }, {
+//           'pointId': 1,
+//           'X': 600,
+//           'Y': 300
+//         }, {
+//           'pointId': 2,
+//           'X': 700,
+//           'Y': 350
+//         }, {
+//           'pointId': 3,
+//           'X': 600,
+//           'Y': 400
+//         }, {
+//           'pointId': 4,
+//           'X': 450,
+//           'Y': 350
+//         }]
+//       }]
+//     }]
+//   }
+// })
 
 // Mock.mock('http://localhost:9100/api/layer/getLayer', {
 //   code: 1,