979 lines
47 KiB
HTML
979 lines
47 KiB
HTML
<style>
|
|
.elevator {
|
|
background-color:#fff;
|
|
height:520px;
|
|
}
|
|
table.elevator-build {
|
|
/*border: 1px double #000;*/
|
|
}
|
|
table.elevator-build td {
|
|
padding: 0.2rem 0.5rem;
|
|
height: 40px;
|
|
width: 55px;
|
|
border: 1px solid #000;
|
|
}
|
|
elevator .elevator-body, elevator .elevator-header {
|
|
padding: 0.7rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="d-flex">
|
|
<!-- 左圖區 -->
|
|
<div class="col-3 my-3">
|
|
|
|
<div style="position:relative ">
|
|
<div id="elevatorBlock" class="elevator">
|
|
<div class="elevator-header">
|
|
|
|
</div>
|
|
<div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
|
|
<table id="floorTable" class="elevator-build m-auto">
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--<div>
|
|
<img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
|
|
</div>-->
|
|
</div>
|
|
|
|
<!-- <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" /> -->
|
|
|
|
<div class="mt-2">
|
|
<img src="img/總公司1F平面.jpg" class="img-fluid" style="min-height: 330px" />
|
|
</div>
|
|
</div>
|
|
<!-- End-左圖區 -->
|
|
<!-- 中間卡片區 -->
|
|
<div class="col-7 my-3">
|
|
<div class="row">
|
|
<div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
|
|
<div type="button" class="card-body" data-toggle="modal" data-target="#card1">
|
|
<span class="d-flex">
|
|
<h5 class="card-title">號機別 : 1</h5>
|
|
<i class="fas fa-caret-up fa-3x ml-auto"></i>
|
|
</span>
|
|
<h4 class="d-flex justify-content-end">10F</h4>
|
|
<span class="d-flex">
|
|
<p class="card-text">狀態 : 運行中</p>
|
|
<i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-danger mx-1 mb-3 col-4" style="max-width: 18rem">
|
|
<div type="button" class="card-body">
|
|
<span class="d-flex">
|
|
<h5 class="card-title">號機別 : 2</h5>
|
|
<i class="fas fa-caret-up fa-3x ml-auto"></i>
|
|
</span>
|
|
<h4 class="d-flex justify-content-end">5F</h4>
|
|
<span class="d-flex">
|
|
<p class="card-text animate__animated animate__flash animate__infinite animate__slower">
|
|
狀態 : 維修
|
|
</p>
|
|
<i class="fas fa-caret-down fa-3x ml-auto"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
|
|
<div type="button" class="card-body">
|
|
<span class="d-flex">
|
|
<h5 class="card-title">號機別 : 3</h5>
|
|
<i class="fas fa-caret-up fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
|
|
</span>
|
|
<h4 class="d-flex justify-content-end">3F</h4>
|
|
<span class="d-flex">
|
|
<p class="card-text">狀態 : 運行中</p>
|
|
<i class="fas fa-caret-down fa-3x ml-auto"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-中間卡片區 -->
|
|
<!-- 右邊功能區 -->
|
|
<div class="col-2 my-3">
|
|
<div class="d-flex">
|
|
<div class="btn-group col-xxl-3 mb-2">
|
|
<button class="btn btn-info" data-toggle="modal" data-target="#staticBackdrop">
|
|
重播系統 <i class="fas fa-play"></i>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<i type="button" class="fas fa-cog fa-2x ml-3 my-2" data-toggle="modal"
|
|
data-target="#exampleModal1"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card col-xxl-3 mt-3">
|
|
<div class="card-body text-center">
|
|
<h4>緊急回轉</h4>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-around mt-2">
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
緊急回歸
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
未動作
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-around mt-2">
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
群控故障
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
未動作
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-around mt-2">
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
緊急電源
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
未動作
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-around mt-2">
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
火災回歸
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
未動作
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-around mt-2">
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
地震管制
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="form-check-label h4" for="flexRadioDefault1">
|
|
未動作
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-右邊功能區 -->
|
|
<!-- Modal-Card1 -->
|
|
<div class="modal fade" id="card1" data-keyboard="false" tabindex="-1"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="modal-title" id="staticBackdropLabel">1</h5>
|
|
</div>
|
|
<div class="">
|
|
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
|
|
title="及時狀態">
|
|
<i class="fal fa-tv fa-2x" data-toggle="modal"
|
|
data-target="#exampleModal"></i>
|
|
</a>
|
|
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
|
|
title="基本資訊">
|
|
<i class="fal fa-cog fa-2x" data-toggle="modal"
|
|
data-target="#exampleModal"></i>
|
|
</a>
|
|
<a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
|
|
title="異常資料">
|
|
<i class="fal fa-exclamation-triangle fa-2x" data-toggle="modal"
|
|
data-target="#exampleModal"></i>
|
|
</a>
|
|
<a type="button" class="" data-toggle="tooltip" data-placement="top"
|
|
title="運維紀錄">
|
|
<i class="fal fa-server fa-2x" data-toggle="modal"
|
|
data-target="#exampleModal"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal fade" id="exampleModal" tabindex="-1"
|
|
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal-ReplaySystem -->
|
|
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false"
|
|
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">重播系統</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<label>
|
|
播放日期 : <input type="date"> ~ <input type="date"> 時段 :
|
|
<input type="time">
|
|
</label>
|
|
<div>
|
|
播放速度 :
|
|
<div class="btn-group mt-2">
|
|
<button class="btn btn-info">正常</button>
|
|
<button class="btn btn-info">1.5x</button>
|
|
<button class="btn btn-info">2.0x</button>
|
|
<button class="btn btn-info">3.0x</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-2">
|
|
<div>
|
|
<button class="btn btn-info">
|
|
<i class="fas fa-play fa-1x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="progress" style="width: 85%">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 15%"
|
|
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 電梯圖表 -->
|
|
<div class="mt-3">
|
|
<table class="table table-bordered">
|
|
<tbody class="text-center">
|
|
<tr>
|
|
<td></td>
|
|
<td colspan="4">Bank1</td>
|
|
<td colspan="2">Bank2</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td colspan="2">#1</td>
|
|
<td colspan="2">#2</td>
|
|
<td colspan="2">#3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>位置/模式</td>
|
|
<td>1F</td>
|
|
<td>自動運轉</td>
|
|
<td>1F</td>
|
|
<td>自動運轉</td>
|
|
<td>4F</td>
|
|
<td>自動運轉</td>
|
|
</tr>
|
|
<tr>
|
|
<td>負載/狀態</td>
|
|
<td>40%</td>
|
|
<td>*</td>
|
|
<td>0%</td>
|
|
<td>*</td>
|
|
<td>80%</td>
|
|
<td>*</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>10F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>9F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>8F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>7F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>6F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>5F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>4F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>1F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>B1F</td>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<th>B2F</th>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<th>B3F</th>
|
|
<td id="elevator1-1"></td>
|
|
<td></td>
|
|
<td id="elevator2-1"></td>
|
|
<td></td>
|
|
<td id="elevator3-1"></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End-電梯圖表 -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-Modal-ReplaySystem -->
|
|
<!-- Modal-ElevatorManagement -->
|
|
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr class="text-center">
|
|
<th scope="col">號機</th>
|
|
<th scope="col">狀態</th>
|
|
<th scope="col">所在樓層</th>
|
|
<th scope="col">載重</th>
|
|
<th scope="col">休止</th>
|
|
<th scope="col">獨立運轉</th>
|
|
<th scope="col">VIP</th>
|
|
<th scope="col">回歸</th>
|
|
<th scope="col">不服務樓層</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="text-center">
|
|
<th>Bank1</th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th>B2F,3F,5F</th>
|
|
<th>
|
|
<button class="btn btn-info" data-target="#exampleModal2"
|
|
data-toggle="modal">
|
|
<i class="fal fa-pen"> Edit</i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
<tr class="text-center">
|
|
<th>1</th>
|
|
<th>運作中</th>
|
|
<th>3F</th>
|
|
<th>80%</th>
|
|
<th>On</th>
|
|
<th>Off</th>
|
|
<th>On</th>
|
|
<th>Off</th>
|
|
<th></th>
|
|
<th>
|
|
<button class="btn btn-info" data-target="#exampleModal1-1"
|
|
data-toggle="modal">
|
|
<i class="fal fa-pen"> Edit</i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
<tr class="text-center">
|
|
<th>2</th>
|
|
<th>保養</th>
|
|
<th>2F</th>
|
|
<th>0%</th>
|
|
<th>On</th>
|
|
<th>Off</th>
|
|
<th>On</th>
|
|
<th>Off</th>
|
|
<th></th>
|
|
<th>
|
|
<button class="btn btn-info" data-target="#exampleModal1-2"
|
|
data-toggle="modal">
|
|
<i class="fal fa-pen"> Edit</i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
<tr class="text-center">
|
|
<th>Bank2</th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th>B1F,B2F</th>
|
|
<th>
|
|
<button class="btn btn-info" data-target="#exampleModal2"
|
|
data-toggle="modal">
|
|
<i class="fal fa-pen"> Edit</i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
<tr class="text-center">
|
|
<th>3</th>
|
|
<th>運作中</th>
|
|
<th>B1F</th>
|
|
<th>100%</th>
|
|
<th>On</th>
|
|
<th>Off</th>
|
|
<th>On</th>
|
|
<th>Off</th>
|
|
<th></th>
|
|
<th>
|
|
<button class="btn btn-info" data-target="#exampleModal2-1"
|
|
data-toggle="modal">
|
|
<i class="fal fa-pen"> Edit</i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-Modal-ElevatorManagement -->
|
|
<!-- Modal-ElevatorManagement -->
|
|
<div class="modal fade" id="exampleModal1-1" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr class="text-center">
|
|
<th scope="col">號機</th>
|
|
<th scope="col">狀態</th>
|
|
<th scope="col">所在樓層</th>
|
|
<th scope="col">防疫對策</th>
|
|
<th scope="col">遠隔休止</th>
|
|
<th scope="col">獨立運轉</th>
|
|
<th scope="col">VIP</th>
|
|
<th scope="col">回歸運轉</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="text-center">
|
|
<th>1</th>
|
|
<th>運作中</th>
|
|
<th>3F</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID1-1"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID1-1">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID1-2"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID1-2">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID1-3"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID1-3">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID1-4"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID1-4">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID1-5"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID1-5">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-Modal-ElevatorManagement -->
|
|
<!-- Modal-ElevatorManagement -->
|
|
<div class="modal fade" id="exampleModal1-2" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr class="text-center">
|
|
<th scope="col">號機</th>
|
|
<th scope="col">狀態</th>
|
|
<th scope="col">所在樓層</th>
|
|
<th scope="col">防疫對策</th>
|
|
<th scope="col">遠隔休止</th>
|
|
<th scope="col">獨立運轉</th>
|
|
<th scope="col">VIP</th>
|
|
<th scope="col">回歸運轉</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="text-center">
|
|
<th>2</th>
|
|
<th>保養</th>
|
|
<th>2F</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID2-1"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID2-1">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID2-2"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID2-2">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID2-3"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID2-3">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID2-4"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID2-4">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID2-5"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID2-5">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-Modal-ElevatorManagement -->
|
|
<!-- Modal-ElevatorManagement -->
|
|
<div class="modal fade" id="exampleModal2-1" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr class="text-center">
|
|
<th scope="col">號機</th>
|
|
<th scope="col">狀態</th>
|
|
<th scope="col">所在樓層</th>
|
|
<th scope="col">防疫對策</th>
|
|
<th scope="col">遠隔休止</th>
|
|
<th scope="col">獨立運轉</th>
|
|
<th scope="col">VIP</th>
|
|
<th scope="col">回歸運轉</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="text-center">
|
|
<th>2</th>
|
|
<th>運作中</th>
|
|
<th>B1F</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID3-1"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID3-1">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID3-2"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID3-2">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID3-3"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID3-3">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID3-4"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID3-4">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
<th>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="switch mr-2">
|
|
<input class="switch-checkbox" id="switchID3-5"
|
|
type="checkbox" name="switch-checkbox">
|
|
<label class="switch-label" for="switchID3-5">
|
|
<div class="switch-txt" turnOn="On" turnOff="Off"></div>
|
|
<div class="switch-Round-btn"></div>
|
|
</label>
|
|
</div>
|
|
<img type="button" src="img\u1673.svg">
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End-Modal-ElevatorManagement -->
|
|
|
|
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"]
|
|
$(function () {
|
|
setBuildFloor(floors.length,3);
|
|
})
|
|
|
|
function setBuildFloor(floorCnt = 10,eleCnt = 3) {
|
|
let tbody = creEle("tbody");
|
|
//樓層從小到大
|
|
let rfloors = floors.reverse();
|
|
let eleCircle = creDiv(["elevator-circle"]);
|
|
//樓層表格建置
|
|
for (let f = 1; f <= floorCnt; f++) {
|
|
let tr = creEle("tr");
|
|
for (let e = 1; e <= eleCnt + 2; e++) {
|
|
let td = creEle("td");
|
|
if (e == 1) {
|
|
td.text(rfloors[f - 1]);
|
|
}
|
|
tr.append(td);
|
|
}
|
|
tbody.append(tr);
|
|
}
|
|
|
|
$("#floorTable").html(tbody);
|
|
|
|
$("#floorTable tbody tr").each((index, tr) => {
|
|
|
|
$(tr).find("td:eq(0)").css("border-left", "0");
|
|
$(tr).find("td:eq(-1)").css("border-right", "0");
|
|
|
|
if (index == 0) {
|
|
$(tr).find("td").each((index, td) => {
|
|
$(td).css("border-top", "0");
|
|
})
|
|
} else if (index == $("#floorTable tbody tr").length - 1) {
|
|
$(tr).find("td").each((index, td) => {
|
|
$(td).css("border-bottom", "0");
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
function initYTTable(element) {
|
|
let obj = { init: null, SetContainer: null, Ele: element || $(".yt-table") };
|
|
|
|
obj.init = function () {
|
|
this.SetContainer();
|
|
this.SetBorder();
|
|
this.SetEndCellRightBorderRemove();
|
|
this.SetEndCellBottomBorderRemove();
|
|
}
|
|
|
|
obj.SetContainer = function () {
|
|
$(this.Ele).each(function (index, value) {
|
|
if ($(value).parent(".yt-table-container").length != 0) {
|
|
$(value).unwrap(".yt-table-container");
|
|
}
|
|
let strHtml = $(`<div class="yt-table-container"></div>`);
|
|
$(value).wrap(strHtml);
|
|
$(value).parent(".yt-table-container").parent().addClass("table-div");
|
|
})
|
|
}
|
|
|
|
obj.SetBorder = function () {
|
|
console.log("123123", $(this.Ele))
|
|
$(`${$(this.Ele).selector}.th-td-br th,${$(this.Ele).selector}.th-td-br td`).css("border-right", "1px solid #adadad");
|
|
$(`${$(this.Ele).selector}.th-bd thead th`).css("border-bottom", "1px solid #adadad");
|
|
$(`${$(this.Ele).selector}.td-bd tbody td`).css("border-bottom", "1px solid #adadad");
|
|
}
|
|
|
|
obj.SetEndCellRightBorderRemove = function () {
|
|
let notBorder = 0;
|
|
$(`${$(this.Ele).selector} thead th:last-child,.yt-table tbody td:last-child`).each(function (index, value) {
|
|
if (index >= notBorder) {
|
|
$(value).css("border-right", "0px");
|
|
}
|
|
if ($(value).attr("rowspan")) {
|
|
let rowspan = parseInt($(value).attr("rowspan"));
|
|
notBorder = index + rowspan;
|
|
}
|
|
})
|
|
}
|
|
|
|
obj.SetEndCellBottomBorderRemove = function () {
|
|
$(`${$(this.Ele).selector} tr:last-child td`).each(function (index, value) {
|
|
$(value).css("border-bottom", "0px");
|
|
})
|
|
|
|
$(`${$(this.Ele).selector} tr td[rowspan]`).each(function (index, value) {
|
|
let tr = $(value).closest("tr");
|
|
let oriTrInd = $(tr).index();
|
|
let lastTrInd = $(tr).parent("tbody").find("tr:last-child").index();
|
|
if (lastTrInd - oriTrInd == $(value).prop("rowspan") - 1) {
|
|
$(value).css("border-bottom", "0px");
|
|
}
|
|
})
|
|
}
|
|
obj.init();
|
|
}
|
|
</script> |