<template>
|
<div class="right-side">
|
<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>
|
<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>
|
</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>
|
<img :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>
|
</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>
|
<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 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>
|
|
</div>
|
</template>
|
|
<script>
|
import { getCamerasByServer } from '@/api/pollConfig'
|
import TreeDataPool from "@/Pool/TreeData";
|
export default {
|
data () {
|
return {
|
labels: [],
|
colorPick: '#79f2fb',
|
dotSize: 3,
|
isEdit: false,
|
isShowPop: false,
|
isNewLabel: false,
|
curLabel: {
|
id:'',
|
posX:'',
|
posY:'',
|
x:'',
|
y:''
|
},
|
baseUrl: '',
|
snapshot_url: '',
|
cameraData:[],
|
}
|
},
|
computed: {
|
|
},
|
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}];
|
this.labels = mockData;
|
},1000);
|
},
|
watch:{
|
'TreeDataPool.selectedNode':{
|
handler(n,o){
|
debugger
|
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);
|
}
|
}
|
},
|
methods: {
|
getAllCameraData(){
|
getCamerasByServer().then(res=>{
|
if(res.success){
|
debugger
|
this.cameraData = res.data;
|
}
|
}).catch(e=>{
|
console.log(e)
|
})
|
},
|
bindListen(e){
|
this.newLabel(e);
|
},
|
newLabel(e){
|
console.log('点击了画板')
|
if(this.isShowPop) return;
|
//获取鼠标相对于画板的定位
|
console.log('获取当前定位信息');
|
let target = {
|
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;
|
this.isShowPop = true;
|
this.curLabel = JSON.parse(JSON.stringify(label));
|
},
|
cancle(){
|
this.isShowPop = false;
|
//如果是未保存过的label直接删除(未保存的就是labels数组中最后一个)
|
if(!this.curLabel.id){
|
this.labels.pop();
|
}
|
},
|
deleteLabel(){
|
if(this.curLabel.id){
|
//请求后台删除
|
}else{
|
this.labels.pop();
|
this.isShowPop = false;
|
}
|
},
|
submitInfo(){
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.right-side {
|
height: 100%;
|
background: #d2dcea;
|
.tool-bar {
|
width: 100%;
|
height: 60px;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
background: rgb(250, 250, 250);
|
margin-bottom: 40px;
|
display: flex;
|
align-items: center;
|
> div {
|
cursor: pointer;
|
background: rgb(245, 245, 245);
|
padding: 0 5px;
|
height: 40px;
|
margin: 7px;
|
display: flex;
|
align-items: center;
|
label {
|
margin-right: 10px;
|
color: rgb(161, 161, 161);
|
}
|
.el-slider {
|
width: 110px;
|
}
|
}
|
}
|
.action-bar{
|
width: 960px;
|
margin: auto;
|
margin-bottom: 20px;
|
text-align: right;
|
.drawboard-trigger{
|
background: transparent;
|
color: #fff;
|
border-color: rgba(255,255,255,.3);
|
}
|
}
|
.drawboard {
|
margin: auto;
|
width: 960px;
|
height: 540px;
|
position: relative;
|
background: #fff;
|
box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
|
.mask{
|
position: absolute;
|
background: transparent;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
&.edit-status-mask{
|
background: rgba(20, 181, 255, 0.1);
|
}
|
.label{
|
position: absolute;
|
z-index: 2;
|
border-radius: 50%;
|
}
|
}
|
img{
|
width: 960px;
|
height: 540px;
|
background:#f0ffca;
|
}
|
.popBox{
|
position: absolute;
|
padding: 14px;
|
border-radius: 3px;
|
color: #fff;
|
background: rgba(0,0,0,.7);
|
.title{
|
font-weight: bold;
|
text-align: left;
|
font-size: 15px;
|
}
|
.details{
|
.detail-item{
|
display: flex;
|
align-items: center;
|
margin: 5px 0;
|
label{
|
color: #a9a9a9;
|
width:65px;
|
display: inline-block;
|
}
|
.left{
|
width: 110px;
|
text-align: left;
|
line-height: 28px;
|
.fix-width{
|
display: inline-block;
|
width: 23px;
|
}
|
}
|
.right{
|
width: 160px;
|
}
|
.devide{
|
width: 10px;
|
height: 1px;
|
background: #a9a9a9;
|
margin: 0 3px;
|
}
|
}
|
.btns{
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
