潘钊 / bsth_control · Files

<link href="css/lineControl.css" rel="stylesheet" type="text/css" />
<div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 0;">
    <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;">
        <div class="caption" style="color: #FFF;">
			<i class="fa fa-life-ring" style="font-size: 22px;color: #FFF;"></i> <span
				class="caption-subject bold" style="font-size: 24px;">线路调度系统</span>
		</div>
		<div style="color: white;font-size: 18px;position: absolute;right: 25px;top: 75px;">
			panzhao，在线！ 
		</div>
        <div class="actions" >
	        <div class="btn-group">
	              <button type="button" class="btn btn-default">
	                  <i class="fa fa-calendar-check-o"></i> 计划排班</button>
	              <button type="button" class="btn btn-default">
	                  <i class="fa fa-history"></i> 轨迹回放</button>
	              
	              <div class="btn-group">
	                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	                      <i class="fa fa-database"></i> 基本信息
	                      <i class="fa fa-angle-down"></i>
	                  </button>
	                  <ul class="dropdown-menu">
	                      <li>
	                          <a href="javascript:;"> 人员信息 </a>
	                      </li>
	                      <li>
	                          <a href="javascript:;"> 车辆信息 </a>
	                      </li>
	                      <li>
	                          <a href="javascript:;"> 线路信息 </a>
	                      </li>
	                      <li>
	                          <a href="javascript:;"> 线路标准信息 </a>
	                      </li>
	                      <li>
	                          <a href="javascript:;"> 调度短语 </a>
	                      </li>
	                  </ul>
	               </div>
	              
	              
	              <div class="btn-group">
	                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	                      <i class="fa fa-gavel"></i> 系统设置
	                      <i class="fa fa-angle-down"></i>
	                  </button>
	                  <ul class="dropdown-menu">
	                      <li>
	                          <a href="javascript:;"> 缓冲区设置 </a>
	                      </li>
	                      <li>
	                          <a href="javascript:;"> 发车屏通知 </a>
	                      </li>
	                  </ul>
	              </div>
	              
	              	<button type="button" class="btn btn-danger" style="margin-left: 8px;padding: 6.5px 9px !important;">
	                  <i class="fa fa-close"></i> 退出系统</button>
	          </div>
            <!-- <a class="btn btn-circle btn-icon-only btn-default fullscreen on" href="javascript:;" data-original-title="" title=""> </a> -->
        </div>
    </div>
    <div class="portlet-body" style="padding: 0;height: calc(100% - 50px);">
		<ul class="nav nav-tabs" style="margin-bottom: 1px;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);">
			<li class="active">
				<a href="#tab_home" data-toggle="tab" aria-expanded="true" style="padding: 10px 15px;"> 
					<i class="fa fa-home"></i> 主页 
				</a>
			</li>
			<li class=""><a href="#tab_map" data-toggle="tab" style="padding: 10px 15px;"
				aria-expanded="false"> 地图监控 </a></li>
				
				
			<li class=""><a href="#tab_85" data-toggle="tab"
				aria-expanded="false"> 85路<span>（12, 5 托管）</span> </a></li>
				
			
			<li class=""><a href="#tab_50" data-toggle="tab"
				aria-expanded="false"> 浦东50路 <span>（0, 2 托管）</span></a></li>
					
			<li class=""><a href="#tab_85" data-toggle="tab"
				aria-expanded="false"> 778路<span>（托管）</span> </a></li>
				
			
			<li class=""><a href="#tab_50" data-toggle="tab"
				aria-expanded="false"> 新川专线 <span>（托管）</span></a></li>	
				
			<li class=""><a href="#tab_85" data-toggle="tab"
				aria-expanded="false"> 上川专线<span>（0, 5 托管）</span> </a></li>
				
			
			<li class=""><a href="#tab_50" data-toggle="tab"
				aria-expanded="false"> 961路 <span>（0, 2 托管）</span></a></li>	
				
			<li class=""><a href="#tab_85" data-toggle="tab"
				aria-expanded="false"> 977路<span>（12, 5 托管）</span> </a></li>
				
			
			<li class=""><a href="#tab_50" data-toggle="tab"
				aria-expanded="false"> 张江1路 <span>（0, 2 托管）</span></a></li>	
		</ul>

		<div class="tab-content" style="padding: 5px;">
			<div class="tab-pane fade active in" id="tab_home" >
				<div class="row card_wrap" style="margin-top: 0px;">
					<div class="col-lg-2 " >
						
						<div class="title">
							发往川沙客运站方向 
							<span class="badge" > 13 </span>
							<div class="help_text dropdown">
                                  <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
                                      <i class="fa fa-ellipsis-horizontal"></i> 上行全部
                                      <i class="fa fa-angle-down"></i>
                                  </span>
                                  <ul class="dropdown-menu">
                                  	  <li>
                                          <a href="javascript:;"> 上行全部 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 上行停靠 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 上行在途 </a>
                                      </li>
                                      <li role="separator" class="divider"></li>
                                      <li>
                                          <a href="javascript:;"> 场内车辆 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 非营运车辆</a>
                                      </li>
                                  </ul>
                                
							</div>
						</div>
                            <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
                               <colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <thead>
                                    <tr>
                                        <th> 车辆编码 </th>
                                        <th> 终点距离 </th>
                                        <th> 终点时间 </th>
                                        <th> 指令 </th>
                                        <th> 速度 </th>
                                        <th> 路牌 </th>
                                    </tr>
                                </thead>
                             </table>
                             <div class="table_wrap">
                             <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
                             	<colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <tbody>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                            <span class="label label-sm label-success"> 发送 </span>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                </tbody>
                            </table>
						</div>
					</div>
					<div class="col-lg-8 line_chart " >
						<div class="top">
							<div class="left col-md-5">
								<div class="top-remark">
									应发未发：0 &nbsp;[05:20, 07:10]<br>
									待发班次：35 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55]
								</div>
							</div>
							<div class="center col-md-2">
								<strong>778路</strong> 计划配车：9<br>
								在运营：9&nbsp;场内：0
							</div>
							<div class="right col-md-5">
								<div class="top-remark">
								应发未发：0 &nbsp;[05:20, 07:10]<br>
								待发班次：40 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-2  down" >
					
						<div class="title" >
							发往南公交枢纽站方向 
							<span class="badge" > 7 </span>
							<div class="help_text dropdown">
                                  <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
                                      <i class="fa fa-ellipsis-horizontal"></i> 下行全部
                                      <i class="fa fa-angle-down"></i>
                                  </span>
                                  <ul class="dropdown-menu pull-right">
                                  	  <li>
                                          <a href="javascript:;"> 下行全部 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 下行停靠 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 下行在途 </a>
                                      </li>
                                  </ul>
							</div>
						</div>
                             <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
							<colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
							<thead>
                                  <tr>
                                     <th> 车辆编码 </th>
                                     <th> 终点距离 </th>
                                     <th> 终点时间 </th>
                                     <th> 指令 </th>
                                     <th> 速度 </th>
                                     <th> 路牌 </th>
                                 </tr>
                             </thead>
                             </table>
                             <div class="table_wrap">
                             <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
	                           <colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <tbody>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                            <span class="label label-sm label-success"> 发送 </span>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                     <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                </tbody>
                            </table>
					</div>
					</div>
				</div>
				
				<div class="row card_wrap" >
					<div class="col-lg-2 " >
						
						<div class="title">
							发往川沙客运站方向 
							<span class="badge" > 13 </span>
							<div class="help_text dropdown">
                                  <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
                                      <i class="fa fa-ellipsis-horizontal"></i> 上行全部
                                      <i class="fa fa-angle-down"></i>
                                  </span>
                                  <ul class="dropdown-menu">
                                  	  <li>
                                          <a href="javascript:;"> 上行全部 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 上行停靠 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 上行在途 </a>
                                      </li>
                                      <li role="separator" class="divider"></li>
                                      <li>
                                          <a href="javascript:;"> 场内车辆 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 非营运车辆</a>
                                      </li>
                                  </ul>
                                
							</div>
						</div>
                            <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
                                <colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <thead>
                                    <tr>
                                        <th> 车辆编码 </th>
                                        <th> 终点距离 </th>
                                        <th> 终点时间 </th>
                                        <th> 指令 </th>
                                        <th> 速度 </th>
                                        <th> 路牌 </th>
                                    </tr>
                                </thead>
                             </table>
                             <div class="table_wrap">
                             <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
                             	<colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <tbody>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                     <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                </tbody>
                            </table>
						</div>
					</div>
					<div class="col-lg-8 line_chart " >
						<div class="top">
							<div class="left col-md-5">
								<div class="top-remark">
										应发未发：0 &nbsp;[05:20, 07:10]<br>
										待发班次：45 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
								</div>
							</div>
							<div class="center col-md-2">
								<strong>1052路</strong> 计划配车：9<br>
								在运营：9&nbsp;场内：0
							</div>
							<div class="right col-md-5">
								<div class="top-remark">
								应发未发：1 &nbsp;[05:20, 07:10]<br>
								待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-2  down" >
					
						<div class="title" >
							发往南公交枢纽站方向 
							<span class="badge" > 7 </span>
							<div class="help_text dropdown">
                                  <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
                                      <i class="fa fa-ellipsis-horizontal"></i> 下行全部
                                      <i class="fa fa-angle-down"></i>
                                  </span>
                                  <ul class="dropdown-menu pull-right">
                                  	  <li>
                                          <a href="javascript:;"> 下行全部 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 下行停靠 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 下行在途 </a>
                                      </li>
                                  </ul>
							</div>
						</div>
                             <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
							<colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
							<thead>
                                  <tr>
                                     <th> 车辆编码 </th>
                                     <th> 终点距离 </th>
                                     <th> 终点时间 </th>
                                     <th> 指令 </th>
                                     <th> 速度 </th>
                                     <th> 路牌 </th>
                                 </tr>
                             </thead>
                             </table>
                             <div class="table_wrap">
                             <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
	                           <colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <tbody>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                            <span class="label label-sm label-success"> 发送 </span>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                     <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                </tbody>
                            </table>
					</div>
					</div>
				</div>
				<div class="row card_wrap" >
					<div class="col-lg-2 " >
						
						<div class="title">
							发往川沙客运站方向 
							<span class="badge" > 13 </span>
							<div class="help_text dropdown">
                                  <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
                                      <i class="fa fa-ellipsis-horizontal"></i> 上行全部
                                      <i class="fa fa-angle-down"></i>
                                  </span>
                                  <ul class="dropdown-menu">
                                  	  <li>
                                          <a href="javascript:;"> 上行全部 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 上行停靠 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 上行在途 </a>
                                      </li>
                                      <li role="separator" class="divider"></li>
                                      <li>
                                          <a href="javascript:;"> 场内车辆 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 非营运车辆</a>
                                      </li>
                                  </ul>
                                
							</div>
						</div>
                            <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
                                <colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <thead>
                                    <tr>
                                        <th> 车辆编码 </th>
                                        <th> 终点距离 </th>
                                        <th> 终点时间 </th>
                                        <th> 指令 </th>
                                        <th> 速度 </th>
                                        <th> 路牌 </th>
                                    </tr>
                                </thead>
                             </table>
                             <div class="table_wrap">
                             <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
                             	<colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <tbody>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                     <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                </tbody>
                            </table>
						</div>
					</div>
					<div class="col-lg-8 line_chart " >
						<div class="top">
							<div class="left col-md-5">
								<div class="top-remark">
									应发未发：4 &nbsp;[05:20, 07:10]<br>
									待发班次：44 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
								</div>
							</div>
							<div class="center col-md-2">
								<strong>新川专线</strong> 计划配车：9<br>
								在运营：9&nbsp;场内：0
							</div>
							<div class="right col-md-5">
								<div class="top-remark">
								应发未发：0&nbsp;[05:20, 07:10]<br>
								待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-2  down" >
					
						<div class="title" >
							发往南公交枢纽站方向 
							<span class="badge" > 7 </span>
							<div class="help_text dropdown">
                                  <span class=" blue dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="cursor: pointer;">
                                      <i class="fa fa-ellipsis-horizontal"></i> 下行全部
                                      <i class="fa fa-angle-down"></i>
                                  </span>
                                  <ul class="dropdown-menu pull-right">
                                  	  <li>
                                          <a href="javascript:;"> 下行全部 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 下行停靠 </a>
                                      </li>
                                      <li>
                                          <a href="javascript:;"> 下行在途 </a>
                                      </li>
                                  </ul>
							</div>
						</div>
                             <table class="table table-striped table-bordered table-advance" style="table-layout: fixed;">
							<colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
							<thead>
                                  <tr>
                                     <th> 车辆编码 </th>
                                     <th> 终点距离 </th>
                                     <th> 终点时间 </th>
                                     <th> 指令 </th>
                                     <th> 速度 </th>
                                     <th> 路牌 </th>
                                 </tr>
                             </thead>
                             </table>
                             <div class="table_wrap">
                             <table class="table table-striped table-bordered table-advance table-hover" style="table-layout: fixed;">
	                            <colgroup>
									<col style="width: 20%;">
									<col style="width: 19%;">
									<col style="width: 20%;">
									<col style="width: 14%;">
									<col style="width: 14%;">
									
								</colgroup>
                                <tbody>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.143 </td>
                                        <td> 82 </td>
                                        <td>
                                            <span class="label label-sm label-success"> 发送 </span>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                     <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                            <span class="label label-sm label-success"> 发送 </span>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                    <tr>
                                        <td> W9H108 </td>
                                        <td> 13.14 </td>
                                        <td> 82 </td>
                                        <td>
                                        </td>
                                        <td> 16.00 </td>
                                        <td> 4 </td>
                                    </tr>
                                </tbody>
                            </table>
					</div>
					</div>
				</div>
				<div style="width: 100%;position: absolute;left: 0;height: 40px;bottom: 0;background: linear-gradient(to right, #c5c8ce, #E4E7EC);">
					<ul class="pagination" style="visibility: visible;float: left;margin-top: 2px;">
						<!-- <li class="head">
							<a>分页</a>
						</li> -->
						<li class="active"><a href="#"><i class="fa fa-check"></i> 778，1052，新川专线</a></li>
						<li><a href="#">85，785，陆家嘴金融城3路</a></li>
						<li><a href="#">961，1047，张江1路</a></li>
					</ul>
					
					<div style="float: right;line-height: 40px;margin-right: 20px;font-family: 微软雅黑;">
						<!-- 当前用户：panzhao -->
						<span style="color: #17589E;margin-left: 40px;">已成功连接服务器</span>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="tab_map">
				地图
			</div>
			<div class="tab-pane fade" id="tab_85">
				85路
			</div>
			<div class="tab-pane fade" id="tab_50">
				浦东50路
			</div>
		</div>
	</div>
</div>

<script>
$(function() {
	
	// 关闭左侧栏
/* 	if (!$('body').hasClass('page-sidebar-closed'))
		$('.menu-toggler.sidebar-toggler').click();
	 */
	
 	$('.card_wrap .table_wrap').slimscroll({
		height: '187px',
		alwaysVisible: true,
		opacity: .8
	}); 
 	
 	$('.line_chart .top .top-remark').slimscroll({
 		height: '47px'
 	});
 	
/*  	var h = $(document.body).height() - 63;
 	alert(h);
 	$('#tab_home').slimscroll({
 		height: h + 'px' ,
 		alwaysVisible: true
 	}); */
 	
 setTimeout(function(){
	 /**
	 	type: 0 上行站点  1 下行站点  2  上下行共有  3  上下行共有（name不同）
	 */
	 var stations = 
		 [{name: '张江地铁站', type:'2', id: 1}
		, {name: '祖冲之路居里路aa', type:'1', id: 2}
		, {name: '祖冲之路高斯路', type:'1', id: 3}
		, {name: '祖冲之路张江路', type:'2', id: 4}
		, {name: '紫薇路张江路', type:'2', id: 5}
		, {name: '祖冲之路广兰路', type:'2', id: 6}
		, {name: '申江路祖冲之路', type:'2', id: 7}
		, {name: '申江路益丰路', type:'2', id: 8}
		, {name: ['盛夏路益江路', '科苑路孙环路'], type:'3', id: [9, 10]}
		, {name: '益江路盛夏路', type:'2', id: 11}
		, {name: '张东路益江路', type:'2', id: 12}
		, {name: '高科中路芳春路', type:'0', id: 13}
		, {name: '唐安路唐镇路', type:'2', id: 14}
		, {name: '唐安路唐兴路', type:'2', id: 15}
		, {name: '创新西路唐安路', type:'2', id: 16}
		, {name: '创新中路齐爱路', type:'2', id: 17}
		, {name: '齐爱路南漕路', type: '2', id: 18}
		, {name: '南漕路唐陆公路', type:'2', id: 19}
		, {name: '蛀虫之路广兰路', type:'2', id: 20}
		, {name: '上海火车站北广场', type:'2', id: 21}];

	
		//svg start-----------------
		//顶部距离
		var mTop = 21;
		//上下行之间高度
		var h = 132;

		var svg = d3.selectAll('.line_chart').append('svg').attr('width',
				'100%');
		
		var upLine = d3.svg.line().x(function(d) {
			return d.cx;
		}).y(function(d) {
			return mTop;
		});

		var downLine = d3.svg.line().x(function(d) {
			return d.cx;
		}).y(function(d) {
			return mTop + h;
		});
		
		var circleClass = function(d, type, c){
			if(d.type == type){
				if(type == 1){
					c = 'up-circle-none';
				}
				else{
					c = 'down-circle-none';
				}
			}
			return c;
		}
		
		//横向比例尺  -根据svg的宽度平均分布站点
		var dLen = stations.length
			,indent = $('svg').width() / 12 - (dLen * 2) - 6;
		var xScale = d3.scale.linear().domain([ 0,  dLen])
				.range([ indent, $('.line_chart svg').width()]);

		$.each(stations, function(i, d) {
			d.cx = xScale(i);
		});
			
		//上行线条
		svg.append('g').selectAll('path').data(stations.slice(0, dLen - 1))
			.enter().append('path').attr('d', function(d, i) {
				return upLine([ d, stations[i + 1] ]);
			}).attr('class', 'up_path'); 

		//上行站点 外圆
		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
				.attr('cy', mTop)
				.attr('class', function(d){return circleClass(d, 1, 'station_circle')})
				.attr('cx', function(d, i) {
					return d.cx;
				});
		
		//上行站点 内圆	
		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
				.attr('class',  function(d){return circleClass(d, 1, 'up_station_circle_inside')})
				.attr('cy', mTop)
				.attr('id', function(d){
					var id = d.id;
					if(d.type == 3){
						id = d.id[0];
					}
					return id;
				})
				.attr('cx', function(d, i) {
					return d.cx;
				});
			
		//下行线条
		svg.append('g').selectAll('path')
				.data(stations.slice(0, dLen - 1)).enter()
				.append('path').attr('d', function(d, i) {
					return downLine([ d, stations[i + 1] ]);
				}).attr('class', 'down_path'); 

		//下行站点 外圆
		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
				.attr('class', function(d){return circleClass(d, 0, 'station_circle')})
				.attr('cy', mTop + h)
				.attr('cx', function(d, i) {
					return d.cx;
				});
		//下行站点 内圆
		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
				.attr('class', function(d){return circleClass(d, 0, 'down_station_circle_inside')})
				.attr('cy', mTop + h)
				.attr('cx', function(d, i) {
					return d.cx;
				})
				.attr('id', function(d){
					var id = d.id;
					if(d.type == 3){
						id = d.id[1];
					}
					return id;
				});
		
		
		 var line = d3.svg.line().x(function(d) {
				return d.attr('cx');
			}).y(function(d) {
				return d.attr('cy');
			});
	 
	 	//左括号
 		svg.append('g').append('path')
 			.attr('d', function(){
 				var up = svg.select('.up_station_circle_inside')
					,down = svg.select('.down_station_circle_inside');
 				
 				var upX = parseInt(up.attr('cx')) -5
 					, upY =  parseInt(up.attr('cy')) + 8
 					, downX = parseInt(down.attr('cx')) -5
 					, downY = parseInt(down.attr('cy')) -8
 					,arc = (upX - 18);
 				return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
 			})
 			.attr('class', 'up_path')
 			.attr('fill', 'none'); 
 		
	 	//右括号
 		svg.append('g').append('path')
			.attr('d', function(){
				var up = $('.up_station_circle_inside:last')
					,down = $('.down_station_circle_inside:last');
				
				var upX = parseInt(up.attr('cx')) +5
					, upY =  parseInt(up.attr('cy')) + 8
					, downX = parseInt(down.attr('cx')) +5
					, downY = parseInt(down.attr('cy')) -8
					,arc = (upX + 18);
				return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
			})
			.attr('class', 'down_path')
			.attr('fill', 'none'); 
	 	
	 	
	 	
 		//文字
 		var getText = function(t){
			if (t.length > 7) {
				return t.substring(0, 7) + '·';
			}
			return t;
		}
		svg.append('g').selectAll('text').data(stations).enter()
			.append('text')
			.attr('y',
				function(d, i) {
					var t;
					if(d.type == 3){
						t = d.name[0];
					}
					else{
						t = d.name;
					}
					return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
				})
			.attr('class', function(d, i){
				var classz = 'station_text';
				if(i == 0)
					classz += ' start';
				else if(i == stations.length - 1)
					classz += ' end';
				return classz;
			})
			.text(function(d){
				if(d.type == 3){
					$(this).attr('type', 3).attr('downName', d.name[1]);
					return getText(d.name[0]);
				}
				return getText(d.name);
			})
			.attr('x', function(d, i) {
				return xScale(i);
			});
		
		
		//上下行不同名修正
		var lastG = svg.append('g');
		$.each($('.station_text[type=3]'), function(i, obj){
			var x = parseInt($(obj).attr('x'))
				,diff = 8;
			
			lastG.append('text')
				.attr('y', $(obj).attr('y'))
				.attr('class', 'station_text')
				.attr('x', (x + diff))
				.attr('fill', 'red')
				.text($(obj).attr('downname'));
			
			$(obj).attr('fill', '#337AB7')
				.removeAttr('type').removeAttr('downname')
				.attr('x', x - diff);
		});
	}, 200);
	});
</script>