Skip to content

D
DA-Platform
Commit 4a993f52 by wl2282589971
Options

添加退出和列表树形组件

parent e4a381cd
Showing with 191 additions and 367 deletions
DAPlatform-front/src/api/PersonAPI.js deleted 100644 → 0
import axios from '../assets/js/axios'
var staticMethods = {
getAllData ({ commit, state }, id) { // 得到指定文章详情
return axios.Get({
url: 'get_data',
params: {
id: id
},
callback: (res) => {
return res
}
})
},
addData (data) {
let _data = new FormData()
_data.append('a','a')
return axios.Post({
url: 'add_data/',
params: {
data: _data
},
callback: (res) => {
return res
}
})
}
}
function PersonAPI () {
return Object.freeze(Object.assign(
{},
staticMethods
))
}
Object.assign(PersonAPI, staticMethods)
export default PersonAPI
DAPlatform-front/src/components/BottomToolBar.vue 0 → 100644
<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/Home.vue deleted 100644 → 0
<template>
<div class="home">
<el-table
:data="tableData"
>
<el-table-column
prop="date"
label="日期"
></el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
</el-table>
<el-form :inline="true" :model="formData" ref="formData">
<el-form-item
label="姓名"
:rules="{required: true, message: '请输入姓名', trigger: 'blur'}"
>
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item
label="性别"
:rules="{required: true, message: '请输入性别', trigger: 'blur'}"
>
<el-input v-model="formData.sex"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitData(formData)">提交</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="select_local_files">Add Files</el-button>
<input id="invisible_file_input" type="file" style="display: none;" multiple="multiple" accept=".jpg,.jpeg,.png,.bmp" @change="add_local_files"/>
<div v-for="(item,index) in via_img_metadata" @click="jump_to_image(index)">{{item.filename}}</div>
<div id="img_box"></div>
</div>
</template>
<script>
import PersonAPI from '../api/PersonAPI'
import axios from 'axios'
import Cookies from 'js-cookie'
export default {
name: 'Home',
data () {
return {
tableData: [],
formData: {
name: '',
sex: ''
},
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: {}
}
},
created () {
this.getData(1)
},
methods: {
select_local_files: function(){
document.getElementById('invisible_file_input').click()
},
add_local_files: function(event){
let select_local_files = event.target.files
let new_img_index_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_index_list.push(this.via_image_id_list.indexOf(img_id))
}
} else {
console.log('其它类型文件！')
}
}
if(this.via_img_metadata) {
if(new_img_index_list.length) {
//显示new_img_index_list[0]
this._via_show_img(new_img_index_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;
}
},
getObjectURL: function (file) {
console.log(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 ;
},
_via_show_img: function (img_index) {
let img_id = this.via_image_id_list[img_index]
let url = this.getObjectURL(this.via_img_fileref[img_id])
let bimg = document.createElement('img')
bimg.setAttribute('src',url)
document.getElementById('img_box').append(bimg)
},
jump_to_image: function (img_id) {
console.log(this.via_image_id_list.indexOf(img_id))
this._via_show_img(this.via_image_id_list.indexOf(img_id))
},
getData: function ({ commit, state }, id) { // 得到指定文章详情
PersonAPI.getAllData({ commit, state }, id).then(result => {
this.tableData = result.data
})
},
submitData: function (formData) {
this.$refs.formData.validate((valid) => {
if (valid) {
this.addData()
} else {
return false
}
})
},
addData: function () {
axios.get('http://127.0.0.1:8000/backend/add_data/').then(() => {
PersonAPI.addData(this.formData).then(result => {
if (result.data) {
console.log('post成功')
} else {
console.log('post失败')
}
})
})
}
}
}
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>
#img_box >>> img{
visibility: hidden;
}
</style>
DAPlatform-front/src/components/Layout.vue
...@@ -8,18 +8,22 @@ ...@@ -8,18 +8,22 @@
</el-aside> </el-aside>
<el-main class="workbench"> <el-main class="workbench">
<main-view class="main-view"></main-view> <main-view class="main-view"></main-view>
<BottomToolBar class="bottom-tool-bar"></BottomToolBar>
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
</template> </template>
<script> <script>
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import MainView from './MainView' import MainView from './MainView'
import ToolBar from "./ToolBar"; import ToolBar from "./ToolBar";
import BottomToolBar from "./BottomToolBar";
export default { export default {
name: "Layout", name: "Layout",
components: { components: {
BottomToolBar,
ToolBar, ToolBar,
sidebar: Sidebar, sidebar: Sidebar,
mainView: MainView mainView: MainView
...@@ -44,4 +48,9 @@ ...@@ -44,4 +48,9 @@
.main-view{ .main-view{
} }
.bottom-tool-bar{
position: fixed;
left: 50%;
bottom: 15%;
}
</style> </style>
DAPlatform-front/src/components/MainView.vue
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
</template> </template>
<script> <script>
export default { export default {
name: "MainView", name: "MainView",
data(){ data(){
return{ return{
via_img_fileref: {},
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) {
...@@ -75,20 +75,20 @@ ...@@ -75,20 +75,20 @@
.img-view { .img-view {
padding: 10px; padding: 10px;
} }
#img-box { /*#img-box {*/
width: 100%; /* width: 100%;*/
height: 100%; /* height: 100%;*/
overflow: auto; /* overflow: auto;*/
position: relative; /* position: relative;*/
} /*}*/
#img-box >>> img{ /*#img-box >>> img{*/
visibility: hidden; /* visibility: hidden;*/
position: absolute; /* position: absolute;*/
top: 0px; /* top: 0px;*/
left: 0px; /* left: 0px;*/
} /*}*/
#img-box >>> .img-item.visible{ /*#img-box >>> .img-item.visible{*/
visibility: visible; /* visibility: visible;*/
} /*}*/
</style> </style>
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>--> <el-tree
<div v-for ="item in via_image_filename_list" >{{item}}</div> :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> </div>
<div class="add-file-btn-group"> <div class="img-list-title">图层列表</div>
<el-button icon="el-icon-circle-plus" type="primary" size="small" >添加本地图片</el-button> <div class="img-title-list-box">
<el-button icon="el-icon-circle-plus" type="primary" size="small">添加URL</el-button> <div id="layer-title-list">
<input id="invisible_file_input" type="file" style="display: none;" multiple="multiple" accept=".jpg,.jpeg,.png,.bmp" @change="add_local_files"/> <el-tree
:data="image_list"
:props="defaultProps"
accordion
@node-click="handleNodeClick">
</el-tree>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -20,36 +31,72 @@ ...@@ -20,36 +31,72 @@
<script> <script>
export default { export default {
name: "Sidebar", name: "Sidebar",
data () { data() {
return { return {
via_image_filename_list: [ image_list: [{
"image1.jpg", label: 'image1.jpg',
"image1.jpg", children: [{
"image1.jpg", label: '标注1'
"image1.jpg", },
"image1.jpg", {
"image1.jpg", label: '标注2',
"image1.jpg" , }]
"image1.jpg", },
"image1.jpg", {
"image1.jpg", label: 'image2.jpg',
"image1.jpg", children: [{
"image1.jpg", label: '标注1'
"image1.jpg", },
"image1.jpg", {
"image1.jpg", label: '标注2',
"image1.jpg", }]
"image1.jpg", }],
"image1.jpg", layer_list: [{
"image1.jpg", label: 'image1.jpg',
"image1.jpg", children: [{
"image1.jpg", label: '标注1'
"image1.jpg", },
"image1.jpg", {
"image1.jpg", label: '标注2',
"image1.jpg", }]
"image1.jpg" },
] {
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: { // via_img_metadata: {
// //
...@@ -62,23 +109,23 @@ ...@@ -62,23 +109,23 @@
// via_img_count: 0, // via_img_count: 0,
// fileList: {} // fileList: {}
// } // }
}, // },
mounted () { // mounted () {
let _this = this // let _this = this
this.bus.$on('pre-img',function (is_selected_id) { // this.bus.$on('pre-img',function (is_selected_id) {
let is_selected_index = _this.via_image_id_list.indexOf(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_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] // let pre_id = _this.via_image_id_list[pre_index]
_this.jump_to_image(pre_id) // _this.jump_to_image(pre_id)
}) // })
this.bus.$on('next-img',function (is_selected_id) { // this.bus.$on('next-img',function (is_selected_id) {
let is_selected_index = _this.via_image_id_list.indexOf(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_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] // let pre_id = _this.via_image_id_list[pre_index]
_this.jump_to_image(pre_id) // _this.jump_to_image(pre_id)
}) // })
}, // },
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 = []
...@@ -174,40 +221,40 @@ ...@@ -174,40 +221,40 @@
// 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]
let img_list_title = document.getElementsByClassName('img-list-title')[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_top = element.offsetTop - img_list_title.offsetHeight - img_title_list_box.scrollTop
// 该元素的高度 // // 该元素的高度
let img_title_height = element.offsetHeight // let img_title_height = element.offsetHeight
// 显示区域的高度 // // 显示区域的高度
let box_height = img_title_list_box.clientHeight // let box_height = img_title_list_box.clientHeight
// 如果距离显示区域顶部的距离小于等于0，则是在显示区域上面，则向下滚动 // // 如果距离显示区域顶部的距离小于等于0，则是在显示区域上面，则向下滚动
if (img_title_top <= 0) { // if (img_title_top <= 0) {
// img_title_top为负值，直接加上即可 // // img_title_top为负值，直接加上即可
img_title_list_box.scrollTop += img_title_top // img_title_list_box.scrollTop += img_title_top
} else { //大于0，也就是在显示区域顶部的下面了 // } else { //大于0，也就是在显示区域顶部的下面了
// 元素底部 距离 显示区域底部 的距离 // // 元素底部 距离 显示区域底部 的距离
let differ = box_height - (img_title_top + img_title_height) // let differ = box_height - (img_title_top + img_title_height)
// 距离 显示区域底部 的距离小于0，则在显示区域的底部的下面了，则向上滚动；大于等于0，则在显示区域内，不需要滚动 // // 距离 显示区域底部 的距离小于0，则在显示区域的底部的下面了，则向上滚动；大于等于0，则在显示区域内，不需要滚动
if (differ < 0) { // if (differ < 0) {
// differ为负值，要减去它 // // differ为负值，要减去它
img_title_list_box.scrollTop -= differ // img_title_list_box.scrollTop -= differ
} // }
} // }
} // }
} // }
} // }
function file_metadata(filename, size) { // function file_metadata(filename, size) {
this.filename = filename; // this.filename = filename;
this.size = size; // file size in bytes // this.size = size; // file size in bytes
this.regions = []; // array of file_region() // this.regions = []; // array of file_region()
this.file_attributes = {}; // image attributes // this.file_attributes = {}; // image attributes
} // }
</script> </script>
<style scoped> <style scoped>
...@@ -222,7 +269,7 @@ ...@@ -222,7 +269,7 @@
border-bottom: 1px solid #409EFF; border-bottom: 1px solid #409EFF;
} }
.img-title-list-box{ .img-title-list-box{
height: 500px; height: 250px;
overflow: auto; overflow: auto;
border-bottom: 1px solid #409EFF; border-bottom: 1px solid #409EFF;
padding: 5px; padding: 5px;
......
DAPlatform-front/src/components/ToolBar.vue
...@@ -11,11 +11,9 @@ ...@@ -11,11 +11,9 @@
<el-button-group v-if="activeIndex1===1"> <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 class="tool-button"type="primary" size="small">导出图形标注为Json格式文件</el-button> <el-button class="tool-button"type="primary" size="small">退出</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 class="tool-button"type="primary" 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 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 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>
...@@ -25,20 +23,18 @@ ...@@ -25,20 +23,18 @@
<el-button class="tool-button"type="primary" size="small"@click="deleteAnnotation">删除标注</el-button> <el-button class="tool-button"type="primary" size="small"@click="deleteAnnotation">删除标注</el-button>
</el-button-group> </el-button-group>
<el-button-group v-show="activeIndex1===3"> <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">地标标注</el-button>
</el-button-group> </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-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">地标标注</el-button>
<el-button class="tool-button"type="primary" size="small" @click="deleteAnnotation">删除标注</el-button> <el-button class="tool-button"type="primary" size="small" @click="deleteAnnotation">删除标注</el-button>
</el-button-group> </el-button-group>
<el-button-group v-if="activeIndex1===3||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">缩小</el-button>
</el-button-group>
</div> </div>
</div> </div>
...@@ -53,6 +49,8 @@ ...@@ -53,6 +49,8 @@
data () { data () {
return { return {
activeIndex1: 1, activeIndex1: 1,
Xpoint:0,
Ypoint:0,
}; };
}, },
methods: { methods: {
......
DAPlatform-front/src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Layout from '@/components/Layout' import Layout from '@/components/Layout'
Vue.use(Router) Vue.use(Router)
...@@ -17,11 +16,6 @@ export default new Router({ ...@@ -17,11 +16,6 @@ export default new Router({
path: '/HelloWorld', path: '/HelloWorld',
name: 'HelloWorld', name: 'HelloWorld',
component: HelloWorld component: HelloWorld
},
{
path: '/home',
name: 'Home',
component: Home
} }
] ]
}) })
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