2022-11-22 18:12:12 +08:00
< style >
.elevator {
2022-11-23 18:28:51 +08:00
background-color: #fff;
2022-11-28 18:08:50 +08:00
min-height: 520px;
2022-11-22 18:12:12 +08:00
}
2022-12-01 19:32:32 +08:00
2022-11-29 12:46:19 +08:00
.elevator-table-wrapper {
2022-12-01 19:32:32 +08:00
padding: 0.8rem;
2022-11-29 12:46:19 +08:00
}
2022-12-01 19:32:32 +08:00
2022-11-22 18:12:12 +08:00
table.elevator-build {
2022-11-22 18:40:09 +08:00
/*border: 1px double #000;*/
2022-11-22 18:12:12 +08:00
}
2022-11-23 18:28:51 +08:00
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;
}
2022-11-23 18:28:51 +08:00
2022-11-22 18:12:12 +08:00
elevator .elevator-body, elevator .elevator-header {
padding: 0.7rem;
}
2022-11-28 12:38:19 +08:00
.elevator-item {
position: absolute;
width: 43px;
height: 47px;
border: 4px solid orange;
}
2022-11-29 12:46:19 +08:00
.elevator-item-toup {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-bottom: 0;
z-index: 2;
}
.elevator-item-todown {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-top: 0;
z-index: 2;
}
2022-11-22 18:12:12 +08:00
< / style >
< div class = "d-flex" >
<!-- 左圖區 -->
2022-12-02 12:18:58 +08:00
< div class = "col-4 my-3" >
2022-11-22 18:12:12 +08:00
< div style = "position:relative " >
< div id = "elevatorBlock" class = "elevator" >
< div class = "elevator-header" >
2022-11-28 12:38:19 +08:00
< div class = "row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle" >
2022-12-08 17:27:32 +08:00
< button class = "btn btn-secondary btn-sm " data-tabname = "floShowType" data-target = "#2dDiv" >
2022-11-28 23:16:14 +08:00
2D
< / button >
2022-12-08 17:27:32 +08:00
< button class = "btn btn-secondary btn-sm active" data-tabname = "floShowType" data-target = "#3dDiv" onclick = "show3D()" >
2022-11-29 12:46:19 +08:00
3D
2022-11-28 12:38:19 +08:00
< / button >
< / div >
2022-11-22 18:12:12 +08:00
< / div >
2022-12-08 17:27:32 +08:00
< div class = "elevator-body d-flex align-items-center justify-content-center" style = "height:85vh;" >
2022-11-29 12:46:19 +08:00
< div id = "2dDiv" class = "p-2" data-tabname = "floShowType" data-tabrole = "child" >
2022-11-23 15:38:52 +08:00
< table id = "floorTable" class = "elevator-build m-auto" >
< / table >
< / div >
2022-12-08 17:27:32 +08:00
< div id = "3dDiv" class = "w-100 h-100 position-relative" data-tabname = "floShowType" data-tabrole = "child" >
< div id = "forgeViewer" style = "" > < / div >
2022-11-29 12:46:19 +08:00
< / 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" /> -->
2022-12-08 17:27:32 +08:00
2022-11-22 18:12:12 +08:00
< / div >
<!-- End - 左圖區 -->
<!-- 中間卡片區 -->
2022-12-02 12:18:58 +08:00
< div class = "col-6 my-3" >
2022-12-08 17:27:32 +08:00
< div id = "eleCards" class = "row col-12 p-0" >
2022-12-02 12:18:58 +08:00
2022-11-22 18:12:12 +08:00
< / div >
2022-12-08 17:27:32 +08:00
< div class = "mt-2 col-8 p-0" >
<!-- <div class="pl - 3 row">
< button id = "resChartZoom" class = "btn btn-info mb-2" > 圖檔重置< / button >
< / div > -->
< div id = "floChart" style = "height : 45vh!important;width:auto;" > < / div >
< / div >
2022-11-22 18:12:12 +08:00
< / 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 >
2022-11-25 18:46:40 +08:00
< i type = "button" class = "fas fa-cog fa-2x ml-3 my-2" data-toggle = "modal" data-target = "#eleManModal" > < / i >
2022-11-22 18:12:12 +08:00
< / 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 >
2022-11-24 19:23:48 +08:00
< label id = "emerReturnText" class = "form-check-label h4" for = "flexRadioDefault1" >
2022-11-22 18:12:12 +08:00
未動作
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< span id = "emerReturn" class = "circle-light bg-secondary" > < / span >
2022-11-22 18:12:12 +08:00
< / div >
< / div >
< div class = "d-flex justify-content-around mt-2" >
< div >
< label class = "form-check-label h4" for = "flexRadioDefault1" >
群控故障
< / label >
< / div >
< div >
2022-11-28 12:38:19 +08:00
< label id = "groConFailText" class = "form-check-label h4" for = "flexRadioDefault1" >
2022-11-22 18:12:12 +08:00
未動作
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< span id = "groConFail" class = "circle-light bg-secondary" > < / span >
2022-11-22 18:12:12 +08:00
< / div >
< / div >
< div class = "d-flex justify-content-around mt-2" >
< div >
< label class = "form-check-label h4" for = "flexRadioDefault1" >
緊急電源
< / label >
< / div >
< div >
2022-11-28 12:38:19 +08:00
< label id = "emerPowerText" class = "form-check-label h4" for = "flexRadioDefault1" >
2022-11-22 18:12:12 +08:00
未動作
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< span id = "emerPower" class = "circle-light bg-secondary" > < / span >
2022-11-22 18:12:12 +08:00
< / div >
< / div >
< div class = "d-flex justify-content-around mt-2" >
< div >
< label class = "form-check-label h4" for = "flexRadioDefault1" >
火災回歸
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< label id = "fireReturnText" class = "form-check-label h4" for = "flexRadioDefault1" >
2022-11-22 18:12:12 +08:00
未動作
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< span id = "fireReturn" class = "circle-light bg-secondary" > < / span >
2022-11-22 18:12:12 +08:00
< / div >
< / div >
< div class = "d-flex justify-content-around mt-2" >
< div >
< label class = "form-check-label h4" for = "flexRadioDefault1" >
地震管制
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< label id = "earQuaConText" class = "form-check-label h4" for = "flexRadioDefault1" >
2022-11-22 18:12:12 +08:00
未動作
< / label >
< / div >
< div >
2022-11-24 19:23:48 +08:00
< span id = "earQuaCon" class = "circle-light bg-secondary" > < / span >
2022-11-22 18:12:12 +08:00
< / div >
< / div >
2022-12-08 17:27:32 +08:00
< div class = "d-flex justify-content-around mt-2" >
< div >
< label class = "form-check-label h4" for = "flexRadioDefault1" >
遠端休止
< / label >
< / div >
< div >
< label id = "disResText" class = "form-check-label h4" for = "flexRadioDefault1" >
未動作
< / label >
< / div >
< div >
< span id = "disRes" class = "circle-light bg-secondary" > < / span >
< / div >
< / div >
< div class = "d-flex justify-content-around mt-2" >
< div >
< label class = "form-check-label h4" for = "flexRadioDefault1" >
RET運轉
< / label >
< / div >
< div >
< label id = "retOpeText" class = "form-check-label h4" for = "flexRadioDefault1" >
未動作
< / label >
< / div >
< div >
< span id = "retOpe" class = "circle-light bg-secondary" > < / span >
< / div >
< / div >
2022-11-22 18:12:12 +08:00
< / 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 -->
2022-11-25 18:46:40 +08:00
< div class = "modal fade" id = "eleManModal" tabindex = "-1" aria-labelledby = "eleManModal" aria-hidden = "true" data-keyboard = "false" >
2022-11-22 18:12:12 +08:00
< div class = "modal-dialog modal-xl" >
< div class = "modal-content" >
< div class = "modal-header" >
2022-11-25 18:46:40 +08:00
< h1 class = "modal-title" > 電梯管理< / h1 >
< button type = "button" class = "close m-0 p-0 px-2 ml-auto" data-dismiss = "modal" aria-label = "Close" >
2022-11-22 18:12:12 +08:00
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2022-11-25 18:46:40 +08:00
< div id = "tabDiv" >
< table id = "eleManTable" class = "table table-hover w-100" >
< / table >
< / div >
< div id = "detDevDiv" style = "display:none" >
< button class = "btn btn-info" data-toggle = "prevDiv" > < i class = "fas fa-angle-left mr-2" > < / i > 上一頁< / button >
2022-11-29 18:58:38 +08:00
< table id = "eleManDevTable" class = "table table-hover" >
2022-11-25 18:46:40 +08:00
< 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" >
< td name = "devName" > < / td >
< td name = "status" > < / td >
< td name = "curFloor" > < / td >
< td >
< div class = "d-flex justify-content-center align-items-center" >
< div class = "row mr-2" >
2022-12-01 19:32:32 +08:00
< input name = "preMea" type = "checkbox" class = "toggle" data-toggle = "toggle" data-point = "SP_DP" >
2022-11-25 18:46:40 +08:00
< / div >
< i id = "preMeaSche" data-point = "DP" class = "fas fa-calendar-alt fs-1-1 mr-2 cur-poi" > < / i >
< / div >
< / td >
< td >
< div class = "d-flex justify-content-center align-items-center" >
< div class = "row mr-2" >
2022-11-29 18:58:38 +08:00
< input name = "stop" type = "checkbox" class = "toggle" data-toggle = "toggle" data-point = "SP_RCS" >
2022-11-25 18:46:40 +08:00
< / div >
< i id = "stopSche" data-point = "RCS" class = "fas fa-calendar-alt fs-1-1 mr-2 cur-poi" > < / i >
< / div >
< / td >
< td >
< div class = "d-flex justify-content-center align-items-center" >
< div class = "row mr-2" >
2022-11-29 18:58:38 +08:00
< input name = "onlyOpe" type = "checkbox" class = "toggle" data-toggle = "toggle" data-point = "SP_IND" >
2022-11-25 18:46:40 +08:00
< / div >
< i id = "onlyOpeSche" data-point = "IND" class = "fas fa-calendar-alt fs-1-1 mr-2 cur-poi" > < / i >
< / div >
< / td >
< td >
< div class = "d-flex justify-content-center align-items-center" >
< div class = "row mr-2" >
2022-11-29 18:58:38 +08:00
< input name = "vip" type = "checkbox" class = "toggle" data-toggle = "toggle" data-point = "SP_VIP" >
2022-11-25 18:46:40 +08:00
< / div >
< i id = "vipSche" data-point = "VIP" class = "fas fa-calendar-alt fs-1-1 mr-2 cur-poi" > < / i >
< / div >
< / td >
< td >
< div class = "d-flex justify-content-center align-items-center" >
< div class = "row mr-2" >
2022-11-29 18:58:38 +08:00
< input name = "retOpe" type = "checkbox" class = "toggle" data-toggle = "toggle" data-point = "SP_RET" >
2022-11-25 18:46:40 +08:00
< / div >
< i id = "retOpeSche" data-point = "RET" class = "fas fa-calendar-alt fs-1-1 mr-2 cur-poi" > < / i >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< div id = "bajaSche" class = "w-100" >
< / div >
< / div >
< div id = "detMasDiv" style = "display:none" >
< button class = "btn btn-info" data-toggle = "prevDiv" > < i class = "fas fa-angle-left mr-2" > < / i > 上一頁< / button >
< div class = "row m-0" >
< table id = "notSerFloTable" class = "table table-hover col-xl-4" >
< / table >
< div id = "bajaMasSche" class = "col-xl-8" >
< / div >
< / div >
< / div >
2022-11-22 18:12:12 +08:00
< / 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-12-01 19:32:32 +08:00
2022-11-25 18:46:40 +08:00
var eleManTable = null;
2022-11-29 12:46:19 +08:00
var allDevList = []; //每個設備
var subSeviceData = []; //每個設備訂閱點位值
var floList = []; //每個樓層
var elevObj = null; //左側 2D 電梯物件
2022-12-07 18:59:53 +08:00
var viewer3DNodeIds = [];
2022-11-30 18:37:07 +08:00
var elev3DBind = {};
var elev3DOption = {};
2022-12-01 19:32:32 +08:00
var elev3DObj = [];
2022-11-24 16:27:00 +08:00
var subOrdPath = {
"building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag,
"name_tag": pageAct.sysSubTag,
};
2022-11-25 18:46:40 +08:00
//平面圖參數
var floChart = null;
var currentData = [];
var allDeviceRowData = []; //所有設備原始資料
var global_emergency_alarm_device_number = [];
var zoomToggle = 3;
2022-11-29 23:44:22 +08:00
var isFirstLoad3D = true;
2022-12-01 19:32:32 +08:00
var isFirstLoadSub = true;
2022-11-22 18:12:12 +08:00
$(function () {
2022-11-25 18:46:40 +08:00
initChart();
2022-12-01 19:32:32 +08:00
2022-11-28 12:38:19 +08:00
setBuildFloor();
2022-11-23 17:19:28 +08:00
setCards();
2022-11-24 16:27:00 +08:00
subDeviceSetStatus();
2022-11-25 18:46:40 +08:00
setEleManTable();
2022-12-01 19:32:32 +08:00
2022-11-22 18:12:12 +08:00
})
2022-11-28 18:08:50 +08:00
2022-11-23 17:19:28 +08:00
function getFloDevList() {
2022-11-23 18:28:51 +08:00
2022-11-23 17:19:28 +08:00
}
//baja 訂閱設備
2022-11-24 16:27:00 +08:00
function subDeviceSetStatus() {
2022-11-23 17:19:28 +08:00
myBaja = new subscriptionDevices();
2022-11-24 16:27:00 +08:00
myBaja.setSubscribeDevicesByBql(subOrdPath);
2022-11-23 17:19:28 +08:00
myBaja.setSubscribeDevicesCallBack(function (data) {
2022-12-06 14:34:04 +08:00
try {
function getValueByName(pointName) {
return data.point_name == pointName ? data.value : null;
}
2022-11-24 16:27:00 +08:00
2022-12-06 14:34:04 +08:00
function actLightByPoi(pointName, selector) {
if (getValueByName(pointName) == "trueText") {
$(selector).removeClass("bg-secondary").addClass("bg-orange");
$(selector).parent("div").prev().find("label").text("運轉中");
} else if (getValueByName(pointName) == "falseText") {
$(selector).removeClass("bg-orange").addClass("bg-secondary");
$(selector).parent("div").prev().find("label").text("未動作");
}
2022-11-24 19:23:48 +08:00
}
2022-12-08 17:27:32 +08:00
function actLightByPoiEx(pointName1, selector, pointName2, exCond) {
$(selector).removeClass("bg-orange").removeClass("bg-red");
if (getValueByName(pointName2) == exCond) {
if (pointName1 == "falseText") {
$(selector).addClass("bg-secondary");
$(selector).parent("div").prev().find("label").text("取消控制");
} else {
$(selector).addClass("bg-red");
$(selector).parent("div").prev().find("label").text("控制");
}
} else {
$(selector).addClass("bg-success");
}
}
2022-12-06 14:34:04 +08:00
if (allDevList.length == 0) {
return false;
}
data.device_number = data.device_number_full;
let matchDevice = allDevList.filter(x => x.device_number == data.device_number)[0];
let master = matchDevice.device_number.split("_")[5];
//狀態
if (data.point_name == "ST") {
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
//若為異常(match資料庫點位值)且後台有設定為閃爍
if (getValueByName("ST") == matchDevice.device_error_point_value) {
$(`#${matchDevice.device_number}_card`).addClass("light-flash")
}
}
//現在樓層
if (data.point_name == "CP") {
$(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
2022-11-25 18:46:40 +08:00
}
2022-12-02 12:18:58 +08:00
2022-12-06 14:34:04 +08:00
if (data.point_name == "RD") {
//往上或往下
if (getValueByName("RD") == "UP") {
$(`#${matchDevice.device_number}_card [name=downFloArrow]`).removeClass("light-flash-c");
$(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c");
} else if (getValueByName("RD") == "DOWN") {
$(`#${matchDevice.device_number}_card [name=upFloArrow]`).removeClass("light-flash-c");
$(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c");
} else {
$(`#${matchDevice.device_number}_card [name=upFloArrow]`).removeClass("light-flash-c");
$(`#${matchDevice.device_number}_card [name=downFloArrow]`).removeClass("light-flash-c");
}
2022-12-02 12:18:58 +08:00
}
2022-12-08 18:12:40 +08:00
2022-12-08 17:27:32 +08:00
if (data.device_number.split("_").slice(-1) == "N1" & & master == "BANK1") {
//消防回歸
actLightByPoi("FE", "#emerReturn");
//群控故障
actLightByPoi("GCM", "#groConFail");
//緊急電源
actLightByPoi("EPS", "#emerPower");
//火災回歸
actLightByPoi("FER", "#fireReturn");
//地震管制
actLightByPoi("EER", "#earQuaCon");
if (data.point_name == "DNO" || data.point_name == "SP_RCS") {
//遠端休止
actLightByPoiEx("SP_RCS", "#disRes", "DNO", "trueText");
}
if (data.point_name == "COR" || data.point_name == "SP_RET") {
//RET運轉
actLightByPoiEx("SP_RET", "#retOpe", "COR", "falseText");
}
}
2022-11-28 12:38:19 +08:00
2022-12-06 14:34:04 +08:00
//將訂閱值塞入 subSeviceData
if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
let obj = {};
obj.device_number = matchDevice.device_number;
subSeviceData.push(obj)
}
2022-11-24 19:23:48 +08:00
2022-12-06 14:34:04 +08:00
let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
2022-11-24 19:23:48 +08:00
2022-12-06 14:34:04 +08:00
if (subData) {
subData[data.point_name] = data.value;
}
// 設置燈色、卡片閃爍
setLightColor();
// Card table 更新
subDeviceSetTable(matchDevice.device_number);
// 重繪 電梯管理 列表
reloadEleManTable(setEleManTabDataFromBaja());
// 電梯管理 detail
subDeviceSetEleManDet(matchDevice.device_number);
// 電梯管理 不服務樓層 detail
subDeviceSetEleManNotSerFloor(master);
} catch (e) {
2022-12-08 17:27:32 +08:00
console.log("e", e)
2022-11-24 16:27:00 +08:00
}
2022-11-23 17:19:28 +08:00
});
2022-12-01 19:32:32 +08:00
myBaja.setSubscribeDeviceEndCallBack(function (data) {
2022-12-08 17:27:32 +08:00
2022-12-02 11:21:05 +08:00
let devNumArr = data.map(x => { return { devNum: x.device_number_full, priority: allDevList.filter(y => y.device_number == x.device_number_full)[0]?.priority } }).DistinctBy("devNum");
devNumArr = devNumArr.oSort("priority");
$.each(devNumArr, (idx, devObj) => {
devNum = devObj.devNum;
2022-12-01 19:32:32 +08:00
let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
if (subData) {
2022-12-07 18:59:53 +08:00
//// 左側 3D 電梯 nodeID 與 device_number match
//if (Object.keys(elev3DBind).indexOf(devNum) == -1 & & viewer3DNodeIds.length != 0) {
// elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
//}
2022-12-01 19:32:32 +08:00
// 左側 3D 電梯 Viewer Option 設置
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
elev3DOption.nodeId = elev3DBind[devNum];
elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
elev3DOption.floorHeight.forEach((floObj, idx) => {
if (floObj.floor.startsWith("B")) {
let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
floObj.height = floor * -13;
} else {
let floor = parseInt(floObj.floor.split("F")[0]);
if (floor == 1) {
floObj.height = 0;
} else if (floor == 2) {
floObj.height = 14.75;
} else {
floObj.height = (14.75 + ((floor - 2) * 9.75));
}
}
})
2022-12-08 18:12:40 +08:00
2022-12-01 19:32:32 +08:00
if (isFirstLoad3D == false & & elev3DObj.length != 0) {
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
elevObj.obj.init(function () {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]);
2022-12-08 18:12:40 +08:00
2022-12-01 19:32:32 +08:00
frags.forEach((fragProxy) => {
fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
2022-12-03 16:45:20 +08:00
fragProxy.frag.updateAnimTransform();
2022-12-01 19:32:32 +08:00
})
elevObj.obj.viewer.impl.sceneUpdated(true);
});
}
}
})
reloadEleManTable(setEleManTabDataFromBaja());
2022-12-02 15:46:37 +08:00
$(loadEle).Loading("close");
2022-12-01 19:32:32 +08:00
})
2022-11-23 17:19:28 +08:00
}
2022-11-25 18:46:40 +08:00
// baja 訂閱 變更 電梯管理 Table
function setEleManTabDataFromBaja() {
2022-12-01 19:32:32 +08:00
2022-11-25 18:46:40 +08:00
let result = [];
let masterList = allDevList.map(x => x.device_number.split("_")[5]).Distinct();
2022-12-02 12:18:58 +08:00
2022-11-25 18:46:40 +08:00
// Master(第六段) 區分
$.each(masterList, (idx, master) => {
2022-12-02 12:18:58 +08:00
2022-11-25 18:46:40 +08:00
let main = {};
// 匯入 Master 名稱`
main.devName = master;
2022-11-30 12:29:56 +08:00
let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
2022-12-01 19:32:32 +08:00
if (subData) {
$.each(Object.keys(subData), (idx3, subKey) => {
if (subKey.startsWith("SP_FLS_")) {
main[subKey] = subData[subKey];
}
})
2022-12-02 09:38:06 +08:00
main._rowType = "master";
result.push(main);
// 該 Master 底下的設備
let devListByMaster = allDevList.filter(x => x.device_number.split("_")[5] == master);
$.each(devListByMaster, (idx2, devObj) => {
let subData = subSeviceData.filter(x => x.device_number == devObj.device_number)[0];
if (subData) {
main = {};
main.devNum = devObj.device_number;
main.devName = devObj.full_name;
main._rowType = "device";
// 該設備點位匯入
$.each(Object.keys(subData), (idx3, subKey) => {
main[subKey] = subData[subKey];
})
// 匯入設備資訊(訂閱點位)
result.push(main);
}
})
}
2022-11-25 18:46:40 +08:00
})
2022-12-03 16:45:20 +08:00
/*console.log("result:", result)*/
2022-11-25 18:46:40 +08:00
return result;
}
2022-11-24 16:27:00 +08:00
2022-11-25 18:46:40 +08:00
// Card - 設置列表中訂閱內容
function subDeviceSetTable(devNum) {
2022-12-06 14:34:04 +08:00
if (allDevList.filter(x => !x.device_number).length > 0) {
2022-12-08 18:12:40 +08:00
2022-12-06 14:34:04 +08:00
}
2022-11-24 19:23:48 +08:00
let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
2022-11-24 16:27:00 +08:00
if (!subData) {
return false;
}
function creLight(type = "trueText") {
let lightType = type == "trueText" ? "bg-success" : "bg-danger";
2022-12-01 19:32:32 +08:00
2022-11-28 18:08:50 +08:00
return $(creEle("span", null, null, null, [lightType, "circle-light"])).outerHtml();
2022-11-24 16:27:00 +08:00
}
let masterTag = devNum?.split("_")[5];
2022-11-24 19:23:48 +08:00
let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") & & subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
2022-11-28 18:08:50 +08:00
floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
2022-11-28 12:38:19 +08:00
2022-11-29 12:46:19 +08:00
//左側 2D 電梯物件 樓層資料更新
if (elevObj.floors.length != floList.length) {
elevObj.floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx + 1 } });
elevObj.elevators = allDevList.map((x) => { return { id: x.device_number } });
elevObj.curElevFloor[matchDevice.device_number] = subData["CP"];
elevObj.redraw();
} else {
elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
}
2022-12-02 12:18:58 +08:00
2022-12-06 14:34:04 +08:00
2022-12-08 17:27:32 +08:00
if (elev3DObj.length != 0) {
2022-12-01 19:32:32 +08:00
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
if (elevObj & & elevObj.id) {
elevObj.obj.setElevatorFloor(subData["CP"])
elevObj.obj.movElevator();
}
2022-11-30 18:37:07 +08:00
}
2022-12-08 18:12:40 +08:00
2022-11-29 12:46:19 +08:00
elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
2022-11-24 19:23:48 +08:00
//現在樓層
if (subData["CP"]) {
2022-11-29 12:46:19 +08:00
$(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"]);
2022-11-24 19:23:48 +08:00
}
2022-12-08 18:12:40 +08:00
2022-11-24 19:23:48 +08:00
//往上或往下
if (subData["RD"] == "UP") {
2022-12-02 12:18:58 +08:00
$(`#imdStaTable_${devNum} [name=downFloArrow]`).removeClass("light-flash-c");
2022-11-24 19:23:48 +08:00
$(`#imdStaTable_${devNum} [name=upFloArrow]`).addClass("light-flash-c");
2022-12-02 12:18:58 +08:00
} else if (subData["RD"] == "DOWN") {
$(`#imdStaTable_${devNum} [name=upFloArrow]`).removeClass("light-flash-c");
2022-11-24 19:23:48 +08:00
$(`#imdStaTable_${devNum} [name=downFloArrow]`).addClass("light-flash-c");
2022-12-02 12:18:58 +08:00
} else {
$(`#imdStaTable_${devNum} [name=upFloArrow]`).removeClass("light-flash-c");
$(`#imdStaTable_${devNum} [name=downFloArrow]`).removeClass("light-flash-c");
2022-11-24 19:23:48 +08:00
}
2022-11-24 16:27:00 +08:00
//即時狀態(左側Table)
2022-11-24 19:23:48 +08:00
$(`#imdStaTable_${devNum} #devName`).text(matchDevice.full_name);
2022-11-24 16:27:00 +08:00
$(`#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("、"))
2022-11-23 17:19:28 +08:00
}
2022-11-25 18:46:40 +08:00
//取得設備 並繪製Card
2022-11-23 17:19:28 +08:00
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 = ``;
2022-11-30 12:29:56 +08:00
let masterArr = [];
2022-12-02 12:18:58 +08:00
2022-12-01 19:32:32 +08:00
$("#eleCards").html("");
2022-12-02 12:18:58 +08:00
2022-11-23 17:19:28 +08:00
$.each(res.data, (index, floObj) => {
2022-12-01 19:32:32 +08:00
let masters = floObj.device_list.map(x => x.device_number?.split("_")[5]).Distinct();
2022-12-02 12:18:58 +08:00
2022-12-01 19:32:32 +08:00
$.each(masters, (idx, master) => {
2022-12-02 12:18:58 +08:00
let masDiv = creDiv(["col-12", "row", "m-0", "gap-5"]);
masDiv.append(creEle("h2", master, null, null, ["col-12", "p-0"]));
2022-12-01 19:32:32 +08:00
strHtml = ``;
floObj.device_list.filter(x => x.device_number?.split("_")[5] == master).forEach((devObj) => {
allDevList.push(devObj);
allDevList = allDevList.oSort("priority")
masDiv.append($(`< div id = "${devObj.device_number}_card" class = "card dev-card text-white 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 name = "upFloArrow" class = "fas fa-caret-up fa-3x ml-auto" style = "--flash-color-1:#6fe560;--flash-color-2:#fff;" > < / i >
< / span >
< h4 name = "curFloor" class = "d-flex justify-content-end mb-0" > < / h4 >
< span class = "d-flex" >
< p class = "card-text" > 狀態 : < span name = "devStatus" > < / span > < / p >
< i name = "downFloArrow" class = "fas fa-caret-down fa-3x ml-auto" style = "--flash-color-1:#6fe560;--flash-color-2:#fff;" > < / i >
< / span >
< / div >
< / div > `));
})
$("#eleCards").append(masDiv);
2022-12-02 12:18:58 +08:00
2022-11-23 17:19:28 +08:00
})
2022-12-02 12:18:58 +08:00
2022-11-23 17:19:28 +08:00
})
initPopover();
2022-11-25 18:46:40 +08:00
//平面圖載入
chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`);
getDevice(res.data[0].device_list);
2022-11-23 17:19:28 +08:00
}
}, null, "POST").send();
}
2022-11-25 18:46:40 +08:00
//左側 2D 樓層 Table
2022-11-28 12:38:19 +08:00
function setBuildFloor() {
2022-11-29 12:46:19 +08:00
elevObj = new ElevatorHandler("#floorTable");
2022-11-22 18:12:12 +08:00
}
2022-11-29 12:46:19 +08:00
// Card 即時狀態
2022-11-24 19:23:48 +08:00
function drawStateTabBlo(devNum) {
let div = creDiv(["row"]);
div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum)))
div.append(creDiv(["col-xl-6"]).append(drawOpeModBlock(devNum)))
return div.outerHtml();
2022-11-23 17:19:28 +08:00
}
2022-11-29 12:46:19 +08:00
// Card 即時狀態 - 左側 table
2022-11-24 16:27:00 +08:00
function drawImdStaBlock(devNum) {
let tabEle = $(`< table id = "imdStaTable_${devNum}" class = "table table-bordered table-striped text-center m-0" > `);
2022-11-23 18:28:51 +08:00
let tbody = tabEle.append("< tbody > ");
let rows =
[
2022-11-24 19:23:48 +08:00
{ id: "devName", text: "號機" },
{ id: "devNum", text: "Tag Name" },
2022-11-23 18:28:51 +08:00
{ id: "status", text: "狀態" },
{ id: "group", text: "組別" },
{ id: "weight", text: "載重" },
];
let cols = [
{ width: "30%" },
{ width: "40%" },
{ width: "30%" },
]
2022-11-24 19:23:48 +08:00
let data = [{
2022-11-28 12:38:19 +08:00
row: 0, col: 2, style: "vertical-align:middle",
2022-11-24 19:23:48 +08:00
data: `< div class = "flex-column" >
< i name = "upFloArrow" class = "fas fa-caret-up fa-3x ml-auto" style = "--flash-color-1:#6fe560;--flash-color-2:#fff;" > < / i >
< h4 name = "curFloor" class = "d-flex justify-content-center mb-0" > < / h4 >
< i name = "downFloArrow" class = "fas fa-caret-down fa-3x ml-auto" style = "--flash-color-1:#6fe560;--flash-color-2:#fff;" > < / i >
< / div >
`}]
2022-11-23 18:28:51 +08:00
$.each(rows, (index, row) => {
let tr = $("< tr > < / tr > ");
$.each(cols, (index2, col) => {
2022-11-24 19:23:48 +08:00
if (index < 1 | | index > 99 || index2 != 2) {
let td = $("< td > < / td > ");
td.css("width", col.width)
if (index2 == 0) {
td.text(row.text);
}
if (index2 == 1) {
td.prop("id", row.id)
}
if (index == 0 & & index2 == 2) {
td.attr("rowspan", 99)
}
if (data.filter(x => x.row == index & & x.col == index2).length != 0) {
let target = data.filter(x => x.row == index & & x.col == index2)[0];
td.css("cssText", target.style);
td.html(target.data);
}
tr.append(td);
2022-11-24 16:27:00 +08:00
}
2022-11-23 18:28:51 +08:00
})
tbody.append(tr);
})
return tabEle.outerHtml();
}
2022-11-29 12:46:19 +08:00
// Card 即時狀態 - 右側 table
2022-11-24 16:27:00 +08:00
function drawOpeModBlock(devNum) {
let tabEle = $(`< table id = "opeModTable_${devNum}" class = "table table-bordered table-striped text-center m-0" > `);
2022-11-23 18:28:51 +08:00
let tbody = tabEle.append("< tbody > ");
let rows =
[
2022-11-24 16:27:00 +08:00
{ id: "auto", text: "自動" },
{ id: "vip", text: "VIP" },
{ id: "onlyRun", text: "獨立運轉" },
{ id: "manual", text: "手動" },
2022-12-08 17:27:32 +08:00
{ id: "runOpe", text: "保養運轉" },
2022-11-24 16:27:00 +08:00
{ id: "returnFin", text: "回歸完了" },
{ id: "notSerFloor", text: "不服務樓層" },
2022-11-23 18:28:51 +08:00
];
let cols = [
2022-11-24 19:23:48 +08:00
{ width: "50%" },
{ width: "50%" },
2022-11-23 18:28:51 +08:00
]
$.each(rows, (index, row) => {
let tr = $("< tr > < / tr > ");
$.each(cols, (index2, col) => {
let td = $("< td > < / td > ");
2022-11-24 19:23:48 +08:00
2022-11-23 18:28:51 +08:00
td.css("width", col.width)
if (index2 == 0) {
td.text(row.text);
}
2022-11-24 16:27:00 +08:00
if (index2 == 1) {
td.prop("id", row.id)
}
2022-11-23 18:28:51 +08:00
tr.append(td);
})
tbody.append(tr);
})
return tabEle.outerHtml();
}
2022-11-29 12:46:19 +08:00
// 電梯管理 Modal - 資料更新
2022-11-25 18:46:40 +08:00
function reloadEleManTable(datas) {
let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
$.each(datas, (idx, data) => {
$.each(tabCols, (idx2, value) => {
if (Object.keys(data).indexOf(value) == -1) {
datas[idx][value] = null;
}
})
})
2022-11-28 12:38:19 +08:00
2022-11-25 18:46:40 +08:00
eleManTable.clear().rows.add(datas).draw();
}
2022-11-29 12:46:19 +08:00
// 電梯管理 Modal - table 初始化
2022-11-25 18:46:40 +08:00
function setEleManTable() {
let tag = "#eleManTable";
let datas = [];
2022-11-28 12:38:19 +08:00
2022-11-25 18:46:40 +08:00
let column_defs = [
2022-12-02 09:38:06 +08:00
{ "targets": [0], "width": "10%", "sortable": false },
{ "targets": [1], "width": "10%", "sortable": false },
{ "targets": [2], "width": "10%", "sortable": false },
{ "targets": [3], "width": "10%", "sortable": false },
{ "targets": [4], "width": "10%", "sortable": false },
{ "targets": [5], "width": "10%", "sortable": false },
{ "targets": [6], "width": "10%", "sortable": false },
{ "targets": [7], "width": "10%", "sortable": false },
{ "targets": [8], "width": "10%", "sortable": false },
{ "targets": [9], "width": "10%", "sortable": false },
2022-11-25 18:46:40 +08:00
];
let columns = [
{
"title": "號機",
"data": "devName",
},
{
"title": "狀態",
"data": "ST",
},
{
"title": "所在樓層",
"data": "CP",
},
{
"title": "載重",
"data": "LOAD",
},
{
"title": "休止",
2022-11-30 12:29:56 +08:00
"data": "SP_RCS",
2022-11-25 18:46:40 +08:00
},
{
"title": "獨立運轉",
"data": "SP_IND",
},
{
"title": "VIP",
2022-11-30 12:29:56 +08:00
"data": "SP_VIP",
2022-11-25 18:46:40 +08:00
},
{
"title": "回歸",
2022-11-30 12:29:56 +08:00
"data": "SP_RET",
2022-11-25 18:46:40 +08:00
},
{
"title": "不服務樓層",
"data": null,
"render": function (data, type, row) {
2022-11-30 12:29:56 +08:00
let result = "";
if (row._rowType == "master") {
result = Object.keys(row).filter(x => x.startsWith("SP_FLS_") & & row[x] == "trueText").map(x => x?.split("SP_FLS_")[1]).join("、");
}
return result;
2022-11-25 18:46:40 +08:00
}
},
{
"title": "動作",
"data": null,
2022-11-28 12:38:19 +08:00
"className": "text-center",
2022-11-25 18:46:40 +08:00
"render": function (data, type, row) {
let btn = '';
if (row._rowType == "master") {
btn = creBtn("編輯", "eleManMasEdit" + row.devName, null, ["btn", "btn-info"]);
2022-11-28 12:38:19 +08:00
} else if (row._rowType == "device") {
2022-11-25 18:46:40 +08:00
btn = creBtn("編輯", "eleManDevEdit" + row.devNum, null, ["btn", "btn-info"]);
}
btn.append(`< i class = "fal fa-pen pl-1" > < / i > `);
return btn.outerHtml();
}
},
];
eleManTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
2022-12-02 09:38:06 +08:00
eleManTable.order([]).draw();
2022-11-25 18:46:40 +08:00
}
// 電梯管理 Modal - 設置 Detail 訂閱內容
function subDeviceSetEleManDet(devNum) {
if ($("#eleManModal").is(":visible") == false) {
return false;
}
let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
if (!subData) {
return false;
}
function bajaValToBool(boolText) {
return boolText == "trueText";
}
2022-11-28 12:38:19 +08:00
2022-11-25 18:46:40 +08:00
$("#eleManModal #detDevDiv [name=devName]").text(matchDevice.full_name);
$("#eleManModal #detDevDiv [name=status]").text(subData["ST"]);
2022-11-30 12:29:56 +08:00
$("#eleManModal #detDevDiv [name=curFloor]").text(subData["CP"]);
2022-11-25 18:46:40 +08:00
$("#eleManModal #detDevDiv [name=preMea]").prop("checked", bajaValToBool(subData["SP_DP"])); //防疫對策
$("#eleManModal #detDevDiv [name=stop]").prop("checked", bajaValToBool(subData["SP_RCS"]));
$("#eleManModal #detDevDiv [name=onlyOpe]").prop("checked", bajaValToBool(subData["SP_IND"]));
$("#eleManModal #detDevDiv [name=vip]").prop("checked", bajaValToBool(subData["SP_VIP"]));
$("#eleManModal #detDevDiv [name=retOpe]").prop("checked", bajaValToBool(subData["SP_RET"]));
}
// 電梯管理 Modal - 設置 不服務樓層 訂閱內容
function subDeviceSetEleManNotSerFloor(master) {
if ($("#eleManModal").is(":visible") == false) {
return false;
}
let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
let allSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
$("#notSerFloTable").html(setNotSerFloTable(allSerFloors));
let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") & & subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
2022-12-01 19:32:32 +08:00
2022-11-25 18:46:40 +08:00
$(`[name^=notSerChk]`).prop("checked", false);
$.each(notSerFloors, (idx, floor) => {
$(`[name=notSerChk${floor}]`).prop("checked", true);
})
}
// 電梯管理 Modal - 不服務樓層 設定列表
function setNotSerFloTable(floors) {
2022-11-28 12:38:19 +08:00
let tbody = $("< tbody > < / tbody > ");
2022-11-25 18:46:40 +08:00
let rows = [];
2022-11-28 12:38:19 +08:00
2022-11-25 18:46:40 +08:00
$.each(floors, (idx, floor) => {
rows.push({ id: floor, text: floor });
})
let cols = [
{ width: "50%" },
{ width: "50%" },
]
let datas = [];
$.each(rows, (idx, row) => {
datas.push({
row: idx,
col: 1,
2022-11-30 12:29:56 +08:00
data: `< input name = "notSerChk${row.text}" data-point = "SP_FLS_${row.id}" type = "checkbox" class = "toggle" data-toggle = "toggle" > `,
2022-11-25 18:46:40 +08:00
})
})
$.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)
}
if (datas.filter(x => x.row == index & & x.col == index2).length != 0) {
let target = datas.filter(x => x.row == index & & x.col == index2)[0];
td.css("cssText", target.style);
td.html(target.data);
}
tr.append(td);
})
tbody.append(tr);
})
return tbody.outerHtml();
}
// 電梯管理 Modal 按下設備編輯進入 Detail
onEvent("click", "#eleManTable [id^=eleManDevEdit]", function () {
let devNum = $(this).prop("id").split("eleManDevEdit")[1];
let scheBtn = ["preMeaSche", "stopSche", "onlyOpeSche", "vipSche", "retOpeSche"];
2022-11-29 18:58:38 +08:00
$("#detDevDiv").data("devnum", devNum);
2022-11-25 18:46:40 +08:00
$("#bajaSche").html("");
// 電梯管理 Modal 切換到 detail 頁面
2022-11-28 12:38:19 +08:00
modalTogDiv("#eleManModal", "#tabDiv", "#detDevDiv", "next", function () {
2022-11-25 18:46:40 +08:00
subDeviceSetEleManDet(devNum);
$.each(scheBtn, (idx, scheSelector) => {
2022-11-28 12:38:19 +08:00
onEvent("click", `#${scheSelector}`, function () {
2022-11-25 18:46:40 +08:00
let devNumPath = devNum.split("_").join("/");
let point = $(this).data("point");
2022-11-28 12:38:19 +08:00
let ifHtml = `< iframe src = "/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width = "100%" height = "100%" style = "height:30rem" > < / iframe > `
2022-11-25 18:46:40 +08:00
$("#bajaSche").html(ifHtml);
})
})
2022-11-28 12:38:19 +08:00
2022-11-25 18:46:40 +08:00
})
})
// 電梯管理 Modal 按下設備編輯進入 Detail
onEvent("click", "#eleManTable [id^=eleManMasEdit]", function () {
let master = $(this).prop("id").split("eleManMasEdit")[1];
let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
$("#bajaMasSche").html("");
2022-11-30 12:29:56 +08:00
$("#detMasDiv").data("devnum", subData.device_number);
2022-11-25 18:46:40 +08:00
// 電梯管理 Modal 切換到 detail 頁面
modalTogDiv("#eleManModal", "#tabDiv", "#detMasDiv", "next", function () {
subDeviceSetEleManNotSerFloor(master);
let devNumPath = subData.device_number?.split("_").join("/");
2022-11-28 12:38:19 +08:00
let ifHtml = `< iframe src = "/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width = "100%" height = "100%" style = "height:30rem" > < / iframe > `
2022-11-25 18:46:40 +08:00
$("#bajaMasSche").html(ifHtml);
})
})
2022-11-29 18:58:38 +08:00
// 電梯管理 Modal 不服務樓層 設定不服務樓層(BAJA)
2022-11-30 12:29:56 +08:00
onEvent("change", "#notSerFloTable [name^=notSerChk]", function () {
let devNum = $("#detMasDiv").data("devnum");
let devNumPath = devNum?.split("_").join("/");
let checked = $(this).prop("checked");
let tarPoint = $(this).data("point");
2022-11-28 18:08:50 +08:00
require(['baja!'], function (baja) {
2022-11-30 12:29:56 +08:00
baja.Ord.make(`local:|foxs:|station:|slot:/${devNumPath}`).get()
.then(function (folder) {
folder.getSlots().isComponent().eachValue(function (point) {
if (point.getDisplayName() == tarPoint) {
point.set1({
value: checked
})
}
})
2022-11-28 18:08:50 +08:00
});
});
})
2022-11-29 18:58:38 +08:00
// 電梯管理 Modal 設備 設定點位(BAJA)
onEvent("change", "#eleManDevTable input:checkbox", function () {
let devNum = $("#detDevDiv").data("devnum");
2022-11-30 12:29:56 +08:00
let tarPoint = $(this).data("point");
let checked = $(this).prop("checked");
2022-11-29 18:58:38 +08:00
let devNumPath = devNum?.split("_").join("/");
require(['baja!'], function (baja) {
2022-11-30 12:29:56 +08:00
baja.Ord.make(`local:|foxs:|station:|slot:/${devNumPath}`).get()
.then(function (folder) {
folder.getSlots().isComponent().eachValue(function (point) {
if (point.getDisplayName() == tarPoint) {
point.set1({
value: checked
})
}
2022-11-29 18:58:38 +08:00
})
2022-11-30 12:29:56 +08:00
2022-11-29 18:58:38 +08:00
});
});
})
2022-11-25 18:46:40 +08:00
// 切換 modal 內 div 頁面
function modalTogDiv(modal, div1, div2, type = "next", callback = null) {
$(modal).find(div1).parent("div").css("overflow", "hidden");
2022-11-28 12:38:19 +08:00
$(modal).find(div1).css({ "position": "relative" });
$(modal).find(div2).css({ "position": "relative" });
2022-11-25 18:46:40 +08:00
let aniDiv1Obj = {}, aniDiv2Obj = {};
if (type == "next") {
aniDiv1Obj.left = "-200%";
aniDiv2Obj.left = "0%";
} else if (type == "back") {
aniDiv1Obj.left = "200%";
aniDiv2Obj.left = "0%";
}
$(modal).find(div1).animate(aniDiv1Obj, 400, function () {
$(modal).find(div1).css("display", "none");
$(modal).find(div2).css("display", "block");
$(modal).find(div2).animate(aniDiv2Obj, 400, function () {
callback ? callback() : "";
})
if (type == "next") {
$(modal).find("[data-toggle='prevDiv']").show();
} else {
$(modal).find("[data-toggle='prevDiv']").hide();
}
let modalId = $(modal).prop("id");
onEvent("click", `#${modalId} [data-toggle='prevDiv']`, function () {
modalTogDiv(modal, div2, div1, "back", function () {
})
})
});
}
//=====================================================================
2022-11-30 12:29:56 +08:00
// ↓ 樓層平面圖 ↓
2022-11-25 18:46:40 +08:00
//=====================================================================
function getDevice(devList) {
let selected_floor = devList[0];
//let selected_floor_objs = devList.filter(function (item) {
// return item.floor_guid == selected_floor.floor_guid;
//});
//currentData = selected_floor_objs[0].device;
currentData = $.map(devList, function (item) {
//資料處理
if (selected_floor.device_number != undefined
& & selected_floor.device_number != null
& & selected_floor.device_number != ""
& & selected_floor.device_number == item.device_number) {
item.selected = true;
} else {
item.selected = false;
}
if (item.device_coordinate != undefined & & item.device_coordinate != null) {
var coordinate = item.device_coordinate.split(',')
item.value = [
parseFloat(coordinate[0]),
parseFloat(coordinate[1])
]
}
if (item.device_nodes != undefined
& & item.device_nodes != null
& & item.device_nodes.length > 0) {
if (item.device_master_number == selected_floor.device_master) {
//var datatable_data = {
// device_full_name: item.full_name,
// device_number: item.device_number,
// device_master: item.device_master_number
//}
//datatable_data_list.push(datatable_data);
$.map(item.device_nodes, function (item_node) {
item_node.selected = false;
if (item_node.device_node_coordinate != undefined & & item_node.device_node_coordinate != null) {
var node_coordinate = item_node.device_node_coordinate.split(',')
item_node.value = [
parseFloat(node_coordinate[0]),
parseFloat(node_coordinate[1])
]
}
});
}
else {
//var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
//if (index < 0 ) {
// var datatable_data = {
// device_number: item.device_number,
// device_master: item.device_master_number
// }
// datatable_data_list.push(datatable_data);
//}
$.map(item.device_nodes, function (item_node) {
item_node.selected = false;
if (item_node.device_node_coordinate != undefined & & item_node.device_node_coordinate != null) {
var node_coordinate = item_node.device_node_coordinate.split(',')
item_node.value = [
parseFloat(node_coordinate[0]),
parseFloat(node_coordinate[1])
]
}
});
}
}
return item;
});
2022-12-01 19:32:32 +08:00
2022-11-25 18:46:40 +08:00
if (currentData == null || currentData.length == 0) {
this.currentData = [];
}
// myBaja.setPrepareSubscribeDevices(currentData);
// myBaja.setCallBack(mySubscribeDevices);
//if (datatable_data_list.length > 0) {
// $("#datatablediv").show();
// dataTableDraw();
//} else {
// $("#datatablediv").hide();
//}
resetData();
}
onEvent("click", "#resChartZoom", function () {
floChart.setOption({
geo: {
center: null,
zoom: 1.2,
},
});
resetData();
})
function initChart() {
let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: 'auto' });
}
function chartHandler(url) {
floChart.clear();
$.get(url, function (svg) {
if (svg == undefined || svg == null) {
return;
}
echarts.registerMap('floor_svg', { svg: svg });
2022-11-23 17:19:28 +08:00
2022-11-25 18:46:40 +08:00
option = {
// animationDurationUpdate: 1500,
tooltip: {
formatter: function (params) {
2022-12-01 19:32:32 +08:00
2022-11-25 18:46:40 +08:00
if (params.data.device_node_guid != undefined & & params.data.device_node_guid != null & & params.data.device_node_guid != "") {
return `名稱：${params.data.device_node_full_name}< br >
Guid：
}
else {
return `名稱：${params.data.full_name}< br >
Guid：
}
}
},
toolbox: { //工具欄
show: false
},
geo: {
map: 'floor_svg',
roam: true,
scaleLimit: { //限制放大縮小倍數
max: 32,
min: 1
},
layoutSize: '100%',
2022-12-08 17:27:32 +08:00
layoutCenter: ['40%','50%'],
2022-11-25 18:46:40 +08:00
zoom: 1.2,
silent: true
},
series: [
{ //不管有無被選擇(圓點)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
/*data: currentData,*/
z: 2
},
{ //未選擇的設備(icon)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //被選擇的設備(icon)
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
showEffectOn: 'render',
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //編輯模式底下的設備(圓點，只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
/*data: currentData,*/
z: 2
},
{ //編輯模式底下的設備(icon，
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
data: null,
z: 1
},
],
};
floChart.setOption(option);
if (currentData != undefined & & currentData != null & & currentData.length > 0) {
resetData();
}
var ordPath = {
"building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag,
}
//myBaja.setSubscribeDevicesByBql(ordPath);
//myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
2022-12-03 16:45:20 +08:00
/*console.log(floChart)*/
2022-11-25 18:46:40 +08:00
floChart.getZr().on('click', function (params) {
console.log("click", params);
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
temp_device_on_floor_map = [{
device_guid: selected_temp_device.device_guid,
device_full_name: selected_temp_device.device_full_name,
device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
status: selected_temp_device.status,
value: dataPoint
}];
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option);
});
//floChart.on('selectchanged', function (params) {
// console.log("selectchanged", params);
// // currentData.push([dataPoint[0], dataPoint[1], 1]);
// // floChart.setOption(option);
// currentData = $.map(currentData, function (item) {
// item.selected = false;
// return item;
// });
// if (params.selected.length > 0) {
// currentData[params.selected[0].seriesIndex - 1].selected = true;
// }
//});
// floChart.getZr().on('mousewheel', function (params) {
// console.log(params)
// })
floChart.on('georoam', function (params) {
var zoom = floChart.getOption().geo[0].zoom;
if (zoom < = 2.5) {
/*ResetFloorMap();*/
floChart.setOption({
geo: {
roam: 'scale'
},
});
} else {
floChart.setOption({
geo: {
roam: true
},
});
}
resetData();
});
})
.fail(function () {
toast_warning("查無該樓層地圖")
floChart.clear();
});
}
//訂閱設備的回傳值，並塞到全域變數
function subscribeCallBack(change_device, is_need_reset = false) {
if (change_device != undefined & & change_device != null) {
var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
if (target_device == undefined || target_device == null) {
//新增
obj = {
device_number: change_device.device_number,
points: [{
name: change_device.point_name,
value: change_device.value
}]
};
allDeviceRowData.push(obj);
}
else {
selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
if (selected_device_point != null) {
selected_device_point.value = change_device.value;
}
else {
obj = {
name: change_device.point_name,
value: change_device.value
}
target_device.points.push(obj);
}
}
if (is_need_reset) {
resetData();
}
}
}
// 重設平面圖設備資料
function resetData() {
const scatter_symbol_convertData = function (data, zoom) { //正常、關閉排除CCVT(圓點)
let res = [], temp = [];
data.forEach(function (item, index) {
if (global_emergency_alarm_device_number != undefined
& & global_emergency_alarm_device_number != null) {
if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 & & item . device_system_category_layer3 ! = " C " ) {
//如果有子節點，則只針對子節點操作
if (item.device_nodes != undefined & & item.device_nodes != null & & item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 = item.device_system_category_layer3;
item_node.device_normal_color = item.device_normal_color;
item_node.device_close_color = item.device_close_color;
//判斷父節點狀態
var device_index = allDeviceRowData.findIndex(x => x.device_number == item.device_number)
var temp_point_value;
if (device_index > -1) {
if (item.device_normal_point_name != null || item.device_close_point_name != null) {
//當其中point name 不為null的情況
if (item.device_normal_point_name != null) {
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name);
temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
}
}
if (item.device_close_point_name != null) {
temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
}
}
} else {
if (item.device_normal_point_name == "ER") {
temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
if (temp_point_value == "true") {
item_node.device_color = item.device_normal_color;
} else {
temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
}
}
} else if (item.device_close_point_name == "ER") {
temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
if (temp_point_value == "true") {
item_node.device_color = item.device_close_color;
} else {
temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
}
}
} else {
temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
if (temp_point_value == item.device_normal_point_value) {
item_node.device_color = item.device_normal_color;
} else if (temp_point_value == item.device_close_point_value) {
item_node.device_color = item.device_close_color;
}
}
}
}
temp.push(item_node);
});
} else {
var device_index = allDeviceRowData.findIndex(x => x.device_number == item.device_number)
if (device_index > -1) {
if (item.device_normal_point_name != null || item.device_close_point_name != null) {
//當其中point name 有為null的情況
if (item.device_normal_point_name != null) {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
if (temp_point_value == item.device_normal_point_value) {
item.device_color = item.device_normal_color;
}
}
if (item.device_close_point_name != null) {
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value;
if (temp_point_value == item.device_close_point_value) {
item.device_color = item.device_close_color;
}
}
} else {
if (item.device_normal_point_name == "ER") {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
if (temp_point_value == "true") {
item.device_color = item.device_normal_color;
} else {
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value;
if (temp_point_value == item.device_close_point_value) {
item.device_color = item.device_close_color;
}
}
} else if (item.device_close_point_name == "ER") {
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_close_point_name).value;
if (temp_point_value == "true") {
item.device_color = item.device_close_color;
} else {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
if (temp_point_value == item.device_normal_point_value) {
item.device_color = item.device_normal_color;
}
}
} else {
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
temp_point_value = allDeviceRowData[device_index].points.find(x => x.name == item.device_normal_point_name).value;
if (temp_point_value == item.device_normal_point_value) {
item.device_color = item.device_normal_color;
} else if (temp_point_value == item.device_close_point_value) {
item.device_color = item.device_close_color;
}
}
}
}
item.zoom = zoom;
temp.push(item);
}
}
}
});
// let temp = data.filter(function (item, index) {
// if (global_emergency_alarm_device_number != undefined & & global_emergency_alarm_device_number != null) {
// return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 & & item . device_system_category_layer3 ! = " C " ;
// } else {
// return [];
// }
// });
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
status: item.status,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL
}
obj.itemStyle = { 'color': item.device_color };
res.push(obj);
});
return res;
}
const scatter_icon_convertData = function (data) { //正常、關閉(icon)
let res = [], temp = [];
data.forEach(function (item, index) {
if (global_emergency_alarm_device_number != undefined
& & global_emergency_alarm_device_number != null) {
if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 & & item . device_system_category_layer3 ! = " C " ) {
//如果有子節點，則只針對子節點操作
if (item.device_nodes != undefined & & item.device_nodes != null & & item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 = item.device_system_category_layer3;
item_node.device_normal_color = item.device_normal_color;
item_node.device_image = item.device_image;
temp.push(item_node);
});
} else {
temp.push(item)
}
}
}
});
temp = data.filter(function (item, index) {
if (global_emergency_alarm_device_number != undefined & & global_emergency_alarm_device_number != null) {
return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 & & item . device_system_category_layer3 ! = " C " ;
} else {
return [];
}
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
status: item.status,
symbol: 'image://' + baseImgUrl + "/upload/device_icon/" + item.device_image,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL
}
if (item.selected) {
obj.symbolSize = 50
}
res.push(obj);
});
return res;
}
const scatter_error_convertData = function (data) { //異常(圓點)
let res = [], temp = [];
data.forEach(function (item, index) {
if (global_emergency_alarm_device_number != undefined
& & global_emergency_alarm_device_number != null) {
if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 & & item.device_system_category_layer3 != "C") {
//如果有子節點，則只針對子節點操作
if (item.device_nodes != undefined & & item.device_nodes != null & & item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 = item.device_system_category_layer3;
item_node.device_error_color = item.device_error_color;
temp.push(item_node);
});
} else {
temp.push(item)
}
}
}
});
// if (global_emergency_alarm_device_number != undefined & & global_emergency_alarm_device_number != null) {
// temp = data.filter(function (item, index) {
// return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 & & item.device_system_category_layer3 != "C";
// });
// }
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
status: item.status,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL
}
obj.itemStyle = { 'color': item.device_error_color };
res.push(obj);
});
return res;
}
const scatter_error_icon_convertData = function (data) { //異常(icon)
let res = [], temp = [];
data.forEach(function (item, index) {
if (global_emergency_alarm_device_number != undefined
& & global_emergency_alarm_device_number != null) {
if (global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 & & item.device_system_category_layer3 != "C") {
//如果有子節點，則只針對子節點操作
if (item.device_nodes != undefined & & item.device_nodes != null & & item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
//添加父節點相關資訊
item_node.device_system_category_layer3 = item.device_system_category_layer3;
item_node.device_error_color = item.device_error_color;
item_node.device_image = item.device_image;
temp.push(item_node);
});
} else {
temp.push(item)
}
}
}
});
if (global_emergency_alarm_device_number != undefined & & global_emergency_alarm_device_number != null) {
temp = data.filter(function (item, index) {
return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 & & item.device_system_category_layer3 != "C";
});
}
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name ? item.full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
device_system_category_layer3: item.device_system_category_layer3 ? item.device_system_category_layer3 : null,
status: item.status,
symbol: 'image://' + baseImgUrl + "/upload/device_icon/" + item.device_image,
value: item.value,
deviceItems: item.deviceItems,
deviceURL: item.deviceURL
}
res.push(obj);
});
return res;
}
const scatter_cctv_convertData = function (data) { //CCTV
let res = [];
let temp = data.filter(function (item, index) {
return item.device_system_category_layer3 == "C";
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_number: item.device_number,
full_name: item.full_name,
device_system_category_layer3: item.device_system_category_layer3,
device_ip: item.device_ip,
device_port: item.device_port,
status: item.status,
symbol: 'image://' + str_location_url + "/upload/device_icon/" + item.device_image,
value: item.value
}
res.push(obj);
});
return res;
}
if (!floChart.getOption()) {
return;
}
var zoom = 0;
if (floChart.getOption().geo & & floChart.getOption().geo.length > 0) {
zoom = floChart.getOption().geo[0].zoom;
}
if (zoom < = zoomToggle) {
floChart.setOption({
series: [{
symbolOffset: [0, 0],
data: scatter_symbol_convertData(currentData) //正常、關閉(圓點)
}, {
data: [] //正常、關閉(icon)
}, {
symbolOffset: [0, 0],
data: scatter_error_convertData(currentData) //異常(圓點)
}, {
data: [] //異常(icon)
}, {
data: scatter_cctv_convertData(currentData) //CCTV
}]
});
} else {
floChart.setOption({
series: [{
symbolOffset: [10, 10],
data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
}, {
data: scatter_icon_convertData(currentData) //正常、關閉(icon)
}, {
symbolOffset: [10, 10],
data: scatter_error_convertData(currentData) //異常(圓點)
}, {
data: scatter_error_icon_convertData(currentData) //異常(icon)
}, {
data: scatter_cctv_convertData(currentData) //CCTV
}]
});
}
}
2022-11-28 18:08:50 +08:00
2022-11-30 12:29:56 +08:00
//=====================================================================
// ↑ 樓層平面圖 ↑
//=====================================================================
2022-11-28 18:08:50 +08:00
//載入3D模型
function load3DModel() {
2022-12-02 12:18:58 +08:00
2022-12-07 18:59:53 +08:00
launchViewer(pageAct.urn, (viewer, nodeIds) => {
nodeIds = Array.from(nodeIds);
$.each(nodeIds, (idx, item) => {
elev3DBind[item[0]] = item[1];
})
nodeIds = nodeIds.map(x => x[1]);
$.each(nodeIds, function (idx, node) {
2022-12-01 19:32:32 +08:00
let options = {
element: $("#forgeViewer"),
viewer: viewer,
nodeId: node,
floorHeight: elev3DOption.floorHeight ?? [],
inited: function () {
}
}
let elevator3DObj = new elevator3D(options);
let devNum = Object.keys(elev3DBind).filter(x => elev3DBind[x] == node)[0];
let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
if (elev3DObj.filter(x => x.nodeId == node).length == 0) {
elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
}
2022-11-30 18:37:07 +08:00
2022-12-01 19:32:32 +08:00
if (subData) {
let elevObj = elev3DObj.filter(x => x.nodeId == node)[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
elevObj.obj.init(function () {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
2022-12-08 18:12:40 +08:00
2022-12-01 19:32:32 +08:00
frags.forEach((fragProxy) => {
fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform()
})
elevObj.obj.viewer.impl.sceneUpdated(true);
})
}
})
//let elevator = elev3DObj[0];
//elevator.obj.setElevatorFloor(3)
//elevator.obj.movElevator()
2022-11-30 18:37:07 +08:00
//setElevatorSpeed(0.2)
//setElevatorFloor(2)
//requestAnimationFrame(movElevator);
});
2022-12-01 19:32:32 +08:00
2022-11-28 18:08:50 +08:00
}
2022-11-29 23:44:22 +08:00
function show3D() {
if (isFirstLoad3D) {
isFirstLoad3D = false;
load3DModel();
}
}
2022-11-28 18:08:50 +08:00
< / script >
