ibms-dome/Frontend/_sysElevator.html

1284 lines
60 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style>
.elevator {
background-color:#fff;
height:520px;
}
table.elevator-build {
/*border: 1px double #000;*/
}
table.elevator-build td {
padding: 0.2rem 0.5rem;
height: 50px;
width: 45px;
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">
<div id="floorTable_wrapper" class="elevator-build-container">
<table id="floorTable" class="elevator-build m-auto">
</table>
</div>
</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 id="eleCards" 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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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"]
var allDevList = [];
$(function () {
setBuildFloor(floors.length, 3);
setCards();
subDevice();
})
function getFloDevList() {
}
//baja 訂閱設備
function subDevice() {
myBaja = new subscriptionDevices();
var ordPath = {
"building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag,
"name_tag": pageAct.sysSubTag,
}
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(function (data) {
let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0];
let norDevPoiName = matchDevice.device_normal_point_name;
let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name;
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
//顯示正常燈號
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
} else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
} else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
}
setLightColor();
});
}
function setLightColor() {
$("[data-light-type]").each((index, ele) => {
let type = $(ele).data("light-type");
let isFlashing = false;
let color = "#000";
switch (type) {
case "normal":
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
break;
case "close":
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
break;
case "error":
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
break;
}
$(ele).css("background-color", color);
if (isFlashing) {
$(ele).addClass("light-flash");
}
})
}
function setCards() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
sub_system_tag: pageAct.sysSubTag,
building_tag: pageAct.buiTag,
floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data, (index, floObj) => {
$.each(floObj.device_list, (index2, devObj) => {
allDevList.push(devObj);
strHtml += `<div class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
<div type="button" class="card-body">
<span class="d-flex">
<h5 class="card-title">號機別 : ${devObj.full_name}</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">狀態 : ${devObj.device_status}</p>
<i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
</span>
</div>
</div>`;
})
})
$("#eleCards").html(strHtml);
initPopover();
}
}, null, "POST").send();
}
function initPopover() {
$("[name=devItem]").each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
let devName = $(ele).data("name"); //full_name
$(ele).YTTooltip({
html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo()}
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
</div>
</div>`,
group: "device",
onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" })
console.log($(oriEle).data("number"))
//基本資料tab block
$("#info").html(drawInfoTabBlo(devGuid));
loadOpeRecTable(devGuid);
//loadErrRecTable2($(oriEle).data("number"));
//loadErrRecTable();
loadErr($(oriEle).data("number"));
}
})
})
}
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.addClass("t-black")
td.text(rfloors[f - 1]);
} else if (e == eleCnt + 2) {
}
else {
let div = creDiv(["d-flex", "justify-content-center", "align-items-end","h-100"]);
div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
td.append(div)
}
tr.append(td);
}
tbody.append(tr);
$("#floorTable_wrapper").append(eleCircle)
}
$("#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 drawStateTabBlo() {
let strHtml = `<table class="table table-bordered table-striped text-center m-0" id="iframemodal">
<div class="modal-body">
<iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
</div>
</table>`
return strHtml;
}
function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let columnNames = ["設備編號", "設備名稱"];
$.each(columnNames, (index, colName) => {
let tr = $("<tr></tr>");
let td = $("<td></td>");
td.text(colName);
tr.append(td);
tbody.append(tr);
})
let url = baseApiUrl + "/api/Device/GetBaseDevice";
let sendData = {
device_guid: devGuid,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
}
}, null, "POST").send();
return tabEle.prop("outerHTML");
}
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
function loadOpeRecTable(devGuid) {
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "7%", "sortable": true },
{ "targets": [3], "width": "7%", "sortable": true },
];
let columns = [
{
"title": "類型",
"data": "work_type_name",
},
{
"title": "項目",
"data": "fix_do",
},
{
"title": "處理人員",
"data": "work_person_name",
},
{
"title": "發生/完成時間",
"data": "finishTime",
"render": function (data, type, row) {
return row.createdAt + "<br>" + data;
},
},
];
//let callback = function () {
// $('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody會導致thead跑掉
// let api = this.api();
// api.columns.adjust();
//}
let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
}
function loadErrRecTable() {
let tag = "#errRecTable";
let datas;
//getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
let column_defs = [
{ "targets": [0], "width": "15%", "sortable": true },
{ "targets": [1], "width": "25%", "sortable": true },
{ "targets": [2], "width": "25%", "sortable": true },
{ "targets": [3], "width": "35%", "sortable": true },
];
let columns = [
{
"title": "異常ID",
"data": "uuid",
},
{
"title": "異常原因",
"data": "msgText",
},
{
"title": "ACK確認",
"data": "ackState",
},
{
"title": "發生/賦歸時間",
"data": "timestamp",
"width": "45%",
},
];
//let callback = function (result) {
// datas = result;
//}
let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}';
let json_object = JSON.parse(result);
datas = json_object['data'];
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
}
function loadErr(allPath) {
if (allPath != undefined && allPath != null) {
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
else {
console.log("no device");
}
}
function callbackForErr(result) {
let tag = "#errRecTable";
let datas;
let column_defs = [
{ "targets": [0], "width": "15%", "sortable": true },
{ "targets": [1], "width": "25%", "sortable": true },
{ "targets": [2], "width": "25%", "sortable": true },
{ "targets": [3], "width": "35%", "sortable": true },
];
let columns = [
{
"title": "異常ID",
"data": "uuid",
},
{
"title": "異常原因",
"data": "msgText",
},
{
"title": "ACK確認",
"data": "ackState",
},
{
"title": "發生/完成時間",
"data": "normalTime",
"render": function (data, type, row) {
return row.timestamp + "<br>" + data;
},
},
];
let json_object = JSON.parse(result);
datas = json_object['data'];
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
}
</script>