潘钊 / bsth_control · Commits

Commit d7b0c884c72287f39208b8206ac3c9665a6461ef

Authored by 潘钊
1 parent 77e3dba7
build: skipped

线调布局v1

Inline Side-by-side
Showing 2 changed files with 690 additions and 1 deletions
src/main/resources/static/pages/control/line/css/lineControl.css 0 → 100644
  View file @d7b0c88
  1 +.z-depth-1 {
  2 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0
  3 + rgba(0, 0, 0, 0.12);
  4 +}
  5 +
  6 +.z-depth-2 {
  7 + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
  8 + rgba(0, 0, 0, 0.19);
  9 +}
  10 +
  11 +.z-depth-3 {
  12 + box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
  13 + rgba(0, 0, 0, 0.19);
  14 +}
  15 +
  16 +.nav-tabs > li > a, .nav-pills > li > a{
  17 + font-size: 16px;
  18 +}
  19 +
  20 +/* 自定义阈值 width 大于1200px */
  21 +@media ( min-width : 1200px) {
  22 + /* 非全屏 */
  23 + .card_wrap {
  24 + overflow-x: auto;
  25 + }
  26 + .card_wrap .col-lg-2 {
  27 + width: 23%
  28 + }
  29 + .card_wrap .col-lg-8 {
  30 + width: 53%;
  31 + margin: 0 8px 0 8px;
  32 + }
  33 +
  34 + /* 全屏模式下 */
  35 + .portlet-fullscreen .card_wrap {
  36 + min-width: 1910px;
  37 + }
  38 + .portlet-fullscreen .card_wrap .col-lg-2 {
  39 + width: 21%
  40 + }
  41 + .portlet-fullscreen .card_wrap .col-lg-8 {
  42 + width: 57.2684321%;
  43 + margin: 0 7px 0 7px;
  44 + }
  45 +}
  46 +
  47 +.card_wrap{
  48 + height: 263px;
  49 + text-align: center;
  50 +}
  51 +
  52 +.card_wrap .line_chart{
  53 + height: 100%;
  54 + padding: 0;
  55 +}
  56 +
  57 +.card_wrap .line_chart .top{
  58 + height: 69px;
  59 + background: #337AB7;
  60 + border-radius: 5px 5px 0 0 !important;
  61 +}
  62 +
  63 +.card_wrap .col-lg-2{
  64 + height: 100%;
  65 + overflow: hidden;
  66 + padding: 0;
  67 + border: 1px solid #337ab7;
  68 +}
  69 +
  70 +.card_wrap .col-lg-2 .table-advance thead tr th {
  71 + font-size: 15px;
  72 + font-family: 微软雅黑;
  73 +}
  74 +
  75 +
  76 +.card_wrap .col-lg-2 .table>tbody>tr>td,
  77 +.card_wrap .col-lg-2 .table>thead>tr>th{
  78 + padding: 7px;
  79 +}
  80 +
  81 +.card_wrap .col-lg-2 .table td{
  82 + font-size: 16px;
  83 + font-family: 微软雅黑
  84 +}
  85 +
  86 +.card_wrap .col-lg-2.down{
  87 + border: 1px solid #F36A5A;
  88 +}
  89 +
  90 +.card_wrap .col-lg-2 .title{
  91 + line-height: 40px;
  92 + color: #fafafa;
  93 + background: #337ab7;
  94 + font-size: 16px;
  95 + text-align: left;
  96 + font-weight: bold;
  97 + padding-left: 10px;
  98 +}
  99 +
  100 +.card_wrap .col-lg-2 .title .help_text{
  101 + float: right;
  102 + margin-right: 15px;
  103 + color: #fafcfb;
  104 + font-weight: 400;
  105 + font-size: 14px;
  106 +}
  107 +
  108 +.card_wrap .col-lg-2.down .title{
  109 + background: #f36a5a;
  110 +}
  111 +
  112 +.card_wrap .col-lg-2 .title .badge{
  113 + border-radius: 12px !important;
  114 + padding: 0;
  115 + height: 24px;
  116 + font-size: 14px !important;
  117 + margin-left: 5px;
  118 + font-weight: bold;
  119 + border: 1px solid white;
  120 + background: #337AB7;
  121 + width: 35px;
  122 + line-height: 24px;
  123 + text-indent: -1px;
  124 +}
  125 +
  126 +.card_wrap .col-lg-2.down .title .badge{
  127 + background: #f36a5a;
  128 +}
  129 +
  130 +.row.card_wrap .table-advance {
  131 + margin-bottom: 0px !important;
  132 +}
  133 +
  134 +/* 上下行滚动条颜色 */
  135 +.row.card_wrap .slimScrollBar{
  136 + background: #337ab7 !important;
  137 + border-radius: 5px !important;
  138 +}
  139 +
  140 +.row.card_wrap .col-lg-2.down .slimScrollBar{
  141 + background: #f36a5a !important;
  142 +}
  143 +
  144 +.row.card_wrap {
  145 + margin-left: 0;
  146 + margin-right: 0;
  147 + overflow-y: hidden;
  148 + background: #eee;
  149 +}
  150 +
  151 +/* svg 样式 */
  152 +.line_chart svg{
  153 + border: 1px solid #fdfdfd;
  154 + background: #fdfdfd;
  155 + margin-left: 0px;
  156 + margin-right: 0px;
  157 + box-shadow: 0 8px 17px 0 #999, 0 6px 20px 0 #666;
  158 + padding: 10px 0 10px 0;
  159 + height: calc(100% - 70px);
  160 +}
  161 +.station_circle{
  162 + fill: #e7ecf1;
  163 + r: 7.6;
  164 +}
  165 +
  166 +.up_station_circle_inside{
  167 + fill: #337ab7;
  168 + r: 5;
  169 +}
  170 +
  171 +.down_station_circle_inside{
  172 + fill: #F36A5A;
  173 + r: 5;
  174 +}
  175 +
  176 +.station_text{
  177 + writing-mode: vertical-lr;
  178 + letter-spacing: -2.6px;
  179 +}
  180 +
  181 +.station_text.end{
  182 + fill: none;
  183 + stroke: #F36A5A;
  184 +}
  185 +
  186 +.station_text.start{
  187 + stroke: #337AB7;
  188 + fill: none;
  189 +}
  190 +
  191 +.up_path{
  192 + stroke-width: 7.4px;
  193 + stroke: #337AB7;
  194 +}
  195 +.down_path{
  196 + stroke-width: 7.4px;
  197 + stroke: #f36a5a;
  198 +}
  199 +.up-circle-none{
  200 + fill: #337AB7;
  201 + r: 3;
  202 +}
  203 +
  204 +.down-circle-none{
  205 + fill: #F36A5A;
  206 + r: 3;
  207 +}
0 208 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/index.html
  View file @d7b0c88
1   -aaa
2 1 \ No newline at end of file
  2 +<link href="css/lineControl.css" rel="stylesheet" type="text/css" />
  3 +<div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 12px 5px 15px 5px;">
  4 + <div class="portlet-title" style="padding: 20px 20px 7px 20px;">
  5 + <div class="caption" >
  6 + <i class="fa fa-life-ring" style="font-size: 22px"></i> <span
  7 + class="caption-subject bold" style="font-size: 24px;">线路调度系统</span>
  8 + </div>
  9 + <div class="actions">
  10 + <a class="btn btn-circle btn-icon-only btn-default fullscreen on" href="javascript:;" data-original-title="" title=""> </a>
  11 + </div>
  12 + </div>
  13 + <div class="portlet-body">
  14 + <ul class="nav nav-tabs" style="margin-left: 15px;margin-bottom: 20px;">
  15 + <li class="active"><a href="#tab_home" data-toggle="tab"
  16 + aria-expanded="true"> 主页 </a></li>
  17 + <li class=""><a href="#tab_map" data-toggle="tab"
  18 + aria-expanded="false"> 地图监控 </a></li>
  19 +
  20 +
  21 + <li class=""><a href="#tab_85" data-toggle="tab"
  22 + aria-expanded="false"> 85路 </a></li>
  23 +
  24 +
  25 + <li class=""><a href="#tab_50" data-toggle="tab"
  26 + aria-expanded="false"> 浦东50路 </a></li>
  27 + </ul>
  28 +
  29 + <div class="tab-content">
  30 + <div class="tab-pane fade active in z-depth-1" id="tab_home" >
  31 + <div class="row card_wrap" >
  32 + <div class="col-lg-2 z-depth-2" >
  33 +
  34 + <div class="title">
  35 + 发往川沙客运站方向
  36 + <span class="badge" > 13 </span>
  37 + <span class="help_text">上行</span>
  38 + </div>
  39 + <table class="table table-striped table-bordered table-advance">
  40 + <colgroup>
  41 + <col style="width: 79px;" />
  42 + <col style="width: 78px;" />
  43 + <col style="width: 75px;" />
  44 + <col style="width: 57px;" />
  45 + <col style="width: 60px;" />
  46 + </colgroup>
  47 + <thead>
  48 + <tr>
  49 + <th> 车辆编码 </th>
  50 + <th> 终点距离 </th>
  51 + <th> 终点时间 </th>
  52 + <th> 指令 </th>
  53 + <th> 速度 </th>
  54 + <th> 路牌 </th>
  55 + </tr>
  56 + </thead>
  57 + </table>
  58 + <div class="table_wrap">
  59 + <table class="table table-striped table-bordered table-advance table-hover">
  60 + <colgroup>
  61 + <col style="width: 79px;" />
  62 + <col style="width: 78px;" />
  63 + <col style="width: 75px;" />
  64 + <col style="width: 57px;" />
  65 + <col style="width: 60px;" />
  66 + </colgroup>
  67 + <tbody>
  68 + <tr>
  69 + <td> W9H108 </td>
  70 + <td> 13.143 </td>
  71 + <td> 82 </td>
  72 + <td>
  73 + <span class="label label-sm label-success"> 发送 </span>
  74 + </td>
  75 + <td> 16.00 </td>
  76 + <td> 4 </td>
  77 + </tr>
  78 + <tr>
  79 + <td> W9H108 </td>
  80 + <td> 13.143 </td>
  81 + <td> 82 </td>
  82 + <td>
  83 + <span class="label label-sm label-success"> 发送 </span>
  84 + </td>
  85 + <td> 16.00 </td>
  86 + <td> 4 </td>
  87 + </tr>
  88 + <tr>
  89 + <td> W9H108 </td>
  90 + <td> 13.14 </td>
  91 + <td> 82 </td>
  92 + <td>
  93 + <span class="label label-sm label-success"> 发送 </span>
  94 + </td>
  95 + <td> 16.00 </td>
  96 + <td> 4 </td>
  97 + </tr>
  98 + <tr>
  99 + <td> W9H108 </td>
  100 + <td> 13.14 </td>
  101 + <td> 82 </td>
  102 + <td>
  103 + <span class="label label-sm label-success"> 发送 </span>
  104 + </td>
  105 + <td> 16.00 </td>
  106 + <td> 4 </td>
  107 + </tr>
  108 + <tr>
  109 + <td> W9H108 </td>
  110 + <td> 13.14 </td>
  111 + <td> 82 </td>
  112 + <td>
  113 + <span class="label label-sm label-success"> 发送 </span>
  114 + </td>
  115 + <td> 16.00 </td>
  116 + <td> 4 </td>
  117 + </tr>
  118 + <tr>
  119 + <td> W9H108 </td>
  120 + <td> 13.14 </td>
  121 + <td> 82 </td>
  122 + <td>
  123 + <span class="label label-sm label-success"> 发送 </span>
  124 + </td>
  125 + <td> 16.00 </td>
  126 + <td> 4 </td>
  127 + </tr>
  128 + </tbody>
  129 + </table>
  130 + </div>
  131 + </div>
  132 + <div class="col-lg-8 line_chart " >
  133 + <div class="top">
  134 + <div class="center">
  135 + 778路当日计划配车：9<br>
  136 + 在运营：9&nbsp;场内：0
  137 + </div>
  138 + </div>
  139 + </div>
  140 + <div class="col-lg-2 z-depth-2 down" >
  141 +
  142 + <div class="title" >
  143 + 发往南公交枢纽站方向
  144 + <span class="badge" > 7 </span>
  145 + <span class="help_text">下行</span>
  146 + </div>
  147 + <table class="table table-striped table-bordered table-advance">
  148 + <colgroup>
  149 + <col style="width: 79px;" />
  150 + <col style="width: 78px;" />
  151 + <col style="width: 75px;" />
  152 + <col style="width: 57px;" />
  153 + <col style="width: 60px;" />
  154 + </colgroup>
  155 + <thead>
  156 + <tr>
  157 + <th> 车辆编码 </th>
  158 + <th> 终点距离 </th>
  159 + <th> 终点时间 </th>
  160 + <th> 指令 </th>
  161 + <th> 速度 </th>
  162 + <th> 路牌 </th>
  163 + </tr>
  164 + </thead>
  165 + </table>
  166 + <div class="table_wrap">
  167 + <table class="table table-striped table-bordered table-advance table-hover">
  168 + <colgroup>
  169 + <col style="width: 79px;" />
  170 + <col style="width: 78px;" />
  171 + <col style="width: 75px;" />
  172 + <col style="width: 57px;" />
  173 + <col style="width: 60px;" />
  174 + </colgroup>
  175 + <tbody>
  176 + <tr>
  177 + <td> W9H108 </td>
  178 + <td> 13.143 </td>
  179 + <td> 82 </td>
  180 + <td>
  181 + <span class="label label-sm label-success"> 发送 </span>
  182 + </td>
  183 + <td> 16.00 </td>
  184 + <td> 4 </td>
  185 + </tr>
  186 + <tr>
  187 + <td> W9H108 </td>
  188 + <td> 13.143 </td>
  189 + <td> 82 </td>
  190 + <td>
  191 + <span class="label label-sm label-success"> 发送 </span>
  192 + </td>
  193 + <td> 16.00 </td>
  194 + <td> 4 </td>
  195 + </tr>
  196 + <tr>
  197 + <td> W9H108 </td>
  198 + <td> 13.143 </td>
  199 + <td> 82 </td>
  200 + <td>
  201 + <span class="label label-sm label-success"> 发送 </span>
  202 + </td>
  203 + <td> 16.00 </td>
  204 + <td> 4 </td>
  205 + </tr>
  206 + <tr>
  207 + <td> W9H108 </td>
  208 + <td> 13.14 </td>
  209 + <td> 82 </td>
  210 + <td>
  211 + <span class="label label-sm label-success"> 发送 </span>
  212 + </td>
  213 + <td> 16.00 </td>
  214 + <td> 4 </td>
  215 + </tr>
  216 + <tr>
  217 + <td> W9H108 </td>
  218 + <td> 13.14 </td>
  219 + <td> 82 </td>
  220 + <td>
  221 + <span class="label label-sm label-success"> 发送 </span>
  222 + </td>
  223 + <td> 16.00 </td>
  224 + <td> 4 </td>
  225 + </tr>
  226 + </tbody>
  227 + </table>
  228 + </div>
  229 + </div>
  230 + </div>
  231 + </div>
  232 + <div class="tab-pane fade" id="tab_map">
  233 + 地图
  234 + </div>
  235 + <div class="tab-pane fade" id="tab_85">
  236 + 85路
  237 + </div>
  238 + <div class="tab-pane fade" id="tab_50">
  239 + 浦东50路
  240 + </div>
  241 + </div>
  242 + </div>
  243 +</div>
  244 +
  245 +<script>
  246 +$(function() {
  247 + // 关闭左侧栏
  248 + if (!$('body').hasClass('page-sidebar-closed'))
  249 + $('.menu-toggler.sidebar-toggler').click();
  250 +
  251 +
  252 + $('.card_wrap .table_wrap').slimscroll({
  253 + height: '187px',
  254 + alwaysVisible: true,
  255 + opacity: .8
  256 + });
  257 +
  258 + setTimeout(function(){
  259 + /**
  260 + type: 0 上行站点 1 下行站点 2 上下行共有 3 上下行共有（name不同）
  261 + */
  262 + var stations =
  263 + [{name: '张江地铁站', type:'2', id: 1}
  264 + , {name: '祖冲之路居里路aa', type:'1', id: 2}
  265 + , {name: '祖冲之路高斯路', type:'1', id: 3}
  266 + , {name: '祖冲之路张江路', type:'2', id: 4}
  267 + , {name: '紫薇路张江路', type:'2', id: 5}
  268 + , {name: '祖冲之路广兰路', type:'2', id: 6}
  269 + , {name: '申江路祖冲之路', type:'2', id: 7}
  270 + , {name: '申江路益丰路', type:'2', id: 8}
  271 + , {name: ['盛夏路益江路', '科苑路孙环路'], type:'3', id: [9, 10]}
  272 + , {name: '益江路盛夏路', type:'2', id: 11}
  273 + , {name: '张东路益江路', type:'2', id: 12}
  274 + , {name: '高科中路芳春路', type:'0', id: 13}
  275 + , {name: '唐安路唐镇路', type:'2', id: 14}
  276 + , {name: '唐安路唐兴路', type:'2', id: 15}
  277 + , {name: '创新西路唐安路', type:'2', id: 16}
  278 + , {name: '创新中路齐爱路', type:'2', id: 17}
  279 + , {name: '齐爱路南漕路', type: '2', id: 18}
  280 + , {name: '南漕路唐陆公路', type:'2', id: 19}
  281 + , {name: '蛀虫之路广兰路', type:'2', id: 20}
  282 + , {name: '上海火车站北广场', type:'2', id: 21}];
  283 +
  284 +
  285 + //svg start-----------------
  286 + //顶部距离
  287 + var mTop = 21;
  288 + //上下行之间高度
  289 + var h = 132;
  290 +
  291 + var svg = d3.select('.line_chart').append('svg').attr('width',
  292 + '100%');
  293 +
  294 + var upLine = d3.svg.line().x(function(d) {
  295 + return d.cx;
  296 + }).y(function(d) {
  297 + return mTop;
  298 + });
  299 +
  300 + var downLine = d3.svg.line().x(function(d) {
  301 + return d.cx;
  302 + }).y(function(d) {
  303 + return mTop + h;
  304 + });
  305 +
  306 + var circleClass = function(d, type, c){
  307 + if(d.type == type){
  308 + if(type == 1){
  309 + c = 'up-circle-none';
  310 + }
  311 + else{
  312 + c = 'down-circle-none';
  313 + }
  314 + }
  315 + return c;
  316 + }
  317 +
  318 + //横向比例尺 -根据svg的宽度平均分布站点
  319 + var xScale = d3.scale.linear().domain([ 0, stations.length ])
  320 + .range([ 50, $('.line_chart svg').width() + 5]);
  321 +
  322 + $.each(stations, function(i, d) {
  323 + d.cx = xScale(i);
  324 + });
  325 +
  326 + //上行线条
  327 + svg.append('g').selectAll('path').data(stations.slice(0, stations.length - 1))
  328 + .enter().append('path').attr('d', function(d, i) {
  329 + return upLine([ d, stations[i + 1] ]);
  330 + }).attr('class', 'up_path');
  331 +
  332 + //上行站点 外圆
  333 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  334 + .attr('cy', mTop)
  335 + .attr('class', function(d){return circleClass(d, 1, 'station_circle')})
  336 + .attr('cx', function(d, i) {
  337 + return d.cx;
  338 + });
  339 +
  340 + //上行站点 内圆
  341 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  342 + .attr('class', function(d){return circleClass(d, 1, 'up_station_circle_inside')})
  343 + .attr('cy', mTop)
  344 + .attr('id', function(d){
  345 + var id = d.id;
  346 + if(d.type == 3){
  347 + id = d.id[0];
  348 + }
  349 + return id;
  350 + })
  351 + .attr('cx', function(d, i) {
  352 + return d.cx;
  353 + });
  354 +
  355 + //下行线条
  356 + svg.append('g').selectAll('path')
  357 + .data(stations.slice(0, stations.length - 1)).enter()
  358 + .append('path').attr('d', function(d, i) {
  359 + return downLine([ d, stations[i + 1] ]);
  360 + }).attr('class', 'down_path');
  361 +
  362 + //下行站点 外圆
  363 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  364 + .attr('class', function(d){return circleClass(d, 0, 'station_circle')})
  365 + .attr('cy', mTop + h)
  366 + .attr('cx', function(d, i) {
  367 + return d.cx;
  368 + });
  369 + //下行站点 内圆
  370 + svg.append('g').selectAll('circle').data(stations).enter().append('circle')
  371 + .attr('class', function(d){return circleClass(d, 0, 'down_station_circle_inside')})
  372 + .attr('cy', mTop + h)
  373 + .attr('cx', function(d, i) {
  374 + return d.cx;
  375 + })
  376 + .attr('id', function(d){
  377 + var id = d.id;
  378 + if(d.type == 3){
  379 + id = d.id[1];
  380 + }
  381 + return id;
  382 + });
  383 +
  384 +
  385 + var line = d3.svg.line().x(function(d) {
  386 + return d.attr('cx');
  387 + }).y(function(d) {
  388 + return d.attr('cy');
  389 + });
  390 +
  391 + //左括号
  392 + svg.append('g').append('path')
  393 + .attr('d', function(){
  394 + var up = svg.select('.up_station_circle_inside')
  395 + ,down = svg.select('.down_station_circle_inside');
  396 +
  397 + var upX = parseInt(up.attr('cx')) -5
  398 + , upY = parseInt(up.attr('cy')) + 8
  399 + , downX = parseInt(down.attr('cx')) -5
  400 + , downY = parseInt(down.attr('cy')) -8
  401 + ,arc = (upX - 18);
  402 + return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
  403 + })
  404 + .attr('class', 'up_path')
  405 + .attr('fill', 'none');
  406 +
  407 + //右括号
  408 + svg.append('g').append('path')
  409 + .attr('d', function(){
  410 + var up = $('.up_station_circle_inside:last')
  411 + ,down = $('.down_station_circle_inside:last');
  412 +
  413 + var upX = parseInt(up.attr('cx')) +5
  414 + , upY = parseInt(up.attr('cy')) + 8
  415 + , downX = parseInt(down.attr('cx')) +5
  416 + , downY = parseInt(down.attr('cy')) -8
  417 + ,arc = (upX + 18);
  418 + return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
  419 + })
  420 + .attr('class', 'down_path')
  421 + .attr('fill', 'none');
  422 +
  423 +
  424 +
  425 + //文字
  426 + var getText = function(t){
  427 + if (t.length > 7) {
  428 + return t.substring(0, 7) + '·';
  429 + }
  430 + return t;
  431 + }
  432 + svg.append('g').selectAll('text').data(stations).enter()
  433 + .append('text')
  434 + .attr('y',
  435 + function(d, i) {
  436 + var t;
  437 + if(d.type == 3){
  438 + t = d.name[0];
  439 + }
  440 + else{
  441 + t = d.name;
  442 + }
  443 + return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
  444 + })
  445 + .attr('class', function(d, i){
  446 + var classz = 'station_text';
  447 + if(i == 0)
  448 + classz += ' start';
  449 + else if(i == stations.length - 1)
  450 + classz += ' end';
  451 + return classz;
  452 + })
  453 + .text(function(d){
  454 + if(d.type == 3){
  455 + $(this).attr('type', 3).attr('downName', d.name[1]);
  456 + return getText(d.name[0]);
  457 + }
  458 + return getText(d.name);
  459 + })
  460 + .attr('x', function(d, i) {
  461 + return xScale(i);
  462 + });
  463 +
  464 +
  465 + //上下行不同名修正
  466 + var lastG = svg.append('g');
  467 + $.each($('.station_text[type=3]'), function(i, obj){
  468 + var x = parseInt($(obj).attr('x'))
  469 + ,diff = 8;
  470 +
  471 + lastG.append('text')
  472 + .attr('y', $(obj).attr('y'))
  473 + .attr('class', 'station_text')
  474 + .attr('x', (x + diff))
  475 + .attr('fill', 'red')
  476 + .text($(obj).attr('downname'));
  477 +
  478 + $(obj).attr('fill', '#337AB7')
  479 + .removeAttr('type').removeAttr('downname')
  480 + .attr('x', x - diff);
  481 + });
  482 + }, 200);
  483 + });
  484 +</script>
3 485 \ No newline at end of file
... ...