潘钊 / bsth_control · Commits

Commit 331fd7eaa46698ecdbc60444eae4e3f320822b9a

Authored by 潘钊
1 parent ed0cd486

实时监控页面布局

Inline Side-by-side
Showing 5 changed files with 197 additions and 0 deletions
src/main/resources/static/pages/mapmonitor/real/js/search.js 0 → 100644
  View file @331fd7e
  1 +/*
  2 + * #搜索模块相关操作
  3 + */
  4 +
  5 +var searchPanel = (function() {
  6 +
  7 + function getCurr(){
  8 + return realMap[realMap.getMap().fName];
  9 + }
  10 +
  11 + var exports = {
  12 + init : function() {
  13 + var htmlStr = template('search_panel_temp', {});
  14 + $('.mapRightWrap').html(htmlStr);
  15 +
  16 + // 建立一个自动完成的对象
  17 +
  18 + getCurr().autocomplete('realSearchInput', function(json){
  19 + console.log(json);
  20 + var resultHtml = template('search_result_temp', json);
  21 + $('.mapRightWrap .search_result').html(resultHtml);
  22 + });
  23 +
  24 + //查询结果选中事件
  25 + $('.search_result').on('click', '.result_item'
  26 + ,function(){
  27 +
  28 + getCurr().setPlace($(this).data('title'));
  29 + });
  30 + }
  31 + };
  32 +
  33 + return exports;
  34 +})();
0 \ No newline at end of file 35 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/js/temp.js 0 → 100644
  View file @331fd7e
  1 +/*
  2 + * 加载模板文件
  3 + */
  4 +!function(){
  5 +
  6 + function getTemp(url){
  7 + $.get(url, function(template){
  8 + $('#temps').append(template);
  9 + });
  10 + }
  11 +
  12 + //搜索
  13 + getTemp('temps/search.html');
  14 + //车辆
  15 + getTemp('temps/vehicle.html');
  16 +}();
0 \ No newline at end of file 17 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/js/vehicle.js 0 → 100644
  View file @331fd7e
  1 +/*
  2 + * #车辆模块相关操作
  3 + */
  4 +
  5 +var vehiclePanel = (function() {
  6 + // 手风琴收拢
  7 + $('.mapRightWrap').on('hide.bs.collapse', '.panel-collapse', function() {
  8 + $(this).prev().find('span.icon a').addClass('rotate');
  9 + });
  10 +
  11 + // 手风琴展开
  12 + $('.mapRightWrap').on('show.bs.collapse', '.panel-collapse', function() {
  13 + $(this).prev().find('span.icon a').removeClass('rotate');
  14 + });
  15 +
  16 + var exports = {
  17 + // 加载车辆信息
  18 + showData: function(){
  19 + var htmlStr = template('vehicle_panel_temp', {});
  20 + $('.mapRightWrap').html(htmlStr).addClass('vehicle');
  21 + },
  22 + showDataLazy : function() {
  23 + setTimeout(exports.showData, 600);
  24 + }
  25 + };
  26 +
  27 + return exports;
  28 +})();
0 \ No newline at end of file 29 \ No newline at end of file
src/main/resources/static/pages/mapmonitor/real/temps/search.html 0 → 100644
  View file @331fd7e
  1 +<script id="search_panel_temp" type="text/html">
  2 +<div class="input-group">
  3 + <input type="text" id="realSearchInput" class="form-control" placeholder="车辆自编号/地图位置...">
  4 + <span class="input-group-btn">
  5 + <button class="btn" type="button"><i class="fa fa-search"></i> 搜索</button>
  6 + </span>
  7 +</div>
  8 +
  9 +<div class="search_result z-depth-3">
  10 +</div>
  11 +</script>
  12 +
  13 +<script id="search_result_temp" type="text/html">
  14 +
  15 + <div class="item_vehicle_list">
  16 + <p class="result_item item_vehicle">
  17 + <i class="fa fa-circle font-green-jungle"></i> &nbsp;W1B-023 &nbsp;&nbsp;-营运中<br>
  18 + <span class="sub_text">开往 金桥路浦东大道 站（30秒前）</span>
  19 + </p>
  20 +
  21 + <p class="result_item item_vehicle">
  22 + <i class="fa fa-circle font-green-jungle"></i> &nbsp;W2C-578 &nbsp;&nbsp;-营运中<br>
  23 + <span class="sub_text">开往 张江路华谊路 站（刚刚）</span>
  24 + </p>
  25 + </div>
  26 +
  27 +{{if type == "baidu"}}
  28 +{{each result as obj i}}
  29 + <p class="result_item" data-title="{{obj.business}}">
  30 + <i class="fa fa-search"></i> {{obj.business}} <span class="sub_text">{{obj.city}}{{obj.district}}{{obj.province}}{{obj.street}}{{obj.streetNumber}}</span>
  31 + </p>
  32 +{{/each}}
  33 +{{/if}}
  34 +
  35 +{{if type == "gaode"}}
  36 +{{each result as obj i}}
  37 + <p class="result_item" data-title="{{obj.name}}">
  38 + <i class="fa fa-search"></i> {{obj.name}} <span class="sub_text">{{obj.district}}</span>
  39 + </p>
  40 +{{/each}}
  41 +{{/if}}
  42 +</script>
src/main/resources/static/pages/mapmonitor/real/temps/vehicle.html 0 → 100644
  View file @331fd7e
  1 +<script id="vehicle_panel_temp" type="text/html">
  2 +<p class="head" >
  3 + 781路
  4 + <span class="icon">
  5 + <a data-toggle="collapse" href="#collapse_2_2" aria-expanded="true">
  6 + <i class="fa fa-angle-double-down"></i>
  7 + </a>
  8 + </span>
  9 +</p>
  10 +<div id="collapse_2_2" class="panel-collapse collapse in">
  11 + <div class="z-depth-1 vehicle-item online" >
  12 + <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>
  58 + &nbsp;&nbsp;&nbsp;
  59 + 金桥路浦东大道
  60 + </div>
  61 + <div class="icon">
  62 + <i class="fa fa-angle-down"></i>
  63 + </div>
  64 + </div>
  65 +
  66 + <div class="z-depth-1 vehicle-item offline" >
  67 + <div class="text">
  68 + <span><i class="fa fa-circle"></i> &nbsp;W1B-397</span>
  69 + &nbsp;&nbsp;&nbsp;
  70 + 已掉线10分钟
  71 + </div>
  72 + <div class="icon">
  73 + <i class="fa fa-angle-down"></i>
  74 + </div>
  75 + </div>
  76 +</div>
  77 +</script>
0 \ No newline at end of file 78 \ No newline at end of file