addFloorpos.vue
4.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
<el-dialog
title="地图坐标拾取"
class="manage-dialog xy-dialog"
:visible.sync="xyDialogVisible"
:close-on-click-modal="false"
@close="closeHandle">
<div class="xy-row">
<div class="xy-row">
<span class="xy-row-text">X 轴: </span>
<el-input v-model="xVal" placeholder="已选择X坐标" readonly class="pos-inp"></el-input>
<span class="xy-row-text">Y 轴: </span>
<el-input v-model="yVal" placeholder="已选择Y坐标" readonly class="pos-inp"></el-input>
</div>
</div>
<div class="xy-container">
<canvas id="xycanvas" class="xycanvas" @click="getXyAxis">
</canvas>
<img :src="floorImg" class="floorimg" @click="getXyAxis" />
</div>
<div slot="footer" class="dialog-footer">
<el-button class="dialog-btn" @click="xyDialogVisible = false">{{$t('dialog.cancel')}}</el-button>
<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="transferXy()">{{$t('dialog.confirm')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import xyImg from '@/assets/img/manage/xy.png'
export default {
data() {
return {
xyDialogVisible: false,
xVal: '',
yVal: '',
floorImg: ''
}
},
methods: {
dialogInit(imgPath) {
this.floorImg = imgPath;
this.xyDialogVisible = true;
},
getXyAxis(e) {
// var imgWscale,imgHscale
var that = this
var newImg = new Image()
newImg.src = this.floorImg
newImg.onload = function(){
var width = that.getStyleFn('.floorimg', 'width');
var height = that.getStyleFn('.floorimg', 'height');
// imgWscale = that.normalWidth/width;
// imgHscale = that.normalWidth/height;
let ev = e || window.event;
var eleRect = ev.target.getBoundingClientRect();
let _top = (eleRect.top - ev.target.clientTop).toFixed(0);
let _left = eleRect.left - ev.target.clientLeft;
let startX = ev.pageX - _left - $(document).scrollLeft();
let startY = ev.pageY - _top - $(document).scrollTop();
that.xVal = (startX * that.normalWidth / width).toFixed(2);
that.yVal = (startY * that.normalWidth / height).toFixed(2);
var canvas = document.getElementById('xycanvas');
canvas.width = width;
canvas.height = height;
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
var img = new Image();
img.src = xyImg;
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
// var ratio = getPixelRatio(ctx);
img.onload = function(){
ctx.drawImage(img, startX - 15, startY - 30, 30, 30)
}
}
// ctx.fillStyle = "rgb(200,0,0)";
// ctx.fillRect (sx*startX, sy*startY, 0, 0);
},
transferXy() {
this.$emit('posXY', { x: this.xVal, y: this.yVal });
this.xyDialogVisible = false;
},
closeHandle() {
this.xVal = '';
this.yVal = '';
this.floorImg = '';
let canvas = document.getElementById('xycanvas');
if(!canvas.getContext) return;
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
},
}
}
</script>
<style scoped>
.pos-inp {
height: 30px !important;
width: 120px;
}
.xy-dialog .el-dialog {
width: 50% !important;
}
.xy-row {
padding-bottom: 5px;
}
.floorimg {
left: auto;
/* object-fit: contain; */
/* width: 100%; */
height: 460px;
}
.xy-container{
text-align: center;
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
.xycanvas {
/* height: 460px; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>