图片标注前端接口

DAPlatform-front/package-lock.json

@@ -11539,6 +11539,11 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "dev": true
     },
+    "shvl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz",
+      "integrity": "sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig=="
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -12961,6 +12966,22 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
       "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
     },
+    "vuex-persistedstate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-3.0.1.tgz",
+      "integrity": "sha512-2dH77+fIecAXO8GeJEXiYnC++gx48PFGUayB5d7rWrN3fblRCOHQoVnmu/VV9DXbHHJcJth/0W/ofl8vw12j1A==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",

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

@@ -20,7 +20,7 @@
         <div class="sidebar-box">
           <div class="tool-button-left">
             <el-button-group id="start">
-              <el-button class="tool-button" type="primary" >保存</el-button>
+              <el-button class="tool-button" type="primary" @click="save">保存</el-button>
               <el-button class="tool-button" type="primary" >退出</el-button>
             </el-button-group>
             <div style="margin-top: 10px"></div>
@@ -187,9 +187,7 @@ export default {
         }]
       }],
       imageNum: -1,
-      data: {
-
-      },
+      data: [],
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -199,6 +197,10 @@ export default {
   mounted () {
     this.getLabelList()
 
+    console.log(this.$store.state.imageData)
+    this.formExchange(this.$store.state.imageData)
+    console.log(this.data)
+    
     // 加载第一张图片
     var imgUrl = this.data[0].imageUrl
     var img = new Image()
@@ -412,7 +414,7 @@ export default {
         alert('已经是第一张图片了')
       }
     },
-    getLabelList () {
+    async getLabelList () {
       // this.data = [{
       //   label: '图片1',
       //   url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
@@ -444,7 +446,24 @@ export default {
        * 这是一个大致的格式转换
        */
       this.data = []
-      this.testData.forEach(element => {
+      var self = this
+      this.axios({
+        method: 'get',
+        url: '/image',
+        data: {
+          relationId: 123
+        }
+      }).then(res =>{
+          if (res.code === 1) {
+            self.$store.commit('setImageData', res.data)
+            console.log(this.$store.state.imageData)
+          } 
+      })
+    },
+    //将数据库保存的数据格式转换为前端可以直接使用的格式
+    formExchange(inputData) {
+      var index = 0
+      inputData.forEach(element => {
         let newData = {
           relationId: element.relationId,
           imageUrl: element.imageUrl,
@@ -452,18 +471,14 @@ export default {
           children: element.labelList
         }
         this.data.push(newData)
+        index ++
       })
-      this.imageNum = this.testData.len
+      this.imageNum = index
     },
     addLabel () {
       let currentImageId = this.pictureId
       const newLabel = {label: 'new label'}
       this.data[currentImageId].children.push(newLabel)
-      // for (let index = 0; index < this.imageNum; index++) {
-      //   if (this.data[index].id == currentImageId) {
-      //     this.data[index].children.push(newLabel);
-      //   }
-      // }
     },
     deleteLabel () {
       let currentLabelId = 0
@@ -594,6 +609,33 @@ export default {
         // }, 1);
       }
     },
+    save() {
+      //先把格式转换回去
+      var outputData = []
+      this.data.forEach(element => {
+        let newData = {
+          relationId: element.relationId,
+          imageUrl: element.imageUrl,
+          labelList: element.children
+        }
+        outputData.push(newData)
+      })
+      this.imageNum = this.data.len
+      this.axios({
+        method: 'post',
+        url: '/image',
+        data: {
+          outputData
+        }
+      }).then(res => {
+        console.log(res)
+        if (res.code === 1) {
+          
+        } else {
+          
+        }
+      })
+    }
   }
 }
 </script>

DAPlatform-front/src/mock/api.js

@@ -9,6 +9,55 @@ Mock.mock('http://localhost:9100/api/getTasks', {
   }]
 })
 
+Mock.mock('http://localhost:9100/api/image', {
+  code: 1,
+  data: [{
+    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
+      }]
+    }, {
+      labelId: 1,
+      label: 'label2',
+      pointList: [{
+        pointId: '2-1',
+        X: 1.1,
+        Y: 2.2
+      }, {
+        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
+      }]
+    }]
+  }]
+})
+
 Mock.mock(/\/api\/getPieces\?id=[0-9]+/, {
   'status': 0,
   'data|5-10': [{
@@ -28,3 +77,4 @@ Mock.mock(/\/api\/file\/getFiles\?pieceId=[0-9]+/, {
     'state|0-1': 1
   }]
 })
+

DAPlatform-front/src/store/index.js

@@ -7,11 +7,15 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    userInfo: null
+    userInfo: null,
+    imageData: null,
   },
   mutations: {
     setUserInfo (state, userInfo) {
       state.userInfo = userInfo
+    },
+    setImageData (state, imageData) {
+      state.imageData = imageData
     }
   },
   actions: {