1429 lines
65 KiB
HTML
1429 lines
65 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: 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>
|
||
<span id="emerReturn" class="circle-light"></span>
|
||
</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>
|
||
<span id="groConFail" class="circle-light"></span>
|
||
</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>
|
||
<span id="emerPower" class="circle-light"></span>
|
||
</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>
|
||
<span id="fireReturn" class="circle-light"></span>
|
||
</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>
|
||
<span id="earQuaCon" class="circle-light"></span>
|
||
</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"]
|
||
var allDevList = [];
|
||
var subSeviceData = [];
|
||
var subOrdPath = {
|
||
"building_tag": pageAct.buiTag,
|
||
"system_tag": pageAct.sysMainTag,
|
||
"name_tag": pageAct.sysSubTag,
|
||
};
|
||
|
||
$(function () {
|
||
setBuildFloor(floors.length, 3);
|
||
setCards();
|
||
subDeviceSetStatus();
|
||
})
|
||
function getFloDevList() {
|
||
|
||
}
|
||
//emerReturn
|
||
//groConFail
|
||
//emerPower
|
||
//fireReturn
|
||
//earQuaCon
|
||
|
||
//baja 訂閱設備
|
||
function subDeviceSetStatus() {
|
||
|
||
myBaja = new subscriptionDevices();
|
||
myBaja.setSubscribeDevicesByBql(subOrdPath);
|
||
myBaja.setSubscribeDevicesCallBack(function (data) {
|
||
|
||
function getValueByName(pointName) {
|
||
return data.point_name == pointName ? data.value : null;
|
||
}
|
||
|
||
if (allDevList.length == 0) {
|
||
return false;
|
||
}
|
||
|
||
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 == "ST") {
|
||
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
|
||
}
|
||
|
||
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
|
||
//顯示正常燈號
|
||
$(`#${matchDevice.device_number}_card`).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}_card`).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}_card`).attr("data-light-type", "error").data("light-type", "error");
|
||
}
|
||
setLightColor();
|
||
|
||
if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
|
||
let obj = {};
|
||
obj.device_number = matchDevice.device_number;
|
||
subSeviceData.push(obj)
|
||
} else {
|
||
let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
|
||
subData[data.point_name] = data.value
|
||
}
|
||
subDeviceSetTable(matchDevice.device_number)
|
||
/*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/
|
||
});
|
||
|
||
}
|
||
|
||
//baja 訂閱設備
|
||
function subDeviceSetTable(devNum) {
|
||
let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
|
||
|
||
if (!subData) {
|
||
return false;
|
||
}
|
||
|
||
function creLight(type = "trueText") {
|
||
let lightType = type == "trueText" ? "bg-success" : "bg-danger";
|
||
return creEle("span", null, null, null, [lightType, "circle-light"]).outerHtml();
|
||
}
|
||
|
||
let masterTag = devNum?.split("_")[5];
|
||
|
||
let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
|
||
|
||
|
||
//即時狀態(左側Table)
|
||
$(`#imdStaTable_${devNum} #devNum`).text(devNum);
|
||
$(`#imdStaTable_${devNum} #status`).text(subData["ST"])
|
||
$(`#imdStaTable_${devNum} #group`).text(masterTag);
|
||
$(`#imdStaTable_${devNum} #weight`).text(subData["LOAD"])
|
||
|
||
//運轉模式(右側Table)
|
||
$(`#opeModTable_${devNum} #auto`).html(creLight(subData["DNO"]))
|
||
$(`#opeModTable_${devNum} #vip`).html(creLight(subData["MD"]))
|
||
$(`#opeModTable_${devNum} #onlyRun`).html(creLight(subData["IND"]))
|
||
$(`#opeModTable_${devNum} #manual`).html(creLight(subData["HAND"]))
|
||
$(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"]))
|
||
$(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"]))
|
||
$(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、"))
|
||
|
||
|
||
}
|
||
|
||
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 id="${devObj.device_number}_card" 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">狀態 : <span name="devStatus"></span></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">
|
||
<div class="row">
|
||
<div class="col-xl-6">${drawImdStaBlock(devNum)}</div>
|
||
<div class="col-xl-6">${drawOpeModBlock(devNum)}</div>
|
||
</div>
|
||
</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);
|
||
loadErr($(oriEle).data("number"));
|
||
subDeviceSetTable($(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 drawImdStaBlock(devNum) {
|
||
let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
|
||
let tbody = tabEle.append("<tbody>");
|
||
let rows =
|
||
[
|
||
{ id: "devNum", text: "號機" },
|
||
{ id: "status", text: "狀態" },
|
||
{ id: "group", text: "組別" },
|
||
{ id: "weight", text: "載重" },
|
||
];
|
||
let cols = [
|
||
{ width: "30%" },
|
||
{ width: "40%" },
|
||
{ width: "30%" },
|
||
]
|
||
$.each(rows, (index, row) => {
|
||
let tr = $("<tr></tr>");
|
||
$.each(cols, (index2, col) => {
|
||
let td = $("<td></td>");
|
||
td.css("width", col.width)
|
||
if (index2 == 0) {
|
||
td.text(row.text);
|
||
}
|
||
if (index2 == 1) {
|
||
td.prop("id", row.id)
|
||
}
|
||
tr.append(td);
|
||
})
|
||
tbody.append(tr);
|
||
})
|
||
|
||
return tabEle.outerHtml();
|
||
}
|
||
|
||
function drawOpeModBlock(devNum) {
|
||
let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
|
||
let tbody = tabEle.append("<tbody>");
|
||
let rows =
|
||
[
|
||
{ id: "auto", text: "自動" },
|
||
{ id: "vip", text: "VIP" },
|
||
{ id: "onlyRun", text: "獨立運轉" },
|
||
{ id: "manual", text: "手動" },
|
||
{ id: "runOpe", text: "運轉保養" },
|
||
{ id: "returnFin", text: "回歸完了" },
|
||
{ id: "notSerFloor", text: "不服務樓層" },
|
||
];
|
||
let cols = [
|
||
{ width: "40%" },
|
||
{ width: "30%" },
|
||
{ width: "30%" },
|
||
]
|
||
$.each(rows, (index, row) => {
|
||
let tr = $("<tr></tr>");
|
||
$.each(cols, (index2, col) => {
|
||
let td = $("<td></td>");
|
||
|
||
td.css("width", col.width)
|
||
if (index2 == 0) {
|
||
td.text(row.text);
|
||
}
|
||
if (index2 == 1) {
|
||
td.prop("id", row.id)
|
||
}
|
||
tr.append(td);
|
||
})
|
||
tbody.append(tr);
|
||
})
|
||
|
||
return tabEle.outerHtml();
|
||
}
|
||
|
||
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> |