潘钊 / bsth_control · Commits

Commit cc9ea05909fa9df17592111674ae78927c90d85d

Authored by 潘钊
1 parent 2ef91b6e
build: skipped

线调gps数据接入

Inline Side-by-side
Showing 22 changed files with 1635 additions and 1133 deletions
src/main/java/com/bsth/StartCommand.java
  View file @cc9ea05
1 1 package com.bsth;
2 2  
3 3  
  4 +import java.util.concurrent.Executors;
  5 +import java.util.concurrent.ScheduledExecutorService;
  6 +import java.util.concurrent.TimeUnit;
  7 +
4 8 import org.slf4j.Logger;
5 9 import org.slf4j.LoggerFactory;
6 10 import org.springframework.beans.factory.annotation.Autowired;
7 11 import org.springframework.boot.CommandLineRunner;
8 12 import org.springframework.stereotype.Component;
9 13  
  14 +import com.bsth.gpsdata.thread.GpsBufferRefreshThread;
10 15 import com.bsth.security.SecurityMetadataSourceService;
11 16  
12 17 /**
... ... @@ -22,12 +27,23 @@ public class StartCommand implements CommandLineRunner{
22 27 @Autowired
23 28 SecurityMetadataSourceService invocationSecurityMetadataSourceService;
24 29  
  30 + public static ScheduledExecutorService scheduler = Executors.newScheduledThreadPool(1);
  31 +
  32 + @Autowired
  33 + GpsBufferRefreshThread gpsRefreshThread;
  34 +
25 35 @Override
26 36 public void run(String... arg0){
27 37  
28 38 try {
29 39 //启动时加载所有资源
30 40 invocationSecurityMetadataSourceService.loadResourceDefine();
  41 +
  42 + /**
  43 + * 定时GPS实时数据更新线程，每次执行完成4秒后开始下一次
  44 + * 如果抛出异常，后续执行将被取消
  45 + */
  46 + //scheduler.scheduleWithFixedDelay(gpsRefreshThread, 0, 4, TimeUnit.SECONDS);
31 47 } catch (Exception e) {
32 48 e.printStackTrace();
33 49 }
... ...
src/main/java/com/bsth/gpsdata/buffer/GpsRealDataBuffer.java 0 → 100644
  View file @cc9ea05
  1 +package com.bsth.gpsdata.buffer;
  2 +
  3 +import java.util.HashMap;
  4 +import java.util.Iterator;
  5 +import java.util.List;
  6 +import java.util.Map;
  7 +import java.util.Set;
  8 +
  9 +import org.slf4j.Logger;
  10 +import org.slf4j.LoggerFactory;
  11 +import org.springframework.beans.factory.annotation.Autowired;
  12 +import org.springframework.stereotype.Component;
  13 +
  14 +import com.bsth.entity.Cars;
  15 +import com.bsth.entity.Station;
  16 +import com.bsth.gpsdata.entity.GpsRealData;
  17 +import com.bsth.repository.CarsRepository;
  18 +import com.bsth.repository.StationRepository;
  19 +import com.google.common.collect.ArrayListMultimap;
  20 +import com.google.common.collect.ImmutableMap;
  21 +import com.google.common.collect.ListMultimap;
  22 +
  23 +/**
  24 + *
  25 + * @ClassName: GpsRealDataBuffer
  26 + * @Description: TODO(GPS 实时数据缓存)
  27 + * @author PanZhao
  28 + * @date 2016年5月11日 下午4:31:29
  29 + *
  30 + */
  31 +@Component
  32 +public class GpsRealDataBuffer {
  33 +
  34 + private Logger logger = LoggerFactory.getLogger(this.getClass());
  35 +
  36 + @Autowired
  37 + CarsRepository carsRepository;
  38 +
  39 + @Autowired
  40 + StationRepository stationRepository;
  41 +
  42 + /**
  43 + * 线路和GPS对照
  44 + *（K: 线路编码 ，V：GpsRealData）
  45 + */
  46 + private static ListMultimap<Integer, GpsRealData> lineGpsMultimap;
  47 +
  48 + /**
  49 + * 设备和GPS对照
  50 + *（K: 设备编码 ，V：GpsRealData）
  51 + */
  52 + private static Map<String, GpsRealData> deviceGpsMap;
  53 +
  54 + /**
  55 + * 设备号和车辆自编号对照
  56 + * （K: 设备编码 ，V：车辆自编号）
  57 + */
  58 + private static Map<String, String> vehicDeviceMap;
  59 +
  60 + /**
  61 + * 站点和编码对照
  62 + *（K: 站点编码 ，V：站点名称）
  63 + */
  64 + private static Map<String, String> stationCodeMap;
  65 +
  66 +
  67 + public boolean isNullEmpty(){
  68 + return deviceGpsMap == null;
  69 + }
  70 +
  71 + /**
  72 + *
  73 + * @Title: initBuffer
  74 + * @Description: TODO(初始化缓存)
  75 + * @throws
  76 + */
  77 + public void initBuffer(List<GpsRealData> list){
  78 + lineGpsMultimap = ArrayListMultimap.create();
  79 + deviceGpsMap = new HashMap<>();
  80 +
  81 + for(GpsRealData gpsData : list){
  82 + lineGpsMultimap.put(gpsData.getLineId(), gpsData);
  83 + deviceGpsMap.put(gpsData.getDeviceId(), gpsData);
  84 + }
  85 + logger.info("init gps buffer gps! list size: " + list.size());
  86 + initDeviceMapp();
  87 + initStationCodeMap();
  88 + }
  89 +
  90 + public void initDeviceMapp(){
  91 + //初始化车辆设备号对照
  92 + vehicDeviceMap = new HashMap<>();
  93 + Iterator<Cars> carIterator = carsRepository.findAll().iterator();
  94 +
  95 + Cars car;
  96 + while(carIterator.hasNext()){
  97 + car = carIterator.next();
  98 + vehicDeviceMap.put(car.getEquipmentCode(), car.getInsideCode());
  99 + }
  100 +
  101 + logger.info("初始化车辆设备号对照 数量： " + vehicDeviceMap.size());
  102 + }
  103 +
  104 + public void initStationCodeMap(){
  105 + //初始化站点和编码对照
  106 + stationCodeMap = new HashMap<>();
  107 + Iterator<Station> iterator = stationRepository.findAll().iterator();
  108 +
  109 + Station station;
  110 + while(iterator.hasNext()){
  111 + station = iterator.next();
  112 + stationCodeMap.put(station.getStationCod(), station.getStationName());
  113 + }
  114 +
  115 + logger.info("初始化站点编码对照 数量： " + stationCodeMap.size());
  116 + }
  117 +
  118 + public void putLineMultimap(String lineCode, GpsRealData gpsData){
  119 +
  120 + }
  121 +
  122 + public void putDeviceGpsMap(String deviceId, GpsRealData gpsData){
  123 + deviceGpsMap.put(deviceId, gpsData);
  124 + }
  125 +
  126 +
  127 + /**
  128 + *
  129 + * @Title: updateBuffer
  130 + * @Description: TODO(更新缓存)
  131 + * @param @param upLines 需要更新映射的线路
  132 + * @param @param upGpsList 有更新的GPS信号
  133 + * @throws
  134 + */
  135 + public void updateBuffer(Set<Integer> upLines, List<GpsRealData> upGpsList){
  136 +
  137 + //更新GPS点
  138 + for(GpsRealData newGps : upGpsList){
  139 + deviceGpsMap.put(newGps.getDeviceId(), newGps);
  140 + }
  141 +
  142 + Iterator<GpsRealData> iterator = deviceGpsMap.values().iterator();
  143 +
  144 + //重新按线路划分
  145 + lineGpsMultimap.clear();
  146 + GpsRealData gpsdata;
  147 + while(iterator.hasNext()){
  148 + gpsdata = iterator.next();
  149 + lineGpsMultimap.put(gpsdata.getLineId(), gpsdata);
  150 + }
  151 + logger.info("update gps buffer over! new gps list size: " + upGpsList.size() + " - lineGpsMultimap size: " + lineGpsMultimap.size());
  152 + }
  153 +
  154 + /**
  155 + *
  156 + * @Title: getDeviceGpsMap
  157 + * @Description: TODO(获取设备号 ——> 实时GPS对照)
  158 + * @return ImmutableMap<String,GpsRealData> 不可变的对照表
  159 + * @throws
  160 + */
  161 + public ImmutableMap<String, GpsRealData> getDeviceGpsMap(){
  162 + return ImmutableMap.copyOf(deviceGpsMap);
  163 + }
  164 +
  165 + /**
  166 + *
  167 + * @Title: getListByLineCode
  168 + * @Description: TODO(根据线路编码获取该线路所有的GPS点)
  169 + * @return List<GpsRealData> 返回类型
  170 + * @throws
  171 + */
  172 + public List<GpsRealData> getListByLineCode(Integer lineCode){
  173 + List<GpsRealData> list = lineGpsMultimap.get(lineCode);
  174 +
  175 + //写入车辆自编号
  176 + for(GpsRealData gpsData : list){
  177 + gpsData.setNbbm(vehicDeviceMap.get(gpsData.getDeviceId()));
  178 + gpsData.setStationName(stationCodeMap.get(gpsData.getStopNo()));
  179 + }
  180 + return list;
  181 + }
  182 +}
... ...
src/main/java/com/bsth/gpsdata/config.properties 0 → 100644
  View file @cc9ea05
  1 +#http.gps.real.url= http://222.66.0.204:5555/transport_server/rtgps/
  2 +http.gps.real.url= http://192.168.168.192:8080/transport_server/rtgps/
0 3 \ No newline at end of file
... ...
src/main/java/com/bsth/gpsdata/controller/GpsDataController.java 0 → 100644
  View file @cc9ea05
  1 +package com.bsth.gpsdata.controller;
  2 +
  3 +import java.util.List;
  4 +
  5 +import org.springframework.beans.factory.annotation.Autowired;
  6 +import org.springframework.web.bind.annotation.PathVariable;
  7 +import org.springframework.web.bind.annotation.RequestMapping;
  8 +import org.springframework.web.bind.annotation.RestController;
  9 +
  10 +import com.bsth.gpsdata.buffer.GpsRealDataBuffer;
  11 +import com.bsth.gpsdata.entity.GpsRealData;
  12 +
  13 +@RestController
  14 +@RequestMapping("gps")
  15 +public class GpsDataController {
  16 +
  17 + @Autowired
  18 + GpsRealDataBuffer gpsBuffer;
  19 +
  20 + @RequestMapping(value = "/real/line/{lineCode}")
  21 + public List<GpsRealData> findByLineCode(@PathVariable("lineCode") Integer lineCode){
  22 + return gpsBuffer.getListByLineCode(lineCode);
  23 + }
  24 +}
... ...
src/main/java/com/bsth/gpsdata/entity/GpsRealData.java 0 → 100644
  View file @cc9ea05
  1 +package com.bsth.gpsdata.entity;
  2 +
  3 +/**
  4 + *
  5 + * @ClassName: GpsRealData
  6 + * @Description: TODO(HTTP接口的实时GPS数据)
  7 + * @author PanZhao
  8 + * @date 2016年5月11日 下午4:32:07
  9 + *
  10 + */
  11 +public class GpsRealData {
  12 +
  13 + // 公司代码
  14 + private Integer companyCode;
  15 +
  16 + // 线路编码
  17 + private Integer lineId;
  18 +
  19 + // 设备编码
  20 + private String deviceId;
  21 +
  22 + // 停车场编码
  23 + private String carparkNo;
  24 +
  25 + // 站点编码
  26 + private String stopNo;
  27 +
  28 + // 经度
  29 + private Float lon;
  30 +
  31 + // 纬度
  32 + private Float lat;
  33 +
  34 + // 发送时间戳
  35 + private Long timestamp;
  36 +
  37 + // 速度
  38 + private Float speed;
  39 +
  40 + // 方向（角度）
  41 + private Float direction;
  42 +
  43 + // 营运状态（ 0 营运 ，1 非营运， -1 无效）
  44 + private Integer state;
  45 +
  46 + // 上下行（0 上行 ， 1 下行 ， -1 无效）
  47 + private Integer upDown;
  48 +
  49 + //车辆内部编码
  50 + private String nbbm;
  51 +
  52 + //站点名称
  53 + private String stationName;
  54 +
  55 + public Integer getCompanyCode() {
  56 + return companyCode;
  57 + }
  58 +
  59 + public void setCompanyCode(Integer companyCode) {
  60 + this.companyCode = companyCode;
  61 + }
  62 +
  63 + public Integer getLineId() {
  64 + return lineId;
  65 + }
  66 +
  67 + public void setLineId(Integer lineId) {
  68 + this.lineId = lineId;
  69 + }
  70 +
  71 + public String getDeviceId() {
  72 + return deviceId;
  73 + }
  74 +
  75 + public void setDeviceId(String deviceId) {
  76 + this.deviceId = deviceId;
  77 + }
  78 +
  79 + public String getCarparkNo() {
  80 + return carparkNo;
  81 + }
  82 +
  83 + public void setCarparkNo(String carparkNo) {
  84 + this.carparkNo = carparkNo;
  85 + }
  86 +
  87 + public String getStopNo() {
  88 + return stopNo;
  89 + }
  90 +
  91 + public void setStopNo(String stopNo) {
  92 + this.stopNo = stopNo;
  93 + }
  94 +
  95 + public Float getLon() {
  96 + return lon;
  97 + }
  98 +
  99 + public void setLon(Float lon) {
  100 + this.lon = lon;
  101 + }
  102 +
  103 + public Float getLat() {
  104 + return lat;
  105 + }
  106 +
  107 + public void setLat(Float lat) {
  108 + this.lat = lat;
  109 + }
  110 +
  111 + public Long getTimestamp() {
  112 + return timestamp;
  113 + }
  114 +
  115 + public void setTimestamp(Long timestamp) {
  116 + this.timestamp = timestamp;
  117 + }
  118 +
  119 + public Float getSpeed() {
  120 + return speed;
  121 + }
  122 +
  123 + public void setSpeed(Float speed) {
  124 + this.speed = speed;
  125 + }
  126 +
  127 + public Float getDirection() {
  128 + return direction;
  129 + }
  130 +
  131 + public void setDirection(Float direction) {
  132 + this.direction = direction;
  133 + }
  134 +
  135 + public Integer getState() {
  136 + return state;
  137 + }
  138 +
  139 + public void setState(Integer state) {
  140 + this.state = state;
  141 + }
  142 +
  143 + public Integer getUpDown() {
  144 + return upDown;
  145 + }
  146 +
  147 + public void setUpDown(Integer upDown) {
  148 + this.upDown = upDown;
  149 + }
  150 +
  151 + public String getNbbm() {
  152 + return nbbm;
  153 + }
  154 +
  155 + public void setNbbm(String nbbm) {
  156 + this.nbbm = nbbm;
  157 + }
  158 +
  159 + public String getStationName() {
  160 + return stationName;
  161 + }
  162 +
  163 + public void setStationName(String stationName) {
  164 + this.stationName = stationName;
  165 + }
  166 +}
... ...
src/main/java/com/bsth/gpsdata/thread/GpsBufferRefreshThread.java 0 → 100644
  View file @cc9ea05
  1 +package com.bsth.gpsdata.thread;
  2 +
  3 +import java.io.BufferedReader;
  4 +import java.io.InputStreamReader;
  5 +import java.util.ArrayList;
  6 +import java.util.HashSet;
  7 +import java.util.List;
  8 +import java.util.Set;
  9 +
  10 +import org.apache.commons.httpclient.HttpClient;
  11 +import org.apache.commons.httpclient.methods.GetMethod;
  12 +import org.slf4j.Logger;
  13 +import org.slf4j.LoggerFactory;
  14 +import org.springframework.beans.factory.annotation.Autowired;
  15 +import org.springframework.stereotype.Component;
  16 +
  17 +import com.alibaba.fastjson.JSON;
  18 +import com.alibaba.fastjson.JSONObject;
  19 +import com.bsth.gpsdata.buffer.GpsRealDataBuffer;
  20 +import com.bsth.gpsdata.entity.GpsRealData;
  21 +import com.bsth.gpsdata.util.ConfigUtil;
  22 +import com.google.common.collect.ImmutableMap;
  23 +
  24 +/**
  25 + *
  26 + * @ClassName: RefreshBufferThread
  27 + * @Description: TODO(刷新GPS实时缓存数据 线程)
  28 + * @author PanZhao
  29 + * @date 2016年5月11日 下午8:56:44
  30 + *
  31 + */
  32 +@Component
  33 +public class GpsBufferRefreshThread extends Thread{
  34 +
  35 + private static Logger logger = LoggerFactory.getLogger(GpsBufferRefreshThread.class);
  36 +
  37 + //接口地址
  38 + private static String url;
  39 +
  40 + static{
  41 + url = ConfigUtil.getProp("http.gps.real.url");
  42 + }
  43 +
  44 + @Autowired
  45 + GpsRealDataBuffer gpsBuffer;
  46 +
  47 + @Override
  48 + public void run() {
  49 + try{
  50 + long t = System.currentTimeMillis();
  51 +
  52 + List<GpsRealData> newList = getterRealGpsData();
  53 +
  54 + if(gpsBuffer.isNullEmpty())
  55 + gpsBuffer.initBuffer(newList);
  56 + else{
  57 + ImmutableMap<String, GpsRealData> deviceMap = gpsBuffer.getDeviceGpsMap();
  58 +
  59 + GpsRealData oldGps;
  60 +
  61 + //新的GPS信号
  62 + List<GpsRealData> upGpsList = new ArrayList<>();
  63 + //需要更新映射的线路
  64 + Set<Integer> upLines = new HashSet<>();
  65 +
  66 + for(GpsRealData newData : newList){
  67 +
  68 + oldGps = deviceMap.get(newData.getDeviceId());
  69 +
  70 + //新的GPS点
  71 + if(null == oldGps
  72 + || oldGps.getTimestamp() < newData.getTimestamp()){
  73 + upGpsList.add(newData);
  74 + upLines.add(newData.getLineId());
  75 + }
  76 + }
  77 +
  78 + //更新缓存
  79 + gpsBuffer.updateBuffer(upLines, upGpsList);
  80 + }
  81 +
  82 + logger.info("本次刷新GPS实时数据耗时：" + (System.currentTimeMillis() - t) + "毫秒");
  83 + }catch(Exception e){
  84 + logger.error("", e);
  85 + }
  86 + }
  87 +
  88 + /**
  89 + *
  90 + * @Title: getterRealGpsData
  91 + * @Description: TODO(请求实时GPS数据)
  92 + * @return List<GpsRealData>
  93 + * @throws
  94 + */
  95 + public List<GpsRealData> getterRealGpsData() throws Exception{
  96 + List<GpsRealData> list = new ArrayList<>();
  97 +
  98 + HttpClient client = new HttpClient();
  99 + GetMethod method = new GetMethod(url);
  100 + //要求服务器主动断开连接
  101 + method.setRequestHeader("Connection", "close");
  102 +
  103 + int status = client.executeMethod(method);
  104 +
  105 + if(status == 200){
  106 + BufferedReader br = new BufferedReader(new InputStreamReader(method.getResponseBodyAsStream()));
  107 +
  108 + StringBuffer stringBuffer = new StringBuffer();
  109 + String str= "";
  110 + while((str = br.readLine()) != null){
  111 + stringBuffer .append(str );
  112 + }
  113 +
  114 + JSONObject jsonObj = JSON.parseObject(stringBuffer.toString());
  115 +
  116 + if(jsonObj != null)
  117 + list = JSON.parseArray(jsonObj.getString("data"), GpsRealData.class);
  118 +
  119 + //释放连接
  120 + method.releaseConnection();
  121 + }
  122 + else
  123 + logger.error("error status code: " + status);
  124 +
  125 + return list;
  126 + }
  127 +}
... ...
src/main/java/com/bsth/gpsdata/util/ConfigUtil.java 0 → 100644
  View file @cc9ea05
  1 +package com.bsth.gpsdata.util;
  2 +
  3 +import java.io.IOException;
  4 +import java.io.InputStream;
  5 +import java.util.Properties;
  6 +
  7 +public class ConfigUtil {
  8 +
  9 + private static Properties properties = new Properties();
  10 +
  11 + static {
  12 + InputStream in = Object.class.getResourceAsStream("/com/bsth/gpsdata/config.properties");
  13 + try {
  14 + properties.load(in);
  15 + } catch (IOException e) {
  16 + e.printStackTrace();
  17 + }
  18 + }
  19 +
  20 + public static String getProp(String key){
  21 +
  22 + return properties.getProperty(key);
  23 + }
  24 +}
... ...
src/main/java/com/bsth/repository/CarsRepository.java 0 → 100644
  View file @cc9ea05
  1 +package com.bsth.repository;
  2 +
  3 +import org.springframework.stereotype.Repository;
  4 +
  5 +import com.bsth.entity.Cars;
  6 +
  7 +@Repository
  8 +public interface CarsRepository extends BaseRepository<Cars, Integer>{
  9 +
  10 +}
... ...
src/main/resources/static/pages/control/line/css/lineControl.css
  View file @cc9ea05
1   -.dropdown-menu {
  1 +/* .dropdown-menu {
2 2 background-color: rgba(76, 115, 142, 0.95);
3 3 border: 1px solid #4C738E;
4   -}
  4 +} */
5 5  
6   -.portlet.light > .portlet-title > .actions .dropdown-menu li > a
  6 +/* .portlet.light > .portlet-title > .actions .dropdown-menu li > a
7 7 ,.dropdown-menu li > a{
8 8 color: #e7ecf1;
9   -}
  9 +} */
10 10  
11   -.dropdown > .dropdown-menu:before, .dropdown-toggle > .dropdown-menu:before, .btn-group > .dropdown-menu:before{
  11 +/* .dropdown > .dropdown-menu:before, .dropdown-toggle > .dropdown-menu:before, .btn-group > .dropdown-menu:before{
12 12 border-bottom: 7px solid #4C738E;
13 13 }
14 14  
15 15 .dropdown > .dropdown-menu:after, .dropdown-toggle > .dropdown-menu:after, .btn-group > .dropdown-menu:after {
16 16 border-bottom: 7px solid #4C738E;
17 17 }
18   -
19   -.dropdown-menu > li > a:hover{
  18 +*/
  19 +/* .dropdown-menu > li > a:hover{
20 20 background: #799EB7;
21   -}
  21 +} */
22 22  
23 23  
24 24 .portlet-fullscreen .pagination>li>a, .pagination>li>span {
... ... @@ -82,6 +82,10 @@
82 82 border-bottom: 0;
83 83 }
84 84  
  85 +.portlet-fullscreen .nav-tabs > li > a:focus{
  86 + background: transparent;
  87 +}
  88 +
85 89 .portlet-fullscreen .nav-tabs > li > a>span{
86 90 color: #C3C3C3;
87 91 font-size: 12px;
... ... @@ -138,8 +142,8 @@
138 142 font-size: 16px;
139 143 }
140 144  
141   -/* 自定义阈值 width 大于1200px */
142   -@media ( min-width : 1200px) {
  145 +/* 自定义阈值 width 大于1280px */
  146 +@media ( min-width : 1280px) {
143 147 /* 非全屏 */
144 148 .card_wrap {
145 149 overflow-x: auto;
... ... @@ -152,19 +156,45 @@
152 156 margin: 0 8px 0 8px;
153 157 }
154 158  
155   - /* 全屏模式下 */
  159 +
156 160 .portlet-fullscreen .card_wrap {
157   - min-width: 1910px;
  161 + /* min-width: 1910px; */
158 162 }
159 163 .portlet-fullscreen .card_wrap .col-lg-2 {
160 164 width: 19%
161 165 }
162 166 .portlet-fullscreen .card_wrap .col-lg-8 {
163   - width: 61.8967%;
  167 + width: 61.6967%;
164 168 margin: 0 1px 0 1px;
165 169 }
166 170 }
167 171  
  172 +@media ( max-width : 1280px) {
  173 + .card_wrap .col-lg-8 {
  174 + width: 99%;
  175 + margin: 0 8px 0 8px;
  176 + }
  177 +
  178 + .card_wrap .col-lg-2{
  179 + display: none;
  180 + }
  181 + .col_hide_1280{
  182 + display: none !important;
  183 + }
  184 +}
  185 +
  186 +@media ( max-width : 1680px){
  187 + .col_hide_1680{
  188 + display: none;
  189 + }
  190 +}
  191 +
  192 +@media ( max-width : 1440px){
  193 + .col_hide_1440{
  194 + display: none;
  195 + }
  196 +}
  197 +
168 198 .card_wrap{
169 199 height: 263px;
170 200 text-align: center;
... ... @@ -187,13 +217,15 @@
187 217 }
188 218  
189 219 .card_wrap .line_chart .top .center{
190   - background: #FFFFFF;
  220 + background: #FFFFFF;
191 221 height: 100%;
192 222 font-size: 15px;
193 223 color: #333;
194 224 padding: 10px 0px;
195 225 font-family: 微软雅黑;
196 226 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  227 + width: 190px;
  228 + float: left;
197 229 }
198 230  
199 231 .card_wrap .line_chart .top .center strong{
... ... @@ -208,6 +240,8 @@
208 240 color: #E4E466;
209 241 padding: 13px 5px;
210 242 font-size: 15px;
  243 + width: calc((100% - 195px) / 2);
  244 + float: left;
211 245 }
212 246  
213 247 .card_wrap .col-lg-2{
... ... @@ -221,6 +255,7 @@
221 255 .card_wrap .col-lg-2 .table-advance thead tr th {
222 256 font-size: 13px;
223 257 font-family: 微软雅黑;
  258 + text-align: center;
224 259 }
225 260  
226 261  
... ... @@ -287,13 +322,38 @@
287 322 background: rgba(243, 106, 90, 0.5) !important;
288 323 }
289 324  
  325 +#top-tabs-wrap{
  326 + padding: 0;
  327 + height: calc(100% - 70px);
  328 + overflow: hidden;
  329 +}
  330 +
  331 +#top-tabs-wrap .nav-tabs{
  332 + margin-bottom: 1px;
  333 + background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);
  334 +}
  335 +
  336 +
290 337 .row.card_wrap {
291 338 margin-left: 0;
292 339 margin-right: 0;
293 340 overflow-y: hidden;
294 341 background: #fdfdfd;
295 342 margin-top: 5.8px;
296   - box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  343 + /* box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  344 +}
  345 +
  346 +.pagination li.active a:before{
  347 + content: "\f00c";
  348 + font: normal normal normal 14px/1 FontAwesome;
  349 + font-size: inherit;
  350 + text-rendering: auto;
  351 +}
  352 +
  353 +.text-load{
  354 + color:gray;
  355 + font-size: 12px;
  356 + font-family: 微软雅黑;
297 357 }
298 358  
299 359 /* svg 样式 */
... ... @@ -347,5 +407,125 @@
347 407  
348 408 .down-circle-none{
349 409 fill: #C92121;
350   - r: 3;
351   -}
352 410 \ No newline at end of file
  411 + r: 0;
  412 +}
  413 +
  414 +/* tab_map 地图嵌入样式修正 */
  415 +#tab_map #mapContainer{
  416 + margin-top: -8px
  417 +}
  418 +#tab_map .mapRightWrap,
  419 +#tab_map .mapTools,
  420 +#tab_map .leftUtils{
  421 + background: #0D4369;
  422 + border-radius: 5px !important;
  423 +}
  424 +#tab_map .mapRightWrap.vehicle{
  425 + height: calc(100% - 170px);
  426 +}
  427 +
  428 +#tab_map .mapRightWrap.vehicle .vehicle-item{
  429 + border-bottom: 1px solid #545C7B;
  430 + border-radius: 0 0 4px 4px !important;
  431 +}
  432 +
  433 +#tab_map .mapRightWrap.vehicle .vehicle-item div.text{
  434 + color: #C5C4C4;
  435 +}
  436 +
  437 +#tab_map .mapRightWrap.vehicle .vehicle-item div.icon{
  438 + color: #ccc;
  439 +}
  440 +#tab_map .mapRightWrap.vehicle .vehicle-item.offline div.text span i,
  441 +#tab_map .mapRightWrap.vehicle .vehicle-item.offline div.text span,
  442 +#tab_map .mapRightWrap.vehicle .vehicle-item.offline div.text{
  443 + color: #FF858E;
  444 +}
  445 +#tab_map .mapRightWrap.search .input-group .input-group-btn button {
  446 + color: #CDD3D7;
  447 + background-color: #3B5C73;
  448 + border-color: #3B5C73;
  449 +}
  450 +#tab_map .mapRightWrap.search .input-group input {
  451 + height: 48px;
  452 + background-color: #3B5C73;
  453 + border: 1px solid #3B5C73;
  454 + color: #fafafa;
  455 +}
  456 +
  457 +/* ------------- 高德 ---------------------- */
  458 +#tab_map .mapRightWrap.gaode{
  459 + background: #fff;
  460 +}
  461 +#tab_map .mapTools.gaode{
  462 + background: #0D9BF2;
  463 +}
  464 +#tab_map .leftUtils.gaode span.item.active,
  465 +#tab_map .leftUtils.gaode span.item.active:hover{
  466 + color: #0D9BF2;
  467 +}
  468 +#tab_map .mapTools.gaode .item.active {
  469 + color: #e1e5ec;
  470 +}
  471 +#tab_map .leftUtils.gaode{
  472 + background: #fff;
  473 + color: #5A5858;
  474 +}
  475 +/* #tab_map .leftUtils.gaode span.item:hover{
  476 + color: #0D9BF2;
  477 +} */
  478 +#tab_map .mapRightWrap.gaode.vehicle .vehicle-item{
  479 + background: #fdfdfd;
  480 + color: #2D2929;
  481 +}
  482 +#tab_map .mapRightWrap.gaode.vehicle .vehicle-item div.text {
  483 + color: #999;
  484 +}
  485 +#tab_map .mapRightWrap.gaode.vehicle .vehicle-item div.text span,
  486 +#tab_map .mapRightWrap.vehicle.gaode p.head>span.icon>a {
  487 + color: #000;
  488 +}
  489 +#tab_map .mapRightWrap.gaode.vehicle p.head{
  490 + color: #7D7777;
  491 +}
  492 +#tab_map .mapRightWrap.vehicle.gaode p.head>span.icon>a:hover{
  493 + color: #555555;
  494 +}
  495 +#tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span i,
  496 +#tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text span,
  497 +#tab_map .mapRightWrap.vehicle.gaode .vehicle-item.offline div.text{
  498 + color: #e43a45;
  499 +}
  500 +#tab_map .mapRightWrap.search.gaode .input-group input{
  501 + background-color: #fafafa;
  502 + border: 1px solid #fafafa;
  503 + color: #333333;
  504 +}
  505 +#tab_map .mapRightWrap.search.gaode .input-group .input-group-btn button{
  506 + background-color: #FAFAFA;
  507 + border-color: #FAFAFA;
  508 + color: #0D9BF2;
  509 +}
  510 +#tab_map .mapRightWrap.search.gaode .input-group .input-group-btn button:hover{
  511 + background-color: #217ebd;
  512 + border-color: #1f78b5;
  513 + color: #fff;
  514 +}
  515 +#tab_map .mapRightWrap.gaode .search_result{
  516 + background: rgba(250, 250, 250, 0.9);
  517 + color: #333333;
  518 +}
  519 +#tab_map .mapRightWrap.gaode .search_result .item_vehicle_list{
  520 + border-bottom: 1px solid #C7C7C7;
  521 +}
  522 +#tab_map .mapRightWrap.gaode .search_result .item_vehicle{
  523 + color: #333333;
  524 +}
  525 +#tab_map .mapRightWrap.gaode .search_result .result_item span.sub_text{
  526 + color: #8E8D8D;
  527 +}
  528 +#tab_map .mapRightWrap.gaode .search_result .result_item:hover{
  529 + background: #ddd;
  530 + color: #333333;
  531 +}
  532 +/* GaoDe style end------- */
353 533 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/index.html
  View file @cc9ea05
1 1 <link href="css/lineControl.css" rel="stylesheet" type="text/css" />
  2 +<link href="/metronic_v4.5.4/css/animate.min.css" rel="stylesheet" type="text/css" />
  3 +
2 4 <div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 0;">
3 5 <div class="portlet-title" style="padding: 17px 20px 0px 20px;border-bottom: none;margin-bottom: 0;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);padding-bottom: 5px;">
4   - <div class="caption" style="color: #FFF;">
  6 + <div class="caption col_hide_1280" style="color: #FFF;">
5 7 <i class="fa fa-life-ring" style="font-size: 22px;color: #FFF;"></i> <span
6 8 class="caption-subject bold" style="font-size: 24px;">线路调度系统</span>
7 9 </div>
8   - <div style="color: white;font-size: 18px;position: absolute;right: 25px;top: 75px;">
  10 + <div class="col_hide_1440" style="color: white;font-size: 18px;position: absolute;right: 25px;top: 75px;">
9 11 panzhao，在线！
10 12 </div>
11   - <div class="actions" >
  13 + <div class="actions col_hide_1280" >
12 14 <div class="btn-group">
13 15 <button type="button" class="btn btn-default">
14 16 <i class="fa fa-calendar-check-o"></i> 计划排班</button>
... ... @@ -58,1072 +60,38 @@
58 60 <button type="button" class="btn btn-danger" style="margin-left: 8px;padding: 6.5px 9px !important;">
59 61 <i class="fa fa-close"></i> 退出系统</button>
60 62 </div>
61   - <!-- <a class="btn btn-circle btn-icon-only btn-default fullscreen on" href="javascript:;" data-original-title="" title=""> </a> -->
62 63 </div>
63 64 </div>
64   - <div class="portlet-body" style="padding: 0;height: calc(100% - 50px);">
65   - <ul class="nav nav-tabs" style="margin-bottom: 1px;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);">
66   - <li class="active">
  65 + <div class="portlet-body" id="top-tabs-wrap" >
  66 + <ul class="nav nav-tabs" >
  67 + <li class="">
67 68 <a href="#tab_home" data-toggle="tab" aria-expanded="true" style="padding: 10px 15px;">
68 69 <i class="fa fa-home"></i> 主页
69 70 </a>
70 71 </li>
71   - <li class=""><a href="#tab_map" data-toggle="tab" style="padding: 10px 15px;"
72   - aria-expanded="false"> 地图监控 </a></li>
73   -
74   -
75   - <li class=""><a href="#tab_85" data-toggle="tab"
76   - aria-expanded="false"> 85路<span>（12, 5 托管）</span> </a></li>
77   -
78   -
79   - <li class=""><a href="#tab_50" data-toggle="tab"
80   - aria-expanded="false"> 浦东50路 <span>（0, 2 托管）</span></a></li>
81   -
82   - <li class=""><a href="#tab_85" data-toggle="tab"
83   - aria-expanded="false"> 778路<span>（托管）</span> </a></li>
84   -
85   -
86   - <li class=""><a href="#tab_50" data-toggle="tab"
87   - aria-expanded="false"> 新川专线 <span>（托管）</span></a></li>
88   -
89   - <li class=""><a href="#tab_85" data-toggle="tab"
90   - aria-expanded="false"> 上川专线<span>（0, 5 托管）</span> </a></li>
91   -
92   -
93   - <li class=""><a href="#tab_50" data-toggle="tab"
94   - aria-expanded="false"> 961路 <span>（0, 2 托管）</span></a></li>
95   -
96   - <li class=""><a href="#tab_85" data-toggle="tab"
97   - aria-expanded="false"> 977路<span>（12, 5 托管）</span> </a></li>
98   -
99   -
100   - <li class=""><a href="#tab_50" data-toggle="tab"
101   - aria-expanded="false"> 张江1路 <span>（0, 2 托管）</span></a></li>
  72 + <li class="active"><a href="#tab_map" data-toggle="tab" style="padding: 10px 15px;"
  73 + aria-expanded="false"><i class="fa fa-map"></i> 地图 </a></li>
102 74 </ul>
103 75  
104   - <div class="tab-content" style="padding: 5px;">
105   - <div class="tab-pane fade active in" id="tab_home" >
106   - <div class="row card_wrap" style="margin-top: 0px;">
107   - <div class="col-lg-2 " >
108   -
109   - <div class="title">
110   - 发往川沙客运站方向
111   - <span class="badge" > 13 </span>
112   - <div class="help_text dropdown">
113   - <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
114   - <i class="fa fa-ellipsis-horizontal"></i> 上行全部
115   - <i class="fa fa-angle-down"></i>
116   - </span>
117   - <ul class="dropdown-menu">
118   - <li>
119   - <a href="javascript:;"> 上行全部 </a>
120   - </li>
121   - <li>
122   - <a href="javascript:;"> 上行停靠 </a>
123   - </li>
124   - <li>
125   - <a href="javascript:;"> 上行在途 </a>
126   - </li>
127   - <li role="separator" class="divider"></li>
128   - <li>
129   - <a href="javascript:;"> 场内车辆 </a>
130   - </li>
131   - <li>
132   - <a href="javascript:;"> 非营运车辆</a>
133   - </li>
134   - </ul>
135   -
136   - </div>
137   - </div>
138   - <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
139   - <colgroup>
140   - <col style="width: 20%;">
141   - <col style="width: 19%;">
142   - <col style="width: 20%;">
143   - <col style="width: 14%;">
144   - <col style="width: 14%;">
145   -
146   - </colgroup>
147   - <thead>
148   - <tr>
149   - <th> 车辆编码 </th>
150   - <th> 终点距离 </th>
151   - <th> 终点时间 </th>
152   - <th> 指令 </th>
153   - <th> 速度 </th>
154   - <th> 路牌 </th>
155   - </tr>
156   - </thead>
157   - </table>
158   - <div class="table_wrap">
159   - <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
160   - <colgroup>
161   - <col style="width: 20%;">
162   - <col style="width: 19%;">
163   - <col style="width: 20%;">
164   - <col style="width: 14%;">
165   - <col style="width: 14%;">
166   -
167   - </colgroup>
168   - <tbody>
169   - <tr>
170   - <td> W9H108 </td>
171   - <td> 13.143 </td>
172   - <td> 82 </td>
173   - <td>
174   - </td>
175   - <td> 16.00 </td>
176   - <td> 4 </td>
177   - </tr>
178   - <tr>
179   - <td> W9H108 </td>
180   - <td> 13.143 </td>
181   - <td> 82 </td>
182   - <td>
183   - </td>
184   - <td> 16.00 </td>
185   - <td> 4 </td>
186   - </tr>
187   - <tr>
188   - <td> W9H108 </td>
189   - <td> 13.143 </td>
190   - <td> 82 </td>
191   - <td>
192   - </td>
193   - <td> 16.00 </td>
194   - <td> 4 </td>
195   - </tr>
196   - <tr>
197   - <td> W9H108 </td>
198   - <td> 13.143 </td>
199   - <td> 82 </td>
200   - <td>
201   - </td>
202   - <td> 16.00 </td>
203   - <td> 4 </td>
204   - </tr>
205   - <tr>
206   - <td> W9H108 </td>
207   - <td> 13.143 </td>
208   - <td> 82 </td>
209   - <td>
210   - </td>
211   - <td> 16.00 </td>
212   - <td> 4 </td>
213   - </tr>
214   - <tr>
215   - <td> W9H108 </td>
216   - <td> 13.143 </td>
217   - <td> 82 </td>
218   - <td>
219   - <span class="label label-sm label-success"> 发送 </span>
220   - </td>
221   - <td> 16.00 </td>
222   - <td> 4 </td>
223   - </tr>
224   - </tbody>
225   - </table>
226   - </div>
227   - </div>
228   - <div class="col-lg-8 line_chart " >
229   - <div class="top">
230   - <div class="left col-md-5">
231   - <div class="top-remark">
232   - 应发未发：0 &nbsp;[05:20, 07:10]<br>
233   - 待发班次：35 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55]
234   - </div>
235   - </div>
236   - <div class="center col-md-2">
237   - <strong>778路</strong> 计划配车：9<br>
238   - 在运营：9&nbsp;场内：0
239   - </div>
240   - <div class="right col-md-5">
241   - <div class="top-remark">
242   - 应发未发：0 &nbsp;[05:20, 07:10]<br>
243   - 待发班次：40 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
244   - </div>
245   - </div>
246   - </div>
247   - </div>
248   - <div class="col-lg-2 down" >
249   -
250   - <div class="title" >
251   - 发往南公交枢纽站方向
252   - <span class="badge" > 7 </span>
253   - <div class="help_text dropdown">
254   - <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
255   - <i class="fa fa-ellipsis-horizontal"></i> 下行全部
256   - <i class="fa fa-angle-down"></i>
257   - </span>
258   - <ul class="dropdown-menu pull-right">
259   - <li>
260   - <a href="javascript:;"> 下行全部 </a>
261   - </li>
262   - <li>
263   - <a href="javascript:;"> 下行停靠 </a>
264   - </li>
265   - <li>
266   - <a href="javascript:;"> 下行在途 </a>
267   - </li>
268   - </ul>
269   - </div>
270   - </div>
271   - <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
272   - <colgroup>
273   - <col style="width: 20%;">
274   - <col style="width: 19%;">
275   - <col style="width: 20%;">
276   - <col style="width: 14%;">
277   - <col style="width: 14%;">
278   -
279   - </colgroup>
280   - <thead>
281   - <tr>
282   - <th> 车辆编码 </th>
283   - <th> 终点距离 </th>
284   - <th> 终点时间 </th>
285   - <th> 指令 </th>
286   - <th> 速度 </th>
287   - <th> 路牌 </th>
288   - </tr>
289   - </thead>
290   - </table>
291   - <div class="table_wrap">
292   - <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
293   - <colgroup>
294   - <col style="width: 20%;">
295   - <col style="width: 19%;">
296   - <col style="width: 20%;">
297   - <col style="width: 14%;">
298   - <col style="width: 14%;">
299   -
300   - </colgroup>
301   - <tbody>
302   - <tr>
303   - <td> W9H108 </td>
304   - <td> 13.143 </td>
305   - <td> 82 </td>
306   - <td>
307   - </td>
308   - <td> 16.00 </td>
309   - <td> 4 </td>
310   - </tr>
311   - <tr>
312   - <td> W9H108 </td>
313   - <td> 13.143 </td>
314   - <td> 82 </td>
315   - <td>
316   - </td>
317   - <td> 16.00 </td>
318   - <td> 4 </td>
319   - </tr>
320   - <tr>
321   - <td> W9H108 </td>
322   - <td> 13.143 </td>
323   - <td> 82 </td>
324   - <td>
325   - <span class="label label-sm label-success"> 发送 </span>
326   - </td>
327   - <td> 16.00 </td>
328   - <td> 4 </td>
329   - </tr>
330   - <tr>
331   - <td> W9H108 </td>
332   - <td> 13.14 </td>
333   - <td> 82 </td>
334   - <td>
335   - </td>
336   - <td> 16.00 </td>
337   - <td> 4 </td>
338   - </tr>
339   - <tr>
340   - <td> W9H108 </td>
341   - <td> 13.14 </td>
342   - <td> 82 </td>
343   - <td>
344   - </td>
345   - <td> 16.00 </td>
346   - <td> 4 </td>
347   - </tr>
348   - </tbody>
349   - </table>
350   - </div>
351   - </div>
352   - </div>
353   -
354   - <div class="row card_wrap" >
355   - <div class="col-lg-2 " >
356   -
357   - <div class="title">
358   - 发往川沙客运站方向
359   - <span class="badge" > 13 </span>
360   - <div class="help_text dropdown">
361   - <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
362   - <i class="fa fa-ellipsis-horizontal"></i> 上行全部
363   - <i class="fa fa-angle-down"></i>
364   - </span>
365   - <ul class="dropdown-menu">
366   - <li>
367   - <a href="javascript:;"> 上行全部 </a>
368   - </li>
369   - <li>
370   - <a href="javascript:;"> 上行停靠 </a>
371   - </li>
372   - <li>
373   - <a href="javascript:;"> 上行在途 </a>
374   - </li>
375   - <li role="separator" class="divider"></li>
376   - <li>
377   - <a href="javascript:;"> 场内车辆 </a>
378   - </li>
379   - <li>
380   - <a href="javascript:;"> 非营运车辆</a>
381   - </li>
382   - </ul>
383   -
384   - </div>
385   - </div>
386   - <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
387   - <colgroup>
388   - <col style="width: 20%;">
389   - <col style="width: 19%;">
390   - <col style="width: 20%;">
391   - <col style="width: 14%;">
392   - <col style="width: 14%;">
393   -
394   - </colgroup>
395   - <thead>
396   - <tr>
397   - <th> 车辆编码 </th>
398   - <th> 终点距离 </th>
399   - <th> 终点时间 </th>
400   - <th> 指令 </th>
401   - <th> 速度 </th>
402   - <th> 路牌 </th>
403   - </tr>
404   - </thead>
405   - </table>
406   - <div class="table_wrap">
407   - <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
408   - <colgroup>
409   - <col style="width: 20%;">
410   - <col style="width: 19%;">
411   - <col style="width: 20%;">
412   - <col style="width: 14%;">
413   - <col style="width: 14%;">
414   -
415   - </colgroup>
416   - <tbody>
417   - <tr>
418   - <td> W9H108 </td>
419   - <td> 13.143 </td>
420   - <td> 82 </td>
421   - <td>
422   - </td>
423   - <td> 16.00 </td>
424   - <td> 4 </td>
425   - </tr>
426   - <tr>
427   - <td> W9H108 </td>
428   - <td> 13.143 </td>
429   - <td> 82 </td>
430   - <td>
431   - </td>
432   - <td> 16.00 </td>
433   - <td> 4 </td>
434   - </tr>
435   - <tr>
436   - <td> W9H108 </td>
437   - <td> 13.14 </td>
438   - <td> 82 </td>
439   - <td>
440   - </td>
441   - <td> 16.00 </td>
442   - <td> 4 </td>
443   - </tr>
444   - <tr>
445   - <td> W9H108 </td>
446   - <td> 13.14 </td>
447   - <td> 82 </td>
448   - <td>
449   - </td>
450   - <td> 16.00 </td>
451   - <td> 4 </td>
452   - </tr>
453   - <tr>
454   - <td> W9H108 </td>
455   - <td> 13.14 </td>
456   - <td> 82 </td>
457   - <td>
458   - </td>
459   - <td> 16.00 </td>
460   - <td> 4 </td>
461   - </tr>
462   - <tr>
463   - <td> W9H108 </td>
464   - <td> 13.14 </td>
465   - <td> 82 </td>
466   - <td>
467   - </td>
468   - <td> 16.00 </td>
469   - <td> 4 </td>
470   - </tr>
471   - </tbody>
472   - </table>
473   - </div>
474   - </div>
475   - <div class="col-lg-8 line_chart " >
476   - <div class="top">
477   - <div class="left col-md-5">
478   - <div class="top-remark">
479   - 应发未发：0 &nbsp;[05:20, 07:10]<br>
480   - 待发班次：45 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
481   - </div>
482   - </div>
483   - <div class="center col-md-2">
484   - <strong>1052路</strong> 计划配车：9<br>
485   - 在运营：9&nbsp;场内：0
486   - </div>
487   - <div class="right col-md-5">
488   - <div class="top-remark">
489   - 应发未发：1 &nbsp;[05:20, 07:10]<br>
490   - 待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
491   - </div>
492   - </div>
493   - </div>
494   - </div>
495   - <div class="col-lg-2 down" >
496   -
497   - <div class="title" >
498   - 发往南公交枢纽站方向
499   - <span class="badge" > 7 </span>
500   - <div class="help_text dropdown">
501   - <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
502   - <i class="fa fa-ellipsis-horizontal"></i> 下行全部
503   - <i class="fa fa-angle-down"></i>
504   - </span>
505   - <ul class="dropdown-menu pull-right">
506   - <li>
507   - <a href="javascript:;"> 下行全部 </a>
508   - </li>
509   - <li>
510   - <a href="javascript:;"> 下行停靠 </a>
511   - </li>
512   - <li>
513   - <a href="javascript:;"> 下行在途 </a>
514   - </li>
515   - </ul>
516   - </div>
517   - </div>
518   - <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
519   - <colgroup>
520   - <col style="width: 20%;">
521   - <col style="width: 19%;">
522   - <col style="width: 20%;">
523   - <col style="width: 14%;">
524   - <col style="width: 14%;">
525   -
526   - </colgroup>
527   - <thead>
528   - <tr>
529   - <th> 车辆编码 </th>
530   - <th> 终点距离 </th>
531   - <th> 终点时间 </th>
532   - <th> 指令 </th>
533   - <th> 速度 </th>
534   - <th> 路牌 </th>
535   - </tr>
536   - </thead>
537   - </table>
538   - <div class="table_wrap">
539   - <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
540   - <colgroup>
541   - <col style="width: 20%;">
542   - <col style="width: 19%;">
543   - <col style="width: 20%;">
544   - <col style="width: 14%;">
545   - <col style="width: 14%;">
546   -
547   - </colgroup>
548   - <tbody>
549   - <tr>
550   - <td> W9H108 </td>
551   - <td> 13.143 </td>
552   - <td> 82 </td>
553   - <td>
554   - </td>
555   - <td> 16.00 </td>
556   - <td> 4 </td>
557   - </tr>
558   - <tr>
559   - <td> W9H108 </td>
560   - <td> 13.143 </td>
561   - <td> 82 </td>
562   - <td>
563   - <span class="label label-sm label-success"> 发送 </span>
564   - </td>
565   - <td> 16.00 </td>
566   - <td> 4 </td>
567   - </tr>
568   - <tr>
569   - <td> W9H108 </td>
570   - <td> 13.143 </td>
571   - <td> 82 </td>
572   - <td>
573   - </td>
574   - <td> 16.00 </td>
575   - <td> 4 </td>
576   - </tr>
577   - <tr>
578   - <td> W9H108 </td>
579   - <td> 13.14 </td>
580   - <td> 82 </td>
581   - <td>
582   - </td>
583   - <td> 16.00 </td>
584   - <td> 4 </td>
585   - </tr>
586   - <tr>
587   - <td> W9H108 </td>
588   - <td> 13.14 </td>
589   - <td> 82 </td>
590   - <td>
591   - </td>
592   - <td> 16.00 </td>
593   - <td> 4 </td>
594   - </tr>
595   - </tbody>
596   - </table>
597   - </div>
598   - </div>
599   - </div>
600   - <div class="row card_wrap" >
601   - <div class="col-lg-2 " >
602   -
603   - <div class="title">
604   - 发往川沙客运站方向
605   - <span class="badge" > 13 </span>
606   - <div class="help_text dropdown">
607   - <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
608   - <i class="fa fa-ellipsis-horizontal"></i> 上行全部
609   - <i class="fa fa-angle-down"></i>
610   - </span>
611   - <ul class="dropdown-menu">
612   - <li>
613   - <a href="javascript:;"> 上行全部 </a>
614   - </li>
615   - <li>
616   - <a href="javascript:;"> 上行停靠 </a>
617   - </li>
618   - <li>
619   - <a href="javascript:;"> 上行在途 </a>
620   - </li>
621   - <li role="separator" class="divider"></li>
622   - <li>
623   - <a href="javascript:;"> 场内车辆 </a>
624   - </li>
625   - <li>
626   - <a href="javascript:;"> 非营运车辆</a>
627   - </li>
628   - </ul>
629   -
630   - </div>
631   - </div>
632   - <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
633   - <colgroup>
634   - <col style="width: 20%;">
635   - <col style="width: 19%;">
636   - <col style="width: 20%;">
637   - <col style="width: 14%;">
638   - <col style="width: 14%;">
639   -
640   - </colgroup>
641   - <thead>
642   - <tr>
643   - <th> 车辆编码 </th>
644   - <th> 终点距离 </th>
645   - <th> 终点时间 </th>
646   - <th> 指令 </th>
647   - <th> 速度 </th>
648   - <th> 路牌 </th>
649   - </tr>
650   - </thead>
651   - </table>
652   - <div class="table_wrap">
653   - <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
654   - <colgroup>
655   - <col style="width: 20%;">
656   - <col style="width: 19%;">
657   - <col style="width: 20%;">
658   - <col style="width: 14%;">
659   - <col style="width: 14%;">
660   -
661   - </colgroup>
662   - <tbody>
663   - <tr>
664   - <td> W9H108 </td>
665   - <td> 13.143 </td>
666   - <td> 82 </td>
667   - <td>
668   - </td>
669   - <td> 16.00 </td>
670   - <td> 4 </td>
671   - </tr>
672   - <tr>
673   - <td> W9H108 </td>
674   - <td> 13.143 </td>
675   - <td> 82 </td>
676   - <td>
677   - </td>
678   - <td> 16.00 </td>
679   - <td> 4 </td>
680   - </tr>
681   - <tr>
682   - <td> W9H108 </td>
683   - <td> 13.14 </td>
684   - <td> 82 </td>
685   - <td>
686   - </td>
687   - <td> 16.00 </td>
688   - <td> 4 </td>
689   - </tr>
690   - <tr>
691   - <td> W9H108 </td>
692   - <td> 13.14 </td>
693   - <td> 82 </td>
694   - <td>
695   - </td>
696   - <td> 16.00 </td>
697   - <td> 4 </td>
698   - </tr>
699   - <tr>
700   - <td> W9H108 </td>
701   - <td> 13.14 </td>
702   - <td> 82 </td>
703   - <td>
704   - </td>
705   - <td> 16.00 </td>
706   - <td> 4 </td>
707   - </tr>
708   - <tr>
709   - <td> W9H108 </td>
710   - <td> 13.14 </td>
711   - <td> 82 </td>
712   - <td>
713   - </td>
714   - <td> 16.00 </td>
715   - <td> 4 </td>
716   - </tr>
717   - </tbody>
718   - </table>
719   - </div>
720   - </div>
721   - <div class="col-lg-8 line_chart " >
722   - <div class="top">
723   - <div class="left col-md-5">
724   - <div class="top-remark">
725   - 应发未发：4 &nbsp;[05:20, 07:10]<br>
726   - 待发班次：44 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
727   - </div>
728   - </div>
729   - <div class="center col-md-2">
730   - <strong>新川专线</strong> 计划配车：9<br>
731   - 在运营：9&nbsp;场内：0
732   - </div>
733   - <div class="right col-md-5">
734   - <div class="top-remark">
735   - 应发未发：0&nbsp;[05:20, 07:10]<br>
736   - 待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
737   - </div>
738   - </div>
739   - </div>
740   - </div>
741   - <div class="col-lg-2 down" >
742   -
743   - <div class="title" >
744   - 发往南公交枢纽站方向
745   - <span class="badge" > 7 </span>
746   - <div class="help_text dropdown">
747   - <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
748   - <i class="fa fa-ellipsis-horizontal"></i> 下行全部
749   - <i class="fa fa-angle-down"></i>
750   - </span>
751   - <ul class="dropdown-menu pull-right">
752   - <li>
753   - <a href="javascript:;"> 下行全部 </a>
754   - </li>
755   - <li>
756   - <a href="javascript:;"> 下行停靠 </a>
757   - </li>
758   - <li>
759   - <a href="javascript:;"> 下行在途 </a>
760   - </li>
761   - </ul>
762   - </div>
763   - </div>
764   - <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
765   - <colgroup>
766   - <col style="width: 20%;">
767   - <col style="width: 19%;">
768   - <col style="width: 20%;">
769   - <col style="width: 14%;">
770   - <col style="width: 14%;">
771   -
772   - </colgroup>
773   - <thead>
774   - <tr>
775   - <th> 车辆编码 </th>
776   - <th> 终点距离 </th>
777   - <th> 终点时间 </th>
778   - <th> 指令 </th>
779   - <th> 速度 </th>
780   - <th> 路牌 </th>
781   - </tr>
782   - </thead>
783   - </table>
784   - <div class="table_wrap">
785   - <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
786   - <colgroup>
787   - <col style="width: 20%;">
788   - <col style="width: 19%;">
789   - <col style="width: 20%;">
790   - <col style="width: 14%;">
791   - <col style="width: 14%;">
792   -
793   - </colgroup>
794   - <tbody>
795   - <tr>
796   - <td> W9H108 </td>
797   - <td> 13.143 </td>
798   - <td> 82 </td>
799   - <td>
800   - </td>
801   - <td> 16.00 </td>
802   - <td> 4 </td>
803   - </tr>
804   - <tr>
805   - <td> W9H108 </td>
806   - <td> 13.143 </td>
807   - <td> 82 </td>
808   - <td>
809   - </td>
810   - <td> 16.00 </td>
811   - <td> 4 </td>
812   - </tr>
813   - <tr>
814   - <td> W9H108 </td>
815   - <td> 13.143 </td>
816   - <td> 82 </td>
817   - <td>
818   - <span class="label label-sm label-success"> 发送 </span>
819   - </td>
820   - <td> 16.00 </td>
821   - <td> 4 </td>
822   - </tr>
823   - <tr>
824   - <td> W9H108 </td>
825   - <td> 13.14 </td>
826   - <td> 82 </td>
827   - <td>
828   - <span class="label label-sm label-success"> 发送 </span>
829   - </td>
830   - <td> 16.00 </td>
831   - <td> 4 </td>
832   - </tr>
833   - <tr>
834   - <td> W9H108 </td>
835   - <td> 13.14 </td>
836   - <td> 82 </td>
837   - <td>
838   - </td>
839   - <td> 16.00 </td>
840   - <td> 4 </td>
841   - </tr>
842   - </tbody>
843   - </table>
844   - </div>
845   - </div>
846   - </div>
847   - <div style="width: 100%;position: absolute;left: 0;height: 40px;bottom: 0;background: linear-gradient(to right, #c5c8ce, #E4E7EC);">
848   - <ul class="pagination" style="visibility: visible;float: left;margin-top: 2px;">
849   - <!-- <li class="head">
850   - <a>分页</a>
851   - </li> -->
852   - <li class="active"><a href="#"><i class="fa fa-check"></i> 778，1052，新川专线</a></li>
853   - <li><a href="#">85，785，陆家嘴金融城3路</a></li>
854   - <li><a href="#">961，1047，张江1路</a></li>
855   - </ul>
856   -
857   - <div style="float: right;line-height: 40px;margin-right: 20px;font-family: 微软雅黑;">
858   - <!-- 当前用户：panzhao -->
859   - <span style="color: #17589E;margin-left: 40px;">已成功连接服务器</span>
860   - </div>
861   - </div>
862   - </div>
863   - <div class="tab-pane fade" id="tab_map">
864   - 地图
865   - </div>
866   - <div class="tab-pane fade" id="tab_85">
867   - 85路
868   - </div>
869   - <div class="tab-pane fade" id="tab_50">
870   - 浦东50路
871   - </div>
  76 + <div class="tab-content" style="padding: 5px;overflow-y: auto;">
  77 + <div class="tab-pane fade" id="tab_home" ></div>
  78 + <div class="tab-pane fade active in" id="tab_map" style="position: relative;"></div>
  79 + <div class="tab-pane fade" id="tab_line">单线路调度</div>
872 80 </div>
873 81 </div>
874 82 </div>
  83 +<div id="temps"></div>
875 84  
  85 +<script src="js/drawSvg.js"></script>
  86 +<script src="js/data.js"></script>
  87 +<script src="js/main.js"></script>
876 88 <script>
877 89 $(function() {
878 90  
879   - // 关闭左侧栏
  91 + // 关闭左侧栏 http://222.66.0.204:8899/transport_server/rtgps
880 92 /* if (!$('body').hasClass('page-sidebar-closed'))
881 93 $('.menu-toggler.sidebar-toggler').click();
882 94 */
883   -
884   - $('.card_wrap .table_wrap').slimscroll({
885   - height: '187px',
886   - alwaysVisible: true,
887   - opacity: .8
888   - });
889   -
890   - $('.line_chart .top .top-remark').slimscroll({
891   - height: '47px'
892   - });
893   -
894   -/* var h = $(document.body).height() - 63;
895   - alert(h);
896   - $('#tab_home').slimscroll({
897   - height: h + 'px' ,
898   - alwaysVisible: true
899   - }); */
900   -
901   - setTimeout(function(){
902   - /**
903   - type: 0 上行站点 1 下行站点 2 上下行共有 3 上下行共有（name不同）
904   - */
905   - var stations =
906   - [{name: '张江地铁站', type:'2', id: 1}
907   - , {name: '祖冲之路居里路aa', type:'1', id: 2}
908   - , {name: '祖冲之路高斯路', type:'1', id: 3}
909   - , {name: '祖冲之路张江路', type:'2', id: 4}
910   - , {name: '紫薇路张江路', type:'2', id: 5}
911   - , {name: '祖冲之路广兰路', type:'2', id: 6}
912   - , {name: '申江路祖冲之路', type:'2', id: 7}
913   - , {name: '申江路益丰路', type:'2', id: 8}
914   - , {name: ['盛夏路益江路', '科苑路孙环路'], type:'3', id: [9, 10]}
915   - , {name: '益江路盛夏路', type:'2', id: 11}
916   - , {name: '张东路益江路', type:'2', id: 12}
917   - , {name: '高科中路芳春路', type:'0', id: 13}
918   - , {name: '唐安路唐镇路', type:'2', id: 14}
919   - , {name: '唐安路唐兴路', type:'2', id: 15}
920   - , {name: '创新西路唐安路', type:'2', id: 16}
921   - , {name: '创新中路齐爱路', type:'2', id: 17}
922   - , {name: '齐爱路南漕路', type: '2', id: 18}
923   - , {name: '南漕路唐陆公路', type:'2', id: 19}
924   - , {name: '蛀虫之路广兰路', type:'2', id: 20}
925   - , {name: '上海火车站北广场', type:'2', id: 21}];
926   -
927   -
928   - //svg start-----------------
929   - //顶部距离
930   - var mTop = 21;
931   - //上下行之间高度
932   - var h = 132;
933   -
934   - var svg = d3.selectAll('.line_chart').append('svg').attr('width',
935   - '100%');
936   -
937   - var upLine = d3.svg.line().x(function(d) {
938   - return d.cx;
939   - }).y(function(d) {
940   - return mTop;
941   - });
942   -
943   - var downLine = d3.svg.line().x(function(d) {
944   - return d.cx;
945   - }).y(function(d) {
946   - return mTop + h;
947   - });
948   -
949   - var circleClass = function(d, type, c){
950   - if(d.type == type){
951   - if(type == 1){
952   - c = 'up-circle-none';
953   - }
954   - else{
955   - c = 'down-circle-none';
956   - }
957   - }
958   - return c;
959   - }
960   -
961   - //横向比例尺 -根据svg的宽度平均分布站点
962   - var dLen = stations.length
963   - ,indent = $('svg').width() / 12 - (dLen * 2) - 6;
964   - var xScale = d3.scale.linear().domain([ 0, dLen])
965   - .range([ indent, $('.line_chart svg').width()]);
966   -
967   - $.each(stations, function(i, d) {
968   - d.cx = xScale(i);
969   - });
970   -
971   - //上行线条
972   - svg.append('g').selectAll('path').data(stations.slice(0, dLen - 1))
973   - .enter().append('path').attr('d', function(d, i) {
974   - return upLine([ d, stations[i + 1] ]);
975   - }).attr('class', 'up_path');
976   -
977   - //上行站点 外圆
978   - svg.append('g').selectAll('circle').data(stations).enter().append('circle')
979   - .attr('cy', mTop)
980   - .attr('class', function(d){return circleClass(d, 1, 'station_circle')})
981   - .attr('cx', function(d, i) {
982   - return d.cx;
983   - });
984   -
985   - //上行站点 内圆
986   - svg.append('g').selectAll('circle').data(stations).enter().append('circle')
987   - .attr('class', function(d){return circleClass(d, 1, 'up_station_circle_inside')})
988   - .attr('cy', mTop)
989   - .attr('id', function(d){
990   - var id = d.id;
991   - if(d.type == 3){
992   - id = d.id[0];
993   - }
994   - return id;
995   - })
996   - .attr('cx', function(d, i) {
997   - return d.cx;
998   - });
999   -
1000   - //下行线条
1001   - svg.append('g').selectAll('path')
1002   - .data(stations.slice(0, dLen - 1)).enter()
1003   - .append('path').attr('d', function(d, i) {
1004   - return downLine([ d, stations[i + 1] ]);
1005   - }).attr('class', 'down_path');
1006   -
1007   - //下行站点 外圆
1008   - svg.append('g').selectAll('circle').data(stations).enter().append('circle')
1009   - .attr('class', function(d){return circleClass(d, 0, 'station_circle')})
1010   - .attr('cy', mTop + h)
1011   - .attr('cx', function(d, i) {
1012   - return d.cx;
1013   - });
1014   - //下行站点 内圆
1015   - svg.append('g').selectAll('circle').data(stations).enter().append('circle')
1016   - .attr('class', function(d){return circleClass(d, 0, 'down_station_circle_inside')})
1017   - .attr('cy', mTop + h)
1018   - .attr('cx', function(d, i) {
1019   - return d.cx;
1020   - })
1021   - .attr('id', function(d){
1022   - var id = d.id;
1023   - if(d.type == 3){
1024   - id = d.id[1];
1025   - }
1026   - return id;
1027   - });
1028   -
1029   -
1030   - var line = d3.svg.line().x(function(d) {
1031   - return d.attr('cx');
1032   - }).y(function(d) {
1033   - return d.attr('cy');
1034   - });
1035   -
1036   - //左括号
1037   - svg.append('g').append('path')
1038   - .attr('d', function(){
1039   - var up = svg.select('.up_station_circle_inside')
1040   - ,down = svg.select('.down_station_circle_inside');
1041   -
1042   - var upX = parseInt(up.attr('cx')) -5
1043   - , upY = parseInt(up.attr('cy')) + 8
1044   - , downX = parseInt(down.attr('cx')) -5
1045   - , downY = parseInt(down.attr('cy')) -8
1046   - ,arc = (upX - 18);
1047   - return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
1048   - })
1049   - .attr('class', 'up_path')
1050   - .attr('fill', 'none');
1051   -
1052   - //右括号
1053   - svg.append('g').append('path')
1054   - .attr('d', function(){
1055   - var up = $('.up_station_circle_inside:last')
1056   - ,down = $('.down_station_circle_inside:last');
1057   -
1058   - var upX = parseInt(up.attr('cx')) +5
1059   - , upY = parseInt(up.attr('cy')) + 8
1060   - , downX = parseInt(down.attr('cx')) +5
1061   - , downY = parseInt(down.attr('cy')) -8
1062   - ,arc = (upX + 18);
1063   - return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
1064   - })
1065   - .attr('class', 'down_path')
1066   - .attr('fill', 'none');
1067   -
1068   -
1069   -
1070   - //文字
1071   - var getText = function(t){
1072   - if (t.length > 7) {
1073   - return t.substring(0, 7) + '·';
1074   - }
1075   - return t;
1076   - }
1077   - svg.append('g').selectAll('text').data(stations).enter()
1078   - .append('text')
1079   - .attr('y',
1080   - function(d, i) {
1081   - var t;
1082   - if(d.type == 3){
1083   - t = d.name[0];
1084   - }
1085   - else{
1086   - t = d.name;
1087   - }
1088   - return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
1089   - })
1090   - .attr('class', function(d, i){
1091   - var classz = 'station_text';
1092   - if(i == 0)
1093   - classz += ' start';
1094   - else if(i == stations.length - 1)
1095   - classz += ' end';
1096   - return classz;
1097   - })
1098   - .text(function(d){
1099   - if(d.type == 3){
1100   - $(this).attr('type', 3).attr('downName', d.name[1]);
1101   - return getText(d.name[0]);
1102   - }
1103   - return getText(d.name);
1104   - })
1105   - .attr('x', function(d, i) {
1106   - return xScale(i);
1107   - });
1108   -
1109   -
1110   - //上下行不同名修正
1111   - var lastG = svg.append('g');
1112   - $.each($('.station_text[type=3]'), function(i, obj){
1113   - var x = parseInt($(obj).attr('x'))
1114   - ,diff = 8;
1115   -
1116   - lastG.append('text')
1117   - .attr('y', $(obj).attr('y'))
1118   - .attr('class', 'station_text')
1119   - .attr('x', (x + diff))
1120   - .attr('fill', 'red')
1121   - .text($(obj).attr('downname'));
1122   -
1123   - $(obj).attr('fill', '#337AB7')
1124   - .removeAttr('type').removeAttr('downname')
1125   - .attr('x', x - diff);
1126   - });
1127   - }, 200);
1128   - });
  95 +
  96 +});
1129 97 </script>
1130 98 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/js/data.js 0 → 100644
  View file @cc9ea05
  1 +/**
  2 + * 数据处理模块
  3 +*/
  4 +var _data = (function(){
  5 +
  6 + var storage = window.localStorage;
  7 + //写入模拟数据
  8 + storage.setItem('lineControlItems',JSON.stringify(
  9 + [
  10 + {id: 10232, name: '604路', start: '三林世博家园', end: '西营路德州路'},
  11 + {id: 10566, name: '778路', start: '莱阳路五莲路', end: '张江地铁站'} ,
  12 + {id: 10904, name: '新川专线', start: '上海火车站（北广场）', end: '华戴路川环南路'},
  13 + {id: 10069, name: '85路', start: '陆家嘴地铁站', end: '长岛路东陆路'},
  14 + {id: 10474, name: '987路', start: '源华路双桥路', end: '世纪大道地铁站'},
  15 + {id: 10507, name: '636路', start: '龚丰路溪平路', end: '张江地铁站'},
  16 + {id: 10702, name: '浦东23路', start: '南汇汽车站', end: '五七场部'},
  17 + {id: 10220, name: '573路', start: '宁桥路申江路', end: '东方路栖霞路'}
  18 + ]));
  19 +
  20 +
  21 + var dataObject = {
  22 + getLines: function(){
  23 + return JSON.parse(storage.getItem('lineControlItems'));
  24 + },
  25 + getRealVehic: function(lineArray, cb){
  26 + var tabList = [
  27 + {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'},
  28 + {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'},
  29 + {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'},
  30 + {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'},
  31 + {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'},
  32 + {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'}
  33 + ];
  34 + var d = {
  35 + '10232_0': tabList,
  36 + '10232_1': tabList,
  37 + '10566_0': tabList,
  38 + '10566_1': tabList,
  39 + '10904_0': tabList,
  40 + '10904_1': tabList,
  41 + '10069_0': tabList,
  42 + '10069_1': tabList,
  43 + '10474_0': tabList,
  44 + '10474_1': tabList,
  45 + '10507_0': tabList,
  46 + '10507_1': tabList,
  47 + '10702_0': tabList,
  48 + '10702_1': tabList,
  49 + '10220_0': tabList,
  50 + '10220_1': tabList
  51 + };
  52 + cb && cb(d);
  53 + }
  54 + //查询站点路由
  55 + ,queryStationRoute : function(lineId,container, cb){
  56 + $get('/stationroute/all', {'line.lineCode_eq': lineId}, function(routes){
  57 + var svgData = analyData(routes);
  58 +
  59 + cb && cb(svgData, container);
  60 + });
  61 + }
  62 + };
  63 +
  64 + //加载模板文件
  65 + getTemp('temps/home_tp.html');
  66 + getTemp('temps/home_table_tp.html');
  67 +
  68 + function getTemp(url){
  69 + $.get(url, function(template){
  70 + $('#temps').append(template);
  71 + });
  72 + }
  73 +
  74 + var upSort = function(a, b){
  75 + return a.outStationNmber - b.outStationNmber;
  76 + }
  77 +
  78 + var downSort = function(a, b){
  79 + return b.outStationNmber - a.outStationNmber;
  80 + }
  81 +
  82 + var station_indexof = function(array, station , start){
  83 + var res = -1
  84 +
  85 + for(var i = start, obj; obj = array[i++];){
  86 +
  87 + if(obj.station.stationName == station.stationName){
  88 + res = i;
  89 + break;
  90 + }
  91 + }
  92 +
  93 + return res;
  94 + }
  95 +
  96 + /**
  97 + * 解析数据成svg想要的格式
  98 + */
  99 + function analyData(routes){
  100 + //按上下行拆分
  101 + var up=[],down=[];
  102 + for(var i = 0, route; route = routes[i++];){
  103 + if(route.directions==0)
  104 + up.push(route);
  105 + else if(route.directions==1)
  106 + down.push(route);
  107 + }
  108 + //排序
  109 + up.sort(upSort);
  110 + down.sort(downSort);
  111 +
  112 + //合并
  113 + var data = [];
  114 + for(var j = 0; j < up.length; j ++){
  115 + var upS = up[j].station
  116 + , downS = down[j].station
  117 + ,op = {name: [upS.stationName], id: [upS.stationCod, downS.stationCod], type: 2};
  118 +
  119 + //编码相同
  120 + if(upS.stationName != downS.stationName){
  121 + var dIndex = station_indexof(down, upS, j);
  122 + if(dIndex == -1){
  123 + op.type = 0;
  124 + op.id = [upS.stationCod, -1];
  125 + //占位
  126 + down.splice(j, 0, {});
  127 + }else{
  128 + for(var t = j; t < dIndex - 1; t++){
  129 + var temp = down[t].station;
  130 + data.push({name: ['',temp.stationName], type:1, id: [-1, temp.stationCod]});
  131 + }
  132 + //delete
  133 + down.splice(j, dIndex - 1 - j);
  134 + j --;
  135 + continue;
  136 + }
  137 + }
  138 + data.push(op);
  139 + }
  140 +
  141 + //将上下行挨着的独立站点合并
  142 + var len = data.length - 1, first, sec;
  143 + for(var s = 0; s < len; s ++){
  144 + first = data[s];
  145 + sec = data[s + 1];
  146 +
  147 + if(first.type == 0
  148 + && sec.type == 1){
  149 + data.splice(s, 2, {name: [first['name'][0],sec['name'][1]], type:3, id: [first['id'][0],sec['id'][1]]});
  150 + len --;
  151 + }
  152 + else if(first.type == 1 && sec.type == 0){
  153 + data.splice(s, 2, {name: [first['name'][1],sec['name'][0]], type:3, id: [first['id'][1],sec['id'][0]]});
  154 + len --;
  155 + }
  156 + }
  157 + return data;
  158 + }
  159 +
  160 + //queryStationRoute();
  161 + return dataObject;
  162 +})();
0 163 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/js/drawSvg.js 0 → 100644
  View file @cc9ea05
  1 +/**
  2 +* 画线路svg 图
  3 +*
  4 +* type: 0 上行站点 1 下行站点 2 上下行共有 3 合并不同站点
  5 +*/
  6 +
  7 +var drawSvg = (function(){
  8 +
  9 + //顶部距离
  10 + var mTop = 21;
  11 + //上下行之间高度
  12 + var h = 132;
  13 +
  14 + var xScale;
  15 + var drawSvgObject = {
  16 + init: function(data, container){
  17 + var stations = data;
  18 + var svg = d3.selectAll('#' + container).append('svg').attr('width',
  19 + '100%').attr('opacity', 0),
  20 + w = $('.line_chart:first').width();
  21 +
  22 + var dLen = stations.length;
  23 +
  24 + //站点太多
  25 + var ms = w / 42;
  26 + if(ms < dLen){
  27 + for(var i = 0; i < dLen - ms; i ++){
  28 + //要被清理的站点
  29 + var rem = stations[i + 2];
  30 + stations.splice(i + 2, 1);
  31 +
  32 + //设置哪些点需要虚线连接
  33 + var prev = stations[i + 1];
  34 + prev.clear = rem.type + 10;
  35 + }
  36 + dLen = stations.length;
  37 + }
  38 + var indent = w / 12 - (dLen * 2) - 2;
  39 +
  40 + //横向比例尺 -根据svg的宽度平均分布站点
  41 + xScale = d3.scale.linear().domain([ 0, dLen])
  42 + .range([ indent, w]);
  43 +
  44 + $.each(stations, function(i, d) {
  45 + d.cx = xScale(i);
  46 + });
  47 +
  48 + $('#' + container).find('.text-load').remove();
  49 + svg.transition().duration(1000).attr('opacity', 1);
  50 + //线
  51 + drawRoutePath(svg, stations);
  52 + //点
  53 + drawStationCircle(svg, stations);
  54 + //两端弧线
  55 + brackets(svg);
  56 + //字
  57 + drawText(svg, stations);
  58 + //修正位置
  59 + adjustTwoName(svg);
  60 + }
  61 + };
  62 +
  63 + var upLine = d3.svg.line().x(function(d) {
  64 + return d.cx;
  65 + }).y(function(d) {
  66 + return mTop;
  67 + });
  68 +
  69 + var downLine = d3.svg.line().x(function(d) {
  70 + return d.cx;
  71 + }).y(function(d) {
  72 + return mTop + h;
  73 + });
  74 +
  75 + var line = d3.svg.line().x(function(d) {
  76 + return d.attr('cx');
  77 + }).y(function(d) {
  78 + return d.attr('cy');
  79 + });
  80 +
  81 + var circleClass = function(d, type, c){
  82 + if(d.type == type){
  83 + if(type == 1){
  84 + c = 'up-circle-none';
  85 + }
  86 + else{
  87 + c = 'down-circle-none';
  88 + }
  89 + }
  90 + return c;
  91 + }
  92 +
  93 + var getText = function(t){
  94 + if (t.length > 7) {
  95 + return t.substring(0, 7) + '·';
  96 + }
  97 + return t;
  98 + }
  99 +
  100 + //画圆点
  101 + var drawStationCircle = function(svg, stations){
  102 +
  103 + //上行
  104 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  105 + .attr('cy', mTop)
  106 + .attr('class', function(d){return circleClass(d, 1, 'station_circle')})
  107 + .attr('cx', function(d, i) {
  108 + return d.cx;
  109 + });
  110 +
  111 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  112 + .attr('class', function(d, i){
  113 + var classzz = circleClass(d, 1, 'up_station_circle_inside');
  114 + if(i == 0)
  115 + classzz += ' start';
  116 + else if(i == stations.length - 1)
  117 + classzz += ' end';
  118 +
  119 + return classzz;
  120 + })
  121 + .attr('cy', mTop)
  122 + .attr('id', function(d){
  123 + var id = d.id[0];
  124 + return id;
  125 + })
  126 + .attr('cx', function(d, i) {
  127 + return d.cx;
  128 + });
  129 +
  130 + //下行
  131 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  132 + .attr('class', function(d){return circleClass(d, 0, 'station_circle')})
  133 + .attr('cy', mTop + h)
  134 + .attr('cx', function(d, i) {
  135 + return d.cx;
  136 + });
  137 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  138 + .attr('class', function(d, i){
  139 + var classzz = circleClass(d, 0, 'down_station_circle_inside');
  140 + if(i == 0)
  141 + classzz += ' start';
  142 + else if(i == stations.length - 1)
  143 + classzz += ' end';
  144 +
  145 + return classzz;
  146 + })
  147 + .attr('cy', mTop + h)
  148 + .attr('cx', function(d, i) {
  149 + return d.cx;
  150 + })
  151 + .attr('id', function(d){
  152 + var id = d.id[1];
  153 + return id;
  154 + });
  155 + }
  156 +
  157 + var brackets = function(svg){
  158 + //左括号
  159 + svg.append('g').append('path')
  160 + .attr('d', function(){
  161 + var up = svg.select('.up_station_circle_inside.start')
  162 + ,down = svg.select('.down_station_circle_inside.start');
  163 +
  164 + var upX = parseInt(up.attr('cx')) -5
  165 + , upY = parseInt(up.attr('cy')) + 8
  166 + , downX = parseInt(down.attr('cx')) -5
  167 + , downY = parseInt(down.attr('cy')) -8
  168 + ,arc = (upX - 18);
  169 + return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
  170 + })
  171 + .attr('class', 'up_path')
  172 + .attr('fill', 'none');
  173 +
  174 + //右括号
  175 + svg.append('g').append('path')
  176 + .attr('d', function(){
  177 + var up = svg.select('.up_station_circle_inside.end')
  178 + ,down = svg.select('.down_station_circle_inside.end');
  179 +
  180 + var upX = parseInt(up.attr('cx')) + 5
  181 + , upY = parseInt(up.attr('cy')) + 8
  182 + , downX = parseInt(down.attr('cx')) + 5
  183 + , downY = parseInt(down.attr('cy')) -8
  184 + ,arc = (upX + 18);
  185 + return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
  186 + })
  187 + .attr('class', 'down_path')
  188 + .attr('fill', 'none');
  189 + }
  190 +
  191 + //画线条
  192 + var drawRoutePath = function(svg, stations){
  193 + //上下行拆分数组
  194 + var upArray = [], downArray = [];
  195 + $.each(stations, function(i, st){
  196 + if(st.type == 0)
  197 + upArray.push(st);
  198 + else if(st.type == 1)
  199 + downArray.push(st);
  200 + else if(st.type == 2){
  201 + upArray.push(st);
  202 + downArray.push(st);
  203 + }
  204 + });
  205 +
  206 + //上行线条
  207 + svg.append('g').selectAll('path')
  208 + .data(upArray.slice(0, upArray.length - 1)).enter().append('path')
  209 + .attr('d', function(d, i) {
  210 + return upLine([ d, upArray[i + 1] ]);
  211 + })
  212 + .attr('class', 'up_path')
  213 + .attr('stroke-dasharray', function(d){
  214 + if(d.clear == 10 || d.clear == 12){
  215 + $(this).css('stroke-width', '5px');
  216 + return '2,1';
  217 + }
  218 + return 0;
  219 + });
  220 +
  221 + //下行线条
  222 + svg.append('g').selectAll('path')
  223 + .data(downArray.slice(0, downArray.length - 1)).enter().append('path')
  224 + .attr('d', function(d, i) {
  225 + return downLine([ d, downArray[i + 1] ]);
  226 + })
  227 + .attr('class', 'down_path')
  228 + .attr('stroke-dasharray', function(d){//虚线
  229 + if(d.clear == 11 || d.clear == 12){
  230 + $(this).css('stroke-width', '5px');
  231 + return '2,1';
  232 + }
  233 + return 0;
  234 + });
  235 + }
  236 +
  237 + //写文字
  238 + var drawText = function(svg, stations){
  239 + svg.append('g').selectAll('text').data(stations).enter()
  240 + .append('text')
  241 + .attr('y',
  242 + function(d, i) {
  243 + var t;
  244 + if(d.type == 1)
  245 + t = d.name[1];
  246 + else
  247 + t = d.name[0];
  248 + return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
  249 + })
  250 + .attr('class', function(d, i){
  251 + var classz = 'station_text';
  252 + if(i == 0)
  253 + classz += ' start';
  254 + else if(i == stations.length - 1)
  255 + classz += ' end';
  256 + return classz;
  257 + })
  258 + .text(function(d){
  259 + if(d.type == 1)
  260 + t = d.name[1];
  261 + else
  262 + t = d.name[0];
  263 +
  264 + if(d.type == 3)
  265 + $(this).attr('type', 3).attr('downName', d.name[1]);
  266 + return getText(t);
  267 + })
  268 + .attr('x', function(d, i) {
  269 + return xScale(i);
  270 + });
  271 + }
  272 +
  273 + var adjustTwoName = function(svg){
  274 + //上下行不同名
  275 + var lastG = svg.append('g');
  276 + $.each($('.station_text[type=3]'), function(i, obj){
  277 + var x = parseInt($(obj).attr('x'))
  278 + ,diff = 8;
  279 +
  280 + lastG.append('text')
  281 + .attr('y', function(){
  282 + var t = $(obj).attr('downname');
  283 + return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
  284 + })
  285 + .attr('class', 'station_text')
  286 + .attr('x', (x + diff))
  287 + .attr('fill', 'red')
  288 + .text(getText($(obj).attr('downname')));
  289 +
  290 + $(obj).attr('fill', '#337AB7')
  291 + .removeAttr('type').removeAttr('downname')
  292 + .attr('x', x - diff);
  293 + });
  294 + }
  295 +
  296 + return drawSvgObject;
  297 +})();
... ...
src/main/resources/static/pages/control/line/js/main.js 0 → 100644
  View file @cc9ea05
  1 +!function(){
  2 +
  3 + var homeObject = {
  4 + init:function(){
  5 + //初始化主页
  6 + var lineArray = _data.getLines();
  7 +
  8 + //3条线路1 tab 拆分
  9 + var tabData = [], len = lineArray.length;
  10 +
  11 + var ids,names,subArray;
  12 + for(var i = 0; i < len;){
  13 + subArray = lineArray.slice(i, i += 3);
  14 + ids = '';
  15 + names = '';
  16 + $.each(subArray, function(j, op){
  17 + ids += op.id + '_';
  18 + names += op.name + ',';
  19 + });
  20 + tabData.push({id: ids, name: names, array: subArray});
  21 + }
  22 +
  23 + var homeHtmlStr = template('line_control_home_temp', {tabList: tabData});
  24 +
  25 + $('#tab_home').html(homeHtmlStr);
  26 +
  27 + //车辆信息
  28 + _data.getRealVehic(lineArray, function(d){
  29 + for(var n in d){
  30 + var htmlStr = template('home_table_temp', {list: d[n]});
  31 + $('#tab_' + n).find('tbody').html(htmlStr);
  32 + }
  33 +
  34 + //滚动条
  35 + $('.card_wrap .table_wrap').slimscroll({
  36 + height: '187px',
  37 + alwaysVisible: true,
  38 + opacity: .8
  39 + });
  40 + });
  41 +
  42 + //svg线路图
  43 + $.each(lineArray, function(i, obj){
  44 + _data.queryStationRoute(obj.id, 'line_chart_' + obj.id , drawSvg.init);
  45 + });
  46 +
  47 + $('.line_chart .top .top-remark').slimscroll({
  48 + height: '47px'
  49 + });
  50 + }
  51 + }
  52 +
  53 +setTimeout(function(){
  54 + //生成头部选项卡
  55 + var topTabs = '';
  56 + $.each(_data.getLines(), function(i, line){
  57 + topTabs += '<li ><a href="#tab_line" data-toggle="tab" '+
  58 + 'aria-expanded="false"> '+line.name+'<span>（0,0 托管）</span> </a></li>';
  59 + });
  60 + $('#top-tabs-wrap .nav-tabs').append(topTabs);
  61 +
  62 + //加载地图页数据
  63 + $('#tab_map').load('/pages/mapmonitor/real/real.html');
  64 +
  65 +
  66 + var homeLoad = false;
  67 + $('a[href=#tab_home]').on('click', function(){
  68 + if(homeLoad)
  69 + return;
  70 +
  71 + homeLoad = true;
  72 + homeObject.init();
  73 + });
  74 +}, 200)
  75 +}();
0 76 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/svg/puff.svg 0 → 100644
  View file @cc9ea05
  1 +<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
  2 +<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#000">
  3 + <g fill="none" fill-rule="evenodd" stroke-width="2">
  4 + <circle cx="22" cy="22" r="1">
  5 + <animate attributeName="r"
  6 + begin="0s" dur="1.8s"
  7 + values="1; 20"
  8 + calcMode="spline"
  9 + keyTimes="0; 1"
  10 + keySplines="0.165, 0.84, 0.44, 1"
  11 + repeatCount="indefinite" />
  12 + <animate attributeName="stroke-opacity"
  13 + begin="0s" dur="1.8s"
  14 + values="1; 0"
  15 + calcMode="spline"
  16 + keyTimes="0; 1"
  17 + keySplines="0.3, 0.61, 0.355, 1"
  18 + repeatCount="indefinite" />
  19 + </circle>
  20 + <circle cx="22" cy="22" r="1">
  21 + <animate attributeName="r"
  22 + begin="-0.9s" dur="1.8s"
  23 + values="1; 20"
  24 + calcMode="spline"
  25 + keyTimes="0; 1"
  26 + keySplines="0.165, 0.84, 0.44, 1"
  27 + repeatCount="indefinite" />
  28 + <animate attributeName="stroke-opacity"
  29 + begin="-0.9s" dur="1.8s"
  30 + values="1; 0"
  31 + calcMode="spline"
  32 + keyTimes="0; 1"
  33 + keySplines="0.3, 0.61, 0.355, 1"
  34 + repeatCount="indefinite" />
  35 + </circle>
  36 + </g>
  37 +</svg>
0 38 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/temps/home_table_tp.html 0 → 100644
  View file @cc9ea05
  1 +
  2 +<script id="home_table_temp" type="text/html">
  3 +{{each list as obj i}}
  4 +<tr>
  5 + <td> {{obj.nbbm}} </td>
  6 + <td> {{obj.endDistance}} </td>
  7 + <td class="col_hide_1680"> {{obj.endTime}} </td>
  8 + <td>{{obj.instructions}}</td>
  9 + <td> {{obj.speed}} </td>
  10 + <td> {{obj.roadSigns}} </td>
  11 +</tr>
  12 +{{/each}}
  13 +</script>
0 14 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/temps/home_tp.html 0 → 100644
  View file @cc9ea05
  1 +<!-- 主页模板 -->
  2 +<script id="line_control_home_temp" type="text/html">
  3 +<div class="tab-content" >
  4 +{{each tabList as tabObj i}}
  5 +<div class="tab-pane {{if i == 0}}active in{{/if}}" id="tab_{{tabObj.id}}">
  6 +{{each tabObj.array as lineObj j}}
  7 +<div class="row card_wrap" style="{{if j == 0}}margin-top: 0px;{{/if}}">
  8 + <div class="col-lg-2 ">
  9 +
  10 + <div class="title">
  11 + 发往{{lineObj.start}}方向 <span class="badge"> 13 </span>
  12 + <div class="help_text dropdown">
  13 + <span class=" blue dropdown-toggle col_hide_1440"
  14 + data-toggle="dropdown" aria-expanded="true"
  15 + style="cursor: pointer;"> <i
  16 + class="fa fa-ellipsis-horizontal"></i> 全部 <i
  17 + class="fa fa-angle-down"></i>
  18 + </span>
  19 + <ul class="dropdown-menu">
  20 + <li><a href="javascript:;"> 上行全部 </a></li>
  21 + <li><a href="javascript:;"> 上行停靠 </a></li>
  22 + <li><a href="javascript:;"> 上行在途 </a></li>
  23 + <li role="separator" class="divider"></li>
  24 + <li><a href="javascript:;"> 场内车辆 </a></li>
  25 + <li><a href="javascript:;"> 非营运车辆</a></li>
  26 + </ul>
  27 +
  28 + </div>
  29 + </div>
  30 + <table class="table table-striped table-bordered table-advance"
  31 + style="table-layout: fixed;">
  32 + <colgroup>
  33 + <col style="width: 20%;">
  34 + <col style="width: 19%;">
  35 + <col style="width: 20%;">
  36 + <col style="width: 14%;">
  37 + <col style="width: 14%;">
  38 +
  39 + </colgroup>
  40 + <thead>
  41 + <tr>
  42 + <th>车辆编码</th>
  43 + <th>终点距离</th>
  44 + <th class="col_hide_1680">终点时间</th>
  45 + <th>指令</th>
  46 + <th>速度</th>
  47 + <th>路牌</th>
  48 + </tr>
  49 + </thead>
  50 + </table>
  51 + <div class="table_wrap">
  52 + <table
  53 + class="table table-striped table-bordered table-advance table-hover vehicDataTable"
  54 + style="table-layout: fixed;" id="tab_{{lineObj.id}}_0">
  55 + <colgroup>
  56 + <col style="width: 20%;">
  57 + <col style="width: 19%;">
  58 + <col style="width: 20%;">
  59 + <col style="width: 14%;">
  60 + <col style="width: 14%;">
  61 +
  62 + </colgroup>
  63 + <tbody></tbody>
  64 + </table>
  65 + </div>
  66 + </div>
  67 + <div class="col-lg-8 line_chart" id="line_chart_{{lineObj.id}}">
  68 + <div class="top">
  69 + <div class="left">
  70 + <div class="top-remark">
  71 + 应发未发：4 &nbsp;[05:20, 07:10]<br>
  72 + 待发班次：44 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
  73 + </div>
  74 + </div>
  75 + <div class="center">
  76 + <strong>{{lineObj.name}}</strong> 计划配车：0<br> 在运营：0&nbsp;场内：0
  77 + </div>
  78 + <div class="right">
  79 + <div class="top-remark">
  80 + 应发未发：0&nbsp;[05:20, 07:10]<br>
  81 + 待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
  82 + </div>
  83 + </div>
  84 + </div>
  85 +<p style="margin-top: 70px;" class="text-load">正在加载...</p>
  86 + </div>
  87 + <div class="col-lg-2 down">
  88 +
  89 + <div class="title">
  90 + 发往{{lineObj.end}}方向 <span class="badge"> 7 </span>
  91 + <div class="help_text dropdown">
  92 + <span class=" blue dropdown-toggle col_hide_1440"
  93 + data-toggle="dropdown" aria-expanded="true"
  94 + style="cursor: pointer;"> <i
  95 + class="fa fa-ellipsis-horizontal"></i> 全部 <i
  96 + class="fa fa-angle-down"></i>
  97 + </span>
  98 + <ul class="dropdown-menu pull-right">
  99 + <li><a href="javascript:;"> 下行全部 </a></li>
  100 + <li><a href="javascript:;"> 下行停靠 </a></li>
  101 + <li><a href="javascript:;"> 下行在途 </a></li>
  102 + </ul>
  103 + </div>
  104 + </div>
  105 + <table class="table table-striped table-bordered table-advance"
  106 + style="table-layout: fixed;">
  107 + <colgroup>
  108 + <col style="width: 20%;">
  109 + <col style="width: 19%;">
  110 + <col style="width: 20%;">
  111 + <col style="width: 14%;">
  112 + <col style="width: 14%;">
  113 +
  114 + </colgroup>
  115 + <thead>
  116 + <tr>
  117 + <th>车辆编码</th>
  118 + <th>终点距离</th>
  119 + <th class="col_hide_1680">终点时间</th>
  120 + <th>指令</th>
  121 + <th>速度</th>
  122 + <th>路牌</th>
  123 + </tr>
  124 + </thead>
  125 + </table>
  126 + <div class="table_wrap">
  127 + <table
  128 + class="table table-striped table-bordered table-advance table-hover vehicDataTable"
  129 + style="table-layout: fixed;" id="tab_{{lineObj.id}}_1">
  130 + <colgroup>
  131 + <col style="width: 20%;">
  132 + <col style="width: 19%;">
  133 + <col style="width: 20%;">
  134 + <col style="width: 14%;">
  135 + <col style="width: 14%;">
  136 +
  137 + </colgroup>
  138 + <tbody>
  139 + </tbody>
  140 + </table>
  141 + </div>
  142 + </div>
  143 +</div>
  144 +{{/each}}
  145 +</div>
  146 +{{/each}}
  147 +</div>
  148 +
  149 +
  150 +
  151 +<div style="width: 100%;height: 40px;background: linear-gradient(to right, #c5c8ce, #E4E7EC);position: absolute;bottom: 0;">
  152 + <ul class="pagination" style="visibility: visible;float: left;margin-top: 2px;">
  153 +{{each tabList as tabObj i}}
  154 + <li {{if i == 0}}class="active"{{/if}}>
  155 + <a href="#tab_{{tabObj.id}}" data-toggle="tab" aria-expanded="{{if i == 0}}true{{else}}false{{/if}}"> {{tabObj.name}}</a>
  156 + </li>
  157 +{{/each}}
  158 + </ul>
  159 +
  160 + <div style="float: right;line-height: 40px;margin-right: 20px;font-family: 微软雅黑;">
  161 + <!-- 当前用户：panzhao -->
  162 + <span style="color: #17589E;margin-left: 40px;">已成功连接服务器</span>
  163 + </div>
  164 +</div>
  165 +</script>
0 166 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/css/real.css
  View file @cc9ea05
  1 +label.BMapLabel{
  2 + max-width: none;
  3 +}
  4 +
1 5 .leftUtils,
2 6 .mapContainer,
3 7 .mapTools,
... ... @@ -344,11 +348,11 @@ html{
344 348 position: relative;
345 349 color: #C7C7C7;
346 350 padding-left: 8px;
347   - background: rgb(88, 94, 121);
348 351 padding-top: 7px;
349 352 width: 90%;
350 353 margin: auto;
351 354 margin-top: 9px;
  355 + border-bottom: 1px solid #717070;
352 356 }
353 357  
354 358 .mapRightWrap.vehicle .vehicle-item div.text{
... ... @@ -357,13 +361,13 @@ html{
357 361 -webkit-user-select: initial;
358 362 }
359 363  
360   -.mapRightWrap.vehicle .vehicle-item div.text span{
  364 +.mapRightWrap.vehicle .vehicle-item div.text span.nbbm{
361 365 padding: 5px 7px;
362 366 color: #eee;
363 367 cursor: pointer;
364 368 }
365 369  
366   -.mapRightWrap.vehicle .vehicle-item div.text span:hover{
  370 +.mapRightWrap.vehicle .vehicle-item div.text span.nbbm:hover{
367 371 color: #C8C8C8;
368 372 }
369 373  
... ... @@ -452,7 +456,7 @@ html{
452 456 }
453 457  
454 458 .leftUtils.gaode{
455   - background: #fff;
  459 + background: #fafafa;
456 460 border-radius: 5px !important;
457 461 color: #5A5858;
458 462 }
... ...
src/main/resources/static/pages/mapmonitor/real/js/map_platform.js
  View file @cc9ea05
1 1 var realMap = (function() {
  2 +
  3 + function getJSONP(url, data ,callback){
  4 + $.ajax({
  5 + url:url,
  6 + data: data,
  7 + dataType:'jsonp',
  8 + success:callback,
  9 + error: function(e){
  10 + alert('error: jsonp,' + url);
  11 + }
  12 + });
  13 + }
  14 +
2 15 var REAL_BAIDU_TEXT = '百度地图', REAL_GAODE_TEXT = '高德地图';
3 16  
4 17 // 中心点 （上海市浦东新区政府）
... ... @@ -18,6 +31,9 @@ var realMap = (function() {
18 31  
19 32 var city = "上海";
20 33  
  34 + //百度API Key
  35 + var bdKey = 'IGGrr4UjwIYzatoCRFKEL8sT';
  36 +
21 37 var real_map = {
22 38 getMap: function(){
23 39 return currentMap;
... ... @@ -115,6 +131,53 @@ var realMap = (function() {
115 131 });
116 132  
117 133 local.search(val);
  134 + },
  135 + drawLine: function(lineName, gpsList){
  136 + var drawCar = this.drawGpsMarker;
  137 + //画线路
  138 + var busline = new BMap.BusLineSearch(currentMap.map,{
  139 + renderOptions: {map: currentMap.map},
  140 + onGetBusListComplete: function(result){
  141 + if(result) {
  142 + var fstLine = result.getBusListItem(0);
  143 + busline.getBusLine(fstLine);
  144 + //画车
  145 + setTimeout(function(){
  146 + drawCar(gpsList);
  147 + }, 500);
  148 + }
  149 + }
  150 + });
  151 + busline.getBusList(lineName);
  152 + },
  153 + //将GPS信号画到地图上
  154 + drawGpsMarker: function(gpsList){
  155 + var map = currentMap.map;
  156 + real_map.baidu.coordsConvert(gpsList, function(){
  157 + console.log(gpsList);
  158 + //绘制车辆位置
  159 + var label;
  160 + $.each(gpsList, function(i, gpsData){
  161 + //生成marker
  162 + label = createLabel(gpsData);
  163 + map.addOverlay(label);
  164 + });
  165 +
  166 + });
  167 + },
  168 + coordsConvert: function(list, cb){
  169 + var coords = '';
  170 + //拼接GPS坐标，一次性转换
  171 + for (var i = 0, item; item = list[i++];)
  172 + coords += item.lon + ',' + item.lat + ';';
  173 + coords = coords.substring(0, coords.length - 1);
  174 + getJSONP('http://api.map.baidu.com/geoconv/v1/',{coords: coords, ak: bdKey}
  175 + ,function(rt){
  176 + $.each(rt.result, function(j, bdCoord){
  177 + list[j].bd_coord = bdCoord;
  178 + });
  179 + cb&&cb();
  180 + });
118 181 }
119 182 },
120 183 //高德地图
... ... @@ -247,5 +310,13 @@ var realMap = (function() {
247 310 layer.msg('正在切换到' + text + '...', {icon : 16,shade : [ 0.6, '#393D49' ],time : 0});
248 311 }
249 312  
  313 + function createLabel(gpsData){
  314 + var point = new BMap.Point(gpsData.bd_coord.x, gpsData.bd_coord.y)
  315 + //label
  316 + ,label = new BMap.Label(gpsData.nbbm, {position: point, offset: new BMap.Size(-25,-5)});
  317 + label.setStyle({borderColor: '#36C6D3',borderRadius: '5px', padding: '5px 9px 5px 9px', color: '#fff', backgroundColor: '#36C6D3'});
  318 + return label;
  319 + }
  320 +
250 321 return real_map;
251 322 })();
252 323 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/temp.js
  View file @cc9ea05
... ... @@ -10,7 +10,7 @@
10 10 }
11 11  
12 12 //搜索
13   - getTemp('temps/search.html');
  13 + getTemp('/pages/mapmonitor/real/temps/search.html');
14 14 //车辆
15   - getTemp('temps/vehicle.html');
  15 + getTemp('/pages/mapmonitor/real/temps/vehicle.html');
16 16 }();
17 17 \ No newline at end of file
... ...
src/main/resources/static/pages/mapmonitor/real/js/vehicle.js
  View file @cc9ea05
... ... @@ -3,6 +3,10 @@
3 3 */
4 4  
5 5 var vehiclePanel = (function() {
  6 + function getCurr(){
  7 + return realMap[realMap.getMap().fName];
  8 + }
  9 +
6 10 // 手风琴收拢
7 11 $('.mapRightWrap').on('hide.bs.collapse', '.panel-collapse', function() {
8 12 $(this).prev().find('span.icon a').addClass('rotate');
... ... @@ -16,8 +20,23 @@ var vehiclePanel = (function() {
16 20 var exports = {
17 21 // 加载车辆信息
18 22 showData: function(){
19   - var htmlStr = template('vehicle_panel_temp', {});
20   - $('.mapRightWrap').html(htmlStr).addClass('vehicle');
  23 + var line = {code: 10103, name: '119路'};
  24 + $get('/gps/real/line/' + line.code, null, function(data){
  25 + //过滤掉没有自编号和站点名为空的
  26 + var newArray = [];
  27 + $.each(data, function(i, obj){
  28 + if(obj.nbbm != null && obj.stationName != null)
  29 + newArray.push(obj);
  30 + });
  31 +
  32 + var htmlStr = template('vehicle_panel_temp', {list: newArray});
  33 + $('.mapRightWrap').html(htmlStr).addClass('vehicle');
  34 +
  35 + //在地图上画出线路
  36 + var mapObj;
  37 + mapObj = getCurr();
  38 + mapObj.drawLine(line.name, newArray);
  39 + });
21 40 },
22 41 showDataLazy : function() {
23 42 setTimeout(exports.showData, 600);
... ...
src/main/resources/static/pages/mapmonitor/real/real.html
  View file @cc9ea05
1   -<link href="css/real.css" rel="stylesheet" type="text/css" />
  1 +<link href="/pages/mapmonitor/real/css/real.css" rel="stylesheet" type="text/css" />
2 2 <!-- 百度路况控件 style -->
3 3 <link href="/assets/css/TrafficControl.css" rel="stylesheet" type="text/css" />
4 4 <!-- css3 动画库 -->
... ... @@ -44,11 +44,11 @@
44 44  
45 45 <div id="temps"></div>
46 46  
47   -<script src="js/map_platform.js"></script>
48   -<script src="js/vehicle.js"></script>
49   -<script src="js/search.js"></script>
50   -<script src="js/temp.js"></script>
51   -<script src="js/real.js"></script>
  47 +<script src="/pages/mapmonitor/real/js/map_platform.js"></script>
  48 +<script src="/pages/mapmonitor/real/js/vehicle.js"></script>
  49 +<script src="/pages/mapmonitor/real/js/search.js"></script>
  50 +<script src="/pages/mapmonitor/real/js/temp.js"></script>
  51 +<script src="/pages/mapmonitor/real/js/real.js"></script>
52 52 <script>
53 53 console.log(111);
54 54 </script>
... ...
src/main/resources/static/pages/mapmonitor/real/temps/vehicle.html
  View file @cc9ea05
1 1 <script id="vehicle_panel_temp" type="text/html">
2 2 <p class="head" >
3   - 781路
  3 + 119路
4 4 <span class="icon">
5 5 <a data-toggle="collapse" href="#collapse_2_2" aria-expanded="true">
6 6 <i class="fa fa-angle-double-down"></i>
... ... @@ -8,62 +8,21 @@
8 8 </span>
9 9 </p>
10 10 <div id="collapse_2_2" class="panel-collapse collapse in">
11   - <div class="z-depth-1 vehicle-item online" >
  11 +{{each list as gpsObj i}}
  12 + <div class="vehicle-item online" >
12 13 <div class="text">
13   - <span><i class="fa fa-circle"></i> &nbsp;W1B-397</span>
14   - &nbsp;&nbsp;&nbsp;
15   - 金桥路浦东大道
16   - </div>
17   - <div class="icon">
18   - <i class="fa fa-angle-down"></i>
19   - </div>
20   - </div>
21   -
22   - <div class="z-depth-1 vehicle-item online" >
23   - <div class="text">
24   - <span><i class="fa fa-circle"></i> &nbsp;W2C-101</span>
25   - &nbsp;&nbsp;&nbsp;
26   - 金桥路博山东路
27   - </div>
28   - <div class="icon">
29   - <i class="fa fa-angle-down"></i>
30   - </div>
31   - </div>
32   -
33   - <div class="z-depth-1 vehicle-item online" >
34   - <div class="text">
35   - <span><i class="fa fa-circle"></i> &nbsp;S3B-048</span>
36   - &nbsp;&nbsp;&nbsp;
37   - 金桥路金杨路
38   - </div>
39   - <div class="icon">
40   - <i class="fa fa-angle-down"></i>
41   - </div>
42   - </div>
43   -
44   - <div class="z-depth-1 vehicle-item online" >
45   - <div class="text">
46   - <span><i class="fa fa-circle"></i> &nbsp;H2B-888</span>
47   - &nbsp;&nbsp;&nbsp;
48   - 金桥路金铭路
49   - </div>
50   - <div class="icon">
51   - <i class="fa fa-angle-down"></i>
52   - </div>
53   - </div>
54   -
55   - <div class="z-depth-1 vehicle-item online" >
56   - <div class="text">
57   - <span><i class="fa fa-circle"></i> &nbsp;W1B-397</span>
  14 + <span class="nbbm"><i class="fa fa-circle"></i> &nbsp;{{gpsObj.nbbm}}</span>
58 15 &nbsp;&nbsp;&nbsp;
59   - 金桥路浦东大道
  16 + <span style="font-size: 13px;">{{gpsObj.stationName}}站</span>
60 17 </div>
61 18 <div class="icon">
62 19 <i class="fa fa-angle-down"></i>
63 20 </div>
64 21 </div>
  22 +{{/each}}
65 23  
66   - <div class="z-depth-1 vehicle-item offline" >
  24 + <!--
  25 + <div class="vehicle-item offline" >
67 26 <div class="text">
68 27 <span><i class="fa fa-circle"></i> &nbsp;W1B-397</span>
69 28 &nbsp;&nbsp;&nbsp;
... ... @@ -73,5 +32,6 @@
73 32 <i class="fa fa-angle-down"></i>
74 33 </div>
75 34 </div>
  35 + -->
76 36 </div>
77 37 </script>
78 38 \ No newline at end of file
... ...