From ee3bd8d3f0818475035a68bc04b1a87f083ebbd9 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 02 十一月 2020 10:52:29 +0800
Subject: [PATCH] 相机标注版式更新
---
src/pages/labelMark/components/RightSide.vue | 259 ++++++++++++++++++++++++++++++++++++---------------
1 files changed, 182 insertions(+), 77 deletions(-)
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
index fddcff1..a0ef4a8 100644
--- a/src/pages/labelMark/components/RightSide.vue
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -1,79 +1,136 @@
<template>
<div class="right-side">
- <div class="figure">
- <el-collapse v-model="actPage" @change="chnageActPage">
- <el-collapse-item title="鎽勫儚鏈烘爣娉�" name="1">
- <div class="action-bar">
- <div class="tool-bar">
- <div>
- <!-- <input type="color" ref="colorPicker" v-model="color"> -->
- <label for>鎷捐壊鍣�:</label>
- <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
- </div>
- <div style="width:250px;">
- <label for>绗旇Е:</label>
- <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
- </div>
- <div>
- <el-button
- class="drawboard-trigger"
- size="small"
- @click="isEdit=!isEdit"
- :icon="isEdit?'el-icon-lock':'el-icon-edit'"
- >{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
+ <div class="figure s-system-manage">
+ <el-tabs
+ id="e-basic-setting"
+ v-model="actPage"
+ v-loading="loading"
+ element-loading-text="鍔犺浇涓�"
+ type="border-card"
+ >
+ <el-tab-pane label="鎽勫儚鏈烘爣娉�" name="1">
+ <div class>
+ <div class="action-bar">
+ <div class="tool-bar">
+ <div>
+ <!-- <input type="color" ref="colorPicker" v-model="color"> -->
+ <label for>鎷捐壊鍣�:</label>
+ <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
+ </div>
+ <div style="width:250px;">
+ <label for>绗旇Е:</label>
+ <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
+ </div>
+ <div>
+ <el-button
+ class="drawboard-trigger"
+ size="small"
+ @click="isEdit=!isEdit"
+ :icon="isEdit?'el-icon-lock':'el-icon-edit'"
+ >{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
+ </div>
</div>
</div>
- </div>
- <div class="drawboard">
- <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
+ <div class="drawboard shadow-box">
+ <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
+ <div
+ class="label"
+ @click="editLabel(item)"
+ v-for="(item,index) in labels"
+ :key="index"
+ :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
+ ></div>
+ </div>
+ <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
<div
- class="label"
- @click="editLabel(item)"
- v-for="(item,index) in labels"
- :key="index"
- :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
- ></div>
- </div>
- <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
- <div
- class="popBox"
- v-show="isShowPop"
- :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`"
- >
- <div class="title">鏍囨敞淇℃伅</div>
- <div class="details">
- <div class="detail-item">
- <div class="left">
- <label for>骞抽潰鍧愭爣X:</label>
- <span class="fix-width">{{curLabel.x}}</span>
- <i>px</i>
+ class="popBox"
+ v-show="isShowPop"
+ :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`"
+ >
+ <div class="title">鏍囨敞淇℃伅</div>
+ <div class="details">
+ <div class="detail-item">
+ <div class="left">
+ <label for>骞抽潰鍧愭爣X:</label>
+ <span class="fix-width">{{curLabel.x}}</span>
+ <i>px</i>
+ </div>
+ <span class="devide"></span>
+ <div class="right">
+ <label for>瀹為檯鍧愭爣X:</label>
+ <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
+ </div>
</div>
- <span class="devide"></span>
- <div class="right">
- <label for>瀹為檯鍧愭爣X:</label>
- <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
+ <div class="detail-item">
+ <div class="left">
+ <label for>骞抽潰鍧愭爣Y:</label>
+ <span class="fix-width">{{curLabel.y}}</span>
+ <i>px</i>
+ </div>
+ <span class="devide"></span>
+ <div class="right">
+ <label for>瀹為檯鍧愭爣Y:</label>
+ <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
+ </div>
</div>
- </div>
- <div class="detail-item">
- <div class="left">
- <label for>骞抽潰鍧愭爣Y:</label>
- <span class="fix-width">{{curLabel.y}}</span>
- <i>px</i>
+ <div class="btns">
+ <el-button size="mini" type="danger" @click="deleteLabel">鍒犻櫎</el-button>
+ <el-button size="mini" type="primary" @click="cancle">鍙栨秷</el-button>
+ <el-button size="mini" type="success" @click="submitInfo">纭畾</el-button>
</div>
- <span class="devide"></span>
- <div class="right">
- <label for>瀹為檯鍧愭爣Y:</label>
- <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
- </div>
- </div>
- <div class="btns">
- <el-button size="mini" type="danger" @click="deleteLabel">鍒犻櫎</el-button>
- <el-button size="mini" type="primary" @click="cancle">鍙栨秷</el-button>
- <el-button size="mini" type="success" @click="submitInfo">纭畾</el-button>
</div>
</div>
</div>
</div>
+ </el-tab-pane>
+ <el-tab-pane label="杩借釜瀹炴櫙鍧愭爣" name="2">
+ <div class="user-upload">
+ <div class="img-card">
+ <el-upload
+ class="upload-demo"
+ drag
+ action="https://jsonplaceholder.typicode.com/posts/"
+ :http-request="definedUpload"
+ :on-change="onChange"
+ :show-file-list="false"
+ >
+ <el-image
+ class="preview"
+ v-if="userImg"
+ :src="userImg"
+ fit="contain"
+ @mousemove="showCurPos"
+ @mouseout="isShowCurPos=false"
+ ></el-image>
+ <div class="el-upload__text">
+ 灏嗘枃浠舵嫋鍒版澶勶紝鎴�
+ <em>鐐瑰嚮涓婁紶</em>
+ </div>
+ </el-upload>
+ </div>
+ <div class="info">
+ <div class="input-area">
+ <div>
+ <label for>绌洪棿瀹�:</label>
+ <el-input v-model="spaceWidth" placeholder="璇疯緭鍏ュ疄闄呯┖闂村" size="small"></el-input>
+ </div>
+ <div>
+ <label for>绌洪棿楂�:</label>
+ <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
+ </div>
+ </div>
+ <div class="pos" v-show="isShowCurPos">
+ 褰撳墠浣嶇疆:
+ <b>{{traceX}}</b>,
+ <b>{{traceY}}</b>
+ </div>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ <!-- <el-collapse v-model="actPage" @change="chnageActPage">
+ <el-collapse-item title="鎽勫儚鏈烘爣娉�" name="1">
+
</el-collapse-item>
<el-collapse-item title="杩借釜瀹炴櫙鍧愭爣" name="2">
<div class="user-upload">
@@ -103,7 +160,7 @@
<div class="info" v-show="isShowCurPos">褰撳墠浣嶇疆:{{traceX}},{{traceY}}</div>
</div>
</el-collapse-item>
- </el-collapse>
+ </el-collapse>-->
</div>
</div>
</template>
@@ -134,7 +191,10 @@
traceX: 0,
traceY: 0,
isShowCurPos: false,
- actPage: ['1', '2']
+ actPage: '1',
+ loading: false,
+ spaceWidth: '',
+ spaceHeight: ''
}
},
computed: {
@@ -176,6 +236,9 @@
},
onChange (file, fileList) {
fileList = [file]
+ this.isShowCurPos = false;
+ // this.traceX = e.offsetX;
+ // this.traceY = e.offsetY;
//fileList.push(file)
},
definedUpload (params) {
@@ -247,15 +310,13 @@
</script>
<style lang="scss">
-.el-collapse-item__content{
- background: #d2dcea;
-}
-.figure .el-collapse-item__header{
- padding-left: 14px;
-}
.right-side {
background: #d2dcea;
.figure {
+ .el-tabs__content {
+ background: #d2dcea;
+ height: calc(100vh - 85px);
+ }
}
.tool-bar {
//width: 40px;
@@ -263,13 +324,14 @@
padding: 10px 0 10px 20px;
box-sizing: border-box;
//background: rgb(250, 250, 250);
+ background: rgba(26, 45, 74, 0.6);
//margin-bottom: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
> div {
cursor: pointer;
- background: rgba(245, 245, 245, 0.3);
+ //background: rgba(245, 245, 245, 0.3);
padding: 0 5px;
height: 40px;
margin: 7px;
@@ -278,15 +340,20 @@
label {
margin-right: 10px;
color: rgb(161, 161, 161);
+ color: #fff;
}
.el-slider {
width: 110px;
}
}
}
+ .shadow-box {
+ box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
+ }
.action-bar {
width: 960px;
margin: auto;
+ margin-top: 30px;
//margin-bottom: 20px;
text-align: right;
.drawboard-trigger {
@@ -303,7 +370,7 @@
position: relative;
//background: #fff;
background: #f0ffca;
- box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
+ //box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
.mask {
position: absolute;
background: transparent;
@@ -324,13 +391,18 @@
height: 540px;
background: #f0ffca;
}
+ .right-panel {
+ width: 150px;
+ height: 100%;
+ background: rgba(26, 45, 74, 0.7);
+ }
.popBox {
position: absolute;
z-index: 99;
padding: 14px;
border-radius: 3px;
color: #fff;
- background: rgba(0, 0, 0, 0.7);
+ background: rgba(26, 45, 74, 0.7);
.title {
font-weight: bold;
text-align: left;
@@ -375,8 +447,34 @@
margin: auto;
padding: 50px;
display: flex;
- .img-card{
-
+ .info {
+ margin-left: 20px;
+ margin-top: 20px;
+ text-align: left;
+ font-size: 15px;
+ .input-area {
+ width: 300px;
+ label {
+ width: 80px;
+ color: rgba(39, 68, 111, 0.67);
+ }
+ > div {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ }
+ }
+ .pos {
+ margin-top: 10px;
+ text-align: left;
+ color: rgba(39, 68, 111, 0.67);
+ b{
+ font-style: italic;
+ }
+ //color: #4966b7
+ }
+ }
+ .img-card {
}
.upload-demo,
.el-upload {
@@ -420,4 +518,11 @@
}
}
}
+.el-input__inner:focus {
+ outline: none;
+ border-color: rgba(42, 56, 93, 71%) !important;
+}
+.el-upload-dragger:hover {
+ border-color: rgba(42, 56, 93, 71%) !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0