Skip to content

D
DA-Platform

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit 67617317 by 李景熙
Options

Merge remote-tracking branch 'origin/develop' into develop

parents ffe4e5d4 ad3029de
Showing with 497 additions and 303 deletions
DAPlatform-front/package-lock.json
...@@ -1567,6 +1567,14 @@ ...@@ -1567,6 +1567,14 @@
"qs": "6.7.0", "qs": "6.7.0",
"raw-body": "2.4.0", "raw-body": "2.4.0",
"type-is": "~1.6.17" "type-is": "~1.6.17"
},
"dependencies": {
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
"dev": true
}
} }
}, },
"bonjour": { "bonjour": {
...@@ -4555,6 +4563,14 @@ ...@@ -4555,6 +4563,14 @@
"type-is": "~1.6.18", "type-is": "~1.6.18",
"utils-merge": "1.0.1", "utils-merge": "1.0.1",
"vary": "~1.1.2" "vary": "~1.1.2"
},
"dependencies": {
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
"dev": true
}
} }
}, },
"ext": { "ext": {
...@@ -10591,10 +10607,9 @@ ...@@ -10591,10 +10607,9 @@
"dev": true "dev": true
}, },
"qs": { "qs": {
"version": "6.7.0", "version": "6.9.4",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==", "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
"dev": true
}, },
"query-string": { "query-string": {
"version": "4.3.4", "version": "4.3.4",
......
DAPlatform-front/package.json
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"axios": "^0.19.2", "axios": "^0.19.2",
"element-ui": "^2.13.1", "element-ui": "^2.13.1",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"qs": "^6.9.4",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.4.0", "vuex": "^3.4.0",
......
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
<template> <template>
<div class="layout" :style="{ height : height_res+'px'}"> <div class="layout" :style="{ height : height_res+'px'}">
<el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}"> <el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<!-- 侧边栏--> <transition name="fade">
<div class = "alert1" v-show="isAlert1">
<div style="flex: 1;display: flex;align-items:center;font-size: 25px">标注</div>
<div style="flex: 1;display: flex;align-items:center;">
<div style="flex: 1;justify-content: left;display: flex;">标注名称</div>
<input disabled="true" readOnly="true" :placeholder="labelName" style="flex: 3;height: 20px;border: #d4d4d4 solid 1px">
</div>
<div style="flex: 2.5;display: flex;align-items: flex-start;">
<div style="flex: 1;justify-content: left;display: flex;">标注坐标</div>
<textarea disabled="true" readOnly="true" :placeholder="labelPosition" style="flex: 3;;height: 130px;border: #d4d4d4 solid 1px">
</textarea>
</div>
<div style="flex: 1;display: flex;justify-content: flex-end;align-items:center;">
<el-button @click="isAlert1 = false">取消</el-button>
<el-button @click="deleteLabelInList(labelNow)">删除</el-button>
</div>
</div>
</transition>
<transition name="fade">
<div v-show="isAlert1" style="z-index:4000;position: fixed;background-color: rgba(0,0,0,0.42);width: 100%;height: 100%;top: 0;left: 0"></div>
</transition>
<!-- 侧边栏-->
<el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px"> <el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<div class="sidebar-box"> <div class="sidebar-box">
<div class="tool-button-left"> <div class="tool-button-left">
...@@ -10,6 +32,7 @@ ...@@ -10,6 +32,7 @@
<el-radio-button label="矩形标注"></el-radio-button> <el-radio-button label="矩形标注"></el-radio-button>
<el-radio-button label="多边形标注"></el-radio-button> <el-radio-button label="多边形标注"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-button @click="save()">保存</el-button>
</div> </div>
</div> </div>
</el-aside> </el-aside>
...@@ -35,8 +58,8 @@ ...@@ -35,8 +58,8 @@
<div class="img-title-list-box"> <div class="img-title-list-box">
<div id="img-title-list" style="user-select:none"> <div id="img-title-list" style="user-select:none">
<div v-for="(item, index) in data[pictureId].children" :key="item.id" class="listLeft" style="text-align: left" @dblclick="deleteLabelInList(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()"> <div v-for="(item, index) in data[pictureId].children" :key="item.id" class="listLeft" style="text-align: left" @dblclick="labelInfo(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()">
{{index+1}}. &nbsp; {{item.label}} {{index+1}}. &nbsp; {{item.labelName}}
</div> </div>
<!-- <el-tree--> <!-- <el-tree-->
<!-- :data="data"--> <!-- :data="data"-->
...@@ -122,6 +145,10 @@ export default { ...@@ -122,6 +145,10 @@ export default {
name: 'imageAnnotation', name: 'imageAnnotation',
data () { data () {
return { return {
labelNow: 0,
labelName: '111',
labelPosition: '',
isAlert1: false,
radio1: '矩形标注', radio1: '矩形标注',
pictureId: 1, pictureId: 1,
scaleSize: 1, scaleSize: 1,
...@@ -141,54 +168,54 @@ export default { ...@@ -141,54 +168,54 @@ export default {
canvasAll: [], canvasAll: [],
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的 // 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
testData: [{ // testData: [{
relationId: 123, // relationId: 123,
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg', // // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png', // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{ // labelList: [{
labelId: 0, // labelId: 0,
label: 'label1', // label: 'label1',
pointList: [{ // pointList: [{
pointId: '1-1', // pointId: '1-1',
X: 1.1, // X: 1.1,
Y: 2.2 // Y: 2.2
}, { // }, {
pointId: '1-2', // pointId: '1-2',
X: 1.2, // X: 1.2,
Y: 2.3 // Y: 2.3
}] // }]
}, { // }, {
labelId: 1, // labelId: 1,
label: 'label2', // label: 'label2',
pointList: [{ // pointList: [{
pointId: '2-1', // pointId: '2-1',
X: 1.1, // X: 1.1,
Y: 2.2 // Y: 2.2
}, { // }, {
pointId: '2-2', // pointId: '2-2',
X: 1.2, // X: 1.2,
Y: 2.3 // Y: 2.3
}] // }]
}] // }]
}, { // }, {
relationId: 233, // relationId: 233,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg', // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png', // // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{ // labelList: [{
labelId: 0, // labelId: 0,
label: 'label1', // label: 'label1',
pointList: [{ // pointList: [{
pointId: '1-1', // pointId: '1-1',
X: 1.1, // X: 1.1,
Y: 2.2 // Y: 2.2
}, { // }, {
pointId: '1-2', // pointId: '1-2',
X: 1.2, // X: 1.2,
Y: 2.3 // Y: 2.3
}] // }]
}] // }]
}], // }],
imageNum: -1, imageNum: -1,
data: [], data: [],
defaultProps: { defaultProps: {
...@@ -198,8 +225,14 @@ export default { ...@@ -198,8 +225,14 @@ export default {
} }
}, },
mounted () { mounted () {
this.getLabelList()
// //清除缓存中的数据
// this.$store.commit('clearImageData')
// console.log('init')
// console.log(this.$store.state.imageData)
this.getLabelList()
console.log('input') console.log('input')
console.log(this.$store.state.imageData) console.log(this.$store.state.imageData)
this.formExchange(this.$store.state.imageData) this.formExchange(this.$store.state.imageData)
...@@ -208,14 +241,13 @@ export default { ...@@ -208,14 +241,13 @@ export default {
// 加载第一张图片 // 加载第一张图片
var imgUrl = this.data[0].imageUrl var imgUrl = this.data[0].imageUrl
console.log(this.data.length+" 图片张数"); console.log(this.data.length + ' 图片张数')
var img = new Image() var img = new Image()
img.src = imgUrl img.src = imgUrl
var _this = this var _this = this
var i = 0
var i = 0; for (i = 0; i < this.data.length; i++) {
for (i = 0;i < this.data.length;i++) {
var labelAll = new Array() var labelAll = new Array()
_this.canvasAll.push(labelAll) _this.canvasAll.push(labelAll)
} }
...@@ -252,26 +284,35 @@ export default { ...@@ -252,26 +284,35 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原数据库里的标注记录 // 还原数据库里的标注记录
let id = _this.pictureId; let id = _this.pictureId
console.log('id = '+id) console.log('id = ' + id)
_this.data.forEach(function (element,index) { _this.data.forEach(function (element, index) {
var indexPic = index var indexPic = index
element.children.forEach(function (element) { element.children.forEach(function (element) {
// console.log('还原记录start') // console.log('还原记录start')
// console.log(element) // console.log(element)
var r1 = element.pointList[0].X var num = []
var r2 = element.pointList[0].Y element.pointList.forEach(function (element1) {
var rx = element.pointList[1].X - element.pointList[0].X console.log('pointlist')
var ry = element.pointList[1].Y - element.pointList[0].Y console.log(element1)
var num = [r1, r2, rx, ry] num.push(element1.X)
num.push(element1.Y)
})
// var r1 = element.pointList[0].X
// var r2 = element.pointList[0].Y
// var rx = element.pointList[1].X
// var ry = element.pointList[1].Y
// var num = [r1, r2, rx, ry]
console.log(num)
_this.canvasAll[indexPic].push(num) _this.canvasAll[indexPic].push(num)
}) })
}) })
...@@ -288,13 +329,24 @@ export default { ...@@ -288,13 +329,24 @@ export default {
// }) // })
// 还原标注 // 还原标注
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.restoreCanvas()
_this.canvasAll[id].forEach(function (element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.ctx.beginPath()
// console.log(element) // // _this.ctx.moveTo()
}) // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.stroke(); // _this.canvasAll[id].forEach(function (element) {
// let len = element.length / 2
// var i = 0
// for (i = 0; i < len; i++) {
// _this.ctx.lineTo(element[2 * i], element[2 * i + 1])
// }
// // _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// // console.log(element)
// })
// // _this.ctx.stroke()
// _this.ctx.beginPath()
// _this.ctx.fill()
_this.brush_Listener() _this.brush_Listener()
} }
...@@ -316,7 +368,7 @@ export default { ...@@ -316,7 +368,7 @@ export default {
}, },
watch: { watch: {
radio1: function f () { radio1: function f () {
if (this.radio1 == '矩形标注'){ if (this.radio1 == '矩形标注') {
console.log('RR') console.log('RR')
this.canvas.style.cursor = 'crosshair' this.canvas.style.cursor = 'crosshair'
} else if (this.radio1 == '多边形标注') { } else if (this.radio1 == '多边形标注') {
...@@ -328,6 +380,27 @@ export default { ...@@ -328,6 +380,27 @@ export default {
} }
}, },
methods: { methods: {
// 还原标注
restoreCanvas () {
var _this = this
let id = _this.pictureId
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element) {
_this.ctx.beginPath()
// console.log(element)
let len = element.length / 2
var i = 0
_this.ctx.moveTo(element[0], element[1])
for (i = 1; i < len; i++) {
_this.ctx.lineTo(element[2 * i], element[2 * i + 1])
}
// _this.ctx.stroke()
_this.ctx.closePath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fill()
})
},
goBigger () { goBigger () {
var scale = this.scaleSize var scale = this.scaleSize
if (scale < 2) { if (scale < 2) {
...@@ -350,35 +423,61 @@ export default { ...@@ -350,35 +423,61 @@ export default {
this.scaleSize = 0.5 this.scaleSize = 0.5
} }
}, },
labelEnter(index){ labelEnter (index) {
// console.log('enter!') // console.log('enter!')
var indexLabel = index
var _this = this var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); let id = _this.pictureId
_this.ctx.beginPath()
let id = _this.pictureId; _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element, index1) { _this.canvasAll[id].forEach(function (element, index1) {
if(index1 == indexLabel){ // console.log(element)
_this.ctx.fillStyle = 'rgba(255,0,0,0.35)'; _this.ctx.beginPath()
var len = element.length / 2
var i = 0
_this.ctx.moveTo(element[0], element[1])
for (i = 1; i < len; i++) {
_this.ctx.lineTo(element[2 * i], element[2 * i + 1])
}
// _this.ctx.stroke()
_this.ctx.closePath()
if (index === index1) {
// 改颜色
_this.ctx.fillStyle = 'rgba(255,0,0,0.54)'
} else { } else {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
} }
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); _this.ctx.fill()
// console.log(index) // if (index === index1) {
// // 文字坐标
// _this.ctx.fillStyle = 'rgb(0,0,0)'
// _this.ctx.font = '15px Georgia'
// for (i = 0; i < len; i++) {
// _this.ctx.fillText('(' + element[2 * i] + ',' + element[2 * i + 1] + ')', element[2 * i] - 20, element[2 * i + 1] - 5);
// }
// }
}) })
_this.ctx.stroke();
}, },
labelLeave(){ labelLeave () {
var _this = this var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); let id = _this.pictureId
_this.ctx.beginPath()
let id = _this.pictureId; _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element, index1) {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.canvasAll[id].forEach(function (element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); _this.ctx.beginPath()
// console.log(index) // console.log(element)
let len = element.length / 2
var i = 0
_this.ctx.moveTo(element[0], element[1])
for (i = 1; i < len; i++) {
_this.ctx.lineTo(element[2 * i], element[2 * i + 1])
}
// _this.ctx.stroke()
_this.ctx.closePath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fill()
}) })
_this.ctx.stroke();
}, },
jumpToImage (index) { jumpToImage (index) {
this.scaleSize = 1 this.scaleSize = 1
...@@ -398,7 +497,7 @@ export default { ...@@ -398,7 +497,7 @@ export default {
// myParent.removeChild(myParent.childNodes[1]) // myParent.removeChild(myParent.childNodes[1])
for (var i = myParent.childNodes.length - 1; i >= 0; i--) { for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]); myParent.removeChild(myParent.childNodes[i])
} }
var myImage = document.createElement('div') var myImage = document.createElement('div')
...@@ -425,28 +524,61 @@ export default { ...@@ -425,28 +524,61 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原标注 // 还原标注
let id = _this.pictureId; _this.restoreCanvas()
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // let id = _this.pictureId
_this.canvasAll[id].forEach(function (element) { // _this.ctx.beginPath()
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
// console.log(element) // _this.canvasAll[id].forEach(function (element) {
}) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
_this.ctx.stroke(); // // console.log(element)
// })
// _this.ctx.stroke()
_this.brush_Listener() _this.brush_Listener()
} }
}, },
labelInfo (index) {
this.labelNow = index
this.isAlert1 = true
let id = this.pictureId
var children = this.data[this.pictureId].children
var tmp = this.canvasAll[id]
this.labelName = children[index].labelName
this.labelPosition = ''
var lenTmp = tmp[index].length / 2;
var i = 0;
for (i = 0; i < lenTmp; i++) {
this.labelPosition += '坐标' + (i + 1) + '： （'
this.labelPosition += tmp[index][2*i]
this.labelPosition += ','
this.labelPosition += tmp[index][2*i+1]
this.labelPosition += '）\n'
}
// 从节点里删
// children.splice(index, 1)
// 从历史记录里删
// this.canvasAll[id].splice(index, 1)
// 重画标注
this.restoreCanvas()
},
deleteLabelInList (index) { deleteLabelInList (index) {
let id = this.pictureId; // this.isAlert1 = true
this.isAlert1 = false
let id = this.pictureId
var children = this.data[this.pictureId].children var children = this.data[this.pictureId].children
// 从节点里删 // 从节点里删
children.splice(index, 1) children.splice(index, 1)
...@@ -454,31 +586,33 @@ export default { ...@@ -454,31 +586,33 @@ export default {
this.canvasAll[id].splice(index, 1) this.canvasAll[id].splice(index, 1)
// 重画标注 // 重画标注
var _this = this this.restoreCanvas()
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); //
_this.ctx.beginPath() // var _this = this
_this.canvasAll[id].forEach(function (element, index1) { // _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // _this.ctx.beginPath()
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.canvasAll[id].forEach(function (element, index1) {
// console.log(index) // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
}) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
_this.ctx.stroke(); // // console.log(index)
// })
// _this.ctx.stroke()
}, },
handleNodeClick (data, node) { handleNodeClick (data, node) {
console.log(node) console.log(node)
console.log(data) console.log(data)
// console.log('data.id = ' + node.id) // console.log('data.id = ' + node.id)
const parent = node.parent; const parent = node.parent
const children = parent.data.children || parent.data; const children = parent.data.children || parent.data
const index = children.findIndex(d =>{ const index = children.findIndex(d => {
return d.$treeNodeId == node.id; return d.$treeNodeId == node.id
} }
) )
console.log('index = ' + index) console.log('index = ' + index)
children.splice(index, 1); children.splice(index, 1)
}, },
// 动态高度 // 动态高度
get_height () { get_height () {
...@@ -512,7 +646,7 @@ export default { ...@@ -512,7 +646,7 @@ export default {
// alert(len); // alert(len);
// alert(count); // alert(count);
if (count < len - 1) { if (count < len - 1) {
console.log('right'); console.log('right')
this.pictureId++ this.pictureId++
this.scaleSize = 1 this.scaleSize = 1
...@@ -528,7 +662,7 @@ export default { ...@@ -528,7 +662,7 @@ export default {
var myParent = document.getElementById('center_pic') var myParent = document.getElementById('center_pic')
for (var i = myParent.childNodes.length - 1; i >= 0; i--) { for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]); myParent.removeChild(myParent.childNodes[i])
} }
// myParent.removeChild(myParent.childNodes[0]) // myParent.removeChild(myParent.childNodes[0])
...@@ -557,22 +691,23 @@ export default { ...@@ -557,22 +691,23 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原标注 // 还原标注
let id = _this.pictureId; _this.restoreCanvas()
_this.ctx.beginPath(); // let id = _this.pictureId
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // _this.ctx.beginPath()
_this.canvasAll[id].forEach(function(element) { // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.canvasAll[id].forEach(function (element) {
// console.log(element) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
}) // // console.log(element)
_this.ctx.stroke(); // })
// _this.ctx.stroke()
_this.brush_Listener() _this.brush_Listener()
} }
...@@ -586,7 +721,7 @@ export default { ...@@ -586,7 +721,7 @@ export default {
// alert(count); // alert(count);
if (count > 0) { if (count > 0) {
console.log("left"); console.log('left')
this.pictureId-- this.pictureId--
this.scaleSize = 1 this.scaleSize = 1
...@@ -605,7 +740,7 @@ export default { ...@@ -605,7 +740,7 @@ export default {
// myParent.removeChild(myParent.childNodes[1]) // myParent.removeChild(myParent.childNodes[1])
for (var i = myParent.childNodes.length - 1; i >= 0; i--) { for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
myParent.removeChild(myParent.childNodes[i]); myParent.removeChild(myParent.childNodes[i])
} }
var myImage = document.createElement('div') var myImage = document.createElement('div')
...@@ -632,22 +767,23 @@ export default { ...@@ -632,22 +767,23 @@ export default {
_this.canvas.style.zIndex = '500' _this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.canvas.style.flex = '0 0 ' + img.width + 'px' _this.canvas.style.flex = '0 0 ' + img.width + 'px'
_this.canvas.style.marginLeft = '-' + img.width + 'px'; _this.canvas.style.marginLeft = '-' + img.width + 'px'
_this.ctx = _this.canvas.getContext('2d') _this.ctx = _this.canvas.getContext('2d')
_this.ctx.fillStyle = 'rgba(51,135,255,0)'; _this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height); _this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas) myParent.appendChild(_this.canvas)
// 还原标注 // 还原标注
let id = _this.pictureId; _this.restoreCanvas()
_this.ctx.beginPath(); // let id = _this.pictureId
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; // _this.ctx.beginPath()
_this.canvasAll[id].forEach(function(element) { // _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); // _this.canvasAll[id].forEach(function (element) {
// console.log(element) // _this.ctx.fillRect(element[0], element[1], element[2], element[3])
}) // // console.log(element)
_this.ctx.stroke(); // })
// _this.ctx.stroke()
_this.brush_Listener() _this.brush_Listener()
} }
...@@ -663,50 +799,38 @@ export default { ...@@ -663,50 +799,38 @@ export default {
} }
}, },
async getLabelList () { async getLabelList () {
// 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 = [] try {
var self = this
this.axios({ this.data = []
method: 'get', let params = {
url: '/image', "relationList" : [
data: { 123,
relationId: 123 11
]
} }
}).then(res =>{ var self = this
let res = await this.axios({
method: 'post',
url: '/image/getImage',
data: params
})
if (res.code === 1) { if (res.code === 1) {
self.$store.commit('setImageData', res.data) let imageList = res.data
// console.log(imageList.imageList[0].imageUrl)
self.$store.commit('clearImageData')
self.$store.commit('setImageData', imageList.imageList)
console.log("!!!!!!!!!!!!!!!!")
console.log(this.$store.state.imageData) console.log(this.$store.state.imageData)
} }
}) } catch (err) {
self.$store.commit('clearImageData')
console.log(err)
alert('请求出错！')
}
}, },
// 将数据库保存的数据格式转换为前端可以直接使用的格式 // 将数据库保存的数据格式转换为前端可以直接使用的格式
formExchange (inputData) { formExchange (inputData) {
...@@ -726,21 +850,23 @@ export default { ...@@ -726,21 +850,23 @@ export default {
// 添加标签前弹窗输入标签名字 // 添加标签前弹窗输入标签名字
addLabel () { addLabel () {
var labelName; var labelName
this.$prompt('请输入标注名称', '提示', { this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消'
}).then(({ value }) => { }).then(({ value }) => {
labelName = value; if (value == null)
value = 'iss'
labelName = value
let currentImageId = this.pictureId let currentImageId = this.pictureId
const newLabel = {label: labelName} const newLabel = {labelName: labelName}
this.data[currentImageId].children.push(newLabel) this.data[currentImageId].children.push(newLabel)
}).catch(() => { }).catch(() => {
labelName = 'iss'; labelName = 'iss'
let currentImageId = this.pictureId let currentImageId = this.pictureId
const newLabel = {label: labelName} const newLabel = {labelName: labelName}
this.data[currentImageId].children.push(newLabel) this.data[currentImageId].children.push(newLabel)
}); })
}, },
deleteLabel () { deleteLabel () {
let currentLabelId = 0 let currentLabelId = 0
...@@ -778,29 +904,28 @@ export default { ...@@ -778,29 +904,28 @@ export default {
// 监听鼠标事件 // 监听鼠标事件
brush_Listener () { brush_Listener () {
let r1, r2; let r1, r2
let _this = this; let _this = this
this.canvas.onmousedown = function (e) { this.canvas.onmousedown = function (e) {
console.log('onmousedown'); console.log('onmousedown')
if (_this.radio1 == '矩形标注'){ if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
r1 = e.layerX; r1 = e.layerX
r2 = e.layerY; r2 = e.layerY
_this.createR(e, 'begin', r1, r2); _this.createR(e, 'begin', r1, r2)
} else if (_this.radio1 == '多边形标注') { } else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} else { } else {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} }
} }
this.canvas.onmouseup = function(e) { this.canvas.onmouseup = function (e) {
console.log('onmouseup'); console.log('onmouseup')
if (_this.radio1 == '矩形标注'){ if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair' _this.canvas.style.cursor = 'crosshair'
_this.createR(e, 'end', r1, r2); _this.createR(e, 'end', r1, r2)
r1 = null; r1 = null
r2 = null; r2 = null
} else if (_this.radio1 == '多边形标注') { } else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto' _this.canvas.style.cursor = 'auto'
} else { } else {
...@@ -809,75 +934,71 @@ export default { ...@@ -809,75 +934,71 @@ export default {
} }
}, },
// 画矩形 // 画矩形
createR(e, status, r1, r2) { createR (e, status, r1, r2) {
let _this = this; let _this = this
let r; let r
if (status == 'begin') { if (status == 'begin') {
console.log('onmousemove'); console.log('onmousemove')
_this.canvas.onmousemove = function(e) { _this.canvas.onmousemove = function (e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1; let rx = e.layerX - r1
let ry = e.layerY - r2; let ry = e.layerY - r2
_this.ctx.beginPath();
_this.ctx.rect(r1,r2,rx,ry);
// console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry) // console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry)
// 把每个标注画出来 // 把每个标注画出来
let id = _this.pictureId; _this.restoreCanvas()
_this.canvasAll[id].forEach(function (element, index) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]); _this.ctx.beginPath()
// console.log(index) _this.ctx.rect(r1, r2, rx, ry)
}) _this.ctx.closePath()
_this.ctx.strokeStyle = 'black'
_this.ctx.stroke()
// let id = _this.pictureId
// _this.canvasAll[id].forEach(function (element, index) {
// _this.ctx.fillRect(element[0], element[1], element[2], element[3])
// // console.log(index)
// })
// _this.ctx.globalAlpha = 0.5; // _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height); // _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
} }
} else if (status == "end") { } else if (status == 'end') {
_this.canvas.onmousemove = function(e) { _this.canvas.onmousemove = function (e) {
} }
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
let rx = e.layerX - r1; let rx = e.layerX - r1
let ry = e.layerY - r2; let ry = e.layerY - r2
// 排除点击就添加标签的可能 // 排除点击就添加标签的可能
if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) { if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) {
_this.ctx.beginPath(); _this.ctx.beginPath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'; _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_this.ctx.fillRect(r1,r2,rx,ry); _this.ctx.fillRect(r1, r2, rx, ry)
// _this.ctx.stroke()
// 把每个标注画出来 // 把每个标注画出来
let id = _this.pictureId;
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
let id = _this.pictureId
// 存到记录里 // 存到记录里
var num = [r1,r2,rx,ry] var num = [r1, r2, r1 + rx, r2, r1 + rx, r2 + ry, r1, r2 + ry]
_this.canvasAll[id].push(num) _this.canvasAll[id].push(num)
_this.addLabel() _this.addLabel()
_this.restoreCanvas()
// console.log('id = ',id) // console.log('id = ',id)
// console.log(_this.canvasAll) // console.log(_this.canvasAll)
// _this.ctx.globalAlpha = 0.5; // _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke(); } else {
} _this.restoreCanvas()
else{
let id = _this.pictureId;
_this.canvasAll[id].forEach(function(element) {
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(element)
})
} }
} }
}, },
save() { save () {
//先把格式转换回去 // 先把格式转换回去
var outputData = [] var outputData = []
this.data.forEach(element => { this.data.forEach(element => {
let newData = { let newData = {
...@@ -887,12 +1008,17 @@ export default { ...@@ -887,12 +1008,17 @@ export default {
} }
outputData.push(newData) outputData.push(newData)
}) })
/**
* 这里还有问题，再添加标签时只有标签名
*/
console.log("outputdata")
console.log(outputData)
this.imageNum = this.data.len this.imageNum = this.data.len
this.axios({ this.axios({
method: 'post', method: 'post',
url: '/image', url: '/image/saveImage',
data: { data: {
outputData imageList: outputData
} }
}).then(res => { }).then(res => {
console.log(res) console.log(res)
...@@ -908,6 +1034,27 @@ export default { ...@@ -908,6 +1034,27 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.alert1{
width: 400px;
height: 350px;
background-color: white;
position: fixed;
left: calc(50% - 200px);
top: calc(50% - 175px);
z-index: 5000;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
border-radius: 5px;
display: flex;
flex-direction: column;
padding: 10px 30px;
}
#button-left,#button-minus,#button-rank,#button-right,#button-plus{ #button-left,#button-minus,#button-rank,#button-right,#button-plus{
color: #409EFF; color: #409EFF;
......
DAPlatform-front/src/mock/api.js
...@@ -9,54 +9,82 @@ import Mock from 'mockjs' ...@@ -9,54 +9,82 @@ import Mock from 'mockjs'
// }] // }]
// }) // })
Mock.mock('http://localhost:9100/api/image', { // Mock.mock('http://localhost:9100/api/image', {
code: 1, // code: 1,
data: [{ // data: [{
relationId: 123, // relationId: 123,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png', // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
labelList: [{ // labelList: [{
labelId: 0, // labelId: 0,
label: 'label1', // labelName: 'label24',
pointList: [{ // pointList: [{
pointId: '1-1', // pointId: '1-1',
X: 500, // X: 500,
Y: 300 // Y: 300
}, { // }, {
pointId: '1-2', // pointId: '1-2',
X: 600, // X: 600,
Y: 400 // Y: 300
}] // }, {
}, { // pointId: '1-3',
labelId: 1, // X: 700,
label: 'label2', // Y: 350
pointList: [{ // }, {
pointId: '2-1', // pointId: '1-4',
X: 100, // X: 600,
Y: 100 // Y: 400
}, { // }, {
pointId: '2-2', // pointId: '1-5',
X: 200, // X: 450,
Y: 200 // Y: 350
}] // }]
}] // }, {
}, { // labelId: 1,
relationId: 233, // labelName: 'label2',
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg', // pointList: [{
labelList: [{ // pointId: '2-1',
labelId: 0, // X: 100,
label: 'label1', // Y: 100
pointList: [{ // }, {
pointId: '1-1', // pointId: '2-2',
X: 100, // X: 200,
Y: 100 // Y: 100
}, { // }, {
pointId: '1-2', // pointId: '2-2',
X: 300, // X: 200,
Y: 300 // Y: 200
}] // }, {
}] // pointId: '2-2',
}] // X: 100,
}) // Y: 200
// }]
// }]
// }, {
// relationId: 233,
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// labelList: [{
// labelId: 0,
// labelName: 'label1',
// pointList: [{
// pointId: '1-1',
// X: 100,
// Y: 100
// }, {
// pointId: '1-2',
// X: 300,
// Y: 100
// }, {
// pointId: '1-2',
// X: 300,
// Y: 300
// }, {
// pointId: '1-2',
// X: 100,
// Y: 300
// }]
// }]
// }]
// })
// Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, { // Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, {
// 'status': 0, // 'status': 0,
......
DAPlatform-front/src/store/index.js
...@@ -16,6 +16,9 @@ export default new Vuex.Store({ ...@@ -16,6 +16,9 @@ export default new Vuex.Store({
}, },
setImageData (state, imageData) { setImageData (state, imageData) {
state.imageData = imageData state.imageData = imageData
},
clearImageData (state) {
state.imageData = null
} }
}, },
actions: { actions: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment