Skip to content

D
DA-Platform
Commit 4a993f52 by wl2282589971
Options

添加退出和列表树形组件

parent e4a381cd
Showing with 62 additions and 285 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/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>
...@@ -24,21 +22,19 @@ ...@@ -24,21 +22,19 @@
<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-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-group>
<el-button class="tool-button"type="primary" size="small">地标标注</el-button> <a v-show="activeIndex1===3">X:</a>
</el-button-group> <input v-model="Xpoint" size="small" style="width: 30px" v-show="activeIndex1===3"></input>
<el-button-group v-show="activeIndex1===3"> <a v-show="activeIndex1===3">Y:</a>
<el-button class="tool-button"type="primary" size="small">地标标注</el-button> <input v-model="Ypoint" size="small" style="width: 30px" v-show="activeIndex1===3"></input>
<el-button class="tool-button"type="primary" size="small" @click="deleteAnnotation">删除标注</el-button> <el-button-group v-show="activeIndex1===3">
</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-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" @click="deleteAnnotation">删除标注</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-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