潘钊 / bsth_control · Commits

Commit 1b93fa8d889f7d23ca96068b4f6210cdcf768f19

Authored by 潘钊
1 parent d7b0c884

线调布局v2

Inline Side-by-side
Showing 2 changed files with 901 additions and 111 deletions
src/main/resources/static/pages/control/line/css/lineControl.css
  View file @1b93fa8
  1 +.dropdown-menu {
  2 + background-color: rgba(76, 115, 142, 0.95);
  3 + border: 1px solid #4C738E;
  4 +}
  5 +
  6 +.portlet.light > .portlet-title > .actions .dropdown-menu li > a
  7 +,.dropdown-menu li > a{
  8 + color: #e7ecf1;
  9 +}
  10 +
  11 +.dropdown > .dropdown-menu:before, .dropdown-toggle > .dropdown-menu:before, .btn-group > .dropdown-menu:before{
  12 + border-bottom: 7px solid #4C738E;
  13 +}
  14 +
  15 +.dropdown > .dropdown-menu:after, .dropdown-toggle > .dropdown-menu:after, .btn-group > .dropdown-menu:after {
  16 + border-bottom: 7px solid #4C738E;
  17 +}
  18 +
  19 +.dropdown-menu > li > a:hover{
  20 + background: #799EB7;
  21 +}
  22 +
  23 +
  24 +.portlet-fullscreen .pagination>li>a, .pagination>li>span {
  25 + line-height: 1.82857;
  26 + font-family: 微软雅黑;
  27 + font-size: 16px;
  28 + height: 38px;
  29 + color: #555555;
  30 + background-color: #c5c8ce;
  31 + border-top: none;
  32 + border-bottom: none;
  33 +}
  34 +
  35 +.portlet-fullscreen .pagination>li>a:hover{
  36 + background-color: #eee;
  37 +}
  38 +
  39 +.portlet-fullscreen .pagination>li.head>a{
  40 + background: #3A5365;
  41 + color: #fdfdfd;
  42 + border: 1px solid #3A5365;
  43 + border-radius: 5px 0 0 5px !important;
  44 + margin-right: 2px;
  45 + cursor: default;
  46 +}
  47 +
  48 +.portlet-fullscreen .pagination>.active>a{
  49 + color: #236BA9;
  50 + background-color: #FFFFFF;
  51 + border-color: #FFFFFF;
  52 +}
  53 +
  54 +.portlet-fullscreen .pagination>.active>a:hover{
  55 + background-color: #FFFFFF;
  56 +}
  57 +
  58 +.portlet > .portlet-title > .actions > .btn-group > .btn{
  59 + padding: 7.5px 9px !important;
  60 +}
  61 +
  62 +.portlet.light > .portlet-title > .actions .btn.dropdown-toggle{
  63 + padding: 8.5px 9px !important;
  64 + font-size: 12px;
  65 +}
  66 +.table-striped>tbody>tr:nth-of-type(even) {
  67 + background-color: #eee;
  68 +}
  69 +
  70 +.portlet-fullscreen .nav-tabs>li.active>a{
  71 + color: #337AB7;
  72 + /* font-weight: bold; */
  73 +}
  74 +
  75 +.portlet-fullscreen .nav-tabs > li > a{
  76 + font-size: 16px;
  77 + color: #eee;
  78 + margin-right: 0px;
  79 + padding: 10px 5px;
  80 + border-right: none;
  81 + font-family: 微软雅黑;
  82 + border-bottom: 0;
  83 +}
  84 +
  85 +.portlet-fullscreen .nav-tabs > li > a>span{
  86 + color: #C3C3C3;
  87 + font-size: 12px;
  88 +}
  89 +
  90 +.portlet-fullscreen .nav-tabs > li > a:hover
  91 +,.portlet-fullscreen .nav-tabs > li > a:active{
  92 + border: none;
  93 + background: #0E5384;
  94 +}
  95 +
  96 +.portlet-fullscreen .nav-tabs>li.active>a>span{
  97 + color: #333;
  98 +}
  99 +
  100 +.portlet-fullscreen .nav-tabs>li.active>a{
  101 + background: #FFFFFF;
  102 + color: #0A3F64;
  103 + border: 1px solid #FFFFFF;
  104 + border-radius: 5px 5px 0 0 !important;
  105 +}
  106 +
  107 +.portlet-fullscreen .nav-tabs {
  108 + /* border-bottom: 1px solid #337AB7; */
  109 +}
  110 +
  111 +.portlet.light.portlet-fullscreen > .portlet-body {
  112 + padding: 0;
  113 + height: calc(100% - 54px);
  114 +}
  115 +
  116 +.tab-content .tab-content{
  117 + height: calc(100% - 50px);
  118 + overflow-y: auto;
  119 + overflow-x: hidden;
  120 +}
  121 +
1 122 .z-depth-1 {
2 123 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0
3 124 rgba(0, 0, 0, 0.12);
... ... @@ -36,11 +157,11 @@
36 157 min-width: 1910px;
37 158 }
38 159 .portlet-fullscreen .card_wrap .col-lg-2 {
39   - width: 21%
  160 + width: 19%
40 161 }
41 162 .portlet-fullscreen .card_wrap .col-lg-8 {
42   - width: 57.2684321%;
43   - margin: 0 7px 0 7px;
  163 + width: 61.8967%;
  164 + margin: 0 1px 0 1px;
44 165 }
45 166 }
46 167  
... ... @@ -49,26 +170,56 @@
49 170 text-align: center;
50 171 }
51 172  
  173 +.card_wrap .table-hover>tbody>tr:hover{
  174 + background-color: #F1EBD7;
  175 + cursor: pointer;
  176 +}
  177 +
52 178 .card_wrap .line_chart{
53 179 height: 100%;
54 180 padding: 0;
55 181 }
56 182  
57 183 .card_wrap .line_chart .top{
58   - height: 69px;
59   - background: #337AB7;
60   - border-radius: 5px 5px 0 0 !important;
  184 + height: 64px;
  185 + background: linear-gradient(to right, #5384B9, #5e96d2, #5384B9);
  186 + border: 1px solid #DADADA;
  187 +}
  188 +
  189 +.card_wrap .line_chart .top .center{
  190 + background: #FFFFFF;
  191 + height: 100%;
  192 + font-size: 15px;
  193 + color: #333;
  194 + padding: 10px 0px;
  195 + font-family: 微软雅黑;
  196 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  197 +}
  198 +
  199 +.card_wrap .line_chart .top .center strong{
  200 + color: #336BB7;
  201 + font-size: 18px;
  202 +}
  203 +
  204 +.card_wrap .line_chart .top .left
  205 +,.card_wrap .line_chart .top .right{
  206 + text-align: left;
  207 + height: 100%;
  208 + color: #E4E466;
  209 + padding: 13px 5px;
  210 + font-size: 15px;
61 211 }
62 212  
63 213 .card_wrap .col-lg-2{
64 214 height: 100%;
65   - overflow: hidden;
66   - padding: 0;
67   - border: 1px solid #337ab7;
  215 + /* overflow: hidden; */
  216 + padding: 0;
  217 + border: 1px solid #DADADA;
  218 + border-bottom: none;
68 219 }
69 220  
70 221 .card_wrap .col-lg-2 .table-advance thead tr th {
71   - font-size: 15px;
  222 + font-size: 13px;
72 223 font-family: 微软雅黑;
73 224 }
74 225  
... ... @@ -79,129 +230,122 @@
79 230 }
80 231  
81 232 .card_wrap .col-lg-2 .table td{
82   - font-size: 16px;
  233 + font-size: 14px;
83 234 font-family: 微软雅黑
84 235 }
85 236  
86 237 .card_wrap .col-lg-2.down{
87   - border: 1px solid #F36A5A;
  238 + /* border: 1px solid #F36A5A; */
88 239 }
89 240  
90 241 .card_wrap .col-lg-2 .title{
91 242 line-height: 40px;
92   - color: #fafafa;
93   - background: #337ab7;
  243 + color: #337ab7;
  244 + background: rgb(255, 255, 255);
94 245 font-size: 16px;
95 246 text-align: left;
96   - font-weight: bold;
97 247 padding-left: 10px;
  248 + font-family: 微软雅黑;
98 249 }
99 250  
100 251 .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;
  252 + float: right;
  253 + margin-right: 15px;
  254 + color: #666;
  255 + font-weight: 400;
  256 + font-size: 14px;
106 257 }
107 258  
108 259 .card_wrap .col-lg-2.down .title{
109   - background: #f36a5a;
  260 + color: #e43a45;
110 261 }
111 262  
112 263 .card_wrap .col-lg-2 .title .badge{
113   - border-radius: 12px !important;
  264 + border-radius: 12px !important;
114 265 padding: 0;
115 266 height: 24px;
116 267 font-size: 14px !important;
117 268 margin-left: 5px;
118 269 font-weight: bold;
119   - border: 1px solid white;
120   - background: #337AB7;
121   - width: 35px;
  270 + width: 25px;
122 271 line-height: 24px;
  272 + background: #999;
123 273 text-indent: -1px;
124 274 }
125 275  
126   -.card_wrap .col-lg-2.down .title .badge{
127   - background: #f36a5a;
128   -}
129   -
130 276 .row.card_wrap .table-advance {
131 277 margin-bottom: 0px !important;
132 278 }
133 279  
134 280 /* 上下行滚动条颜色 */
135 281 .row.card_wrap .slimScrollBar{
136   - background: #337ab7 !important;
  282 + background: rgba(51, 122, 183, 0.5) !important;
137 283 border-radius: 5px !important;
138 284 }
139 285  
140 286 .row.card_wrap .col-lg-2.down .slimScrollBar{
141   - background: #f36a5a !important;
  287 + background: rgba(243, 106, 90, 0.5) !important;
142 288 }
143 289  
144 290 .row.card_wrap {
145   - margin-left: 0;
146   - margin-right: 0;
147   - overflow-y: hidden;
148   - background: #eee;
  291 + margin-left: 0;
  292 + margin-right: 0;
  293 + overflow-y: hidden;
  294 + background: #fdfdfd;
  295 + margin-top: 5.8px;
  296 + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
149 297 }
150 298  
151 299 /* svg 样式 */
152 300 .line_chart svg{
153   - border: 1px solid #fdfdfd;
154 301 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 302 height: calc(100% - 70px);
  303 + margin: 18px 0 0 0;
160 304 }
161 305 .station_circle{
162   - fill: #e7ecf1;
  306 + fill: #FFFFFF;
163 307 r: 7.6;
164 308 }
165 309  
166 310 .up_station_circle_inside{
167   - fill: #337ab7;
  311 + fill: #5e96d2;
168 312 r: 5;
169 313 }
170 314  
171 315 .down_station_circle_inside{
172   - fill: #F36A5A;
  316 + fill: #c92121;
173 317 r: 5;
174 318 }
175 319  
176 320 .station_text{
177   - writing-mode: vertical-lr;
  321 + writing-mode: tb;
178 322 letter-spacing: -2.6px;
179 323 }
180 324  
181 325 .station_text.end{
182 326 fill: none;
183   - stroke: #F36A5A;
  327 + stroke: #c92121;
184 328 }
185 329  
186 330 .station_text.start{
187   - stroke: #337AB7;
  331 + stroke: #5e96d2;
188 332 fill: none;
189 333 }
190 334  
191 335 .up_path{
192 336 stroke-width: 7.4px;
193   - stroke: #337AB7;
  337 + stroke: #5e96d2;
194 338 }
195 339 .down_path{
196 340 stroke-width: 7.4px;
197   - stroke: #f36a5a;
  341 + stroke: #c92121;
198 342 }
199 343 .up-circle-none{
200   - fill: #337AB7;
  344 + fill: #5e96d2;
201 345 r: 3;
202 346 }
203 347  
204 348 .down-circle-none{
205   - fill: #F36A5A;
  349 + fill: #C92121;
206 350 r: 3;
207 351 }
208 352 \ No newline at end of file
... ...
src/main/resources/static/pages/control/line/index.html
  View file @1b93fa8
1 1 <link href="css/lineControl.css" rel="stylesheet" type="text/css" />
2   -<div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 12px 5px 15px 5px;">
3   - <div class="portlet-title" style="padding: 20px 20px 7px 20px;">
4   - <div class="caption" >
5   - <i class="fa fa-life-ring" style="font-size: 22px"></i> <span
  2 +<div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 0;">
  3 + <div class="portlet-title" style="padding: 17px 20px 0px 20px;border-bottom: none;margin-bottom: 0;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);padding-bottom: 5px;">
  4 + <div class="caption" style="color: #FFF;">
  5 + <i class="fa fa-life-ring" style="font-size: 22px;color: #FFF;"></i> <span
6 6 class="caption-subject bold" style="font-size: 24px;">线路调度系统</span>
7 7 </div>
8   - <div class="actions">
9   - <a class="btn btn-circle btn-icon-only btn-default fullscreen on" href="javascript:;" data-original-title="" title=""> </a>
  8 + <div style="color: white;font-size: 18px;position: absolute;right: 25px;top: 75px;">
  9 + panzhao，在线！
  10 + </div>
  11 + <div class="actions" >
  12 + <div class="btn-group">
  13 + <button type="button" class="btn btn-default">
  14 + <i class="fa fa-calendar-check-o"></i> 计划排班</button>
  15 + <button type="button" class="btn btn-default">
  16 + <i class="fa fa-history"></i> 轨迹回放</button>
  17 +
  18 + <div class="btn-group">
  19 + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  20 + <i class="fa fa-database"></i> 基本信息
  21 + <i class="fa fa-angle-down"></i>
  22 + </button>
  23 + <ul class="dropdown-menu">
  24 + <li>
  25 + <a href="javascript:;"> 人员信息 </a>
  26 + </li>
  27 + <li>
  28 + <a href="javascript:;"> 车辆信息 </a>
  29 + </li>
  30 + <li>
  31 + <a href="javascript:;"> 线路信息 </a>
  32 + </li>
  33 + <li>
  34 + <a href="javascript:;"> 线路标准信息 </a>
  35 + </li>
  36 + <li>
  37 + <a href="javascript:;"> 调度短语 </a>
  38 + </li>
  39 + </ul>
  40 + </div>
  41 +
  42 +
  43 + <div class="btn-group">
  44 + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  45 + <i class="fa fa-gavel"></i> 系统设置
  46 + <i class="fa fa-angle-down"></i>
  47 + </button>
  48 + <ul class="dropdown-menu">
  49 + <li>
  50 + <a href="javascript:;"> 缓冲区设置 </a>
  51 + </li>
  52 + <li>
  53 + <a href="javascript:;"> 发车屏通知 </a>
  54 + </li>
  55 + </ul>
  56 + </div>
  57 +
  58 + <button type="button" class="btn btn-danger" style="margin-left: 8px;padding: 6.5px 9px !important;">
  59 + <i class="fa fa-close"></i> 退出系统</button>
  60 + </div>
  61 + <!-- <a class="btn btn-circle btn-icon-only btn-default fullscreen on" href="javascript:;" data-original-title="" title=""> </a> -->
10 62 </div>
11 63 </div>
12   - <div class="portlet-body">
13   - <ul class="nav nav-tabs" style="margin-left: 15px;margin-bottom: 20px;">
14   - <li class="active"><a href="#tab_home" data-toggle="tab"
15   - aria-expanded="true"> 主页 </a></li>
16   - <li class=""><a href="#tab_map" data-toggle="tab"
  64 + <div class="portlet-body" style="padding: 0;height: calc(100% - 50px);">
  65 + <ul class="nav nav-tabs" style="margin-bottom: 1px;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);">
  66 + <li class="active">
  67 + <a href="#tab_home" data-toggle="tab" aria-expanded="true" style="padding: 10px 15px;">
  68 + <i class="fa fa-home"></i> 主页
  69 + </a>
  70 + </li>
  71 + <li class=""><a href="#tab_map" data-toggle="tab" style="padding: 10px 15px;"
17 72 aria-expanded="false"> 地图监控 </a></li>
18 73  
19 74  
20 75 <li class=""><a href="#tab_85" data-toggle="tab"
21   - aria-expanded="false"> 85路 </a></li>
  76 + aria-expanded="false"> 85路<span>（12, 5 托管）</span> </a></li>
  77 +
  78 +
  79 + <li class=""><a href="#tab_50" data-toggle="tab"
  80 + aria-expanded="false"> 浦东50路 <span>（0, 2 托管）</span></a></li>
  81 +
  82 + <li class=""><a href="#tab_85" data-toggle="tab"
  83 + aria-expanded="false"> 778路<span>（托管）</span> </a></li>
  84 +
  85 +
  86 + <li class=""><a href="#tab_50" data-toggle="tab"
  87 + aria-expanded="false"> 新川专线 <span>（托管）</span></a></li>
  88 +
  89 + <li class=""><a href="#tab_85" data-toggle="tab"
  90 + aria-expanded="false"> 上川专线<span>（0, 5 托管）</span> </a></li>
22 91  
23 92  
24 93 <li class=""><a href="#tab_50" data-toggle="tab"
25   - aria-expanded="false"> 浦东50路 </a></li>
  94 + aria-expanded="false"> 961路 <span>（0, 2 托管）</span></a></li>
  95 +
  96 + <li class=""><a href="#tab_85" data-toggle="tab"
  97 + aria-expanded="false"> 977路<span>（12, 5 托管）</span> </a></li>
  98 +
  99 +
  100 + <li class=""><a href="#tab_50" data-toggle="tab"
  101 + aria-expanded="false"> 张江1路 <span>（0, 2 托管）</span></a></li>
26 102 </ul>
27 103  
28   - <div class="tab-content">
29   - <div class="tab-pane fade active in z-depth-1" id="tab_home" >
30   - <div class="row card_wrap" >
31   - <div class="col-lg-2 z-depth-2" >
  104 + <div class="tab-content" style="padding: 5px;">
  105 + <div class="tab-pane fade active in" id="tab_home" >
  106 + <div class="row card_wrap" style="margin-top: 0px;">
  107 + <div class="col-lg-2 " >
32 108  
33 109 <div class="title">
34 110 发往川沙客运站方向
35 111 <span class="badge" > 13 </span>
36   - <span class="help_text">上行</span>
  112 + <div class="help_text dropdown">
  113 + <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
  114 + <i class="fa fa-ellipsis-horizontal"></i> 上行全部
  115 + <i class="fa fa-angle-down"></i>
  116 + </span>
  117 + <ul class="dropdown-menu">
  118 + <li>
  119 + <a href="javascript:;"> 上行全部 </a>
  120 + </li>
  121 + <li>
  122 + <a href="javascript:;"> 上行停靠 </a>
  123 + </li>
  124 + <li>
  125 + <a href="javascript:;"> 上行在途 </a>
  126 + </li>
  127 + <li role="separator" class="divider"></li>
  128 + <li>
  129 + <a href="javascript:;"> 场内车辆 </a>
  130 + </li>
  131 + <li>
  132 + <a href="javascript:;"> 非营运车辆</a>
  133 + </li>
  134 + </ul>
  135 +
  136 + </div>
37 137 </div>
38   - <table class="table table-striped table-bordered table-advance">
39   - <colgroup>
40   - <col style="width: 79px;" />
41   - <col style="width: 78px;" />
42   - <col style="width: 75px;" />
43   - <col style="width: 57px;" />
44   - <col style="width: 60px;" />
  138 + <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
  139 + <colgroup>
  140 + <col style="width: 20%;">
  141 + <col style="width: 19%;">
  142 + <col style="width: 20%;">
  143 + <col style="width: 14%;">
  144 + <col style="width: 14%;">
  145 +
45 146 </colgroup>
46 147 <thead>
47 148 <tr>
... ... @@ -55,13 +156,14 @@
55 156 </thead>
56 157 </table>
57 158 <div class="table_wrap">
58   - <table class="table table-striped table-bordered table-advance table-hover">
  159 + <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
59 160 <colgroup>
60   - <col style="width: 79px;" />
61   - <col style="width: 78px;" />
62   - <col style="width: 75px;" />
63   - <col style="width: 57px;" />
64   - <col style="width: 60px;" />
  161 + <col style="width: 20%;">
  162 + <col style="width: 19%;">
  163 + <col style="width: 20%;">
  164 + <col style="width: 14%;">
  165 + <col style="width: 14%;">
  166 +
65 167 </colgroup>
66 168 <tbody>
67 169 <tr>
... ... @@ -69,11 +171,152 @@
69 171 <td> 13.143 </td>
70 172 <td> 82 </td>
71 173 <td>
  174 + </td>
  175 + <td> 16.00 </td>
  176 + <td> 4 </td>
  177 + </tr>
  178 + <tr>
  179 + <td> W9H108 </td>
  180 + <td> 13.143 </td>
  181 + <td> 82 </td>
  182 + <td>
  183 + </td>
  184 + <td> 16.00 </td>
  185 + <td> 4 </td>
  186 + </tr>
  187 + <tr>
  188 + <td> W9H108 </td>
  189 + <td> 13.143 </td>
  190 + <td> 82 </td>
  191 + <td>
  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 + </td>
  202 + <td> 16.00 </td>
  203 + <td> 4 </td>
  204 + </tr>
  205 + <tr>
  206 + <td> W9H108 </td>
  207 + <td> 13.143 </td>
  208 + <td> 82 </td>
  209 + <td>
  210 + </td>
  211 + <td> 16.00 </td>
  212 + <td> 4 </td>
  213 + </tr>
  214 + <tr>
  215 + <td> W9H108 </td>
  216 + <td> 13.143 </td>
  217 + <td> 82 </td>
  218 + <td>
72 219 <span class="label label-sm label-success"> 发送 </span>
73 220 </td>
74 221 <td> 16.00 </td>
75 222 <td> 4 </td>
76 223 </tr>
  224 + </tbody>
  225 + </table>
  226 + </div>
  227 + </div>
  228 + <div class="col-lg-8 line_chart " >
  229 + <div class="top">
  230 + <div class="left col-md-5">
  231 + <div class="top-remark">
  232 + 应发未发：0 &nbsp;[05:20, 07:10]<br>
  233 + 待发班次：35 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55]
  234 + </div>
  235 + </div>
  236 + <div class="center col-md-2">
  237 + <strong>778路</strong> 计划配车：9<br>
  238 + 在运营：9&nbsp;场内：0
  239 + </div>
  240 + <div class="right col-md-5">
  241 + <div class="top-remark">
  242 + 应发未发：0 &nbsp;[05:20, 07:10]<br>
  243 + 待发班次：40 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
  244 + </div>
  245 + </div>
  246 + </div>
  247 + </div>
  248 + <div class="col-lg-2 down" >
  249 +
  250 + <div class="title" >
  251 + 发往南公交枢纽站方向
  252 + <span class="badge" > 7 </span>
  253 + <div class="help_text dropdown">
  254 + <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
  255 + <i class="fa fa-ellipsis-horizontal"></i> 下行全部
  256 + <i class="fa fa-angle-down"></i>
  257 + </span>
  258 + <ul class="dropdown-menu pull-right">
  259 + <li>
  260 + <a href="javascript:;"> 下行全部 </a>
  261 + </li>
  262 + <li>
  263 + <a href="javascript:;"> 下行停靠 </a>
  264 + </li>
  265 + <li>
  266 + <a href="javascript:;"> 下行在途 </a>
  267 + </li>
  268 + </ul>
  269 + </div>
  270 + </div>
  271 + <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
  272 + <colgroup>
  273 + <col style="width: 20%;">
  274 + <col style="width: 19%;">
  275 + <col style="width: 20%;">
  276 + <col style="width: 14%;">
  277 + <col style="width: 14%;">
  278 +
  279 + </colgroup>
  280 + <thead>
  281 + <tr>
  282 + <th> 车辆编码 </th>
  283 + <th> 终点距离 </th>
  284 + <th> 终点时间 </th>
  285 + <th> 指令 </th>
  286 + <th> 速度 </th>
  287 + <th> 路牌 </th>
  288 + </tr>
  289 + </thead>
  290 + </table>
  291 + <div class="table_wrap">
  292 + <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
  293 + <colgroup>
  294 + <col style="width: 20%;">
  295 + <col style="width: 19%;">
  296 + <col style="width: 20%;">
  297 + <col style="width: 14%;">
  298 + <col style="width: 14%;">
  299 +
  300 + </colgroup>
  301 + <tbody>
  302 + <tr>
  303 + <td> W9H108 </td>
  304 + <td> 13.143 </td>
  305 + <td> 82 </td>
  306 + <td>
  307 + </td>
  308 + <td> 16.00 </td>
  309 + <td> 4 </td>
  310 + </tr>
  311 + <tr>
  312 + <td> W9H108 </td>
  313 + <td> 13.143 </td>
  314 + <td> 82 </td>
  315 + <td>
  316 + </td>
  317 + <td> 16.00 </td>
  318 + <td> 4 </td>
  319 + </tr>
77 320 <tr>
78 321 <td> W9H108 </td>
79 322 <td> 13.143 </td>
... ... @@ -84,12 +327,116 @@
84 327 <td> 16.00 </td>
85 328 <td> 4 </td>
86 329 </tr>
  330 + <tr>
  331 + <td> W9H108 </td>
  332 + <td> 13.14 </td>
  333 + <td> 82 </td>
  334 + <td>
  335 + </td>
  336 + <td> 16.00 </td>
  337 + <td> 4 </td>
  338 + </tr>
  339 + <tr>
  340 + <td> W9H108 </td>
  341 + <td> 13.14 </td>
  342 + <td> 82 </td>
  343 + <td>
  344 + </td>
  345 + <td> 16.00 </td>
  346 + <td> 4 </td>
  347 + </tr>
  348 + </tbody>
  349 + </table>
  350 + </div>
  351 + </div>
  352 + </div>
  353 +
  354 + <div class="row card_wrap" >
  355 + <div class="col-lg-2 " >
  356 +
  357 + <div class="title">
  358 + 发往川沙客运站方向
  359 + <span class="badge" > 13 </span>
  360 + <div class="help_text dropdown">
  361 + <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
  362 + <i class="fa fa-ellipsis-horizontal"></i> 上行全部
  363 + <i class="fa fa-angle-down"></i>
  364 + </span>
  365 + <ul class="dropdown-menu">
  366 + <li>
  367 + <a href="javascript:;"> 上行全部 </a>
  368 + </li>
  369 + <li>
  370 + <a href="javascript:;"> 上行停靠 </a>
  371 + </li>
  372 + <li>
  373 + <a href="javascript:;"> 上行在途 </a>
  374 + </li>
  375 + <li role="separator" class="divider"></li>
  376 + <li>
  377 + <a href="javascript:;"> 场内车辆 </a>
  378 + </li>
  379 + <li>
  380 + <a href="javascript:;"> 非营运车辆</a>
  381 + </li>
  382 + </ul>
  383 +
  384 + </div>
  385 + </div>
  386 + <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
  387 + <colgroup>
  388 + <col style="width: 20%;">
  389 + <col style="width: 19%;">
  390 + <col style="width: 20%;">
  391 + <col style="width: 14%;">
  392 + <col style="width: 14%;">
  393 +
  394 + </colgroup>
  395 + <thead>
  396 + <tr>
  397 + <th> 车辆编码 </th>
  398 + <th> 终点距离 </th>
  399 + <th> 终点时间 </th>
  400 + <th> 指令 </th>
  401 + <th> 速度 </th>
  402 + <th> 路牌 </th>
  403 + </tr>
  404 + </thead>
  405 + </table>
  406 + <div class="table_wrap">
  407 + <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
  408 + <colgroup>
  409 + <col style="width: 20%;">
  410 + <col style="width: 19%;">
  411 + <col style="width: 20%;">
  412 + <col style="width: 14%;">
  413 + <col style="width: 14%;">
  414 +
  415 + </colgroup>
  416 + <tbody>
  417 + <tr>
  418 + <td> W9H108 </td>
  419 + <td> 13.143 </td>
  420 + <td> 82 </td>
  421 + <td>
  422 + </td>
  423 + <td> 16.00 </td>
  424 + <td> 4 </td>
  425 + </tr>
  426 + <tr>
  427 + <td> W9H108 </td>
  428 + <td> 13.143 </td>
  429 + <td> 82 </td>
  430 + <td>
  431 + </td>
  432 + <td> 16.00 </td>
  433 + <td> 4 </td>
  434 + </tr>
87 435 <tr>
88 436 <td> W9H108 </td>
89 437 <td> 13.14 </td>
90 438 <td> 82 </td>
91 439 <td>
92   - <span class="label label-sm label-success"> 发送 </span>
93 440 </td>
94 441 <td> 16.00 </td>
95 442 <td> 4 </td>
... ... @@ -99,7 +446,6 @@
99 446 <td> 13.14 </td>
100 447 <td> 82 </td>
101 448 <td>
102   - <span class="label label-sm label-success"> 发送 </span>
103 449 </td>
104 450 <td> 16.00 </td>
105 451 <td> 4 </td>
... ... @@ -109,7 +455,6 @@
109 455 <td> 13.14 </td>
110 456 <td> 82 </td>
111 457 <td>
112   - <span class="label label-sm label-success"> 发送 </span>
113 458 </td>
114 459 <td> 16.00 </td>
115 460 <td> 4 </td>
... ... @@ -119,38 +464,312 @@
119 464 <td> 13.14 </td>
120 465 <td> 82 </td>
121 466 <td>
  467 + </td>
  468 + <td> 16.00 </td>
  469 + <td> 4 </td>
  470 + </tr>
  471 + </tbody>
  472 + </table>
  473 + </div>
  474 + </div>
  475 + <div class="col-lg-8 line_chart " >
  476 + <div class="top">
  477 + <div class="left col-md-5">
  478 + <div class="top-remark">
  479 + 应发未发：0 &nbsp;[05:20, 07:10]<br>
  480 + 待发班次：45 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
  481 + </div>
  482 + </div>
  483 + <div class="center col-md-2">
  484 + <strong>1052路</strong> 计划配车：9<br>
  485 + 在运营：9&nbsp;场内：0
  486 + </div>
  487 + <div class="right col-md-5">
  488 + <div class="top-remark">
  489 + 应发未发：1 &nbsp;[05:20, 07:10]<br>
  490 + 待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
  491 + </div>
  492 + </div>
  493 + </div>
  494 + </div>
  495 + <div class="col-lg-2 down" >
  496 +
  497 + <div class="title" >
  498 + 发往南公交枢纽站方向
  499 + <span class="badge" > 7 </span>
  500 + <div class="help_text dropdown">
  501 + <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
  502 + <i class="fa fa-ellipsis-horizontal"></i> 下行全部
  503 + <i class="fa fa-angle-down"></i>
  504 + </span>
  505 + <ul class="dropdown-menu pull-right">
  506 + <li>
  507 + <a href="javascript:;"> 下行全部 </a>
  508 + </li>
  509 + <li>
  510 + <a href="javascript:;"> 下行停靠 </a>
  511 + </li>
  512 + <li>
  513 + <a href="javascript:;"> 下行在途 </a>
  514 + </li>
  515 + </ul>
  516 + </div>
  517 + </div>
  518 + <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
  519 + <colgroup>
  520 + <col style="width: 20%;">
  521 + <col style="width: 19%;">
  522 + <col style="width: 20%;">
  523 + <col style="width: 14%;">
  524 + <col style="width: 14%;">
  525 +
  526 + </colgroup>
  527 + <thead>
  528 + <tr>
  529 + <th> 车辆编码 </th>
  530 + <th> 终点距离 </th>
  531 + <th> 终点时间 </th>
  532 + <th> 指令 </th>
  533 + <th> 速度 </th>
  534 + <th> 路牌 </th>
  535 + </tr>
  536 + </thead>
  537 + </table>
  538 + <div class="table_wrap">
  539 + <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
  540 + <colgroup>
  541 + <col style="width: 20%;">
  542 + <col style="width: 19%;">
  543 + <col style="width: 20%;">
  544 + <col style="width: 14%;">
  545 + <col style="width: 14%;">
  546 +
  547 + </colgroup>
  548 + <tbody>
  549 + <tr>
  550 + <td> W9H108 </td>
  551 + <td> 13.143 </td>
  552 + <td> 82 </td>
  553 + <td>
  554 + </td>
  555 + <td> 16.00 </td>
  556 + <td> 4 </td>
  557 + </tr>
  558 + <tr>
  559 + <td> W9H108 </td>
  560 + <td> 13.143 </td>
  561 + <td> 82 </td>
  562 + <td>
122 563 <span class="label label-sm label-success"> 发送 </span>
123 564 </td>
124 565 <td> 16.00 </td>
125 566 <td> 4 </td>
126 567 </tr>
  568 + <tr>
  569 + <td> W9H108 </td>
  570 + <td> 13.143 </td>
  571 + <td> 82 </td>
  572 + <td>
  573 + </td>
  574 + <td> 16.00 </td>
  575 + <td> 4 </td>
  576 + </tr>
  577 + <tr>
  578 + <td> W9H108 </td>
  579 + <td> 13.14 </td>
  580 + <td> 82 </td>
  581 + <td>
  582 + </td>
  583 + <td> 16.00 </td>
  584 + <td> 4 </td>
  585 + </tr>
  586 + <tr>
  587 + <td> W9H108 </td>
  588 + <td> 13.14 </td>
  589 + <td> 82 </td>
  590 + <td>
  591 + </td>
  592 + <td> 16.00 </td>
  593 + <td> 4 </td>
  594 + </tr>
  595 + </tbody>
  596 + </table>
  597 + </div>
  598 + </div>
  599 + </div>
  600 + <div class="row card_wrap" >
  601 + <div class="col-lg-2 " >
  602 +
  603 + <div class="title">
  604 + 发往川沙客运站方向
  605 + <span class="badge" > 13 </span>
  606 + <div class="help_text dropdown">
  607 + <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
  608 + <i class="fa fa-ellipsis-horizontal"></i> 上行全部
  609 + <i class="fa fa-angle-down"></i>
  610 + </span>
  611 + <ul class="dropdown-menu">
  612 + <li>
  613 + <a href="javascript:;"> 上行全部 </a>
  614 + </li>
  615 + <li>
  616 + <a href="javascript:;"> 上行停靠 </a>
  617 + </li>
  618 + <li>
  619 + <a href="javascript:;"> 上行在途 </a>
  620 + </li>
  621 + <li role="separator" class="divider"></li>
  622 + <li>
  623 + <a href="javascript:;"> 场内车辆 </a>
  624 + </li>
  625 + <li>
  626 + <a href="javascript:;"> 非营运车辆</a>
  627 + </li>
  628 + </ul>
  629 +
  630 + </div>
  631 + </div>
  632 + <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
  633 + <colgroup>
  634 + <col style="width: 20%;">
  635 + <col style="width: 19%;">
  636 + <col style="width: 20%;">
  637 + <col style="width: 14%;">
  638 + <col style="width: 14%;">
  639 +
  640 + </colgroup>
  641 + <thead>
  642 + <tr>
  643 + <th> 车辆编码 </th>
  644 + <th> 终点距离 </th>
  645 + <th> 终点时间 </th>
  646 + <th> 指令 </th>
  647 + <th> 速度 </th>
  648 + <th> 路牌 </th>
  649 + </tr>
  650 + </thead>
  651 + </table>
  652 + <div class="table_wrap">
  653 + <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
  654 + <colgroup>
  655 + <col style="width: 20%;">
  656 + <col style="width: 19%;">
  657 + <col style="width: 20%;">
  658 + <col style="width: 14%;">
  659 + <col style="width: 14%;">
  660 +
  661 + </colgroup>
  662 + <tbody>
  663 + <tr>
  664 + <td> W9H108 </td>
  665 + <td> 13.143 </td>
  666 + <td> 82 </td>
  667 + <td>
  668 + </td>
  669 + <td> 16.00 </td>
  670 + <td> 4 </td>
  671 + </tr>
  672 + <tr>
  673 + <td> W9H108 </td>
  674 + <td> 13.143 </td>
  675 + <td> 82 </td>
  676 + <td>
  677 + </td>
  678 + <td> 16.00 </td>
  679 + <td> 4 </td>
  680 + </tr>
  681 + <tr>
  682 + <td> W9H108 </td>
  683 + <td> 13.14 </td>
  684 + <td> 82 </td>
  685 + <td>
  686 + </td>
  687 + <td> 16.00 </td>
  688 + <td> 4 </td>
  689 + </tr>
  690 + <tr>
  691 + <td> W9H108 </td>
  692 + <td> 13.14 </td>
  693 + <td> 82 </td>
  694 + <td>
  695 + </td>
  696 + <td> 16.00 </td>
  697 + <td> 4 </td>
  698 + </tr>
  699 + <tr>
  700 + <td> W9H108 </td>
  701 + <td> 13.14 </td>
  702 + <td> 82 </td>
  703 + <td>
  704 + </td>
  705 + <td> 16.00 </td>
  706 + <td> 4 </td>
  707 + </tr>
  708 + <tr>
  709 + <td> W9H108 </td>
  710 + <td> 13.14 </td>
  711 + <td> 82 </td>
  712 + <td>
  713 + </td>
  714 + <td> 16.00 </td>
  715 + <td> 4 </td>
  716 + </tr>
127 717 </tbody>
128 718 </table>
129 719 </div>
130 720 </div>
131 721 <div class="col-lg-8 line_chart " >
132 722 <div class="top">
133   - <div class="center">
134   - 778路当日计划配车：9<br>
  723 + <div class="left col-md-5">
  724 + <div class="top-remark">
  725 + 应发未发：4 &nbsp;[05:20, 07:10]<br>
  726 + 待发班次：44 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
  727 + </div>
  728 + </div>
  729 + <div class="center col-md-2">
  730 + <strong>新川专线</strong> 计划配车：9<br>
135 731 在运营：9&nbsp;场内：0
136 732 </div>
  733 + <div class="right col-md-5">
  734 + <div class="top-remark">
  735 + 应发未发：0&nbsp;[05:20, 07:10]<br>
  736 + 待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
  737 + </div>
  738 + </div>
137 739 </div>
138 740 </div>
139   - <div class="col-lg-2 z-depth-2 down" >
  741 + <div class="col-lg-2 down" >
140 742  
141 743 <div class="title" >
142 744 发往南公交枢纽站方向
143 745 <span class="badge" > 7 </span>
144   - <span class="help_text">下行</span>
  746 + <div class="help_text dropdown">
  747 + <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
  748 + <i class="fa fa-ellipsis-horizontal"></i> 下行全部
  749 + <i class="fa fa-angle-down"></i>
  750 + </span>
  751 + <ul class="dropdown-menu pull-right">
  752 + <li>
  753 + <a href="javascript:;"> 下行全部 </a>
  754 + </li>
  755 + <li>
  756 + <a href="javascript:;"> 下行停靠 </a>
  757 + </li>
  758 + <li>
  759 + <a href="javascript:;"> 下行在途 </a>
  760 + </li>
  761 + </ul>
  762 + </div>
145 763 </div>
146   - <table class="table table-striped table-bordered table-advance">
  764 + <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
147 765 <colgroup>
148   - <col style="width: 79px;" />
149   - <col style="width: 78px;" />
150   - <col style="width: 75px;" />
151   - <col style="width: 57px;" />
152   - <col style="width: 60px;" />
153   - </colgroup>
  766 + <col style="width: 20%;">
  767 + <col style="width: 19%;">
  768 + <col style="width: 20%;">
  769 + <col style="width: 14%;">
  770 + <col style="width: 14%;">
  771 +
  772 + </colgroup>
154 773 <thead>
155 774 <tr>
156 775 <th> 车辆编码 </th>
... ... @@ -163,13 +782,14 @@
163 782 </thead>
164 783 </table>
165 784 <div class="table_wrap">
166   - <table class="table table-striped table-bordered table-advance table-hover">
  785 + <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
167 786 <colgroup>
168   - <col style="width: 79px;" />
169   - <col style="width: 78px;" />
170   - <col style="width: 75px;" />
171   - <col style="width: 57px;" />
172   - <col style="width: 60px;" />
  787 + <col style="width: 20%;">
  788 + <col style="width: 19%;">
  789 + <col style="width: 20%;">
  790 + <col style="width: 14%;">
  791 + <col style="width: 14%;">
  792 +
173 793 </colgroup>
174 794 <tbody>
175 795 <tr>
... ... @@ -177,7 +797,6 @@
177 797 <td> 13.143 </td>
178 798 <td> 82 </td>
179 799 <td>
180   - <span class="label label-sm label-success"> 发送 </span>
181 800 </td>
182 801 <td> 16.00 </td>
183 802 <td> 4 </td>
... ... @@ -187,7 +806,6 @@
187 806 <td> 13.143 </td>
188 807 <td> 82 </td>
189 808 <td>
190   - <span class="label label-sm label-success"> 发送 </span>
191 809 </td>
192 810 <td> 16.00 </td>
193 811 <td> 4 </td>
... ... @@ -217,7 +835,6 @@
217 835 <td> 13.14 </td>
218 836 <td> 82 </td>
219 837 <td>
220   - <span class="label label-sm label-success"> 发送 </span>
221 838 </td>
222 839 <td> 16.00 </td>
223 840 <td> 4 </td>
... ... @@ -227,6 +844,21 @@
227 844 </div>
228 845 </div>
229 846 </div>
  847 + <div style="width: 100%;position: absolute;left: 0;height: 40px;bottom: 0;background: linear-gradient(to right, #c5c8ce, #E4E7EC);">
  848 + <ul class="pagination" style="visibility: visible;float: left;margin-top: 2px;">
  849 + <!-- <li class="head">
  850 + <a>分页</a>
  851 + </li> -->
  852 + <li class="active"><a href="#"><i class="fa fa-check"></i> 778，1052，新川专线</a></li>
  853 + <li><a href="#">85，785，陆家嘴金融城3路</a></li>
  854 + <li><a href="#">961，1047，张江1路</a></li>
  855 + </ul>
  856 +
  857 + <div style="float: right;line-height: 40px;margin-right: 20px;font-family: 微软雅黑;">
  858 + <!-- 当前用户：panzhao -->
  859 + <span style="color: #17589E;margin-left: 40px;">已成功连接服务器</span>
  860 + </div>
  861 + </div>
230 862 </div>
231 863 <div class="tab-pane fade" id="tab_map">
232 864 地图
... ... @@ -243,10 +875,11 @@
243 875  
244 876 <script>
245 877 $(function() {
  878 +
246 879 // 关闭左侧栏
247   - if (!$('body').hasClass('page-sidebar-closed'))
  880 +/* if (!$('body').hasClass('page-sidebar-closed'))
248 881 $('.menu-toggler.sidebar-toggler').click();
249   -
  882 + */
250 883  
251 884 $('.card_wrap .table_wrap').slimscroll({
252 885 height: '187px',
... ... @@ -254,6 +887,17 @@ $(function() {
254 887 opacity: .8
255 888 });
256 889  
  890 + $('.line_chart .top .top-remark').slimscroll({
  891 + height: '47px'
  892 + });
  893 +
  894 +/* var h = $(document.body).height() - 63;
  895 + alert(h);
  896 + $('#tab_home').slimscroll({
  897 + height: h + 'px' ,
  898 + alwaysVisible: true
  899 + }); */
  900 +
257 901 setTimeout(function(){
258 902 /**
259 903 type: 0 上行站点 1 下行站点 2 上下行共有 3 上下行共有（name不同）
... ... @@ -287,7 +931,7 @@ $(function() {
287 931 //上下行之间高度
288 932 var h = 132;
289 933  
290   - var svg = d3.select('.line_chart').append('svg').attr('width',
  934 + var svg = d3.selectAll('.line_chart').append('svg').attr('width',
291 935 '100%');
292 936  
293 937 var upLine = d3.svg.line().x(function(d) {
... ... @@ -315,15 +959,17 @@ $(function() {
315 959 }
316 960  
317 961 //横向比例尺 -根据svg的宽度平均分布站点
318   - var xScale = d3.scale.linear().domain([ 0, stations.length ])
319   - .range([ 50, $('.line_chart svg').width() + 5]);
  962 + var dLen = stations.length
  963 + ,indent = $('svg').width() / 12 - (dLen * 2) - 6;
  964 + var xScale = d3.scale.linear().domain([ 0, dLen])
  965 + .range([ indent, $('.line_chart svg').width()]);
320 966  
321 967 $.each(stations, function(i, d) {
322 968 d.cx = xScale(i);
323 969 });
324 970  
325 971 //上行线条
326   - svg.append('g').selectAll('path').data(stations.slice(0, stations.length - 1))
  972 + svg.append('g').selectAll('path').data(stations.slice(0, dLen - 1))
327 973 .enter().append('path').attr('d', function(d, i) {
328 974 return upLine([ d, stations[i + 1] ]);
329 975 }).attr('class', 'up_path');
... ... @@ -353,7 +999,7 @@ $(function() {
353 999  
354 1000 //下行线条
355 1001 svg.append('g').selectAll('path')
356   - .data(stations.slice(0, stations.length - 1)).enter()
  1002 + .data(stations.slice(0, dLen - 1)).enter()
357 1003 .append('path').attr('d', function(d, i) {
358 1004 return downLine([ d, stations[i + 1] ]);
359 1005 }).attr('class', 'down_path');
... ...