徐烜 / bsth-ebus-h5_editor_springboot2 · Files

/**
 * 线路模拟图vue组件。
 * 属性说明：
 * 1、name：线路名称，类型：字符串，必须明确指定（required）
 * 2、code：线路编码，类型：字符串，必须明确指定（required）
 * 3、route：线路路由数据，类型：数组，默认值：[]
 *    数据示例：var test_route_data = [
 *            {
 *                names: ["A起点站"], // 站点名字数组
 *               ids: ["ACODE_0", "ACODE_1"], // 站点编码_上下行
 *                type: 2, // 0：上行 1：下行 2：同名合并 3：异名合并
 *                stationMark: "B"
 *            },
 *            {
 *               names: ["B中途站", "C1中途站"],
 *                ids: ["BCODE_0", "C1CODE_1"],
 *                type: 3,
 *                stationMark: "Z"
 *            },
 *            {
 *                names: ["C中途站"],
 *                ids: ["CCODE_0"],
 *                type: 0,
 *                stationMark: "Z"
 *            },
 *            {
 *                names: ["D中途站"],
 *                ids: ["DCODE_0", "DCODE_1"],
 *                type: 2,
 *                stationMark: "Z"
 *            },
 *            {
 *                names: ["E中途站", "E1中途站"],
 *                ids: ["ECODE_0", "E1CODE_1"],
 *                type: 3,
 *                stationMark: "Z"
 *            },
 *            {
 *                names: ["F终点站"],
 *                ids: ["FCODE_0", "FCODE_1"],
 *                type: 2,
 *                stationMark: "E"
 *            }];
 * 4、gps：线路实时车辆数据，类型：数组，默认值：[]
 *    数据示例：var test_gps_data = [
 *            {
 *                stopNo: 'BCODE', // 站点编码
 *                upDown: 0, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1014', // 设备编码
 *                instation: 1, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-064' // 车辆内部编码（自编号）
 *            },
 *            {
 *                stopNo: 'BCODE', // 站点编码
 *                upDown: 0, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1013', // 设备编码
 *                instation: 1, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-065' // 车辆内部编码（自编号）
 *            },
 *            {
 *                stopNo: 'CCODE', // 站点编码
 *                upDown: 0, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1015', // 设备编码
 *                instation: 0, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-066' // 车辆内部编码（自编号）
 *            },
 *            {
 *                stopNo: 'E1CODE', // 站点编码
 *                upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1025', // 设备编码
 *                instation: 1, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-026' // 车辆内部编码（自编号）
 *            },
 *
 *            {
 *                stopNo: 'ACODE', // 站点编码
 *                upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1035', // 设备编码
 *                instation: 1, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-036' // 车辆内部编码（自编号）
 *            },
 *            {
 *                stopNo: 'ACODE', // 站点编码
 *                upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1045', // 设备编码
 *                instation: 1, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-046' // 车辆内部编码（自编号）
 *            },
 *            {
 *                stopNo: 'ACODE', // 站点编码
 *                upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
 *                deviceId: '559L1055', // 设备编码
 *                instation: 1, // 0： 站外 1：站内 2：场内
 *                nbbm: 'W2B-056' // 车辆内部编码（自编号）
 *            }];
 * 4、width：图表宽度：类型：数字，默认值：600
 * 5、height：图表高度：类型：数字，默认值：240，建议：内部svg高度122加上一些padding，总高度建议240及以上
 *
 * TODO：遍历对象属性的时候，以后建议使用Object.keys方法，使用$jQuery.each会遍历到原型链上的属性（代码内部逻辑不需要）
 * 如：Object.prototype.temp1=11，使用$jQuery遍历所有对象都会得到temp1这个属性，代码内部的逻辑可能会产生问题
 */
var line_chart_vue = (function() {
    /**
     * 比较两个对象内部值是否相等。
     */
    var _objectEquals = function(o1, o2) {
        // 判断当前的属性是不是对象
        var o1_is_object = o1 instanceof Object;
        var o2_is_object = o2 instanceof Object;
        var o1_is_array = o1 instanceof Array;
        var o2_is_array = o2 instanceof Array;

        if (o1_is_object && o2_is_object) { // 都是对象比较
            // 如果都是对象，判断对象的属性数量是否一致
            if (Object.keys(o1).length !== Object.keys(o2).length) {
                return false;
            }
            // 递归判断每个属性是否一致
            var o1_property_names = Object.keys(o1);
            for (var i = 0; i < o1_property_names.length; i++) {
                var o1_property_value = o1[o1_property_names[i]];
                var o2_property_value = o2[o1_property_names[i]];
                var equal = _objectEquals(o1_property_value, o2_property_value);
                if (!equal) {
                    return equal;
                }
            }
        } else if (o1_is_array && o2_is_array) { // 都是数组比较
            // 如果是数组，判断长度是否一致
            if (o1.length !== o2.length) {
                return false;
            }

            // 每个数组元素顺序比对
            for (var n = 0; n < o1.length; n++) {
                var equal2 = _objectEquals(o1[n], o2[n]);
                if (!equal2) {
                    return equal2;
                }
            }
        } else {
            return o1 === o2;
        }

        return true;
    };

    /**
     * 创建线路名称title。
     * @param createElement vue的render函数参数
     * @param componentContext vue组件的this
     */
    var createLineNameTitle = function(createElement, componentContext) {
        return createElement(
            'div',
            {
                class: {
                    'top-center-big-text' : true
                },
                domProps: {
                    innerText: componentContext.name
                }
            }
        );
    };

    var createSvgDom = function(wrapDom, lineCode, height) {
        return d3.select(wrapDom).append('svg')
            .classed('line-chart', true)
            .attr('data-code', lineCode)
            .attr('onselectstart', 'return false')
            .style('height', height);
    };
    var createGpsWrapSvg = function(svgDom) {
        // 添加svg wrap
        return svgDom.append('g').classed('gps-wrap', true);
    };
    var createGpsMarkerClusterSvg = function(svgDom) {
        // 添加svg marker clusterer wrap（指多个图像叠加在一起）
        return svgDom.append('g').classed('marker-clusterer', true);
    };


    var refreshLineSvg = function(componentContext) {
        var $jQuery = componentContext._jQuery;

        var test_route_data = componentContext.route;
        var width = componentContext.width;
        var height = componentContext.height;
        var svgNameSpace = componentContext._svgns;
        var svg = componentContext._svg;
        var chart_height = componentContext._chart_height;
        var chart_top_padding = componentContext._chart_top_padding;
        var chart_left_padding = componentContext._chart_left_padding;
        var chart_right_padding = componentContext._chart_right_padding;
        var chart_stop_name_max_size = componentContext._chart_stop_name_max_size;

        //------------ 1、添加g元素 ----------//
        var items_update = svg.selectAll('g.item')
            .data(test_route_data, function(d) {
                return d.ids.join("#");
            });
        var items_enter = items_update;
        var items_exit = items_update.exit();

        items_exit.remove();
        items_enter = items_enter.enter().append('g').classed('item', true);

        // 创建x轴比例尺
        var xScale = d3.scaleLinear()
            .domain([0, test_route_data.length - 1]) // 定义域
            .range([chart_left_padding, width - chart_right_padding]); // 值域

        //------------ 2、添加/更新线路上行path元素 ----------//
        var upLineFun = d3.line()
            .x(xScale)
            .y(function() {
                return (height - chart_height) / 2 + chart_top_padding;
            });
        items_enter.append('path')
            .classed('station_link', true)
            .attr('d', function(d, i) {
                return i < test_route_data.length - 1 ? upLineFun([i, i + 1]) : '';
            });
        items_update.select('path')
            .attr('d', function(d, i) {
                return i < test_route_data.length - 1 ? upLineFun([i, i + 1]) : '';
            });

        //------------ 3、添加/更新线路下行path元素 ----------//
        var downLineFun = d3.line()
            .x(xScale)
            .y(function() {
                return (height - chart_height) / 2 + chart_top_padding + chart_height;
            });
        items_enter.append('path')
            .classed('station_link', true)
            .classed('down', true)
            .attr('d', function(d, i) {
                return i < test_route_data.length - 1 ? downLineFun([i, i + 1]) : '';
            });
        items_update.select('path.down')
            .attr('d', function(d, i) {
                return i < test_route_data.length - 1 ? downLineFun([i, i + 1]) : '';
            });

        //------------ 4、添加/更新线路上行circle元素 ----------//
        items_enter.select(function(d) {
            return d.type != 1 ? this : null;
        }).append('circle')
            .classed('station_circle', true)
            .attr('cx', function(d, i) {
                return xScale(i);
            })
            .attr('cy', function() {
                return (height - chart_height) / 2 + chart_top_padding;
            })
            .attr('data-id', function(d) {
                return d.ids[0];
            });
        items_update.select('circle')
            .attr('cx', function(d, i) {
                return xScale(i);
            })
            .attr('cy', function() {
                return (height - chart_height) / 2 + chart_top_padding;
            });

        //------------ 5、添加/更新线路下行circle元素 ----------//
        items_enter.select(function(d) {
            return d.type != 0 ? this : null;
        }).append('circle')
            .classed('station_circle', true)
            .classed('down', true)
            .attr('cx', function(d, i) {
                return xScale(i);
            })
            .attr('cy', function(d, i) {
                return (height - chart_height) / 2 + chart_top_padding + chart_height;
            })
            .attr('data-id', function(d) {
                return d.type == 1 ? d.ids[0] : d.ids[1];
            });
        items_update.select('circle.down')
            .attr('cx', function(d, i) {
                return xScale(i);
            })
            .attr('cy', function(d, i) {
                return (height - chart_height) / 2 + chart_top_padding + chart_height;
            });

        //------------ 6、添加线路上行行站点名text元素 ----------//
        items_enter.append('text')
            .classed('station_text', true)
            .classed('up', function(d) {
                return d.type == 3 || d.type == 0 ? true : false;
            })
            .classed('down', function(d) {
                return d.type == 1 ? true : false;
            })
            .text(function(d) {
                if (!d.names[0]) {
                    return 0;
                }
                return d.names[0].length > chart_stop_name_max_size
                    ? d.names[0].substr(0, chart_stop_name_max_size) : d.names[0];
            })
            .attr('title', function(d) {
                return d.names[0];
            })
            .attr('x', function(d, i) {
                if (d.type != 3) {
                    return xScale(i);
                }

                // 处理多文本
                var svg_text = document.createElementNS(svgNameSpace, 'text');
                var text_str = d.names[1].length > chart_stop_name_max_size
                    ? d.names[1].substr(0, chart_stop_name_max_size) : d.names[1];
                var text_x = xScale(i);
                var text_y1 = (height - chart_height) / 2 + chart_top_padding;
                var text_y2 = (chart_height - (chart_height / chart_stop_name_max_size * text_str.length)) / 2 + 5;
                d3.select(svg_text)
                    .attr('class', 'station_text down')
                    .attr('title', text_str)
                    .attr('x', text_x + 8)
                    .attr('y', text_y1 + text_y2)
                    .text(text_str);
                // svg_text添加在当前元素后面
                $jQuery(this).after(svg_text);
                // this.insertAdjacentElement('afterend', svg_text);

                return xScale(i) - 8;
            })
            .attr('y', function(d) {
                var y1 = (height - chart_height) / 2 + chart_top_padding;
                var text = d.names[0].length > chart_stop_name_max_size
                    ? d.names[0].substr(0, chart_stop_name_max_size) : d.names[0];
                var y2 = (chart_height - (chart_height / chart_stop_name_max_size * text.length)) / 2 + 5;
                return y1 + y2;
            });
        items_update.select('text.station_text')
            .classed('up', function(d) {
                return d.type == 3 || d.type == 0 ? true : false;
            })
            .classed('down', function(d) {
                return d.type == 1 ? true : false;
            })
            .text(function(d) {
                if (!d.names[0]) {
                    return 0;
                }
                return d.names[0].length > chart_stop_name_max_size
                    ? d.names[0].substr(0, chart_stop_name_max_size) : d.names[0];
            })
            .attr('title', function(d) {
                return d.names[0];
            })
            .attr('x', function(d, i) {
                if (d.type != 3) {
                    return xScale(i);
                }

                // 处理多文本
                $jQuery(this).next().remove(); // 删除之前的多文本，next()就是下一个兄弟节点
                var svg_text = document.createElementNS(svgNameSpace, 'text');
                var text_str = d.names[1].length > chart_stop_name_max_size
                    ? d.names[1].substr(0, chart_stop_name_max_size) : d.names[1];
                var text_x = xScale(i);
                var text_y1 = (height - chart_height) / 2 + chart_top_padding;
                var text_y2 = (chart_height - (chart_height / chart_stop_name_max_size * text_str.length)) / 2 + 5;
                d3.select(svg_text)
                    .attr('class', 'station_text down')
                    .attr('title', text_str)
                    .attr('x', text_x + 8)
                    .attr('y', text_y1 + text_y2)
                    .text(text_str);
                // svg_text添加在当前元素后面
                $jQuery(this).after(svg_text);

                return xScale(i) - 8;
            })
            .attr('y', function(d) {
                var y1 = (height - chart_height) / 2 + chart_top_padding;
                var text = d.names[0].length > chart_stop_name_max_size
                    ? d.names[0].substr(0, chart_stop_name_max_size) : d.names[0];
                var y2 = (chart_height - (chart_height / chart_stop_name_max_size * text.length)) / 2 + 5;
                return y1 + y2;
            });

    };

    var findLineCircle = function(componentContext, stopNo, upDown) {
        var $jQuery = componentContext._jQuery;
        // 查找对应的circle
        var svg_circle;
        try {
            svg_circle = $jQuery('.station_circle[data-id=' + stopNo + "_" + upDown + ']');
            if (svg_circle.length == 0) {
                svg_circle = null;
            }
        } catch (e) {
            console.log('未找到svg circle, data-id = ' + stopNo + "_" + upDown);
            svg_circle = null;
        }
        return svg_circle;
    };

    var refreshGpsSvg = function(componentContext) {
        var $jQuery = componentContext._jQuery;
        var gps = componentContext.gps;

        var svg = componentContext._svg;
        var gps_wrap_svg = componentContext._gps_wrap_svg;
        var gps_marker_cluster_svg = componentContext._gps_marker_cluster_svg;
        var test_route_data = componentContext.route;
        var test_gps_data = componentContext.gps;
        var width = componentContext.width;
        var chart_left_padding = componentContext._chart_left_padding;
        var chart_right_padding = componentContext._chart_right_padding;

        //-------------- 0、数据处理 --------------//
        /*
         * 按照站点编码和上下行分组
         * 数据示例：
         * gps_group_by_stopNo_upDown = {
         *     'BCODE_0': ['559L1014', '559L1013'],
         *     'CCODE_0': ['559L1015'],
         *     'E1CODE_1': ['559L1025'],
         *     'ACODE_1': ['559L1035', '559L1045', '559L1055']
         * };
         */
        var gps_group_by_stopNo_upDown = {};
        $jQuery.each(gps, function(i, d) {
            var stopNo = d.stopNo; // 站点编码
            var upDown = d.upDown; // 上下行（0 上行 ， 1 下行 ， -1 无效）
            var groupKey = stopNo + "_" + upDown;
            if (!gps_group_by_stopNo_upDown[groupKey]) {
                gps_group_by_stopNo_upDown[groupKey] = [];
            }
            var deviceId = d.deviceId; // 设备编码
            gps_group_by_stopNo_upDown[groupKey].push(deviceId);
        });
        /*
         * 将分组后的设备编码array转换成map
         * 数据示例：
         * test_gps_index_mapp = {
         *     'BCODE_0': {
         *         '559L1014': 0, '559L1013' : 1
         *     },
         *     'CCODE_0': {
         *         '559L1015': 0
         *     },
         *     'E1CODE_1': {
         *         '559L1025': 0
         *     },
         *     'ACODE_1': {
         *         '559L1035': 0, '559L1045': 1, '559L1055': 2
         *     }
         * };
         */
        var test_gps_index_mapp = {};
        $jQuery.each(gps_group_by_stopNo_upDown, function(key, value) {
            if (!test_gps_index_mapp[key]) {
                test_gps_index_mapp[key] = {};
            }
            $jQuery.each(value, function(index, deviceId) {
                test_gps_index_mapp[key][deviceId] = index;
            })
        });

        //--------------- 1、添加/更新车辆rect元素 --------------//
        $jQuery('.merge_hide', svg).removeAttr('class'); // 删除.mverge_hide元素的class属性（样式）
        // 绘制rect
        var gps_rect_update = gps_wrap_svg.selectAll('rect')
            .data(test_gps_data, function(d) {
                return d.deviceId; // 指定主键，默认使用数组下标
            });
        var gps_rect_enter = gps_rect_update;
        var gps_rect_exit = gps_rect_update.exit();
        gps_rect_exit.remove();

        gps_rect_x = function(d) {
            // 查找对应的circle
            var svg_circle = findLineCircle(componentContext, d.stopNo, d.upDown);

            // 计算x
            var x;
            if (!svg_circle) {
                x = -100;
                return x;
            }
            var x1 = parseInt(svg_circle.attr('cx')) - 16.5;
            var s = (width - (chart_left_padding + chart_right_padding)) / test_route_data.length;
            if (d.instation == 0) {
                if (d.upDown == 0) {
                    x = x1 + s;
                } else {
                    x = x1 - s;
                }
            } else {
                x = x1;
            }

            // 显示/隐藏
            if (x == -100) {
                $jQuery(this).css('transition-duration', 0).hide();
            } else {
                $jQuery(this).show();
            }

            return x;
        };

        gps_rect_y = function(d) {
            // 查找对应的circle
            var svg_circle = findLineCircle(componentContext, d.stopNo, d.upDown);

            // 计算y
            var y;
            if (!svg_circle) {
                y = -100;
                return y;
            }
            y = parseInt(svg_circle.attr('cy'));
            var index = test_gps_index_mapp[d.stopNo + "_" + d.upDown][d.deviceId];
            if (d.upDown == 0) {
                y = y - 22 - (index * 17);
            } else {
                y = y + 6 + (index * 19);
            }

            return y;
        };

        gps_rect_enter.enter().append('rect')
            .attr('_id', function(d) {
                return 'rct_' + d.deviceId;
            })
            .transition()
            .attr('x', gps_rect_x)
            .attr('y', gps_rect_y)
            .attr('updown', function(d) {
                return d.upDown;
            });
        gps_rect_update
            .attr('_id', function(d) {
                return 'rct_' + d.deviceId;
            })
            .transition()
            .attr('x', gps_rect_x)
            .attr('y', gps_rect_y)
            .attr('updown', function(d) {
                return d.upDown;
            });

        //--------------- 3、添加/更新车辆text元素 --------------//
        var gps_text_update = gps_wrap_svg.selectAll('text')
            .data(test_gps_data, function(d) {
                return d.deviceId; // 指定主键，默认使用数组下标
            });
        var gps_text_enter = gps_text_update;
        var gps_text_exit = gps_text_update.exit();
        gps_text_exit.remove();

        var gps_text_x = function(d) {
            // 查找对应的circle
            var svg_circle = findLineCircle(componentContext, d.stopNo, d.upDown);

            // 计算x
            var x;
            if (!svg_circle) {
                x = -100;
                return x;
            }
            var x1 = parseInt(svg_circle.attr('cx')) - 16.5;
            var s = (width - (chart_left_padding + chart_right_padding)) / test_route_data.length;
            if (d.instation == 0) {
                if (d.upDown == 0) {
                    x = x1 + s;
                } else {
                    x = x1 - s;
                }
            } else {
                x = x1;
            }

            // 显示/隐藏
            if (x == -100) {
                $jQuery(this).css('transition-duration', 0).hide();
            } else {
                $jQuery(this).show();
            }

            return x;
        };

        var gps_text_y = function(d) {
            // 查找对应的circle
            var svg_circle = findLineCircle(componentContext, d.stopNo, d.upDown);

            // 计算y
            var y;
            if (!svg_circle) {
                y = -100;
                return y;
            }
            y = parseInt(svg_circle.attr('cy'));
            var index = test_gps_index_mapp[d.stopNo + "_" + d.upDown][d.deviceId];
            if (d.upDown == 0) {
                y = y - 22 - (index * 17);
            } else {
                y = y + 6 + (index * 19);
            }

            return y;
        };

        var gps_text_text = function(d) {
            if (d.nbbm) {
                var nbbm_length = d.nbbm.length;
                if (nbbm_length > 3) {
                    var nbbm_text = d.nbbm.substr(nbbm_length - 3);
                    if (d.nbbm.indexOf('-') > 0) {
                        return d.nbbm.substr(d.nbbm.indexOf('-') - 1, 1) + nbbm_text;
                    } else {
                        return nbbm_text;
                    }
                } else {
                    return d.nbbm;
                }
            } else {
                return d.nbbm;
            }
        };

        gps_text_enter.enter().append('text')
            .attr('_id', function(d) {
                return "tx_" + d.deviceId;
            })
            .transition()
            .attr('x', gps_text_x)
            .attr('y', gps_text_y)
            .attr('updown', function(d) {
                return d.upDown;
            })
            .text(gps_text_text);

        gps_text_update
            .attr('_id', function(d) {
                return "tx_" + d.deviceId;
            })
            .transition()
            .attr('x', gps_text_x)
            .attr('y', gps_text_y)
            .attr('updown', function(d) {
                return d.upDown;
            })
            .text(gps_text_text);


        //--------------- 4、绘制/更新车辆合并显示元素（g rect text） --------------//
        // 绘制聚合点的数据集对象列表
        var _merger_data = [];
        $jQuery.each(test_gps_index_mapp, function(key, value) {
            var stopNo = key.split("_")[0];
            var upDown = key.split("_")[1];
            var deviceIds = [];
            $jQuery.each(value, function(deviceId) {
                deviceIds.push(deviceId);
            });
            // 删除旧的合并点
            $jQuery('g[_id=' + 'merger_' + key + ']').remove();
            if (deviceIds.length <= 2) { // 小于等于2个gps，不合并
                return true;
            }

            // 查找circle
            var svg_circle = findLineCircle(componentContext, stopNo, upDown);
            if (!svg_circle) {
                return true;
            }

            var x = parseInt(svg_circle.attr('cx'));
            var y = parseInt(svg_circle.attr('cy'));
            // 隐藏车辆rect
            $jQuery.each(deviceIds, function(i, d) {
                $jQuery('rect[_id=rct_' + d + '],text[_id=tx_' + d + ']').attr('class', 'merge_hide');
            });

            _merger_data.push({
                x: x,
                y: y,
                key: key,
                upDown: upDown,
                length: deviceIds.length
            });

            // // 创建 merge g rect text
            // var merge_g = svg.selectAll('g.marker-clusterer')
            //     .append('g')
            //     .classed('merge-item', true)
            //     .attr('_id', 'merger_' + key);
            // merge_g.append('rect')
            //     .attr('x', x - 11)
            //     .attr('y', function() {
            //         return upDown == 0 ? y - 31 : y + 8;
            //     });
            // merge_g.append('text')
            //     .text(deviceIds.length)
            //     .attr('x', x - ((deviceIds.length + '').length * 4.5))
            //     .attr('y', upDown == 0 ? y - 14 : y + 24);

        });

        var merge_update = gps_marker_cluster_svg.selectAll('g')
            .data(_merger_data, function(d) {
                return d.key;
            });
        var merge_enter = merge_update;
        var merge_exit = merge_update.exit();
        merge_exit.remove();
        merge_enter = merge_enter.enter().append('g')
            .classed('merge-item', true)
            .attr('_id', function(d) {
                return 'merger_' + d.key;
            });

        merge_enter.append('rect')
            .attr('x', function(d) {
                return d.x - 11;
            })
            .attr('y', function(d) {
                return d.upDown == 0 ? d.y - 31 : d.y + 8;
            });
        merge_update.select('rect')
            .attr('x', function(d) {
                return d.x - 11;
            })
            .attr('y', function(d) {
                return d.upDown == 0 ? d.y - 31 : d.y + 8;
            });

        merge_enter.append('text')
            .text(function(d) {
                return d.length;
            })
            .attr('x', function(d) {
                return d.x - ((d.length + '').length * 4.5);
            })
            .attr('y', function(d) {
                return d.upDown == 0 ? d.y - 14 : d.y + 24;
            });

        merge_update.select('text')
            .text(function(d) {
                return d.length;
            })
            .attr('x', function(d) {
                return d.x - ((d.length + '').length * 4.5);
            })
            .attr('y', function(d) {
                return d.upDown == 0 ? d.y - 14 : d.y + 24;
            });

    };


    return {
        data: function() {
            // 不被vue监控的属性放在这里
            // 作用是每个组件实例内部的一组局部变量
            // 所有局部变量以_开头

            this._chart_height = 122; // 线路图高度
            this._chart_left_padding = 30; // 线路图距离左边的padding
            this._chart_right_padding = 30; // 线路图距离右边的padding
            this._chart_top_padding = 4; // 线路图距离上边的padding
            this._chart_stop_name_max_size = 7; // 站定名最大文字数量
            this._svgns = 'http://www.w3.org/2000/svg'; // svg元素名字空间

            this._svg; // 创建的根svg元素，由mounted钩子函数创建
            this._gps_wrap_svg; // 创建包含gps设备显示的最外层g元素
            this._gps_marker_cluster_svg; // 创建包含聚合显示gps的最外层g元素
            this._jQuery = jQuery.noConflict(); // jquery引用

            return {
                // 被vue监控的属性
                // 如：this.text = 'dfdfdf';
            };
        },
        props: { // 属性
            name: { // 线路名称
                type: String,
                required: true,
            },
            code: { // 线路代码
                type: String,
                required: true
            },
            route: { // 路由数据
                type: Array,
                default: function() {
                    return [];
                }
            },
            gps: { // gps数据
                type: Array,
                default: function() {
                    return [];
                }
            },
            width: { // 图宽度
                type: Number,
                default: 600
            },
            height: { // 图高度
                type: Number,
                default: 240
            }
        },
        watch: {
            code: function(currentVal) {
                this._svg.attr('data-code', currentVal);
            },
            route: function(currentVal, oldVal) {
                // console.log(this.route);
                // console.log("route change");
                if (!_objectEquals(currentVal, oldVal)) {
                    refreshLineSvg(this);
                    refreshGpsSvg(this);
                }
            },
            gps: function(currentVal, oldVal) {
                if (!_objectEquals(currentVal, oldVal)) {
                    // refreshLineSvg(this);
                    refreshGpsSvg(this);
                }
            },
            width: function() {
                refreshLineSvg(this);
                refreshGpsSvg(this);
            },
            height: function() {
                refreshLineSvg(this);
                refreshGpsSvg(this);
            }
        },
        /**
         * render函数代替template写法
         * @param createElement
         */
        render(createElement) {
            return createElement(
                'div',
                {
                    style: {
                        'width': this.width + "px",
                        'height': this.height + 'px',
                        'border': '1px solid black',
                        'margin': '5px',
                        'margin-bottom': '0px',
                        'position': 'relative'
                    }

                },
                [
                    createLineNameTitle(createElement, this)
                ]
            )
        },
        mounted: function() {
            // console.log("mounted");
            this._svg = createSvgDom(this.$el, this.code, this.height);
            this._gps_wrap_svg = createGpsWrapSvg(this._svg);
            this._gps_marker_cluster_svg = createGpsMarkerClusterSvg(this._svg);

            refreshLineSvg(this);
            refreshGpsSvg(this);
        }

    };

}());