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 @@
"qs": "6.7.0",
"raw-body": "2.4.0",
"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": {
......@@ -4555,6 +4563,14 @@
"type-is": "~1.6.18",
"utils-merge": "1.0.1",
"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": {
......@@ -10591,10 +10607,9 @@
"dev": true
},
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
"dev": true
"version": "6.9.4",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
"integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
},
"query-string": {
"version": "4.3.4",
......
DAPlatform-front/package.json
......@@ -14,6 +14,7 @@
"axios": "^0.19.2",
"element-ui": "^2.13.1",
"node-sass": "^4.14.1",
"qs": "^6.9.4",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
......
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
<template>
<div class="layout" :style="{ height : height_res+'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">
<div class="sidebar-box">
<div class="tool-button-left">
......@@ -10,6 +32,7 @@
<el-radio-button label="矩形标注"></el-radio-button>
<el-radio-button label="多边形标注"></el-radio-button>
</el-radio-group>
<el-button @click="save()">保存</el-button>
</div>
</div>
</el-aside>
......@@ -35,8 +58,8 @@
<div class="img-title-list-box">
<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()">
{{index+1}}. &nbsp; {{item.label}}
<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.labelName}}
</div>
<!-- <el-tree-->
<!-- :data="data"-->
......@@ -122,6 +145,10 @@ export default {
name: 'imageAnnotation',
data () {
return {
labelNow: 0,
labelName: '111',
labelPosition: '',
isAlert1: false,
radio1: '矩形标注',
pictureId: 1,
scaleSize: 1,
......@@ -141,54 +168,54 @@ export default {
canvasAll: [],
// 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
testData: [{
relationId: 123,
// imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
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',
// 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
}]
}]
}],
// testData: [{
// relationId: 123,
// // imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
// 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',
// // 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
// }]
// }]
// }],
imageNum: -1,
data: [],
defaultProps: {
......@@ -198,8 +225,14 @@ export default {
}
},
mounted () {
this.getLabelList()
// //清除缓存中的数据
// this.$store.commit('clearImageData')
// console.log('init')
// console.log(this.$store.state.imageData)
this.getLabelList()
console.log('input')
console.log(this.$store.state.imageData)
this.formExchange(this.$store.state.imageData)
......@@ -208,14 +241,13 @@ export default {
// 加载第一张图片
var imgUrl = this.data[0].imageUrl
console.log(this.data.length+" 图片张数");
console.log(this.data.length + ' 图片张数')
var img = new Image()
img.src = imgUrl
var _this = this
var i = 0;
for (i = 0;i < this.data.length;i++) {
var i = 0
for (i = 0; i < this.data.length; i++) {
var labelAll = new Array()
_this.canvasAll.push(labelAll)
}
......@@ -252,26 +284,35 @@ export default {
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_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.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
_this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas)
// 还原数据库里的标注记录
let id = _this.pictureId;
console.log('id = '+id)
_this.data.forEach(function (element,index) {
let id = _this.pictureId
console.log('id = ' + id)
_this.data.forEach(function (element, index) {
var indexPic = index
element.children.forEach(function (element) {
// console.log('还原记录start')
// console.log(element)
var r1 = element.pointList[0].X
var r2 = element.pointList[0].Y
var rx = element.pointList[1].X - element.pointList[0].X
var ry = element.pointList[1].Y - element.pointList[0].Y
var num = [r1, r2, rx, ry]
var num = []
element.pointList.forEach(function (element1) {
console.log('pointlist')
console.log(element1)
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)
})
})
......@@ -288,13 +329,24 @@ export default {
// })
// 还原标注
_this.ctx.beginPath();
_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]);
// console.log(element)
})
_this.ctx.stroke();
_this.restoreCanvas()
// _this.ctx.beginPath()
// // _this.ctx.moveTo()
// _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
// _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()
}
......@@ -316,7 +368,7 @@ export default {
},
watch: {
radio1: function f () {
if (this.radio1 == '矩形标注'){
if (this.radio1 == '矩形标注') {
console.log('RR')
this.canvas.style.cursor = 'crosshair'
} else if (this.radio1 == '多边形标注') {
......@@ -328,6 +380,27 @@ export default {
}
},
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 () {
var scale = this.scaleSize
if (scale < 2) {
......@@ -350,35 +423,61 @@ export default {
this.scaleSize = 0.5
}
},
labelEnter(index){
labelEnter (index) {
// console.log('enter!')
var indexLabel = index
var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.beginPath()
let id = _this.pictureId;
let id = _this.pictureId
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.canvasAll[id].forEach(function (element, index1) {
if(index1 == indexLabel){
_this.ctx.fillStyle = 'rgba(255,0,0,0.35)';
// console.log(element)
_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 {
_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]);
// console.log(index)
_this.ctx.fill()
// 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
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.beginPath()
let id = _this.pictureId;
_this.canvasAll[id].forEach(function (element, index1) {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(index)
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()
})
_this.ctx.stroke();
},
jumpToImage (index) {
this.scaleSize = 1
......@@ -398,7 +497,7 @@ export default {
// myParent.removeChild(myParent.childNodes[1])
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')
......@@ -425,28 +524,61 @@ export default {
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_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.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
_this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas)
// 还原标注
let id = _this.pictureId;
_this.ctx.beginPath();
_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]);
// console.log(element)
})
_this.ctx.stroke();
_this.restoreCanvas()
// let id = _this.pictureId
// _this.ctx.beginPath()
// _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])
// // console.log(element)
// })
// _this.ctx.stroke()
_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) {
let id = this.pictureId;
// this.isAlert1 = true
this.isAlert1 = false
let id = this.pictureId
var children = this.data[this.pictureId].children
// 从节点里删
children.splice(index, 1)
......@@ -454,31 +586,33 @@ export default {
this.canvasAll[id].splice(index, 1)
// 重画标注
var _this = this
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.beginPath()
_this.canvasAll[id].forEach(function (element, index1) {
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(element[0],element[1],element[2],element[3]);
// console.log(index)
})
_this.ctx.stroke();
this.restoreCanvas()
//
// var _this = this
// _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
// _this.ctx.beginPath()
// _this.canvasAll[id].forEach(function (element, index1) {
// _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
// _this.ctx.fillRect(element[0], element[1], element[2], element[3])
// // console.log(index)
// })
// _this.ctx.stroke()
},
handleNodeClick (data, node) {
console.log(node)
console.log(data)
// console.log('data.id = ' + node.id)
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d =>{
return d.$treeNodeId == node.id;
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => {
return d.$treeNodeId == node.id
}
)
console.log('index = ' + index)
children.splice(index, 1);
children.splice(index, 1)
},
// 动态高度
get_height () {
......@@ -512,7 +646,7 @@ export default {
// alert(len);
// alert(count);
if (count < len - 1) {
console.log('right');
console.log('right')
this.pictureId++
this.scaleSize = 1
......@@ -528,7 +662,7 @@ export default {
var myParent = document.getElementById('center_pic')
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])
......@@ -557,22 +691,23 @@ export default {
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_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.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
_this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas)
// 还原标注
let id = _this.pictureId;
_this.ctx.beginPath();
_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]);
// console.log(element)
})
_this.ctx.stroke();
_this.restoreCanvas()
// let id = _this.pictureId
// _this.ctx.beginPath()
// _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])
// // console.log(element)
// })
// _this.ctx.stroke()
_this.brush_Listener()
}
......@@ -586,7 +721,7 @@ export default {
// alert(count);
if (count > 0) {
console.log("left");
console.log('left')
this.pictureId--
this.scaleSize = 1
......@@ -605,7 +740,7 @@ export default {
// myParent.removeChild(myParent.childNodes[1])
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')
......@@ -632,22 +767,23 @@ export default {
_this.canvas.style.zIndex = '500'
_this.canvas.style.cursor = 'crosshair'
_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.fillStyle = 'rgba(51,135,255,0)';
_this.ctx.fillRect(0, 0, img.width, img.height);
_this.ctx.fillStyle = 'rgba(51,135,255,0)'
_this.ctx.fillRect(0, 0, img.width, img.height)
myParent.appendChild(_this.canvas)
// 还原标注
let id = _this.pictureId;
_this.ctx.beginPath();
_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]);
// console.log(element)
})
_this.ctx.stroke();
_this.restoreCanvas()
// let id = _this.pictureId
// _this.ctx.beginPath()
// _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])
// // console.log(element)
// })
// _this.ctx.stroke()
_this.brush_Listener()
}
......@@ -663,50 +799,38 @@ export default {
}
},
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 = []
var self = this
this.axios({
method: 'get',
url: '/image',
data: {
relationId: 123
try {
this.data = []
let params = {
"relationList" : [
123,
11
]
}
}).then(res =>{
var self = this
let res = await this.axios({
method: 'post',
url: '/image/getImage',
data: params
})
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)
}
})
}
} catch (err) {
self.$store.commit('clearImageData')
console.log(err)
alert('请求出错！')
}
},
// 将数据库保存的数据格式转换为前端可以直接使用的格式
formExchange (inputData) {
......@@ -726,21 +850,23 @@ export default {
// 添加标签前弹窗输入标签名字
addLabel () {
var labelName;
var labelName
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonText: '取消'
}).then(({ value }) => {
labelName = value;
if (value == null)
value = 'iss'
labelName = value
let currentImageId = this.pictureId
const newLabel = {label: labelName}
const newLabel = {labelName: labelName}
this.data[currentImageId].children.push(newLabel)
}).catch(() => {
labelName = 'iss';
labelName = 'iss'
let currentImageId = this.pictureId
const newLabel = {label: labelName}
const newLabel = {labelName: labelName}
this.data[currentImageId].children.push(newLabel)
});
})
},
deleteLabel () {
let currentLabelId = 0
......@@ -778,29 +904,28 @@ export default {
// 监听鼠标事件
brush_Listener () {
let r1, r2;
let _this = this;
let r1, r2
let _this = this
this.canvas.onmousedown = function (e) {
console.log('onmousedown');
if (_this.radio1 == '矩形标注'){
console.log('onmousedown')
if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair'
r1 = e.layerX;
r2 = e.layerY;
_this.createR(e, 'begin', r1, r2);
r1 = e.layerX
r2 = e.layerY
_this.createR(e, 'begin', r1, r2)
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto'
} else {
_this.canvas.style.cursor = 'auto'
}
}
this.canvas.onmouseup = function(e) {
console.log('onmouseup');
if (_this.radio1 == '矩形标注'){
this.canvas.onmouseup = function (e) {
console.log('onmouseup')
if (_this.radio1 == '矩形标注') {
_this.canvas.style.cursor = 'crosshair'
_this.createR(e, 'end', r1, r2);
r1 = null;
r2 = null;
_this.createR(e, 'end', r1, r2)
r1 = null
r2 = null
} else if (_this.radio1 == '多边形标注') {
_this.canvas.style.cursor = 'auto'
} else {
......@@ -809,75 +934,71 @@ export default {
}
},
// 画矩形
createR(e, status, r1, r2) {
let _this = this;
let r;
createR (e, status, r1, r2) {
let _this = this
let r
if (status == 'begin') {
console.log('onmousemove');
_this.canvas.onmousemove = function(e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
console.log('onmousemove')
_this.canvas.onmousemove = function (e) {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1,r2,rx,ry);
let rx = e.layerX - r1
let ry = e.layerY - r2
// console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry)
// 把每个标注画出来
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.restoreCanvas()
_this.ctx.beginPath()
_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.stroke();
// _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
}
} else if (status == "end") {
_this.canvas.onmousemove = function(e) {
} else if (status == 'end') {
_this.canvas.onmousemove = function (e) {
}
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
let rx = e.layerX - r1
let ry = e.layerY - r2
// 排除点击就添加标签的可能
if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) {
_this.ctx.beginPath();
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
_this.ctx.fillRect(r1,r2,rx,ry);
_this.ctx.beginPath()
_this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
_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.addLabel()
_this.restoreCanvas()
// console.log('id = ',id)
// console.log(_this.canvasAll)
// _this.ctx.globalAlpha = 0.5;
_this.ctx.stroke();
}
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)
})
} else {
_this.restoreCanvas()
}
}
},
save() {
//先把格式转换回去
save () {
// 先把格式转换回去
var outputData = []
this.data.forEach(element => {
let newData = {
......@@ -887,12 +1008,17 @@ export default {
}
outputData.push(newData)
})
/**
* 这里还有问题，再添加标签时只有标签名
*/
console.log("outputdata")
console.log(outputData)
this.imageNum = this.data.len
this.axios({
method: 'post',
url: '/image',
url: '/image/saveImage',
data: {
outputData
imageList: outputData
}
}).then(res => {
console.log(res)
......@@ -908,6 +1034,27 @@ export default {
</script>
<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{
color: #409EFF;
......
DAPlatform-front/src/mock/api.js
......@@ -9,54 +9,82 @@ import Mock from 'mockjs'
// }]
// })
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: 500,
Y: 300
}, {
pointId: '1-2',
X: 600,
Y: 400
}]
}, {
labelId: 1,
label: 'label2',
pointList: [{
pointId: '2-1',
X: 100,
Y: 100
}, {
pointId: '2-2',
X: 200,
Y: 200
}]
}]
}, {
relationId: 233,
imageUrl: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
labelList: [{
labelId: 0,
label: 'label1',
pointList: [{
pointId: '1-1',
X: 100,
Y: 100
}, {
pointId: '1-2',
X: 300,
Y: 300
}]
}]
}]
})
// 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,
// labelName: 'label24',
// pointList: [{
// pointId: '1-1',
// X: 500,
// Y: 300
// }, {
// pointId: '1-2',
// X: 600,
// Y: 300
// }, {
// pointId: '1-3',
// X: 700,
// Y: 350
// }, {
// pointId: '1-4',
// X: 600,
// Y: 400
// }, {
// pointId: '1-5',
// X: 450,
// Y: 350
// }]
// }, {
// labelId: 1,
// labelName: 'label2',
// pointList: [{
// pointId: '2-1',
// X: 100,
// Y: 100
// }, {
// pointId: '2-2',
// X: 200,
// Y: 100
// }, {
// pointId: '2-2',
// X: 200,
// 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]+/, {
// 'status': 0,
......
DAPlatform-front/src/store/index.js
......@@ -16,6 +16,9 @@ export default new Vuex.Store({
},
setImageData (state, imageData) {
state.imageData = imageData
},
clearImageData (state) {
state.imageData = null
}
},
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