update

潘钊
1 parent 6a54c907
Showing 7 changed files with 123 additions and 60 deletions
src/main/resources/static/real_control_v2/css/home.css
src/main/resources/static/real_control_v2/css/main.css
src/main/resources/static/real_control_v2/fragments/home/line_panel.html
src/main/resources/static/real_control_v2/fragments/home/tooltip.html
src/main/resources/static/real_control_v2/js/home/line_panel.js
src/main/resources/static/real_control_v2/js/utils/svg_chart.js
src/main/resources/static/real_control_v2/js/utils/svg_chart_tooltip.js
@@ -61,7 +61,7 @@
 }
 .home-gps-table {
-    width: 620px;
+    width: 640px;
 }
 .home-gps-table small {
@@ -74,31 +74,35 @@
 }
 .home-gps-table dl dt:nth-of-type(2), .home-gps-table dl dd:nth-of-type(2) {
-    width: 8%
+    width: 7%
 }
 .home-gps-table dl dt:nth-of-type(3), .home-gps-table dl dd:nth-of-type(3) {
-    width: 8%
+    width: 7%
 }
 .home-gps-table dl dt:nth-of-type(4), .home-gps-table dl dd:nth-of-type(4) {
-    width: 8%;
+    width: 7%
 }
 .home-gps-table dl dt:nth-of-type(5), .home-gps-table dl dd:nth-of-type(5) {
-    width: 17%
+    width: 7%;
 }
 .home-gps-table dl dt:nth-of-type(6), .home-gps-table dl dd:nth-of-type(6) {
-    width: 17%
+    width: 16%
 }
 .home-gps-table dl dt:nth-of-type(7), .home-gps-table dl dd:nth-of-type(7) {
-    width: 10%
+    width: 16%
 }
 .home-gps-table dl dt:nth-of-type(8), .home-gps-table dl dd:nth-of-type(8) {
-    width: 16%;
+    width: 9%
+}
+
+.home-gps-table dl dt:nth-of-type(9), .home-gps-table dl dd:nth-of-type(9) {
+    width: 15%;
     border-right: 0;
 }
@@ -798,12 +798,12 @@ li.map-panel {
 svg text.offline{
-    fill: #534e4e !important;
+    fill: #6f6a6a !important;
 }
 svg rect.offline{
-    stroke: #abaaaa !important;
-    fill: #b8b8b8 !important;
+    stroke: #dbdada !important;
+    fill: #dbdada !important;
 }
 .tooltip .tooltip-container .title a>.abnormal-text{
@@ -9,6 +9,7 @@
                     <div class="ct_table_head">
                         <dl>
                             <dt>车辆编码</dt>
+                            <dt>路牌</dt>
                             <dt>速度</dt>
                             <dt>终点</dt>
                             <dt>状态</dt>
@@ -27,6 +28,7 @@
     <script id="home-gps-tbody-temp" type="text/html">
     <dl id="home_gps_{{deviceId}}" data-device-id="{{deviceId}}" {{if abnormalStatus=='offline'}}class="offline"{{/if}}>
         <dd title="{{nbbm}}"><a>{{nbbm}}</a></dd>
+        <dd></dd>
         <dd>{{speed}}</dd>
         <dd>{{expectStopTime}}</dd>
         <dd>
 <div>
     <script id="tooltip_gps_temp" type="text/html">
-      <div class="tooltip" >
+      <div class="tooltip" data-id="{{deviceId}}">
         <div class="tooltip-container">
-            <div class="title">
-                <a href="javascript:;" data-for="station" class="tip_modal">
-                    {{nbbm}}
-                    {{if abnormalStatus == 'outBounds'}}
+
+            <div class="cont-text-panel">
+                <div class="title">
+                    <a href="javascript:;" data-for="station" class="tip_modal">
+                        {{nbbm}}
+                        {{if abnormalStatus == 'outBounds'}}
                         <span class="abnormal-text">越界</span>
-                    {{else if abnormalStatus == 'overspeed'}}
+                        {{else if abnormalStatus == 'overspeed'}}
                         <span class="abnormal-text">超速</span>
-                    {{else if abnormalStatus == 'gps-offline'}}
+                        {{else if abnormalStatus == 'gps-offline'}}
                         <span class="abnormal-text">GPS掉线</span>
-                    {{else if abnormalStatus == 'offline'}}
+                        {{else if abnormalStatus == 'offline'}}
                         <span class="abnormal-text">已离线</span>
-                    {{/if}}
-                </a>
-            </div>
-            <div>
-              <span class="field">站点：</span>{{stationName}}
-            </div>
-            <!-- <div>
-                {{lineName}} -{{if upDown==0}}上行{{else}}下行{{/if}}
-            </div> -->
-            <div>
-              <span class="field">设备：</span>{{deviceId}}
+                        {{/if}}
+                    </a>
+                </div>
+                <div>
+                    <span class="field">站点：</span>{{stationName}}
+                </div>
+                <!-- <div>
+                    {{lineName}} -{{if upDown==0}}上行{{else}}下行{{/if}}
+                </div> -->
+                <div>
+                    <span class="field">设备：</span>{{deviceId}}
+                </div>
+                <div>
+                    <span class="field">坐标：</span>{{lon}} {{lat}}
+                </div>
+                <div>
+                    <span class="field">速度：</span>{{speed}}</div>
+                <div>
+                    <span class="field">时间：</span>{{dateStr}}</div>
+                {{if expectStopTime!=null}}
+                <div>
+                    预计 {{expectStopTime}} 分钟到达终点</div>
+                {{/if}}
             </div>
-            <div>
-              <span class="field">坐标：</span>{{lon}} {{lat}}
-            </div>
-            <div>
-              <span class="field">速度：</span>{{speed}}</div>
-            <div>
-                <span class="field">时间：</span>{{dateStr}}</div>
-            {{if expectStopTime!=null}}
-            <div>
-              预计 {{expectStopTime}} 分钟到达终点</div>
-            {{/if}}
+
             <div class="tip_map_wrap"></div>
         </div>
       </div>
@@ -60,17 +64,30 @@
             <div style="color: #747272;">
                 {{gps.dateStr}}
             </div>
-            <!--<div>
-              <span class="field">进站时间：</span>?
-            </div>
-            <div>
-              <span class="field">计划发出：</span>?
-            </div>-->
-
         </div>
         </div>
         {{/each}}
         </div>
         <div class="tip_map_wrap multi"></div>
     </script>
+
+
+    <script id="tooltip_multi_gps_cont_temp" type="text/html">
+        <div class="tooltip-container">
+            <div class="title">
+                <a href="javascript:;" data-for="station" class="tip_modal">
+                    {{nbbm}}
+                </a>
+            </div>
+            <div>
+                <span class="field">站点：</span>{{stationName}}
+            </div>
+            <div>
+                <span class="field">设备：</span>{{deviceId}}
+            </div>
+            <div style="color: #747272;">
+                {{gps.dateStr}}
+            </div>
+        </div>
+    </script>
 </div>
@@ -83,21 +83,23 @@ var gb_home_line_panel = (function() {
             e.removeClass('offline');
         var cells = e.find('dd');
-        $(cells[1]).text(t.speed);
-        $(cells[2]).html(t.expectStopTime == null ? '' : t.expectStopTime);
+        $(cells[2]).text(t.speed);
+        $(cells[3]).html(t.expectStopTime == null ? '' : t.expectStopTime);
         //状态
-        $(cells[3]).html(temps['home-gps-abnormal-temp'](t));
+        $(cells[4]).html(temps['home-gps-abnormal-temp'](t));
         if(!t.stationName)
             t.stationName='';
-        $(cells[4]).text(t.stationName).attr('title', t.stationName);
+        $(cells[5]).text(t.stationName).attr('title', t.stationName);
         //班次信息
         if(t.sch){
-            $(cells[5]).text(t.sch.zdzName);
-            $(cells[6]).text(t.sch.zdsj);
-            $(cells[7]).text(t.sch.jGh + '/' + t.sch.jName);
+            //console.log('t.sch', t.sch);
+            $(cells[1]).text(t.sch.lpName);
+            $(cells[6]).text(t.sch.zdzName);
+            $(cells[7]).text(t.sch.zdsj);
+            $(cells[8]).text(t.sch.jGh + '/' + t.sch.jName);
         }
     };
@@ -268,8 +268,8 @@ var gb_svg_chart = (function () {
                 return true;
             abmStatus = this['abnormalStatus'];
+            suffix = '';
             if(abmStatus != 'offline'){
-                suffix = '';
                 this['abnormalClaszz'] = true;
                 if(abmStatus=='outBounds')
                     suffix = '界';
@@ -294,6 +294,9 @@ var gb_svg_chart = (function () {
             //聚合gps
             marker_clusterer(this, lineCode);
         });
+
+        //刷新tooltip
+        gb_svg_tooltip.refresh();
     };
     var draw_gps = function (svg, data) {
@@ -28,7 +28,7 @@ var gb_svg_tooltip = (function () {
                 target: rect
             },
             style: {
-                classes: 'qtip-bootstrap'
+                classes: 'qtip-bootstrap qtip-gps-tooltip'
             },
             hide: {
                 fixed: true,
@@ -54,7 +54,7 @@ var gb_svg_tooltip = (function () {
         var rect = $(this);
         //console.log('111', rect,rect.attr('aria-describedby'));
         /*if (rect.attr('aria-describedby'))
-            return;*/
+         return;*/
         //  var gps = gb_data_gps.findOne($(this).attr('_id').split('_')[1]);
         $('.qtip-multi-gps').qtip('destroy', true);
@@ -146,7 +146,7 @@ var gb_svg_tooltip = (function () {
         });
         //draw line routes
         gb_svg_map_util.drawLine(map, list[0]);
-    }
+    };
     function searchByStop(list, stop) {
         var rs = [];
@@ -168,7 +168,42 @@ var gb_svg_tooltip = (function () {
         });
     }
+    var refresh = function () {
+        //刷新展开的单个tooltip
+        $('.qtip-gps-tooltip .tooltip').each(function () {
+            var deviceId = $(this).data('id')
+                ,wrap = $(this).find('.cont-text-panel');
+            if(deviceId)
+                gb_svg_tooltip.refreshTooltip(deviceId, wrap);
+        });
+
+        //刷新展开的聚合tooltip
+        $('.qtip-multi-gps .multi-tooltip').each(function () {
+
+        });
+    };
+
+
+    /**
+     * 刷新单个tooltip
+     * @param deviceId
+     */
+    var refreshTooltip = function (deviceId, wrap) {
+        var gps = gb_data_gps.findOne(deviceId);
+
+        var cont = temps['tooltip_gps_temp'](gps);
+        var htmlStr = $(cont).find('.cont-text-panel').html();
+
+        $(wrap).html(htmlStr);
+
+        //更新地图点位
+
+        //console.log('refreshTooltip htmlStr', htmlStr, wrap);
+    };
+
     return {
-        update: updateFixedTip
+        update: updateFixedTip,
+        refresh: refresh,
+        refreshTooltip: refreshTooltip
     };
 })();