2022-11-22 18:12:12 +08:00
< style >
.elevator {
background-color:#fff;
height:520px;
}
table.elevator-build {
2022-11-22 18:40:09 +08:00
/*border: 1px double #000;*/
2022-11-22 18:12:12 +08:00
}
table.elevator-build td {
padding: 0.2rem 0.5rem;
2022-11-23 15:38:52 +08:00
height: 50px;
width: 45px;
2022-11-22 18:12:12 +08:00
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" >
2022-11-23 15:38:52 +08:00
< div id = "floorTable_wrapper" class = "elevator-build-container" >
< table id = "floorTable" class = "elevator-build m-auto" >
< / table >
< / div >
2022-11-22 18:12:12 +08:00
< / 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" >
2022-11-23 17:19:28 +08:00
< div id = "eleCards" class = "row" >
2022-11-22 18:12:12 +08:00
< 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 >
2022-11-22 18:40:09 +08:00
var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"]
2022-11-23 17:19:28 +08:00
var allDevList = [];
2022-11-22 18:12:12 +08:00
$(function () {
2022-11-23 17:19:28 +08:00
setBuildFloor(floors.length, 3);
setCards();
subDevice();
2022-11-22 18:12:12 +08:00
})
2022-11-23 17:19:28 +08:00
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"));
}
})
})
}
2022-11-22 18:12:12 +08:00
function setBuildFloor(floorCnt = 10,eleCnt = 3) {
let tbody = creEle("tbody");
2022-11-22 18:40:09 +08:00
//樓層從小到大
let rfloors = floors.reverse();
let eleCircle = creDiv(["elevator-circle"]);
//樓層表格建置
2022-11-22 18:12:12 +08:00
for (let f = 1; f < = floorCnt; f++) {
let tr = creEle("tr");
2022-11-22 18:40:09 +08:00
for (let e = 1; e < = eleCnt + 2; e++) {
2022-11-22 18:12:12 +08:00
let td = creEle("td");
2022-11-22 18:40:09 +08:00
if (e == 1) {
2022-11-23 15:38:52 +08:00
td.addClass("t-black")
2022-11-22 18:40:09 +08:00
td.text(rfloors[f - 1]);
2022-11-23 15:38:52 +08:00
} 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)
2022-11-22 18:40:09 +08:00
}
2022-11-22 18:12:12 +08:00
tr.append(td);
}
tbody.append(tr);
2022-11-23 15:38:52 +08:00
$("#floorTable_wrapper").append(eleCircle)
2022-11-22 18:12:12 +08:00
}
$("#floorTable").html(tbody);
2022-11-23 15:38:52 +08:00
2022-11-22 18:40:09 +08:00
$("#floorTable tbody tr").each((index, tr) => {
$(tr).find("td:eq(0)").css("border-left", "0");
$(tr).find("td:eq(-1)").css("border-right", "0");
2022-11-22 18:12:12 +08:00
if (index == 0) {
2022-11-22 18:40:09 +08:00
$(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");
})
2022-11-22 18:12:12 +08:00
}
})
}
2022-11-23 17:19:28 +08:00
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，
// 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");
}
2022-11-22 18:12:12 +08:00
< / script >
