车辆分站内站外显示

潘钊
1 parent 685898b6
Showing 1 changed file with 36 additions and 10 deletions
src/main/resources/static/real_control_v2/js/utils/svg_chart.js
@@ -19,6 +19,12 @@ var gb_svg_chart = (function () {
         'svg-wrap': 'line'
     }
+    //站点间隔 线路编码 -> space
+    var circle_spaces={};
+    //var circle_space;
+    //是否启用动画
+    var animation = true;
+
     var calc_text_y = function (t) {
             return (chart_height - (chart_height / t_max_size * t.length)) / 2 + 5;
         },
@@ -43,7 +49,8 @@ var gb_svg_chart = (function () {
      * @param enableAttr 是否启用配置
      */
     var draw_line = function (lineCode, wrap, enableAttr) {
-        wraps[lineCode+'_'+suffixs[wrap.attr('class')]]=wrap;
+        var wrapId = lineCode+'_'+suffixs[wrap.attr('class')];
+        wraps[wrapId]=wrap;
         //环线
         var loopLine = gb_data_basic.isLoopLine(lineCode);
@@ -84,6 +91,7 @@ var gb_svg_chart = (function () {
                 return cx(d, i) - 8;
             };
+        circle_spaces[wrapId] = (w - (x_padd * 2)) / len;
         //add svg dom
         var svg = d3.select(wrap[0]).append('svg')
             .classed({
@@ -189,11 +197,17 @@ var gb_svg_chart = (function () {
             }
             return circle;
         },
-        gx = function (gps, svg) {
+        gx = function (gps, svg, wrapId) {
             var circle = get_circle(gps.stopNo + '_' + gps.upDown, svg);
             if (!circle) return -100;
-            return circle.attr('cx') - 16.5;
+            var x = circle.attr('cx') - 16.5,
+                s = circle_spaces[wrapId] / 2;
+           // console.log('ss', gps.lineId + '=' + s);
+            //s = 5;
+            if(gps['instation']==0)
+                x = (gps['upDown']==0?x+s:x-s);
+            return x;
         },
         gy = function (gps, svg) {
             var circle = get_circle(gps.stopNo + '_' + gps.upDown, svg);
@@ -233,10 +247,13 @@ var gb_svg_chart = (function () {
         gps_key = function (d) {
             return d.deviceId;
         },
-        gps_update_point = function (e, svg) {
-            var x;
-            e.transition().attr('x', function (d) {
-                x = gx(d, svg);
+        gps_update_point = function (e, svg, wrapId) {
+            var x,e1;
+            e1 = e;
+            if(animation)
+                e1 = e.transition();
+            e1.attr('x', function (d) {
+                x = gx(d, svg, wrapId);
                 if(x == -100)
                     $(this).css('transition-duration', 0).hide();
                 else
@@ -319,12 +336,15 @@ var gb_svg_chart = (function () {
         //rect
         var rects = gps_cont.selectAll('rect').data(data, gps_key);
         rects.enter().append('rect').attr('_id', rct_id);
-        gps_update_point(rects, svg);
+
+        //lineCode+'_'+suffixs[wrap.attr('class')]
+        var wrapId = $(svg).data('code') + '_' + suffixs[$(svg).parent().attr('class')];
+        gps_update_point(rects, svg, wrapId);
         //text
         var ts = gps_cont.selectAll('text').data(data, gps_key);
         ts.enter().append('text').attr('_id', tx_id);
         ts.text(g_text)
-        gps_update_point(ts, svg);
+        gps_update_point(ts, svg, wrapId);
     };
     var marker_clusterer = function (svg, lineCode) {
@@ -405,6 +425,12 @@ var gb_svg_chart = (function () {
         draw_line: draw_line,
         setGps: setGps,
         deviceOffline: deviceOffline,
-        refreshByVisible: refreshByVisible
+        refreshByVisible: refreshByVisible,
+        disabledAnimation: function () {
+            animation = false;
+        },
+        enabledAnimation: function () {
+            animation = true;
+        }
     };
 })();