Skip to content

D
DA-Platform

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

Commit 5df74ffa by wl2282589971
Options

合并通用部分

parent 2b970adc
Showing with 346 additions and 578 deletions
DAPlatform-front/package-lock.json
......@@ -6745,6 +6745,11 @@
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
"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": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
......
DAPlatform-front/src/components/BottomToolBar.vue deleted 100644 → 0
<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
<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
<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
<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
<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
<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
<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
......@@ -11,6 +11,9 @@ import publishtask from '../components/PublishTask'
import ongoingtask from '../components/ongoingtask'
import SelectText from '../components/textAnnotation/SelectText'
import Table from '../components/textAnnotation/Table'
import imageAnnotiation from '../components/imageAnnotation/imageAnnotiation'
import layerAnnotation from "../components/imageAnnotation/layerAnnotation";
Vue.use(Router)
......@@ -72,6 +75,16 @@ export default new Router({
name: 'table',
component: Table
},
{
path: '/image',
name: 'image',
component: imageAnnotiation
},
{
path: '/layer',
name: 'layer',
component: layerAnnotation
}
]
},
{
......
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