safecheck-client 3.0.39-1 → 3.0.39-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/package.json +1 -1
  2. package/src/components/android/AreaPlan.vue +567 -566
  3. package/src/components/android/SafecheckDevices.vue +1300 -1300
  4. package/src/components/android/SealBind.vue +392 -392
  5. package/src/components/android/SealManage.vue +250 -250
  6. package/src/components/map/checkScreen.vue +920 -920
  7. package/src/filiale/dexin/android/AreaPlan.vue +567 -0
  8. package/src/filiale/dexin/android/SafecheckOrderV.vue +2983 -2983
  9. package/src/filiale/dexin/android.js +21 -20
  10. package/src/filiale/dexin/pc/PlanManage.vue +894 -894
  11. package/src/filiale/dexin/pc.js +15 -15
  12. package/src/filiale/fugu/android/SafecheckOrderV.vue +2484 -2484
  13. package/src/filiale/huayin/android/AddPlanItem.vue +509 -509
  14. package/src/filiale/huayin/android/AreaPlan.vue +572 -572
  15. package/src/filiale/huayin/android/CurrentCreate.vue +1121 -1121
  16. package/src/filiale/huayin/android.js +16 -16
  17. package/src/filiale/huayin/pc/PaperList.vue +635 -635
  18. package/src/filiale/jiaxian/android/PhoneUpUserinfo.vue +1231 -1231
  19. package/src/filiale/tongchuan/android/AddPlanItemset.vue +484 -484
  20. package/src/filiale/tongchuan/android/PaperFeedback.vue +1317 -1317
  21. package/src/filiale/tongchuan/android/PhoneUpUserinfo.vue +1343 -1343
  22. package/src/filiale/tongchuan/android/SafecheckDevices.vue +1209 -1209
  23. package/src/filiale/tongchuan/android.js +22 -22
  24. package/src/filiale/tongchuan/pc/CheckBookList.vue +377 -377
  25. package/src/filiale/tongchuan/pc/CheckSearchUser.vue +1045 -1045
  26. package/src/filiale/tongchuan/pc/DefectPaperWeiXiu.vue +618 -618
  27. package/src/filiale/tongchuan/pc/NewCheckpaper.vue +1524 -1524
  28. package/src/filiale/tongchuan/pc/PaperList.vue +684 -684
  29. package/src/filiale/wenxi/android/SafecheckOrderV.vue +2682 -2680
  30. package/src/filiale/yangchunboneng/pc/CheckBookUser.vue +278 -278
  31. package/src/filiale/yangchunboneng/pc/DefectPaperNew.vue +1136 -1136
@@ -1,920 +1,920 @@
1
- <template>
2
- <div class="flex-row">
3
- <div class="basic-main" style="flex:7">
4
- <div id="check_map" style="height:100%">
5
- <img-self-safe :src="imgSrc" width="45" style="z-index: 0"
6
- height="50" class="img-rounded" v-ref:defectimg></img-self-safe>
7
- </div>
8
- </div>
9
- <div id="zzz" class="basic-main" style="flex:1;margin-left: 0px;overflow: hidden">
10
- <div class="flex">
11
- <div class="panel panel-info" style="flex: 1;margin-top:0px">
12
- <div class="panel-heading" style="height: auto">
13
- <h3 class="panel-title">图层设置</h3>
14
- </div>
15
- <div class="panel-body">
16
- <ul class="safe_ul_sty">
17
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.satelliteEnable" @change="enableChange('satelliteEnable',layers.satelliteEnable)" type="checkbox"/>卫星图层</li>
18
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.roadNetEnable" @change="enableChange('roadNetEnable',layers.roadNetEnable)" type="checkbox"/>网路图层</li>
19
- <!--<button @click="safeRefresh">刷新111</button>-->
20
- </ul>
21
- </div>
22
- </div>
23
- <div class="panel panel-info" style="flex: 2;margin-top:0px;">
24
- <div class="panel-heading" style="height: auto">
25
- <h3 class="panel-title">覆盖物设置</h3>
26
- </div>
27
- <div class="panel-body">
28
- <ul class="safe_ul_sty">
29
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.checker" @change="enableChange('checker',mulchs.checker)" type="checkbox"/><img class="safe_deimg" src="../../assets/anjianyuan.png"/>工作人员</li>
30
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level1" @change="enableChange('level1',mulchs.level1)" type="checkbox"/><img class="safe_deimg" src="../../assets/level1.png"/>一级隐患</li>
31
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level2" @change="enableChange('level2',mulchs.level2)" type="checkbox"/><img class="safe_deimg" src="../../assets/level2.png"/>二级隐患</li>
32
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level3" @change="enableChange('level3',mulchs.level3)" type="checkbox"/><img class="safe_deimg" src="../../assets/level3.png"/>三级隐患</li>
33
- <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.problems" @change="enableChange('problems',mulchs.problems)" type="checkbox"/><img class="safe_deimg" src="../../assets/ordinary.png"/>普通问题</li>
34
- </ul>
35
- <!--<data-grid :model="defectList" partial='list' class="table_sy" >
36
- <template partial='body' style="height:100%">
37
- <td @click="$parent.$parent.setDefectPos(row)">
38
- <div style="width: 100%;"class="flex-row">
39
- <img src="../../assets/星球背景.jpg" style="width:45px;height: 50px" class="img-rounded">
40
- <div >
41
- <p class="safe_p" :title="row.f_item_name"><nobr>{{row.f_item_name}}</nobr></p>
42
- <p class="safe_p" :title="row.f_checker_name"><nobr>{{row.f_checker_name}}</nobr></p>
43
- <p class="safe_p" :title="row.f_upload_date"><nobr>{{row.f_upload_date.substring(11)}}</nobr></p>
44
- </div>
45
- </div>
46
- </td>
47
- </template>
48
- </data-grid>-->
49
- </div>
50
- </div>
51
- <div class="panel panel-info" style="flex: 2;margin-top:0px;">
52
- <div class="panel-heading" style="height: auto">
53
- <h3 class="panel-title" @click="safeRefresh">人员情况列表</h3>
54
- </div>
55
- <div class="panel-body">
56
- <div class="safe_ul_sty">
57
- <p class="safe_li_sty">总数:
58
- <button @click.stop="allmodal([...this.allpersonnelsum,...this.allpersonnellixian],'总数')" class="btn btn-link">
59
- {{ allpersonnelsumdata.length ? allpersonnelsumdata.length : 0 }}
60
- </button>
61
- </p>
62
- <p class="safe_li_sty">在线人数:
63
- <button @click.stop="allmodal(allpersonnelsum,'在线人数')" class="btn btn-link">
64
- {{ allpersonnelsum.length ? allpersonnelsum.length : 0 }}
65
- </button>
66
- </p>
67
- <p class="safe_li_sty">离线人数:
68
- <button @click.stop="allmodal(allpersonnellixian,'离线人数')" class="btn btn-link">
69
- {{ allpersonnellixian.length ? allpersonnellixian.length : 0 }}
70
- </button>
71
- </p>
72
- </div>
73
-
74
- </div>
75
- </div>
76
- <div class="panel panel-info" style="flex: 4;margin-top:0px;height: 50%">
77
- <div class="panel-heading" style="height: auto">
78
- <h3 class="panel-title">今日隐患</h3>
79
- </div>
80
- <div class="panel-body" style="overflow: scroll">
81
- <ul class="safe_ul_sty">
82
- <li v-for="row in todayDefectList" track-by="$index" class="safe_li_sty safe_list_li" @click="setDefectPos(row)" style="border: 1px #4d4d4d solid;border-radius: 2px" >
83
- <div style="width: 100%;"class="flex-row">
84
- <div style="width:35%">
85
- <!--<img-self-safe :src="'/rs/image/file/'+row.f_path" style="float: left" width="45"
86
- height="50" class="img-rounded"></img-self-safe>-->
87
- <img :src="'/rs/image/file/'+row.f_path" style="width:45px;height: 50px" @click.stop="seePhotos(row.f_path)" class="img-rounded">
88
- </div>
89
- <div style="width:65%">
90
- <p class="safe_p" :title="row.f_item_name">{{row.f_item_name}}</p>
91
- <p class="safe_p" :title="row.f_checker_name">{{row.f_checker_name}}</p>
92
- <p class="safe_p" :title="row.f_upload_date">{{row.f_upload_date.substring(11)}}</p>
93
- </div>
94
- </div>
95
- </li>
96
- </ul>
97
- </div>
98
- </div>
99
- </div>
100
- </div>
101
-
102
- </div>
103
- <!-- <work-busy :is-busy="loading"></work-busy>-->
104
- </template>
105
-
106
- <script>
107
- import Vue from 'vue'
108
- import * as Util from '../Util'
109
- import {HttpResetClass,trans} from 'vue-client'
110
- import {isEmpty} from "../Util";
111
-
112
- export default {
113
- title: '安检实时监控中心',
114
- data() {
115
- return {
116
- loading: false,
117
- map:null,
118
- infoWindow:null,
119
- satellite:null,
120
- roadNet:null,
121
- allpersonnelsum: [],//在线人数
122
- allpersonnelsumdata: [],//总数
123
- allpersonnellixian: [],//离线
124
- checkerMulchs:null,//安检员点位
125
- level1Mulchs:null,//一级隐患点位
126
- level2Mulchs:null,//二级隐患点位
127
- level3Mulchs:null,//三级隐患点位
128
- problemsMulchs:null,//普通问题点位
129
- checkers:[],
130
- employeeList:[],
131
- level1:[],
132
- level2:[],
133
- level3:[],
134
- problems:[],
135
- chekckOps:null,
136
- defectList:{rows:[]},
137
- todayDefectList:[],
138
- intervalNum:'',
139
- layers:{//图层控制显示
140
- satelliteEnable:false,
141
- roadNetEnable:false
142
- },
143
- imgSrc:'',
144
- geocoder:null,//逆地理编码
145
- mulchs:{//覆盖物控制显示
146
- checker:true,
147
- level1:true,
148
- level2:true,
149
- level3:true,
150
- problems:true
151
- },
152
- styleObject :[
153
- {
154
- url: '/images/anjianyuan.png', //人员图标URL
155
- anchor: new AMap.Pixel(14, 8), // 图标偏移位置
156
- size: new AMap.Size(26, 28) //图标大小
157
- },
158
- {
159
- url: '/images/level1.png', //一级隐患图标URL
160
- anchor: new AMap.Pixel(14, 8), // 图标偏移位置
161
- size: new AMap.Size(26, 28) //图标大小
162
- },
163
- {
164
- url: '/images/level2.png', //二级隐患图标URL
165
- anchor: new AMap.Pixel(14, 8), // 图标偏移位置
166
- size: new AMap.Size(26, 28) //图标大小
167
- },
168
- {
169
- url: '/images/level3.png', //三级隐患图标URL
170
- anchor: new AMap.Pixel(14, 8), // 图标偏移位置
171
- size: new AMap.Size(26, 28) //图标大小
172
- },
173
- {
174
- url: '/images/ordinary.png', //普通问题图标URL
175
- anchor: new AMap.Pixel(14, 8), // 图标偏移位置
176
- size: new AMap.Size(26, 28) //图标大小
177
- }
178
- ]
179
- }
180
- },
181
- async ready(){
182
- this.initMap()
183
- //tag)
184
- await this.getNewData()
185
- //tag
186
- this.assemblyData()
187
- //tag
188
- window.safe_closeInfoWindow=this.closeInfoWindow
189
- this.intervalNum=window.setInterval(this.safeRefresh, 240000)
190
- },
191
- methods: {
192
- allmodal (row, type) {
193
- if (row.length === 0) {
194
- return this.$showAlert('暂无数据!!!', 'warning', 2000)
195
- }
196
- const persons = [{label: '全部', value: ''}]
197
- for (const item of row) {
198
- persons.push({label: item.name, value: item.name})
199
- }
200
- this.persons = persons
201
- this.showname = type
202
- this.showdata = row
203
- this.showdataSearch = row
204
- this.showModal = true
205
- this.onLineNumber = this.allpersonnelsum.length
206
- this.noOnLineNumber = this.allpersonnellixian.length
207
-
208
- },
209
- seePhotos(path){
210
- if(path){
211
- this.imgSrc='/rs/image/file/'+path
212
- this.infoWindow.close()
213
- this.$refs.defectimg.open()
214
- }
215
- },
216
- setDefectPos(row){
217
- this.map.setZoomAndCenter(15,[row.f_longitude,row.f_latitude])
218
- let defectContent=this.getDefectContent(row)
219
- this.infoWindow.setContent(defectContent)
220
- this.infoWindow.open(this.map, [row.f_longitude,row.f_latitude]);
221
- },
222
- async getNewData () {
223
- this.loading = true
224
- this.allpersonnellixian = []
225
- let res = await new HttpResetClass().load('POST', '/rs/search', {
226
- // source: 'this.getParentByType($department$).getAllChildrens().where(row.getAttributes().get($rolestr$).indexOf($需要定位人员$) != -1))',
227
- source: `root.getResourceById($${this.$login.f.orgid}$,$organization$).getSpecialResByType($user$).where(row.getAttributes().get($rolestr$).indexOf($需要定位人员$) != -1)`,
228
- userid: this.$login.f.id
229
- }, {resolveMsg: null, rejectMsg: null})
230
-
231
- let arr1 = await new HttpResetClass().load('GET', `/rs/safePsoition/getPosition`, {}, {
232
- resolveMsg: null,
233
- rejectMsg: null
234
- })
235
- const today = Util.toStandardDateString()
236
- let arr2 = await new HttpResetClass().load('POST', `/rs/sql/tel_singleTable_OrderBy`, {
237
- data: {
238
- items:'*',
239
- tablename: 't_work_record',
240
- condition: `f_onsite_time >= '${today} 00:00:00' and f_onsite_time <= '${today} 23:59:59'`,
241
- orderitem: 'id'
242
- }}, {
243
- resolveMsg: null,
244
- rejectMsg: null
245
- })
246
- arr1.data = JSON.parse(arr1.data.replaceAll(/([{,]\s*)([0-9]+)(\s*=\s*{)/g, '$1"$2"$3').replaceAll('=',':'))
247
- console.log('arr1.data',arr1.data)
248
- const checkerOptions = [{label: '全部', value: ''}]
249
- if(res.data){
250
- res.data.forEach((checker)=>{
251
- for(let check in arr1.data){
252
- let checkerpos = arr1.data[check]
253
- if(checker.id==check){
254
- checkerpos.userid=checker.userid
255
- checkerpos.f_user_telephone=checker.f_user_telephone
256
- checkerpos.rolestr=checker.rolestr
257
- this.checkers.push(checkerpos)
258
- }
259
- }
260
- })
261
- }
262
- this.checkerOptions = checkerOptions
263
- if (res.data && arr2.data){
264
- for (const item of res.data) {
265
- for (const record of arr2.data) {
266
- if (item.id == record.f_user_id){
267
- item.f_onsite_time = record.f_onsite_time
268
- item.f_offsite_time = record.f_offsite_time
269
- break
270
- }
271
- }
272
- }
273
- }
274
- this.allpersonnelsumdata = res.data
275
-
276
- this.datachecker = []
277
- this.allpersonnelsum = []
278
- var newdate = Util.toStandardTimeString()
279
- for (let id in arr1.data) {
280
- const datachecke = {}
281
- datachecke.id = id
282
- const parse = arr1.data[id]
283
- let lxhm = this.$appdata.getSingleValue("离线毫秒数")
284
- if (isEmpty(lxhm)){
285
- lxhm = 300000
286
- }
287
- if ((new Date(newdate) - new Date(parse.uploadTime) < lxhm)) {
288
- datachecke.name = parse.name
289
- datachecke.f_latitude = parse.f_latitude
290
- datachecke.f_longitude = parse.f_longitude
291
- datachecke.f_provider = parse.f_provider
292
- datachecke.f_battery_level = parse.f_battery_level
293
- datachecke.f_bearing = parse.f_bearing
294
- datachecke.uploadTime = parse.uploadTime
295
- datachecke.f_signal_strength = parse.f_signal_strength
296
- datachecke.userid = parse.userid
297
- datachecke.f_speed = parse.f_speed
298
- datachecke.isOnline = true
299
- datachecke.f_internal_quote = parse.f_internal_quote
300
- datachecke.f_altitude = parse.f_altitude
301
- datachecke.f_traffic = parse.f_traffic
302
- datachecke.checkAddress = parse.f_longitude != 0? parse.address : '未获取到实时位置'
303
- for (const record of arr2.data) {
304
- if (datachecke.userid == record.f_user_id){
305
- datachecke.f_onsite_time = record.f_onsite_time
306
- datachecke.f_offsite_time = record.f_offsite_time
307
- break
308
- }
309
- }
310
- for (const item of this.allpersonnelsumdata) {
311
- if (datachecke.userid == item.id){
312
- datachecke.f_department_name = item.f_department_name
313
- break
314
- }
315
- }
316
- this.allpersonnelsum.push(datachecke)
317
- }
318
- }
319
- // 将数组设置到 massMarks 图层
320
- //this.checkerMulchs.setData(a1)
321
- // 将 massMarks 添加到地图实例
322
- this.checkerMulchs.setMap(this.map)
323
- if (res.data) {
324
- res.data.forEach((checker) => {
325
- var lixian = true
326
- for (var i =0;i < this.allpersonnelsum.length;i++) {
327
- if (this.allpersonnelsum[i].id == checker.id) {
328
- this.allpersonnelsum[i].f_user_telephone = checker.f_user_telephone
329
- //在线
330
- lixian = false
331
- break
332
- }
333
- }
334
- if (lixian) {
335
- checker.isOnline=false
336
- this.allpersonnellixian.push(checker)
337
- }
338
- })
339
- }
340
- let td = Util.toStandardDateString()
341
- //获取今天上传的所有隐患
342
- let arr = await new HttpResetClass().load('POST', `rs/sql/defectDetails`, {data: {condition: ` f_filialeid in ('${this.$login.f.orgid}') and f_upload_date>'${Util.toStartDateYearString()} 00:00:00' and F_LONGITUDE is not null`}},
343
- {resolveMsg: null, rejectMsg: null})
344
- //tag)
345
- if (arr.data) {
346
- this.todayDefectList = []
347
- arr.data.forEach((defect) => {
348
- //拿出今天的隐患放到今日隐患列表中
349
- if (defect.f_upload_date.indexOf(td) != -1) {
350
- this.todayDefectList.push(defect)
351
- }
352
- //取出一二三级隐患
353
- console.log('二级隐患', defect.f_defect_level == '二级隐患')
354
- if (defect.f_defect_level == '一级隐患' && defect.f_longitude && defect.f_latitude) {
355
- this.level1.push(defect)
356
- } else if (defect.f_defect_level == '二级隐患' && defect.f_longitude && defect.f_latitude) {
357
- this.level2.push(defect)
358
- } else if (defect.f_defect_level == '三级隐患' && defect.f_longitude && defect.f_latitude) {
359
- this.level3.push(defect)
360
- } else if(defect.f_longitude && defect.f_latitude){
361
- this.problems.push(defect)
362
- }
363
- })
364
- }
365
- this.loading = false
366
- this.defectList.rows = arr.data
367
- },
368
- getDefectContent(row){
369
- return `
370
- <div style="padding:0px;margin-left: 8px;"><b>隐患详情</b></div>
371
- <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
372
- <div class="panel-body">
373
- <ul style="list-style-type: none;font-size: 15px;">
374
- <li style="margin: 3px 0;">隐患内容: ${row.f_item_name}-${row.f_item_value}</li>
375
- <li style="margin: 3px 0;">隐患级别: ${row.f_defect_level}</li>
376
- <li style="margin: 3px 0;">发现人员: ${row.f_checker_name}</li>
377
- <li style="margin: 3px 0;">上报时间: ${row.f_upload_date}</li>
378
- <li style="margin: 3px 0;">是否处理: ${row.F_IS_REPAIRED?row.F_IS_REPAIRED:'未处理'}</li>
379
- <li style="margin: 3px 0;">隐患位置: ${row.f_address}</li>
380
- </ul>
381
- </div>
382
- </div>`
383
- },
384
- getCheckerContent(row){
385
- return `
386
- <div style="padding:0px;margin-left: 8px;"><b>员工信息</b></div>
387
- <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
388
- <div class="panel-body">
389
- <ul style="list-style-type: none;font-size: 15px;">
390
- <li style="margin: 3px 0;">员工工号: ${row.userid}</li>
391
- <li style="margin: 3px 0;">员工姓名: ${row.name}</li>
392
- <li style="margin: 3px 0;">员工电话: ${row.f_user_telephone?row.f_user_telephone:'未查到电话'}</li>
393
- <li style="margin: 3px 0;">角色列表: ${row.rolestr}</li>
394
- <li style="margin: 3px 0;">剩余电量: ${row.f_battery_level} %</li>
395
- <li style="margin: 3px 0;">剩余内存: ${row.f_internal_quote} MB</li>
396
- <li style="margin: 3px 0;">信号强度: ${row.f_signal_strength}</li>
397
- <li style="margin: 3px 0;">实时位置: ${row.checkAddress}</li>
398
- <li style="margin: 3px 0;">状态更新时间: ${row.uploadTime}</li>
399
- <!--<li style="margin: 3px 0;">客户地址: 河南省周口市工农南路xx酒店302</li>-->
400
- </ul>
401
- </div>
402
- </div>`
403
- },
404
- assemblyData(){
405
- let that=this
406
- this.checkerInit()
407
- /*this.checkers=[
408
- {f_longitude:114.718285,f_latitude:33.610584},
409
- {f_longitude:114.713736,f_latitude:33.642387}
410
- ]*/
411
- /*this.level1=[
412
- {f_longitude:114.68736,f_latitude:33.655248},
413
- {f_longitude:114.716736,f_latitude:33.627523}
414
- ]*/
415
- /*this.level2=[
416
- {f_longitude:114.676833,f_latitude:33.609726},
417
- {f_longitude:114.684013,f_latitude:33.642387}
418
- ]
419
- this.level3=[
420
- {f_longitude:114.71502,f_latitude:33.648675},
421
- {f_longitude:114.725002,f_latitude:33.637242}
422
- ]
423
- this.problems=[
424
- {f_longitude:114.696969,f_latitude:33.635241},
425
- {f_longitude:114.68836,f_latitude:33.655248}
426
- ]*/
427
- /*let a1=[]
428
- for(let i=0;i<this.checkers.length;i++){
429
- a1.push({
430
- lnglat: [this.checkers[i].f_longitude,this.checkers[i].f_latitude], //点标记位置
431
- name: '安检员',
432
- id:i,
433
- rowstr:this.checkers[i]
434
- })
435
- }
436
- // 将数组设置到 massMarks 图层
437
- this.checkerMulchs.setData(a1);
438
- // 将 massMarks 添加到地图实例
439
- this.checkerMulchs.setMap(this.map);*/
440
- let a2=[]
441
- for(let i=0;i<this.level1.length;i++){
442
- a2.push({
443
- lnglat: [this.level1[i].f_longitude, this.level1[i].f_latitude], //点标记位置
444
- name: '一级隐患',
445
- id:i,
446
- rowstr:this.level1[i]
447
- })
448
- }
449
- // 将数组设置到 massMarks 图层
450
- this.level1Mulchs.setData(a2);
451
- // 将 massMarks 添加到地图实例
452
- this.level1Mulchs.setMap(this.map);
453
-
454
-
455
- let a3=[]
456
- for(let o=0;o<this.level2.length;o++){
457
- if (this.level2[o].f_longitude && this.level2[o].f_latitude){
458
- a3.push({
459
- lnglat: [this.level2[o].f_longitude,this.level2[o].f_latitude], //点标记位置
460
- name: '二级隐患',
461
- id:o,
462
- rowstr:this.level2[o]
463
- })
464
- }
465
- }
466
- // 将数组设置到 massMarks 图层
467
- this.level2Mulchs.setData(a3);
468
- // 将 massMarks 添加到地图实例
469
- this.level2Mulchs.setMap(this.map);
470
-
471
- let a4=[]
472
- for(let p=0;p<this.level3.length;p++){
473
- if (this.level3[p].f_longitude&&this.level3[p].f_latitude){
474
- a4.push({
475
- lnglat: [this.level3[p].f_longitude, this.level3[p].f_latitude], //点标记位置
476
- name: '三级隐患',
477
- id:p,
478
- rowstr:this.level3[p]
479
- })
480
- }
481
- }
482
- // 将数组设置到 massMarks 图层
483
- this.level3Mulchs.setData(a4);
484
- // 将 massMarks 添加到地图实例
485
- this.level3Mulchs.setMap(this.map);
486
-
487
-
488
- let a5=[]
489
- for(let l=0;l<this.problems.length;l++){
490
- if (this.problems[l].f_longitude&&this.problems[l].f_latitude){
491
- a5.push({
492
- lnglat: [this.problems[l].f_longitude, this.problems[l].f_latitude], //点标记位置
493
- name: '普通问题',
494
- id:l,
495
- rowstr:this.problems[l]
496
- })
497
- }
498
- }
499
- // 将数组设置到 massMarks 图层
500
- this.problemsMulchs.setData(a5);
501
- // 将 massMarks 添加到地图实例
502
- this.problemsMulchs.setMap(this.map);
503
- //组装安检员点位集合
504
- },
505
- //处理图层和覆盖物的显示隐藏
506
- enableChange(vname,val){
507
- //tag
508
- //tag
509
- switch(vname){
510
- case 'satelliteEnable':
511
- if(val){
512
- this.map.add(this.satellite)
513
- }else{
514
- this.map.remove(this.satellite)
515
- }
516
- break;
517
- case 'roadNetEnable':
518
- if(val){
519
- this.map.add(this.roadNet)
520
- }else{
521
- this.map.remove(this.roadNet)
522
- }
523
- break;
524
- case 'checker':
525
- if(val){
526
- this.chekckOps.show()
527
- }else{
528
- this.chekckOps.hide()
529
- }
530
- break;
531
- case 'level1':
532
- if(val){
533
- this.level1Mulchs.show()
534
- }else{
535
- this.level1Mulchs.hide()
536
- }
537
- break;
538
- case 'level2':
539
- if(val){
540
- this.level2Mulchs.show()
541
- }else{
542
- this.level2Mulchs.hide()
543
- }
544
- break;
545
- case 'level3':
546
- if(val){
547
- this.level3Mulchs.show()
548
- }else{
549
- this.level3Mulchs.hide()
550
- }
551
- break;
552
- case 'problems':
553
- if(val){
554
- this.problemsMulchs.show()
555
- }else{
556
- this.problemsMulchs.hide()
557
- }
558
- break;
559
- default:
560
- }
561
- },
562
- initMap(){
563
- let that=this
564
- this.map = new AMap.Map('check_map', {
565
- zoom: 12,
566
- viewMode: '2D', //设置地图模式
567
- lang: 'zh_cn', //设置地图语言类型
568
- zindex: 99
569
- });
570
- // 异步加载地图插件
571
- AMap.plugin(
572
- ['AMap.ToolBar','AMap.Geolocation','AMap.Geocoder'], () => {//异步加载插件
573
- // 自动定位插件
574
- var geolocation = new AMap.Geolocation({
575
- // 是否使用高精度定位,默认:true
576
- enableHighAccuracy: true,
577
- // 设置定位超时时间,默认:无穷大
578
- showbutton: true,
579
- //控制按钮的显示
580
- timeout: 10000,
581
- // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
582
- buttonOffset: new AMap.Pixel(10, 20),
583
- // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
584
- //zoomToAccuracy: true,
585
- // 定位按钮的排放位置, RB表示右下
586
- buttonPosition: 'LB'
587
- })
588
- that.geocoder = new AMap.Geocoder({
589
- radius: 500 //范围,默认:500
590
- });
591
- that.map.addControl(geolocation)
592
- geolocation.getCurrentPosition();
593
- //geolocation.getCurrentPosition();
594
- that.map.addControl(new AMap.ToolBar()) //初始化工具插件
595
- });
596
- this.map.setDefaultCursor('move');
597
- //this.map.setMapStyle('amap://styles/whitesmoke');
598
- this.satellite=new AMap.TileLayer.Satellite()//卫星图层
599
- this.roadNet=new AMap.TileLayer.RoadNet({opacity:0.8})//网路图层
600
- //安检员位置集合
601
- this.chekckOps=new AMap.OverlayGroup()
602
- //初始化窗体
603
- this.infoWindow = new AMap.InfoWindow({
604
- anchor: 'bottom-center',
605
- //isCustom: true, //使用自定义窗体
606
- autoMove:true,
607
- content: '',
608
- offset: new AMap.Pixel(0, -25)
609
- })
610
- this.checkerMulchs = new AMap.MassMarks([], {
611
- opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
612
- zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
613
- cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
614
- //alwaysRender:false,
615
- style: this.styleObject[0]
616
- })
617
- this.checkerMulchs.on('click', function (e) {
618
- //tag)
619
- let checkAddress = '未获取到实时位置'
620
- console.log('e.data.lnglat=', e.data.lnglat)
621
- console.log('地图222')
622
- that.geocoder.getAddress(e.data.lnglat, function (status, result) {
623
- //
624
- if (status === 'complete' && result.regeocode) {
625
- checkAddress = result.regeocode.formattedAddress
626
- } else {
627
- e.data.rowstr.checkAddress = checkAddress
628
- }
629
- e.data.rowstr.checkAddress = checkAddress
630
- console.log('e.data.rowstr=', e.data.rowstr)
631
- let defectContent = that.getCheckerContent(e.data.rowstr)
632
- that.infoWindow.setContent(defectContent)
633
- that.infoWindow.open(that.map, e.data.lnglat)
634
- })
635
- })
636
- //安检员点位
637
- /*this.checkerMulchs = new AMap.MassMarks([], {
638
- opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
639
- zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
640
- cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
641
- //alwaysRender:false,
642
- style: this.styleObject[0]
643
- });
644
- //tag
645
- this.checkerMulchs.on('click',function (e) {
646
- //tag)
647
- let checkAddress='未获取到实时位置'
648
- that.geocoder.getAddress(e.data.lnglat, function(status, result) {
649
- if (status === 'complete'&& result.regeocode) {
650
- checkAddress = result.regeocode.formattedAddress;
651
- }else{
652
- log.error('根据经纬度查询地址失败')
653
- }
654
- e.data.rowstr.checkAddress=checkAddress
655
- let defectContent=that.getCheckerContent(e.data.rowstr)
656
- that.infoWindow.setContent(defectContent)
657
- that.infoWindow.open(that.map, e.data.lnglat);
658
- });
659
- })*/
660
- //一级隐患点位
661
- this.level1Mulchs=new AMap.MassMarks([], {
662
- opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
663
- zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
664
- cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
665
- //alwaysRender:false,
666
- style: this.styleObject[1]
667
- });
668
- this.level1Mulchs.on('click',function (e) {
669
- //tag)
670
- let defectContent=that.getDefectContent(e.data.rowstr)
671
- that.infoWindow.setContent(defectContent)
672
- that.infoWindow.open(that.map, e.data.lnglat);
673
- })
674
- //二级隐患点位
675
- this.level2Mulchs=new AMap.MassMarks([], {
676
- opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
677
- zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
678
- cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
679
- //alwaysRender:false,
680
- style: this.styleObject[2]
681
- });
682
- this.level2Mulchs.on('click',function (e) {
683
- //tag)
684
- let defectContent=that.getDefectContent(e.data.rowstr)
685
- that.infoWindow.setContent(defectContent)
686
- that.infoWindow.open(that.map, e.data.lnglat);
687
- })
688
- //三级隐患点位
689
- this.level3Mulchs=new AMap.MassMarks([], {
690
- opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
691
- zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
692
- cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
693
- //alwaysRender:false,
694
- style: this.styleObject[3]
695
- });
696
- this.level3Mulchs.on('click',function (e) {
697
- //tag)
698
- let defectContent=that.getDefectContent(e.data.rowstr)
699
- that.infoWindow.setContent(defectContent)
700
- that.infoWindow.open(that.map, e.data.lnglat);
701
- })
702
- //普通问题点位
703
- this.problemsMulchs=new AMap.MassMarks([], {
704
- opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
705
- zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
706
- cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
707
- //alwaysRender:false,
708
- style: this.styleObject[4]
709
- });
710
- this.problemsMulchs.on('click',function (e) {
711
- //tag)
712
- let defectContent=that.getDefectContent(e.data.rowstr)
713
- that.infoWindow.setContent(defectContent)
714
- that.infoWindow.open(that.map, e.data.lnglat);
715
- })
716
-
717
-
718
- },
719
- closeInfoWindow(){
720
- this.infoWindow.close()
721
- },
722
- checkerInit(){
723
- /*let marker1 = new AMap.Marker({
724
- position: [114.574809,33.621501],
725
- icon:'http://192.168.20.28:8400/image/anjianyuan.png'
726
- });
727
- //tag
728
- marker1.setLabel({
729
- //offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
730
- content: "<div class='info' style='background-color: #0b87e2'>何文强</div>", //设置文本标注内容
731
- direction: 'bottom' //设置文本标注方位
732
- })*/
733
- let that = this
734
- this.chekckOps.clearOverlays()
735
- for(let j=0;j<this.checkers.length;j++){
736
- //tag+"---"+this.checkers[j].f_longitude+"---"+this.checkers[j].f_latitude)
737
- //let o={f_longitude:"114.72"+(Math.floor(Math.random()*(9999-1000))+1000),f_latitude:"33.56"+(Math.floor(Math.random()*(9999-1000))+1000),name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865}
738
- let marker=new AMap.Marker({
739
- //map: that.map,
740
- offset:new AMap.Pixel(-18, -10),
741
- position: [this.checkers[j].f_longitude,this.checkers[j].f_latitude],
742
- icon:new AMap.Icon({
743
- image: '/images/anjianyuan.png', //人员图标URL
744
- imageOffset: new AMap.Pixel(0, 0), // 图标偏移位置
745
- imageSize: new AMap.Size(36, 36) //图标大小
746
- }),
747
- label:{
748
- //offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
749
- content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;padding: 5px;border-radius: 4px'>${this.checkers[j].name}</div>`, //设置文本标注内容
750
- direction: 'bottom', //设置文本标注方位
751
- offset:new AMap.Pixel(0, -4)
752
- },
753
- extData:this.checkers[j]
754
- })
755
- this.chekckOps.addOverlay(marker)
756
- if(this.checkers[j].f_longitude && this.checkers[j].f_longitude!='0'){
757
- let marker=new AMap.Marker({
758
- //map: that.map,
759
- offset:new AMap.Pixel(-18, -10),
760
- position: [this.checkers[j].f_longitude,this.checkers[j].f_latitude],
761
- icon:new AMap.Icon({
762
- image: '/images/anjianyuan.png', //人员图标URL
763
- imageOffset: new AMap.Pixel(0, 0), // 图标偏移位置
764
- imageSize: new AMap.Size(36, 36) //图标大小
765
- }),
766
- label:{
767
- //offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
768
- content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;padding: 5px;border-radius: 4px'>${this.checkers[j].name}</div>`, //设置文本标注内容
769
- direction: 'bottom', //设置文本标注方位
770
- offset:new AMap.Pixel(0, -4)
771
- },
772
- extData:this.checkers[j]
773
- })
774
- this.chekckOps.addOverlay(marker)
775
- }
776
-
777
- }
778
- this.chekckOps.setMap(this.map)
779
- this.chekckOps.on('click',function (e) {
780
- let pe=e.target.getExtData()
781
- let checkAddress=pe.address || '未获取到实时位置'
782
- that.geocoder.getAddress([pe.f_longitude,pe.f_latitude], function(status, result) {
783
- if (status === 'complete'&& result.regeocode) {
784
- checkAddress = result.regeocode.formattedAddress;
785
- }/*else{
786
- log.error('根据经纬度查询地址失败')
787
- }*/
788
- pe.checkAddress=checkAddress
789
- let defectContent=that.getCheckerContent(pe)
790
- that.infoWindow.setContent(defectContent)
791
- that.infoWindow.open(that.map, [pe.f_longitude,pe.f_latitude])
792
- })
793
- })
794
- /*AMap.event.addListener(this.ops, 'click', function (e) {
795
- //tag)
796
- //that.infoWindow.open(that.map, marker.getPosition());
797
- })*/
798
- },
799
- //获取当前时间的前两个小时
800
- getNowFormatDate(house=0) {
801
- //tag
802
- let date = new Date();
803
- let seperator1 = "-";
804
- let seperator2 = ":";
805
- if(house != 0){
806
- date.setHours(date.getHours()-house)
807
- }
808
- let month = date.getMonth() + 1;
809
- let strDate = date.getDate();
810
- let hour = date.getHours();
811
- let min = date.getMinutes();
812
- let second = date.getSeconds();
813
- if (month >= 1 && month <= 9) {
814
- month = "0" + month;
815
- }
816
- if (strDate >= 0 && strDate <= 9) {
817
- strDate = "0" + strDate;
818
- }
819
- if (hour >= 0 && hour <= 9) {
820
- hour = "0" + hour;
821
- }
822
- if (min >= 0 && min <= 9) {
823
- min = "0" + min;
824
- }
825
- if (second >= 0 && second <= 9) {
826
- second = "0" + second;
827
- }
828
- let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
829
- + " " + hour + seperator2 + min
830
- + seperator2 + second;
831
- return currentdate;
832
- },
833
- toStandardTimeString() {
834
- let dt = new Date()
835
- let month = dt.getMonth()+1
836
- let date = dt.getDate()
837
- let hour = dt.getHours()
838
- let min = dt.getMinutes()
839
- let sec = dt.getSeconds()
840
- return dt.getFullYear() + '-' + (month<10? '0'+ month : month) + '-' + (date<10? '0'+ date : date)
841
- + ' ' + (hour<10? '0'+ hour : hour)
842
- },
843
- async safeRefresh(){
844
- //tag
845
- //获取所有安检员的点位集合-----测试数据
846
- /*this.checkers=[]
847
- this.checkers.push({f_longitude:114.7318,f_latitude:33.567126,name:"hwq1",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
848
- this.checkers.push({f_longitude:114.726801,f_latitude:33.566912,name:"hwq2",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
849
- this.checkers.push({f_longitude:114.723346,f_latitude:33.568932,name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
850
- this.checkers.push({f_longitude:114.711741,f_latitude:33.585519,name:"hwq4",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
851
- this.checkers.push({f_longitude:114.756716,f_latitude:33.594528,name:"hwq5",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
852
- this.defectList.rows=[]
853
- this.defectList.rows.push({"f_longitude":114.661358,"f_latitude":33.596897,"f_checker_name":"hwq2","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
854
- this.defectList.rows.push({"f_longitude":114.659985,"f_latitude":33.62892,"f_checker_name":"hwq3","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
855
- this.defectList.rows.push({"f_longitude":114.634579,"f_latitude":33.616627,"f_checker_name":"hwq4","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
856
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
857
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
858
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
859
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
860
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
861
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
862
- this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})*/
863
- await this.getNewData()
864
- this.assemblyData()
865
- }
866
- },
867
- computed:{
868
-
869
- },
870
- destroyed(){
871
- window.clearInterval(this.intervalNum)
872
- }
873
- }
874
-
875
- </script>
876
-
877
- <style lang="less" scoped>
878
-
879
- .safe_checkbox_sty{
880
- vertical-align:text-bottom;
881
- margin-right: 3px;
882
-
883
- }
884
- .safe_ul_sty{
885
- list-style-type: none;
886
- font-size: 13px;
887
- padding-left: 5px;
888
- }
889
- .safe_li_sty{
890
- font-size: 13px;
891
- margin-top: 5px;
892
- }
893
- .safe_p{
894
- white-space: nowrap;
895
- overflow: hidden;
896
- text-overflow: ellipsis;
897
- margin: 0 0 0 10px;
898
-
899
- font-size: 12px;
900
- }
901
- .safe_list_li{
902
- margin-top: 5px;
903
- background-color: #ffffff;
904
- border: solid 1px #f0f4fa !important;
905
- color: #666666 !important;
906
- font-size: 1.3rem !important;
907
- font-family: PINGFANG-MEDIUM !important;
908
- padding: 8px;
909
- }
910
- .safe_list_li:hover{
911
- background-color: rgb(203,234,241);
912
- }
913
- .safe_deimg{
914
- vertical-align: text-bottom;
915
- width: 15px;
916
- margin-right: 3px;
917
- }
918
- </style>
919
-
920
-
1
+ <template>
2
+ <div class="flex-row">
3
+ <div class="basic-main" style="flex:7">
4
+ <div id="check_map" style="height:100%">
5
+ <img-self-safe :src="imgSrc" width="45" style="z-index: 0"
6
+ height="50" class="img-rounded" v-ref:defectimg></img-self-safe>
7
+ </div>
8
+ </div>
9
+ <div id="zzz" class="basic-main" style="flex:1;margin-left: 0px;overflow: hidden">
10
+ <div class="flex">
11
+ <div class="panel panel-info" style="flex: 1;margin-top:0px">
12
+ <div class="panel-heading" style="height: auto">
13
+ <h3 class="panel-title">图层设置</h3>
14
+ </div>
15
+ <div class="panel-body">
16
+ <ul class="safe_ul_sty">
17
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.satelliteEnable" @change="enableChange('satelliteEnable',layers.satelliteEnable)" type="checkbox"/>卫星图层</li>
18
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.roadNetEnable" @change="enableChange('roadNetEnable',layers.roadNetEnable)" type="checkbox"/>网路图层</li>
19
+ <!--<button @click="safeRefresh">刷新111</button>-->
20
+ </ul>
21
+ </div>
22
+ </div>
23
+ <div class="panel panel-info" style="flex: 2;margin-top:0px;">
24
+ <div class="panel-heading" style="height: auto">
25
+ <h3 class="panel-title">覆盖物设置</h3>
26
+ </div>
27
+ <div class="panel-body">
28
+ <ul class="safe_ul_sty">
29
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.checker" @change="enableChange('checker',mulchs.checker)" type="checkbox"/><img class="safe_deimg" src="../../assets/anjianyuan.png"/>工作人员</li>
30
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level1" @change="enableChange('level1',mulchs.level1)" type="checkbox"/><img class="safe_deimg" src="../../assets/level1.png"/>一级隐患</li>
31
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level2" @change="enableChange('level2',mulchs.level2)" type="checkbox"/><img class="safe_deimg" src="../../assets/level2.png"/>二级隐患</li>
32
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level3" @change="enableChange('level3',mulchs.level3)" type="checkbox"/><img class="safe_deimg" src="../../assets/level3.png"/>三级隐患</li>
33
+ <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.problems" @change="enableChange('problems',mulchs.problems)" type="checkbox"/><img class="safe_deimg" src="../../assets/ordinary.png"/>普通问题</li>
34
+ </ul>
35
+ <!--<data-grid :model="defectList" partial='list' class="table_sy" >
36
+ <template partial='body' style="height:100%">
37
+ <td @click="$parent.$parent.setDefectPos(row)">
38
+ <div style="width: 100%;"class="flex-row">
39
+ <img src="../../assets/星球背景.jpg" style="width:45px;height: 50px" class="img-rounded">
40
+ <div >
41
+ <p class="safe_p" :title="row.f_item_name"><nobr>{{row.f_item_name}}</nobr></p>
42
+ <p class="safe_p" :title="row.f_checker_name"><nobr>{{row.f_checker_name}}</nobr></p>
43
+ <p class="safe_p" :title="row.f_upload_date"><nobr>{{row.f_upload_date.substring(11)}}</nobr></p>
44
+ </div>
45
+ </div>
46
+ </td>
47
+ </template>
48
+ </data-grid>-->
49
+ </div>
50
+ </div>
51
+ <div class="panel panel-info" style="flex: 2;margin-top:0px;">
52
+ <div class="panel-heading" style="height: auto">
53
+ <h3 class="panel-title" @click="safeRefresh">人员情况列表</h3>
54
+ </div>
55
+ <div class="panel-body">
56
+ <div class="safe_ul_sty">
57
+ <p class="safe_li_sty">总数:
58
+ <button @click.stop="allmodal([...this.allpersonnelsum,...this.allpersonnellixian],'总数')" class="btn btn-link">
59
+ {{ allpersonnelsumdata.length ? allpersonnelsumdata.length : 0 }}
60
+ </button>
61
+ </p>
62
+ <p class="safe_li_sty">在线人数:
63
+ <button @click.stop="allmodal(allpersonnelsum,'在线人数')" class="btn btn-link">
64
+ {{ allpersonnelsum.length ? allpersonnelsum.length : 0 }}
65
+ </button>
66
+ </p>
67
+ <p class="safe_li_sty">离线人数:
68
+ <button @click.stop="allmodal(allpersonnellixian,'离线人数')" class="btn btn-link">
69
+ {{ allpersonnellixian.length ? allpersonnellixian.length : 0 }}
70
+ </button>
71
+ </p>
72
+ </div>
73
+
74
+ </div>
75
+ </div>
76
+ <div class="panel panel-info" style="flex: 4;margin-top:0px;height: 50%">
77
+ <div class="panel-heading" style="height: auto">
78
+ <h3 class="panel-title">今日隐患</h3>
79
+ </div>
80
+ <div class="panel-body" style="overflow: scroll">
81
+ <ul class="safe_ul_sty">
82
+ <li v-for="row in todayDefectList" track-by="$index" class="safe_li_sty safe_list_li" @click="setDefectPos(row)" style="border: 1px #4d4d4d solid;border-radius: 2px" >
83
+ <div style="width: 100%;"class="flex-row">
84
+ <div style="width:35%">
85
+ <!--<img-self-safe :src="'/rs/image/file/'+row.f_path" style="float: left" width="45"
86
+ height="50" class="img-rounded"></img-self-safe>-->
87
+ <img :src="'/rs/image/file/'+row.f_path" style="width:45px;height: 50px" @click.stop="seePhotos(row.f_path)" class="img-rounded">
88
+ </div>
89
+ <div style="width:65%">
90
+ <p class="safe_p" :title="row.f_item_name">{{row.f_item_name}}</p>
91
+ <p class="safe_p" :title="row.f_checker_name">{{row.f_checker_name}}</p>
92
+ <p class="safe_p" :title="row.f_upload_date">{{row.f_upload_date.substring(11)}}</p>
93
+ </div>
94
+ </div>
95
+ </li>
96
+ </ul>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ </div>
103
+ <!-- <work-busy :is-busy="loading"></work-busy>-->
104
+ </template>
105
+
106
+ <script>
107
+ import Vue from 'vue'
108
+ import * as Util from '../Util'
109
+ import {HttpResetClass,trans} from 'vue-client'
110
+ import {isEmpty} from "../Util";
111
+
112
+ export default {
113
+ title: '安检实时监控中心',
114
+ data() {
115
+ return {
116
+ loading: false,
117
+ map:null,
118
+ infoWindow:null,
119
+ satellite:null,
120
+ roadNet:null,
121
+ allpersonnelsum: [],//在线人数
122
+ allpersonnelsumdata: [],//总数
123
+ allpersonnellixian: [],//离线
124
+ checkerMulchs:null,//安检员点位
125
+ level1Mulchs:null,//一级隐患点位
126
+ level2Mulchs:null,//二级隐患点位
127
+ level3Mulchs:null,//三级隐患点位
128
+ problemsMulchs:null,//普通问题点位
129
+ checkers:[],
130
+ employeeList:[],
131
+ level1:[],
132
+ level2:[],
133
+ level3:[],
134
+ problems:[],
135
+ chekckOps:null,
136
+ defectList:{rows:[]},
137
+ todayDefectList:[],
138
+ intervalNum:'',
139
+ layers:{//图层控制显示
140
+ satelliteEnable:false,
141
+ roadNetEnable:false
142
+ },
143
+ imgSrc:'',
144
+ geocoder:null,//逆地理编码
145
+ mulchs:{//覆盖物控制显示
146
+ checker:true,
147
+ level1:true,
148
+ level2:true,
149
+ level3:true,
150
+ problems:true
151
+ },
152
+ styleObject :[
153
+ {
154
+ url: '/images/anjianyuan.png', //人员图标URL
155
+ anchor: new AMap.Pixel(14, 8), // 图标偏移位置
156
+ size: new AMap.Size(26, 28) //图标大小
157
+ },
158
+ {
159
+ url: '/images/level1.png', //一级隐患图标URL
160
+ anchor: new AMap.Pixel(14, 8), // 图标偏移位置
161
+ size: new AMap.Size(26, 28) //图标大小
162
+ },
163
+ {
164
+ url: '/images/level2.png', //二级隐患图标URL
165
+ anchor: new AMap.Pixel(14, 8), // 图标偏移位置
166
+ size: new AMap.Size(26, 28) //图标大小
167
+ },
168
+ {
169
+ url: '/images/level3.png', //三级隐患图标URL
170
+ anchor: new AMap.Pixel(14, 8), // 图标偏移位置
171
+ size: new AMap.Size(26, 28) //图标大小
172
+ },
173
+ {
174
+ url: '/images/ordinary.png', //普通问题图标URL
175
+ anchor: new AMap.Pixel(14, 8), // 图标偏移位置
176
+ size: new AMap.Size(26, 28) //图标大小
177
+ }
178
+ ]
179
+ }
180
+ },
181
+ async ready(){
182
+ this.initMap()
183
+ //tag)
184
+ await this.getNewData()
185
+ //tag
186
+ this.assemblyData()
187
+ //tag
188
+ window.safe_closeInfoWindow=this.closeInfoWindow
189
+ this.intervalNum=window.setInterval(this.safeRefresh, 240000)
190
+ },
191
+ methods: {
192
+ allmodal (row, type) {
193
+ if (row.length === 0) {
194
+ return this.$showAlert('暂无数据!!!', 'warning', 2000)
195
+ }
196
+ const persons = [{label: '全部', value: ''}]
197
+ for (const item of row) {
198
+ persons.push({label: item.name, value: item.name})
199
+ }
200
+ this.persons = persons
201
+ this.showname = type
202
+ this.showdata = row
203
+ this.showdataSearch = row
204
+ this.showModal = true
205
+ this.onLineNumber = this.allpersonnelsum.length
206
+ this.noOnLineNumber = this.allpersonnellixian.length
207
+
208
+ },
209
+ seePhotos(path){
210
+ if(path){
211
+ this.imgSrc='/rs/image/file/'+path
212
+ this.infoWindow.close()
213
+ this.$refs.defectimg.open()
214
+ }
215
+ },
216
+ setDefectPos(row){
217
+ this.map.setZoomAndCenter(15,[row.f_longitude,row.f_latitude])
218
+ let defectContent=this.getDefectContent(row)
219
+ this.infoWindow.setContent(defectContent)
220
+ this.infoWindow.open(this.map, [row.f_longitude,row.f_latitude]);
221
+ },
222
+ async getNewData () {
223
+ this.loading = true
224
+ this.allpersonnellixian = []
225
+ let res = await new HttpResetClass().load('POST', '/rs/search', {
226
+ // source: 'this.getParentByType($department$).getAllChildrens().where(row.getAttributes().get($rolestr$).indexOf($需要定位人员$) != -1))',
227
+ source: `root.getResourceById($${this.$login.f.orgid}$,$organization$).getSpecialResByType($user$).where(row.getAttributes().get($rolestr$).indexOf($需要定位人员$) != -1)`,
228
+ userid: this.$login.f.id
229
+ }, {resolveMsg: null, rejectMsg: null})
230
+
231
+ let arr1 = await new HttpResetClass().load('GET', `/rs/safePsoition/getPosition`, {}, {
232
+ resolveMsg: null,
233
+ rejectMsg: null
234
+ })
235
+ const today = Util.toStandardDateString()
236
+ let arr2 = await new HttpResetClass().load('POST', `/rs/sql/tel_singleTable_OrderBy`, {
237
+ data: {
238
+ items:'*',
239
+ tablename: 't_work_record',
240
+ condition: `f_onsite_time >= '${today} 00:00:00' and f_onsite_time <= '${today} 23:59:59'`,
241
+ orderitem: 'id'
242
+ }}, {
243
+ resolveMsg: null,
244
+ rejectMsg: null
245
+ })
246
+ arr1.data = JSON.parse(arr1.data.replaceAll(/([{,]\s*)([0-9]+)(\s*=\s*{)/g, '$1"$2"$3').replaceAll('=',':'))
247
+ console.log('arr1.data',arr1.data)
248
+ const checkerOptions = [{label: '全部', value: ''}]
249
+ if(res.data){
250
+ res.data.forEach((checker)=>{
251
+ for(let check in arr1.data){
252
+ let checkerpos = arr1.data[check]
253
+ if(checker.id==check){
254
+ checkerpos.userid=checker.userid
255
+ checkerpos.f_user_telephone=checker.f_user_telephone
256
+ checkerpos.rolestr=checker.rolestr
257
+ this.checkers.push(checkerpos)
258
+ }
259
+ }
260
+ })
261
+ }
262
+ this.checkerOptions = checkerOptions
263
+ if (res.data && arr2.data){
264
+ for (const item of res.data) {
265
+ for (const record of arr2.data) {
266
+ if (item.id == record.f_user_id){
267
+ item.f_onsite_time = record.f_onsite_time
268
+ item.f_offsite_time = record.f_offsite_time
269
+ break
270
+ }
271
+ }
272
+ }
273
+ }
274
+ this.allpersonnelsumdata = res.data
275
+
276
+ this.datachecker = []
277
+ this.allpersonnelsum = []
278
+ var newdate = Util.toStandardTimeString()
279
+ for (let id in arr1.data) {
280
+ const datachecke = {}
281
+ datachecke.id = id
282
+ const parse = arr1.data[id]
283
+ let lxhm = this.$appdata.getSingleValue("离线毫秒数")
284
+ if (isEmpty(lxhm)){
285
+ lxhm = 300000
286
+ }
287
+ if ((new Date(newdate) - new Date(parse.uploadTime) < lxhm)) {
288
+ datachecke.name = parse.name
289
+ datachecke.f_latitude = parse.f_latitude
290
+ datachecke.f_longitude = parse.f_longitude
291
+ datachecke.f_provider = parse.f_provider
292
+ datachecke.f_battery_level = parse.f_battery_level
293
+ datachecke.f_bearing = parse.f_bearing
294
+ datachecke.uploadTime = parse.uploadTime
295
+ datachecke.f_signal_strength = parse.f_signal_strength
296
+ datachecke.userid = parse.userid
297
+ datachecke.f_speed = parse.f_speed
298
+ datachecke.isOnline = true
299
+ datachecke.f_internal_quote = parse.f_internal_quote
300
+ datachecke.f_altitude = parse.f_altitude
301
+ datachecke.f_traffic = parse.f_traffic
302
+ datachecke.checkAddress = parse.f_longitude != 0? parse.address : '未获取到实时位置'
303
+ for (const record of arr2.data) {
304
+ if (datachecke.userid == record.f_user_id){
305
+ datachecke.f_onsite_time = record.f_onsite_time
306
+ datachecke.f_offsite_time = record.f_offsite_time
307
+ break
308
+ }
309
+ }
310
+ for (const item of this.allpersonnelsumdata) {
311
+ if (datachecke.userid == item.id){
312
+ datachecke.f_department_name = item.f_department_name
313
+ break
314
+ }
315
+ }
316
+ this.allpersonnelsum.push(datachecke)
317
+ }
318
+ }
319
+ // 将数组设置到 massMarks 图层
320
+ //this.checkerMulchs.setData(a1)
321
+ // 将 massMarks 添加到地图实例
322
+ this.checkerMulchs.setMap(this.map)
323
+ if (res.data) {
324
+ res.data.forEach((checker) => {
325
+ var lixian = true
326
+ for (var i =0;i < this.allpersonnelsum.length;i++) {
327
+ if (this.allpersonnelsum[i].id == checker.id) {
328
+ this.allpersonnelsum[i].f_user_telephone = checker.f_user_telephone
329
+ //在线
330
+ lixian = false
331
+ break
332
+ }
333
+ }
334
+ if (lixian) {
335
+ checker.isOnline=false
336
+ this.allpersonnellixian.push(checker)
337
+ }
338
+ })
339
+ }
340
+ let td = Util.toStandardDateString()
341
+ //获取今天上传的所有隐患
342
+ let arr = await new HttpResetClass().load('POST', `rs/sql/defectDetails`, {data: {condition: ` f_filialeid in ('${this.$login.f.orgid}') and f_upload_date>'${Util.toStartDateYearString()} 00:00:00' and F_LONGITUDE is not null`}},
343
+ {resolveMsg: null, rejectMsg: null})
344
+ //tag)
345
+ if (arr.data) {
346
+ this.todayDefectList = []
347
+ arr.data.forEach((defect) => {
348
+ //拿出今天的隐患放到今日隐患列表中
349
+ if (defect.f_upload_date.indexOf(td) != -1) {
350
+ this.todayDefectList.push(defect)
351
+ }
352
+ //取出一二三级隐患
353
+ console.log('二级隐患', defect.f_defect_level == '二级隐患')
354
+ if (defect.f_defect_level == '一级隐患' && defect.f_longitude && defect.f_latitude) {
355
+ this.level1.push(defect)
356
+ } else if (defect.f_defect_level == '二级隐患' && defect.f_longitude && defect.f_latitude) {
357
+ this.level2.push(defect)
358
+ } else if (defect.f_defect_level == '三级隐患' && defect.f_longitude && defect.f_latitude) {
359
+ this.level3.push(defect)
360
+ } else if(defect.f_longitude && defect.f_latitude){
361
+ this.problems.push(defect)
362
+ }
363
+ })
364
+ }
365
+ this.loading = false
366
+ this.defectList.rows = arr.data
367
+ },
368
+ getDefectContent(row){
369
+ return `
370
+ <div style="padding:0px;margin-left: 8px;"><b>隐患详情</b></div>
371
+ <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
372
+ <div class="panel-body">
373
+ <ul style="list-style-type: none;font-size: 15px;">
374
+ <li style="margin: 3px 0;">隐患内容: ${row.f_item_name}-${row.f_item_value}</li>
375
+ <li style="margin: 3px 0;">隐患级别: ${row.f_defect_level}</li>
376
+ <li style="margin: 3px 0;">发现人员: ${row.f_checker_name}</li>
377
+ <li style="margin: 3px 0;">上报时间: ${row.f_upload_date}</li>
378
+ <li style="margin: 3px 0;">是否处理: ${row.F_IS_REPAIRED?row.F_IS_REPAIRED:'未处理'}</li>
379
+ <li style="margin: 3px 0;">隐患位置: ${row.f_address}</li>
380
+ </ul>
381
+ </div>
382
+ </div>`
383
+ },
384
+ getCheckerContent(row){
385
+ return `
386
+ <div style="padding:0px;margin-left: 8px;"><b>员工信息</b></div>
387
+ <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
388
+ <div class="panel-body">
389
+ <ul style="list-style-type: none;font-size: 15px;">
390
+ <li style="margin: 3px 0;">员工工号: ${row.userid}</li>
391
+ <li style="margin: 3px 0;">员工姓名: ${row.name}</li>
392
+ <li style="margin: 3px 0;">员工电话: ${row.f_user_telephone?row.f_user_telephone:'未查到电话'}</li>
393
+ <li style="margin: 3px 0;">角色列表: ${row.rolestr}</li>
394
+ <li style="margin: 3px 0;">剩余电量: ${row.f_battery_level} %</li>
395
+ <li style="margin: 3px 0;">剩余内存: ${row.f_internal_quote} MB</li>
396
+ <li style="margin: 3px 0;">信号强度: ${row.f_signal_strength}</li>
397
+ <li style="margin: 3px 0;">实时位置: ${row.checkAddress}</li>
398
+ <li style="margin: 3px 0;">状态更新时间: ${row.uploadTime}</li>
399
+ <!--<li style="margin: 3px 0;">客户地址: 河南省周口市工农南路xx酒店302</li>-->
400
+ </ul>
401
+ </div>
402
+ </div>`
403
+ },
404
+ assemblyData(){
405
+ let that=this
406
+ this.checkerInit()
407
+ /*this.checkers=[
408
+ {f_longitude:114.718285,f_latitude:33.610584},
409
+ {f_longitude:114.713736,f_latitude:33.642387}
410
+ ]*/
411
+ /*this.level1=[
412
+ {f_longitude:114.68736,f_latitude:33.655248},
413
+ {f_longitude:114.716736,f_latitude:33.627523}
414
+ ]*/
415
+ /*this.level2=[
416
+ {f_longitude:114.676833,f_latitude:33.609726},
417
+ {f_longitude:114.684013,f_latitude:33.642387}
418
+ ]
419
+ this.level3=[
420
+ {f_longitude:114.71502,f_latitude:33.648675},
421
+ {f_longitude:114.725002,f_latitude:33.637242}
422
+ ]
423
+ this.problems=[
424
+ {f_longitude:114.696969,f_latitude:33.635241},
425
+ {f_longitude:114.68836,f_latitude:33.655248}
426
+ ]*/
427
+ /*let a1=[]
428
+ for(let i=0;i<this.checkers.length;i++){
429
+ a1.push({
430
+ lnglat: [this.checkers[i].f_longitude,this.checkers[i].f_latitude], //点标记位置
431
+ name: '安检员',
432
+ id:i,
433
+ rowstr:this.checkers[i]
434
+ })
435
+ }
436
+ // 将数组设置到 massMarks 图层
437
+ this.checkerMulchs.setData(a1);
438
+ // 将 massMarks 添加到地图实例
439
+ this.checkerMulchs.setMap(this.map);*/
440
+ let a2=[]
441
+ for(let i=0;i<this.level1.length;i++){
442
+ a2.push({
443
+ lnglat: [this.level1[i].f_longitude, this.level1[i].f_latitude], //点标记位置
444
+ name: '一级隐患',
445
+ id:i,
446
+ rowstr:this.level1[i]
447
+ })
448
+ }
449
+ // 将数组设置到 massMarks 图层
450
+ this.level1Mulchs.setData(a2);
451
+ // 将 massMarks 添加到地图实例
452
+ this.level1Mulchs.setMap(this.map);
453
+
454
+
455
+ let a3=[]
456
+ for(let o=0;o<this.level2.length;o++){
457
+ if (this.level2[o].f_longitude && this.level2[o].f_latitude){
458
+ a3.push({
459
+ lnglat: [this.level2[o].f_longitude,this.level2[o].f_latitude], //点标记位置
460
+ name: '二级隐患',
461
+ id:o,
462
+ rowstr:this.level2[o]
463
+ })
464
+ }
465
+ }
466
+ // 将数组设置到 massMarks 图层
467
+ this.level2Mulchs.setData(a3);
468
+ // 将 massMarks 添加到地图实例
469
+ this.level2Mulchs.setMap(this.map);
470
+
471
+ let a4=[]
472
+ for(let p=0;p<this.level3.length;p++){
473
+ if (this.level3[p].f_longitude&&this.level3[p].f_latitude){
474
+ a4.push({
475
+ lnglat: [this.level3[p].f_longitude, this.level3[p].f_latitude], //点标记位置
476
+ name: '三级隐患',
477
+ id:p,
478
+ rowstr:this.level3[p]
479
+ })
480
+ }
481
+ }
482
+ // 将数组设置到 massMarks 图层
483
+ this.level3Mulchs.setData(a4);
484
+ // 将 massMarks 添加到地图实例
485
+ this.level3Mulchs.setMap(this.map);
486
+
487
+
488
+ let a5=[]
489
+ for(let l=0;l<this.problems.length;l++){
490
+ if (this.problems[l].f_longitude&&this.problems[l].f_latitude){
491
+ a5.push({
492
+ lnglat: [this.problems[l].f_longitude, this.problems[l].f_latitude], //点标记位置
493
+ name: '普通问题',
494
+ id:l,
495
+ rowstr:this.problems[l]
496
+ })
497
+ }
498
+ }
499
+ // 将数组设置到 massMarks 图层
500
+ this.problemsMulchs.setData(a5);
501
+ // 将 massMarks 添加到地图实例
502
+ this.problemsMulchs.setMap(this.map);
503
+ //组装安检员点位集合
504
+ },
505
+ //处理图层和覆盖物的显示隐藏
506
+ enableChange(vname,val){
507
+ //tag
508
+ //tag
509
+ switch(vname){
510
+ case 'satelliteEnable':
511
+ if(val){
512
+ this.map.add(this.satellite)
513
+ }else{
514
+ this.map.remove(this.satellite)
515
+ }
516
+ break;
517
+ case 'roadNetEnable':
518
+ if(val){
519
+ this.map.add(this.roadNet)
520
+ }else{
521
+ this.map.remove(this.roadNet)
522
+ }
523
+ break;
524
+ case 'checker':
525
+ if(val){
526
+ this.chekckOps.show()
527
+ }else{
528
+ this.chekckOps.hide()
529
+ }
530
+ break;
531
+ case 'level1':
532
+ if(val){
533
+ this.level1Mulchs.show()
534
+ }else{
535
+ this.level1Mulchs.hide()
536
+ }
537
+ break;
538
+ case 'level2':
539
+ if(val){
540
+ this.level2Mulchs.show()
541
+ }else{
542
+ this.level2Mulchs.hide()
543
+ }
544
+ break;
545
+ case 'level3':
546
+ if(val){
547
+ this.level3Mulchs.show()
548
+ }else{
549
+ this.level3Mulchs.hide()
550
+ }
551
+ break;
552
+ case 'problems':
553
+ if(val){
554
+ this.problemsMulchs.show()
555
+ }else{
556
+ this.problemsMulchs.hide()
557
+ }
558
+ break;
559
+ default:
560
+ }
561
+ },
562
+ initMap(){
563
+ let that=this
564
+ this.map = new AMap.Map('check_map', {
565
+ zoom: 12,
566
+ viewMode: '2D', //设置地图模式
567
+ lang: 'zh_cn', //设置地图语言类型
568
+ zindex: 99
569
+ });
570
+ // 异步加载地图插件
571
+ AMap.plugin(
572
+ ['AMap.ToolBar','AMap.Geolocation','AMap.Geocoder'], () => {//异步加载插件
573
+ // 自动定位插件
574
+ var geolocation = new AMap.Geolocation({
575
+ // 是否使用高精度定位,默认:true
576
+ enableHighAccuracy: true,
577
+ // 设置定位超时时间,默认:无穷大
578
+ showbutton: true,
579
+ //控制按钮的显示
580
+ timeout: 10000,
581
+ // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
582
+ buttonOffset: new AMap.Pixel(10, 20),
583
+ // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
584
+ //zoomToAccuracy: true,
585
+ // 定位按钮的排放位置, RB表示右下
586
+ buttonPosition: 'LB'
587
+ })
588
+ that.geocoder = new AMap.Geocoder({
589
+ radius: 500 //范围,默认:500
590
+ });
591
+ that.map.addControl(geolocation)
592
+ geolocation.getCurrentPosition();
593
+ //geolocation.getCurrentPosition();
594
+ that.map.addControl(new AMap.ToolBar()) //初始化工具插件
595
+ });
596
+ this.map.setDefaultCursor('move');
597
+ //this.map.setMapStyle('amap://styles/whitesmoke');
598
+ this.satellite=new AMap.TileLayer.Satellite()//卫星图层
599
+ this.roadNet=new AMap.TileLayer.RoadNet({opacity:0.8})//网路图层
600
+ //安检员位置集合
601
+ this.chekckOps=new AMap.OverlayGroup()
602
+ //初始化窗体
603
+ this.infoWindow = new AMap.InfoWindow({
604
+ anchor: 'bottom-center',
605
+ //isCustom: true, //使用自定义窗体
606
+ autoMove:true,
607
+ content: '',
608
+ offset: new AMap.Pixel(0, -25)
609
+ })
610
+ this.checkerMulchs = new AMap.MassMarks([], {
611
+ opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
612
+ zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
613
+ cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
614
+ //alwaysRender:false,
615
+ style: this.styleObject[0]
616
+ })
617
+ this.checkerMulchs.on('click', function (e) {
618
+ //tag)
619
+ let checkAddress = '未获取到实时位置'
620
+ console.log('e.data.lnglat=', e.data.lnglat)
621
+ console.log('地图222')
622
+ that.geocoder.getAddress(e.data.lnglat, function (status, result) {
623
+ //
624
+ if (status === 'complete' && result.regeocode) {
625
+ checkAddress = result.regeocode.formattedAddress
626
+ } else {
627
+ e.data.rowstr.checkAddress = checkAddress
628
+ }
629
+ e.data.rowstr.checkAddress = checkAddress
630
+ console.log('e.data.rowstr=', e.data.rowstr)
631
+ let defectContent = that.getCheckerContent(e.data.rowstr)
632
+ that.infoWindow.setContent(defectContent)
633
+ that.infoWindow.open(that.map, e.data.lnglat)
634
+ })
635
+ })
636
+ //安检员点位
637
+ /*this.checkerMulchs = new AMap.MassMarks([], {
638
+ opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
639
+ zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
640
+ cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
641
+ //alwaysRender:false,
642
+ style: this.styleObject[0]
643
+ });
644
+ //tag
645
+ this.checkerMulchs.on('click',function (e) {
646
+ //tag)
647
+ let checkAddress='未获取到实时位置'
648
+ that.geocoder.getAddress(e.data.lnglat, function(status, result) {
649
+ if (status === 'complete'&& result.regeocode) {
650
+ checkAddress = result.regeocode.formattedAddress;
651
+ }else{
652
+ log.error('根据经纬度查询地址失败')
653
+ }
654
+ e.data.rowstr.checkAddress=checkAddress
655
+ let defectContent=that.getCheckerContent(e.data.rowstr)
656
+ that.infoWindow.setContent(defectContent)
657
+ that.infoWindow.open(that.map, e.data.lnglat);
658
+ });
659
+ })*/
660
+ //一级隐患点位
661
+ this.level1Mulchs=new AMap.MassMarks([], {
662
+ opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
663
+ zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
664
+ cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
665
+ //alwaysRender:false,
666
+ style: this.styleObject[1]
667
+ });
668
+ this.level1Mulchs.on('click',function (e) {
669
+ //tag)
670
+ let defectContent=that.getDefectContent(e.data.rowstr)
671
+ that.infoWindow.setContent(defectContent)
672
+ that.infoWindow.open(that.map, e.data.lnglat);
673
+ })
674
+ //二级隐患点位
675
+ this.level2Mulchs=new AMap.MassMarks([], {
676
+ opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
677
+ zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
678
+ cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
679
+ //alwaysRender:false,
680
+ style: this.styleObject[2]
681
+ });
682
+ this.level2Mulchs.on('click',function (e) {
683
+ //tag)
684
+ let defectContent=that.getDefectContent(e.data.rowstr)
685
+ that.infoWindow.setContent(defectContent)
686
+ that.infoWindow.open(that.map, e.data.lnglat);
687
+ })
688
+ //三级隐患点位
689
+ this.level3Mulchs=new AMap.MassMarks([], {
690
+ opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
691
+ zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
692
+ cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
693
+ //alwaysRender:false,
694
+ style: this.styleObject[3]
695
+ });
696
+ this.level3Mulchs.on('click',function (e) {
697
+ //tag)
698
+ let defectContent=that.getDefectContent(e.data.rowstr)
699
+ that.infoWindow.setContent(defectContent)
700
+ that.infoWindow.open(that.map, e.data.lnglat);
701
+ })
702
+ //普通问题点位
703
+ this.problemsMulchs=new AMap.MassMarks([], {
704
+ opacity: 0.8, // 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
705
+ zIndex: 111, //图层叠加的顺序值,0表示最底层。默认zIndex:5
706
+ cursor: 'pointer', //指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
707
+ //alwaysRender:false,
708
+ style: this.styleObject[4]
709
+ });
710
+ this.problemsMulchs.on('click',function (e) {
711
+ //tag)
712
+ let defectContent=that.getDefectContent(e.data.rowstr)
713
+ that.infoWindow.setContent(defectContent)
714
+ that.infoWindow.open(that.map, e.data.lnglat);
715
+ })
716
+
717
+
718
+ },
719
+ closeInfoWindow(){
720
+ this.infoWindow.close()
721
+ },
722
+ checkerInit(){
723
+ /*let marker1 = new AMap.Marker({
724
+ position: [114.574809,33.621501],
725
+ icon:'http://192.168.20.28:8400/image/anjianyuan.png'
726
+ });
727
+ //tag
728
+ marker1.setLabel({
729
+ //offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
730
+ content: "<div class='info' style='background-color: #0b87e2'>何文强</div>", //设置文本标注内容
731
+ direction: 'bottom' //设置文本标注方位
732
+ })*/
733
+ let that = this
734
+ this.chekckOps.clearOverlays()
735
+ for(let j=0;j<this.checkers.length;j++){
736
+ //tag+"---"+this.checkers[j].f_longitude+"---"+this.checkers[j].f_latitude)
737
+ //let o={f_longitude:"114.72"+(Math.floor(Math.random()*(9999-1000))+1000),f_latitude:"33.56"+(Math.floor(Math.random()*(9999-1000))+1000),name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865}
738
+ let marker=new AMap.Marker({
739
+ //map: that.map,
740
+ offset:new AMap.Pixel(-18, -10),
741
+ position: [this.checkers[j].f_longitude,this.checkers[j].f_latitude],
742
+ icon:new AMap.Icon({
743
+ image: '/images/anjianyuan.png', //人员图标URL
744
+ imageOffset: new AMap.Pixel(0, 0), // 图标偏移位置
745
+ imageSize: new AMap.Size(36, 36) //图标大小
746
+ }),
747
+ label:{
748
+ //offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
749
+ content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;padding: 5px;border-radius: 4px'>${this.checkers[j].name}</div>`, //设置文本标注内容
750
+ direction: 'bottom', //设置文本标注方位
751
+ offset:new AMap.Pixel(0, -4)
752
+ },
753
+ extData:this.checkers[j]
754
+ })
755
+ this.chekckOps.addOverlay(marker)
756
+ if(this.checkers[j].f_longitude && this.checkers[j].f_longitude!='0'){
757
+ let marker=new AMap.Marker({
758
+ //map: that.map,
759
+ offset:new AMap.Pixel(-18, -10),
760
+ position: [this.checkers[j].f_longitude,this.checkers[j].f_latitude],
761
+ icon:new AMap.Icon({
762
+ image: '/images/anjianyuan.png', //人员图标URL
763
+ imageOffset: new AMap.Pixel(0, 0), // 图标偏移位置
764
+ imageSize: new AMap.Size(36, 36) //图标大小
765
+ }),
766
+ label:{
767
+ //offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
768
+ content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;padding: 5px;border-radius: 4px'>${this.checkers[j].name}</div>`, //设置文本标注内容
769
+ direction: 'bottom', //设置文本标注方位
770
+ offset:new AMap.Pixel(0, -4)
771
+ },
772
+ extData:this.checkers[j]
773
+ })
774
+ this.chekckOps.addOverlay(marker)
775
+ }
776
+
777
+ }
778
+ this.chekckOps.setMap(this.map)
779
+ this.chekckOps.on('click',function (e) {
780
+ let pe=e.target.getExtData()
781
+ let checkAddress=pe.address || '未获取到实时位置'
782
+ that.geocoder.getAddress([pe.f_longitude,pe.f_latitude], function(status, result) {
783
+ if (status === 'complete'&& result.regeocode) {
784
+ checkAddress = result.regeocode.formattedAddress;
785
+ }/*else{
786
+ log.error('根据经纬度查询地址失败')
787
+ }*/
788
+ pe.checkAddress=checkAddress
789
+ let defectContent=that.getCheckerContent(pe)
790
+ that.infoWindow.setContent(defectContent)
791
+ that.infoWindow.open(that.map, [pe.f_longitude,pe.f_latitude])
792
+ })
793
+ })
794
+ /*AMap.event.addListener(this.ops, 'click', function (e) {
795
+ //tag)
796
+ //that.infoWindow.open(that.map, marker.getPosition());
797
+ })*/
798
+ },
799
+ //获取当前时间的前两个小时
800
+ getNowFormatDate(house=0) {
801
+ //tag
802
+ let date = new Date();
803
+ let seperator1 = "-";
804
+ let seperator2 = ":";
805
+ if(house != 0){
806
+ date.setHours(date.getHours()-house)
807
+ }
808
+ let month = date.getMonth() + 1;
809
+ let strDate = date.getDate();
810
+ let hour = date.getHours();
811
+ let min = date.getMinutes();
812
+ let second = date.getSeconds();
813
+ if (month >= 1 && month <= 9) {
814
+ month = "0" + month;
815
+ }
816
+ if (strDate >= 0 && strDate <= 9) {
817
+ strDate = "0" + strDate;
818
+ }
819
+ if (hour >= 0 && hour <= 9) {
820
+ hour = "0" + hour;
821
+ }
822
+ if (min >= 0 && min <= 9) {
823
+ min = "0" + min;
824
+ }
825
+ if (second >= 0 && second <= 9) {
826
+ second = "0" + second;
827
+ }
828
+ let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
829
+ + " " + hour + seperator2 + min
830
+ + seperator2 + second;
831
+ return currentdate;
832
+ },
833
+ toStandardTimeString() {
834
+ let dt = new Date()
835
+ let month = dt.getMonth()+1
836
+ let date = dt.getDate()
837
+ let hour = dt.getHours()
838
+ let min = dt.getMinutes()
839
+ let sec = dt.getSeconds()
840
+ return dt.getFullYear() + '-' + (month<10? '0'+ month : month) + '-' + (date<10? '0'+ date : date)
841
+ + ' ' + (hour<10? '0'+ hour : hour)
842
+ },
843
+ async safeRefresh(){
844
+ //tag
845
+ //获取所有安检员的点位集合-----测试数据
846
+ /*this.checkers=[]
847
+ this.checkers.push({f_longitude:114.7318,f_latitude:33.567126,name:"hwq1",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
848
+ this.checkers.push({f_longitude:114.726801,f_latitude:33.566912,name:"hwq2",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
849
+ this.checkers.push({f_longitude:114.723346,f_latitude:33.568932,name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
850
+ this.checkers.push({f_longitude:114.711741,f_latitude:33.585519,name:"hwq4",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
851
+ this.checkers.push({f_longitude:114.756716,f_latitude:33.594528,name:"hwq5",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
852
+ this.defectList.rows=[]
853
+ this.defectList.rows.push({"f_longitude":114.661358,"f_latitude":33.596897,"f_checker_name":"hwq2","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
854
+ this.defectList.rows.push({"f_longitude":114.659985,"f_latitude":33.62892,"f_checker_name":"hwq3","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
855
+ this.defectList.rows.push({"f_longitude":114.634579,"f_latitude":33.616627,"f_checker_name":"hwq4","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
856
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
857
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
858
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
859
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
860
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
861
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
862
+ this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})*/
863
+ await this.getNewData()
864
+ this.assemblyData()
865
+ }
866
+ },
867
+ computed:{
868
+
869
+ },
870
+ destroyed(){
871
+ window.clearInterval(this.intervalNum)
872
+ }
873
+ }
874
+
875
+ </script>
876
+
877
+ <style lang="less" scoped>
878
+
879
+ .safe_checkbox_sty{
880
+ vertical-align:text-bottom;
881
+ margin-right: 3px;
882
+
883
+ }
884
+ .safe_ul_sty{
885
+ list-style-type: none;
886
+ font-size: 13px;
887
+ padding-left: 5px;
888
+ }
889
+ .safe_li_sty{
890
+ font-size: 13px;
891
+ margin-top: 5px;
892
+ }
893
+ .safe_p{
894
+ white-space: nowrap;
895
+ overflow: hidden;
896
+ text-overflow: ellipsis;
897
+ margin: 0 0 0 10px;
898
+
899
+ font-size: 12px;
900
+ }
901
+ .safe_list_li{
902
+ margin-top: 5px;
903
+ background-color: #ffffff;
904
+ border: solid 1px #f0f4fa !important;
905
+ color: #666666 !important;
906
+ font-size: 1.3rem !important;
907
+ font-family: PINGFANG-MEDIUM !important;
908
+ padding: 8px;
909
+ }
910
+ .safe_list_li:hover{
911
+ background-color: rgb(203,234,241);
912
+ }
913
+ .safe_deimg{
914
+ vertical-align: text-bottom;
915
+ width: 15px;
916
+ margin-right: 3px;
917
+ }
918
+ </style>
919
+
920
+