Commit d7b0c884c72287f39208b8206ac3c9665a6461ef
1 parent
77e3dba7
线调布局v1
Showing
2 changed files
with
690 additions
and
1 deletions
src/main/resources/static/pages/control/line/css/lineControl.css
0 → 100644
| 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 | \ No newline at end of file | 208 | \ No newline at end of file |
src/main/resources/static/pages/control/line/index.html
| 1 | -aaa | ||
| 2 | \ No newline at end of file | 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 场内：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 | \ No newline at end of file | 485 | \ No newline at end of file |