Commit 96338789b313b2df59f5b4590f8fc30c7d1ae090

Authored by 潘钊
1 parent 1dbcf057

update

Showing 35 changed files with 1598 additions and 437 deletions
src/main/java/com/bsth/ServiceStateTest.java 0 → 100644
  1 +package com.bsth;
  2 +
  3 +public class ServiceStateTest {
  4 +
  5 + public static void main(String[] args) {
  6 + System.out.println("运营状态:" + getService(33554432));
  7 + System.out.println("上下行:" + getUpOrDown(33554432));
  8 + }
  9 +
  10 + /**
  11 + * 获取运营状态
  12 + *
  13 + * @return -1无效 0运营 1未运营
  14 + */
  15 + public static byte getService(long serviceState) {
  16 + if ((serviceState & 0x00020000) == 0x00020000 || (serviceState & 0x80000000) == 0x80000000)
  17 + return -1;
  18 + return (byte) (((serviceState & 0x02000000) == 0x02000000) ? 1 : 0);
  19 + }
  20 +
  21 + /**
  22 + * 王通 2016/6/29 9:23:24 获取车辆线路上下行
  23 + *
  24 + * @return -1无效 0上行 1下行
  25 + */
  26 + public static byte getUpOrDown(long serviceState) {
  27 + if ((serviceState & 0x00020000) == 0x00020000 || (serviceState & 0x80000000) == 0x80000000
  28 + || (serviceState & 0x01000000) == 0x01000000 || (serviceState & 0x08000000) == 0x08000000)
  29 + return -1;
  30 + return (byte) (((serviceState & 0x10000000) == 0x10000000) ? 1 : 0);
  31 + }
  32 +}
... ...
src/main/java/com/bsth/util/DateUtils.java
... ... @@ -14,6 +14,16 @@ public class DateUtils {
14 14 return (int) (cal.getTimeInMillis() / 1000);
15 15 }
16 16  
  17 + // 获得当天0点毫秒时间戳
  18 + public static long getTimestamp() {
  19 + Calendar cal = Calendar.getInstance();
  20 + cal.set(Calendar.HOUR_OF_DAY, 0);
  21 + cal.set(Calendar.SECOND, 0);
  22 + cal.set(Calendar.MINUTE, 0);
  23 + cal.set(Calendar.MILLISECOND, 0);
  24 + return cal.getTimeInMillis();
  25 + }
  26 +
17 27 public static Long getTimesmorning(Calendar cal) {
18 28 cal.set(Calendar.HOUR_OF_DAY, 0);
19 29 cal.set(Calendar.SECOND, 0);
... ...
src/main/java/com/bsth/util/TransGPS.java
... ... @@ -118,4 +118,14 @@ public class TransGPS {
118 118 double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
119 119 return LocationMake(z * Math.cos(theta), z * Math.sin(theta));
120 120 }
  121 +
  122 +/* public static void main(String[] args) {
  123 + Location loc = LocationMake(121.359627, 31.030046);
  124 +
  125 + loc = transformFromWGSToGCJ(loc);
  126 +
  127 + loc = bd_encrypt(loc);
  128 + System.out.println(loc.lng);
  129 + System.out.println(loc.lat);
  130 + }*/
121 131 }
... ...
src/main/java/com/bsth/vehicle/directive/controller/DirectiveController.java
... ... @@ -4,6 +4,10 @@ import java.util.List;
4 4 import java.util.Map;
5 5  
6 6 import org.springframework.beans.factory.annotation.Autowired;
  7 +import org.springframework.data.domain.Page;
  8 +import org.springframework.data.domain.PageRequest;
  9 +import org.springframework.data.domain.Sort;
  10 +import org.springframework.data.domain.Sort.Direction;
7 11 import org.springframework.web.bind.annotation.RequestMapping;
8 12 import org.springframework.web.bind.annotation.RequestMethod;
9 13 import org.springframework.web.bind.annotation.RequestParam;
... ... @@ -11,6 +15,7 @@ import org.springframework.web.bind.annotation.RestController;
11 15  
12 16 import com.bsth.entity.sys.SysUser;
13 17 import com.bsth.security.util.SecurityUtils;
  18 +import com.bsth.util.DateUtils;
14 19 import com.bsth.vehicle.directive.entity.Directive80;
15 20 import com.bsth.vehicle.directive.service.DirectiveService;
16 21  
... ... @@ -93,6 +98,14 @@ public class DirectiveController {
93 98 return directiveService.findNoCofm80(lineCodes);
94 99 }
95 100  
  101 + @RequestMapping(value = "/findAll80", method = RequestMethod.GET)
  102 + public Page<Directive80> findAll80(@RequestParam Map<String, Object> map,
  103 + @RequestParam(defaultValue = "0") int page,
  104 + @RequestParam(defaultValue = "12") int size){
  105 +
  106 + return directiveService.findAll80(map, new PageRequest(page, size, new Sort(Direction.DESC, "timestamp")));
  107 + }
  108 +
96 109 /**
97 110 *
98 111 * @Title: reply80
... ...
src/main/java/com/bsth/vehicle/directive/entity/Directive80.java
1 1 package com.bsth.vehicle.directive.entity;
2 2  
  3 +import java.util.Date;
  4 +
3 5 import javax.persistence.CascadeType;
4 6 import javax.persistence.Embeddable;
5 7 import javax.persistence.Entity;
... ... @@ -60,9 +62,15 @@ public class Directive80 {
60 62 /** 调度员是否确认 */
61 63 private boolean confirm;
62 64  
  65 + /** 处理人 */
  66 + private String handleUser;
  67 +
63 68 /** 处理结果 0:同意 -1:不同意 */
64 69 private int confirmRs;
65   -
  70 +
  71 + /** 处理时间 */
  72 + private Date handleTime;
  73 +
66 74 @Embeddable
67 75 public static class DriverReportData {
68 76  
... ... @@ -120,6 +128,9 @@ public class Directive80 {
120 128 this.nbbm = nbbm;
121 129 }
122 130 }
  131 +
  132 + @Transient
  133 + private String timeStr;
123 134  
124 135 public Integer getId() {
125 136 return id;
... ... @@ -184,4 +195,28 @@ public class Directive80 {
184 195 public void setConfirmRs(int confirmRs) {
185 196 this.confirmRs = confirmRs;
186 197 }
  198 +
  199 + public String getHandleUser() {
  200 + return handleUser;
  201 + }
  202 +
  203 + public void setHandleUser(String handleUser) {
  204 + this.handleUser = handleUser;
  205 + }
  206 +
  207 + public String getTimeStr() {
  208 + return timeStr;
  209 + }
  210 +
  211 + public void setTimeStr(String timeStr) {
  212 + this.timeStr = timeStr;
  213 + }
  214 +
  215 + public Date getHandleTime() {
  216 + return handleTime;
  217 + }
  218 +
  219 + public void setHandleTime(Date handleTime) {
  220 + this.handleTime = handleTime;
  221 + }
187 222 }
... ...
src/main/java/com/bsth/vehicle/directive/service/DirectiveService.java
... ... @@ -4,6 +4,9 @@ package com.bsth.vehicle.directive.service;
4 4 import java.util.List;
5 5 import java.util.Map;
6 6  
  7 +import org.springframework.data.domain.Page;
  8 +import org.springframework.data.domain.PageRequest;
  9 +
7 10 import com.bsth.entity.realcontrol.ScheduleRealInfo;
8 11 import com.bsth.service.BaseService;
9 12 import com.bsth.vehicle.directive.entity.Directive60;
... ... @@ -77,4 +80,6 @@ public interface DirectiveService extends BaseService&lt;Directive60, Integer&gt;{
77 80 Map<String, Object> reply80(int id, int reply);
78 81  
79 82 Map<String, Object> findDirective(String nbbm, int dType, int page, int size);
  83 +
  84 + Page<Directive80> findAll80(Map<String, Object> map, PageRequest pageRequest);
80 85 }
... ...
src/main/java/com/bsth/vehicle/directive/service/DirectiveServiceImpl.java
... ... @@ -12,14 +12,20 @@ import org.apache.commons.lang3.StringUtils;
12 12 import org.slf4j.Logger;
13 13 import org.slf4j.LoggerFactory;
14 14 import org.springframework.beans.factory.annotation.Autowired;
  15 +import org.springframework.data.domain.Page;
  16 +import org.springframework.data.domain.PageRequest;
15 17 import org.springframework.stereotype.Service;
16 18  
17 19 import com.alibaba.fastjson.JSON;
18 20 import com.alibaba.fastjson.JSONObject;
19 21 import com.bsth.common.ResponseCode;
20 22 import com.bsth.entity.realcontrol.ScheduleRealInfo;
  23 +import com.bsth.entity.search.CustomerSpecs;
  24 +import com.bsth.entity.sys.SysUser;
  25 +import com.bsth.security.util.SecurityUtils;
21 26 import com.bsth.service.impl.BaseServiceImpl;
22 27 import com.bsth.service.realcontrol.buffer.ScheduleBuffer;
  28 +import com.bsth.util.DateUtils;
23 29 import com.bsth.vehicle.common.CommonMapped;
24 30 import com.bsth.vehicle.directive.buffer.DirectiveBuffer;
25 31 import com.bsth.vehicle.directive.entity.Directive;
... ... @@ -342,8 +348,12 @@ public class DirectiveServiceImpl extends BaseServiceImpl&lt;Directive60, Integer&gt;
342 348 rs.put("status", ResponseCode.ERROR);
343 349 rs.put("msg", "该数据已经被处理了!");
344 350 } else {
  351 + SysUser user = SecurityUtils.getCurrentUser();
  352 +
345 353 d80.setConfirm(true);
  354 + d80.setHandleUser(user.getUserName());
346 355 d80.setConfirmRs(reply);
  356 + d80.setHandleTime(new Date());
347 357 // 封装C0数据包并回复设备
348 358 DirectiveC0 c0 = new DirectiveC0();
349 359 c0.setDeviceId(d80.getDeviceId());
... ... @@ -440,4 +450,24 @@ public class DirectiveServiceImpl extends BaseServiceImpl&lt;Directive60, Integer&gt;
440 450 rsMap.put("page", page);
441 451 return rsMap;
442 452 }
  453 +
  454 + @Override
  455 + public Page<Directive80> findAll80(Map<String, Object> map, PageRequest pageRequest) {
  456 + //默认只查看当天的
  457 + map.put("timestamp_gt", DateUtils.getTimestamp());
  458 +
  459 + Object nbbm = map.get("nbbm");
  460 + if(null != nbbm && StringUtils.isNotBlank(nbbm.toString())){
  461 + map.put("deviceId_eq", CommonMapped.vehicDeviceBiMap.inverse().get(nbbm.toString()));
  462 + }
  463 +
  464 + Page<Directive80> pageData = d80Repository.findAll(new CustomerSpecs<Directive80>(map), pageRequest);
  465 + //格式化时间和转换车辆自编号
  466 + List<Directive80> list = pageData.getContent();
  467 + for(Directive80 d80 : list){
  468 + d80.setTimeStr(sdfHHmm2.format(new Date(d80.getTimestamp())));
  469 + d80.getData().setNbbm(CommonMapped.vehicDeviceBiMap.get(d80.getDeviceId()));
  470 + }
  471 + return pageData;
  472 + }
443 473 }
... ...
src/main/java/com/bsth/vehicle/gpsdata/buffer/GpsRealDataBuffer.java
... ... @@ -163,31 +163,39 @@ public class GpsRealDataBuffer {
163 163 gpsData.setNextSchId(next.getId());
164 164  
165 165 }
166   - /*if(null == current){
167   - next = ScheduleBuffer.getFirst(nbbm);
168   - }
169   - else
170   - next = ScheduleBuffer.getNext(current);*/
171   -
172   - /*if(current != null)
173   - gpsData.setCurrSchId(current.getId());
174   - if(next != null)
175   - gpsData.setNextSchId(next.getId());*/
176   - //gpsData.setCurrSchId(ScheduleBuffer.findCurrent(nbbm));
177   - /*subList = ScheduleBuffer.vehSchListMap.get(nbbm);
178   - if(subList.size() == 0)
179   - continue;*/
  166 + resList.add(gpsData);
  167 + }
  168 + }
  169 + return resList;
  170 + }
  171 +
  172 +
  173 + public List<GpsRealData> getOnlineListByLineCode(Integer lineCode){
  174 + List<GpsRealData> list = lineGpsMultimap.get(lineCode)
  175 + ,resList = new ArrayList<>();
  176 +
  177 + //写入车辆自编号
  178 + String nbbm;
  179 + ScheduleRealInfo current, next;
  180 + for(GpsRealData gpsData : list){
  181 + if(!gpsData.isOnline())
  182 + continue;
  183 +
  184 + nbbm = CommonMapped.vehicDeviceBiMap.get(gpsData.getDeviceId());
  185 + if(null != nbbm){
  186 + gpsData.setNbbm(nbbm);
  187 + gpsData.setStationName(CommonMapped.stationCodeMap.get(gpsData.getStopNo()));
180 188  
  189 + current = ScheduleBuffer.findCurrent(nbbm);
181 190  
182   - /*linkedList = ScheduleBuffer.vehLinkedMap.get(nbbm);
183   - if(null != linkedList){
184   - //为GPS点附加班次信息
185   - size = linkedList.size();
186   - if(size > 0)
187   - gpsData.setCurrSchId(linkedList.peekFirst().getId());
188   - if(size > 1)
189   - gpsData.setNextSchId(linkedList.get(1).getId());
190   - }*/
  191 + if(null != current){
  192 + gpsData.setCurrSchId(current.getId());
  193 +
  194 + next = ScheduleBuffer.getNext(current);
  195 + if(next != null)
  196 + gpsData.setNextSchId(next.getId());
  197 +
  198 + }
191 199 resList.add(gpsData);
192 200 }
193 201 }
... ... @@ -208,7 +216,7 @@ public class GpsRealDataBuffer {
208 216 Integer code;
209 217 while(iterator.hasNext()){
210 218 code = Integer.parseInt(iterator.next());
211   - list.addAll(getListByLineCode(code));
  219 + list.addAll(getOnlineListByLineCode(code));
212 220 }
213 221  
214 222 return list;
... ...
src/main/java/com/bsth/vehicle/gpsdata/controller/GpsDataController.java
... ... @@ -9,6 +9,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
9 9 import org.springframework.web.bind.annotation.RequestParam;
10 10 import org.springframework.web.bind.annotation.RestController;
11 11  
  12 +import com.bsth.vehicle.common.CommonMapped;
12 13 import com.bsth.vehicle.gpsdata.buffer.ArrivalDataBuffer;
13 14 import com.bsth.vehicle.gpsdata.buffer.GpsRealDataBuffer;
14 15 import com.bsth.vehicle.gpsdata.entity.ArrivalInfo;
... ... @@ -62,4 +63,9 @@ public class GpsDataController {
62 63 public List<ArrivalInfo> ramData(@RequestParam String nbbm){
63 64 return ArrivalDataBuffer.allMap.get(nbbm);
64 65 }
  66 +
  67 + @RequestMapping(value = "/Car2DeviceId")
  68 + public Map<String, String> findCarDeviceIdMap(){
  69 + return CommonMapped.vehicDeviceBiMap.inverse();
  70 + }
65 71 }
... ...
src/main/java/com/bsth/vehicle/gpsdata/service/GpsDataServiceImpl.java
... ... @@ -212,15 +212,16 @@ public class GpsDataServiceImpl implements GpsDataService{
212 212 lat = rs.getFloat("LAT");
213 213 //高德坐标
214 214 gdLoc = TransGPS.transformFromWGSToGCJ(TransGPS.LocationMake(lon, lat));
215   - map.put("gd_lon", gdLoc.getLng());
216   - map.put("gd_lat", gdLoc.getLat());
  215 + map.put("gcj_lon", gdLoc.getLng());
  216 + map.put("gcj_lat", gdLoc.getLat());
217 217 //百度坐标
218 218 bdLoc = TransGPS.bd_encrypt(gdLoc);
219 219 map.put("bd_lon", bdLoc.getLng());
220 220 map.put("bd_lat", bdLoc.getLat());
221 221  
222   - map.put("device", rs.getString("DEVICE_ID"));
  222 + map.put("deviceId", rs.getString("DEVICE_ID"));
223 223 map.put("ts", rs.getLong("TS"));
  224 + map.put("timestamp", rs.getLong("TS"));
224 225 map.put("stopNo", rs.getString("STOP_NO"));
225 226  
226 227 inOutStop = rs.getInt("INOUT_STOP");
... ...
src/main/java/com/bsth/websocket/handler/RealControlSocketHandler.java
... ... @@ -15,7 +15,6 @@ import com.bsth.common.Constants;
15 15 import com.bsth.vehicle.common.CommonMapped;
16 16  
17 17 /**
18   - * 驾驶员上报80指令推送
19 18 * 注意:在sendMsg时,多线程状态下有几率出现连接状态脏读,建议 synchronized
20 19 * @author PanZhao
21 20 */
... ...
src/main/resources/static/assets/js/TransGPS.js 0 → 100644
  1 +/** GCJ WGS BD 等坐标转换算法,从 TransGPS.java 代码转换而来*/
  2 +var TransGPS = (function(){
  3 + var pi = 3.14159265358979324
  4 + ,a = 6378245.0
  5 + ,ee = 0.00669342162296594323;
  6 +
  7 +
  8 + function outOfChina(lat, lon){
  9 + if (lon < 72.004 || lon > 137.8347)
  10 + return 1;
  11 + if (lat < 0.8293 || lat > 55.8271)
  12 + return 1;
  13 + return 0;
  14 + }
  15 +
  16 + function transformLat(x, y){
  17 + var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(x > 0 ? x : -x);
  18 + ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
  19 + ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
  20 + ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
  21 + return ret;
  22 + }
  23 +
  24 + function transformLon(x, y){
  25 + var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(x > 0 ? x : -x);
  26 + ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
  27 + ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
  28 + ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
  29 + return ret;
  30 + }
  31 +
  32 + function transformFromWGSToGCJ(lat, lng){
  33 + var mgLoc = {};
  34 + if(1 == outOfChina(lat, lng)){
  35 + mgLoc = {lat: lat, lng: lng};
  36 + return mgLoc;
  37 + }
  38 +
  39 + var dLat = transformLat(lng - 105.0, lat - 35.0);
  40 + var dLon = transformLon(lng - 105.0, lat - 35.0);
  41 + var radLat = lat / 180.0 * pi;
  42 + var magic = Math.sin(radLat);
  43 + magic = 1 - ee * magic * magic;
  44 +
  45 + var sqrtMagic = Math.sqrt(magic);
  46 +
  47 + dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
  48 + dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
  49 +
  50 + mgLoc['lat'] = lat + dLat;
  51 + mgLoc['lng'] = lng + dLon;
  52 +
  53 + return mgLoc;
  54 + }
  55 +
  56 + function transformFromGCJToWGS(lat, lng){
  57 + var wgLoc = {lat: lat, lng: lng}
  58 + ,currGcLoc = {}, dLoc = {};
  59 +
  60 + while (true) {
  61 + currGcLoc = transformFromWGSToGCJ(lat, lng);
  62 + dLoc.lat = lat - currGcLoc.lat;
  63 + dLoc.lng = lng - currGcLoc.lng;
  64 + if (Math.abs(dLoc.lat) < 1e-7 && Math.abs(dLoc.lng) < 1e-7) {
  65 + return wgLoc;
  66 + }
  67 + wgLoc.lat += dLoc.lat;
  68 + wgLoc.lng += dLoc.lng;
  69 + }
  70 + }
  71 +
  72 + var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  73 +
  74 + function bd_encrypt(lat, lng){
  75 + var x = lng, y = lat;
  76 + var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
  77 + var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
  78 +
  79 + return {lng: z * Math.cos(theta) + 0.0065, lat: z * Math.sin(theta) + 0.006};
  80 + }
  81 +
  82 + function bd_decrypt(lat, lng){
  83 + var x = bdLoc.lng - 0.0065, y = bdLoc.lat - 0.006;
  84 + var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  85 + var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  86 +
  87 + return {lng: z * Math.cos(theta), lat: z * Math.sin(theta)};
  88 + }
  89 +
  90 + var transGPS = {
  91 + wgsToBD: function(lat, lng){
  92 + var gcj = transformFromWGSToGCJ(lat, lng);
  93 + return bd_encrypt(gcj.lat, gcj.lng);
  94 + },
  95 + transformFromWGSToGCJ: transformFromWGSToGCJ
  96 + }
  97 +
  98 + return transGPS;
  99 +})();
0 100 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/child_pages/deviceReport.html
1   -<div id="historyMessagePanel" style="margin: 15px 0 0 0;">
  1 +<div id="deviceReportPanel" style="margin: 15px 0 0 0;">
2 2 <h4 style="padding: 5px 0 10px 15px;margin: 0;"><i class="fa fa-code-fork"></i> 设备请求上报记录</h4>
3 3 <form class="form-inline" >
4 4 <div class="form-group" style="margin: 18px;">
... ... @@ -29,9 +29,9 @@
29 29 <table class="table table-hover" style="table-layout: fixed;">
30 30 <thead>
31 31 <tr>
32   - <th width="9%" style="text-align: center;">位置</th>
33   - <th width="9%">时间</th>
  32 + <th width="9%">线路</th>
34 33 <th width="11%">车辆</th>
  34 + <th width="9%">时间</th>
35 35 <th width="24%">请求代码</th>
36 36 <th width="10%">处理人</th>
37 37 <th width="10%">处理时间</th>
... ... @@ -39,60 +39,6 @@
39 39 </tr>
40 40 </thead>
41 41 <tbody>
42   - <tr>
43   - <td width="7%" style="text-align: center;">位置</td>
44   - <td>05:30</td>
45   - <td>B-92875</td>
46   - <td>请求出场</td>
47   - <td>mh001</td>
48   - <td>05:31</td>
49   - <td><span class="label label-sm label-success"> 同意</span></td>
50   - </tr>
51   - <tr>
52   - <td width="7%" style="text-align: center;">位置</td>
53   - <td>05:30</td>
54   - <td>B-92875</td>
55   - <td>请求出场</td>
56   - <td>mh001</td>
57   - <td>05:31</td>
58   - <td><span class="label label-sm label-success"> 同意</span></td>
59   - </tr>
60   - <tr>
61   - <td width="7%" style="text-align: center;">位置</td>
62   - <td>05:30</td>
63   - <td>B-92875</td>
64   - <td>请求出场</td>
65   - <td>mh001</td>
66   - <td>05:31</td>
67   - <td><span class="label label-sm label-success"> 同意</span></td>
68   - </tr>
69   - <tr>
70   - <td width="7%" style="text-align: center;">位置</td>
71   - <td>05:30</td>
72   - <td>B-92875</td>
73   - <td>请求出场</td>
74   - <td>mh001</td>
75   - <td>05:31</td>
76   - <td><span class="label label-sm label-success"> 同意</span></td>
77   - </tr>
78   - <tr>
79   - <td width="7%" style="text-align: center;">位置</td>
80   - <td>05:30</td>
81   - <td>B-92875</td>
82   - <td>请求出场</td>
83   - <td>mh001</td>
84   - <td>05:31</td>
85   - <td><span class="label label-sm label-success"> 同意</span></td>
86   - </tr>
87   - <tr>
88   - <td width="7%" style="text-align: center;">位置</td>
89   - <td>05:30</td>
90   - <td>B-92875</td>
91   - <td>请求出场</td>
92   - <td>mh001</td>
93   - <td>05:31</td>
94   - <td><span class="label label-sm label-success"> 同意</span></td>
95   - </tr>
96 42 </tbody>
97 43 </table>
98 44 </div>
... ... @@ -100,38 +46,107 @@
100 46 <ul id="pagination" class="pagination"></ul>
101 47 </div>
102 48 </div>
103   -<script id="history_directive_list_temp" type="text/html">
104   -{{each list as item i}}
  49 +<script id="device_report_list_temp" type="text/html">
  50 +{{each content as item i}}
105 51 <tr>
106   - <td>{{item.timeHHmm}}</td>
107   - <td>{{item.nbbm}}</td>
108   - <td>
109   - <div class="text-furl">
110   - {{item.data.txtContent}}
111   - </div>
  52 + <td width="7%" >
  53 + {{item.lineName}}
112 54 </td>
113   - <td>{{item.sender}}</td>
  55 + <td>{{item.data.nbbm}}</td>
  56 + <td>{{item.timeStr}}</td>
  57 + <td>{{item.text}}</td>
114 58 <td>
115   - {{if item.errorText != null}}
116   - <span class="label label-sm label-danger">{{item.errorText}}</span>
117   - {{else}}
118   - {{if item.reply46 != 0}}
119   - <span class="label label-sm label-danger">设备无响应</span>
120   - {{else if item.reply47 != 0}}
121   - <span class="label label-sm label-warning">驾驶员未确认</span>
122   - {{/if}}
123   -
124   - {{if item.reply46 == 0 && item.reply47 == 0}}
125   - <span class="label label-sm label-success"> 成功</span>
  59 + {{if item.handleUser == null}}
  60 + {{if item.c0 != null}}
  61 + 系统
126 62 {{/if}}
  63 + {{else}}
  64 + {{item.handleUser}}
127 65 {{/if}}
128 66 </td>
  67 +
  68 + {{if item.c0 != null && item.c0.data != null}}
  69 + <td>{{item.c0.timeStr}}</td>
  70 + <td>
  71 + {{if item.c0.data.requestAck==6 }}
  72 + <span class="label label-sm label-success"> 同意</span>
  73 + {{else if item.c0.data.requestAck==21 }}
  74 + <span class="label label-sm label-danger"> 不同意</span>
  75 + {{/if}}
  76 + </td>
  77 +
  78 + {{else}}
  79 + <td></td>
  80 + <td><span class="label label-sm label-warning"> 未处理</span></td>
  81 + {{/if}}
129 82 </tr>
130 83 {{/each}}
131 84 </script>
132 85  
133 86 <script>
134 87 !function(){
135   -
  88 + var page=0,pSize=12
  89 + ,$form = $('#deviceReportPanel form')
  90 + ,$car = $('#deviceReportPanel #carSelect')
  91 + ,$table = $('#deviceReportPanel table');
  92 +
  93 + var lineNameMap = JSON.parse(storage.getItem('lineIds'));
  94 + //初始加载数据
  95 + jsDoQuery(true);
  96 +
  97 + //车辆搜索框
  98 + createVehSearch($car).on('change', function(){
  99 + page = 0;
  100 + jsDoQuery(true);
  101 + });
  102 +
  103 + function jsDoQuery(pagination){
  104 + var params = $form.serializeJSON();
  105 + params.page = page;
  106 + params.size = pSize;
  107 +
  108 + $.get('/directive/findAll80', params, function(rs){
  109 + //命令字转中文
  110 + $.each(rs.content, function(){
  111 + this.text = reqCodeMap[this.data.requestCode];
  112 + if(this.c0)
  113 + this.c0.timeStr = moment(this.c0.timestamp).format('HH:mm');
  114 + //线路名转换
  115 + this.lineName = lineNameMap[this.data.lineId];
  116 + });
  117 +
  118 + var htmlStr = template('device_report_list_temp', rs);
  119 + $table.find('tbody').html(htmlStr);
  120 +
  121 + if(pagination){
  122 + showPagination(rs, true);
  123 + }
  124 + });
  125 + }
  126 +
  127 + function showPagination(data, noQuery){
  128 + if(data.totalPages == 0)
  129 + return;
  130 + //分页
  131 + $('#pagination').jqPaginator({
  132 + totalPages: data.totalPages,
  133 + visiblePages: 6,
  134 + currentPage: page + 1,
  135 + first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
  136 + prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
  137 + next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
  138 + last: '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
  139 + page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
  140 + onPageChange: function (num, type) {
  141 + if(noQuery){
  142 + noQuery = false;
  143 + return;
  144 + }
  145 +
  146 + page = num - 1;
  147 + jsDoQuery();
  148 + }
  149 + });
  150 + }
136 151 }();
137 152 </script>
138 153 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/child_pages/ttsConfigure.html 0 → 100644
  1 +<div id="ttsConfigurePanel" style="margin: 15px;">
  2 + <h4 style="padding: 5px 0 10px 15px;margin: 0;"><i class="fa fa-volume-down"></i> TTS 语音设置</h4>
  3 + <br>
  4 + <div class="alert" style=" border-bottom: 1px solid #eeeeee;">
  5 + 设置变更将会保存在本地客户端,清理缓存和更换电脑会重置. </div>
  6 + <form class="form-horizontal" role="form">
  7 + <div class="form-body">
  8 + <div class="form-group">
  9 + <label class="col-md-3 control-label">发音速度</label>
  10 + <div class="col-md-9">
  11 + <input type="number" name="rate" class="form-control input-inline input-medium" min="0.1" max="10">
  12 + <span class="help-inline"> 1 ~ 10 </span>
  13 + </div>
  14 + </div>
  15 + <div class="form-group">
  16 + <label class="col-md-3 control-label">队列</label>
  17 + <div class="col-md-9">
  18 + <select class="form-control input-inline input-medium" name="queueModel">
  19 + <option value="1">总是最新</option>
  20 + <option value="-1">按顺序完整播放</option>
  21 + </select>
  22 + <span class="help-block"> </span>
  23 + </div>
  24 + </div>
  25 + <hr>
  26 +
  27 + <div class="well">
  28 + <span id="ttsText">我能吞下玻璃而不伤身体 </span>
  29 + &nbsp;<button type="button" class="btn red-sunglo btn-sm" id="ttsPlay"> <i class="fa fa-volume-down"></i> &nbsp;播放 </button></div>
  30 + </div>
  31 + <div class="form-actions">
  32 + <div class="row">
  33 + <div class="col-md-12" style="text-align: center;">
  34 + <button type="button" class="btn blue-madison saveCofig"> <i class="fa fa-check"></i> 保存修改 </button>
  35 + </div>
  36 + </div>
  37 + </div>
  38 + </form>
  39 +</div>
  40 +<script>
  41 +!function(){
  42 + var ttsPlay = $('#ttsConfigurePanel #ttsPlay')
  43 + ,text = $('#ttsConfigurePanel #ttsText').text()
  44 + ,queueModel = $('#ttsConfigurePanel select[name=queueModel]')
  45 + ,rate = $('#ttsConfigurePanel input[name=rate]')
  46 + ,saveButton = $('#ttsConfigurePanel button.saveCofig');
  47 +
  48 + ttsPlay.on('click', function(){
  49 + h5Speech.speakTest(text, rate.val());
  50 + });
  51 +
  52 + queueModel.on('change', function(){
  53 + var t = $(this).val()
  54 + help = $(this).next();
  55 + if(t == 1){
  56 + help.text('有新的语音播报时,强制中断未结束的语音');
  57 + }
  58 + else{
  59 + help.text('按照队列顺序依次完整播报');
  60 + }
  61 + });
  62 +
  63 + saveButton.on('click', function(){
  64 + if(!rate.val()){
  65 + layer.msg('发音速度不能不空!');
  66 + return;
  67 + }
  68 +
  69 + var code = h5Speech.setCofig(rate.val(), queueModel.val());
  70 + if(code == 1)
  71 + layer.msg('修改成功!');
  72 + });
  73 +
  74 + //初始化
  75 + var ttsConfig = h5Speech.getCofig();
  76 + console.log('ttsConfig', ttsConfig);
  77 + rate.val(ttsConfig.rate);
  78 + queueModel.val(ttsConfig.queueModel).trigger('change');
  79 +}();
  80 +</script>
0 81 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/css/lineControl.css
... ... @@ -661,10 +661,10 @@ g.park text{
661 661 border-bottom: 1px solid #545C7B;
662 662 border-radius: 0 0 4px 4px !important;
663 663 }
664   -
  664 +/*
665 665 #tab_map .mapRightWrap.vehicle .vehicle-item div.text{
666 666 color: #C5C4C4;
667   -}
  667 +} */
668 668  
669 669 #tab_map .mapRightWrap.vehicle .vehicle-item div.icon{
670 670 color: #ccc;
... ... @@ -672,7 +672,7 @@ g.park text{
672 672 #tab_map .mapRightWrap.vehicle .vehicle-item.offline div.text span i,
673 673 #tab_map .mapRightWrap.vehicle .vehicle-item.offline div.text span,
674 674 #tab_map .mapRightWrap.vehicle .vehicle-item.offline div.text{
675   - color: #FF858E;
  675 + color: #aca7a7;
676 676 }
677 677 #tab_map .mapRightWrap.search .input-group .input-group-btn button {
678 678 color: #CDD3D7;
... ... @@ -710,25 +710,26 @@ g.park text{
710 710 #tab_map .mapRightWrap.gaode.vehicle .vehicle-item{
711 711 background: #fdfdfd;
712 712 color: #2D2929;
  713 + border-bottom: 1px solid #ccd4f3;
713 714 }
714 715 #tab_map .mapRightWrap.gaode.vehicle .vehicle-item div.text {
715 716 color: #999;
716 717 }
717   -#tab_map .mapRightWrap.gaode.vehicle .vehicle-item div.text span,
  718 +/* #tab_map .mapRightWrap.gaode.vehicle .vehicle-item div.text span,
718 719 #tab_map .mapRightWrap.vehicle.gaode p.head>span.icon>a {
719 720 color: #000;
720   -}
  721 +} */
721 722 #tab_map .mapRightWrap.gaode.vehicle p.head{
722 723 color: #504B4B;
723 724 }
724 725 #tab_map .mapRightWrap.vehicle.gaode p.head>span.icon>a:hover{
725 726 color: #555555;
726 727 }
727   -#tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span i,
  728 +/* #tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span i,
728 729 #tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span,
729 730 #tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text{
730 731 color: #e43a45;
731   -}
  732 +} */
732 733 #tab_map .mapRightWrap.search.gaode .input-group input{
733 734 background-color: #fafafa;
734 735 border: 1px solid #fafafa;
... ... @@ -745,15 +746,15 @@ g.park text{
745 746 color: #fff;
746 747 }
747 748 #tab_map .mapRightWrap.gaode .search_result{
748   - background: rgba(250, 250, 250, 0.9);
  749 + background: rgba(250, 250, 250, 0.95);
749 750 color: #333333;
750 751 }
751 752 #tab_map .mapRightWrap.gaode .search_result .item_vehicle_list{
752 753 border-bottom: 1px solid #C7C7C7;
753 754 }
754   -#tab_map .mapRightWrap.gaode .search_result .item_vehicle{
  755 +/* #tab_map .mapRightWrap.gaode .search_result .item_vehicle{
755 756 color: #333333;
756   -}
  757 +} */
757 758 #tab_map .mapRightWrap.gaode .search_result .result_item span.sub_text{
758 759 color: #8E8D8D;
759 760 }
... ...
src/main/resources/static/pages/control/line/index.html
1   -<link href="css/lineControl.css" rel="stylesheet" type="text/css" />
  1 +<link href="/pages/control/line/css/lineControl.css" rel="stylesheet" type="text/css" />
2 2 <link href="/metronic_v4.5.4/css/animate.min.css" rel="stylesheet" type="text/css" />
3 3  
4 4 <!-- 初始load动画 -->
... ... @@ -24,7 +24,7 @@
24 24 <button type="button" class="btn btn-default" id="msgAndDirect">
25 25 <i class="fa fa-bell"></i> 调度指令</button>
26 26  
27   - <div class="btn-group">
  27 + <!-- <div class="btn-group">
28 28 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled>
29 29 <i class="fa fa-database"></i> 基本信息
30 30 <i class="fa fa-angle-down"></i>
... ... @@ -46,20 +46,17 @@
46 46 <a href="javascript:;"> 调度短语 </a>
47 47 </li>
48 48 </ul>
49   - </div>
  49 + </div> -->
50 50  
51 51  
52 52 <div class="btn-group">
53   - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled>
  53 + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
54 54 <i class="fa fa-gavel"></i> 系统设置
55 55 <i class="fa fa-angle-down"></i>
56 56 </button>
57 57 <ul class="dropdown-menu">
58 58 <li>
59   - <a href="javascript:;"> 缓冲区设置 </a>
60   - </li>
61   - <li>
62   - <a href="javascript:;"> 发车屏通知 </a>
  59 + <a href="javascript:;" id="ttsConfigure"> TTS 语音设置 </a>
63 60 </li>
64 61 </ul>
65 62 </div>
... ... @@ -231,6 +228,9 @@
231 228 <script src="/pages/control/line/js/messenger.js"></script>
232 229 <script src="/pages/control/line/js/keyboardListen.js"></script>
233 230 <script src="/pages/control/line/js/toolbarEvent.js"></script>
  231 +<script src="/pages/control/line/js/speech.js"></script>
  232 +
  233 +
234 234 <script>
235 235  
236 236 var lineCodes = '' //全部线路编码字符串,由data.js初始化
... ...
src/main/resources/static/pages/control/line/js/main.js
... ... @@ -73,6 +73,15 @@
73 73 $('menu.menu').show();
74 74 }, 400);
75 75  
  76 + setTimeout(function(){
  77 + //提示文本
  78 + var promptFlag = storage.getItem('promptFlag_0808');
  79 + if(!promptFlag){
  80 + layer.alert('未避免 TTS 重复播报,请在 “地图” 标签页,点击 “新窗口” 打开新的地图页面', {shift: 5});
  81 + storage.setItem('promptFlag_0808', 1);
  82 + }
  83 + }, 1500);
  84 +
76 85 }
77 86 }
78 87  
... ... @@ -104,6 +113,7 @@ setTimeout(function(){
104 113 if(operationMode == 0){
105 114 $(document).on('ajaxSend', interceptPOST);
106 115 }
  116 +
107 117 }, 300)
108 118  
109 119 function gpslistToMap(gpslist){
... ...
src/main/resources/static/pages/control/line/js/speech.js 0 → 100644
  1 +/** html5 Web Speech 相关 */
  2 +
  3 +var h5Speech = (function(){
  4 +
  5 + //发音速度 1 ~ 10;
  6 + var rate;
  7 + //队列播放模式 1:覆盖式 -1:完整顺序播报
  8 + var queueModel;
  9 + var synth = window.speechSynthesis;
  10 +
  11 + //读取配置信息
  12 + readCofig();
  13 + var speechInstance = {
  14 + speak: function(t){
  15 + if(queueModel == 1)
  16 + synth.cancel();
  17 +
  18 + //延迟一会,防止 synth.cancel 将当前项也从队列移除
  19 + setTimeout(function(){
  20 + var msg = new SpeechSynthesisUtterance(t);
  21 + msg.rate = rate;
  22 + synth.speak(msg);
  23 + }, 100);
  24 + },
  25 + speakTest: function(t, rate){
  26 + var msg = new SpeechSynthesisUtterance(t);
  27 + msg.rate = rate;
  28 + synth.speak(msg);
  29 + },
  30 + getCofig: function(){
  31 + return {rate: rate, queueModel: queueModel};
  32 + },
  33 + setCofig: function(r, q){
  34 + rate = r;
  35 + queueModel = q;
  36 + writeCofig(rate, queueModel);
  37 +
  38 + return 1;
  39 + }
  40 + };
  41 + return speechInstance;
  42 +
  43 + function readCofig(){
  44 + //读取配置信息
  45 + var ttsCofig = storage.getItem('tts_cofig');
  46 + if(ttsCofig){
  47 + ttsCofig = JSON.parse(ttsCofig);
  48 + rate = ttsCofig.rate;
  49 + queueModel = ttsCofig.queueModel;
  50 + }
  51 + else{
  52 + //写入默认配置
  53 + rate = 1.2;
  54 + queueModel = 1;
  55 + writeCofig(rate, queueModel);
  56 + }
  57 + }
  58 +
  59 + function writeCofig(rate, queueModel){
  60 + storage.setItem('tts_cofig', JSON.stringify({rate: rate, queueModel: queueModel}));
  61 + }
  62 +})();
... ...
src/main/resources/static/pages/control/line/js/toolbarEvent.js
... ... @@ -30,8 +30,7 @@
30 30  
31 31 //设备上报
32 32 $('#deviceReport').on('click', function(){
33   - layer.msg('功能测试中,测试完了就开放...')
34   - /*$.get('/pages/control/line/child_pages/deviceReport.html', function(content){
  33 + $.get('/pages/control/line/child_pages/deviceReport.html', function(content){
35 34 layer.open({
36 35 type: 1,
37 36 area: '930px',
... ... @@ -42,6 +41,21 @@
42 41  
43 42 }
44 43 });
45   - });*/
  44 + });
  45 + });
  46 +
  47 + //TTS语音设置
  48 + $('#ttsConfigure').on('click', function(){
  49 + $.get('/pages/control/line/child_pages/ttsConfigure.html', function(content){
  50 + layer.open({
  51 + type: 1,
  52 + area: '530px',
  53 + content: content,
  54 + title : false,
  55 + shift: 5,
  56 + success: function(){
  57 + }
  58 + });
  59 + });
46 60 });
47 61 }();
48 62 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/js/webSocketHandle.js
... ... @@ -109,6 +109,9 @@ function appendLogItem(tempId, json, lineCode){
109 109  
110 110 var logWrap = $('.console-log .log-item-list', '#tab_line_' + lineCode);
111 111 logWrap.prepend(htmlStr);
  112 + //语音播报
  113 + var text = $(htmlStr).find('.log-item-text').text();
  114 + h5Speech.speak(text);
112 115 }
113 116  
114 117 }();
... ...
src/main/resources/static/pages/control/lineallot/allot.html
... ... @@ -301,16 +301,22 @@ $(function(){
301 301 lsData.push(lineIdMap[$(e).data('id')]);
302 302 });
303 303 storage.setItem('lineControlItems', JSON.stringify(lsData));
304   - //监控模式还是主调模式
305   - storage.setItem('operationMode', $(this).data('status'));
306   - //将线路路由缓存到localstorage
307   - cacheRoute(lsData, function(cacheData){
308   - for(var lineCode in cacheData){
309   - storage.setItem(lineCode + '_route', JSON.stringify(cacheData[lineCode]));
310   - }
  304 + //缓存车辆和设备对照
  305 + $.get('/gps/Car2DeviceId', function(rs){
  306 + storage.setItem('car2DeviceId', JSON.stringify(rs));
  307 +
  308 + //监控模式还是主调模式
  309 + storage.setItem('operationMode', $(this).data('status'));
  310 + //将线路路由缓存到localstorage
  311 + cacheRoute(lsData, function(cacheData){
  312 + for(var lineCode in cacheData){
  313 + storage.setItem(lineCode + '_route', JSON.stringify(cacheData[lineCode]));
  314 + }
  315 +
  316 + layer.closeAll();
  317 + loadPage('/pages/control/line/index.html');
  318 + });
311 319  
312   - layer.closeAll();
313   - loadPage('/pages/control/line/index.html');
314 320 });
315 321 //window.location.href = '/pages/control/line/index.html';
316 322 });
... ...
src/main/resources/static/pages/mapmonitor/alone/wrap.html 0 → 100644
  1 +<link href="/pages/control/line/css/lineControl.css" rel="stylesheet" type="text/css" />
  2 +<div id="tab_map" class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 0;" oncontextmenu=self.event.returnValue=false>
  3 +</div>
  4 +<script>
  5 +!function(){
  6 + //加载地图页面
  7 + $('#tab_map').load('/pages/mapmonitor/real/real.html', function(){
  8 + $('#mapContainer').height('100%').css('margin-top', 0);
  9 + $('#openWindow').remove();
  10 + $('.leftUtils').css('width', '189px');
  11 +
  12 + startRefreshGpsTimer();
  13 + });
  14 +
  15 + moment.locale('zh-cn');
  16 + var storage = window.localStorage;
  17 + var lineCodes = '';
  18 + var allGps = {};
  19 + //初始化lineCodes
  20 + $.each(JSON.parse(storage.getItem('lineControlItems')), function(i, obj){
  21 + lineCodes += (obj.lineCode + ',');
  22 + });
  23 + lineCodes = lineCodes.substr(0, lineCodes.length - 1);
  24 +
  25 + //为地图提供gps数据
  26 + var gpsTimer;
  27 + var realGpsT = 1000 * 10;
  28 + function startRefreshGpsTimer(){
  29 + var f = arguments.callee;
  30 + refreshGpsProxy();
  31 + gpsTimer = setTimeout(f, realGpsT);
  32 + }
  33 +
  34 + function refreshGpsProxy(){
  35 + refreshGps(function(add, up){
  36 + $('#tab_map #mapContainer').trigger('gps_refresh', [add, up]);
  37 + });
  38 + }
  39 + function refreshGps(cb){
  40 + $.ajax({
  41 + url: '/gps/real/line',
  42 + data: {lineCodes: lineCodes},
  43 + timeout: 5000,//5秒超时
  44 + success: getGpsSuccess,
  45 + error: getGpsError
  46 + });
  47 +
  48 + function getGpsSuccess(gpsList){
  49 + if(!gpsList || gpsList.length == 0)
  50 + return;
  51 +
  52 + var prve = allGps
  53 + ,addArray = []
  54 + ,upArray = []
  55 + ,oldGps;
  56 + for(var i = 0, gps; gps=gpsList[i++];){
  57 + oldGps = prve[gps.deviceId];
  58 + if(!oldGps){
  59 + addArray.push(gps);
  60 + }
  61 + else if(gps.timestamp > oldGps.timestamp){
  62 + //更新
  63 + upArray.push(gps);
  64 + }
  65 + allGps[gps.deviceId] = gps;
  66 + }
  67 + cb && cb(addArray, upArray);
  68 + }
  69 +
  70 + function getGpsError(jqXHR, textStatus){
  71 + if(textStatus === 'error'){
  72 + console.log(jqXHR, textStatus);
  73 + layer.alert('获取GPS数据时出现异常,请尝试刷新页面!', {icon: 2});
  74 + }
  75 + else if(textStatus === 'timeout')
  76 + layer.alert('连接服务器超时', {icon: 2});
  77 +
  78 + //停止gps刷新
  79 + clearTimeout(gpsTimer);
  80 + }
  81 + }
  82 +}();
  83 +</script>
0 84 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/css/real.css
... ... @@ -179,7 +179,7 @@ label.BMapLabel{
179 179  
180 180 .leftUtils{
181 181 position: absolute;
182   - width: 188px;
  182 + width: 259px;
183 183 height: 40px;
184 184 background-color: #3B3F51;
185 185 z-index: 9999;
... ... @@ -431,33 +431,45 @@ html{
431 431  
432 432 .mapRightWrap.vehicle .vehicle-item div.text{
433 433 padding: 5px 0 11px 5px;
434   - color: #B2B2B2;
  434 + color: #aebbae;
435 435 -webkit-user-select: initial;
436 436 }
437 437  
438 438 .mapRightWrap.vehicle .vehicle-item div.text span.nbbm{
439 439 padding: 5px 7px;
440   - color: #eee;
441 440 cursor: pointer;
442 441 }
443 442  
444   -.mapRightWrap.vehicle .vehicle-item div.text span.nbbm:hover{
445   - color: #C8C8C8;
  443 +.mapRightWrap.vehicle .vehicle-item.online_0 div.text span.nbbm{
  444 + color: #45D245;
  445 +}
  446 +
  447 +.mapRightWrap.vehicle .vehicle-item.online_1 div.text span.nbbm{
  448 + color: #ff8375;
  449 +}
  450 +
  451 +
  452 +.mapRightWrap.vehicle .vehicle-item.online_0 div.text span.nbbm:hover{
  453 + color: #45D245;
  454 +}
  455 +
  456 +.mapRightWrap.vehicle .vehicle-item.online_1 div.text span.nbbm:hover{
  457 + color: #f16454;
446 458 }
447 459  
448 460 .mapRightWrap.vehicle .vehicle-item div.text span i{
449 461 font-size: 12px;
450 462 }
451 463  
452   -.mapRightWrap.vehicle .vehicle-item.online div.text span i{
  464 +/* .mapRightWrap.vehicle .vehicle-item.online div.text span i{
453 465 color: #45D245;
454   -}
  466 +} */
455 467  
456 468 /* off line */
457 469 .mapRightWrap.vehicle .vehicle-item.offline div.text span i,
458 470 .mapRightWrap.vehicle .vehicle-item.offline div.text span,
459 471 .mapRightWrap.vehicle .vehicle-item.offline div.text{
460   - color: #FF737C;
  472 + color: #aca7a7;
461 473 }
462 474  
463 475 .mapRightWrap.vehicle .vehicle-item div.icon{
... ... @@ -474,10 +486,17 @@ html{
474 486  
475 487 .mapRightWrap .search_result{
476 488 position: absolute;
477   - background: rgba(98, 103, 117, 0.91);
  489 + background: rgba(59, 92, 115,0.95);
478 490 width: 100%;
479 491 top: 60px;
480 492 color: #e5e5e5;
  493 +
  494 + max-height: 500px;
  495 + overflow: auto;
  496 +}
  497 +
  498 +.mapRightWrap .search_result::-webkit-scrollbar-thumb{
  499 + box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2) inset;
481 500 }
482 501  
483 502 .mapRightWrap .search_result .result_item{
... ... @@ -488,7 +507,7 @@ html{
488 507 }
489 508  
490 509 .mapRightWrap .search_result .result_item:hover{
491   - background: #60A798;
  510 + background: #59829e;
492 511 color: #fff;
493 512 }
494 513  
... ... @@ -499,10 +518,11 @@ html{
499 518 .mapRightWrap .search_result .result_item span.sub_text{
500 519 color: #BBBABA;
501 520 margin-left: 5px;
  521 + font-size: 14px;
502 522 }
503 523  
504 524 .mapRightWrap .search_result .item_vehicle_list{
505   - margin-bottom: 20px;
  525 + /* margin-bottom: 20px; */
506 526 /* border-bottom: 1px solid #F3F5F5; */
507 527 }
508 528  
... ... @@ -510,6 +530,11 @@ html{
510 530 color: #fafcfb;
511 531 }
512 532  
  533 +.mapRightWrap .search_result .item_vehicle.state_online{
  534 + color: #84ffe4;
  535 + font-size: 15px;
  536 +}
  537 +
513 538 /* GaoDe style start------- */
514 539 .mapRightWrap.gaode{
515 540 background: #fff;
... ... @@ -558,8 +583,8 @@ html{
558 583 color: #999;
559 584 }
560 585  
561   -.mapRightWrap.gaode.vehicle .vehicle-item div.text span {
562   - color: #000;
  586 +.mapRightWrap.gaode.vehicle .vehicle-item.online_0 div.text span {
  587 + color: #23a023;
563 588 }
564 589  
565 590 .mapRightWrap.gaode.playBack form {
... ... @@ -602,7 +627,7 @@ html{
602 627 }
603 628  
604 629 .mapRightWrap.gaode .search_result{
605   - background: rgba(250, 250, 250, 0.9);
  630 + background: rgba(250, 250, 250, 0.95);
606 631 color: #333333;
607 632 }
608 633  
... ... @@ -610,10 +635,10 @@ html{
610 635 border-bottom: 1px solid #C7C7C7;
611 636 }
612 637  
613   -.mapRightWrap.gaode .search_result .item_vehicle{
614   - color: #333333;
  638 +.mapRightWrap.gaode .search_result .item_vehicle.state_online{
  639 + color: #3d3dec;
615 640 }
616   -
  641 +
617 642 .mapRightWrap.gaode .search_result .result_item span.sub_text{
618 643 color: #8E8D8D;
619 644 }
... ... @@ -622,6 +647,20 @@ html{
622 647 background: #ddd;
623 648 color: #333333;
624 649 }
  650 +
  651 +.mapRightWrap.gaode .search_result .item_vehicle{
  652 + color: #333333;
  653 +}
  654 +
  655 +.mapRightWrap.gaode.playBack hr{
  656 + border-color: #c5c5c5;
  657 +}
  658 +
  659 +.mapRightWrap.gaode .alert-info{
  660 + background-color: #ccc;
  661 + border-color: #ccc;
  662 + color: #555555;
  663 +}
625 664 /* GaoDe style end------- */
626 665  
627 666  
... ... @@ -637,6 +676,11 @@ html{
637 676 box-shadow: 0 0 0 5px rgba(231, 236, 241, 0.52) inset;
638 677 }
639 678  
  679 +.gps_info_win{
  680 + width: 190px;
  681 + overflow: hidden;
  682 +}
  683 +
640 684 .gps_info_win p{
641 685 margin-bottom: 13px;
642 686 font-size: 13px;
... ...
src/main/resources/static/pages/mapmonitor/real/js/lineGroup.js 0 → 100644
  1 +/*
  2 + * 线路分组车辆 模块
  3 + */
  4 +
  5 +var lineGroup = (function() {
  6 +
  7 + //设备号和marker映射
  8 + var gpsMarker = {}
  9 + ,cLineCode;// 当前线路编码
  10 +
  11 + /*function getCurrMap(){
  12 + return realMap[realMap.getMap().fName];
  13 + }*/
  14 + var storage = window.localStorage;
  15 +
  16 + function closeAll(){
  17 + $('.mapRightWrap .collapse.in').collapse('hide');
  18 + }
  19 +
  20 + // 手风琴收拢
  21 + $('.mapRightWrap').on('hide.bs.collapse', '.panel-collapse', function() {
  22 + $(this).prev().find('span.icon').addClass('rotate');
  23 + cLineCode = null;
  24 + });
  25 +
  26 + // 手风琴展开
  27 + $('.mapRightWrap').on('show.bs.collapse', '.panel-collapse', function() {
  28 + $(this).prev().find('span.icon').removeClass('rotate');
  29 + var lineCode = $(this).data('line');
  30 + //收拢其他
  31 + closeAll();
  32 + cLineCode = lineCode;
  33 +
  34 + //从storage里获取路由数据
  35 + var route = JSON.parse(storage.getItem(lineCode + '_route'));
  36 + //在地图上画出线路
  37 + //getCurrMap().drawLine(route);
  38 + iMap.call('clear')
  39 + .call('drawLine', {route: route});
  40 +
  41 + //绘制GPS点
  42 + drawGps();
  43 + });
  44 +
  45 + //跳转到轨迹回放
  46 + function toPlayBack(nbbm, lineCode){
  47 + playBack.setDefaultCar(nbbm, lineCode);
  48 + $('.mapTools .item[data-click=playBack]').click();
  49 + }
  50 +
  51 + //绘制 GPS
  52 + function drawGps(){
  53 + var showList = [], gps, allGps = consts.allGps;
  54 + for(var dId in allGps){
  55 + if(allGps[dId].lineId == cLineCode)
  56 + showList.push(allGps[dId]);
  57 + }
  58 +
  59 + //排序
  60 + showList.sort(carSort);
  61 +
  62 + //显示车辆列表
  63 + var htmlStr = template('vehicle_panel_collapse_temp', {list: showList});
  64 + $('#collapse_' + cLineCode).html(htmlStr);
  65 +
  66 + //延迟一下再画GPS,动画会流畅一些
  67 + setTimeout(function(){
  68 + iMap.call('drawRealGpsMarker', {gpsList: showList, coordTransform: true});
  69 + }, 500);
  70 + }
  71 +
  72 + //展开完成
  73 + $('.mapRightWrap').on('shown.bs.collapse', '.panel-collapse', function() {
  74 + //滚动到激活项
  75 + var cont = $('.mapRightWrap'),h = $(this).prev();
  76 + cont.scrollTop(h.offset().top - cont.offset().top + h.scrollTop());
  77 + });
  78 +
  79 + //go to marker
  80 + $('.mapRightWrap').on('click', '.goto-marker', function() {
  81 + var opts = {deviceId: $(this).data('deviceid')};
  82 + iMap.call('goToMarker', opts)
  83 + .call('openWindow', opts);
  84 + });
  85 +
  86 + var exports = {
  87 + // 加载车辆信息
  88 + showData: function(){
  89 + //要展示的线路
  90 + var lines = JSON.parse(storage.getItem('lineControlItems'));
  91 +
  92 + var htmlStr = template('vehicle_panel_temp', {list: lines});
  93 + $('.mapRightWrap').html(htmlStr).addClass('vehicle');
  94 + },
  95 + showDataLazy : function() {
  96 + setTimeout(exports.showData, 1000);
  97 + },
  98 + drawLineAndGps: function(lineCode){
  99 + drawLineAndGps(lineCode);
  100 + },
  101 + clear: function(){
  102 + cLineCode = null;
  103 + },
  104 + toPlayBack:toPlayBack,
  105 + //gps刷新
  106 + gpsRefresh: function(){
  107 + drawGps();
  108 + }
  109 + };
  110 +
  111 + //车辆排序
  112 + function carSort(g1, g2){
  113 + //营运状态
  114 + if(g1.state != g2.state)
  115 + return Math.abs(g1.state) - Math.abs(g2.state);
  116 +
  117 + //上下行
  118 + if(g1.upDown != g2.upDown)
  119 + return g1.upDown - g2.upDown;
  120 +
  121 +
  122 + return g1.nbbm > g2.nbbm?1:-1;
  123 + }
  124 + return exports;
  125 +})();
0 126 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/map/iMap.js 0 → 100644
  1 +/** 各个地图平台通用接口定义 */
  2 +var iMap = (function(){
  3 +
  4 + var storage = window.localStorage;
  5 + // 地图DOM容器
  6 + var mapContainer = $('#mapContainer');
  7 + var maps = {};
  8 + //尝试从 localStorage 里获取默认的地图类型
  9 + var currentMap = storage.getItem('real_map');
  10 + var mapProxy = {
  11 + //添加一个地图实例
  12 + addMap: function(name, text, instance){
  13 + maps[name] = {name: name, text: text, instance: instance};
  14 +
  15 + if(!currentMap)
  16 + currentMap = name;
  17 + return mapProxy;
  18 + },
  19 + changeDefault: function(mapName){
  20 + if(mapName == currentMap)
  21 + return;
  22 + if(maps[mapName]){
  23 + //原地图 destroy
  24 + var oldMap = maps[currentMap].instance;
  25 + oldMap.destroy && oldMap.destroy();
  26 + $(consts.mapContainer).html('');
  27 + //解除实时路况按钮点击事件
  28 + $(consts.trafficBtn).unbind('click');
  29 +
  30 + //新地图 INIT
  31 + var text = maps[mapName].text;
  32 + layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0});
  33 + var newMap = maps[mapName].instance;
  34 + newMap.init();
  35 + setText(text);
  36 +
  37 + currentMap = mapName;
  38 + //收拢线路
  39 + $('.mapRightWrap .collapse.in').collapse('hide');
  40 + }else
  41 + alertErr('不存在的地图实例' + mapName);
  42 + },
  43 + createCarIcon: createCarIcon,
  44 + call: function(f, opts){
  45 + if(f == 'init')
  46 + setText(maps[currentMap].text);
  47 +
  48 + var instance = maps[currentMap].instance;
  49 + if(instance[f])
  50 + instance[f](opts);
  51 + else
  52 + alertErr('当前地图实例不支持操作:' + f);
  53 + return mapProxy;
  54 + }
  55 + }
  56 +
  57 + //绘制车辆icon
  58 + function createCarIcon(gps){
  59 + var canvas = $('<canvas></canvas>')[0];
  60 + var ctx = canvas.getContext('2d');
  61 +
  62 + var colours = color(gps);
  63 +
  64 + ctx.shadowOffsetX = 5; // 阴影Y轴偏移
  65 + ctx.shadowOffsetY = 5; // 阴影X轴偏移
  66 + ctx.shadowBlur = 1; // 模糊尺寸
  67 + ctx.shadowColor = colours.shadow; // 颜色
  68 +
  69 + //绘制背景
  70 + ctx.roundRect(0, 0, 70, 25, 5).stroke();
  71 + ctx.fillStyle=colours.bgColor;
  72 + ctx.fill();
  73 + //文字
  74 + ctx.font="14px arial";
  75 + ctx.fillStyle = "#fff";
  76 + ctx.fillText(gps.nbbm, 8, 18);
  77 +
  78 + return canvas.toDataURL();
  79 + }
  80 +
  81 + function color(g){
  82 + var colours = {};
  83 + switch (g.state) {
  84 + case 0:
  85 + if(g.upDown == 0){
  86 + //营运上行
  87 + colours['bgColor'] = 'rgba(94, 150, 210, 1)';
  88 + colours['shadow'] = 'rgba(94, 150, 210, 0.3)';
  89 + }
  90 + else if(g.upDown == 1){
  91 + //营运下行
  92 + colours['bgColor'] = 'rgba(201, 33, 33, 1)';
  93 + colours['shadow'] = 'rgba(201, 33, 33, 0.3)';
  94 + }
  95 + else{
  96 + //未知走向
  97 + colours['bgColor'] = 'rgba(0, 0, 0, 1)';
  98 + colours['shadow'] = 'rgba(0, 0, 0, 0.3)';
  99 + }
  100 + break;
  101 +
  102 + default:
  103 + //非营运
  104 + colours['bgColor'] = 'rgba(136, 133, 133, 1)';
  105 + colours['shadow'] = 'rgba(136, 133, 133, 0.3)';
  106 + break;
  107 + }
  108 +
  109 + return colours;
  110 + }
  111 +
  112 + function alertErr(text){
  113 + layer.alert(text, {icon: 2, title: '来自地图的异常'});
  114 + }
  115 +
  116 + function setText(text) {
  117 + $('.leftUtils span.dropdown-toggle').html(
  118 + text + ' <i class="fa fa-angle-down"></i>');
  119 + }
  120 +
  121 + return mapProxy;
  122 +})();
0 123 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/map/platform/baidu.js 0 → 100644
  1 +/** 百度地图相关接口封装 */
  2 +var baiduMap = (function(){
  3 +
  4 + var map;
  5 + var realMarkers = {};
  6 + var topMarker;
  7 + //实时路况是否打开
  8 + var traffVisible;
  9 + //线路 Polyline
  10 + var linePolyline;
  11 + var baiduInstance = {
  12 + //初始化
  13 + init: function(){
  14 + map = new BMap.Map($(consts.mapContainer)[0]);
  15 + //中心点和缩放级别
  16 + map.centerAndZoom(new BMap.Point(consts.center_point.lng, consts.center_point.lat), 15);
  17 + map.enableScrollWheelZoom();
  18 + //加载完成
  19 + map.addEventListener("tilesloaded", function() {
  20 + layer.closeAll();
  21 + window.localStorage.setItem('real_map', 'baidu');
  22 + });
  23 +
  24 + // 路况控件
  25 + var ctrl = new BMapLib.TrafficControl();
  26 + map.addControl(ctrl);
  27 +
  28 + $(consts.trafficBtn).on('click', function() {
  29 + if (traffVisible) {
  30 + ctrl.hide();
  31 + traffVisible = false;
  32 + showLinePolyline();
  33 + } else {
  34 + ctrl.show();
  35 + traffVisible = true;
  36 + hideLinePolyline();
  37 + }
  38 + });
  39 + //百度路况控件自身关闭按钮
  40 + $('.portlet-fullscreen').on('click', '.maplibTc .maplibTcClose', function(){
  41 + traffVisible = false;
  42 + showLinePolyline();
  43 + });
  44 +
  45 + $('#tcWrap.maplibTc').addClass('animated bounceInLeft');
  46 + $('.maplibTcBtn_deskTop.anchorTR').remove();
  47 + },
  48 + destroy: function(){
  49 + realMarkers = {};
  50 + linePolyline = [];
  51 + },
  52 + clear: function(){
  53 + realMarkers = {};
  54 + map.clearOverlays();
  55 + },
  56 + //画线路图层
  57 + drawLine: function(opts){
  58 +
  59 + map.clearOverlays();
  60 + linePolyline = [];
  61 + //从localStorage里读取路由信息
  62 + var upLineOps = {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
  63 + ,downLineOps = {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5};
  64 +
  65 + var upPos = [], downPos = [], tempArray;
  66 + var route = opts.route;
  67 + //上行
  68 + if(route.up){
  69 + $.each(route.up.split(','), function(){
  70 + tempArray = this.split(' ');
  71 + upPos.push(new BMap.Point(tempArray[0], tempArray[1]));
  72 + });
  73 +
  74 + var upLine = new BMap.Polyline(upPos, upLineOps);
  75 + map.addOverlay(upLine);
  76 +
  77 + linePolyline.push(upLine);
  78 +
  79 + map.panTo(upPos[parseInt(upPos.length / 2)]);
  80 + }
  81 + //下行
  82 + if(route.down){
  83 + $.each(route.down.split(','), function(){
  84 + tempArray = this.split(' ');
  85 + downPos.push(new BMap.Point(tempArray[0], tempArray[1]));
  86 + });
  87 +
  88 + var downLine = new BMap.Polyline(downPos, downLineOps);
  89 + map.addOverlay(downLine);
  90 +
  91 + linePolyline.push(downLine);
  92 + }
  93 + },
  94 + //绘制GPS信号
  95 + drawRealGpsMarker: function(opts){
  96 + var gpsArray = opts.gpsList;
  97 + var marker, coord;
  98 + $.each(gpsArray, function(i, gps){
  99 + if(opts.coordTransform){
  100 + //坐标转换
  101 + coord = TransGPS.wgsToBD(gps.lat, gps.lon);
  102 + gps.bd_lat = coord.lat;
  103 + gps.bd_lon = coord.lng;
  104 + }
  105 +
  106 + marker = realMarkers[gps.deviceId];
  107 + if(marker){
  108 + if(gps.timestamp == marker.gpsData.timestamp)
  109 + return;
  110 + else
  111 + moveMarker(marker, gps);//移动marker
  112 + }
  113 + else{
  114 + //创建marker
  115 + marker = createBDMarkerByGps(gps);
  116 + map.addOverlay(marker);
  117 + //设备号和marker映射
  118 + realMarkers[gps.deviceId] = marker;
  119 + }
  120 + });
  121 + },
  122 + //定位到marker
  123 + goToMarker: function(opts){
  124 + var deviceId = opts.deviceId
  125 + ,m = realMarkers[deviceId];
  126 + if(m){
  127 + map.panTo(m.point);
  128 + setTop(m);
  129 + }
  130 + },
  131 + //打开信息窗口
  132 + openWindow: function(opts){
  133 + var deviceId = opts.deviceId
  134 + ,m = realMarkers[deviceId];
  135 + bdOpenWindow(m);
  136 + }
  137 + };
  138 +
  139 + return baiduInstance;
  140 +
  141 + var bd_gps_info_win_opts = {
  142 + width : 190,
  143 + height: 255,
  144 + enableMessage:true
  145 + };
  146 + function createBDMarkerByGps(gpsData){
  147 + var point = new BMap.Point(gpsData.bd_lon, gpsData.bd_lat);
  148 + var marker = new BMap.Marker(point/*, {offset: new BMap.Size(-35,-12)}*/);
  149 + marker.setIcon(new BMap.Icon(iMap.createCarIcon(gpsData), new BMap.Size(70,25)));
  150 +
  151 + marker.infoWindow = new BMap.InfoWindow(bd_gps_info_win_opts);
  152 + marker.gpsData = gpsData;
  153 + //click
  154 + marker.addEventListener('click', function(){
  155 + bdOpenWindow(this);
  156 + });
  157 + //mouseover
  158 + marker.addEventListener('mouseover', function(){
  159 + setTop(this);
  160 + });
  161 + return marker;
  162 + }
  163 +
  164 + //隐藏线路线条
  165 + function hideLinePolyline(){
  166 + if(!linePolyline || linePolyline.length == 0)
  167 + return;
  168 +
  169 + layer.msg('隐藏线路图层',{offset: 'ct', shift : 5});
  170 + $.each(linePolyline, function(){
  171 + this.setStrokeOpacity(0.1);
  172 + });
  173 + }
  174 +
  175 + //显示线路线条
  176 + function showLinePolyline(){
  177 + if(!linePolyline || linePolyline.length == 0)
  178 + return;
  179 +
  180 + layer.msg('显示线路图层',{offset: 'ct', shift : 5});
  181 + $.each(linePolyline, function(){
  182 + this.setStrokeOpacity(0.5);
  183 + });
  184 + }
  185 +
  186 + function moveMarker(m, gps){
  187 + m.setPosition(new BMap.Point(gps.bd_lon, gps.bd_lat));
  188 + m.gpsData = gps;
  189 + //重新设置icon
  190 + m.setIcon(new BMap.Icon(iMap.createCarIcon(gps), new BMap.Size(70,25)));
  191 +
  192 + //更新 infoWindow
  193 + if(m.infoWindow.isOpen()){
  194 + bdOpenWindow(m);
  195 + }
  196 + }
  197 +
  198 + function setTop(m){
  199 + if(topMarker)
  200 + topMarker.setTop(false);
  201 + m.setTop(true);
  202 + topMarker = m;
  203 + }
  204 +
  205 + function bdOpenWindow(marker){
  206 + marker.gpsData.fromNow = moment(marker.gpsData.timestamp).fromNow();
  207 +
  208 + marker.infoWindow.setContent(template('gps_info_win_temp', marker.gpsData));
  209 + map.openInfoWindow(marker.infoWindow, marker.point);
  210 + }
  211 +})();
0 212 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/map/platform/gaode.js 0 → 100644
  1 +/** 高德地图相关接口封装 */
  2 +var gaodeMap = (function() {
  3 +
  4 + var mapLoadAnim = '<div class="sk-cube-grid _center">'
  5 + + '<div class="sk-cube sk-cube1"></div>'
  6 + + '<div class="sk-cube sk-cube2"></div>'
  7 + + '<div class="sk-cube sk-cube3"></div>'
  8 + + '<div class="sk-cube sk-cube4"></div>'
  9 + + '<div class="sk-cube sk-cube5"></div>'
  10 + + '<div class="sk-cube sk-cube6"></div>'
  11 + + '<div class="sk-cube sk-cube7"></div>'
  12 + + '<div class="sk-cube sk-cube8"></div>'
  13 + + '<div class="sk-cube sk-cube9"></div>' + '</div>';
  14 +
  15 + var map;
  16 + var topMarkr;
  17 + var realMarkers = {};
  18 + //线路路由线条
  19 + var linePolyline;
  20 + //实时路况是否显示
  21 + var traffVisible;
  22 + var gaodeInstance = {
  23 + init : function() {
  24 + var $mapCon = $(consts.mapContainer);
  25 + $mapCon.html(mapLoadAnim);
  26 + //设置样式
  27 + gaodeInstance.setStyle();
  28 +
  29 + map = new AMap.Map($mapCon[0]);
  30 + // 地图中心和缩放级别
  31 + map.setZoomAndCenter(14, [ consts.center_point.lng, consts.center_point.lat ]);
  32 + // 加载完成
  33 + AMap.event.addListener(map, 'complete', function() {
  34 + layer.closeAll();
  35 + window.localStorage.setItem('real_map', 'gaode');
  36 + /*storage.setItem('real_map', REAL_GAODE_TEXT);
  37 + $('.sk-cube-grid._center').remove();*/
  38 + });
  39 +
  40 + // 实时路况图层
  41 + var trafficLayer = new AMap.TileLayer.Traffic();
  42 + trafficLayer.setMap(map);
  43 + trafficLayer.hide();
  44 +
  45 + $(consts.trafficBtn).on('click', function() {
  46 + if (traffVisible) {
  47 + trafficLayer.hide();
  48 + traffVisible = false;
  49 + $(this).removeClass('active');
  50 + showLinePolyline();
  51 + } else {
  52 + trafficLayer.show();
  53 + traffVisible = true;
  54 + $(this).addClass('active');
  55 + hideLinePolyline();
  56 + }
  57 + });
  58 + },
  59 + setStyle : function() {
  60 + $('.mapRightWrap').addClass('gaode');
  61 + $('.mapTools').addClass('gaode');
  62 + $('.leftUtils').addClass('gaode');
  63 + },
  64 + destroy:function(){
  65 + realMarkers = {};
  66 + $('.mapRightWrap').removeClass('gaode');
  67 + $('.mapTools').removeClass('gaode');
  68 + $('.leftUtils').removeClass('gaode');
  69 + },
  70 + clear: function(){
  71 + realMarkers = {};
  72 + map.clearMap();
  73 + linePolyline = [];
  74 + },
  75 + drawLine: function(opts){
  76 + linePolyline = [];
  77 +
  78 + map.clearMap();
  79 +
  80 + var upArr = [], downArr = [];
  81 + var upLineOps = {path: upArr, strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
  82 + ,downLineOps = {path: downArr, strokeColor:"red", strokeWeight:6, strokeOpacity:0.5};
  83 + var route = opts.route;
  84 + //上行
  85 + if(route.up){
  86 + $.each(route.up_gcj.split(','), function(){
  87 + tempArray = this.split(' ');
  88 + upArr.push([tempArray[0], tempArray[1]]);
  89 + });
  90 + var upLine = new AMap.Polyline(upLineOps);
  91 + //保存线条引用
  92 + linePolyline.push(upLine);
  93 + upLine.setMap(map);
  94 + map.setCenter(upArr[parseInt(upArr.length / 2)]);
  95 +
  96 + }
  97 + //下行
  98 + if(route.down){
  99 + $.each(route.down_gcj.split(','), function(){
  100 + tempArray = this.split(' ');
  101 + downArr.push([tempArray[0], tempArray[1]]);
  102 + });
  103 + var downLine = new AMap.Polyline(downLineOps);
  104 + //保存线条引用
  105 + linePolyline.push(downLine);
  106 + downLine.setMap(map);
  107 + }
  108 + //实时路况下不显示
  109 + if(traffVisible)
  110 + hideLinePolyline();
  111 + },
  112 + drawRealGpsMarker: function(opts){
  113 + var gpsArray = opts.gpsList;
  114 + var coord;
  115 + $.each(gpsArray, function(i, gps){
  116 + if(opts.coordTransform){
  117 + coord = TransGPS.transformFromWGSToGCJ(gps.lat, gps.lon);
  118 + gps.gcj_lat = coord.lat;
  119 + gps.gcj_lon = coord.lng;
  120 + }
  121 +
  122 + marker = realMarkers[gps.deviceId];
  123 + if(marker){
  124 + if(gps.timestamp == marker.gpsData.timestamp)
  125 + return;
  126 + else
  127 + moveMarker(marker, gps);//移动marker
  128 + }
  129 + else{
  130 + var marker = createGDMarkerByGps(gps);
  131 + realMarkers[gps.deviceId] = marker
  132 + }
  133 + });
  134 + },
  135 + goToMarker: function(opts){
  136 + var deviceId = opts.deviceId
  137 + ,m = realMarkers[deviceId];
  138 + if(m){
  139 + map.setCenter(m.getPosition());
  140 + setTop(m);
  141 + }
  142 + },
  143 + openWindow: function(opts){
  144 + var deviceId = opts.deviceId
  145 + ,m = realMarkers[deviceId];
  146 + openWindow(m);
  147 + }
  148 + };
  149 +
  150 + return gaodeInstance;
  151 +
  152 + function createGDMarkerByGps(gps){
  153 + var marker = new AMap.Marker({
  154 + map: map,
  155 + position: [gps.gcj_lon, gps.gcj_lat],
  156 + icon: new AMap.Icon({
  157 + size: new AMap.Size(70, 25), //图标大小
  158 + image: iMap.createCarIcon(gps)
  159 + }),
  160 + offset: new AMap.Pixel(-35, -12)
  161 + });
  162 +
  163 + //绑定数据
  164 + marker.gpsData = gps;
  165 + marker.infoWindow = new AMap.InfoWindow();
  166 +
  167 + marker.on('mouseover', function(){
  168 + setTop(this);
  169 + });
  170 + //点击事件
  171 + marker.on('click', function(){
  172 + openWindow(this);
  173 + });
  174 +
  175 + return marker;
  176 + }
  177 +
  178 + function moveMarker(m, gps){
  179 + m.setPosition(new AMap.LngLat(gps.gcj_lon, gps.gcj_lat));
  180 + m.gpsData = gps;
  181 + //重新设置icon
  182 + m.setIcon(new AMap.Icon({
  183 + size: new AMap.Size(70, 25),
  184 + image: iMap.createCarIcon(gps)
  185 + }));
  186 +
  187 + if(m.infoWindow.getIsOpen())
  188 + openWindow(m);
  189 + }
  190 +
  191 + //隐藏线路线条
  192 + function hideLinePolyline(){
  193 + if(!linePolyline || linePolyline.length == 0)
  194 + return;
  195 + layer.msg('隐藏线路图层',{offset: 'ct', shift : 5});
  196 + $.each(linePolyline, function(){
  197 + this.setOptions({strokeOpacity: 0});
  198 + });
  199 + }
  200 +
  201 + //显示线路线条
  202 + function showLinePolyline(){
  203 + if(!linePolyline || linePolyline.length == 0)
  204 + return;
  205 +
  206 + layer.msg('显示线路图层',{offset: 'ct', shift : 5});
  207 + $.each(linePolyline, function(){
  208 + this.setOptions({strokeOpacity: 0.5});
  209 + });
  210 + }
  211 +
  212 + function openWindow(marker){
  213 + marker.gpsData.fromNow = moment(marker.gpsData.timestamp).fromNow();
  214 + /*var infoWindow = new AMap.InfoWindow({
  215 + content: template('gps_info_win_temp', marker.gpsData)
  216 + });*/
  217 + marker.infoWindow.setContent(template('gps_info_win_temp', marker.gpsData));
  218 + marker.infoWindow.open(map, marker.getPosition());
  219 + }
  220 +
  221 + function setTop(marker){
  222 + if(topMarkr)
  223 + topMarkr.setzIndex(1);
  224 + marker.setzIndex(2);
  225 + topMarkr = marker;
  226 + }
  227 +})();
0 228 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/map_platform.js renamed to src/main/resources/static/pages/mapmonitor/real/js/map_platform_old.js
src/main/resources/static/pages/mapmonitor/real/js/playBack.js
... ... @@ -44,12 +44,14 @@ var playBack = (function() {
44 44 var lineRoute;
45 45 //首辆车自编号
46 46 var firstCar;
  47 + var firstDeviceId;
47 48 //是否启用焦点跟踪
48 49 var isEnableFocus;
49 50  
50   - function getCurrMap(){
  51 + var car2DeviceId;
  52 +/* function getCurrMap(){
51 53 return realMap[realMap.getMap().fName];
52   - }
  54 + }*/
53 55  
54 56 //事件监听
55 57 $('.play-back-btns .playBtn').on('click', function(){
... ... @@ -88,7 +90,7 @@ var playBack = (function() {
88 90 //删掉marker映射
89 91 markerMap = {};
90 92 //清理地图
91   - getCurrMap().clear();
  93 + iMap.call('clear');
92 94 //坐标归0
93 95 cIndex = 0;
94 96 $('.pback-logs').html('');
... ... @@ -152,11 +154,10 @@ var playBack = (function() {
152 154  
153 155 var exports = {
154 156 init : function() {
155   - //清空地图
156   - getCurrMap().clear();
157 157  
158   - vehiclePanel.clear();
  158 + lineGroup.clear();
159 159  
  160 + car2DeviceId = JSON.parse(window.localStorage.getItem('car2DeviceId'));
160 161 var htmlStr = template('play_back_panel_temp', {})
161 162 ,carSel = '.mapRightWrap select[name="nbbm[]"]';
162 163 $('.mapRightWrap').html(htmlStr);
... ... @@ -228,16 +229,17 @@ var playBack = (function() {
228 229 pWidth = $('.progress-body').width();
229 230 secondPX = tRange / pWidth;
230 231 //清理地图
231   - getCurrMap().clear();
  232 + iMap.call('clear');
232 233  
233 234 firstCar = params.nbbm[0];
  235 + firstDeviceId = car2DeviceId[firstCar];
234 236  
235 237 if(defaultLine){
236 238 layer.msg('加载线路图层数据...', {icon: 16, time: 0,shade:0.3});
237 239 $.get('/realSchedule/findRouteByLine', {lineCode: defaultLine}
238 240 ,function(route){
239 241 lineRoute = route;
240   - getCurrMap().drawLine(lineRoute);
  242 + iMap.call('drawLine', {route: lineRoute});
241 243  
242 244 cTime = sTime;
243 245 play();
... ... @@ -306,8 +308,8 @@ var playBack = (function() {
306 308  
307 309 function trackFocus(){
308 310 //定位焦点
309   - if(markerMap[firstCar])
310   - getCurrMap().markerToCenter(markerMap[firstCar]);
  311 + if(firstDeviceId)
  312 + iMap.call('goToMarker', {deviceId: firstDeviceId});
311 313 }
312 314  
313 315 function start(){
... ... @@ -353,17 +355,20 @@ var playBack = (function() {
353 355 }
354 356  
355 357 //绘制到地图
356   - var marker;
  358 + var marker, gpsList = [];
357 359 for(var nbbm in rs){
358 360 gps = rs[nbbm];
359   - marker = markerMap[gps.nbbm];
  361 + gpsList.push(gps);
  362 + //marker = markerMap[gps.nbbm];
  363 +
360 364  
361   - if(marker)
  365 + /*if(marker)
362 366 getCurrMap().moveMarker(marker, gps);//移动marker
363 367 else
364 368 markerMap[gps.nbbm] = getCurrMap().addHistoryMarker(gps);//添加marker
365   - }
  369 +*/ }
366 370  
  371 + iMap.call('drawRealGpsMarker', {gpsList: gpsList});
367 372 }
368 373  
369 374 function goToByTime(time){
... ... @@ -384,7 +389,7 @@ var playBack = (function() {
384 389 //removeMarker
385 390 function removeAllGps(){
386 391 for(var nbbm in markerMap)
387   - getCurrMap().removeMarker(markerMap[nbbm]);
  392 + iMap.call('clear');
388 393  
389 394 markerMap = {};
390 395 }
... ...
src/main/resources/static/pages/mapmonitor/real/js/real.js
... ... @@ -33,6 +33,10 @@
33 33 });
34 34 }
35 35  
  36 + $('#openWindow').on('click', function(){
  37 + window.open('/pages/mapmonitor/alone/wrap.html','alone_map' );
  38 + });
  39 +
36 40 // tools点击
37 41 $('.mapTools div.item').on('click', function() {
38 42 if ($(this).hasClass('active')) {
... ... @@ -48,6 +52,8 @@
48 52 $('.mapTools').addClass('disable');
49 53 $('.mapTools div.item.active').removeClass('active');
50 54 $(this).addClass('active');
  55 + //清理地图
  56 + iMap.call('clear');
51 57  
52 58 toolsEvent.clearStyle();
53 59 toolsEvent[method]();
... ... @@ -61,7 +67,7 @@
61 67 /*mrw.html('').addClass('to_vehicle vehicle');
62 68 resetRotate(null, vehiclePanel.showData);*/
63 69 mrw.html('').addClass('vehicle');
64   - vehiclePanel.showData();
  70 + lineGroup.showData();
65 71 },
66 72 search : function() {
67 73 /*mrw.html('').addClass('to_searchPanel search');
... ... @@ -87,14 +93,14 @@
87 93  
88 94 // 地图切换
89 95 $('#mapTypeDrop li').on('click', function() {
90   - realMap[this.id].change();
91   - var type = $('.mapTools .item.active').data('click');
  96 + iMap.changeDefault(this.id);
  97 + /*var type = $('.mapTools .item.active').data('click');
92 98 if(type == 'vehicle'){
93 99 var activePanel = $('.mapRightWrap .panel-collapse.collapse.in');
94 100 if(activePanel.length > 0){
95 101 vehiclePanel.drawLineAndGps(activePanel.data('line'));
96 102 }
97   - }
  103 + }*/
98 104 });
99 105  
100 106 // 关闭左侧栏
... ... @@ -105,8 +111,8 @@
105 111 $('#mapContainer').height($(pjaxContainer).height() + 49);
106 112  
107 113 mrw.html(spinnerLoad);
108   - realMap.init();
109   - vehiclePanel.showDataLazy();
  114 + //realMap.init();
  115 + lineGroup.showDataLazy();
110 116  
111 117 //function init(){
112 118 /*//初始化地图
... ...
src/main/resources/static/pages/mapmonitor/real/js/search.js
... ... @@ -8,66 +8,91 @@ var searchPanel = (function() {
8 8 return realMap[realMap.getMap().fName];
9 9 }
10 10  
11   - var allGps;
  11 + var allGps, gpsArray;
  12 +
  13 + var $wrap
  14 +
  15 + var activeItem;
12 16  
13 17 var exports = {
14 18 init : function() {
  19 +
15 20 var htmlStr = template('search_panel_temp', {});
16 21 $('.mapRightWrap').html(htmlStr);
17 22  
18   - //focus
  23 + $wrap = $('.mapRightWrap .search_result');
19 24 //焦点时获取所有的gps
20 25 $('#realSearchInput').on('focus', function(){
21   - allGps = vehiclePanel.getAllGps();
22   - console.log('focus', allGps);
  26 + getGpsData();
23 27 })
24 28 .on('keyup', function(){
25   - var t = $(this).val()
26   - ,list = [];
27   -
28   - $.each(allGps, function(){
29   - if(this.nbbm.indexOf(t) == -1)
30   - return true;
31   -
32   - this.fromNow = moment(this.timestamp).fromNow();
33   - list.push(this);
34   - });
35   -
36   - var resultHtml = template('search_result_temp', {list: list});
37   - $('.mapRightWrap .search_result').html(resultHtml);
  29 + var t = $(this).val();
  30 + search(t);
38 31 });
39 32  
40 33 $('.search_result').on('click', '.result_item' ,function(){
41   - console.log($(this).data('device'));
42   - });
43   -
44   - //var allGps = vehiclePanel.getAllCars();
45   - /*$('#realSearchInput').on('keyup', function(){
46   - var t = $(this).val()
47   - ,array = [];
48   - $.each(allCars, function(i, nbbm){
49   - if(nbbm.indexOf(t) != -1)
50   - array.push(nbbm);
51   - });
52   - });*/
53   - // 建立一个自动完成的对象
54   - /*getCurr().autocomplete('realSearchInput', function(json){
  34 + activeItem = $(this).data('device');
  35 + var deviceId = $(this).data('device')
  36 + ,gps = allGps[deviceId];
55 37  
56   - var resultHtml = template('search_result_temp', json);
57   - $('.mapRightWrap .search_result').html(resultHtml);
58   - //搜索车辆
59   - //console.log(json);
  38 + iMap.call('clear')
  39 + .call('drawRealGpsMarker', {gpsList: [gps], coordTransform: true})
  40 + .call('goToMarker', {deviceId: deviceId})
  41 + .call('openWindow', {deviceId: deviceId});
60 42 });
61   -
62   - //查询结果选中事件
63   - $('.search_result').on('click', '.result_item'
64   - ,function(){
65   -
66   - console.log(this);
67   - //getCurr().setPlace($(this).data('title'));
68   - });*/
  43 + }
  44 + //gps更新事件
  45 + ,gpsRefresh: function(){
  46 + //重新执行搜索
  47 + getGpsData();
  48 + search($('#realSearchInput').val());
  49 + //更新当前定位的点
  50 + if(activeItem)
  51 + iMap.call('drawRealGpsMarker', {gpsList: [allGps[activeItem]], coordTransform: true});
69 52 }
70 53 };
71   -
72 54 return exports;
  55 +
  56 +
  57 + function getGpsData(){
  58 + gpsArray = [];
  59 + allGps = consts.allGps;
  60 +
  61 + for(var deviceId in allGps)
  62 + gpsArray.push(allGps[deviceId]);
  63 + }
  64 +
  65 + function search(t){
  66 + var list = [];
  67 +
  68 + if(!t){
  69 + $wrap.html('');
  70 + return;
  71 + }
  72 + $.each(gpsArray, function(){
  73 + if(this.nbbm.indexOf(t) == -1)
  74 + return true;
  75 +
  76 + this.fromNow = moment(this.timestamp).fromNow();
  77 + list.push(this);
  78 + });
  79 + //排序
  80 + list.sort(carSort);
  81 + var resultHtml = template('search_result_temp', {list: list});
  82 + $wrap.html(resultHtml);
  83 + }
  84 +
  85 + //车辆排序
  86 + function carSort(g1, g2){
  87 + //营运状态
  88 + if(g1.state != g2.state)
  89 + return Math.abs(g1.state) - Math.abs(g2.state);
  90 +
  91 + //上下行
  92 + if(g1.upDown != g2.upDown)
  93 + return g1.upDown - g2.upDown;
  94 +
  95 +
  96 + return g1.nbbm > g2.nbbm?1:-1;
  97 + }
73 98 })();
74 99 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/vehicle.js deleted 100644 → 0
1   -/*
2   - * #车辆模块相关操作
3   - */
4   -
5   -var vehiclePanel = (function() {
6   -
7   - //设备号和marker映射
8   - var gpsMarker = {}
9   - ,cLineCode;// 当前线路编码
10   -
11   - function getCurrMap(){
12   - return realMap[realMap.getMap().fName];
13   - }
14   - var storage = window.localStorage;
15   -
16   - function closeAll(){
17   - $('.mapRightWrap .collapse.in').collapse('hide');
18   - }
19   -
20   - // 手风琴收拢
21   - $('.mapRightWrap').on('hide.bs.collapse', '.panel-collapse', function() {
22   - $(this).prev().find('span.icon').addClass('rotate');
23   - cLineCode = null;
24   - });
25   -
26   - // 手风琴展开
27   - $('.mapRightWrap').on('show.bs.collapse', '.panel-collapse', function() {
28   - $(this).prev().find('span.icon').removeClass('rotate');
29   - var lineCode = $(this).data('line');
30   - //收拢其他
31   - closeAll();
32   - cLineCode = lineCode;
33   - drawLineAndGps(lineCode, function(){
34   - //从storage里获取路由数据
35   - var route = JSON.parse(storage.getItem(lineCode + '_route'));
36   - //在地图上画出线路
37   - getCurrMap().drawLine(route);
38   - });
39   - });
40   -
41   - //跳转到轨迹回放
42   - function toPlayBack(nbbm, lineCode){
43   - playBack.setDefaultCar(nbbm, lineCode);
44   - $('.mapTools .item[data-click=playBack]').click();
45   - }
46   -
47   - //绘制线路和GPS
48   - function drawLineAndGps(lineCode, callFun){
49   - //过滤出该线路的GPS点
50   - var showList = [], gps;
51   - /*if(lineGps[lineCode]){
52   - $.each(lineGps[lineCode], function(){
53   - gps = allGps[this];
54   - showList.push(gps);
55   - gpsMarker[gps.deviceId] = gps;
56   - });
57   - }*/
58   - for(var dId in allGps){
59   - if(allGps[dId].lineId == lineCode)
60   - showList.push(allGps[dId]);
61   - }
62   -
63   - //显示车辆列表
64   - var htmlStr = template('vehicle_panel_collapse_temp', {list: showList});
65   - $('#collapse_' + lineCode).html(htmlStr);
66   -
67   - /**
68   - * 延迟一下再画地图,不然会有点卡
69   - */
70   - var that = $(this);
71   - setTimeout(function(){
72   - callFun && callFun();
73   - //画GPS
74   - getCurrMap().drawGpsMarker(showList);
75   -
76   - }, 500);
77   - }
78   -
79   - //展开完成
80   - $('.mapRightWrap').on('shown.bs.collapse', '.panel-collapse', function() {
81   - //滚动到激活项
82   - var cont = $('.mapRightWrap'),h = $(this).prev();
83   - cont.scrollTop(h.offset().top - cont.offset().top + h.scrollTop());
84   - });
85   -
86   - //go to marker
87   - $('.mapRightWrap').on('click', '.goto-marker', function() {
88   - getCurrMap().goToMarker($(this).data('deviceid'));
89   - });
90   -
91   -
92   - //GPS刷新事件
93   - var allGps = {};
94   - //var lineGps = {};
95   - $('#mapContainer').on('gps_refresh', function(e, add, up){
96   - var temp = add;
97   - if(up)
98   - temp = temp.concat(up);
99   -
100   - var gps;
101   - if(!$(this).is(":hidden")){
102   - $.each(temp, function(){
103   - allGps[this.deviceId] = this;
104   - });
105   -
106   - /* $.each(add, function(){
107   - if(!lineGps[this.lineId])
108   - lineGps[this.lineId] = [];
109   - //线路和设备号映射
110   - //lineGps[this.lineId].push(this.deviceId);
111   - })*/
112   - }
113   -
114   - //先暂时重绘,后面再优化
115   - if(cLineCode){
116   - drawLineAndGps(cLineCode);
117   - /*var showList = [];
118   - if(lineGps[cLineCode]){
119   - $.each(lineGps[cLineCode], function(){
120   - showList.push(allGps[this]);
121   - });
122   - }
123   - mapObj.drawGpsMarker(showList);*/
124   - }
125   - });
126   -
127   - var exports = {
128   - // 加载车辆信息
129   - showData: function(){
130   - //要展示的线路
131   - var lines = JSON.parse(storage.getItem('lineControlItems'));
132   -
133   - var htmlStr = template('vehicle_panel_temp', {list: lines});
134   - $('.mapRightWrap').html(htmlStr).addClass('vehicle');
135   - //滚动条
136   - /*$('.gps-line-wrap').slimscroll({
137   - height: '100%',
138   - alwaysVisible: true
139   - });*/
140   - /*var line = {code: 10103, name: '119路'};
141   - $get('/gps/real/line/' + line.code, null, function(data){
142   - //过滤掉没有自编号和站点名为空的
143   - var newArray = [];
144   - $.each(data, function(i, obj){
145   - if(obj.nbbm != null && obj.stationName != null)
146   - newArray.push(obj);
147   - });
148   -
149   - var htmlStr = template('vehicle_panel_temp', {list: newArray});
150   - $('.mapRightWrap').html(htmlStr).addClass('vehicle');
151   -
152   - //在地图上画出线路
153   - var mapObj;
154   - mapObj = getCurr();
155   - mapObj.drawLine(line.name, newArray);
156   - });*/
157   - },
158   - showDataLazy : function() {
159   - setTimeout(exports.showData, 1000);
160   - },
161   - drawLineAndGps: function(lineCode){
162   - drawLineAndGps(lineCode);
163   - },
164   - //获取所有的车辆 - 从GPS定时定距里查询
165   - getAllGps: function(){
166   - var array = [];
167   - /*var array = [
168   - {nbbm: 'B-91524', state: 0, timestamp: 1469427233000, stationName: '金桥路浦东大道', lineId: 1024, lon: 121.504921, lat: 31.086559, deviceId: 000},
169   - {nbbm: 'B-91334', state: 1, timestamp: 1469427233000, stationName: '博山东路', lineId: 1024, lon: 121.504921, lat: 31.086559, deviceId: 111},
170   - {nbbm: 'B-91224', state: 0, timestamp: 1469427233000, stationName: '闵浦大桥', lineId: 1024, lon: 121.504921, lat: 31.086559, deviceId: 222},
171   - {nbbm: 'B-91124', state: 0, timestamp: 1469427312000, stationName: '旧金山', lineId: 1024, lon: 121.504921, lat: 31.086559, deviceId: 333},
172   - {nbbm: 'B-91924', state: -1, timestamp: 1469427233000, stationName: '硅谷', lineId: 1024, lon: 121.504921, lat: 31.086559, deviceId: 444},
173   - {nbbm: 'B-92224', state: 0, timestamp: 1469427312000, stationName: '意大利', lineId: 1024, lon: 121.504921, lat: 31.086559, deviceId: 555}
174   - ];*/
175   - for(var deviceId in allGps)
176   - array.push(allGps[deviceId]);
177   - return array;
178   - },
179   - clear: function(){
180   - cLineCode = null;
181   - },
182   - toPlayBack:toPlayBack
183   - };
184   -
185   - return exports;
186   -})();
187 0 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/real.html
... ... @@ -18,6 +18,9 @@
18 18 <span class="item" id="trafficItem">
19 19 实时路况
20 20 </span>
  21 + <span class="item" id="openWindow">
  22 + 新窗口
  23 + </span>
21 24 </div>
22 25 </div>
23 26  
... ... @@ -83,11 +86,70 @@
83 86  
84 87 <div id="temps"></div>
85 88  
86   -<script src="/pages/mapmonitor/real/js/map_platform.js" data-exclude=1></script>
87   -<script src="/pages/mapmonitor/real/js/vehicle.js" data-exclude=1></script>
  89 +<script src="/assets/js/TransGPS.js" data-exclude=1></script>
  90 +<script src="/pages/mapmonitor/real/js/map/iMap.js" data-exclude=1></script>
  91 +<script src="/pages/mapmonitor/real/js/lineGroup.js" data-exclude=1></script>
88 92 <script src="/pages/mapmonitor/real/js/search.js" data-exclude=1></script>
89 93 <script src="/pages/mapmonitor/real/js/temp.js" data-exclude=1></script>
90 94 <script src="/pages/mapmonitor/real/js/real.js" data-exclude=1></script>
91 95 <script src="/pages/mapmonitor/real/js/playBack.js" data-exclude=1></script>
  96 +
  97 +<script src="/pages/mapmonitor/real/js/map/platform/baidu.js" data-exclude=1></script>
  98 +<script src="/pages/mapmonitor/real/js/map/platform/gaode.js" data-exclude=1></script>
92 99 <script>
  100 +var consts = {
  101 + mapContainer: '#mapContainer',
  102 + center_point: {
  103 + lng : 121.544336,
  104 + lat : 31.221315
  105 + },
  106 + allGps: {},
  107 + trafficBtn: '#trafficItem'//实时路况按钮
  108 +}
  109 +
  110 +setTimeout(function(){
  111 + iMap.addMap('baidu', '百度地图', baiduMap)
  112 + .addMap('gaode', '高德地图', gaodeMap)
  113 + .call('init');
  114 +}, 500);
  115 +
  116 +
  117 +//Canvas 带圆角的矩形
  118 +CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
  119 + if (w < 2 * r) r = w / 2;
  120 + if (h < 2 * r) r = h / 2;
  121 + this.strokeStyle ='rgba(0,102,0,.1)';
  122 + this.beginPath();
  123 + this.moveTo(x+r, y);
  124 + this.arcTo(x+w, y, x+w, y+h, r);
  125 + this.arcTo(x+w, y+h, x, y+h, r);
  126 + this.arcTo(x, y+h, x, y, r);
  127 + this.arcTo(x, y, x+w, y, r);
  128 + this.closePath();
  129 + return this;
  130 +}
  131 +
  132 +//GPS刷新事件
  133 +$('#mapContainer').on('gps_refresh', function(e, add, up){
  134 + if($(this).is(":hidden"))
  135 + return;
  136 + var all = add ,gps;
  137 + if(up)
  138 + all = all.concat(up);
  139 +
  140 + $.each(all, function(){
  141 + consts.allGps[this.deviceId] = this;
  142 + });
  143 +
  144 + var type = $('.mapTools .item.active').data('click');
  145 + console.log(type);
  146 + switch (type) {
  147 + case 'vehicle':
  148 + lineGroup.gpsRefresh();
  149 + break;
  150 + case 'search':
  151 + searchPanel.gpsRefresh();
  152 + break;
  153 + }
  154 +});
93 155 </script>
... ...
src/main/resources/static/pages/mapmonitor/real/temps/search.html
1 1 <script id="search_panel_temp" type="text/html">
2 2 <div class="input-group">
3   - <input type="text" id="realSearchInput" class="form-control" placeholder="车辆自编号搜索...">
  3 + <input type="text" id="realSearchInput" class="form-control" placeholder="搜索车辆...">
4 4 <span class="input-group-btn">
5 5 <button class="btn" type="button"><i class="fa fa-search"></i> 搜索</button>
6 6 </span>
... ... @@ -13,11 +13,10 @@
13 13 <script id="search_result_temp" type="text/html">
14 14 <div class="item_vehicle_list">
15 15 {{each list as gps i}}
16   - <p class="result_item item_vehicle" data-device={{gps.deviceId}}>
17   - &nbsp;{{gps.nbbm}} &nbsp;&nbsp;- {{if gps.state==0}}营运中{{else if gps.state==1}}非营运{{else}}未知营运状态{{/if}}<br>
  16 + <p class="result_item item_vehicle {{if gps.state==0}}state_online{{/if}}" data-device={{gps.deviceId}}>
  17 + &nbsp;{{gps.nbbm}} &nbsp;&nbsp;- {{if gps.state==0}}营运{{else}}非营运{{/if}}<br>
18 18 <span class="sub_text"> {{gps.stationName}}({{gps.fromNow}} 更新)</span>
19 19 </p>
20   -
21 20 {{/each}}
22 21 </div>
23 22 </script>
... ...
src/main/resources/static/pages/mapmonitor/real/temps/vehicle.html
... ... @@ -28,10 +28,16 @@
28 28 </script>
29 29 <script id="vehicle_panel_collapse_temp" type="text/html">
30 30 {{each list as gpsObj i}}
31   - <div class="vehicle-item online" >
  31 + <div class="vehicle-item {{if gpsObj.state==0}}online_{{gpsObj.upDown}}{{else}}offline{{/if}}" >
32 32 <div class="text">
33   - <span class="nbbm goto-marker" data-deviceId="{{gpsObj.deviceId}}"><i class="fa fa-circle"></i> &nbsp;{{gpsObj.nbbm}}</span>
34   - <span style="font-size: 13px;">{{gpsObj.stationName}}</span>
  33 + <span class="nbbm goto-marker" data-deviceId="{{gpsObj.deviceId}}">
  34 + <i class="fa fa-circle"></i> &nbsp;{{gpsObj.nbbm}}</span>
  35 +
  36 + {{if gpsObj.state==0}}
  37 + <span style="font-size: 13px;">{{gpsObj.stationName}}</span>
  38 + {{else}}
  39 + <span style="font-size: 13px;">非营运</span>
  40 + {{/if}}
35 41 </div>
36 42 <div class="icon">
37 43 <!--<i class="fa fa-file-text-o"></i>-->
... ... @@ -46,48 +52,41 @@
46 52 <!-- gps信息窗口 -->
47 53 <script id="gps_info_win_temp" type="text/html">
48 54 <div class="gps_info_win">
49   -<h4 style="color:#0E6AF9;">
  55 +<h5 style="color:#0E6AF9;">
50 56 {{if stationName!=null}}
51 57 {{stationName}}
52 58 {{else}}
53 59 未知站点
54 60 {{/if}}
55   -
56   -{{if upDown == 0}}
57   -(上行)
58   -{{else if upDown == 1}}
59   -(下行)
60   -{{else}}
61   -(未知的上下行)
62   -{{/if}}
63   -</h4>
64   -<h4 style="color: #0E6AF9;margin: 5px 0 5px 0;">
65   - {{nbbm}}
  61 +</h5>
  62 +<h4 style="margin: 5px 0 5px 0;">
  63 + <span style="color: #0E6AF9;">{{nbbm}}</span>
66 64 </h4>
67 65 <p>
68   -路牌:
69   -{{if currSch!=null}}
70   - {{currSch.lpName}}
71   -{{/if}}
72   -</p>
73   -<p>
74 66 营运状态:{{if state==0}}营运{{else}}非营运{{/if}}
75 67 </p>
76 68 <p>
77   -在线状态:在线
  69 +走向:{{if upDown==0}}上行{{else if upDown==1}}下行{{else}}未知走向{{/if}}
78 70 </p>
79 71 <p>速度:{{speed}}</p>
  72 +<p>经度:{{lon}}</p>
  73 +<p>纬度:{{lat}}</p>
  74 +
  75 +<p style="color: gray;">{{fromNow}} 更新</p>
80 76 <hr>
  77 +<p>
  78 +{{if currSch!=null}}
  79 + 路牌:{{currSch.lpName}}
  80 +{{/if}}
  81 +</p>
81 82 <p class="banci-info">
82   - 开往
83   - {{if currSch!=null}}{{currSch.zdzName}}{{/if}}
84   - ( 预计 ? 到达 )
  83 + {{if currSch!=null}}开往 {{currSch.zdzName}}{{/if}}
85 84 </p>
86 85 <p class="banci-info">
87 86 {{if nextSch!=null}}
88 87 下一班{{nextSch.qdzName}} {{nextSch.fcsj}} 发车
89 88 {{/if}}
90 89 </p>
91   -<a href="javascript:vehiclePanel.toPlayBack('{{nbbm}}', '{{lineId}}')" class="link_to_pback" style="color:#006600;font-size:12px;">轨迹回放</a>
  90 +<a href="javascript:lineGroup.toPlayBack('{{nbbm}}', '{{lineId}}')" class="link_to_pback" style="color:#006600;font-size:12px;">轨迹回放</a>
92 91 </div>
93 92 </script>
94 93 \ No newline at end of file
... ...