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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
| <template>
| <div class="page-container">
| <div id="allmap"></div>
| </div>
| </template>
| <script>
| import $ from 'jquery';
| import {CORS, ajax, timeout, Timeout, getUrlStr} from '../../libs/common';
| import {mapImgSrc} from '../../libs/map';
| export default {
| data: function() {
| return {
| inmap: '',
| timeout: new Timeout(),
| overlay: '',
| imgs: mapImgSrc
| }
| },
| created: function() {
| // 设置主导航
| this.$store.commit('setActiveName', 'home');
| },
| methods: {
| // 查询地图中的坐标点
| searchMapDot: function() {
| var _self = this;
| this.timeout.start(function() {
| // 请求查询后台，获取点信息
| ajax({
| type: 'post',
| url: 'Sensor_mapinfoAction!searchAll',
| async: true,
| data: null,
| dataType: 'json',
| success: function(res) {
| var rs = JSON.parse(res.result);
| if(rs.code == 1) {
| var data = rs.data;
| _self.addOverlay(data);
| }
| // 开启计时器
| _self.timeout.open();
| }
| });
| }, 4000);
| },
| // 添加地图中的覆盖物
| addOverlay: function(data) {
| var _self = this;
| var points = format(data);
| this.overlay.setData(points);
|
| // 格式化数据
| function format(data) {
| var result = [];
| for (var i=0; i<data.length; i++) {
| var _data = data[i];
| var name = _data.sinf.device_name; // 设备名称
| var count = _self.getCount(_data.state, _data.sinf); // 权重
| var coordinates = [_data.longitude, _data.latitude]; //经纬度
| var smoke = { // 烟感
| name: '烟感：',
| value: _data.state.smoke
| };
| var airhum = { // 湿度
| name: '湿度：',
| value: _data.state.airhum
| };
| var airtmp = { // 温度
| name: '温度：',
| value: _data.state.airtmp
| };
| var tmp={
| count: count,
| name: name,
| smoke: smoke,
| airtmp: airtmp,
| airhum: airhum,
| geometry: {
| type: 'Point',
| coordinates: coordinates
| },
| plus: _data
| };
| result.push(tmp);
| }
|
| return result;
| }
| },
| getCount: function(data, alarms) {
| var result = 0;
| if(data.smoke>=alarms.smoke_alarm) { // 烟感警戒值
| result = 3;
| }else if(data.airhum>=alarms.airhum_alarm){ // 湿度境界值
| result = 2;
| }else if(data.airtmp>=alarms.airtmp_alarm) {
| result=1;
| }
|
| return result;
| },
| showMapPanel: function(data) {
| var point = new BMap.Point(data.geometry.coordinates[0], data.geometry.coordinates[1]);
| var searchInforWin = null;
| var opts = {
| //title : warnList[i].title+'<a href="javascript:loadToHomeInfo();" style="margin-left: 1em;text-decoration:none">详情>></a>', //标题
| title : data.name, //标题未开启
| width : 290, //宽度
| height : 120, //高度
| panel : "panel", //检索结果面板
| enableAutoPan : true, //自动平移
| enableSendToPhone:false,
| searchTypes :[
|
| ]
| };
| var url = getUrlStr({
| province: data.plus.sinf.province,
| city: data.plus.sinf.city,
| county: data.plus.sinf.county,
| device_name: data.plus.sinf.device_name
| });
| var content = '<div style="padding:6px;"><span>监测烟感值：</span>'+data.smoke.value+'PPM</div>'+
| '<div style="padding:6px;"><span>环境湿度值：</span>'+data.airhum.value+'%RH</div>'+
| '<div style="padding:6px;"><span>环境温度值：</span>'+data.airtmp.value+'℃</div>'+
| '<div style="padding:6px"><a href="#/index/data/'+url+'control/" target="_blank">实时数据</a><a style="margin-left: 20px" href="#/index/data/'+url+'history/" target="_blank">历史数据</a></div>';
|
|
|
| searchInforWin = new BMapLib.SearchInfoWindow(this.inmap.getMap(), content, opts);
| searchInforWin.open(point);
| }
| },
| mounted: function() {
| var _self = this;
| // 初始化地图
| this.inmap = new inMap.Map({
| id: "allmap",
| center: ["114.30419679", "30.57780611"],
| zoom: {
| value: 11,
| show: false,
| max: 22
| }
| });
|
| // 设置地图覆盖物信息
| this.overlay = new inMap.ImgOverlay({
| tooltip: {
| show: true,
| formatter: function(data) {
| var smoke = data.smoke;
| var airtmp = data.airtmp;
| var airhum = data.airhum;
| return data.name+'<br>'+ //设备名称
| smoke.name+smoke.value+'PPM<br>'+ // 烟感
| airtmp.name+airtmp.value+'℃<br>'+ // 温度
| airhum.name+airhum.value+'%RH'; // 湿度
| }
| },
| style: {
| normal: {
| width: 25,
| height: 25,
| offsets: {
| top: "-100%",
| left: "-50%"
| }
| },
| splitList: [
| {
| // 正常图标
| start: 0,
| end: 1,
| icon: this.imgs.normal
| },
| {
| // 温度告警图标
| start: 1,
| end: 2,
| icon: this.imgs.airtmp
| },
| {
| // 湿度告警图标
| start: 2,
| end: 3,
| icon: this.imgs.airhum
| },
| {
| // 湿度告警图标
| start: 3,
| icon: this.imgs.smoke
| },
| ]
| },
| data: [],
| event: {
| onMouseClick: function(item) {
| _self.showMapPanel(item[0]);
| }
| }
|
| });
|
| this.inmap.add(this.overlay);
|
| // 查询地图坐标信息
| this.searchMapDot();
| },
| beforeDestroy: function() {
| this.timeout.stop();
| }
| }
| </script>
| <style scoped>
| #allmap {
| height: 100%;
| }
| </style>
|
|
