Skip to content

D
DA-Platform

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

Commit 9647f32f by 张欣玥
Options

改了layer布局

parent 31aa78ae
Showing with 71 additions and 49 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
......@@ -40,12 +40,13 @@
<el-aside class="sidebar2" style="position: absolute;margin-top: 60px" :style="{ height : 185 +'px'}">
<div class="sidebar-box">
<div>
<div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">图片列表</div>
<div class="img-title-list-box">
<div v-for="(item, index) in data" :key="item.id" style="text-align: left" class="listLeft" @click="jumpToImage(index)">
{{index+1}}. &nbsp; {{item.label}}
</div>
</div>
<div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">标注描述</div>
<div style="margin: 5px;text-align: left">{{this.description}}</div>
<!-- <div class="img-title-list-box">-->
<!-- <div v-for="(item, index) in data" :key="item.id" style="text-align: left" class="listLeft" @click="jumpToImage(index)">-->
<!-- {{index+1}}. &nbsp; {{item.label}}-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
......@@ -188,7 +189,7 @@ export default {
let imageName = routeParams.file.url
this.relationId = routeParams.relationId
this.description = routeParams.piece.template
// 获取图片列表并转换格式
let imageList = await this.getLabelList()
console.log(imageList)
......
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
......@@ -2,27 +2,27 @@
<!-- <div class="layout" :style="{ height : height_res+'px'}">-->
<div class="layout">
<!-- 工具栏-->
<div class="toolBar">
<el-button-group id="start">
<el-button class="tool-button" type="primary" @click="save()" >保存</el-button>
<el-button class="tool-button" type="primary" >退出</el-button>
</el-button-group>
<el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">
<el-button class="tool-button" type="primary" style="margin-right: 10px" @click="setCenter()">改变中心点</el-button>
<a>X:</a>
<input type="text" style="width: 30px" v-model="centerX">
<a>Y:</a>
<input type="text" style="width: 30px" v-model="centerY">
</el-button-group>
<el-radio-group v-model="radio1">
<el-radio-button label="建立地标"></el-radio-button>
<el-radio-button label="矩形标注"></el-radio-button>
<el-radio-button label="多边形标注"></el-radio-button>
</el-radio-group>
</div>
<el-container style="height:50vh">
<!-- <div class="toolBar">-->
<!-- <el-button-group id="start">-->
<!-- <el-button class="tool-button" type="primary" @click="save()" >保存</el-button>-->
<!-- <el-button class="tool-button" type="primary" >退出</el-button>-->
<!-- </el-button-group>-->
<!-- <el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">-->
<!-- <el-button class="tool-button" type="primary" style="margin-right: 10px" @click="setCenter()">改变中心点</el-button>-->
<!-- <a>X:</a>-->
<!-- <input type="text" style="width: 30px" v-model="centerX">-->
<!-- <a>Y:</a>-->
<!-- <input type="text" style="width: 30px" v-model="centerY">-->
<!-- </el-button-group>-->
<!-- <el-radio-group v-model="radio1">-->
<!-- <el-radio-button label="地标"></el-radio-button>-->
<!-- <el-radio-button label="矩形"></el-radio-button>-->
<!-- <el-radio-button label="多边形"></el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<el-container style="margin-top: 20px;height: 100%">
<transition name="fade">
<div class = "alert1" v-show="isInfo">
<div style="flex: 1;display: flex;align-items:center;font-size: 25px">标注</div>
......@@ -45,15 +45,36 @@
<div v-show="isInfo" style="z-index:4000;position: fixed;background-color: rgba(0,0,0,0.42);width: 100%;height: 100%;top: 0;left: 0"></div>
</transition>
<!-- 侧边栏-->
<el-aside class="sidebar" style="">
<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">
<!-- <div style="margin-top: 5px"></div>-->
<!-- // 改变中心点-->
<!-- <el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">-->
<!-- <el-button class="tool-button" type="primary" style="margin-right: 10px" @click="setCenter()">改变中心点</el-button>-->
<!-- <a>X:</a>-->
<!-- <input type="text" style="width: 30px" v-model="centerX">-->
<!-- <a>Y:</a>-->
<!-- <input type="text" style="width: 30px" v-model="centerY">-->
<!-- </el-button-group>-->
<div style="margin-top: 5px"></div>
<el-radio-group v-model="radio1">
<el-radio-button label="地标"></el-radio-button>
<el-radio-button label="矩形"></el-radio-button>
<el-radio-button label="多边形"></el-radio-button>
</el-radio-group>
<el-button @click="save()">保存</el-button>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;height: 32vh">
<div class="sidebar-box" style="height: 32vh">
<el-aside class="sidebar" style="position: absolute;margin-top: 60px;height: 185px">
<div class="sidebar-box" style="height: 185px">
<div>
<div class="img-list-title">点标注</div>
<div class="img-title-list-box" style="height: calc(32vh - 40px)">
<div class="img-title-list-box" style="height: 145px">
<div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="markInfo(index)" @mouseenter="markEnter(index)" @mouseleave="restore()">
{{index+1}}. &nbsp; {{item.landmarkName}}
</div>
......@@ -62,7 +83,7 @@
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: calc(32vh + 30px);height: calc(82% - 32vh - 30px)">
<el-aside class="sidebar" style="position: absolute;margin-top: 260px;height: calc(100vh - 81px - 300px);">
<div class="sidebar-box">
<div>
<div class="img-list-title">区域标注</div>
......@@ -112,7 +133,7 @@
height_res:0,
Xpoint: 0,
Ypoint: 0,
radio1: '建立地标',
radio1: '地标',
activeIndex1:1,
layerData: null, //layerdata存放标注数据
landmarkData: null,//存放地标数据
......@@ -144,7 +165,7 @@
// 避免第一次标注时数据库中没有内容的情况
if (res.layerInfo != null)
this.layerData = res.layerInfo.labelList
else
else
this.layerData = []
console.log(this.layerData)
......@@ -153,7 +174,7 @@
else
this.landmarkData = []
console.log(this.landmarkData)
this.get_height();
var _this = this;
window.onresize = function(){
......@@ -165,12 +186,12 @@
},
watch: {
radio1: function f () {
if (this.radio1 == '建立地标') {
if (this.radio1 == '地标') {
this.mouseTool.close()
} else if (this.radio1 == '矩形标注') {
} else if (this.radio1 == '矩形') {
this.mouseTool.close()
this.drawRectangle()
} else if (this.radio1 == '多边形标注') {
} else if (this.radio1 == '多边形') {
this.mouseTool.close()
this.drawPolygon()
} else {
......@@ -207,17 +228,17 @@
console.log('clicked position: ')
console.log(_this.clickedPosition)
if (_this.radio1 == '建立地标') {
if (_this.radio1 == '地标') {
_this.addlandmark(value)
}else if (_this.radio1 == '矩形标注') {
}else if (_this.radio1 == '矩形') {
//_this.drawRectangle()
}else if (_this.radio1 == '多边形标注') {
}else if (_this.radio1 == '多边形') {
//_this.drawPolygon()
}
})
this.mouseTool.on('draw', function(event) {
console.log(event.obj)
if (_this.radio1 == '矩形标注') {
if (_this.radio1 == '矩形') {
console.log("northEast :" + event.obj._opts.bounds.northEast.lng + ',' + event.obj._opts.bounds.northEast.lat)
console.log("southWest :" + event.obj._opts.bounds.southWest.lng + ',' + event.obj._opts.bounds.southWest.lat)
let northEast = {
......@@ -232,7 +253,7 @@
console.log("这是一个矩形")
_this.addRectangle(northEast, southWest)
}
} else if (_this.radio1 == '多边形标注') {
} else if (_this.radio1 == '多边形') {
console.log(event.obj._opts.path)
console.log("这是一个多边形")
let path = event.obj._opts.path
......@@ -477,7 +498,7 @@
* 画矩形，这是高德地图的样例代码
*/
drawRectangle() {
if (this.radio1 == '矩形标注')
if (this.radio1 == '矩形')
this.mouseTool.rectangle({
strokeColor: "red",
strokeOpacity: 1,
......@@ -507,7 +528,7 @@
})
},
/**
* 创建矩形标注区域数据
* 创建矩形区域数据
*/
makeRectangle(labelName, northEast, southWest) {
// X是经度，Y是纬度，应该是没错的，当初就不该叫XY的
......@@ -569,7 +590,7 @@
})
},
/**
* 创建多边形标注标签
* 创建多边形标签
*/
addPolygon(path) {
var name
......@@ -587,7 +608,7 @@
})
},
/**
* 创建多边形标注数据
* 创建多边形数据
*/
makePolygon(labelName, path) {
console.log(path)
......@@ -746,7 +767,7 @@
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
height: 96.5%;
height: calc(100vh - 81px - 40px);
}
#buttonBar {
......
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