From e65c4102f0175d666746936381c3dee278358a72 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期二, 27 十月 2020 16:22:00 +0800
Subject: [PATCH] 添加apps.json代理,整理代码
---
src/pages/labelMark/components/RightSide.vue | 159 ++++++++++++++++++++++++++++------------------------
1 files changed, 85 insertions(+), 74 deletions(-)
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
index a62374c..741a5c2 100644
--- a/src/pages/labelMark/components/RightSide.vue
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -12,37 +12,52 @@
</div>
</div>
<div class="action-bar">
- <el-button class="drawboard-trigger" size="small" @click="isEdit=!isEdit" :icon="isEdit?'el-icon-lock':'el-icon-edit'">{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
+ <el-button
+ class="drawboard-trigger"
+ size="small"
+ @click="isEdit=!isEdit"
+ :icon="isEdit?'el-icon-lock':'el-icon-edit'"
+ >{{isEdit?'閿佸畾':'缂栬緫'}}</el-button>
</div>
<div class="drawboard">
- <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 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 :src="`/httpImage/${snapshot_url}`" alt />
- <div class="popBox" v-show="isShowPop" :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`">
+ <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>
+ <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>
+ <label for>瀹為檯鍧愭爣X:</label>
<el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
</div>
</div>
<div class="detail-item">
<div class="left">
- <label for="">骞抽潰鍧愭爣Y:</label>
+ <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>
+ <label for>瀹為檯鍧愭爣Y:</label>
<el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
</div>
</div>
@@ -54,7 +69,6 @@
</div>
</div>
</div>
-
</div>
</template>
@@ -62,7 +76,7 @@
import { getCamerasByServer } from '@/api/pollConfig'
import TreeDataPool from "@/Pool/TreeData";
export default {
- data () {
+ data() {
return {
labels: [],
colorPick: '#79f2fb',
@@ -71,97 +85,94 @@
isShowPop: false,
isNewLabel: false,
curLabel: {
- id:'',
- posX:'',
- posY:'',
- x:'',
- y:''
+ id: '',
+ posX: '',
+ posY: '',
+ x: '',
+ y: ''
},
baseUrl: '',
snapshot_url: '',
- cameraData:[],
+ cameraData: [],
}
},
computed: {
-
+
},
- mounted(){
+ mounted() {
this.getAllCameraData();
- setTimeout(()=>{
- let mockData = [{id:'a1',x:15, y:33, posX:150, posY:330},{id:'b2',x:56, y:87, posX:560, posY:870}];
+ setTimeout(() => {
+ let mockData = [{ id: 'a1', x: 15, y: 33, posX: 150, posY: 330 }, { id: 'b2', x: 56, y: 87, posX: 560, posY: 870 }];
this.labels = mockData;
- },1000);
+ }, 1000);
},
- watch:{
- 'TreeDataPool.selectedNode':{
- handler(n,o){
- debugger
- let curCamera = this.cameraData.find(item => item.id==n.id);
+ watch: {
+ 'TreeDataPool.selectedNode': {
+ handler(n, o) {
+ let curCamera = this.cameraData.find(item => item.id == n.id);
this.snapshot_url = curCamera.snapshot_url;
},
deep: true
},
- isEdit(n,o){
- if(n){
- this.$refs['editBoard'].addEventListener('click',this.bindListen);
- }else{
- this.$refs['editBoard'].removeEventListener('click',this.bindListen);
+ isEdit(n, o) {
+ if (n) {
+ this.$refs['editBoard'].addEventListener('click', this.bindListen);
+ } else {
+ this.$refs['editBoard'].removeEventListener('click', this.bindListen);
}
}
},
methods: {
- getAllCameraData(){
- getCamerasByServer().then(res=>{
- if(res.success){
- debugger
+ getAllCameraData() {
+ getCamerasByServer().then(res => {
+ if (res.success) {
this.cameraData = res.data;
}
- }).catch(e=>{
+ }).catch(e => {
console.log(e)
})
},
- bindListen(e){
+ bindListen(e) {
this.newLabel(e);
},
- newLabel(e){
+ newLabel(e) {
console.log('鐐瑰嚮浜嗙敾鏉�')
- if(this.isShowPop) return;
+ if (this.isShowPop) return;
//鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
let target = {
- id:'',
- x:e.offsetX,
- y:e.offsetY,
- posX:'',
- posY:''
+ id: '',
+ x: e.offsetX,
+ y: e.offsetY,
+ posX: '',
+ posY: ''
};
this.labels.push(target);
this.curLabel = target;
this.isShowPop = true;
this.isNewLabel = true;
},
- editLabel(label){
- debugger
- if(!this.isEdit) return;
+ editLabel(label) {
+ if (!this.isEdit) return;
this.isShowPop = true;
this.curLabel = JSON.parse(JSON.stringify(label));
},
- cancle(){
+ cancle() {
this.isShowPop = false;
//濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
- if(!this.curLabel.id){
+ if (!this.curLabel.id) {
this.labels.pop();
}
},
- deleteLabel(){
- if(this.curLabel.id){
+ deleteLabel() {
+ if (this.curLabel.id) {
//璇锋眰鍚庡彴鍒犻櫎
- }else{
+ } else {
this.labels.pop();
this.isShowPop = false;
}
},
- submitInfo(){
+ submitInfo() {
}
}
@@ -198,15 +209,15 @@
}
}
}
- .action-bar{
+ .action-bar {
width: 960px;
margin: auto;
margin-bottom: 20px;
text-align: right;
- .drawboard-trigger{
+ .drawboard-trigger {
background: transparent;
color: #fff;
- border-color: rgba(255,255,255,.3);
+ border-color: rgba(255, 255, 255, 0.3);
}
}
.drawboard {
@@ -216,68 +227,68 @@
position: relative;
background: #fff;
box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- .mask{
+ .mask {
position: absolute;
background: transparent;
width: 100%;
height: 100%;
overflow: hidden;
- &.edit-status-mask{
+ &.edit-status-mask {
background: rgba(20, 181, 255, 0.1);
}
- .label{
+ .label {
position: absolute;
z-index: 2;
border-radius: 50%;
}
}
- img{
+ img {
width: 960px;
height: 540px;
- background:#f0ffca;
+ background: #f0ffca;
}
- .popBox{
+ .popBox {
position: absolute;
padding: 14px;
border-radius: 3px;
color: #fff;
- background: rgba(0,0,0,.7);
- .title{
+ background: rgba(0, 0, 0, 0.7);
+ .title {
font-weight: bold;
text-align: left;
font-size: 15px;
}
- .details{
- .detail-item{
+ .details {
+ .detail-item {
display: flex;
align-items: center;
margin: 5px 0;
- label{
+ label {
color: #a9a9a9;
- width:65px;
+ width: 65px;
display: inline-block;
}
- .left{
+ .left {
width: 110px;
text-align: left;
line-height: 28px;
- .fix-width{
+ .fix-width {
display: inline-block;
width: 23px;
}
}
- .right{
+ .right {
width: 160px;
}
- .devide{
+ .devide {
width: 10px;
height: 1px;
background: #a9a9a9;
margin: 0 3px;
}
}
- .btns{
- margin-top: 10px;
+ .btns {
+ margin-top: 10px;
}
}
}
--
Gitblit v1.8.0