Skip to content

D
DA-Platform
Commit e4a381cd by wl2282589971
Options

更改整体风格

parent f9eb3a0f
Showing with 166 additions and 217 deletions
DAPlatform-front/src/components/Layout.vue
<template>
<div class="layout">
<el-container>
<el-header>
<TopNavBar class="top-nav-bar"></TopNavBar>
</el-header>
<el-container>
<sidebar class="sidebar"></sidebar>
<el-main>
<main-view class="main-view"></main-view>
</el-main>
</el-container>
</el-container>
<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>
</el-main>
</el-container>
</div>
</template>
<script>
import MenuBar from './ToolBar'
import Sidebar from './Sidebar'
import MainView from './MainView'
import TopNavBar from './TopNavBar'
import ToolBar from "./ToolBar";
export default {
name: "Layout",
components: {
TopNavBar,
menuBar: MenuBar,
ToolBar,
sidebar: Sidebar,
mainView: MainView
},
......@@ -35,28 +32,16 @@
height: 100%;
overflow: hidden;
}
.top-nav-bar {
top: 0;
left: 0;
}
.main{
margin-top: 40px;
height: calc(100% - 40px);
.workbench{
border: 2px solid #409EFF;
margin-left: 10px;
margin-right: 10px;
}
.sidebar{
position: fixed;
top: 105px;
left: 0;
bottom: 0;
width: 260px;
margin-left: 10px;
}
.main-view{
position: fixed;
top: 105px;
bottom: 20px;
left: 280px;
right: 20px;
width: 100%;
height: 100%;
}
</style>
DAPlatform-front/src/components/MainView.vue
......@@ -3,7 +3,8 @@
<!-- <div id="img-box">-->
<!--
</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>
</template>
......@@ -15,59 +16,59 @@
via_img_fileref: {},
image_list: [],
}
},
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
}
},}
// 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>
......
DAPlatform-front/src/components/ToolBar.vue
<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 type="primary" icon="el-icon-arrow-left" size="small" @click="pre_img()">上一张</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">保存</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 v-if="activeIndex1===2">
<el-button type="primary" icon="el-icon" size="small" @click="on">拖动图片</el-button>
<el-button type="primary" icon="el-icon" size="small">多边形标注</el-button>
<el-button type="primary" icon="el-icon" size="small">矩形标注</el-button>
<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" 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 v-show="activeIndex1===3">
<el-button type="primary" icon="el-icon" size="small">打开图层</el-button>
<el-button type="primary" icon="el-icon" 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>-->
<!-- <el-button type="success" icon="el-icon-zoom-in" size="small">放大</el-button>-->
<!-- <el-button type="success" icon="el-icon-zoom-out" size="small">缩小</el-button>-->
<!-- </el-button-group>-->
<!-- <el-button type="success" icon="el-icon-download" 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">缩小</el-button>
</el-button-group>
</div>
</div>
</template>
<script>
export default {
name: "ToolBar",
data(){
return{
activeIndex1:2
export default {
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:{
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('请上传图片')
}
},
on:function () {
this.activeIndex1=1
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('请上传图片')
}
},
created () {
this.bus.$on("ActiveIndex",function (val) {
this.activeIndex1=val
})
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>
.menu-box{
padding: 2px 10px;
<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/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