Skip to content

D
DA-Platform

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

Commit a8723bd1 by 张欣玥
Options

image改

parent 1fb2af71
Showing with 232 additions and 46 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
<template> <template>
<div class="layout" :style="{ height : height_res+'px'}"> <div class="layout" :style="{ height : height_res+'px'}">
<!-- 工具栏--> <!-- 工具栏-->
<div class="toolBar"> <!-- <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">-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>&ndash;&gt;-->
<!--&lt;!&ndash; <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
<!-- <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 style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
<!-- 侧边栏-->
<el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<div class="sidebar-box">
<div class="tool-button-left">
<el-button-group id="start"> <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 class="tool-button" type="primary" >退出</el-button> <el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group> </el-button-group>
<div style="margin-top: 10px"></div>
<el-button-group id="tool"> <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" 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" >下一张<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" >矩形标注</el-button> <el-button class="tool-button" type="primary" >矩形标注</el-button>
<el-button class="tool-button"type="primary" @click="deleteAnnotation">删除标注</el-button> <el-button class="tool-button" type="primary" @click="deleteAnnotation">删除</el-button>
</el-button-group> </el-button-group>
</div> </div>
<el-container> </div>
<!-- 侧边栏--> </el-aside>
<el-aside class="sidebar">
<el-aside class="sidebar" style="position: absolute;margin-top: 120px" :style="{ height : height_res*0.97-155+'px'}">
<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">
<el-tree <el-tree
:data="image_list" :data="data"
:props="defaultProps" :props="defaultProps"
accordion> @node-click="handleNodeClick">
</el-tree> </el-tree>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-aside> </el-aside>
<!-- <el-aside class="sidebar2" style="position: absolute;width: 3vh;margin-left: 390px;margin-top:10px;margin-right: 0px">-->
<!-- <div class="tool-button-left">-->
<!-- <div>文件</div>-->
<!-- <div class = "tool-button-1">存</div>-->
<!-- <div class = "tool-button-1">退</div>-->
<!-- <div class = "tool-button-1">选</div>-->
<!-- <div class = "tool-button-1">拖</div>-->
<!-- <div style = "margin-bottom: 10px"></div>-->
<!-- <div>标注</div>-->
<!-- <div class = "tool-button-1">多</div>-->
<!-- <div class = "tool-button-1">矩</div>-->
<!-- <div class = "tool-button-1">删</div>-->
<!-- </div>-->
<!-- </el-aside>-->
<!-- 工作台--> <!-- 工作台-->
<el-main class="workbench"> <el-main class="workbench" style="padding: 0px">
<img src="../../assets/logo.png">
<!-- <img src="../../assets/logo.png">-->
<!-- <div style="margin-top: 50px">--> <!-- <div style="margin-top: 50px">-->
<el-button-group id="buttonBar"> <!-- <el-button-group id="buttonBar" style="z-index: 500">-->
<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" >放大</el-button>-->
<el-button class="tool-button"type="primary" >缩小</el-button> <!-- <el-button class="tool-button"type="primary" >缩小</el-button>-->
</el-button-group>
<!-- <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&#45;&#45;right"></i></el-button>-->
<!-- </el-button-group>-->
<div id="buttonBar" style="z-index: 500;font-size: 4vh">
<div class="el-icon-rank" id="button-rank"></div>
<div class="el-icon-plus" id="button-plus" @click="goBigger"></div>
<div class="el-icon-minus" id="button-minus" @click="goSmaller"></div>
<!-- <span style="">│</span>-->
<div class="el-icon-d-arrow-left" id="button-left" style="margin-left: 10px" @click="loadPicture_left"></div>
<div class="el-icon-d-arrow-right" id="button-right" @click="loadPicture"></div>
</div>
<!-- </div>--> <!-- </div>-->
<div :style="{ transform: 'scale('+scaleSize+','+scaleSize+')' }" style="text-align：center;" id = "center_pic">
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png" style="pointer-events: none">-->
<!-- <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg" style="pointer-events: none">-->
<!-- <img src="../../assets/avatar.jpg" style="pointer-events: none;margin: 0 auto">-->
</div>
</el-main> </el-main>
</el-container> </el-container>
...@@ -51,17 +106,19 @@ ...@@ -51,17 +106,19 @@
<script> <script>
export default { export default {
name: 'imageAnnotation', name: 'imageAnnotation',
data(){ data () {
return{ return {
height_res:0, pictureId: 0,
activeIndex1:1, scaleSize: 1,
height_res: 0,
activeIndex1: 1,
image_list: [{ image_list: [{
label: 'image1.jpg', label: 'image1.jpg',
children: [{ children: [{
label: '标注1' label: '标注1'
}, },
{ {
label: '标注2', label: '标注2'
}] }]
}, },
{ {
...@@ -70,7 +127,7 @@ export default { ...@@ -70,7 +127,7 @@ export default {
label: '标注1' label: '标注1'
}, },
{ {
label: '标注2', label: '标注2'
}] }]
}], }],
layer_list: [{ layer_list: [{
...@@ -79,7 +136,7 @@ export default { ...@@ -79,7 +136,7 @@ export default {
label: '标注1' label: '标注1'
}, },
{ {
label: '标注2', label: '标注2'
}] }]
}, },
{ {
...@@ -88,7 +145,30 @@ export default { ...@@ -88,7 +145,30 @@ export default {
label: '标注1' label: '标注1'
}, },
{ {
label: '标注2', label: '标注2'
}]
}],
data: [{
label: '图片1',
url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png',
children: [{
label: '二级 1-1'
}]
}, {
label: '图片2',
url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200526170357.jpg',
children: [{
label: '二级 2-1'
}, {
label: '二级 2-2'
}]
}, {
label: '图片3',
url: 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200303222626.png',
children: [{
label: '二级 3-1'
}, {
label: '二级 3-2'
}] }]
}], }],
defaultProps: { defaultProps: {
...@@ -97,20 +177,55 @@ export default { ...@@ -97,20 +177,55 @@ export default {
} }
} }
}, },
mounted(){ mounted () {
this.get_height(); //加载图片
var _this = this; var myParent = document.getElementById('center_pic');
window.onresize = function(){ var myImage = document.createElement('img');
myImage.src = this.data[0].url;
myParent.appendChild(myImage);
this.pictureId = 0;
// 动态调整窗口高度
this.get_height()
// 当浏览器size改变时，重新计算高度
var _this = this
window.onresize = function () {
// alert("??"); // alert("??");
_this.height_res = document.body.clientHeight - 61; // _this.get_height();
_this.height_res = document.body.clientHeight - 61
}
},
created () {
},
methods: {
goBigger () {
var scale = this.scaleSize
if (scale < 2) {
this.scaleSize = scale + 0.1
} else {
this.scaleSize = 2
} }
// alert(this.scaleSize)
}, },
methods:{ goSmaller () {
get_height(){ var scale = this.scaleSize
this.height_res = document.body.clientHeight - 61; if (scale > 0.5) {
this.scaleSize = scale - 0.1
} else {
this.scaleSize = 0.5
}
// alert(this.scaleSize)
}, },
changeToolBar(val){ handleNodeClick (data) {
this.activeIndex1=val console.log(data)
},
// 动态高度
get_height () {
this.height_res = document.body.clientHeight - 61
},
changeToolBar (val) {
this.activeIndex1 = val
}, },
deleteAnnotation: function () { deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', { this.$confirm('确定删除此标注', '提示', {
...@@ -121,19 +236,65 @@ export default { ...@@ -121,19 +236,65 @@ export default {
this.$message({ this.$message({
type: 'success', type: 'success',
message: '删除成功!' message: '删除成功!'
}); })
}).catch(() => { }).catch(() => {
this.$message({ this.$message({
type: 'info', type: 'info',
message: '已取消删除' message: '已取消删除'
}); })
}); })
},
loadPicture () {
var len = this.data.length;
var count = this.pictureId;
// alert(len);
// alert(count);
if (count < len - 1){
this.pictureId++;
var myParent = document.getElementById('center_pic');
myParent.removeChild(myParent.childNodes[0]);
var myImage = document.createElement('img');
myImage.src = this.data[this.pictureId].url;
myParent.appendChild(myImage);
}
else {
alert('已经是最后一张图片了')
} }
}, },
}; loadPicture_left () {
// var len = this.data.length;
var count = this.pictureId;
// alert(count);
if(count > 0){
this.pictureId--;
var myParent = document.getElementById('center_pic');
myParent.removeChild(myParent.childNodes[0]);
var myImage = document.createElement('img');
myImage.src = this.data[this.pictureId].url;
myParent.appendChild(myImage);
}
else {
alert('已经是第一张图片了');
}
}
}
}
</script> </script>
<style scoped> <style scoped>
#button-left,#button-minus,#button-rank,#button-right,#button-plus{
color: #409EFF;
}
#button-left:hover,#button-minus:hover,#button-rank:hover,#button-right:hover,#button-plus:hover{
color: #2571c8;
}
.layout { .layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -151,22 +312,47 @@ export default { ...@@ -151,22 +312,47 @@ export default {
/*border: 2px solid #409eff;*/ /*border: 2px solid #409eff;*/
margin-left: 20px; margin-left: 20px;
margin-right: 40px; margin-right: 40px;
border-radius: 5px; /*border-radius: 5px;*/
box-shadow: 0px 0px 10px #dbdbdb; box-shadow: 0px 0px 10px #dbdbdb;
background-color: white; background-color: white;
height: 87%; height: 97%;
}
.tool-button-left{
text-align: left;
/*padding-top: 20px;*/
/*position: absolute;*/
}
.tool-button-1{
height: 3vh;
width: 3vh;
/*border-radius: 2vh;*/
box-shadow: 2px 2px 5px #dbdbdb;
background-color: #409EFF;
margin-bottom: 1px;
color: white;
line-height: 3vh;
font-size: 1.5vh;
}
.tool-button-1:hover{
background-color: #3387ff;
} }
#buttonBar { #buttonBar {
/*pointer-events: none;*/
position: fixed; position: fixed;
left: 50%; left: 45%;
bottom: 30px; bottom: 8vh;
background-color: rgba(255, 255, 255,1);
padding: 10px 50px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
letter-spacing: 0.5vh;
} }
.sidebar { .sidebar {
height: 87%; height: 97%;
margin-left: 50px; margin-left: 50px;
/*border: 2px solid #409eff;*/ /*border: 2px solid #409eff;*/
border-radius: 5px; /*border-radius: 5px;*/
box-shadow: 0px 0px 10px #dbdbdb; box-shadow: 0px 0px 10px #dbdbdb;
background-color: white; background-color: white;
} }
......
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