潘钊 / bsth_control · Commits

Commit b29dcfae3e70d38ea80705f417e73fc017baaa15

Authored by 潘钊
1 parent b22c2083

add play back

Inline Side-by-side
Showing 18 changed files with 1100 additions and 43 deletions
src/main/java/com/bsth/controller/realcontrol/ScheduleRealInfoController.java
  View file @b29dcfa
... ... @@ -241,6 +241,18 @@ public class ScheduleRealInfoController extends BaseController<ScheduleRealInfo,
241 241 public List<ScheduleRealInfo> findByLineAndUpDown(@RequestParam Integer line,@RequestParam Integer upDown){
242 242 return ScheduleBuffer.findByLineAndUpDown(line, upDown);
243 243 }
  244 +
  245 + /**
  246 + *
  247 + * @Title: findRouteByLine
  248 + * @Description: TODO(获取线路的站点，路段路由)
  249 + * @param @param lineCode
  250 + * @throws
  251 + */
  252 + @RequestMapping(value = "/findRouteByLine")
  253 + public Map<String, Object> findRouteByLine(@RequestParam Integer lineId){
  254 + return scheduleRealInfoService.findRouteByLine(lineId);
  255 + }
244 256  
245 257 /**
246 258 *
... ...
src/main/java/com/bsth/service/realcontrol/ScheduleRealInfoService.java
  View file @b29dcfa
... ... @@ -80,4 +80,6 @@ public interface ScheduleRealInfoService extends BaseService&lt;ScheduleRealInfo, L
80 80  
81 81 Map<String, Object> outgoAdjustAll(String params);
82 82  
  83 + Map<String, Object> findRouteByLine(Integer lineId);
  84 +
83 85 }
... ...
src/main/java/com/bsth/service/realcontrol/impl/ScheduleRealInfoServiceImpl.java
  View file @b29dcfa
... ... @@ -33,10 +33,13 @@ import com.bsth.repository.realcontrol.ScheduleRealInfoRepository;
33 33 import com.bsth.repository.schedule.CarConfigInfoRepository;
34 34 import com.bsth.repository.schedule.EmployeeConfigInfoRepository;
35 35 import com.bsth.security.util.SecurityUtils;
  36 +import com.bsth.service.SectionRouteService;
36 37 import com.bsth.service.impl.BaseServiceImpl;
37 38 import com.bsth.service.realcontrol.ScheduleRealInfoService;
38 39 import com.bsth.service.realcontrol.buffer.ScheduleBuffer;
39 40 import com.bsth.util.ReportUtils;
  41 +import com.bsth.util.TransGPS;
  42 +import com.bsth.util.TransGPS.Location;
40 43 import com.bsth.vehicle.BorrowCenter;
41 44 import com.bsth.vehicle.common.CommonMapped;
42 45 import com.google.common.base.Splitter;
... ... @@ -58,6 +61,9 @@ public class ScheduleRealInfoServiceImpl extends BaseServiceImpl&lt;ScheduleRealInf
58 61 CarConfigInfoRepository carConfigInfoRepository;
59 62  
60 63 @Autowired
  64 + SectionRouteService sectionRouteService;
  65 +
  66 + @Autowired
61 67 BorrowCenter borrowCenter;
62 68  
63 69 Logger logger = LoggerFactory.getLogger(this.getClass());
... ... @@ -660,4 +666,74 @@ public class ScheduleRealInfoServiceImpl extends BaseServiceImpl&lt;ScheduleRealInf
660 666 }
661 667 return rs;
662 668 }
  669 +
  670 + @Override
  671 + public Map<String, Object> findRouteByLine(Integer lineId) {
  672 + Map<String, Object> map = new HashMap<>();
  673 + //上行
  674 + map.put("line.id_eq", lineId);
  675 + map.put("directions_eq", 0);
  676 + List<Map<String, Object>> upList = sectionRouteService.getSectionRoute(map);
  677 +
  678 + //下行
  679 + map.put("directions_eq", 1);
  680 + List<Map<String, Object>> downList = sectionRouteService.getSectionRoute(map);
  681 +
  682 + System.out.println(upList);
  683 + System.out.println(downList);
  684 +
  685 + Map<String, Object> rs = new HashMap<>();
  686 +
  687 + String upVectors = "", vec;
  688 + //拼接上行路段
  689 + for(Map<String, Object> temp : upList){
  690 + vec = temp.get("sectionBsectionVector").toString();
  691 + upVectors += vec.subSequence(11, vec.length() - 2) + " ";
  692 + }
  693 +
  694 + //拼接下行路段
  695 + String downVectors = "";
  696 + for(Map<String, Object> temp : downList){//LINESTRING(
  697 + vec = temp.get("sectionBsectionVector").toString();
  698 + downVectors += vec.subSequence(11, vec.length() - 2) + " ";
  699 + }
  700 +
  701 +
  702 + rs.put("up", upVectors);
  703 + //上行gcj
  704 + rs.put("up_gcj", BdToGcjString(upVectors));
  705 + rs.put("down", downVectors);
  706 + //下行gcj
  707 + rs.put("down_gcj", BdToGcjString(downVectors));
  708 + rs.put("lineId", lineId);
  709 +
  710 + return rs;
  711 + }
  712 +
  713 + /**
  714 + *
  715 + * @Title: BdToGcjString
  716 + * @Description: TODO(将百度路由字符串 转 成GCJ 字符串)
  717 + * @param @param bdStr
  718 + * @throws
  719 + */
  720 + public String BdToGcjString(String bdStr){
  721 + String[] array = bdStr.split(",")
  722 + ,subArray;
  723 + if(array.length == 0 || bdStr.length() < 2)
  724 + return "";
  725 +
  726 + String gcjStr = "";
  727 + Location location;
  728 + for(String crd : array){
  729 + subArray = crd.split(" ");
  730 + if(subArray.length != 2)
  731 + continue;
  732 + location = TransGPS.bd_decrypt(TransGPS.LocationMake(Double.parseDouble(subArray[0]), Double.parseDouble(subArray[1])));
  733 +
  734 + gcjStr += location.getLng() + " " + location.getLat() + ",";
  735 + }
  736 +
  737 + return gcjStr.substring(0, gcjStr.length() - 1);
  738 + }
663 739 }
... ...
src/main/java/com/bsth/util/DateUtils.java
  View file @b29dcfa
... ... @@ -13,6 +13,14 @@ public class DateUtils {
13 13 cal.set(Calendar.MILLISECOND, 0);
14 14 return (int) (cal.getTimeInMillis() / 1000);
15 15 }
  16 +
  17 + public static Long getTimesmorning(Calendar cal) {
  18 + cal.set(Calendar.HOUR_OF_DAY, 0);
  19 + cal.set(Calendar.SECOND, 0);
  20 + cal.set(Calendar.MINUTE, 0);
  21 + cal.set(Calendar.MILLISECOND, 0);
  22 + return cal.getTimeInMillis() / 1000;
  23 + }
16 24  
17 25 // 获得当天24点时间
18 26 public static int getTimesnight() {
... ... @@ -23,6 +31,14 @@ public class DateUtils {
23 31 cal.set(Calendar.MILLISECOND, 0);
24 32 return (int) (cal.getTimeInMillis() / 1000);
25 33 }
  34 +
  35 + public static Long getTimesnight(Calendar cal) {
  36 + cal.set(Calendar.HOUR_OF_DAY, 24);
  37 + cal.set(Calendar.SECOND, 0);
  38 + cal.set(Calendar.MINUTE, 0);
  39 + cal.set(Calendar.MILLISECOND, 0);
  40 + return cal.getTimeInMillis();
  41 + }
26 42  
27 43 // 获得本周一0点时间
28 44 public static int getTimesWeekmorning() {
... ...
src/main/java/com/bsth/vehicle/gpsdata/controller/GpsDataController.java
  View file @b29dcfa
... ... @@ -34,6 +34,12 @@ public class GpsDataController {
34 34 return gpsBuffer.getListByLines(Splitter.on(",").split(lineCodes).iterator());
35 35 }
36 36  
  37 + /**
  38 + *
  39 + * @Title: history
  40 + * @Description: TODO(这个方法给测试页面用)
  41 + * @throws
  42 + */
37 43 @RequestMapping(value = "/history/{device}")
38 44 public List<Map<String, Object>> history(@PathVariable("device") String device
39 45 ,@RequestParam Long startTime
... ... @@ -42,4 +48,11 @@ public class GpsDataController {
42 48  
43 49 return gpsDataService.history(device, startTime, endTime, directions);
44 50 }
  51 +
  52 + @RequestMapping(value = "/gpsHistory/multiple")
  53 + public List<Map<String, Object>> gpsHistory(@RequestParam String[] nbbmArray
  54 + ,@RequestParam Long st
  55 + ,@RequestParam Long et){
  56 + return gpsDataService.history(nbbmArray, st, et);
  57 + }
45 58 }
... ...
src/main/java/com/bsth/vehicle/gpsdata/service/GpsDataService.java
  View file @b29dcfa
... ... @@ -6,4 +6,6 @@ import java.util.Map;
6 6 public interface GpsDataService {
7 7  
8 8 List<Map<String, Object>> history(String device, Long startTime, Long endTime, int directions);
  9 +
  10 + List<Map<String, Object>> history(String[] nbbmArray, Long st, Long et);
9 11 }
... ...
src/main/java/com/bsth/vehicle/gpsdata/service/GpsDataServiceImpl.java
  View file @b29dcfa
... ... @@ -5,6 +5,8 @@ import java.sql.PreparedStatement;
5 5 import java.sql.ResultSet;
6 6 import java.util.ArrayList;
7 7 import java.util.Calendar;
  8 +import java.util.Collections;
  9 +import java.util.Comparator;
8 10 import java.util.Date;
9 11 import java.util.HashMap;
10 12 import java.util.List;
... ... @@ -12,13 +14,18 @@ import java.util.Map;
12 14  
13 15 import org.springframework.stereotype.Service;
14 16  
  17 +import com.bsth.util.DateUtils;
15 18 import com.bsth.util.TransGPS;
16 19 import com.bsth.util.TransGPS.Location;
17 20 import com.bsth.util.db.DBUtils_MS;
  21 +import com.bsth.vehicle.common.CommonMapped;
18 22  
19 23 @Service
20 24 public class GpsDataServiceImpl implements GpsDataService{
21 25  
  26 + /** 历史gps查询最大范围 24小时 */
  27 + final static Long GPS_RANGE= 60 * 60 * 24L;
  28 +
22 29 //历史gps查询
23 30 @Override
24 31 public List<Map<String, Object>> history(String device, Long startTime, Long endTime, int directions) {
... ... @@ -34,7 +41,7 @@ public class GpsDataServiceImpl implements GpsDataService{
34 41 return null;
35 42 }*/
36 43  
37   - String sql = "select DEVICE_ID,LON,LAT,TS,INOUT_STOP,SERVICE_STATE ,STOP_NO from BSTH_C_GPS_INFO where days_year=? and device_id=? and ts > ? and ts < ?";
  44 + String sql = "select DEVICE_ID,LON,LAT,TS,INOUT_STOP,SERVICE_STATE ,STOP_NO from bsth_c_gps_info where days_year=? and device_id=? and ts > ? and ts < ?";
38 45 Connection conn = null;
39 46 PreparedStatement ps = null;
40 47 ResultSet rs = null;
... ... @@ -94,4 +101,126 @@ public class GpsDataServiceImpl implements GpsDataService{
94 101 || (serviceState & 0x08000000) == 0x08000000) return -1;
95 102 return (byte)(((serviceState & 0x10000000) == 0x10000000) ? 1 : 0);
96 103 }
  104 +
  105 +
  106 +
  107 + @Override
  108 + public List<Map<String, Object>> history(String[] nbbmArray, Long st, Long et) {
  109 + List<Map<String, Object>> list = new ArrayList<>();
  110 + //超过最大查询范围，直接忽略
  111 + if(et - st > GPS_RANGE)
  112 + return list;
  113 +
  114 + //转换设备号
  115 + String[] devices = new String[nbbmArray.length];
  116 + for(int i = 0; i < nbbmArray.length; i ++){
  117 + devices[i] = CommonMapped.vehicDeviceBiMap.inverse().get(nbbmArray[i]);
  118 + }
  119 + //String device = CommonMapped.vehicDeviceBiMap.inverse().get(nbbm);
  120 + //day_of_year
  121 + Calendar sCal = Calendar.getInstance();
  122 + sCal.setTime(new Date(st * 1000));
  123 + int sDayOfYear = /*sCal.get(Calendar.DAY_OF_YEAR)*/200;
  124 +
  125 + Calendar eCal = Calendar.getInstance();
  126 + eCal.setTime(new Date(et * 1000));
  127 + int eDayOfYear = /*eCal.get(Calendar.DAY_OF_YEAR)*/200;
  128 +
  129 + //如果是同一天
  130 + if(sDayOfYear == eDayOfYear){
  131 + list = findByTs(sDayOfYear, st, et, devices);
  132 + }
  133 + else{
  134 + //跨天
  135 + for(int i = sDayOfYear; i <= eDayOfYear; i ++){
  136 +
  137 + if(i == sDayOfYear)
  138 + list.addAll(findByTs(i, st, DateUtils.getTimesnight(sCal), devices));
  139 + else if(i == eDayOfYear)
  140 + list.addAll(findByTs(i, DateUtils.getTimesmorning(sCal), et, devices));
  141 + else
  142 + list.addAll(findByTs(i, DateUtils.getTimesmorning(sCal), DateUtils.getTimesnight(sCal), devices));
  143 +
  144 + //加一天
  145 + sCal.add(Calendar.DATE, 1);
  146 + }
  147 + }
  148 +
  149 + //按时间排序
  150 + Collections.sort(list, new Comparator<Map<String, Object>>() {
  151 +
  152 + @Override
  153 + public int compare(Map<String, Object> o1, Map<String, Object> o2) {
  154 + return (int) (Long.parseLong(o1.get("ts").toString()) - Long.parseLong(o2.get("ts").toString()));
  155 + }
  156 + });;
  157 + return list;
  158 + }
  159 +
  160 + public List<Map<String, Object>> findByTs(int dayOfYear,Long st, Long et, String[] devices){
  161 + List<Map<String, Object>> list = new ArrayList<>();
  162 + Map<String, Object> map = null;
  163 +
  164 + //setArray 不好用，直接拼 in 语句
  165 + String inv = "";
  166 + for(String device : devices)
  167 + inv += ("'" + device + "',");
  168 + inv = inv.substring(0, inv.length() - 1);
  169 +
  170 + String sql = "select DEVICE_ID,LON,LAT,TS,INOUT_STOP,SERVICE_STATE ,STOP_NO from bsth_c_gps_info where days_year=? and device_id in ("+inv+") and ts > ? and ts < ?";
  171 + Connection conn = null;
  172 + PreparedStatement ps = null;
  173 + ResultSet rs = null;
  174 + try{
  175 + conn = DBUtils_MS.getConnection();
  176 + ps = conn.prepareStatement(sql);
  177 + ps.setInt(1, dayOfYear);
  178 + /*ps.setArray(2, conn.createArrayOf("VARCHAR", devices));*/
  179 + ps.setLong(2, st * 1000);
  180 + ps.setLong(3, et * 1000);
  181 +
  182 + rs = ps.executeQuery();
  183 + Float lon, lat;
  184 + Location bdLoc, gdLoc;
  185 + int upDown;
  186 + while (rs.next()) {
  187 + upDown = getUpOrDown(rs.getLong("SERVICE_STATE"));
  188 + map = new HashMap<>();
  189 +
  190 + lon = rs.getFloat("LON");
  191 + lat = rs.getFloat("LAT");
  192 + //高德坐标
  193 + gdLoc = TransGPS.transformFromWGSToGCJ(TransGPS.LocationMake(lon, lat));
  194 + map.put("gd_lon", gdLoc.getLng());
  195 + map.put("gd_lat", gdLoc.getLat());
  196 + //百度坐标
  197 + bdLoc = TransGPS.bd_encrypt(gdLoc);
  198 + map.put("bd_lon", bdLoc.getLng());
  199 + map.put("bd_lat", bdLoc.getLat());
  200 +
  201 + map.put("device", rs.getString("DEVICE_ID"));
  202 + map.put("ts", rs.getLong("TS"));
  203 + map.put("stopNo", rs.getString("STOP_NO"));
  204 + map.put("inout_stop", rs.getInt("INOUT_STOP"));
  205 + map.put("nbbm", CommonMapped.vehicDeviceBiMap.get(rs.getString("DEVICE_ID")));
  206 + map.put("state", 0);
  207 + //上下行
  208 + map.put("upDown", upDown);
  209 + list.add(map);
  210 + }
  211 + }catch(Exception e){
  212 + e.printStackTrace();
  213 + }finally {
  214 + DBUtils_MS.close(rs, ps, conn);
  215 + }
  216 + return list;
  217 + }
  218 +/*
  219 + public static void main(String[] args) {
  220 + Calendar eCal = Calendar.getInstance();
  221 + eCal.setTime(new Date());
  222 +
  223 + int dayOfYear = eCal.get(Calendar.DAY_OF_YEAR);
  224 + System.out.println(dayOfYear);
  225 + }*/
97 226 }
... ...
src/main/resources/static/pages/control/line/child_pages/outgo_adjust_all.html
  View file @b29dcfa
... ... @@ -87,7 +87,7 @@
87 87 </script>
88 88  
89 89 <script id="outgo_adjust_change_text_temp" type="text/html">
90   -<h5>B-89524（闵行11路）</h5>
  90 +<h5>{{carCode}}（{{lineName}}）</h5>
91 91 <hr>
92 92 <div class="change-confirm-text">
93 93 {{each list as item i}}
... ... @@ -130,7 +130,6 @@
130 130 //默认选中线路
131 131 lineSelect.val(schedul.xlBm).trigger("change");
132 132  
133   -
134 133 }).on('change', lineSelectChange);
135 134  
136 135  
... ... @@ -143,7 +142,7 @@
143 142 $get('/cci/all', {'xl.lineCode_eq': lineCode}, function(rs){
144 143 var data = [];
145 144 $.each(rs, function(){
146   - data.push({id: this.cl.carCode, text: this.cl.carCode})
  145 + data.push({id: this.cl.insideCode, text: this.cl.insideCode})
147 146 });
148 147 vehicSelect.html('').select2({data: data});
149 148  
... ... @@ -198,7 +197,9 @@
198 197 changes.push({old: old, t: t, id: $(e).parents('tr').data('id')});
199 198 }
200 199  
201   - var text = template('outgo_adjust_change_text_temp', {list: changes});
  200 + var carCode = vehicSelect.val()
  201 + ,lineName = _data.getLineIds()[lineSelect.val()];
  202 + var text = template('outgo_adjust_change_text_temp', {list: changes, carCode: carCode, lineName: lineName});
202 203 layer.confirm(text, {
203 204 btn: ['确认调整','取消'],title:'待发调整确认'
204 205 }, function(){
... ...
src/main/resources/static/pages/control/line/js/main.js
  View file @b29dcfa
... ... @@ -84,7 +84,7 @@
84 84 //去掉loading
85 85 $('.load-anim').fadeOut();
86 86 $('menu.menu').show();
87   - }, 500);
  87 + }, 100);
88 88 }, 400);
89 89  
90 90 }
... ...
src/main/resources/static/pages/control/lineallot/allot.html
  View file @b29dcfa
... ... @@ -260,19 +260,48 @@ $(function(){
260 260 layer.alert('你还没有选择线路！',{icon: 3});
261 261 return;
262 262 }
263   - //将选择的线路写入localstorage
264 263  
  264 + layer.msg('正在更新缓存...', {icon: 16});
  265 + //将选择的线路写入localstorage
265 266 var lsData = [];
266 267 $.each(lines, function(i, e){
267 268 lsData.push(lineIdMap[$(e).data('id')]);
268 269 });
269 270 storage.setItem('lineControlItems', JSON.stringify(lsData));
270   -
271   - //跳转到线路调度
272   - loadPage('/pages/control/line/index.html');
  271 + //将线路路由缓存到localstorage
  272 + cacheRoute(lsData, function(cacheData){
  273 + for(var lineCode in cacheData){
  274 + storage.setItem(lineCode + '_route', JSON.stringify(cacheData[lineCode]));
  275 + }
  276 +
  277 + layer.closeAll();
  278 + //跳转到线路调度
  279 + loadPage('/pages/control/line/index.html');
  280 + });
273 281 //window.location.href = '/pages/control/line/index.html';
274 282 });
275 283  
  284 +
  285 + function cacheRoute(lsData, cb){
  286 + var i = 0, cacheData = {};
  287 + (function(){
  288 + if(i >= lsData.length){
  289 + cb && cb(cacheData);
  290 + return;
  291 + }
  292 + var f = arguments.callee
  293 + ,item = lsData[i];
  294 +
  295 + $.get('/realSchedule/findRouteByLine', {lineId: item.id}, function(rs){
  296 + if(rs && rs.lineId){
  297 + cacheData[item.lineCode] = rs;
  298 + i ++;
  299 + f();
  300 + }
  301 + });
  302 + })();
  303 + }
  304 +
276 305 //历史纪录
277 306 $('#historyBtn').on('click', function(){
278 307 var lineControlItems = window.localStorage.getItem('lineControlItems');
... ...
src/main/resources/static/pages/mapmonitor/real/css/real.css
  View file @b29dcfa
... ... @@ -47,9 +47,9 @@ label.BMapLabel{
47 47 right: 10px;
48 48 background-color: #3B3F51;
49 49 top: 98px;
50   - padding-top: 15px;
  50 + /* padding-top: 15px; */
51 51  
52   - transition: all .5s ease;
  52 + transition: all .3s ease;
53 53  
54 54 }
55 55  
... ... @@ -85,6 +85,20 @@ label.BMapLabel{
85 85 height: calc(100% - 110px);
86 86 }
87 87  
  88 +.mapRightWrap.to_playBack{
  89 + transform:rotateY(180deg);
  90 + height: 476px;
  91 + width: 370px
  92 +}
  93 +
  94 +.mapRightWrap.to_playBack .alert{
  95 + font-size: 13px;
  96 + margin-top: 1px;
  97 + width: calc(100% - 2px);
  98 + margin-left: 1px;
  99 + border-radius: 4px 4px 0 0 !important;
  100 +}
  101 +
88 102 .mapRightWrap.vehicle{
89 103 height: calc(100% - 110px);
90 104 overflow: auto;
... ... @@ -95,6 +109,30 @@ label.BMapLabel{
95 109 padding-top: 0;
96 110 }
97 111  
  112 +.playBack form{
  113 + padding: 13px 20px 0 0;
  114 + color: #f5f3f3;
  115 +}
  116 +
  117 +.playBack .btn-lg{
  118 + padding: 8px 14px;
  119 + font-size: 16px;
  120 + border-radius: 4px !important;
  121 +}
  122 +
  123 +.playBack hr{
  124 + border-color: #5c6e86;
  125 +}
  126 +
  127 +.playBack form .control-label{
  128 + padding-right: 5px;
  129 + font-family: 微软雅黑;
  130 +}
  131 +
  132 +.playBack form .help-block{
  133 + color: #b6b6b6
  134 +}
  135 +
98 136 .mapRightWrap.search .input-group .input-group-btn button{
99 137 color: #FFFFFF;
100 138 background-color: #1BBC9B;
... ... @@ -512,6 +550,10 @@ html{
512 550 color: #000;
513 551 }
514 552  
  553 +.mapRightWrap.gaode.playBack form {
  554 + color: #8e8282;
  555 +}
  556 +
515 557 .mapRightWrap.gaode.vehicle p.head{
516 558 border-bottom: 1px dashed #E2DFDF;
517 559 color: #7D7777;
... ... @@ -587,3 +629,165 @@ html{
587 629 margin-bottom: 13px;
588 630 font-size: 13px;
589 631 }
  632 +
  633 +.play-back-list{
  634 + display: none;
  635 + position: absolute;
  636 + width: 295px;
  637 + right: 5px;
  638 + background: linear-gradient(to right ,#0d4770,#0a3f64);
  639 + z-index: 9999;
  640 +
  641 + height: calc(100% - 50px);
  642 + top: 25px;
  643 + padding: 15px 7px 3px;
  644 +}
  645 +
  646 +.progress-wrap{
  647 + width: calc(100% - 340px);
  648 + height: 10px;
  649 + bottom: 20px;
  650 + left: 20px;
  651 + position: absolute;
  652 + display: none;
  653 +}
  654 +
  655 +.play-back-progress{
  656 + position: absolute;
  657 + height: 10px;
  658 + border-radius: 12px !important;
  659 + cursor: pointer;
  660 + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  661 + border: 1px solid #d0d0d0;
  662 + background: white;
  663 + width: 100%;
  664 +}
  665 +
  666 +.progress-body{
  667 + width: 100%;
  668 + height: 100%;
  669 + position: relative;
  670 +}
  671 +
  672 +.play-back-progress-mark{
  673 + position: absolute;
  674 + height: 10px;
  675 + z-index: 10000;
  676 + border-radius: 12px 0 0 12px !important;
  677 + background: #1bbc9b;
  678 + width: 0;
  679 + cursor: pointer;
  680 +
  681 + /* transition: all 1s ease; */
  682 +}
  683 +
  684 +.play-back-btns{
  685 + display: none;
  686 + background: rgb(255, 255, 255);
  687 + width: 206px;
  688 + height: 44px;
  689 + position: absolute;
  690 + right: 320px;
  691 + bottom: 40px;
  692 + padding: 9px 0 0 25px;
  693 + border-radius: 15px !important;
  694 +}
  695 +
  696 +.play-back-btns .dropup{
  697 + display: inline-block;
  698 +}
  699 +
  700 +.play-back-btns .dropdown-menu{
  701 + min-width: 88px;
  702 + width: 88px;
  703 +}
  704 +
  705 +.play-back-btns>i.playBtn{
  706 + font-size: 30px;
  707 + margin-right: 7px;
  708 + cursor: pointer;
  709 + color: #424242;
  710 + vertical-align: middle;
  711 +}
  712 +
  713 +.play-back-btns>i.playBtn:HOVER{
  714 + color: #000;
  715 +}
  716 +
  717 +.play-back-btns>i.fa-pause{
  718 + font-size: 26px;
  719 + margin-right: 8px;
  720 +}
  721 +
  722 +.pback-logs{
  723 + height: 100%;
  724 + width: 100%;
  725 + color: #e1e1e1;
  726 +}
  727 +.pback-logs-item{
  728 + padding: 8px 12px;
  729 + border-bottom: 1px dashed #5a5a5a;
  730 +}
  731 +
  732 +.pback-logs-item-date{
  733 + font-size: 13px;
  734 + display: block;
  735 + text-align: left;
  736 + color: #a2a2a2;
  737 +}
  738 +
  739 +.play-back-list .slimScrollBar{
  740 + background: rgb(167, 170, 169) !important;
  741 + border-radius: 7px !important;
  742 +}
  743 +
  744 +.progress-mark-info{
  745 + position: absolute;
  746 + width: 62px;
  747 + height: 30px;
  748 + z-index: 10000;
  749 + background: #1bbc9b;
  750 + display: none;
  751 + top: -35px;
  752 + padding: 5px 3px;
  753 + color: white;
  754 +}
  755 +
  756 +#progress-mark-time{
  757 + /* transition: all 1s ease; */
  758 +}
  759 +
  760 +#progress-mark-time-mouse{
  761 + background: #aeaeae;
  762 +}
  763 +
  764 +#playSpeed{
  765 + font-size: 15px;
  766 + vertical-align: middle;
  767 + font-weight: 600;
  768 + margin-right: 12px;
  769 + color: #565555;
  770 + padding: 4px 8px 4px 13px;
  771 + border-radius: 5px !important;
  772 + cursor: pointer;
  773 +}
  774 +
  775 +#playSpeed .fa-angle-up{
  776 + color: #5f5d5d;
  777 + margin-left: 7px;
  778 +}
  779 +
  780 +#playSpeed:HOVER{
  781 + background: #bee1d3;
  782 +}
  783 +
  784 +#playSpeedText{
  785 + display: inline-block;
  786 + width: 20px;
  787 + text-align: center;
  788 +}
  789 +
  790 +/* #playSpeed i{
  791 + color: #5f5d5d;
  792 + margin-left: 7px;
  793 +} */
... ...
src/main/resources/static/pages/mapmonitor/real/js/map_platform.js
  View file @b29dcfa
... ... @@ -45,6 +45,9 @@ var realMap = (function() {
45 45 enableMessage:true
46 46 };
47 47  
  48 + //线路路由
  49 + var polylines;
  50 +
48 51 //设备号和marker对照
49 52 var markersMap;
50 53 var real_map = {
... ... @@ -83,14 +86,26 @@ var realMap = (function() {
83 86 if (isVisible) {
84 87 ctrl.hide();
85 88 isVisible = false;
  89 + //调整线路路由透明度
  90 + $.each(polylines, function(){
  91 + this.setStrokeOpacity(0.5);
  92 + });
86 93 } else {
87 94 ctrl.show();
88 95 isVisible = true;
  96 + //调整线路路由透明度
  97 + $.each(polylines, function(){
  98 + this.setStrokeOpacity(0.1);
  99 + });
89 100 }
90 101 });
91 102 //百度路况控件自身关闭按钮
92 103 $('.portlet-fullscreen').on('click', '.maplibTc .maplibTcClose', function(){
93 104 isVisible = false;
  105 + //调整线路路由透明度
  106 + $.each(polylines, function(){
  107 + this.setStrokeOpacity(0.5);
  108 + });
94 109 });
95 110  
96 111 $('#tcWrap.maplibTc').addClass('animated bounceInLeft');
... ... @@ -104,6 +119,9 @@ var realMap = (function() {
104 119 }
105 120  
106 121 },
  122 + clear: function(){
  123 + currentMap.map.clearOverlays();
  124 + },
107 125 change : function() {
108 126 if(currentMap.mapName == REAL_BAIDU_TEXT)
109 127 return;
... ... @@ -149,26 +167,44 @@ var realMap = (function() {
149 167  
150 168 local.search(val);
151 169 },
152   - drawLine: function(lineName, cb){
  170 + drawLine: function(lineCode){
  171 + var map = currentMap.map;
  172 + map.clearOverlays();
  173 + polylines = [];
153 174 //画线路
154   - var busline = new BMap.BusLineSearch(currentMap.map,{
155   - renderOptions: {map: currentMap.map},
156   - onGetBusListComplete: function(result){
157   - if(result)
158   - busline.getBusLine(result.getBusListItem(0));
159   - else
160   - cb && cb();
161   - },
162   - onPolylinesSet: function(pline){
163   - cb && cb();
164   - },
165   - onGetBusLineComplete: function(line){
166   - line.getPolyline().setStrokeColor('#333');
167   - }
168   - });
169   - busline.getBusList(lineName);
  175 + //从localStorage里读取路由信息
  176 + var route = JSON.parse(storage.getItem(lineCode + '_route'));
  177 + var upLineOps = {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
  178 + ,downLineOps = {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5};
  179 +
  180 + var upPos = [], downPos = [], tempArray;
  181 + //上行
  182 + if(route.up){
  183 + $.each(route.up.split(','), function(){
  184 + tempArray = this.split(' ');
  185 + upPos.push(new BMap.Point(tempArray[0], tempArray[1]));
  186 + });
  187 +
  188 + var upLine = new BMap.Polyline(upPos, upLineOps);
  189 + map.addOverlay(upLine);
  190 +
  191 + polylines.push(upLine);
  192 + map.panTo(upPos[parseInt(upPos.length / 2)]);
  193 + }
  194 + //下行
  195 + if(route.down){
  196 + $.each(route.down.split(','), function(){
  197 + tempArray = this.split(' ');
  198 + downPos.push(new BMap.Point(tempArray[0], tempArray[1]));
  199 + });
  200 +
  201 + var downLine = new BMap.Polyline(downPos, downLineOps);
  202 + map.addOverlay(downLine);
  203 + polylines.push(downLine);
  204 +
  205 + }
170 206 },
171   - //将GPS信号画到地图上
  207 + //批量将GPS信号画到地图上
172 208 drawGpsMarker: function(gpsList){
173 209 markersMap = {};
174 210 var map = currentMap.map;
... ... @@ -212,6 +248,17 @@ var realMap = (function() {
212 248 });
213 249 cb&&cb();
214 250 });
  251 + },
  252 + //绘制轨迹回放 marker
  253 + addHistoryMarker: function(gps){
  254 + //var marker = new BMap.Marker(new BMap.Point(gps.bd_lon, gps.bd_lat));
  255 + var marker = bdHistoryMarker(gps);
  256 + currentMap.map.addOverlay(marker);
  257 + return marker;
  258 + },
  259 + //移动marker
  260 + moveMarker: function(marker , lon, lat){
  261 + marker.setPosition(new BMap.Point(lon, lat));
215 262 }
216 263 },
217 264 //高德地图
... ... @@ -255,10 +302,20 @@ var realMap = (function() {
255 302 trafficLayer.hide();
256 303 isVisible = false;
257 304 $(this).removeClass('active');
  305 +
  306 + //调整线路路由透明度
  307 + $.each(polylines, function(){
  308 + this.setOptions({strokeOpacity: 0.5});
  309 + });
258 310 } else {
259 311 trafficLayer.show();
260 312 isVisible = true;
261 313 $(this).addClass('active');
  314 +
  315 + //调整线路路由透明度
  316 + $.each(polylines, function(){
  317 + this.setOptions({strokeOpacity: 0.1});
  318 + });
262 319 }
263 320 });
264 321  
... ... @@ -320,6 +377,46 @@ var realMap = (function() {
320 377  
321 378 placeSearch.search(val);
322 379 });
  380 + },
  381 + drawLine: function(lineCode){
  382 + polylines = [];
  383 + var map = currentMap.map;
  384 + map.clearMap();
  385 +
  386 + var route = JSON.parse(storage.getItem(lineCode + '_route'));
  387 + var upArr = [], downArr = [];
  388 +
  389 + var upLineOps = {path: upArr, strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
  390 + ,downLineOps = {path: downArr, strokeColor:"red", strokeWeight:6, strokeOpacity:0.5};
  391 +
  392 + //上行
  393 + if(route.up){
  394 + $.each(route.up_gcj.split(','), function(){
  395 + tempArray = this.split(' ');
  396 + upArr.push([tempArray[0], tempArray[1]]);
  397 + });
  398 + var upLine = new AMap.Polyline(upLineOps);
  399 + //保存线条引用
  400 + polylines.push(upLine);
  401 +
  402 + upLine.setMap(map);
  403 + map.setCenter(upArr[parseInt(upArr.length / 2)]);
  404 +
  405 + }
  406 + //下行
  407 + if(route.down){
  408 + $.each(route.down_gcj.split(','), function(){
  409 + tempArray = this.split(' ');
  410 + downArr.push([tempArray[0], tempArray[1]]);
  411 + });
  412 + var downLine = new AMap.Polyline(downLineOps);
  413 + //保存线条引用
  414 + polylines.push(downLine);
  415 +
  416 + downLine.setMap(map);
  417 + }
  418 + },
  419 + drawGpsMarker: function(gpsList){
323 420 }
324 421 },
325 422 setText : function(text) {
... ... @@ -389,6 +486,28 @@ var realMap = (function() {
389 486 return marker;
390 487 }
391 488  
  489 + function bdHistoryMarker(gps){
  490 + //marker
  491 + var point = new BMap.Point(gps.bd_lon, gps.bd_lat)
  492 + //label
  493 + ,label = new BMap.Label(gps.nbbm, {position: point, offset: new BMap.Size(-20,8)});
  494 + label.setStyle({borderColor: bgColor(gps), padding: '6px 6px 4px 6px', color: tColor(gps), backgroundColor: bgColor(gps)});
  495 + var marker = new BMap.Marker(point);
  496 + marker.setLabel(label);
  497 + //icon
  498 + marker.setIcon(new BMap.Icon(tmIcon, new BMap.Size(25,25)));
  499 +/* //window 绑定到 label
  500 + marker.infoWindow = new BMap.InfoWindow(bd_gps_info_win_opts);
  501 + //数据绑定到label
  502 + marker.gpsData = gpsData;
  503 +
  504 + //mouseover
  505 + label.addEventListener('mouseover', function(){
  506 + bdOpenWindow(marker);
  507 + });*/
  508 + return marker;
  509 + }
  510 +
392 511 function bdOpenWindow(marker){
393 512 marker.infoWindow.setContent(template('gps_info_win_temp', marker.gpsData));
394 513 currentMap.map.openInfoWindow(marker.infoWindow, marker.point);
... ...
src/main/resources/static/pages/mapmonitor/real/js/playBack.js 0 → 100644
  View file @b29dcfa
  1 +/**
  2 + * 轨迹回放相关
  3 + */
  4 +
  5 +var playBack = (function() {
  6 + //css3动画结束事件
  7 + var animationend = 'webkitAnimationEnd animationend';
  8 + var prgTimer;
  9 + //开始时间戳
  10 + var sTime;
  11 + //结束时间戳
  12 + var eTime;
  13 + //10秒一个进度
  14 + var tRange;
  15 + //进度条宽度
  16 + var pWidth;
  17 + //跟随进度条运动的时间标记
  18 + var $presMark = $('#progress-mark-time');
  19 + //跟随鼠标运动的时间标记
  20 + var $presMarkMouse = $('#progress-mark-time-mouse');
  21 + //上层运动的进度条
  22 + var $pmk = $('.play-back-progress-mark');
  23 + //单元格
  24 + var cell/*, minCell = 5, cellSecond*/;
  25 + //GPS轨迹点
  26 + var gpsArray;
  27 + //播放到的轨迹坐标点
  28 + var cIndex = 0;
  29 + var size;
  30 + //播放速度
  31 + var speed = 1;
  32 + //车辆编码和marker映射
  33 + var markerMap = {};
  34 + //S0I-058，S0I-055 ，隧道六线
  35 +
  36 + function getCurrMap(){
  37 + return realMap[realMap.getMap().fName];
  38 + }
  39 +
  40 + //事件监听
  41 + $('.play-back-btns .playBtn').on('click', function(){
  42 + var status = $(this).data('status');
  43 +
  44 + //开始播放
  45 + if(status == 0){
  46 + maxWidth = $('.play-back-progress').width();
  47 + play();
  48 + }
  49 + //暂停
  50 + else{
  51 + stop();
  52 + $(this).removeClass('fa-pause').addClass('fa-play').data('status', 0);
  53 + }
  54 + });
  55 +
  56 + $('.progress-body').mousemove(function(e){
  57 + var w = e.clientX - 20
  58 + showMarkTextMouse(w);
  59 + }).mouseout(hideMarkTextMouse)
  60 + .on('click', function(e){
  61 + var w = e.clientX - 20;
  62 + goTo(w);
  63 + hideMarkTextMouse();
  64 + });
  65 +
  66 + //退出
  67 + $('.play-back-close').on('click', function(){
  68 + stop();
  69 + $pmk.css('width', '0px');
  70 + topW = 0;
  71 + $presMark.css('left', '0px');
  72 + //动画
  73 + $('.play-back-list').removeClass('fadeInRightBig').addClass('fadeOutRightBig');
  74 + $('.play-back-btns,.progress-wrap').removeClass('fadeInUpBig').addClass('fadeOutDownBig');
  75 +
  76 + setTimeout(function(){
  77 + $('.mapRightWrap,.mapTools,.leftUtilsWrap').fadeIn();
  78 + //隐藏元素，还原样式
  79 + $('.play-back-list').hide().removeClass('fadeOutRightBig').addClass('fadeInRightBig');
  80 + $('.play-back-btns,.progress-wrap').hide().removeClass('fadeOutDownBig').addClass('fadeInUpBig');
  81 + }, 500);
  82 + });
  83 +
  84 + function showMarkText(w){
  85 + var t = showMark($presMark, w);
  86 + //时间戳找gps
  87 + var gps;
  88 + console.log('showMarkText', cIndex, t);
  89 +
  90 + var marker;
  91 + for(;cIndex < size; cIndex ++){
  92 + gps = gpsArray[cIndex];
  93 + if(gps.ts <= t){
  94 + marker = markerMap[gps.nbbm];
  95 + if(marker)
  96 + getCurrMap().moveMarker(marker, gps.bd_lon, gps.bd_lat);//移动marker
  97 + else
  98 + markerMap[gps.nbbm] = getCurrMap().addHistoryMarker(gps);//画出marker
  99 + }
  100 + else{
  101 + break;
  102 + }
  103 + }
  104 + console.log('markerMap : ' , markerMap);
  105 + //console.log(moment(t).format('YYYY-MM-DD HH:mm:ss'));
  106 + }
  107 +
  108 + //播放速度
  109 + $('.play-speed-select li').on('click', function(){
  110 + stop();
  111 + speed = parseInt($(this).data('speed'));
  112 + $('#playSpeedText').text(speed);
  113 + play();
  114 + });
  115 +
  116 + function hideMarkText(w){
  117 + $presMark.hide();
  118 + }
  119 +
  120 + function showMarkTextMouse(w){
  121 + showMark($presMarkMouse, w);
  122 + }
  123 + function hideMarkTextMouse(){
  124 + $presMarkMouse.hide();
  125 + }
  126 +
  127 + function showMark(mark, w, anim){
  128 + var t = parseInt((sTime + w / cell) * 1000)
  129 + ,text = moment(t).format('HH:mm.ss');
  130 +
  131 + mark.text(text).css('left', w - mark.width() / 2)
  132 + .show();
  133 +
  134 + return t;
  135 + }
  136 +
  137 + //日志区域滚动条
  138 + $('.pback-logs').slimscroll({
  139 + height: '100%',
  140 + opacity: .5
  141 + });
  142 +
  143 + var exports = {
  144 + init : function() {
  145 + var htmlStr = template('play_back_panel_temp', {});
  146 + $('.mapRightWrap').html(htmlStr);
  147 + //车辆搜索框
  148 + createVehSearch($('.mapRightWrap select[name="nbbm[]"]'));
  149 + //线路选择框
  150 + $get('/line/all', null, function(array){
  151 + console.log(array);
  152 + });
  153 +
  154 + //点击轨迹回放按钮
  155 + $('#playBackBtn').on('click', function(){
  156 + var params = $('#playBackForm').serializeJSON();
  157 + console.log(params);
  158 + //查询历史gps数据
  159 + var fs = 'YYYY-MM-DDHH:mm'
  160 + ,st = moment(params.sDate + params.sTime, fs).format('X')
  161 + ,et = moment(params.eDate + params.eTime, fs).format('X')
  162 + ,nbbm = params.nbbm;
  163 +
  164 + layer.msg('查询历史GPS...', {icon: 16, time: 0});
  165 +
  166 + $.ajax({
  167 + url: '/gps/gpsHistory/multiple',
  168 + traditional: true,
  169 + data: {nbbmArray: params.nbbm, st: st, et: et},
  170 + success:function(rs){
  171 + gpsArray = rs;
  172 + size = gpsArray.length;
  173 + layer.closeAll();
  174 + //切出轨迹回放面板
  175 + $('.mapRightWrap,.mapTools,.leftUtilsWrap').fadeOut();
  176 + $('.play-back-list,.play-back-btns,.progress-wrap').show();
  177 + //初始化时间戳
  178 + sTime = parseInt(st);
  179 + eTime = parseInt(et);
  180 + tRange = et - st;
  181 +
  182 + //获取进度条宽度
  183 + pWidth = $('.progress-body').width();
  184 + cell = pWidth / tRange;
  185 + console.log('gpsArray', gpsArray);
  186 + //清理地图
  187 + getCurrMap().clear();
  188 + }
  189 + });
  190 + });
  191 +
  192 + //默认值
  193 + $('input[name=sDate]').val('2016-04-24');
  194 + $('input[name=sTime]').val('03:10');
  195 + $('input[name=eDate]').val('2016-04-24');
  196 + $('input[name=eTime]').val('03:50');
  197 + }
  198 + };
  199 +
  200 + function stop(){
  201 + clearInterval(prgTimer);
  202 + $('.play-back-btns .playBtn').removeClass('fa-pause').addClass('fa-play').data('status', 0);
  203 + prgTimer = null;
  204 + }
  205 +
  206 + function play(){
  207 + $('#progress-mark-time').show();
  208 + $('.play-back-btns .playBtn').removeClass('fa-play').addClass('fa-pause').data('status', 1);
  209 + start();
  210 + }
  211 +
  212 + var topW = 0;
  213 + function start(){
  214 + prgTimer = setTimeout(start, 1000);
  215 + run();
  216 + }
  217 +
  218 + function run(){
  219 + topW += (cell * speed);
  220 + showMarkText(topW);
  221 + if(topW >= pWidth){
  222 + stop();
  223 + $('#progress-mark-time').hide();
  224 + topW = pWidth;
  225 + }
  226 + $pmk.css('width', topW + 'px');
  227 + }
  228 +
  229 + function goTo(w){
  230 + stop();
  231 + topW = w;
  232 + showMarkText(w);
  233 + //$pmk.css('width', w);
  234 + play();
  235 + }
  236 +
  237 + return exports;
  238 +})();
0 239 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/real.js
  View file @b29dcfa
... ... @@ -49,6 +49,7 @@
49 49 $('.mapTools div.item.active').removeClass('active');
50 50 $(this).addClass('active');
51 51  
  52 + toolsEvent.clearStyle();
52 53 toolsEvent[method]();
53 54 });
54 55  
... ... @@ -56,12 +57,11 @@
56 57 var toolsEvent = {
57 58 // 车辆
58 59 vehicle : function() {
59   - toolsEvent.clearStyle();
  60 +
60 61 mrw.html('').addClass('to_vehicle vehicle');
61 62 resetRotate(null, vehiclePanel.showData);
62 63 },
63 64 search : function() {
64   - toolsEvent.clearStyle();
65 65 mrw.html('').addClass('to_searchPanel search');
66 66 resetRotate(null, searchPanel.init);
67 67 },
... ... @@ -69,17 +69,26 @@
69 69 alert('notice');
70 70 },
71 71 playBack : function() {
72   - alert('playBack');
  72 + mrw.html('').addClass('to_playBack playBack');
  73 + resetRotate(null, playBack.init);
  74 +
73 75 },
74 76 clearStyle : function() {
75 77 mrw.removeClass(
76   - 'vehicle search to_vehicle to_searchPanel rotate0');
  78 + 'vehicle search to_vehicle to_searchPanel rotate0 to_playBack playBack');
77 79 }
78 80 };
79 81  
80 82 // 地图切换
81 83 $('#mapTypeDrop li').on('click', function() {
82 84 realMap[this.id].change();
  85 + var type = $('.mapTools .item.active').data('click');
  86 + if(type == 'vehicle'){
  87 + var activePanel = $('.mapRightWrap .panel-collapse.collapse.in');
  88 + if(activePanel.length > 0){
  89 + vehiclePanel.drawLineAndGps(activePanel.data('line'));
  90 + }
  91 + }
83 92 });
84 93  
85 94 // 关闭左侧栏
... ...
src/main/resources/static/pages/mapmonitor/real/js/temp.js
  View file @b29dcfa
... ... @@ -13,4 +13,6 @@
13 13 getTemp('/pages/mapmonitor/real/temps/search.html');
14 14 //车辆
15 15 getTemp('/pages/mapmonitor/real/temps/vehicle.html');
  16 + //轨迹回放
  17 + getTemp('/pages/mapmonitor/real/temps/playBack.html');
16 18 }();
17 19 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/vehicle.js
  View file @b29dcfa
... ... @@ -24,6 +24,11 @@ var vehiclePanel = (function() {
24 24 var lineCode = $(this).data('line');
25 25 //收拢其他
26 26 closeAll();
  27 + drawLineAndGps(lineCode);
  28 + });
  29 +
  30 + //绘制线路和GPS
  31 + function drawLineAndGps(lineCode){
27 32 //过滤出该线路的GPS点
28 33 var showList = [];
29 34 if(lineGps[lineCode]){
... ... @@ -33,7 +38,7 @@ var vehiclePanel = (function() {
33 38 }
34 39 //显示车辆列表
35 40 var htmlStr = template('vehicle_panel_collapse_temp', {list: showList});
36   - $(this).html(htmlStr);
  41 + $('#collapse_' + lineCode).html(htmlStr);
37 42  
38 43 /**
39 44 * 延迟一下再画地图，不然会有点卡
... ... @@ -42,11 +47,11 @@ var vehiclePanel = (function() {
42 47 setTimeout(function(){
43 48 //在地图上画出线路
44 49 var mapObj = getCurrMap();
45   - mapObj.drawLine(that.data('name'), function(){
46   - mapObj.drawGpsMarker(showList);
47   - });
  50 + mapObj.drawLine(lineCode);
  51 + //画GPS
  52 + mapObj.drawGpsMarker(showList);
48 53 }, 500);
49   - });
  54 + }
50 55  
51 56 //展开完成
52 57 $('.mapRightWrap').on('shown.bs.collapse', '.panel-collapse', function() {
... ... @@ -116,6 +121,9 @@ var vehiclePanel = (function() {
116 121 },
117 122 showDataLazy : function() {
118 123 setTimeout(exports.showData, 1000);
  124 + },
  125 + drawLineAndGps: function(lineCode){
  126 + drawLineAndGps(lineCode);
119 127 }
120 128 };
121 129  
... ...
src/main/resources/static/pages/mapmonitor/real/real.html
  View file @b29dcfa
... ... @@ -26,21 +26,169 @@
26 26  
27 27 <div class="mapTools z-depth-3 ">
28 28 <div class="item active" data-click="vehicle">
29   - <i class="fa fa-bus"></i> &nbsp;车辆
  29 + <i class="fa fa-bus"></i> &nbsp;线路
30 30 </div>
31 31 <div class="item" data-click="search">
32 32 <i class="fa fa-search"></i> &nbsp;搜索
33 33 </div>
34 34 <!-- <div class="item" data-click="notice"> -->
35 35 <div class="item" >
36   - <i class="fa fa-bell-o"></i> &nbsp;通知
  36 + <i class="fa fa-bell-o"></i> &nbsp;安全
37 37 </div>
38   - <!-- <div class="item" data-click="playBack"> -->
39   - <div class="item" >
  38 + <div class="item" data-click="playBack">
40 39 <i class="fa fa-history"></i> &nbsp;回放
41 40 </div>
42 41 </div>
43 42  
  43 +<!-- 轨迹回放面板 -->
  44 +<div class="play-back-list animated fadeInRightBig">
  45 + <div class="pback-logs">
  46 + <div class="pback-logs-item">
  47 + W2B-012 进站 金桥路浦东大道站
  48 + <span class="pback-logs-item-date">07月17 12:40</span>
  49 + </div>
  50 + <div class="pback-logs-item">
  51 + W2B-012 出站 金桥路浦东大道站
  52 + <span class="pback-logs-item-date">07月17 12:42</span>
  53 + </div>
  54 + <div class="pback-logs-item">
  55 + W2B-012 进站 金桥路浦东大道站
  56 + <span class="pback-logs-item-date">07月17 12:40</span>
  57 + </div>
  58 + <div class="pback-logs-item">
  59 + W2B-012 出站 金桥路浦东大道站
  60 + <span class="pback-logs-item-date">07月17 12:42</span>
  61 + </div>
  62 + <div class="pback-logs-item">
  63 + W2B-012 进站 金桥路浦东大道站
  64 + <span class="pback-logs-item-date">07月17 12:40</span>
  65 + </div>
  66 + <div class="pback-logs-item">
  67 + W2B-012 出站 金桥路浦东大道站
  68 + <span class="pback-logs-item-date">07月17 12:42</span>
  69 + </div>
  70 + <div class="pback-logs-item">
  71 + W2B-012 进站 金桥路浦东大道站
  72 + <span class="pback-logs-item-date">07月17 12:40</span>
  73 + </div>
  74 + <div class="pback-logs-item">
  75 + W2B-012 出站 金桥路浦东大道站
  76 + <span class="pback-logs-item-date">07月17 12:42</span>
  77 + </div>
  78 + <div class="pback-logs-item">
  79 + W2B-012 进站 金桥路浦东大道站
  80 + <span class="pback-logs-item-date">07月17 12:40</span>
  81 + </div>
  82 + <div class="pback-logs-item">
  83 + W2B-012 出站 金桥路浦东大道站
  84 + <span class="pback-logs-item-date">07月17 12:42</span>
  85 + </div>
  86 + <div class="pback-logs-item">
  87 + W2B-012 进站 金桥路浦东大道站
  88 + <span class="pback-logs-item-date">07月17 12:40</span>
  89 + </div>
  90 + <div class="pback-logs-item">
  91 + W2B-012 出站 金桥路浦东大道站
  92 + <span class="pback-logs-item-date">07月17 12:42</span>
  93 + </div>
  94 + <div class="pback-logs-item">
  95 + W2B-012 进站 金桥路浦东大道站
  96 + <span class="pback-logs-item-date">07月17 12:40</span>
  97 + </div>
  98 + <div class="pback-logs-item">
  99 + W2B-012 出站 金桥路浦东大道站
  100 + <span class="pback-logs-item-date">07月17 12:42</span>
  101 + </div><div class="pback-logs-item">
  102 + W2B-012 进站 金桥路浦东大道站
  103 + <span class="pback-logs-item-date">07月17 12:40</span>
  104 + </div>
  105 + <div class="pback-logs-item">
  106 + W2B-012 出站 金桥路浦东大道站
  107 + <span class="pback-logs-item-date">07月17 12:42</span>
  108 + </div>
  109 + <div class="pback-logs-item">
  110 + W2B-012 进站 金桥路浦东大道站
  111 + <span class="pback-logs-item-date">07月17 12:40</span>
  112 + </div>
  113 + <div class="pback-logs-item">
  114 + W2B-012 出站 金桥路浦东大道站
  115 + <span class="pback-logs-item-date">07月17 12:42</span>
  116 + </div>
  117 + <div class="pback-logs-item">
  118 + W2B-012 进站 金桥路浦东大道站
  119 + <span class="pback-logs-item-date">07月17 12:40</span>
  120 + </div>
  121 + <div class="pback-logs-item">
  122 + W2B-012 出站 金桥路浦东大道站
  123 + <span class="pback-logs-item-date">07月17 12:42</span>
  124 + </div>
  125 + <div class="pback-logs-item">
  126 + W2B-012 进站 金桥路浦东大道站
  127 + <span class="pback-logs-item-date">07月17 12:40</span>
  128 + </div>
  129 + <div class="pback-logs-item">
  130 + W2B-012 出站 金桥路浦东大道站
  131 + <span class="pback-logs-item-date">07月17 12:42</span>
  132 + </div>
  133 +
  134 + <div class="pback-logs-item">
  135 + W2B-012 进站 金桥路浦东大道站
  136 + <span class="pback-logs-item-date">07月17 12:40</span>
  137 + </div>
  138 + <div class="pback-logs-item">
  139 + W2B-012 出站 金桥路浦东大道站
  140 + <span class="pback-logs-item-date">07月17 12:42</span>
  141 + </div>
  142 + <div class="pback-logs-item">
  143 + W2B-012 进站 金桥路浦东大道站
  144 + <span class="pback-logs-item-date">07月17 12:40</span>
  145 + </div>
  146 + <div class="pback-logs-item">
  147 + W2B-012 出站 金桥路浦东大道站
  148 + <span class="pback-logs-item-date">07月17 12:42</span>
  149 + </div>
  150 + <div class="pback-logs-item">
  151 + W2B-012 进站 金桥路浦东大道站
  152 + <span class="pback-logs-item-date">07月17 12:40</span>
  153 + </div>
  154 + <div class="pback-logs-item">
  155 + W2B-012 出站 金桥路浦东大道站
  156 + <span class="pback-logs-item-date">07月17 12:42</span>
  157 + </div>
  158 +
  159 + </div>
  160 +</div>
  161 +<div class="play-back-btns z-depth-1 animated fadeInUpBig">
  162 + <i class="fa fa-play playBtn" data-status=0></i>
  163 + <!-- <span id="playSpeed">
  164 + <i class="fa fa-close"></i> 1 <i class="fa fa-angle-up" ></i>
  165 + </span> -->
  166 +
  167 + <div class="dropup" >
  168 + <span id="playSpeed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  169 + <i class="fa fa-close"></i><span id="playSpeedText">1</span><i class="fa fa-angle-up" ></i>
  170 + </span>
  171 + <ul class="dropdown-menu play-speed-select" >
  172 + <li data-speed=10><a href="javascript:;">10秒每帧 </a></li>
  173 + <li data-speed=5><a href="javascript:;">5秒每帧 </a></li>
  174 + <li data-speed=1><a href="javascript:;">1秒每帧</a></li>
  175 + </ul>
  176 + </div>
  177 +
  178 + <button type="button" class="btn btn-circle red play-back-close" style="line-height: 1;">退出</button>
  179 +</div>
  180 +
  181 +
  182 +<div class="progress-wrap animated fadeInUpBig">
  183 + <div class="progress-body">
  184 + <div class="play-back-progress "></div>
  185 + <div class="play-back-progress-mark"></div>
  186 + <div class="progress-mark-info" id="progress-mark-time"></div>
  187 + <!-- 跟随鼠标 -->
  188 + <div class="progress-mark-info" id="progress-mark-time-mouse"></div>
  189 + </div>
  190 +</div>
  191 +
44 192 <div class="mapRightWrap z-depth-3 vehicle" >
45 193 </div>
46 194  
... ... @@ -51,5 +199,6 @@
51 199 <script src="/pages/mapmonitor/real/js/search.js"></script>
52 200 <script src="/pages/mapmonitor/real/js/temp.js"></script>
53 201 <script src="/pages/mapmonitor/real/js/real.js"></script>
  202 +<script src="/pages/mapmonitor/real/js/playBack.js"></script>
54 203 <script>
55 204 </script>
... ...
src/main/resources/static/pages/mapmonitor/real/temps/playBack.html 0 → 100644
  View file @b29dcfa
  1 +
  2 +<script id="play_back_panel_temp" type="text/html">
  3 +<div class="alert alert-info animated flipInX">
  4 +<i class="fa fa-exclamation-circle" ></i> 最多跨一天回放，请尽量小范围的查询 S0I-058，S0I-055 ，隧道六线 </div>
  5 +<form class="form-horizontal" role="form" id="playBackForm">
  6 + <div class="form-body">
  7 + <div class="form-group">
  8 + <label class="col-md-3 control-label">车辆编码</label>
  9 + <div class="col-md-9">
  10 + <select class="form-control" name="nbbm[]" placeholder="车辆编码" multiple="multiple"></select>
  11 + </div>
  12 + </div>
  13 +
  14 + <div class="form-group">
  15 + <label class="col-md-3 control-label">起始时间</label>
  16 + <div class="col-md-9">
  17 + <input type="date" name="sDate" class="form-control" placeholder="日期">
  18 + <input type="time" name="sTime" class="form-control" placeholder="时间">
  19 + </div>
  20 + </div>
  21 + <div class="form-group">
  22 + <label class="col-md-3 control-label">截止时间</label>
  23 + <div class="col-md-9">
  24 + <input type="date" name="eDate" class="form-control" placeholder="截止时间">
  25 + <input type="time" name="eTime" class="form-control" placeholder="时间">
  26 + </div>
  27 + </div>
  28 + </div>
  29 +</form>
  30 +<form class="form-horizontal" role="form" style="padding-top: 0px;">
  31 + <div class="form-group">
  32 + <label class="col-md-3 control-label">线路图层</label>
  33 + <div class="col-md-9">
  34 + <select class="form-control" name="lineCode" >
  35 + <option>85路</option>
  36 + </select>
  37 + </div>
  38 + </div>
  39 +</form>
  40 +<hr>
  41 + <div class="form-actions">
  42 + <div class="row" style="text-align: center;margin-left: 0;">
  43 + <div >
  44 + <button type="button" class="btn green-meadow btn-lg" id="playBackBtn"> <i class="fa fa-play-circle"> </i> &nbsp;轨迹回放 </button>
  45 + </div>
  46 + </div>
  47 + </div>
  48 +</script>
0 49 \ No newline at end of file
... ...