<style type="text/css">
	.pccs_table {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #A8BFDE;
		width: 100%;
	}
	.pccs_table td, .pccs_table th {
		padding: 5px 10px;
		font-size: 12px;
		color: #737DAE;
	}
	.pccs_table tr:nth-child(even) {
		background: #D3DFED;
	}
	.pccs_table tr:nth-child(odd) {
		background: #FFF;
	}
</style>
<div class="modal-content" style="height: auto;min-height: 100%;border-radius: 0;">
	<div class="portlet box bg-blue-soft" style="margin-bottom: 0px;">
		<div class="modal-header" style="color: #fff;">
			<button type="button" data-dismiss="modal" style="float: right;background-repeat: no-repeat !important;    background: 0px 0px;color:white;border:0px;"><i class="fa fa-times fa-2x"></i></button>
			<h4 class="modal-title"><i class="fa fa-home"></i>&nbsp;圖形控制系統</h4>
		</div>
		<div class="portlet-body" style="padding-bottom: 0px;">
			<div class="tab-content">
				<table style="width: 100%;">
					<tr>
						<td style="width: 1400px;height: 750px;">
							<div id="modal_pccs_image" class="portlet light bordered" style="position: relative;width: 1400px;height: 750px;background-repeat: no-repeat;padding: 0px;">
							</div>
						</td>
						<td style="vertical-align: text-top;">
							<div class="table-toolbar portlet light bordered" style="height: 750px;">
								<div class="row">
									<div class="modal-body">
										<table style="width: 100%;">
											<tr>
												<td rowspan="4" style="width: 50%;">
													<div id="chartContainer" style="width: 200px;height: 160px;"></div>
												</td>
												<td style="height: 40px;vertical-align: middle;width: 13%;">
													<label class="label label-info">類別</label>
												</td>
												<td>
													<select id="pccs_type" class="form-control selectpicker" data-live-search="true" data-size="8">
				                                		<option value="BA">BA管理</option>
				                                		<option value="CCTV">CCTV管理</option>
				                                		<option value="access">門禁管理</option>
				                                		<option value="intercom">對講機管理</option>
				                                		<option value="hosts">主機管理</option>
				                                		<option value="All">全部</option>
					                                </select>
												</td>
											</tr>
											<tr>
												
												<td style="height: 40px;vertical-align: middle;">
													<label class="label label-info">棟別</label>
												</td>
												<td>
													<select id="pccs_building" class="form-control selectpicker" data-live-search="true" data-size="8">
				                                	<?php foreach($building as $one): ?>
				                                		<option value="<?php echo e($one->id); ?>"><?php echo e($one->name); ?></option>
				                                	<?php endforeach; ?>
					                                </select>
												</td>
											</tr>
											<tr>
												
												<td style="height: 40px;vertical-align: middle;">
													<label class="label label-info">位置</label>
												</td>
												<td>
													<select id="pccs_location" class="form-control selectpicker" data-live-search="true" data-size="8">
				                                		<option value="地上">地上</option>
				                                		<option value="地下">地下</option>
					                                </select>
												</td>
											</tr>
											<tr>
												<td style="height: 40px;vertical-align: middle;">
													<label class="label label-info">樓別</label>
												</td>
												<td>
													<select id="pccs_floor" class="form-control selectpicker" data-live-search="true" data-size="8" title="無資料">
													<?php foreach($floor as $one): ?>
				                                		<option value="<?php echo e($one->floor); ?>"><?php echo e($one->floor); ?></option>
				                                	<?php endforeach; ?>
					                                </select>
												</td>
											</tr>
											<tr>
												<td colspan="3" style="text-align: center;">
													<div style="height: 530px;overflow: auto;margin-top: 10px;">
														<table id="pccs_table" class="pccs_table">
															<tr>
																<th style="text-align: center;">
																	設備名稱
																</th>
																<th style="text-align: center;">
																	設備查詢
																</th>
															</tr>
														</table>
													</div>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<div id="ann_box" style="overflow: hidden;height: 90px;margin-left: 10px;">
	</div>
</div>

<script type="text/javascript">
	
function slideLine(box,stf,delay,speed,h)
{
  //取得id
  var slideBox = document.getElementById(box);
  //預設值 delay:幾毫秒滾動一次(1000毫秒=1秒)
  //       speed:數字越小越快，h:高度
  var delay = delay||1000,speed = speed||30,h = h||30;
  var tid = null,pause = false;
  //setInterval跟setTimeout的用法可以咕狗研究一下~
  var s = function(){tid=setInterval(slide, speed);}
  //主要動作的地方
  var slide = function(){
  //當滑鼠移到上面的時候就會暫停
    if(pause) return;
  //滾動條往下滾動 數字越大會越快但是看起來越不連貫，所以這邊用1
    slideBox.scrollTop += 1;
  //滾動到一個高度(h)的時候就停止
    if(slideBox.scrollTop%h == 0){
  //跟setInterval搭配使用的
      clearInterval(tid);
  //將剛剛滾動上去的前一項加回到整列的最後一項
      slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
  //再重設滾動條到最上面
      slideBox.scrollTop = 0;
  //延遲多久再執行一次
      setTimeout(s, delay);
    }
  }
  //滑鼠移上去會暫停 移走會繼續動
  slideBox.onmouseover=function(){pause=true;}
  slideBox.onmouseout=function(){pause=false;}
  //起始的地方，沒有這個就不會動囉
  setTimeout(s, delay);
}
//網頁load完會執行一次
//五個屬性各別是：外面div的id名稱、包在裡面的標籤類型
//延遲毫秒數、速度、高度
slideLine('ann_box','div',1000,25,30);
</script>