drawMap.js
4.32 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
import zrender from 'zrender';
import _ from 'underscore';
export default {
props: ['isEdit'],
created() {
},
data() {
let that = this;
return {
tempData: {}
};
},
mounted() {
},
methods: {
setPainter(floorData = {}) {
if (this.zr && this.zr.clear) this.zr.clear();
let pclient = this.$refs.painter.getBoundingClientRect();
this.zr = zrender.init(this.$refs.painter, {
renderer: 'canvas',
devicePixelRatio: 2,
width: floorData.width || pclient.width,
height: floorData.height || 500
});
/**************适配屏幕尺寸******************/
this.$refs.painter.style.height = this.zr.getHeight() + 'px';
if (this.isEdit) {
this.bindingEvt();
}
this.floorId = floorData.floorId;
/***************resore*******************/
let drawData;
if (this.isEdit) {
let localData = this.getLocal();
drawData = localData && localData.list
}
if (!drawData) {
drawData = floorData.list;
}
this.resorePainter(drawData);
/**********************************/
this.tempData = Object.assign({}, floorData);
},
resizePainter(client = {}) {
this.zr.resize({
width: client.width,
height: client.height
});
let scale = this.$refs.painter.clientWidth / this.zr.getWidth();
let wraper = this.$refs.painter.querySelector('div');
wraper.style.transformOrigin = '0 0';
wraper.style.transform = `scale(${scale})`;
this.$refs.painter.style.height = this.zr.getHeight() * scale + 'px';
},
setMaxHeight(client) {
let h = parseFloat(this.$refs.painter.style.height);
if (h > client.height) {
this.$refs.painter.style.transform = `scale(${client.height/h})`;
}
},
getPainterData() {
let zoneList = [];
_.each(this.groupList, item => {
let gdata = item.data;
let obj = {
fill: item.fill || gdata.fill || null,
zoneId: item.zoneId || gdata.zoneId || null,
zoneName: item.zoneName || gdata.zoneName || null,
//num: null,
id: item.id,
position: item.position,
points: item.polyline.shape.points
};
if (item.complete) {
zoneList.push(obj);
}
});
const floorData = {
floorId: this.floorId,
width: this.zr.getWidth(),
height: this.zr.getHeight(),
list: zoneList
}
return floorData
},
resorePainter(data) {
if (_.isEmpty(data)) return false;
this.resizePainter(data);
this.groupList = [];
this.pointList = [];
_.each(data, item => {
this.createGroup(item);
});
},
getLocal() {
let data = localStorage.getItem('floorcanvas' + this.floorId);
return data && JSON.parse(data);
},
saveLocal() {
if (!this.zr || !this.zr.getWidth) return;
let data = this.getPainterData();
if (data.list.length > 0) {
localStorage.setItem('floorcanvas' + this.floorId, JSON.stringify(data));
} else {
localStorage.removeItem('floorcanvas' + this.floorId);
}
},
groupLeft(event, group) {
this.$emit('zoneClick', { event, data: group.data });
},
groupRight(event, group) {
this.$emit('zoneRight', { event, data: group.data })
},
groupMove(event, group) {
this.$emit('zoneMove', { event, data: group.data })
},
groupOver(event, group) {
this.$emit('zoneOver', { event, data: group.data })
},
groupOut(event, group) {
this.$emit('zoneOut', { event, data: group.data })
}
}
};