潘钊 / bsth_control · Commits

Commit a60425b11f1814a0985a32c7179cd9eefcac2d2c

Authored by ljq
1 parent a2b7be31
build: skipped

站台客流接入调度

Inline Side-by-side
Showing 24 changed files with 2148 additions and 3 deletions
... ... @@ -43,6 +43,21 @@
43 43 <artifactId>spring-boot-starter-aop</artifactId>
44 44 </dependency>
45 45  
  46 + <!-- mqtt -->
  47 + <dependency>
  48 + <groupId>org.springframework.boot</groupId>
  49 + <artifactId>spring-boot-starter-integration</artifactId>
  50 + </dependency>
  51 + <dependency>
  52 + <groupId>org.springframework.integration</groupId>
  53 + <artifactId>spring-integration-stream</artifactId>
  54 + </dependency>
  55 + <dependency>
  56 + <groupId>org.springframework.integration</groupId>
  57 + <artifactId>spring-integration-mqtt</artifactId>
  58 + </dependency>
  59 +
  60 +
46 61 <dependency>
47 62 <groupId>org.springframework</groupId>
48 63 <artifactId>spring-context-support</artifactId>
... ...
src/main/java/com/bsth/controller/kl/StationKlController.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.controller.kl;
  2 +
  3 +
  4 +import com.bsth.controller.BaseController;
  5 +import com.bsth.entity.kl.StationKl;
  6 +import com.bsth.entity.sys.SysUser;
  7 +import org.springframework.web.bind.annotation.RequestMapping;
  8 +import org.springframework.web.bind.annotation.RestController;
  9 +
  10 +@RestController
  11 +@RequestMapping("station_kl")
  12 +public class StationKlController extends BaseController<StationKl, Integer> {
  13 +
  14 +}
... ...
src/main/java/com/bsth/data/mqtt/MqttConfiguration.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.data.mqtt;
  2 +
  3 +import lombok.Data;
  4 +import lombok.extern.slf4j.Slf4j;
  5 +import org.eclipse.paho.client.mqttv3.MqttConnectOptions;
  6 +import org.springframework.beans.factory.annotation.Value;
  7 +import org.springframework.context.annotation.Bean;
  8 +import org.springframework.context.annotation.Configuration;
  9 +import org.springframework.integration.annotation.ServiceActivator;
  10 +import org.springframework.integration.channel.DirectChannel;
  11 +import org.springframework.integration.core.MessageProducer;
  12 +import org.springframework.integration.mqtt.core.DefaultMqttPahoClientFactory;
  13 +import org.springframework.integration.mqtt.core.MqttPahoClientFactory;
  14 +import org.springframework.integration.mqtt.inbound.MqttPahoMessageDrivenChannelAdapter;
  15 +import org.springframework.messaging.MessageChannel;
  16 +import org.springframework.messaging.MessageHandler;
  17 +import org.springframework.scheduling.annotation.Async;
  18 +
  19 +import javax.annotation.Resource;
  20 +
  21 +/**
  22 + * @author 蔡王珏
  23 + * @date 2025/2/14 20:15
  24 + */
  25 +@Slf4j
  26 +@Data
  27 +@Configuration
  28 +public class MqttConfiguration {
  29 +
  30 + /**
  31 + * 连接地址
  32 + */
  33 + @Value("${mqtt.host-url}")
  34 + private String hostUrl;
  35 +
  36 + @Value("${mqtt.username}")
  37 + private String username;
  38 +
  39 + @Value("${mqtt.password}")
  40 + private String password;
  41 +
  42 + /**
  43 + * mqtt发送者客户端id
  44 + */
  45 + @Value("${mqtt.client-id-subscribe}")
  46 + private String clientIdSubscribe;
  47 +
  48 + /**
  49 + * mqtt订阅者主题
  50 + */
  51 + @Value("${mqtt.default-subscribe-topic}")
  52 + private String subscribeTopic;
  53 +
  54 + /**
  55 + * 超时时间
  56 + */
  57 + @Value("${mqtt.connection-timeout}")
  58 + private int timeout;
  59 +
  60 + /**
  61 + * 保持连接数
  62 + */
  63 + @Value("${mqtt.keep-alive-interval}")
  64 + private int keepalive;
  65 +
  66 + /**
  67 + * 是否清除会话
  68 + */
  69 + @Value("${mqtt.cleanSession}")
  70 + private boolean cleanSession;
  71 +
  72 + /**
  73 + * 客户端与服务器之间的连接意外中断，服务器将发布客户端的“遗嘱”消息
  74 + */
  75 + private static final byte[] WILL_DATA = "offline".getBytes();
  76 +
  77 + /**
  78 + * mqtt订阅者使用信道名称
  79 + */
  80 + public static final String MQTT_INBOUND_CHANNEL = "mqttInboundChannel";
  81 +
  82 + @Resource
  83 + private MqttInBoundService mqttInBoundService;
  84 +
  85 + /**
  86 + * 注册MQTT客户端工厂
  87 + *
  88 + * @return MqttPahoClientFactory
  89 + */
  90 + @Bean
  91 + public MqttPahoClientFactory mqttClientFactory() {
  92 + // 客户端工厂
  93 + DefaultMqttPahoClientFactory factory = new DefaultMqttPahoClientFactory();
  94 +
  95 + // 连接配置
  96 + MqttConnectOptions options = new MqttConnectOptions();
  97 + // 设置连接的地址
  98 + options.setServerURIs(new String[]{hostUrl});
  99 + //设置用户名
  100 + options.setUserName(username);
  101 + //设置密码
  102 + options.setPassword(password.toCharArray());
  103 +
  104 + // 如果设置为 false，客户端和服务器将在客户端、服务器和连接重新启动时保持状态。随着状态的保持：
  105 + // 即使客户端、服务器或连接重新启动，消息传递也将可靠地满足指定的 QOS。服务器将订阅视为持久的。
  106 + // 如果设置为 true，客户端和服务器将不会在客户端、服务器或连接重新启动时保持状态。
  107 + options.setCleanSession(false);
  108 +
  109 + // 设置超时时间，该值以秒为单位，必须>0，定义了客户端等待与 MQTT 服务器建立网络连接的最大时间间隔。
  110 + // 默认超时为 30 秒。值 0 禁用超时处理，这意味着客户端将等待直到网络连接成功或失败。
  111 + options.setConnectionTimeout(30);
  112 +
  113 + // 设置会话心跳时间 单位为秒 服务器会每隔1.5*20秒的时间向客户端发送心跳判断客户端是否在线
  114 + // 此值以秒为单位，定义发送或接收消息之间的最大时间间隔，必须>0
  115 + // 但这个方法并没有重连的机制
  116 + options.setKeepAliveInterval(30);
  117 +
  118 + // 设置“遗嘱”消息的话题，若客户端与服务器之间的连接意外中断，服务器将发布客户端的“遗嘱”消息。
  119 + options.setWill("willTopic", WILL_DATA, 2, false);
  120 +
  121 + //自动重新连接
  122 + options.setAutomaticReconnect(true);
  123 +
  124 + factory.setConnectionOptions(options);
  125 +
  126 + log.info("初始化 MQTT 配置成功");
  127 + return factory;
  128 + }
  129 +
  130 + /**
  131 + * MQTT信息通道（消费者）
  132 + *
  133 + */
  134 + @Bean(name = MQTT_INBOUND_CHANNEL)
  135 + public MessageChannel mqttInboundChannel() {
  136 + return new DirectChannel();
  137 + }
  138 +
  139 + /**
  140 + * MQTT消息订阅绑定（消费者）
  141 + *
  142 + */
  143 + @Bean
  144 + public MessageProducer inbound() {
  145 + String[] topics = subscribeTopic.contains(",") ?
  146 + subscribeTopic.split(",") : new String[]{subscribeTopic};
  147 +
  148 + // 可以同时消费（订阅）多个Topic
  149 + MqttPahoMessageDrivenChannelAdapter adapter =
  150 + new MqttPahoMessageDrivenChannelAdapter(
  151 + clientIdSubscribe, mqttClientFactory(), topics);
  152 + adapter.setCompletionTimeout(5000);
  153 + adapter.setQos(2);
  154 + // 设置订阅通道
  155 + adapter.setOutputChannel(mqttInboundChannel());
  156 + return adapter;
  157 + }
  158 +
  159 + /**
  160 + * MQTT消息处理器（消费者）
  161 + *
  162 + */
  163 + @Bean
  164 + @ServiceActivator(inputChannel = MQTT_INBOUND_CHANNEL)
  165 + public MessageHandler handler() {
  166 + return message -> {
  167 + try {
  168 + String topic = message.getHeaders().get("mqtt_receivedTopic", String.class);
  169 + String payload = message.getPayload().toString();
  170 +
  171 + //log.info("接收到主题： {}, 消息：{}", topic, payload);
  172 + handleMqttMessageAsync(topic, payload);
  173 + } catch (Exception e) {
  174 + log.error("处理MQTT消息时发生异常: topic={}, payload={}",
  175 + message.getHeaders().get("mqtt_receivedTopic", String.class),
  176 + message.getPayload().toString(), e);
  177 + }
  178 + };
  179 + }
  180 +
  181 + @Async
  182 + public void handleMqttMessageAsync(String topic, String payload) {
  183 + try {
  184 + mqttInBoundService.handle(topic, payload);
  185 + } catch (Exception e) {
  186 + log.error("异步处理MQTT消息时发生异常: topic={}, payload={}", topic, payload, e);
  187 + }
  188 + }
  189 +}
... ...
src/main/java/com/bsth/data/mqtt/MqttInBoundService.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.data.mqtt;
  2 +
  3 +
  4 +
  5 +import com.bsth.entity.kl.StationKl;
  6 +import com.bsth.service.kl.StationKlService;
  7 +import com.bsth.websocket.handler.SendUtils;
  8 +import com.google.gson.Gson;
  9 +import com.google.gson.reflect.TypeToken;
  10 +import org.slf4j.Logger;
  11 +import org.slf4j.LoggerFactory;
  12 +import org.springframework.beans.factory.annotation.Autowired;
  13 +import org.springframework.scheduling.annotation.EnableScheduling;
  14 +import org.springframework.scheduling.annotation.Scheduled;
  15 +import org.springframework.stereotype.Service;
  16 +
  17 +import java.util.HashMap;
  18 +import java.util.List;
  19 +import java.util.Map;
  20 +
  21 +
  22 +/**
  23 + * @author 蔡王珏
  24 + * @date 2025/2/15 09:04
  25 + */
  26 +@Service
  27 +@EnableScheduling
  28 +public class MqttInBoundService {
  29 +
  30 +
  31 + Logger log = LoggerFactory.getLogger(this.getClass());
  32 + @Autowired
  33 + SendUtils sendUtils;
  34 + @Autowired
  35 + StationKlService stationKlService;
  36 + static Map<String,String> message = new HashMap<>();
  37 +
  38 + Gson gson = new Gson();
  39 +
  40 + public void handle(String topic, String payload){
  41 + // 根据topic和payload分别进行消息处理。
  42 + //log.info("MqttCallbackHandle: {} | {}", topic , payload);
  43 +
  44 + Map<String, Object> map = gson.fromJson(payload, new TypeToken<HashMap<String, Object>>(){}.getType());
  45 +
  46 + message.put(map.get("deviceId").toString(), map.get("count").toString());
  47 +
  48 +
  49 + //message.put()
  50 + }
  51 +
  52 + //匹配每30秒刷新一次人数
  53 + @Scheduled(cron = "15 * * * * ?")
  54 + public void TsList(){
  55 + try {
  56 + //查询所有
  57 + List<StationKl> list = (List<StationKl>) stationKlService.list(new HashMap<>());
  58 + for (Map.Entry<String, String> km : message.entrySet()){
  59 + for (StationKl stationKl : list) {
  60 + if (km.getKey().equals(stationKl.getDevice())){
  61 + Map<String, Object> map = new HashMap<>();
  62 + map.put("device", stationKl.getDevice());
  63 + map.put("lineCode", stationKl.getLineCode());
  64 + map.put("stationCode", stationKl.getStationCode());
  65 + map.put("dir", stationKl.getDir());
  66 + double doubleValue = Double.parseDouble(km.getValue());
  67 + map.put("num", (int) doubleValue);
  68 + // 根据实际的StationKl实体类属性添加其他字段
  69 + sendUtils.sendKLPlan(map);
  70 + }
  71 + }
  72 + }
  73 +
  74 + }catch (Exception e) {
  75 + log.error("站台客流推送异常", e);
  76 + }
  77 +
  78 + }
  79 +
  80 +
  81 +
  82 +}
... ...
src/main/java/com/bsth/entity/kl/StationKl.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.entity.kl;
  2 +
  3 +import javax.persistence.*;
  4 +import java.util.Date;
  5 +
  6 +@Entity
  7 +@Table(name = "bsth_c_kl")
  8 +public class StationKl {
  9 +
  10 + //设备号
  11 + @Id
  12 + @GeneratedValue(strategy = GenerationType.IDENTITY)
  13 + private Integer id;
  14 + private String device; //客流设备编号
  15 + private String lineCode; //线路编号
  16 + private String lineName; //线路名称
  17 + private String dir; //方向
  18 + private String stationCode; //站点编号
  19 + private String stationName; //站点名称
  20 + //视频url
  21 + private String url;
  22 + // 创建人
  23 + private Integer createBy;
  24 + // 修改人
  25 + private Integer updateBy;
  26 + // 创建日期
  27 + @Column(updatable = false, name = "create_date", columnDefinition = "TIMESTAMP DEFAULT CURRENT_TIMESTAMP")
  28 + private Date createDate;
  29 + // 修改日期
  30 + @Column(name = "update_date", columnDefinition = "TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP")
  31 + private Date updateDate;
  32 +
  33 +
  34 + public Integer getId() {
  35 + return id;
  36 + }
  37 +
  38 + public void setId(Integer id) {
  39 + this.id = id;
  40 + }
  41 +
  42 + public String getDevice() {
  43 + return device;
  44 + }
  45 +
  46 + public void setDevice(String device) {
  47 + this.device = device;
  48 + }
  49 +
  50 + public String getLineCode() {
  51 + return lineCode;
  52 + }
  53 +
  54 + public void setLineCode(String lineCode) {
  55 + this.lineCode = lineCode;
  56 + }
  57 +
  58 + public String getDir() {
  59 + return dir;
  60 + }
  61 +
  62 + public void setDir(String dir) {
  63 + this.dir = dir;
  64 + }
  65 +
  66 + public String getStationCode() {
  67 + return stationCode;
  68 + }
  69 +
  70 + public void setStationCode(String stationCode) {
  71 + this.stationCode = stationCode;
  72 + }
  73 +
  74 + public String getUrl() {
  75 + return url;
  76 + }
  77 +
  78 + public void setUrl(String url) {
  79 + this.url = url;
  80 + }
  81 +
  82 + public Integer getCreateBy() {
  83 + return createBy;
  84 + }
  85 +
  86 + public void setCreateBy(Integer createBy) {
  87 + this.createBy = createBy;
  88 + }
  89 +
  90 + public Integer getUpdateBy() {
  91 + return updateBy;
  92 + }
  93 +
  94 + public void setUpdateBy(Integer updateBy) {
  95 + this.updateBy = updateBy;
  96 + }
  97 +
  98 + public Date getCreateDate() {
  99 + return createDate;
  100 + }
  101 +
  102 + public void setCreateDate(Date createDate) {
  103 + this.createDate = createDate;
  104 + }
  105 +
  106 + public Date getUpdateDate() {
  107 + return updateDate;
  108 + }
  109 +
  110 + public void setUpdateDate(Date updateDate) {
  111 + this.updateDate = updateDate;
  112 + }
  113 +
  114 + public String getLineName() {
  115 + return lineName;
  116 + }
  117 +
  118 + public void setLineName(String lineName) {
  119 + this.lineName = lineName;
  120 + }
  121 +
  122 + public String getStationName() {
  123 + return stationName;
  124 + }
  125 +
  126 + public void setStationName(String stationName) {
  127 + this.stationName = stationName;
  128 + }
  129 +}
... ...
src/main/java/com/bsth/repository/kl/StationKlRepository.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.repository.kl;
  2 +
  3 +import com.bsth.entity.kl.StationKl;
  4 +import com.bsth.repository.BaseRepository;
  5 +
  6 +public interface StationKlRepository extends BaseRepository<StationKl, Integer> {
  7 +}
... ...
src/main/java/com/bsth/service/kl/StationKlService.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.service.kl;
  2 +
  3 +import com.bsth.entity.kl.StationKl;
  4 +import com.bsth.service.BaseService;
  5 +
  6 +public interface StationKlService extends BaseService<StationKl, Integer> {
  7 +}
... ...
src/main/java/com/bsth/service/kl/impl/StationKlServiceImpl.java 0 → 100644
  View file @a60425b
  1 +package com.bsth.service.kl.impl;
  2 +
  3 +import com.bsth.entity.kl.StationKl;
  4 +import com.bsth.service.impl.BaseServiceImpl;
  5 +import com.bsth.service.kl.StationKlService;
  6 +import org.springframework.stereotype.Service;
  7 +
  8 +@Service
  9 +public class StationKlServiceImpl extends BaseServiceImpl<StationKl, Integer> implements StationKlService {
  10 +}
... ...
src/main/java/com/bsth/websocket/handler/SendUtils.java
  View file @a60425b
... ... @@ -326,4 +326,21 @@ public class SendUtils{
326 326 logger.error("sendAlarm", e);
327 327 }
328 328 }
  329 +
  330 +
  331 + /**
  332 + * 将客流情况发送至线调页面
  333 + */
  334 + public void sendKLPlan(Map<String, Object> cp) {
  335 + Map<String, Object> map = new HashMap<>();
  336 + map.put("fn", "kl");
  337 + map.put("data", cp);
  338 + ObjectMapper mapper = new ObjectMapper();
  339 +
  340 + try {
  341 + socketHandler.sendMessageToLine(cp.get("lineCode").toString(), mapper.writeValueAsString(map));
  342 + } catch (JsonProcessingException e) {
  343 + logger.error("sendContingencyPlan", e);
  344 + }
  345 + }
329 346 }
... ...
src/main/resources/application-cloud.properties
  View file @a60425b
... ... @@ -91,4 +91,17 @@ sso.http.url.logout= http://118.113.164.50:8112/login?redirect=%2Findex
91 91 sso.http.url.auth= http://118.113.164.50:8112/prod-api/system/utilitySystem/checkToken
92 92  
93 93 path.speech.common = /data/control/speech/common/
94   -path.speech.line = /data/control/speech/%s/
95 94 \ No newline at end of file
  95 +path.speech.line = /data/control/speech/%s/
  96 +
  97 +
  98 +mqtt.host-url: tcp://113.249.109.139:1883
  99 +mqtt.username: Bsthadmin
  100 +mqtt.password: Bsth@admin
  101 +mqtt.client-id-subscribe: devsub-client
  102 +mqtt.cleanSession: true
  103 +mqtt.reconnect: true
  104 +mqtt.isOpen: true
  105 +mqtt.qos: 2
  106 +mqtt.keep-alive-interval: 100
  107 +mqtt.connection-timeout: 100
  108 +mqtt.default-subscribe-topic: smart/+/humancount
96 109 \ No newline at end of file
... ...
src/main/resources/application-dev.properties
  View file @a60425b
... ... @@ -89,4 +89,17 @@ sso.http.url.logout= http://180.169.154.251:18080/information/api/v1/logout
89 89 sso.http.url.auth= http://180.169.154.251:18080/information/authenticate/authorityAuthentication
90 90  
91 91 path.speech.common = D:/speech/common/
92   -path.speech.line = D:/speech/%s/
93 92 \ No newline at end of file
  93 +path.speech.line = D:/speech/%s/
  94 +
  95 +
  96 +mqtt.host-url: tcp://113.249.109.139:1883
  97 +mqtt.username: Bsthadmin
  98 +mqtt.password: Bsth@admin
  99 +mqtt.client-id-subscribe: devsub-client
  100 +mqtt.cleanSession: true
  101 +mqtt.reconnect: true
  102 +mqtt.isOpen: true
  103 +mqtt.qos: 2
  104 +mqtt.keep-alive-interval: 100
  105 +mqtt.connection-timeout: 100
  106 +mqtt.default-subscribe-topic: smart/+/humancount
... ...
src/main/resources/static/pages/base/kl/add.html 0 → 100644
  View file @a60425b
  1 +<!-- 片段标题 START -->
  2 +<div class="page-head">
  3 + <div class="page-title">
  4 + <h1>添加客流配置</h1>
  5 + </div>
  6 +</div>
  7 +<!-- 片段标题 END -->
  8 +
  9 +<!-- 客流配置信息导航栏组件 START -->
  10 +<ul class="page-breadcrumb breadcrumb">
  11 + <li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
  12 + <li><span class="active">基础信息</span> <i class="fa fa-circle"></i></li>
  13 + <li><a href="/pages/base/line/list.html" data-pjax>客流配置信息</a> <i class="fa fa-circle"></i></li>
  14 + <li><span class="active">添加客流配置</span></li>
  15 +</ul>
  16 +<!-- 客流配置信息导航栏组件 END -->
  17 +
  18 +<!-- 信息容器组件 START -->
  19 +<div class="portlet light bordered">
  20 +
  21 + <!-- 信息容器组件标题 START -->
  22 + <div class="portlet-title">
  23 + <div class="caption">
  24 + <i class="icon-equalizer font-red-sunglo"></i>
  25 + <span class="caption-subject font-red-sunglo bold uppercase">添加客流配置</span>
  26 + </div>
  27 + </div>
  28 + <!-- 信息容器组件标题 END -->
  29 +
  30 + <!-- 表单容器组件 START -->
  31 + <div class="portlet-body form">
  32 +
  33 + <!-- line_add_form FORM START -->
  34 + <form action="/line" class="form-horizontal" id="kl_add_form">
  35 +
  36 + <!-- 表单验证错误提示组件 START -->
  37 + <div class="alert alert-danger display-hide">
  38 + <button class="close" data-close="alert"></button>
  39 + 您的输入有误，请检查下面的输入项
  40 + </div>
  41 + <!-- 表单验证错误提示组件 END -->
  42 +
  43 + <!-- 表单字段内容 START -->
  44 + <div class="form-body">
  45 + <div class="form-group">
  46 + <div class="col-md-6">
  47 + <label class="control-label col-md-5">
  48 + <span class="required"> * </span>设备号
  49 + </label>
  50 + <div class="col-md-4">
  51 + <input type="text" class="form-control" name="device" id="device"
  52 + placeholder="设备号">
  53 + </div>
  54 + </div>
  55 +
  56 + <div class="col-md-6">
  57 + <label class="control-label col-md-5">
  58 + <span class="required"> * </span>线路
  59 + </label>
  60 + <div class="col-md-4">
  61 + <select name="lineCode" class="form-control" id="line"></select>
  62 + </div>
  63 + </div>
  64 + </div>
  65 +
  66 + <div class="form-group">
  67 + <div class="col-md-6">
  68 + <label class="control-label col-md-5">
  69 + <span class="required"> * </span>方向
  70 + </label>
  71 + <div class="col-md-4">
  72 + <select name="dir" class="form-control" id="dir">
  73 + <option value="0">上行</option>
  74 + <option value="1">下行</option>
  75 + </select>
  76 + </div>
  77 + </div>
  78 + <div class="col-md-6">
  79 + <label class="control-label col-md-5">
  80 + <span class="required"> * </span>站点名称
  81 + </label>
  82 + <div class="col-md-4">
  83 + <select name="stationCode" class="form-control" id="station"></select>
  84 + </div>
  85 + </div>
  86 + <!-- 客流配置性质 END -->
  87 + </div>
  88 +
  89 + <div class="form-group">
  90 + <div class="col-md-6">
  91 + <label class="control-label col-md-5">
  92 + <span class="required"> * </span>url地址
  93 + </label>
  94 + <div class="col-md-6">
  95 + <input name="url" class="form-control" id="url"></input>
  96 + </div>
  97 + </div>
  98 + </div>
  99 + </div>
  100 + <!-- 表单字段内容 END -->
  101 +
  102 + <!-- 表单按钮组件 START -->
  103 + <div class="form-actions">
  104 + <div class="row">
  105 + <div class="col-md-offset-5 col-md-7">
  106 + <button type="submit" class="btn green" id="submintBtn"><i class="fa fa-check"></i> 提交</button>
  107 + <a type="button" class="btn default" href="list.html" data-pjax><i class="fa fa-times"></i>
  108 + 取消</a>
  109 + </div>
  110 + </div>
  111 + </div>
  112 + <!-- 表单按钮组件 END -->
  113 +
  114 + </form>
  115 + <!-- line_add_form FORM END -->
  116 +
  117 + </div>
  118 + <!-- 表单组件 END -->
  119 +
  120 +</div>
  121 +<!-- 信息容器组件 END -->
  122 +
  123 +<!-- 客流配置信息添加片段JS模块 -->
  124 +<script src="/pages/base/kl/js/kl-add-form.js"></script>
0 125 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/css/bmap_base.css 0 → 100644
  View file @a60425b
  1 +#bmap_basic{
  2 + min-width: 100%;
  3 + width: calc(100% + 26px);
  4 + margin-top: -28px;
  5 + border: 2px solid #fdfdfd;
  6 + min-height: 1200px;
  7 + height:100%;
  8 + overflow: hidden;
  9 +}
  10 +
  11 +html,body{
  12 + overflow:hidden;
  13 +}
  14 +
  15 +/* 绘画工具栏 */
  16 +.leftUtils{
  17 + position: absolute;
  18 + padding-right: 100px;
  19 + width: 100%;
  20 + height: 40px;
  21 + z-index: 9999;
  22 + padding-top: 7px;
  23 + top: 40px;
  24 +}
  25 +
  26 +.caption {
  27 + color: white;
  28 + font-size: 18px;
  29 + position: relative;
  30 + margin: 15px;
  31 + font-family: 微软;
  32 +}
  33 +
  34 +.cut-section{
  35 + position:absolute;
  36 + right:40px;
  37 + top:50px;
  38 + background:#12527f;
  39 + width:320px;
  40 + max-height: 700px;
  41 + min-height: 300px;
  42 + border:0px solid;
  43 + border-radius: 10px !important;
  44 + box-shadow: 10px 10px 5px #888888;
  45 +}
  46 +
  47 +.table-toolbar {
  48 + text-align: center;
  49 + margin-top: 20px !important;
  50 +}
  51 +
  52 +/* .rm3_image {
  53 + width: 120px;
  54 + height: 26px;
  55 +
  56 +} */
  57 +
  58 +/* 隐藏百度地图logo */
  59 +.anchorBL,
  60 +.anchorBL,
  61 +.amap-logo,
  62 +.amap-copyright{
  63 + display: none;
  64 +}
  65 +
  66 +.protlet-box{
  67 +
  68 + position: absolute;
  69 +
  70 + top: 40px;
  71 +
  72 + margin-left: 10px;
  73 +
  74 + overflow: hidden;
  75 +
  76 + width: 380px;
  77 +
  78 + height: auto;
  79 +
  80 + background:transparent;
  81 +
  82 + border:0px solid;
  83 +
  84 + box-shadow: 0 12px 15px 0 rgba(204, 204, 204, 0.33),0 17px 50px 0 rgba(204, 204, 204, 0.33);
  85 +}
  86 +
  87 +.BMap_pop div:nth-child(1) ,
  88 +.BMap_pop div:nth-child(2) ,
  89 +.BMap_pop div:nth-child(3) ,
  90 +.BMap_pop div:nth-child(4) ,
  91 +.BMap_pop div:nth-child(5) ,
  92 +.BMap_pop div:nth-child(6) ,
  93 +.BMap_pop div:nth-child(7) {
  94 +
  95 + border:0px solid rgb(255, 255, 255) !important;
  96 + background-color:#3B3F51 !important;
  97 +
  98 +}
  99 +
  100 +.BMap_pop div:nth-child(3){
  101 +
  102 + width:23px !important;
  103 +
  104 +}
  105 +
  106 +.BMap_pop div:nth-child(7) {
  107 +
  108 + width:23px !important;
  109 +
  110 + height:24px !important;
  111 +
  112 +}
  113 +
  114 +.BMap_pop div:nth-child(5) {
  115 +
  116 + height:24px !important;
  117 +
  118 +}
  119 +
  120 +/* 图片以后在弄，先隐藏div */
  121 +.BMap_pop div:nth-child(8) {
  122 +
  123 + height:0px !important;
  124 + /* background:url('/pages/base/stationroute/css/img/iw3-1.png') no-repeat !important; */
  125 + /* background-image:url('/pages/base/stationroute/css/img/windowinfo_b.jpg') !important; */
  126 +
  127 +}
  128 +
  129 +.BMap_pop {
  130 +
  131 + box-shadow: 0 12px 15px 0 rgba(204, 204, 204, 0.33),0 17px 50px 0 rgba(204, 204, 204, 0.33)!important;
  132 +
  133 +}
  134 +
  135 +/* 滚动条属性 */
  136 +.defeat-scroll {
  137 +width: 98%;
  138 +height:380px;
  139 +/* overflow:auto; */
  140 +overflow:hidden;
  141 +}
  142 +.defeat-scroll::-webkit-scrollbar {
  143 +width:6px;
  144 +height:6px;
  145 +}
  146 +.defeat-scroll::-webkit-scrollbar-button {
  147 +/* background-color:#FF7677; */
  148 +background:rgba(255, 255, 255, 0);
  149 +}
  150 +.defeat-scroll::-webkit-scrollbar-track {
  151 +/* background:#FF66D5; */
  152 +background:rgba(255, 255, 255, 0);
  153 +}
  154 +.defeat-scroll::-webkit-scrollbar-track-piece {
  155 +/* background:#ff0000; */
  156 +background:rgba(255, 255, 255, 0);
  157 +}
  158 +.defeat-scroll::-webkit-scrollbar-thumb{
  159 +background:rgba(197, 196, 196, 0.81);
  160 +border-radius:10px !important;
  161 +}
  162 +.defeat-scroll::-webkit-scrollbar-corner {
  163 +/* background:#82AFFF; */
  164 +background:rgba(255, 255, 255, 0);
  165 +}
  166 +.defeat-scroll::-webkit-scrollbar-resizer {
  167 +/* background:#FF0BEE; */
  168 +background:rgba(255, 255, 255, 0);
  169 +}
  170 +/* 右侧悬浮框属性 */
  171 +ul li a {
  172 + display: block;
  173 + color: white;
  174 + padding: 8px 16px;
  175 + text-decoration: none;
  176 +}
  177 +
  178 +ul li {
  179 + text-align: center;
  180 +}
  181 +
  182 +ul li:last-child {
  183 + border-bottom: none;
  184 +}
  185 +
  186 +ul li a.active {
  187 +/* background-color: #4CAF50; */
  188 + color: white;
  189 +}
  190 +
  191 +ul li a:hover:not(.active) {
  192 + background-color: #36c6d3;
  193 + color: white;
  194 +}
  195 +/* 鼠标徘徊于tr张的状态 */
  196 +.table-hover > tbody > tr:hover {
  197 + color: white;
  198 + background-color: #36c6d3 !important;
  199 +}
  200 +/* 站点单选框 */
  201 +.radio_label {
  202 + display:block;
  203 + color: white;
  204 + cursor: pointer;
  205 + margin-left: 50px;
  206 + font-size: 20px;
  207 + margin-top: 5px;
  208 +}
  209 +.radioclass {
  210 + margin-top: 6px !important;
  211 + width: 17px;
  212 + height: 17px;
  213 + color: #36c6d3;
  214 +/* background-color: #36c6d3; */
  215 +/* background-clip: #36c6d3; */
  216 +}
  217 +.on {
  218 + background-position: 0 0;
  219 +}
0 220 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/details.html 0 → 100644
  View file @a60425b
  1 +<!-- 片段标题 START -->
  2 +<div class="page-head">
  3 + <div class="page-title">
  4 + <h1>详细客流配置</h1>
  5 + </div>
  6 +</div>
  7 +<!-- 片段标题 END -->
  8 +
  9 +<!-- 客流配置信息导航栏组件 START -->
  10 +<ul class="page-breadcrumb breadcrumb">
  11 + <li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
  12 + <li><span class="active">基础信息</span> <i class="fa fa-circle"></i></li>
  13 + <li><a href="/pages/base/kl/list.html" data-pjax>客流配置信息</a> <i class="fa fa-circle"></i></li>
  14 + <li><span class="active">编详细客流配置</span></li>
  15 +</ul>
  16 +<!-- 客流配置信息导航栏组件 END -->
  17 +
  18 +<!-- 信息容器组件 START -->
  19 +<div class="portlet light bordered">
  20 +
  21 + <!-- 信息容器组件标题 START -->
  22 + <div class="portlet-title">
  23 + <div class="caption">
  24 + <i class="icon-equalizer font-red-sunglo"></i>
  25 + <span class="caption-subject font-red-sunglo bold uppercase">编辑客流配置</span>
  26 + </div>
  27 + </div>
  28 + <!-- 信息容器组件标题 END -->
  29 +
  30 + <!-- 表单容器组件 START -->
  31 + <div class="portlet-body form">
  32 +
  33 + <!-- kl_edit_form FORM START -->
  34 + <form action="/kl" class="form-horizontal" id="kl_edit_form">
  35 + <input type="hidden" name="id" id="id">
  36 +
  37 + <!-- 表单验证错误提示组件 START -->
  38 + <div class="alert alert-danger display-hide">
  39 + <button class="close" data-close="alert"></button>
  40 + 您的输入有误，请检查下面的输入项
  41 + </div>
  42 + <!-- 表单验证错误提示组件 END -->
  43 +
  44 + <!-- 表单字段内容 START -->
  45 + <div class="form-body">
  46 + <div class="form-group">
  47 + <div class="col-md-6">
  48 + <label class="control-label col-md-5">
  49 + <span class="required"> * </span>设备号
  50 + </label>
  51 + <div class="col-md-4">
  52 + <input type="text" class="form-control" name="device" id="device"
  53 + placeholder="设备号" disabled>
  54 + </div>
  55 + </div>
  56 +
  57 + <div class="col-md-6">
  58 + <label class="control-label col-md-5">
  59 + <span class="required"> * </span>线路
  60 + </label>
  61 + <div class="col-md-4">
  62 + <select name="lineCode" class="form-control" id="line" disabled></select>
  63 + </div>
  64 + </div>
  65 + </div>
  66 +
  67 + <div class="form-group">
  68 + <div class="col-md-6">
  69 + <label class="control-label col-md-5">
  70 + <span class="required"> * </span>方向
  71 + </label>
  72 + <div class="col-md-4">
  73 + <select name="dir" class="form-control" id="dir" disabled>
  74 + <option value="0">上行</option>
  75 + <option value="1">下行</option>
  76 + </select>
  77 + </div>
  78 + </div>
  79 + <div class="col-md-6">
  80 + <label class="control-label col-md-5">
  81 + <span class="required"> * </span>站点名称
  82 + </label>
  83 + <div class="col-md-4">
  84 + <select name="stationCode" class="form-control" id="station" disabled></select>
  85 + </div>
  86 + </div>
  87 + <!-- 客流配置性质 END -->
  88 + </div>
  89 +
  90 + <div class="form-group">
  91 + <div class="col-md-6">
  92 + <label class="control-label col-md-5">
  93 + <span class="required"> * </span>url地址
  94 + </label>
  95 + <div class="col-md-6">
  96 + <input name="url" class="form-control" id="url" disabled></input>
  97 + </div>
  98 + </div>
  99 + </div>
  100 + </div>
  101 + <!-- 表单字段内容 END -->
  102 +
  103 +
  104 + <!-- 表单按钮组件 END -->
  105 +
  106 + </form>
  107 + <!-- kl_edit_form FORM END -->
  108 +
  109 + </div>
  110 + <!-- 表单组件 END -->
  111 +
  112 +</div>
  113 +<!-- 信息容器组件 END -->
  114 +
  115 +<!-- 客流配置信息编辑片段JS模块 -->
  116 +<script src="/pages/base/kl/js/kl-details-info.js"></script>
0 117 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/edit.html 0 → 100644
  View file @a60425b
  1 +<!-- 片段标题 START -->
  2 +<div class="page-head">
  3 + <div class="page-title">
  4 + <h1>编辑客流配置</h1>
  5 + </div>
  6 +</div>
  7 +<!-- 片段标题 END -->
  8 +
  9 +<!-- 客流配置信息导航栏组件 START -->
  10 +<ul class="page-breadcrumb breadcrumb">
  11 + <li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
  12 + <li><span class="active">基础信息</span> <i class="fa fa-circle"></i></li>
  13 + <li><a href="/pages/base/kl/list.html" data-pjax>客流配置信息</a> <i class="fa fa-circle"></i></li>
  14 + <li><span class="active">编辑客流配置</span></li>
  15 +</ul>
  16 +<!-- 客流配置信息导航栏组件 END -->
  17 +
  18 +<!-- 信息容器组件 START -->
  19 +<div class="portlet light bordered">
  20 +
  21 + <!-- 信息容器组件标题 START -->
  22 + <div class="portlet-title">
  23 + <div class="caption">
  24 + <i class="icon-equalizer font-red-sunglo"></i>
  25 + <span class="caption-subject font-red-sunglo bold uppercase">编辑客流配置</span>
  26 + </div>
  27 + </div>
  28 + <!-- 信息容器组件标题 END -->
  29 +
  30 + <!-- 表单容器组件 START -->
  31 + <div class="portlet-body form">
  32 +
  33 + <!-- kl_edit_form FORM START -->
  34 + <form action="/kl" class="form-horizontal" id="kl_edit_form">
  35 + <input type="hidden" name="id" id="id">
  36 +
  37 + <!-- 表单验证错误提示组件 START -->
  38 + <div class="alert alert-danger display-hide">
  39 + <button class="close" data-close="alert"></button>
  40 + 您的输入有误，请检查下面的输入项
  41 + </div>
  42 + <!-- 表单验证错误提示组件 END -->
  43 +
  44 + <!-- 表单字段内容 START -->
  45 + <div class="form-body">
  46 + <div class="form-group">
  47 + <div class="col-md-6">
  48 + <label class="control-label col-md-5">
  49 + <span class="required"> * </span>设备号
  50 + </label>
  51 + <div class="col-md-4">
  52 + <input type="text" class="form-control" name="device" id="device"
  53 + placeholder="设备号">
  54 + </div>
  55 + </div>
  56 +
  57 + <div class="col-md-6">
  58 + <label class="control-label col-md-5">
  59 + <span class="required"> * </span>线路
  60 + </label>
  61 + <div class="col-md-4">
  62 + <select name="lineCode" class="form-control" id="line"></select>
  63 + </div>
  64 + </div>
  65 + </div>
  66 +
  67 + <div class="form-group">
  68 + <div class="col-md-6">
  69 + <label class="control-label col-md-5">
  70 + <span class="required"> * </span>方向
  71 + </label>
  72 + <div class="col-md-4">
  73 + <select name="dir" class="form-control" id="dir">
  74 + <option value="0">上行</option>
  75 + <option value="1">下行</option>
  76 + </select>
  77 + </div>
  78 + </div>
  79 + <div class="col-md-6">
  80 + <label class="control-label col-md-5">
  81 + <span class="required"> * </span>站点名称
  82 + </label>
  83 + <div class="col-md-4">
  84 + <select name="stationCode" class="form-control" id="station"></select>
  85 + </div>
  86 + </div>
  87 + <!-- 客流配置性质 END -->
  88 + </div>
  89 +
  90 + <div class="form-group">
  91 + <div class="col-md-6">
  92 + <label class="control-label col-md-5">
  93 + <span class="required"> * </span>url地址
  94 + </label>
  95 + <div class="col-md-6">
  96 + <input name="url" class="form-control" id="url"></input>
  97 + </div>
  98 + </div>
  99 + </div>
  100 + </div>
  101 + <!-- 表单字段内容 END -->
  102 +
  103 + <!-- 表单按钮组件 START -->
  104 + <div class="form-actions">
  105 + <div class="row">
  106 + <div class="col-md-offset-5 col-md-7">
  107 + <button type="submit" class="btn green" id="submitBtn"><i class="fa fa-check"></i> 保存</button>
  108 + <a type="button" class="btn default" href="list.html" data-pjax><i class="fa fa-times"></i>
  109 + 取消</a>
  110 + </div>
  111 + </div>
  112 + </div>
  113 + <!-- 表单按钮组件 END -->
  114 +
  115 + </form>
  116 + <!-- kl_edit_form FORM END -->
  117 +
  118 + </div>
  119 + <!-- 表单组件 END -->
  120 +
  121 +</div>
  122 +<!-- 信息容器组件 END -->
  123 +
  124 +<!-- 客流配置信息编辑片段JS模块 -->
  125 +<script src="/pages/base/kl/js/kl-edit-form.js"></script>
0 126 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/js/kl-add-form.js 0 → 100644
  View file @a60425b
  1 +/**
  2 + * @description TODO(线路信息添加片段JS模块)
  3 + *
  4 + * @author bsth@lq
  5 + *
  6 + * @date 二〇一六年十月十八日 13:31:58
  7 + *
  8 + */
  9 +
  10 +$(function(){
  11 + /** 获取线路编码 @param cb <回调函数> */
  12 + /*function getLineCode(cb) {
  13 + *//** get请求获取线路编码。返回线路编码值 *//*
  14 + $.get('/line/getLineCode',function(lineCode){
  15 + return cb && cb(lineCode);
  16 + });
  17 + }*/
  18 + /** 填充站点下拉框选择值 */
  19 + function setLinell() {
  20 + // 获取公司下拉框选择值
  21 + var dir = $('#dir').val();
  22 + var lineid = $('#line').val();
  23 + if (dir == '' || line == '')
  24 + return
  25 + $get('/stationroute/all', {lineCode_eq: lineid, directions_eq: dir, destroy_eq: '0'}, function (array) {
  26 + var options = '';
  27 + /** 遍历array */
  28 + $.each(array, function (i, d) {
  29 + options += '<option value="' + d.stationCode + '">' + d.stationName + '</option>';
  30 + });
  31 + $('#station').html(options)
  32 + });
  33 + }
  34 + /** get请求获取公司表数据并填充公司下拉框选择值 */
  35 + $get('/line/all', {destroy_eq: '0'}, function(array){
  36 + /** 公司下拉options属性值 */
  37 + var options = '<option value="">-- 请选择线路 --</option>';
  38 + /** 遍历array */
  39 + $.each(array, function(i,d){
  40 + options += '<option value="'+d.lineCode+'">'+d.name+'</option>';
  41 + });
  42 + $('#line').html(options).on('change', setLinell);
  43 + });
  44 + $('#dir').on('change', function () {
  45 + setLinell();
  46 + })
  47 +
  48 + // 定义表单
  49 + var form = $('#kl_add_form');
  50 + // 定义表单异常
  51 + var error = $('.alert-danger',form);
  52 + // 表单验证
  53 + form.validate({
  54 + // 错误提示元素span对象
  55 + errorElement : 'span',
  56 + // 错误提示元素class名称
  57 + errorClass : 'help-block help-block-error',
  58 + // 验证错误获取焦点
  59 + focusInvalid : true,
  60 + // 需要验证的表单元素
  61 + rules : {
  62 + 'device' : {required : true,maxlength: 30},// 线路名称 必填项、 最大长度.
  63 + 'line' : {required : true,maxlength: 30},// 所属公司 必填项、最大长度.
  64 + 'station' : {required : true,maxlength: 30},// 所属分公司 必填项、最大长度.
  65 + 'url': {required: true}
  66 + },
  67 + messages:{
  68 + 'device': {required: '请输入设备号'},
  69 + 'line': {required: '请选择线路'},
  70 + 'station': {required: '请选择站点'},
  71 + 'url': {required: '请输入URL地址'}
  72 + },
  73 + /**
  74 + * 类型：Callback。当未通过验证的表单提交时，可以在该回调函数中处理一些事情。
  75 + *
  76 + * 参数：该回调函数有两个参数：第一个为一个事件对象，第二个为验证器（validator）
  77 + */
  78 + invalidHandler : function(event, validator) {
  79 +
  80 + // 显示表单未通过提示信息
  81 + error.show();
  82 +
  83 + // 把提示信息放到指定的位置。
  84 + App.scrollTo(error, -200);
  85 + },
  86 +
  87 + /**
  88 + * 类型：Callback。
  89 + *
  90 + * 默认：添加errorClass("has-error")到表单元素。将未通过验证的表单元素设置高亮。
  91 + */
  92 + highlight : function(element) {
  93 +
  94 + // 添加errorClass("has-error")到表单元素
  95 + $(element).closest('.form-group').addClass('has-error');
  96 +
  97 + },
  98 +
  99 + /**
  100 + * 类型：Callback。
  101 + *
  102 + * 默认：移除errorClass("has-error")。与highlight操作相反
  103 + */
  104 + unhighlight : function(element) {
  105 +
  106 + // 移除errorClass("has-error")
  107 + $(element).closest('.form-group').removeClass('has-error');
  108 +
  109 + },
  110 +
  111 + /**
  112 + * 类型：String,Callback。
  113 + *
  114 + * 如果指定它，当验证通过时显示一个消息。
  115 + *
  116 + * 如果是String类型的，则添加该样式到标签中；
  117 + *
  118 + * 如果是一个回调函数，则将标签作为其唯一的参数。
  119 + */
  120 + success : function(label) {
  121 +
  122 + // 当验证通过时,移除errorClass("has-error")
  123 + label.closest('.form-group').removeClass('has-error');
  124 +
  125 + },
  126 +
  127 + /**
  128 + * 类型：Callback。
  129 + *
  130 + * 默认：default (native) form submit;当表单通过验证，提交表单。回调函数有个默认参数form
  131 + */
  132 + submitHandler : function(f) {
  133 +
  134 + // 隐藏错误提示
  135 + error.hide();
  136 + // 表单序列化
  137 + var params = form.serializeJSON();
  138 + params.stationName = $('#station option:selected').text();
  139 + params.lineName = $('#line option:selected').text();
  140 + submit();
  141 + // 提交
  142 + function submit() {
  143 +
  144 + // 防止用户多次提交
  145 + $("#submintBtn").addClass("disabled");
  146 +
  147 + // 添加数据
  148 + $post('/station_kl', params, function(result) {
  149 + // 返回list.html页面
  150 + loadPage('list.html');
  151 + });
  152 + }
  153 + }
  154 + });
  155 +
  156 +
  157 +});
0 158 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/js/kl-details-info.js 0 → 100644
  View file @a60425b
  1 +/**
  2 + * @description TODO(客流配置编辑片段JS模块)
  3 + *
  4 + * @author bsth@lq
  5 + *
  6 + * @date 二〇一六年十月十八日 13:31:58
  7 + *
  8 + */
  9 +
  10 +$(function(){
  11 + // 获取编辑ID
  12 + var id = $.url().param('no');
  13 +
  14 + /** 填充站点下拉框选择值 */
  15 + function setLinell() {
  16 + // 获取线路和方向选择值
  17 + var dir = $('#dir').val();
  18 + var lineid = $('#line').val();
  19 + if (dir == '' || lineid == '')
  20 + return;
  21 + $get('/stationroute/all', {lineCode_eq: lineid, directions_eq: dir, destroy_eq: '0'}, function (array) {
  22 + var options = '';
  23 + /** 遍历array */
  24 + $.each(array, function (i, d) {
  25 + var selected = (d.stationCode == currentStationCode) ? 'selected' : '';
  26 + options += '<option value="' + d.stationCode + '" ' + selected + '>' + d.stationName + '</option>';
  27 + });
  28 + $('#station').html(options);
  29 + });
  30 + }
  31 +
  32 + /** 加载数据 */
  33 + function loadData() {
  34 + if (!id) {
  35 + showError('未找到编辑记录');
  36 + return;
  37 + }
  38 +
  39 + $get('/station_kl/' + id, null,function(data) {
  40 + if (data) {
  41 + // 填充表单数据
  42 + $('#id').val(data.id);
  43 + $('#device').val(data.device);
  44 + $('#url').val(data.url);
  45 +
  46 + // 保存当前站点代码用于下拉框选中
  47 + currentStationCode = data.stationCode;
  48 +
  49 + // 加载线路数据
  50 + loadLines(data);
  51 + }
  52 + });
  53 + }
  54 +
  55 + /** 加载线路数据 */
  56 + function loadLines(data) {
  57 + $get('/line/all', {destroy_eq: '0'}, function(array){
  58 + var options = '<option value="">-- 请选择线路 --</option>';
  59 + $.each(array, function(i,d){
  60 + var selected = (d.lineCode == data.lineCode) ? 'selected' : '';
  61 + options += '<option value="'+d.lineCode+'" '+selected+'>'+d.name+'</option>';
  62 + });
  63 + $('#line').html(options).on('change', setLinell);
  64 +
  65 + // 设置方向并触发站点加载
  66 + if (data.lineCode && data.dir !== undefined) {
  67 + $('#dir').val(data.dir);
  68 + setLinell();
  69 + }
  70 + });
  71 + }
  72 +
  73 + // 初始化方向下拉框事件
  74 + $('#dir').on('change', setLinell);
  75 +
  76 + // 定义表单
  77 + var form = $('#kl_edit_form');
  78 + var error = $('.alert-danger', form);
  79 + var currentStationCode = null;
  80 +
  81 + // 表单验证
  82 + form.validate({
  83 + errorElement: 'span',
  84 + errorClass: 'help-block help-block-error',
  85 + focusInvalid: true,
  86 + rules: {
  87 + 'device': {required: true, maxlength: 30},
  88 + 'line': {required: true, maxlength: 30},
  89 + 'station': {required: true, maxlength: 30},
  90 + 'url': {required: true}
  91 + },
  92 + messages: {
  93 + 'device': {required: '请输入设备号'},
  94 + 'line': {required: '请选择线路'},
  95 + 'station': {required: '请选择站点'},
  96 + 'url': {required: '请输入URL地址'}
  97 + },
  98 + invalidHandler: function(event, validator) {
  99 + error.show();
  100 + App.scrollTo(error, -200);
  101 + },
  102 + highlight: function(element) {
  103 + $(element).closest('.form-group').addClass('has-error');
  104 + },
  105 + unhighlight: function(element) {
  106 + $(element).closest('.form-group').removeClass('has-error');
  107 + },
  108 + success: function(label) {
  109 + label.closest('.form-group').removeClass('has-error');
  110 + },
  111 + submitHandler: function(f) {
  112 + error.hide();
  113 +
  114 + // 表单序列化
  115 + var params = form.serializeJSON();
  116 + params.stationName = $('#station option:selected').text();
  117 + params.lineName = $('#line option:selected').text();
  118 +
  119 + // 更新数据
  120 + function update() {
  121 + $("#submitBtn").addClass("disabled");
  122 +
  123 + $put('/station_kl' + id, params, function(result) {
  124 + if (result.success) {
  125 + // 返回list.html页面
  126 + loadPage('list.html');
  127 + } else {
  128 + $("#submitBtn").removeClass("disabled");
  129 + showError(result.message || '更新失败');
  130 + }
  131 + });
  132 + }
  133 +
  134 + update();
  135 + }
  136 + });
  137 +
  138 + // 加载数据
  139 + loadData();
  140 +
  141 + /** 显示错误信息 */
  142 + function showError(message) {
  143 + error.text(message).show();
  144 + App.scrollTo(error, -200);
  145 + }
  146 +});
0 147 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/js/kl-edit-form.js 0 → 100644
  View file @a60425b
  1 +/**
  2 + * @description TODO(客流配置编辑片段JS模块)
  3 + *
  4 + * @author bsth@lq
  5 + *
  6 + * @date 二〇一六年十月十八日 13:31:58
  7 + *
  8 + */
  9 +
  10 +$(function(){
  11 + // 获取编辑ID
  12 + var id = $.url().param('no');
  13 +
  14 + /** 填充站点下拉框选择值 */
  15 + function setLinell() {
  16 + // 获取线路和方向选择值
  17 + var dir = $('#dir').val();
  18 + var lineid = $('#line').val();
  19 + if (dir == '' || lineid == '')
  20 + return;
  21 + $get('/stationroute/all', {lineCode_eq: lineid, directions_eq: dir, destroy_eq: '0'}, function (array) {
  22 + var options = '';
  23 + /** 遍历array */
  24 + $.each(array, function (i, d) {
  25 + var selected = (d.stationCode == currentStationCode) ? 'selected' : '';
  26 + options += '<option value="' + d.stationCode + '" ' + selected + '>' + d.stationName + '</option>';
  27 + });
  28 + $('#station').html(options);
  29 + });
  30 + }
  31 +
  32 + /** 加载数据 */
  33 + function loadData() {
  34 + if (!id) {
  35 + showError('未找到编辑记录');
  36 + return;
  37 + }
  38 +
  39 + $get('/station_kl/' + id, null,function(data) {
  40 + if (data) {
  41 + // 填充表单数据
  42 + $('#id').val(data.id);
  43 + $('#device').val(data.device);
  44 + $('#url').val(data.url);
  45 +
  46 + // 保存当前站点代码用于下拉框选中
  47 + currentStationCode = data.stationCode;
  48 +
  49 + // 加载线路数据
  50 + loadLines(data);
  51 + }
  52 + });
  53 + }
  54 +
  55 + /** 加载线路数据 */
  56 + function loadLines(data) {
  57 + $get('/line/all', {destroy_eq: '0'}, function(array){
  58 + var options = '<option value="">-- 请选择线路 --</option>';
  59 + $.each(array, function(i,d){
  60 + var selected = (d.lineCode == data.lineCode) ? 'selected' : '';
  61 + options += '<option value="'+d.lineCode+'" '+selected+'>'+d.name+'</option>';
  62 + });
  63 + $('#line').html(options).on('change', setLinell);
  64 +
  65 + // 设置方向并触发站点加载
  66 + if (data.lineCode && data.dir !== undefined) {
  67 + $('#dir').val(data.dir);
  68 + setLinell();
  69 + }
  70 + });
  71 + }
  72 +
  73 + // 初始化方向下拉框事件
  74 + $('#dir').on('change', setLinell);
  75 +
  76 + // 定义表单
  77 + var form = $('#kl_edit_form');
  78 + var error = $('.alert-danger', form);
  79 + var currentStationCode = null;
  80 +
  81 + // 表单验证
  82 + form.validate({
  83 + errorElement: 'span',
  84 + errorClass: 'help-block help-block-error',
  85 + focusInvalid: true,
  86 + rules: {
  87 + 'device': {required: true, maxlength: 30},
  88 + 'line': {required: true, maxlength: 30},
  89 + 'station': {required: true, maxlength: 30},
  90 + 'url': {required: true}
  91 + },
  92 + messages: {
  93 + 'device': {required: '请输入设备号'},
  94 + 'line': {required: '请选择线路'},
  95 + 'station': {required: '请选择站点'},
  96 + 'url': {required: '请输入URL地址'}
  97 + },
  98 + invalidHandler: function(event, validator) {
  99 + error.show();
  100 + App.scrollTo(error, -200);
  101 + },
  102 + highlight: function(element) {
  103 + $(element).closest('.form-group').addClass('has-error');
  104 + },
  105 + unhighlight: function(element) {
  106 + $(element).closest('.form-group').removeClass('has-error');
  107 + },
  108 + success: function(label) {
  109 + label.closest('.form-group').removeClass('has-error');
  110 + },
  111 + submitHandler: function(f) {
  112 + error.hide();
  113 +
  114 + // 表单序列化
  115 + var params = form.serializeJSON();
  116 + params.stationName = $('#station option:selected').text();
  117 + params.lineName = $('#line option:selected').text();
  118 +
  119 + // 更新数据
  120 + function update() {
  121 + $("#submitBtn").addClass("disabled");
  122 +
  123 + $post('/station_kl', params, function(result) {
  124 + debugger
  125 + if (result.status == "SUCCESS") {
  126 + // 返回list.html页面
  127 + loadPage('list.html');
  128 + } else {
  129 + $("#submitBtn").removeClass("disabled");
  130 + showError(result.message || '更新失败');
  131 + }
  132 + });
  133 + }
  134 +
  135 + update();
  136 + }
  137 + });
  138 +
  139 + // 加载数据
  140 + loadData();
  141 +
  142 + /** 显示错误信息 */
  143 + function showError(message) {
  144 + error.text(message).show();
  145 + App.scrollTo(error, -200);
  146 + }
  147 +});
0 148 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/js/kl-list-table.js 0 → 100644
  View file @a60425b
  1 +/**
  2 + * @description TODO(客流信息列表片段JS模块)
  3 + *
  4 + * @author bsth@lq
  5 + *
  6 + * @date 二〇一六年十月十八日 13:31:58
  7 + *
  8 + */
  9 +
  10 +(function(){
  11 + // 关闭左侧栏
  12 + if (!$('body').hasClass('page-sidebar-closed')) {
  13 + $('.menu-toggler.sidebar-toggler').click();
  14 + }
  15 +
  16 + // 定义变量
  17 + var page = 0,
  18 + initPag,
  19 + icheckOptions = {checkboxClass: 'icheckbox_flat-blue', increaseArea: '20%'},
  20 + storage = window.localStorage;
  21 +
  22 + // 页面加载时显示提示
  23 + if(storage.klSearchData != null && storage.klSearchData != '') {
  24 + $('.tipso-animation').children().remove();
  25 + // 延迟加载
  26 + setTimeout(function(){
  27 + $('.tipso-animation').tipso({
  28 + speed: 400,
  29 + background: '#0ed0e8',
  30 + color: '#ffffff',
  31 + position: 'bottom',
  32 + width: 400,
  33 + delay: 100,
  34 + animationIn: 'fadeInDownBig',
  35 + animationOut: 'fadeOut',
  36 + offsetX: -50,
  37 + offsetY: -195,
  38 + content: '您可以通过点击重置按钮来清除搜索条件!',
  39 + });
  40 + $('.tipso-animation').tipso('show');
  41 + setTimeout(function(){
  42 + $('.tipso-animation').tipso('hide');
  43 + }, 4000);
  44 + }, 200);
  45 + }
  46 +
  47 + // 初始化页面
  48 + initPage();
  49 +
  50 + /** 初始化页面 */
  51 + function initPage() {
  52 + // 初始化线路下拉框
  53 + initLineSelect();
  54 +
  55 + // 从localStorage恢复搜索条件
  56 + restoreSearchData();
  57 +
  58 + // 加载表格数据
  59 + loadTableData({}, true);
  60 + }
  61 +
  62 + /** 初始化线路下拉框 */
  63 + function initLineSelect() {
  64 + // 获取所有线路数据
  65 + $get('/line/all', {destroy_eq: '0'}, function(array) {
  66 + var options = '<option value="">-- 请选择线路 --</option>';
  67 + $.each(array, function(i, line) {
  68 + options += '<option value="' + line.name + '">' + line.name + '</option>';
  69 + });
  70 + $('#lineSelect').html(options);
  71 +
  72 + // 如果有保存的搜索条件，恢复选择
  73 + if (storage.klSearchData) {
  74 + var searchData = JSON.parse(storage.klSearchData);
  75 + if (searchData.lineName_like) {
  76 + $('#lineSelect').val(searchData.lineName_like);
  77 + }
  78 + }
  79 + });
  80 + }
  81 +
  82 + /** 恢复搜索条件 */
  83 + function restoreSearchData() {
  84 + if (storage.klSearchData) {
  85 + try {
  86 + var searchData = JSON.parse(storage.klSearchData);
  87 + $('tr.filter input, select').each(function() {
  88 + var name = $(this).attr('name');
  89 + if (name && searchData[name]) {
  90 + $(this).val(searchData[name]);
  91 + }
  92 + });
  93 + } catch (e) {
  94 + console.error('恢复搜索条件失败:', e);
  95 + storage.removeItem('klSearchData');
  96 + }
  97 + }
  98 + }
  99 +
  100 + /** 保存搜索条件 */
  101 + function saveSearchData() {
  102 + var searchData = {};
  103 + $('tr.filter input, select').each(function() {
  104 + var name = $(this).attr('name');
  105 + var value = $(this).val();
  106 + if (name && value) {
  107 + searchData[name] = value;
  108 + }
  109 + });
  110 + storage.setItem('klSearchData', JSON.stringify(searchData));
  111 + }
  112 +
  113 + /** 获取搜索参数 */
  114 + function getParams() {
  115 + var params = {};
  116 + $('tr.filter input, select').each(function() {
  117 + var name = $(this).attr('name');
  118 + var value = $(this).val();
  119 + if (name && value) {
  120 + params[name] = value;
  121 + }
  122 + });
  123 + return params;
  124 + }
  125 +
  126 + /** 表格数据分页加载 */
  127 + function loadTableData(param, isPon) {
  128 + var params = {};
  129 + if (param) {
  130 + params = param;
  131 + }
  132 +
  133 + // 分页参数
  134 + params['page'] = page;
  135 + params['size'] = 10; // 每页10条
  136 +
  137 + // 显示加载中
  138 + var i = layer.load(2);
  139 +
  140 + // 请求数据
  141 + $get('/station_kl', params, function(result) {
  142 + layer.close(i);
  143 +
  144 + if (result && result.content) {
  145 + // 添加页码信息
  146 + result.content.page = page;
  147 +
  148 + // 渲染表格
  149 + var tbodyHtml = template('kl_list_temp', {list: result.content});
  150 + $('#datatable_kl tbody').html(tbodyHtml);
  151 +
  152 + // 初始化复选框
  153 + $('#datatable_kl tbody').find('.icheck').iCheck(icheckOptions);
  154 + $('#datatable_kl tbody').find('.icheck').on('ifChanged', iCheckChange);
  155 +
  156 + // 如果是第一次加载或搜索，初始化分页
  157 + if (isPon && result.totalPages > 0) {
  158 + initPag = true;
  159 + showPagination(result);
  160 + }
  161 + } else {
  162 + $('#datatable_kl tbody').html('<tr><td colspan="8"><h6 class="muted">没有找到相关数据</h6></td></tr>');
  163 + $('#pagination').empty();
  164 + }
  165 + })
  166 + }
  167 +
  168 + /** 复选框组件 */
  169 + function iCheckChange() {
  170 + var tr = $(this).parents('tr');
  171 + if(this.checked) {
  172 + tr.addClass('row-active');
  173 + } else {
  174 + tr.removeClass('row-active');
  175 + }
  176 + }
  177 +
  178 + /** 分页栏组件 */
  179 + function showPagination(data) {
  180 + $('#pagination').jqPaginator({
  181 + totalPages: data.totalPages,
  182 + visiblePages: 6,
  183 + currentPage: page + 1,
  184 + first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
  185 + prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
  186 + next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
  187 + last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
  188 + page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
  189 + onPageChange: function (num, type) {
  190 + if (initPag) {
  191 + initPag = false;
  192 + return;
  193 + }
  194 +
  195 + page = num - 1;
  196 + var pData = getParams();
  197 + loadTableData(pData, false);
  198 + }
  199 + });
  200 + }
  201 +
  202 + /** 重置按钮事件 */
  203 + $('tr.filter .filter-cancel').on('click', function() {
  204 + // 清空搜索条件
  205 + $('tr.filter input, select').val('').change();
  206 +
  207 + // 隐藏提示
  208 + $('.tipso-animation').tipso('hide');
  209 +
  210 + // 清除本地存储
  211 + storage.removeItem('klSearchData');
  212 +
  213 + // 重置页码并加载数据
  214 + page = 0;
  215 + loadTableData({}, true);
  216 + });
  217 +
  218 + /** 搜索按钮事件 */
  219 + $('tr.filter .filter-submit').on('click', function() {
  220 + var params = getParams();
  221 +
  222 + // 保存搜索条件
  223 + saveSearchData();
  224 +
  225 + // 重置页码并加载数据
  226 + page = 0;
  227 + loadTableData(params, true);
  228 +
  229 + // 显示提示
  230 + if (Object.keys(params).length > 0) {
  231 + $('.tipso-animation').tipso({
  232 + content: '搜索条件已保存，点击重置按钮可清除',
  233 + width: 300,
  234 + background: '#0ed0e8',
  235 + color: '#ffffff'
  236 + });
  237 + $('.tipso-animation').tipso('show');
  238 + setTimeout(function() {
  239 + $('.tipso-animation').tipso('hide');
  240 + }, 2000);
  241 + }
  242 + });
  243 +
  244 + /** 显示错误信息 */
  245 + function showError(message) {
  246 + var errorHtml = '<div class="alert alert-danger">' +
  247 + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
  248 + '<i class="fa fa-warning"></i> ' + message +
  249 + '</div>';
  250 +
  251 + $('.portlet-body').prepend(errorHtml);
  252 +
  253 + // 3秒后自动消失
  254 + setTimeout(function() {
  255 + $('.alert-danger').fadeOut('slow', function() {
  256 + $(this).remove();
  257 + });
  258 + }, 3000);
  259 + }
  260 +
  261 + /** 实时搜索功能（可选） */
  262 + var searchTimeout;
  263 + $('tr.filter input').on('keyup', function() {
  264 + clearTimeout(searchTimeout);
  265 + searchTimeout = setTimeout(function() {
  266 + var params = getParams();
  267 + page = 0;
  268 + loadTableData(params, true);
  269 + }, 500);
  270 + });
  271 +
  272 + $('tr.filter select').on('change', function() {
  273 + var params = getParams();
  274 + page = 0;
  275 + loadTableData(params, true);
  276 + });
  277 +
  278 +})();
0 279 \ No newline at end of file
... ...
src/main/resources/static/pages/base/kl/list.html 0 → 100644
  View file @a60425b
  1 +<!-- <link href="/pages/base/line/css/animate.css" rel="stylesheet" type="text/css" />
  2 +<link href="/pages/base/line/css/tipso.css" rel="stylesheet" type="text/css" /> -->
  3 +<!-- 片段标题 START -->
  4 +<style>
  5 + a.ct_base_line_delete_link{
  6 + font-size: 12px;
  7 + color: red;
  8 + vertical-align: bottom;
  9 + display: inline-block;
  10 + margin-left: 5px;
  11 + text-decoration: underline;
  12 + }
  13 +
  14 + a.ct_base_line_delete_link:hover{
  15 + color: #d11608;
  16 + }
  17 + .url-cell {
  18 + max-width: 150px; /* 设置最大宽度 */
  19 + overflow: hidden;
  20 + text-overflow: ellipsis; /* 超出部分显示省略号 */
  21 + white-space: nowrap; /* 不换行 */
  22 + position: relative;
  23 + }
  24 +
  25 + .url-display {
  26 + cursor: pointer;
  27 + }
  28 +</style>
  29 +<div class="page-head">
  30 + <div class="page-title">
  31 + <h1>客流信息</h1>
  32 + </div>
  33 +</div>
  34 +<!-- 片段标题 END -->
  35 +
  36 +<!-- 客流信息导航栏组件 START -->
  37 +<ul class="page-breadcrumb breadcrumb">
  38 + <li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
  39 + <li><span class="active">基础信息</span> <i class="fa fa-circle"></i></li>
  40 + <li><span class="active">客流信息</span></li>
  41 +</ul>
  42 +<!-- 客流信息导航栏组件 END -->
  43 +
  44 +<div class="row">
  45 + <div class="col-md-12">
  46 + <div class="portlet light porttlet-fit bordered">
  47 + <div class="portlet-title">
  48 + <div class="tipso-animation">
  49 + </div>
  50 + <div class="caption">
  51 + <i class="fa fa-info-circle font-dark"></i>
  52 + <span class="caption-subject font-dark sbold uppercase">客流信息</span>
  53 + </div>
  54 + <div class="actions">
  55 + <div class="btn-group btn-group-devided" data-toggle="buttons">
  56 + <a class="btn btn-circle blue" href="add.html" data-pjax><i class="fa fa-plus"></i> 添加客流</a>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + <div class="portlet-body">
  61 + <div class="table-container" style="margin-top: 10px">
  62 + <table class="table table-striped table-bordered table-hover table-checkable" id="datatable_kl">
  63 + <thead>
  64 + <tr role="row" class="heading">
  65 + <th width="2%">#</th>
  66 + <th width="2%">序号</th>
  67 + <th width="4%">客流设备号</th>
  68 + <th width="5%">线路名称</th>
  69 + <th width="8%">上下行</th>
  70 + <th width="5%">站点名称</th>
  71 + <th width="8%">视频url</th>
  72 + <th width="12%">操作</th>
  73 + </tr>
  74 + <tr role="row" class="filter">
  75 + <td>#</td>
  76 + <td>#</td>
  77 + <td>
  78 + <input type="text" class="form-control form-filter input-sm" name="device_like">
  79 + </td>
  80 + <td>
  81 + <select name="lineName_like" class="form-control" style="width:100%" id="lineSelect">
  82 + <option value="">-- 请选择线路 --</option>
  83 + </select>
  84 + </td>
  85 + <td>
  86 + <select name="dir_eq" class="form-control" id="dirSelect">
  87 + <option value="">请选择...</option>
  88 + <option value="0">上行</option>
  89 + <option value="1">下行</option>
  90 + </select>
  91 + </td>
  92 + <td>
  93 + <input type="text" class="form-control form-filter input-sm" name="stationName_like">
  94 + </td>
  95 + <td>
  96 + <input type="text" class="form-control form-filter input-sm" name="url_like">
  97 + </td>
  98 + <td>
  99 + </td>
  100 + </tr>
  101 + </thead>
  102 + <tbody></tbody>
  103 + </table>
  104 + <div style="text-align: right;">
  105 + <ul id="pagination" class="pagination"></ul>
  106 + </div>
  107 + </div>
  108 + </div>
  109 + </div>
  110 + </div>
  111 +</div>
  112 +<script type="text/html" id="kl_list_temp">
  113 + {{each list as obj i }}
  114 + <tr>
  115 + <td style="vertical-align: middle;">
  116 + <input type="checkbox" class="group-checkable icheck" value="{{obj.name}}" id="{{obj.id}}" data-id="{{obj.id}}" data-lineName="{{obj.name}}">
  117 + </td>
  118 + <td style="vertical-align: middle;">
  119 + {{(list.page*10)+(i+1)}}
  120 + </td>
  121 + <td>
  122 + {{ obj.device}}
  123 + </td>
  124 + <td>
  125 + {{ obj.lineName}}
  126 + </td>
  127 + <td>
  128 + {{if obj.dir == '0'}}
  129 + 上行
  130 + {{else if obj.dir == '1'}}
  131 + 下行
  132 + {{/if}}
  133 + </td>
  134 + <td>
  135 + {{ obj.stationName}}
  136 + </td>
  137 + <td class="url-cell" title="{{ obj.url}}">
  138 + <span class="url-display">{{ obj.url}}</span>
  139 + </td>
  140 + <td>
  141 + <a href="details.html?no={{obj.id}}" class="btn default blue-stripe btn-sm" data-pjax> 详细 </a>
  142 + <a href="edit.html?no={{obj.id}}" class="btn default blue-stripe btn-sm" data-pjax> 修改 </a>
  143 +
  144 + {{if obj.destroy==1}}
  145 + <!--<a class="ct_base_line_delete_link" data-id="{{obj.id}}" data-name="{{obj.name}}"> 删除 </a>-->
  146 + {{/if}}
  147 + </td>
  148 + </tr>
  149 + {{/each}}
  150 + {{if list.length == 0}}
  151 + <tr>
  152 + <td colspan=13><h6 class="muted">没有找到相关数据</h6></td>
  153 + </tr>
  154 + {{/if}}
  155 +</script>
  156 +<!-- 客流信息片段JS模块 -->
  157 +<script src="/pages/base/kl/js/kl-list-table.js"></script>
  158 +<script>
  159 + (function () {
  160 + $(document).on('click', 'a.ct_base_line_delete_link', function () {
  161 + var id = $(this).data('id'),
  162 + name = $(this).data('name');
  163 +
  164 + layer.confirm('你确定要删除客流【'+name+'】？', {
  165 + btn: ['确定删除','取消'] //按钮
  166 + }, function(){
  167 + layer.msg('操作中...', {icon: 16,shade: 0.01});
  168 + $post('/line/remove', {id: id}, function (rs) {
  169 + layer.msg('删除成功！');
  170 + $('.filter-submit.margin-bottom').trigger('click');
  171 + });
  172 +
  173 + });
  174 + });
  175 + })();
  176 +</script>
0 177 \ No newline at end of file
... ...
src/main/resources/static/real_control_v2/js/kl/kl.js 0 → 100644
  View file @a60425b
  1 +/**
  2 + * 客流推送
  3 + */
  4 +var kl_ts = (function () {
  5 +
  6 + var pop = function (data) {
  7 +
  8 + var station = data.stationCode + '_' + data.dir;
  9 + // 使用D3选择所有kl_text_group，并检查其绑定的数据是否匹配
  10 + d3.selectAll('.kl_text_group').each(function(d) {
  11 +
  12 + // d是绑定到该元素的数据，即matchedDevice
  13 + if (d && d.lineCode === data.lineCode && d.stationCode === data.stationCode && d.dir === data.dir) {
  14 + var klGroup = d3.select(this);
  15 + // 更新人数
  16 + klGroup.select('.kl_text').text(data.num || '0');
  17 + // 更新播放按钮位置
  18 + var videoButton = klGroup.select('.video_button');
  19 + if (!videoButton.empty()) {
  20 + var textLength = (data.num || '0').toString().length * 6;
  21 + videoButton.attr('x', textLength + 5);
  22 + }
  23 + }
  24 + });
  25 + };
  26 + return {
  27 + pop: pop,
  28 + }
  29 +})();
0 30 \ No newline at end of file
... ...
src/main/resources/static/real_control_v2/js/utils/svg_chart.js
  View file @a60425b
... ... @@ -18,6 +18,10 @@ var gb_svg_chart = (function () {
18 18 'uk-width-medium-3-5 svg-chart-wrap': 'home',
19 19 'svg-wrap': 'line'
20 20 }
  21 + var kldatas;
  22 + $.get('/station_kl/all', null, function(datas) {
  23 + kldatas = datas;
  24 + });
21 25  
22 26 //站点间隔 线路编码 -> space
23 27 var circle_spaces={};
... ... @@ -173,6 +177,128 @@ var gb_svg_chart = (function () {
173 177 return d.type == 3 ? multi_text(d, i, this) : cx(d, i)
174 178 })
175 179 .attr('y', ty);
  180 + // 发送请求获取客流设备数据
  181 +
  182 + // 遍历每个item，为每个方向创建kl_text_group
  183 + items.each(function (d, i) {
  184 + var item = d3.select(this);
  185 + var itemElement = this; // 保存item的DOM元素
  186 +
  187 + // 检查这个item有哪些方向（根据id数组长度和类型判断）
  188 + // 创建方向数组
  189 + var directions = [];
  190 +
  191 + // 遍历所有id，确保获取所有方向
  192 + for (var j = 0; j < d.id.length; j++) {
  193 + var stationId = d.id[j];
  194 + if (!stationId) continue;
  195 +
  196 + var stationCode = stationId.split('_')[0];
  197 + var direction = stationId.split('_')[1];
  198 +
  199 + directions.push({
  200 + stationId: stationId,
  201 + stationCode: stationCode,
  202 + direction: direction,
  203 + position: direction == '0' ? 'up' : 'down',
  204 + // 创建唯一的key用于识别
  205 + klKey: lineCode + '_' + stationCode + '_' + direction
  206 + });
  207 + }
  208 +
  209 + // 为每个方向创建kl_text_group
  210 + directions.forEach(function (dirInfo) {
  211 + // 检查是否有匹配的设备
  212 + var matchedDevice = null;
  213 +
  214 + // 在客流设备数据中查找匹配项
  215 + kldatas.forEach(function (device) {
  216 + if (device.lineCode == lineCode &&
  217 + device.stationCode == dirInfo.stationCode &&
  218 + device.dir == dirInfo.direction) {
  219 + matchedDevice = device;
  220 + }
  221 + });
  222 +
  223 + // 如果有匹配的设备，创建kl_text_group
  224 + if (matchedDevice) {
  225 + // 计算kl_text_group的位置
  226 + var x = d.type == 3 ? multi_text(d, i, itemElement) : cx(d, i);
  227 + // 计算垂直中心位置
  228 + var centerY = cy() + (chart_height / 2);
  229 +
  230 + // 根据方向调整垂直位置
  231 + var adjustedY;
  232 + if (dirInfo.position === 'up') {
  233 + // 上行：向上偏移
  234 + adjustedY = centerY - 20; // 向上偏移20像素
  235 + } else {
  236 + // 下行：向下偏移
  237 + adjustedY = centerY + 20; // 向下偏移20像素
  238 + }
  239 +
  240 + // 创建kl_text_group，并绑定客流设备数据
  241 + var kl_text_group = item.append('g')
  242 + .datum(matchedDevice) // 绑定客流设备数据
  243 + .classed({
  244 + 'kl_text_group': true,
  245 + 'up': dirInfo.position === 'up',
  246 + 'down': dirInfo.position === 'down'
  247 + })
  248 + .attr('data-kl-key', dirInfo.klKey)
  249 + .attr('transform', 'translate(' + (x + 10) + ',' + adjustedY + ')')
  250 + .attr('data-kl-key', lineCode + '_' + dirInfo.stationCode + '_' + dirInfo.direction);
  251 +
  252 + // 添加"几人"文本
  253 + var klText = kl_text_group.append('text')
  254 + .classed('kl_text', true)
  255 + .text(matchedDevice.passengerCount || '0')
  256 + .attr('x', 0)
  257 + .attr('y', 0)
  258 + .attr('dy', '0.35em')
  259 + .style('font-size', '12px')
  260 + .style('fill', '#666');
  261 +
  262 + // 添加播放按钮（如果有url）
  263 + if (matchedDevice.url) {
  264 + var linkGroup = kl_text_group.append('text')
  265 + .datum(null) // 不绑定数据
  266 + .classed('video_button', true)
  267 + .text('▶')
  268 + .attr('x', function() {
  269 + var textLength = (matchedDevice.passengerCount || '0').toString().length * 6;
  270 + return textLength + 5;
  271 + })
  272 + .attr('dy', '0.35em')
  273 + .style('font-size', '12px')
  274 + .style('fill', '#1E90FF')
  275 + .style('cursor', 'pointer')
  276 + .on('mouseover', function () {
  277 + d3.select(this).style('fill', '#4169E1');
  278 + })
  279 + .on('mouseout', function () {
  280 + d3.select(this).style('fill', '#1E90FF');
  281 + }).on('click', function() {
  282 + // 获取视频URL
  283 + var url = matchedDevice.url;
  284 + var imgHtml = "<iframe src='"+url+"?autoplay=1' style='width:100%;height:100%'/>";
  285 + layer.open({
  286 + type: 1,
  287 + offset: 'auto',
  288 + area: [600 + 'px', 394 + 'px'],
  289 + shadeClose: true,//点击外围关闭弹窗
  290 + scrollbar: true,//不现实滚动条
  291 + title: false, //不显示标题
  292 + content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
  293 + cancel: function () {
  294 + }
  295 + })
  296 + });
  297 + }
  298 + }
  299 + });
  300 + });
  301 +
176 302  
177 303 //gps wrap
178 304 svg.append('g').classed({
... ...
src/main/resources/static/real_control_v2/js/websocket/sch_websocket.js
  View file @a60425b
... ... @@ -212,6 +212,10 @@ var gb_sch_websocket = (function () {
212 212 gb_alarm.pop(msg.data);
213 213 }
214 214  
  215 + var kl = function (msg) {
  216 + kl_ts.pop(msg.data);
  217 + }
  218 +
215 219 var msgHandle = {
216 220 report80: report80,
217 221 faChe: faChe,
... ... @@ -228,7 +232,8 @@ var gb_sch_websocket = (function () {
228 232 maintenancePlan: maintenancePlan,
229 233 carErrorStop: carErrorStop,
230 234 inoutPark: inoutPark,
231   - alarm: alarm
  235 + alarm: alarm,
  236 + kl: kl
232 237 };
233 238  
234 239 function currentSecond() {
... ...
src/main/resources/static/real_control_v2/main.html
  View file @a60425b
... ... @@ -221,6 +221,7 @@
221 221  
222 222 <script src="/real_control_v2/js/signal_state/signal_state.js" merge="custom_js"></script>
223 223 <script src="/real_control_v2/js/utils/dispatch_pattern.js" merge="custom_js"></script>
  224 +<script src="/real_control_v2/js/kl/kl.js" ></script>
224 225  
225 226 <!-- 处理表单片段嵌入问题 -->
226 227 <script src="/real_control_v2/js/forms/form_embed.js" merge="custom_js"></script>
... ...