Skip to content

D
DA-Platform

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

Commit 9acc9180 by 张欣玥
Options

改了image&layer布局，加了标注描述

parent 9647f32f
Showing with 104 additions and 36 deletions
DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue
......@@ -32,15 +32,15 @@
<el-radio-button label="矩形标注"></el-radio-button>
<el-radio-button label="多边形标注"></el-radio-button>
</el-radio-group>
<el-button @click="save()">保存</el-button>
<el-button @click="save()" style="font-size: 12px;padding: 10px 20px;">保存</el-button>
</div>
</div>
</el-aside>
<el-aside class="sidebar2" style="position: absolute;margin-top: 60px" :style="{ height : 185 +'px'}">
<el-aside class="sidebar2" style="position: absolute;margin-top: 55px" :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-list-title" style="height: 30px;line-height: 30px;font-size: 14px">标注描述</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)">-->
......@@ -55,7 +55,7 @@
<el-aside class="sidebar3" style="position: absolute;margin-top: 260px" >
<div class="sidebar-box">
<div>
<div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">标注列表</div>
<div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 14px">标注列表</div>
<div class="img-title-list-box">
<div id="img-title-list" style="user-select:none">
......@@ -1204,7 +1204,7 @@ export default {
height: 97%;
margin-left: 50px;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
......@@ -1212,7 +1212,7 @@ export default {
height: 97%;
margin-left: 50px;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
......@@ -1221,7 +1221,7 @@ export default {
height: calc(100vh - 81px - 300px);
margin-left: 50px;
/*border: 2px solid #409eff;*/
/*border-radius: 5px;*/
border-radius: 5px;
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
......@@ -1241,4 +1241,9 @@ export default {
margin-top: 3px;
margin-bottom: 3px;
}
/deep/ .el-radio-button__inner{
font-size: 12px;
padding: 10px 20px;
}
</style>
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
......@@ -47,52 +47,71 @@
<!-- 侧边栏-->
<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 class="tool-button-left" style="text-align: left">
<div style="margin-top: 5px"></div>
<el-radio-group v-model="radio1">
<!-- // 改变中心点-->
<el-button-group style="margin-right: 10px ; line-height: 30px;vertical-align: middle">
<el-button class="tool-button" type="primary" style="margin-right: 10px;font-size: 12px;padding: 10px 20px;" @click="setCenter()">改变中心点</el-button>
<a>X:</a>
<el-input type="text" style="width: 50px;" v-model="centerX"></el-input>
<a>Y:</a>
<el-input type="text" style="width: 50px" v-model="centerY"></el-input>
</el-button-group>
<div style="margin-top: 10px"></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>
<el-button @click="save()" style="font-size: 12px;padding: 10px 20px;">保存</el-button>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: 60px;height: 185px">
<div class="sidebar-box" style="height: 185px">
<el-aside class="sidebar" style="position: absolute;margin-top: 100px;height: 235px">
<div class="sidebar-box" style="height: 235px">
<div>
<div class="img-list-title">点标注</div>
<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>
</div>
<div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">标注描述</div>
<div>{{this.description}}</div>
</div>
</div>
</el-aside>
<el-aside class="sidebar" style="position: absolute;margin-top: 260px;height: calc(100vh - 81px - 300px);">
<el-aside class="sidebar" style="position: absolute;margin-top: 350px;height: calc(100vh - 71px - 400px);">
<div class="sidebar-box">
<div>
<div class="img-list-title">区域标注</div>
<div class="img-title-list-box">
<div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">
{{index+1}}. &nbsp; {{item.labelName}}
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="点标注" name="first">
<div class="img-title-list-box" style="height: 205px">
<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>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="区域标注" name="second">
<div class="img-title-list-box">
<div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">
{{index+1}}. &nbsp; {{item.labelName}}
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- <div>-->
<!-- <div class="img-list-title" style="display:inline-block;font-size: 14px;height: 30px;line-height: 30px;width: 100px">点标注</div>-->
<!-- <div class="img-list-title">区域标注</div>-->
<!-- <div v-show="isPoint" class="img-title-list-box" style="height: 205px">-->
<!-- <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>-->
<!-- </div>-->
<!-- <div v-show="!isPoint" class="img-title-list-box">-->
<!-- <div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">-->
<!-- {{index+1}}. &nbsp; {{item.labelName}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</el-aside>
<!-- 工作台-->
......@@ -123,6 +142,8 @@
name: 'layerAnnotation',
data(){
return{
activeName: 'first',
isPoint: true,
centerX: 0,
centerY: 0,
labelNow: 0,
......@@ -263,6 +284,10 @@
}
})
},
// 点标注&区域标注跳转
handleClick(tab, event) {
console.log(tab, event);
},
// 删除标注
deleteLabelInList () {
if(this.isMark) {
......@@ -811,4 +836,42 @@
.listLeft:hover{
background-color: #cbd8ea;
}
/deep/ .el-radio-button__inner{
font-size: 12px;
padding: 10px 20px;
}
/deep/ .el-input__inner{
font-size: 12px;
height: 34px;
line-height: 34px;
padding: 0px 3px;
}
/deep/ .el-tabs__header{
margin: 0px 0px 5px;
}
/deep/ .el-tabs__item{
height: 35px;
line-height: 35px;
font-size: 14px;
}
/deep/ .el-tabs__nav-scroll{
background-color: #409EFF;
}
/deep/ .el-tabs__item.is-active{
background-color: white;
color: black;
}
/deep/ .el-tabs__item{
background-color: #409EFF;
color: white;
border-right: 1px solid white;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{
transition: color 0s ease;
-webkit-transition: color 0s ease;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav{
border: 0;
}
</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