Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
D
DA-Platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Berlin
DA-Platform
Commits
5df74ffa
Commit
5df74ffa
authored
May 18, 2020
by
wl2282589971
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
合并通用部分
parent
2b970adc
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
346 additions
and
578 deletions
+346
-578
package-lock.json
DAPlatform-front/package-lock.json
+5
-0
BottomToolBar.vue
DAPlatform-front/src/components/BottomToolBar.vue
+0
-19
Layout.vue
DAPlatform-front/src/components/Layout.vue
+0
-54
MainView.vue
DAPlatform-front/src/components/MainView.vue
+0
-94
Sidebar.vue
DAPlatform-front/src/components/Sidebar.vue
+0
-299
ToolBar.vue
DAPlatform-front/src/components/ToolBar.vue
+0
-112
imageAnnotiation.vue
...front/src/components/imageAnnotation/imageAnnotiation.vue
+160
-0
layerAnnotation.vue
...-front/src/components/imageAnnotation/layerAnnotation.vue
+168
-0
index.js
DAPlatform-front/src/router/index.js
+13
-0
No files found.
DAPlatform-front/package-lock.json
View file @
5df74ffa
...
@@ -6745,6 +6745,11 @@
...
@@ -6745,6 +6745,11 @@
"integrity"
:
"sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
,
"integrity"
:
"sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
,
"dev"
:
true
"dev"
:
true
},
},
"js-cookie"
:
{
"version"
:
"2.2.1"
,
"resolved"
:
"https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz"
,
"integrity"
:
"sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"js-tokens"
:
{
"js-tokens"
:
{
"version"
:
"3.0.2"
,
"version"
:
"3.0.2"
,
"resolved"
:
"https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz"
,
"resolved"
:
"https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz"
,
...
...
DAPlatform-front/src/components/BottomToolBar.vue
deleted
100644 → 0
View file @
2b970adc
<
template
>
<div>
<el-button-group>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
移动图层
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
放大
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
缩小
</el-button>
</el-button-group>
</div>
</
template
>
<
script
>
export
default
{
name
:
"BottomToolBar"
}
</
script
>
<
style
scoped
>
</
style
>
DAPlatform-front/src/components/Layout.vue
deleted
100644 → 0
View file @
2b970adc
<
template
>
<div
class=
"layout"
>
<el-header
style=
"height: 70px;background-color: #606266"
></el-header>
<ToolBar></ToolBar>
<el-container>
<el-aside>
<sidebar
class=
"sidebar"
></sidebar>
</el-aside>
<el-main
class=
"workbench"
>
<main-view
class=
"main-view"
></main-view>
<BottomToolBar
class=
"bottom-tool-bar"
></BottomToolBar>
</el-main>
</el-container>
</div>
</
template
>
<
script
>
import
Sidebar
from
'./Sidebar'
import
MainView
from
'./MainView'
import
ToolBar
from
'./ToolBar'
import
BottomToolBar
from
'./BottomToolBar'
export
default
{
name
:
'Layout'
,
components
:
{
BottomToolBar
,
ToolBar
,
sidebar
:
Sidebar
,
mainView
:
MainView
}
};
</
script
>
<
style
scoped
>
.layout
{
height
:
100%
;
overflow
:
hidden
;
}
.workbench
{
border
:
2px
solid
#409eff
;
margin-left
:
10px
;
margin-right
:
10px
;
}
.sidebar
{
margin-left
:
10px
;
}
.main-view
{
}
.bottom-tool-bar
{
position
:
fixed
;
left
:
50%
;
bottom
:
15%
;
}
</
style
>
DAPlatform-front/src/components/MainView.vue
deleted
100644 → 0
View file @
2b970adc
<
template
>
<div
class=
"img-view"
>
<!--
<div
id=
"img-box"
>
-->
<!--
</div>
-->
<!--
<img
v-for=
"item in image_list"
:src=
"item.url"
:id=
"item.id"
class=
"img-item"
/>
-->
<img
src=
"../assets/logo.png"
>
</div>
</
template
>
<
script
>
export
default
{
name
:
"MainView"
,
data
(){
return
{
}
}
}
// mounted(){
// let _this = this
// this.bus.$on('change-image-list', function (result) {
// _this.via_img_fileref = result
// })
// this.bus.$on('add-image-list', function (result) {
// let image_obj
// let i
// for (i = 0; i
<
result
.
length
;
i
++
)
{
// image_obj = new img_obj()
// image_obj.url =_this.getObjectURL(_this.via_img_fileref[result[i]])
// image_obj.id = result[i]
// _this.image_list.push(image_obj)
// }
// })
// this.bus.$on('show-img', function (img_id) {
// _this.$nextTick(() => {
// _this.img_list_remove_all_active_class()
// _this.img_add_visible_class(img_id)
// })
//
// })
// },
// methods:{
// img_list_remove_all_active_class: function () {
// let imgs = document.getElementById('img-box').childNodes
// let j
// for (j = 0; j
<
imgs
.
length
;
j
++
)
{
// imgs[j].classList.remove('visible')
// }
// },
// img_add_visible_class: function (img_id) {
// // image显示
// document.getElementById(img_id).classList.add('visible')
// },
// getObjectURL: function (file) {
// let url = null ;
// if (window.createObjectURL!=undefined) { // basic
// url = window.createObjectURL(file) ;
// }else if (window.webkitURL!=undefined) { // webkit or chrome
// url = window.webkitURL.createObjectURL(file) ;
// }else if (window.URL!=undefined) { // mozilla(firefox)
// url = window.URL.createObjectURL(file) ;
// }
// return url ;
// },
// }
// }
// function img_obj(url, id) {
// this.url = url
// this.id = id
// }
</
script
>
<
style
scoped
>
.img-view
{
padding
:
10px
;
}
/*#img-box {*/
/* width: 100%;*/
/* height: 100%;*/
/* overflow: auto;*/
/* position: relative;*/
/*}*/
/*#img-box >>> img{*/
/* visibility: hidden;*/
/* position: absolute;*/
/* top: 0px;*/
/* left: 0px;*/
/*}*/
/*#img-box >>> .img-item.visible{*/
/* visibility: visible;*/
/*}*/
</
style
>
DAPlatform-front/src/components/Sidebar.vue
deleted
100644 → 0
View file @
2b970adc
<
template
>
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
图片列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
>
<el-tree
:data=
"image_list"
:props=
"defaultProps"
accordion
@
node-click=
"handleNodeClick"
>
</el-tree>
<!--
<div
v-for =
"item in image_list"
>
{{
item
.
image_filename
}}
</div>
-->
</div>
</div>
<div
class=
"img-list-title"
>
图层列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"layer-title-list"
>
<el-tree
:data=
"image_list"
:props=
"defaultProps"
accordion
@
node-click=
"handleNodeClick"
>
</el-tree>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
"Sidebar"
,
data
()
{
return
{
image_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
layer_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
defaultProps
:
{
children
:
'children'
,
label
:
'label'
}
};
},
methods
:
{
handleNodeClick
(
data
)
{
console
.
log
(
data
);
}
}
// data() {
// return {
// image_list: [
// {
// image_id:1,
// image_filename:"image1.jpg"
// }
// ],
// layer_list: [
// {
// image_id:1,
// image_filename:"layer1.jpg"
// }
// ]
// };
// }
}
// via_img_metadata: {
//
// }, // data structure to store loaded images metadata
// via_img_fileref: {}, // reference to local images selected by using browser file selector
// via_image_id_list: [
// ],
// via_image_filename_list: [
// ],
// via_img_count: 0,
// fileList: {}
// }
// },
// mounted () {
// let _this = this
// this.bus.$on('pre-img',function (is_selected_id) {
// let is_selected_index = _this.via_image_id_list.indexOf(is_selected_id)
// let pre_index = (is_selected_index - 1 + _this.via_image_id_list.length) % _this.via_image_id_list.length
// let pre_id = _this.via_image_id_list[pre_index]
// _this.jump_to_image(pre_id)
// })
// this.bus.$on('next-img',function (is_selected_id) {
// let is_selected_index = _this.via_image_id_list.indexOf(is_selected_id)
// let pre_index = (is_selected_index + 1 + _this.via_image_id_list.length) % _this.via_image_id_list.length
// let pre_id = _this.via_image_id_list[pre_index]
// _this.jump_to_image(pre_id)
// })
// },
// methods: {
// add_local_files: function (event) {
// let select_local_files = event.target.files
// let new_img_id_list = []
// this.fileList = select_local_files
// for (let i = 0; i
<
select_local_files
.
length
;
i
++
)
{
// let filetype = select_local_files[i].type.substr(0, 5)
// if (filetype === 'image') {
// let filename = select_local_files[i].name
// let size = select_local_files[i].size
// let img_id1 = this._via_get_image_id(filename, size)
// let img_id2 = this._via_get_image_id(filename, -1);
// let img_id = img_id1
// if (this.via_img_metadata.hasOwnProperty(img_id1) || this.via_img_metadata.hasOwnProperty(img_id2)) {
// if(this.via_img_metadata.hasOwnProperty(img_id2)) {
// img_id = img_id2
// }
// this.via_img_fileref[img_id] =select_local_files[i]
// if (this.via_img_metadata[img_id].size === -1 ) {
// this. via_img_metadata[img_id].size = size;
// }
//
// } else {
// img_id = this.project_add_new_file(filename, size)
// this.via_img_fileref[img_id] =select_local_files[i]
// new_img_id_list.push(img_id)
// }
// } else {
// console.log('其它类型文件!')
// }
// }
// this.bus.$emit('change-image-list', this.via_img_fileref)
// if(this.via_img_metadata) {
// if(new_img_id_list.length) {
// this.bus.$emit('add-image-list', new_img_id_list)
// //显示new_img_index_list[0]
// this._via_show_img(new_img_id_list[0])
// } else {
// // show original image
// }
// } else {
// // 没有增加新文件
// }
// },
// project_add_new_file: function (filename, size, file_id){
// var img_id = file_id;
// if ( typeof(img_id) === 'undefined' ) {
// if ( typeof(size) === 'undefined' ) {
// size = -1;
// }
// img_id = this._via_get_image_id(filename, size);
// }
//
// if (!this.via_img_metadata.hasOwnProperty(img_id) ) {
// this.$set(this.via_img_metadata,img_id,new file_metadata(filename, size))
// this.via_image_id_list.push(img_id);
// this.via_image_filename_list.push(filename);
// this.via_img_count += 1;
// }
// return img_id;
// },
// _via_get_image_id: function (filename, size) {
// if ( typeof(size) === 'undefined' ) {
// return filename;
// } else {
// return filename + size;
// }
// },
// _via_show_img: function (img_id) {
// this.bus.$emit('show-img',img_id)
// this.$nextTick(() => {
// // 点击图片列表,样式切换
// this.img_title_list_remove_all_active_class()
// this.img_title_list_add_active_class(img_id)
// })
// },
// jump_to_image: function (img_id) {
// this._via_show_img(img_id)
// },
// select_local_files: function () {
// document.getElementById('invisible_file_input').click()
// },
// img_title_list_add_active_class: function (img_id) {
// // 列表高亮
// let element = document.getElementById('title-' + img_id)
// element.classList.add('img-title-active')
// // 当前选中列表滚动到可视区域
// this.img_title_list_scroll_to_view(element)
// },
// img_title_list_remove_all_active_class: function () {
//
// let els = document.getElementById('img-title-list').childNodes
// let i
// for (i = 0; i
<
els
.
length
;
i
++
)
{
// els[i].classList.remove('img-title-active')
// }
// //
// // },
// // 图片列表根据选中元素滚动,以显示选中元素
// img_title_list_scroll_to_view: function (element) {
// let img_title_list_box = document.getElementsByClassName('img-title-list-box')[0]
// let img_list_title = document.getElementsByClassName('img-list-title')[0]
// // 该元素 距离 显示区域顶部 的距离
// let img_title_top = element.offsetTop - img_list_title.offsetHeight - img_title_list_box.scrollTop
// // 该元素的高度
// let img_title_height = element.offsetHeight
// // 显示区域的高度
// let box_height = img_title_list_box.clientHeight
// // 如果距离显示区域顶部的距离小于等于0,则是在显示区域上面,则向下滚动
// if (img_title_top
<=
0
)
{
// // img_title_top为负值,直接加上即可
// img_title_list_box.scrollTop += img_title_top
// } else { //大于0,也就是在显示区域顶部的下面了
// // 元素底部 距离 显示区域底部 的距离
// let differ = box_height - (img_title_top + img_title_height)
// // 距离 显示区域底部 的距离小于0,则在显示区域的底部的下面了,则向上滚动;大于等于0,则在显示区域内,不需要滚动
// if (differ
<
0
)
{
// // differ为负值,要减去它
// img_title_list_box.scrollTop -= differ
// }
// }
// }
// }
// }
// function file_metadata(filename, size) {
// this.filename = filename;
// this.size = size; // file size in bytes
// this.regions = []; // array of file_region()
// this.file_attributes = {}; // image attributes
// }
</
script
>
<
style
scoped
>
.sidebar-box
{
border
:
1px
solid
#409EFF
;
}
.img-list-title
{
line-height
:
40px
;
padding
:
0
10px
;
background
:
#409EFF
;
color
:
white
;
border-bottom
:
1px
solid
#409EFF
;
}
.img-title-list-box
{
height
:
250px
;
overflow
:
auto
;
border-bottom
:
1px
solid
#409EFF
;
padding
:
5px
;
}
.img-title
{
padding
:
0
5px
;
line-height
:
24px
;
border-left
:
3px
solid
#409EFF
;
}
.img-title
:hover
{
color
:
#409EFF
;
border-color
:
#409EFF
;
font-weight
:
bold
;
cursor
:
pointer
;
}
.add-file-btn-group
{
padding
:
0
10px
;
}
.add-file-btn-group
>>>
button
{
margin-top
:
3px
;
margin-bottom
:
3px
;
}
.img-title-active
{
font-weight
:
bold
;
border-left
:
3px
solid
;
}
</
style
>
DAPlatform-front/src/components/ToolBar.vue
deleted
100644 → 0
View file @
2b970adc
<
template
>
<div>
<el-menu
class=
"toolBar-top"
mode=
"horizontal"
>
<el-menu-item
index=
"1"
@
click=
"changeToolBar(1)"
>
开始
</el-menu-item>
<el-menu-item
index=
"2"
@
click=
"changeToolBar(2)"
>
图形标注
</el-menu-item>
<el-menu-item
index=
"3"
@
click=
"changeToolBar(3)"
>
图层标注
</el-menu-item>
</el-menu>
<div
class=
"toolBar"
>
<el-button-group
v-if=
"activeIndex1===1"
>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
保存
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
退出
</el-button>
</el-button-group>
<el-button-group
v-if=
"activeIndex1===2"
>
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
size=
"small"
@
click=
"pre_img()"
>
上一张
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
@
click=
"next_img()"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
</el-button-group>
<el-button-group
v-if=
"activeIndex1===2"
>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
多边形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
矩形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
@
click=
"deleteAnnotation"
>
删除标注
</el-button>
</el-button-group>
<el-button-group
v-show=
"activeIndex1===3"
>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
飞到坐标点
</el-button>
</el-button-group>
<a
v-show=
"activeIndex1===3"
>
X:
</a>
<input
v-model=
"Xpoint"
size=
"small"
style=
"width: 30px"
v-show=
"activeIndex1===3"
></input>
<a
v-show=
"activeIndex1===3"
>
Y:
</a>
<input
v-model=
"Ypoint"
size=
"small"
style=
"width: 30px"
v-show=
"activeIndex1===3"
></input>
<el-button-group
v-show=
"activeIndex1===3"
>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
多边形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
矩形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
>
地标标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
size=
"small"
@
click=
"deleteAnnotation"
>
删除标注
</el-button>
</el-button-group>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'ToolBar'
,
data
()
{
return
{
activeIndex1
:
1
,
Xpoint
:
0
,
Ypoint
:
0
,
};
},
methods
:
{
pre_img
:
function
()
{
let
is_selected
=
document
.
getElementsByClassName
(
'visible'
)
if
(
is_selected
.
length
)
{
let
is_selected_id
=
is_selected
[
0
].
id
this
.
bus
.
$emit
(
'pre-img'
,
is_selected_id
)
}
else
{
console
.
log
(
'请上传图片'
)
}
},
next_img
:
function
()
{
let
is_selected
=
document
.
getElementsByClassName
(
'visible'
)
if
(
is_selected
.
length
)
{
let
is_selected_id
=
is_selected
[
0
].
id
this
.
bus
.
$emit
(
'next-img'
,
is_selected_id
)
}
else
{
console
.
log
(
'请上传图片'
)
}
},
changeToolBar
(
val
){
this
.
activeIndex1
=
val
},
deleteAnnotation
:
function
()
{
this
.
$confirm
(
'确定删除此标注'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
});
}).
catch
(()
=>
{
this
.
$message
({
type
:
'info'
,
message
:
'已取消删除'
});
});
}
}
}
</
script
>
<
style
>
.toolBar-top
{
}
.toolBar
{
margin-bottom
:
5px
;
padding-top
:
10px
;
color
:
#409EFF
;
}
.tool-button
{
margin-bottom
:
10px
;
margin-left
:
10px
;
}
</
style
>
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
0 → 100644
View file @
5df74ffa
<
template
>
<div
class=
"layout"
>
<!-- 工具栏-->
<div
class=
"toolBar"
>
<el-button-group
id=
"start"
>
<el-button
class=
"tool-button"
type=
"primary"
>
保存
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
</el-button-group>
<el-button-group
id=
"tool"
>
<el-button
class=
"tool-button"
type=
"primary"
icon=
"el-icon-arrow-left"
>
上一张
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
下一张
<i
class=
"el-icon-arrow-right el-icon--right"
></i></el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除标注
</el-button>
</el-button-group>
</div>
<el-container>
<!-- 侧边栏-->
<el-aside
class=
"sidebar"
>
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
图片列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
>
<el-tree
:data=
"image_list"
:props=
"defaultProps"
accordion
>
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!-- 工作台-->
<el-main
class=
"workbench"
>
<img
src=
"../../assets/logo.png"
>
<el-button-group
id=
"buttonBar"
>
<el-button
class=
"tool-button"
type=
"primary"
>
移动图层
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
放大
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
缩小
</el-button>
</el-button-group>
</el-main>
</el-container>
</div>
</
template
>
<
script
>
export
default
{
name
:
'imageAnnotation'
,
data
(){
return
{
activeIndex1
:
1
,
image_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
layer_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
defaultProps
:
{
children
:
'children'
,
label
:
'label'
}
}
},
methods
:{
changeToolBar
(
val
){
this
.
activeIndex1
=
val
},
deleteAnnotation
:
function
()
{
this
.
$confirm
(
'确定删除此标注'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
});
}).
catch
(()
=>
{
this
.
$message
({
type
:
'info'
,
message
:
'已取消删除'
});
});
}
},
};
</
script
>
<
style
scoped
>
.layout
{
height
:
100%
;
overflow
:
hidden
;
}
.toolBar
{
margin-top
:
20px
;
margin-bottom
:
20px
;
}
.workbench
{
border
:
2px
solid
#409eff
;
margin-left
:
10px
;
margin-right
:
10px
;
}
#buttonBar
{
position
:
fixed
;
left
:
50%
;
bottom
:
50px
;
}
.sidebar
{
margin-left
:
50px
;
border
:
2px
solid
#409eff
;
}
.img-list-title
{
line-height
:
40px
;
padding
:
0
10px
;
background
:
#409EFF
;
color
:
white
;
}
.img-title-list-box
{
height
:
500px
;
overflow
:
auto
;
}
.add-file-btn-group
>>>
button
{
margin-top
:
3px
;
margin-bottom
:
3px
;
}
</
style
>
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
0 → 100644
View file @
5df74ffa
<
template
>
<div
class=
"layout"
>
<!-- 工具栏-->
<div
class=
"toolBar"
>
<el-button-group
id=
"start"
>
<el-button
class=
"tool-button"
type=
"primary"
>
保存
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
退出
</el-button>
</el-button-group>
<el-button-group
style=
"margin-right: 10px ; "
>
<el-button
class=
"tool-button"
type=
"primary"
style=
"margin-right: 10px"
>
飞入坐标点
</el-button>
<a>
X:
</a>
<input
type=
"text"
style=
"width: 30px"
>
<a>
Y:
</a>
<input
type=
"text"
style=
"width: 30px"
>
</el-button-group>
<el-button-group
id=
"tool"
>
<el-button
class=
"tool-button"
type=
"primary"
>
多边形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
矩形标注
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
建立地标
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
@
click=
"deleteAnnotation"
>
删除标注
</el-button>
</el-button-group>
</div>
<el-container>
<!-- 侧边栏-->
<el-aside
class=
"sidebar"
>
<div
class=
"sidebar-box"
>
<div>
<div
class=
"img-list-title"
>
图层列表
</div>
<div
class=
"img-title-list-box"
>
<div
id=
"img-title-list"
>
<el-tree
:data=
"image_list"
:props=
"defaultProps"
accordion
>
</el-tree>
</div>
</div>
</div>
</div>
</el-aside>
<!-- 工作台-->
<el-main
class=
"workbench"
>
<img
src=
"../../assets/logo.png"
>
<el-button-group
id=
"buttonBar"
>
<el-button
class=
"tool-button"
type=
"primary"
>
移动图层
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
放大
</el-button>
<el-button
class=
"tool-button"
type=
"primary"
>
缩小
</el-button>
</el-button-group>
</el-main>
</el-container>
</div>
</
template
>
<
script
>
export
default
{
name
:
'layerAnnotation'
,
data
(){
return
{
Xpoint
:
0
,
Ypoint
:
0
,
activeIndex1
:
1
,
image_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
layer_list
:
[{
label
:
'image1.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
},
{
label
:
'image2.jpg'
,
children
:
[{
label
:
'标注1'
},
{
label
:
'标注2'
,
}]
}],
defaultProps
:
{
children
:
'children'
,
label
:
'label'
}
}
},
methods
:{
changeToolBar
(
val
){
this
.
activeIndex1
=
val
},
deleteAnnotation
:
function
()
{
this
.
$confirm
(
'确定删除此标注'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
cancelButtonText
:
'取消'
,
type
:
'warning'
}).
then
(()
=>
{
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
});
}).
catch
(()
=>
{
this
.
$message
({
type
:
'info'
,
message
:
'已取消删除'
});
});
}
},
};
</
script
>
<
style
scoped
>
.layout
{
height
:
100%
;
overflow
:
hidden
;
}
.toolBar
{
margin-top
:
20px
;
margin-bottom
:
20px
;
}
.workbench
{
border
:
2px
solid
#409eff
;
margin-left
:
10px
;
margin-right
:
10px
;
}
#buttonBar
{
position
:
fixed
;
left
:
50%
;
bottom
:
50px
;
}
.sidebar
{
margin-left
:
50px
;
border
:
2px
solid
#409eff
;
}
.img-list-title
{
line-height
:
40px
;
padding
:
0
10px
;
background
:
#409EFF
;
color
:
white
;
}
.img-title-list-box
{
height
:
500px
;
overflow
:
auto
;
}
.add-file-btn-group
>>>
button
{
margin-top
:
3px
;
margin-bottom
:
3px
;
}
</
style
>
DAPlatform-front/src/router/index.js
View file @
5df74ffa
...
@@ -11,6 +11,9 @@ import publishtask from '../components/PublishTask'
...
@@ -11,6 +11,9 @@ import publishtask from '../components/PublishTask'
import
ongoingtask
from
'../components/ongoingtask'
import
ongoingtask
from
'../components/ongoingtask'
import
SelectText
from
'../components/textAnnotation/SelectText'
import
SelectText
from
'../components/textAnnotation/SelectText'
import
Table
from
'../components/textAnnotation/Table'
import
Table
from
'../components/textAnnotation/Table'
import
imageAnnotiation
from
'../components/imageAnnotation/imageAnnotiation'
import
layerAnnotation
from
"../components/imageAnnotation/layerAnnotation"
;
Vue
.
use
(
Router
)
Vue
.
use
(
Router
)
...
@@ -72,6 +75,16 @@ export default new Router({
...
@@ -72,6 +75,16 @@ export default new Router({
name
:
'table'
,
name
:
'table'
,
component
:
Table
component
:
Table
},
},
{
path
:
'/image'
,
name
:
'image'
,
component
:
imageAnnotiation
},
{
path
:
'/layer'
,
name
:
'layer'
,
component
:
layerAnnotation
}
]
]
},
},
{
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment