Skip to content

D
DA-Platform

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

Commit e4a381cd by wl2282589971
Options

更改整体风格

parent f9eb3a0f
Showing with 314 additions and 333 deletions
DAPlatform-front/src/components/Layout.vue
<template> <template>
<div class="layout"> <div class="layout">
<el-container> <el-header style="height: 70px;background-color: #606266"></el-header>
<el-header> <ToolBar></ToolBar>
<TopNavBar class="top-nav-bar"></TopNavBar> <el-container>
</el-header> <el-aside >
<el-container> <sidebar class="sidebar"></sidebar>
<sidebar class="sidebar"></sidebar> </el-aside>
<el-main> <el-main class="workbench">
<main-view class="main-view"></main-view> <main-view class="main-view"></main-view>
</el-main> </el-main>
</el-container> </el-container>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import MenuBar from './ToolBar'
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import MainView from './MainView' import MainView from './MainView'
import TopNavBar from './TopNavBar' import ToolBar from "./ToolBar";
export default { export default {
name: "Layout", name: "Layout",
components: { components: {
TopNavBar, ToolBar,
menuBar: MenuBar,
sidebar: Sidebar, sidebar: Sidebar,
mainView: MainView mainView: MainView
}, },
...@@ -35,28 +32,16 @@ ...@@ -35,28 +32,16 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.top-nav-bar { .workbench{
top: 0; border: 2px solid #409EFF;
left: 0; margin-left: 10px;
} margin-right: 10px;
.main{
margin-top: 40px;
height: calc(100% - 40px);
} }
.sidebar{ .sidebar{
position: fixed; margin-left: 10px;
top: 105px;
left: 0;
bottom: 0;
width: 260px;
} }
.main-view{ .main-view{
position: fixed;
top: 105px;
bottom: 20px;
left: 280px;
right: 20px;
width: 100%;
height: 100%;
} }
</style> </style>
DAPlatform-front/src/components/MainView.vue
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<!-- <div id="img-box">--> <!-- <div id="img-box">-->
<!-- <!--
</div>--> </div>-->
<img v-for="item in image_list" :src="item.url" :id="item.id" class="img-item" /> <!-- <img v-for="item in image_list" :src="item.url" :id="item.id" class="img-item" />-->
<img src="../assets/logo.png">
</div> </div>
</template> </template>
...@@ -15,59 +16,59 @@ ...@@ -15,59 +16,59 @@
via_img_fileref: {}, via_img_fileref: {},
image_list: [], image_list: [],
} }
}, },}
mounted(){ // mounted(){
let _this = this // let _this = this
this.bus.$on('change-image-list', function (result) { // this.bus.$on('change-image-list', function (result) {
_this.via_img_fileref = result // _this.via_img_fileref = result
}) // })
this.bus.$on('add-image-list', function (result) { // this.bus.$on('add-image-list', function (result) {
let image_obj // let image_obj
let i // let i
for (i = 0; i < result.length; i++) { // for (i = 0; i < result.length; i++) {
image_obj = new img_obj() // image_obj = new img_obj()
image_obj.url =_this.getObjectURL(_this.via_img_fileref[result[i]]) // image_obj.url =_this.getObjectURL(_this.via_img_fileref[result[i]])
image_obj.id = result[i] // image_obj.id = result[i]
_this.image_list.push(image_obj) // _this.image_list.push(image_obj)
} // }
}) // })
this.bus.$on('show-img', function (img_id) { // this.bus.$on('show-img', function (img_id) {
_this.$nextTick(() => { // _this.$nextTick(() => {
_this.img_list_remove_all_active_class() // _this.img_list_remove_all_active_class()
_this.img_add_visible_class(img_id) // _this.img_add_visible_class(img_id)
}) // })
//
}) // })
}, // },
methods:{ // methods:{
img_list_remove_all_active_class: function () { // img_list_remove_all_active_class: function () {
let imgs = document.getElementById('img-box').childNodes // let imgs = document.getElementById('img-box').childNodes
let j // let j
for (j = 0; j < imgs.length; j++) { // for (j = 0; j < imgs.length; j++) {
imgs[j].classList.remove('visible') // imgs[j].classList.remove('visible')
} // }
}, // },
img_add_visible_class: function (img_id) { // img_add_visible_class: function (img_id) {
// image显示 // // image显示
document.getElementById(img_id).classList.add('visible') // document.getElementById(img_id).classList.add('visible')
}, // },
getObjectURL: function (file) { // getObjectURL: function (file) {
let url = null ; // let url = null ;
if (window.createObjectURL!=undefined) { // basic // if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ; // url = window.createObjectURL(file) ;
}else if (window.webkitURL!=undefined) { // webkit or chrome // }else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ; // url = window.webkitURL.createObjectURL(file) ;
}else if (window.URL!=undefined) { // mozilla(firefox) // }else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ; // url = window.URL.createObjectURL(file) ;
} // }
return url ; // return url ;
}, // },
} // }
} // }
function img_obj(url, id) { // function img_obj(url, id) {
this.url = url // this.url = url
this.id = id // this.id = id
} // }
</script> </script>
<style scoped> <style scoped>
......
DAPlatform-front/src/components/Sidebar.vue
<template> <template>
<div class="sidebar-box"> <div class="sidebar-box">
<div> <div>
<div class="img-list-title">图片列表</div> <div class="img-list-title">工作区</div>
<div class="img-title-list-box"> <div class="img-title-list-box">
<div id="img-title-list"> <div id="img-title-list">
<div v-for="(item,index) in via_img_metadata" @click="jump_to_image(index)" class="img-title" :id="'title-' + index">{{item.filename}}</div> <!-- <div v-for="(item,index) in via_img_metadata" @click="jump_to_image(index)" class="img-title" :id="'title-' + index">{{item.filename}}</div>-->
<div v-for ="item in via_image_filename_list" >{{item}}</div>
</div> </div>
</div> </div>
<div class="add-file-btn-group"> <div class="add-file-btn-group">
<el-button icon="el-icon-circle-plus" size="small" @click="select_local_files">添加本地图片</el-button> <el-button icon="el-icon-circle-plus" type="primary" size="small" >添加本地图片</el-button>
<el-button icon="el-icon-circle-plus" size="small">添加URL</el-button> <el-button icon="el-icon-circle-plus" type="primary" size="small">添加URL</el-button>
<input id="invisible_file_input" type="file" style="display: none;" multiple="multiple" accept=".jpg,.jpeg,.png,.bmp" @change="add_local_files"/> <input id="invisible_file_input" type="file" style="display: none;" multiple="multiple" accept=".jpg,.jpeg,.png,.bmp" @change="add_local_files"/>
</div> </div>
<div class="img-list-title">图层列表</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -22,14 +22,46 @@ ...@@ -22,14 +22,46 @@
name: "Sidebar", name: "Sidebar",
data () { data () {
return { return {
via_img_metadata: { via_image_filename_list: [
}, // data structure to store loaded images metadata "image1.jpg",
via_img_fileref: {}, // reference to local images selected by using browser file selector "image1.jpg",
via_image_id_list: [], "image1.jpg",
via_image_filename_list: [], "image1.jpg",
via_img_count: 0, "image1.jpg",
fileList: {} "image1.jpg",
"image1.jpg" ,
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.jpg",
"image1.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 () { mounted () {
let _this = this let _this = this
...@@ -47,103 +79,103 @@ ...@@ -47,103 +79,103 @@
}) })
}, },
methods: { methods: {
add_local_files: function (event) { // add_local_files: function (event) {
let select_local_files = event.target.files // let select_local_files = event.target.files
let new_img_id_list = [] // let new_img_id_list = []
this.fileList = select_local_files // this.fileList = select_local_files
for (let i = 0; i < select_local_files.length; i++) { // for (let i = 0; i < select_local_files.length; i++) {
let filetype = select_local_files[i].type.substr(0, 5) // let filetype = select_local_files[i].type.substr(0, 5)
if (filetype === 'image') { // if (filetype === 'image') {
let filename = select_local_files[i].name // let filename = select_local_files[i].name
let size = select_local_files[i].size // let size = select_local_files[i].size
let img_id1 = this._via_get_image_id(filename, size) // let img_id1 = this._via_get_image_id(filename, size)
let img_id2 = this._via_get_image_id(filename, -1); // let img_id2 = this._via_get_image_id(filename, -1);
let img_id = img_id1 // 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_id1) || this.via_img_metadata.hasOwnProperty(img_id2)) {
if(this.via_img_metadata.hasOwnProperty(img_id2)) { // if(this.via_img_metadata.hasOwnProperty(img_id2)) {
img_id = img_id2 // img_id = img_id2
} // }
this.via_img_fileref[img_id] =select_local_files[i] // this.via_img_fileref[img_id] =select_local_files[i]
if (this.via_img_metadata[img_id].size === -1 ) { // if (this.via_img_metadata[img_id].size === -1 ) {
this. via_img_metadata[img_id].size = size; // this. via_img_metadata[img_id].size = size;
} // }
//
} else { // } else {
img_id = this.project_add_new_file(filename, size) // img_id = this.project_add_new_file(filename, size)
this.via_img_fileref[img_id] =select_local_files[i] // this.via_img_fileref[img_id] =select_local_files[i]
new_img_id_list.push(img_id) // new_img_id_list.push(img_id)
} // }
} else { // } else {
console.log('其它类型文件！') // console.log('其它类型文件！')
} // }
} // }
this.bus.$emit('change-image-list', this.via_img_fileref) // this.bus.$emit('change-image-list', this.via_img_fileref)
if(this.via_img_metadata) { // if(this.via_img_metadata) {
if(new_img_id_list.length) { // if(new_img_id_list.length) {
this.bus.$emit('add-image-list', new_img_id_list) // this.bus.$emit('add-image-list', new_img_id_list)
//显示new_img_index_list[0] // //显示new_img_index_list[0]
this._via_show_img(new_img_id_list[0]) // this._via_show_img(new_img_id_list[0])
} else { // } else {
// show original image // // show original image
} // }
} else { // } else {
// 没有增加新文件 // // 没有增加新文件
} // }
}, // },
project_add_new_file: function (filename, size, file_id){ // project_add_new_file: function (filename, size, file_id){
var img_id = file_id; // var img_id = file_id;
if ( typeof(img_id) === 'undefined' ) { // if ( typeof(img_id) === 'undefined' ) {
if ( typeof(size) === 'undefined' ) { // if ( typeof(size) === 'undefined' ) {
size = -1; // size = -1;
} // }
img_id = this._via_get_image_id(filename, size); // img_id = this._via_get_image_id(filename, size);
} // }
//
if (!this.via_img_metadata.hasOwnProperty(img_id) ) { // if (!this.via_img_metadata.hasOwnProperty(img_id) ) {
this.$set(this.via_img_metadata,img_id,new file_metadata(filename, size)) // this.$set(this.via_img_metadata,img_id,new file_metadata(filename, size))
this.via_image_id_list.push(img_id); // this.via_image_id_list.push(img_id);
this.via_image_filename_list.push(filename); // this.via_image_filename_list.push(filename);
this.via_img_count += 1; // this.via_img_count += 1;
} // }
return img_id; // return img_id;
}, // },
_via_get_image_id: function (filename, size) { // _via_get_image_id: function (filename, size) {
if ( typeof(size) === 'undefined' ) { // if ( typeof(size) === 'undefined' ) {
return filename; // return filename;
} else { // } else {
return filename + size; // return filename + size;
} // }
}, // },
_via_show_img: function (img_id) { // _via_show_img: function (img_id) {
this.bus.$emit('show-img',img_id) // this.bus.$emit('show-img',img_id)
this.$nextTick(() => { // this.$nextTick(() => {
// 点击图片列表，样式切换 // // 点击图片列表，样式切换
this.img_title_list_remove_all_active_class() // this.img_title_list_remove_all_active_class()
this.img_title_list_add_active_class(img_id) // this.img_title_list_add_active_class(img_id)
}) // })
}, // },
jump_to_image: function (img_id) { // jump_to_image: function (img_id) {
this._via_show_img(img_id) // this._via_show_img(img_id)
}, // },
select_local_files: function () { // select_local_files: function () {
document.getElementById('invisible_file_input').click() // document.getElementById('invisible_file_input').click()
}, // },
img_title_list_add_active_class: function (img_id) { // img_title_list_add_active_class: function (img_id) {
// 列表高亮 // // 列表高亮
let element = document.getElementById('title-' + img_id) // let element = document.getElementById('title-' + img_id)
element.classList.add('img-title-active') // element.classList.add('img-title-active')
// 当前选中列表滚动到可视区域 // // 当前选中列表滚动到可视区域
this.img_title_list_scroll_to_view(element) // this.img_title_list_scroll_to_view(element)
}, // },
img_title_list_remove_all_active_class: function () { // img_title_list_remove_all_active_class: function () {
//
let els = document.getElementById('img-title-list').childNodes // let els = document.getElementById('img-title-list').childNodes
let i // let i
for (i = 0; i < els.length; i++) { // for (i = 0; i < els.length; i++) {
els[i].classList.remove('img-title-active') // els[i].classList.remove('img-title-active')
} // }
//
}, // },
// 图片列表根据选中元素滚动，以显示选中元素 // 图片列表根据选中元素滚动，以显示选中元素
img_title_list_scroll_to_view: function (element) { img_title_list_scroll_to_view: function (element) {
let img_title_list_box = document.getElementsByClassName('img-title-list-box')[0] let img_title_list_box = document.getElementsByClassName('img-title-list-box')[0]
...@@ -180,24 +212,25 @@ ...@@ -180,24 +212,25 @@
<style scoped> <style scoped>
.sidebar-box{ .sidebar-box{
border: 1px solid #c6e2ff; border: 1px solid #409EFF;
} }
.img-list-title{ .img-list-title{
line-height: 40px; line-height: 40px;
padding: 0 10px; padding: 0 10px;
background: #ecf5ff; background: #409EFF;
border-bottom: 1px solid #c6e2ff; color: white;
border-bottom: 1px solid #409EFF;
} }
.img-title-list-box{ .img-title-list-box{
height: 300px; height: 500px;
overflow: auto; overflow: auto;
border-bottom: 1px solid #c6e2ff; border-bottom: 1px solid #409EFF;
padding: 5px; padding: 5px;
} }
.img-title{ .img-title{
padding: 0 5px; padding: 0 5px;
line-height: 24px; line-height: 24px;
border-left: 3px solid #c6e2ff; border-left: 3px solid #409EFF;
} }
.img-title:hover{ .img-title:hover{
color: #409EFF; color: #409EFF;
...@@ -207,7 +240,6 @@ ...@@ -207,7 +240,6 @@
} }
.add-file-btn-group{ .add-file-btn-group{
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid #c6e2ff;
} }
.add-file-btn-group >>> button{ .add-file-btn-group >>> button{
margin-top: 3px; margin-top: 3px;
......
DAPlatform-front/src/components/ToolBar.vue
<template> <template>
<div class="menu-box"> <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-group v-if="activeIndex1===1">
<el-button type="primary" icon="el-icon-arrow-left" size="small" @click="pre_img()">上一张</el-button> <el-button class="tool-button"type="primary" size="small">保存</el-button>
<el-button type="primary" size="small" @click="next_img()">下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button> <el-button class="tool-button"type="primary" size="small">导出图形标注为Json格式文件</el-button>
<el-button class="tool-button"type="primary" size="small">导出图层标注为Shp格式文件</el-button>
</el-button-group> </el-button-group>
<el-button-group v-if="activeIndex1===2"> <el-button-group v-if="activeIndex1===2">
<el-button type="primary" icon="el-icon" size="small" @click="on">拖动图片</el-button> <el-button class="tool-button"type="primary" size="small">打开图片</el-button>
<el-button type="primary" icon="el-icon" size="small">多边形标注</el-button> <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" size="small" @click="pre_img()">上一张</el-button>
<el-button type="primary" icon="el-icon" size="small">矩形标注</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 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>
<el-button-group v-show="activeIndex1===3"> <el-button-group v-show="activeIndex1===3">
<el-button type="primary" icon="el-icon" size="small">打开图层</el-button> <el-button class="tool-button"type="primary" size="small">地标标注</el-button>
<el-button type="primary" icon="el-icon" size="small">飞到坐标点</el-button> <el-button class="tool-button"type="primary" size="small" @click="deleteAnnotation">删除标注</el-button>
</el-button-group> </el-button-group>
<!-- <el-button-group>--> <el-button-group v-if="activeIndex1===3||activeIndex1===2" >
<!-- <el-button type="success" icon="el-icon-zoom-in" size="small">放大</el-button>--> <el-button class="tool-button"type="primary" size="small">移动图层</el-button>
<!-- <el-button type="success" icon="el-icon-zoom-out" size="small">缩小</el-button>--> <el-button class="tool-button"type="primary" size="small">放大</el-button>
<!-- </el-button-group>--> <el-button class="tool-button"type="primary" size="small">缩小</el-button>
<!-- <el-button type="success" icon="el-icon-download" size="small">导出</el-button>--> </el-button-group>
</div> </div>
</div>
</template> </template>
<script> <script>
export default {
name: "ToolBar",
data(){
return{ export default {
activeIndex1:2 name: 'ToolBar',
data () {
return {
activeIndex1: 1,
};
},
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('请上传图片')
} }
}, },
methods:{ next_img: function () {
pre_img: function () { let is_selected = document.getElementsByClassName('visible')
let is_selected = document.getElementsByClassName('visible') if (is_selected.length) {
if(is_selected.length) { let is_selected_id = is_selected[0].id
let is_selected_id = is_selected[0].id this.bus.$emit('next-img', is_selected_id)
this.bus.$emit('pre-img',is_selected_id) } else {
} else { console.log('请上传图片')
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('请上传图片')
}
},
on:function () {
this.activeIndex1=1
} }
}, },
created () { changeToolBar(val){
this.bus.$on("ActiveIndex",function (val) { this.activeIndex1=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> </script>
<style scoped> <style>
.menu-box{ .toolBar-top{
padding: 2px 10px; }
.toolBar{
margin-bottom: 5px;
padding-top: 10px;
color: #409EFF;
}
.tool-button{
margin-bottom: 10px;
margin-left: 10px;
} }
</style> </style>
DAPlatform-front/src/components/TopNavBar.vue deleted 100644 → 0
<template>
<div>
<el-menu
class="el-menu-top"
mode="horizontal">
<el-container>
<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-container>
</el-menu>
<el-container class="toolBar">
<el-button-group v-if="activeIndex1===1">
<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" icon="el-icon" size="small">移动图片</el-button>
<el-button class="tool-button"type="primary" icon="el-icon" size="small">多边形标注</el-button>
<el-button class="tool-button"type="primary" icon="el-icon" size="small">矩形标注</el-button>
</el-button-group>
<el-button-group v-show="activeIndex1===3">
<el-button class="tool-button"type="primary" icon="el-icon" size="small">打开图层</el-button>
<el-button class="tool-button"type="primary" icon="el-icon" size="small">飞到坐标点</el-button>
</el-button-group>
</el-container>
</div>
</template>
<script>
export default {
name: 'TopNavBar',
data () {
return {
activeIndex1: 1,
};
},
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
}
}
}
</script>
<style>
.top-nav-bar{
background-color: white;
text-color: #fff;
active-text-color: #fff
}
.toolBar{
margin-top: 10px;
}
.tool-button{
color: black;
background-color: aliceblue;
border-color: black;
}
</style>
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