<style> .elevator { background-color: #fff; height: 520px; } table.elevator-build { /*border: 1px double #000;*/ } table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; } elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; } </style> <div class="d-flex"> <!-- 左圖區 --> <div class="col-3 my-3"> <div style="position:relative "> <div id="elevatorBlock" class="elevator"> <div class="elevator-header"> </div> <div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container"> <div id="floorTable_wrapper" class="elevator-build-container"> <table id="floorTable" class="elevator-build m-auto"> </table> </div> </div> </div> <!--<div> <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" /> </div>--> </div> <!-- <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" /> --> <div class="mt-2"> <img src="img/總公司1F平面.jpg" class="img-fluid" style="min-height: 330px" /> </div> </div> <!-- End-左圖區 --> <!-- 中間卡片區 --> <div class="col-7 my-3"> <div id="eleCards" class="row"> <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem"> <div type="button" class="card-body" data-toggle="modal" data-target="#card1"> <span class="d-flex"> <h5 class="card-title">號機別 : 1</h5> <i class="fas fa-caret-up fa-3x ml-auto"></i> </span> <h4 class="d-flex justify-content-end">10F</h4> <span class="d-flex"> <p class="card-text">狀態 : 運行中</p> <i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i> </span> </div> </div> <div class="card text-white bg-danger mx-1 mb-3 col-4" style="max-width: 18rem"> <div type="button" class="card-body"> <span class="d-flex"> <h5 class="card-title">號機別 : 2</h5> <i class="fas fa-caret-up fa-3x ml-auto"></i> </span> <h4 class="d-flex justify-content-end">5F</h4> <span class="d-flex"> <p class="card-text animate__animated animate__flash animate__infinite animate__slower"> 狀態 : 維修 </p> <i class="fas fa-caret-down fa-3x ml-auto"></i> </span> </div> </div> <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem"> <div type="button" class="card-body"> <span class="d-flex"> <h5 class="card-title">號機別 : 3</h5> <i class="fas fa-caret-up fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i> </span> <h4 class="d-flex justify-content-end">3F</h4> <span class="d-flex"> <p class="card-text">狀態 : 運行中</p> <i class="fas fa-caret-down fa-3x ml-auto"></i> </span> </div> </div> </div> </div> <!-- End-中間卡片區 --> <!-- 右邊功能區 --> <div class="col-2 my-3"> <div class="d-flex"> <div class="btn-group col-xxl-3 mb-2"> <button class="btn btn-info" data-toggle="modal" data-target="#staticBackdrop"> 重播系統 <i class="fas fa-play"></i> </button> </div> <div> <i type="button" class="fas fa-cog fa-2x ml-3 my-2" data-toggle="modal" data-target="#exampleModal1"></i> </div> </div> <div class="card col-xxl-3 mt-3"> <div class="card-body text-center"> <h4>緊急回轉</h4> </div> </div> <div class="d-flex justify-content-around mt-2"> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 緊急回歸 </label> </div> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" /> </div> </div> <div class="d-flex justify-content-around mt-2"> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 群控故障 </label> </div> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" /> </div> </div> <div class="d-flex justify-content-around mt-2"> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 緊急電源 </label> </div> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" /> </div> </div> <div class="d-flex justify-content-around mt-2"> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 火災回歸 </label> </div> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" /> </div> </div> <div class="d-flex justify-content-around mt-2"> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 地震管制 </label> </div> <div> <label class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" /> </div> </div> </div> <!-- End-右邊功能區 --> <!-- Modal-Card1 --> <div class="modal fade" id="card1" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header d-flex justify-content-between"> <div> <h5 class="modal-title" id="staticBackdropLabel">1</h5> </div> <div class=""> <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" title="及時狀態"> <i class="fal fa-tv fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" title="基本資訊"> <i class="fal fa-cog fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" title="異常資料"> <i class="fal fa-exclamation-triangle fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> <a type="button" class="" data-toggle="tooltip" data-placement="top" title="運維紀錄"> <i class="fal fa-server fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> </div> </div> <div class="modal-body"> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> ... </div> </div> </div> </div> </div> </div> </div> </div> <!-- Modal-ReplaySystem --> <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">重播系統</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <label> 播放日期 : <input type="date"> ~ <input type="date"> 時段 : <input type="time"> </label> <div> 播放速度 : <div class="btn-group mt-2"> <button class="btn btn-info">正常</button> <button class="btn btn-info">1.5x</button> <button class="btn btn-info">2.0x</button> <button class="btn btn-info">3.0x</button> </div> </div> <div class="row mt-2"> <div> <button class="btn btn-info"> <i class="fas fa-play fa-1x"></i> </button> </div> <div class="progress" style="width: 85%"> <div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <!-- 電梯圖表 --> <div class="mt-3"> <table class="table table-bordered"> <tbody class="text-center"> <tr> <td></td> <td colspan="4">Bank1</td> <td colspan="2">Bank2</td> </tr> <tr> <td></td> <td colspan="2">#1</td> <td colspan="2">#2</td> <td colspan="2">#3</td> </tr> <tr> <td>位置/模式</td> <td>1F</td> <td>自動運轉</td> <td>1F</td> <td>自動運轉</td> <td>4F</td> <td>自動運轉</td> </tr> <tr> <td>負載/狀態</td> <td>40%</td> <td>*</td> <td>0%</td> <td>*</td> <td>80%</td> <td>*</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>10F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>9F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>8F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>7F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>6F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>5F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>4F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>3F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>2F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>1F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>B1F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <th>B2F</th> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <th>B3F</th> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> </tbody> </table> </div> <!-- End-電梯圖表 --> </div> </div> </div> </div> <!-- End-Modal-ReplaySystem --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">載重</th> <th scope="col">休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸</th> <th scope="col">不服務樓層</th> <th scope="col"></th> </tr> </thead> <tbody> <tr class="text-center"> <th>Bank1</th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th>B2F,3F,5F</th> <th> <button class="btn btn-info" data-target="#exampleModal2" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>1</th> <th>運作中</th> <th>3F</th> <th>80%</th> <th>On</th> <th>Off</th> <th>On</th> <th>Off</th> <th></th> <th> <button class="btn btn-info" data-target="#exampleModal1-1" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>2</th> <th>保養</th> <th>2F</th> <th>0%</th> <th>On</th> <th>Off</th> <th>On</th> <th>Off</th> <th></th> <th> <button class="btn btn-info" data-target="#exampleModal1-2" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>Bank2</th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th>B1F,B2F</th> <th> <button class="btn btn-info" data-target="#exampleModal2" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>3</th> <th>運作中</th> <th>B1F</th> <th>100%</th> <th>On</th> <th>Off</th> <th>On</th> <th>Off</th> <th></th> <th> <button class="btn btn-info" data-target="#exampleModal2-1" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal1-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">防疫對策</th> <th scope="col">遠隔休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸運轉</th> </tr> </thead> <tbody> <tr class="text-center"> <th>1</th> <th>運作中</th> <th>3F</th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-1" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-1"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-2" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-2"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-3" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-3"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-4" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-4"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-5" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-5"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal1-2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">防疫對策</th> <th scope="col">遠隔休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸運轉</th> </tr> </thead> <tbody> <tr class="text-center"> <th>2</th> <th>保養</th> <th>2F</th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-1" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-1"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-2" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-2"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-3" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-3"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-4" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-4"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-5" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-5"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal2-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">防疫對策</th> <th scope="col">遠隔休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸運轉</th> </tr> </thead> <tbody> <tr class="text-center"> <th>2</th> <th>運作中</th> <th>B1F</th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-1" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-1"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-2" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-2"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-3" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-3"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-4" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-4"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-5" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-5"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> </div> <script> var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"] var allDevList = []; $(function () { setBuildFloor(floors.length, 3); setCards(); subDevice(); }) function getFloDevList() { } //baja 訂閱設備 function subDevice() { myBaja = new subscriptionDevices(); var ordPath = { "building_tag": pageAct.buiTag, "system_tag": pageAct.sysMainTag, "name_tag": pageAct.sysSubTag, } myBaja.setSubscribeDevicesByBql(ordPath); myBaja.setSubscribeDevicesCallBack(function (data) { console.log(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 == "ST") { $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value); } if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { //顯示正常燈號 $(`#${matchDevice.device_number}_card`).attr("data-light-type", "normal").data("light-type", "normal"); } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) { $(`#${matchDevice.device_number}_card`).attr("data-light-type", "close").data("light-type", "close"); } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) { $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error"); } setLightColor(); }); } function setLightColor() { $("[data-light-type]").each((index, ele) => { let type = $(ele).data("light-type"); let isFlashing = false; let color = "#000"; switch (type) { case "normal": color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)"; isFlashing = pageAct.sysSubObj.device_normal_flashing == "1" break; case "close": color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)"; isFlashing = pageAct.sysSubObj.device_close_flashing == "1" break; case "error": color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)"; isFlashing = pageAct.sysSubObj.device_error_flashing == "1" break; } $(ele).css("background-color", color); if (isFlashing) { $(ele).addClass("light-flash"); } }) } function setCards() { let url = baseApiUrl + "/api/Device/GetDeviceList"; let sendData = { sub_system_tag: pageAct.sysSubTag, building_tag: pageAct.buiTag, floor_tag: pageAct.floTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let strHtml = ``; $.each(res.data, (index, floObj) => { $.each(floObj.device_list, (index2, devObj) => { allDevList.push(devObj); strHtml += `<div id="${devObj.device_number}_card" class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;"> <div type="button" class="card-body"> <span class="d-flex"> <h5 class="card-title">號機別 : ${devObj.full_name}</h5> <i class="fas fa-caret-up fa-3x ml-auto"></i> </span> <h4 class="d-flex justify-content-end">10F</h4> <span class="d-flex"> <p class="card-text">狀態 : <span name="devStatus"></span></p> <i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i> </span> </div> </div>`; }) }) $("#eleCards").html(strHtml); initPopover(); } }, null, "POST").send(); } function initPopover() { $("[name=devItem]").each((index, ele) => { let devNum = $(ele).data("number"); //設備編號 let devGuid = $(ele).data("id"); //guid let devName = $(ele).data("name"); //full_name $(ele).YTTooltip({ html: `<div class="card m-1 border device-wrap"> <div class="card-header p-3"> <div class="position-absolute w-50" style="word-break: break-all;"> <label class="m-0 mt-2">${devName}</label> </div> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button> <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button> <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button> <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button> <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button> </div> </div> <div class="card-body p-2 tab-content"> <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child"> <div class="row"> <div class="col-xl-6">${drawImdStaBlock()}</div> <div class="col-xl-6">${drawOpeModBlock()}</div> </div> </div> <div id="info" data-tabname="cardTab" data-tabrole="child"> </div> <div id="errRec" data-tabname="cardTab" data-tabrole="child"> ${drawErrRecTabBlo()} </div> <div id="opeRec" data-tabname="cardTab" data-tabrole="child"> ${drawOpeRecTabBlo()} </div> </div> </div>`, group: "device", onShow: function (tooltipEle, oriEle) { var tab = new YT.Tab({ tabName: "cardTab" }) console.log($(oriEle).data("number")) //基本資料tab block $("#info").html(drawInfoTabBlo(devGuid)); loadOpeRecTable(devGuid); //loadErrRecTable2($(oriEle).data("number")); //loadErrRecTable(); loadErr($(oriEle).data("number")); } }) }) } function setBuildFloor(floorCnt = 10, eleCnt = 3) { let tbody = creEle("tbody"); //樓層從小到大 let rfloors = floors.reverse(); let eleCircle = creDiv(["elevator-circle"]); //樓層表格建置 for (let f = 1; f <= floorCnt; f++) { let tr = creEle("tr"); for (let e = 1; e <= eleCnt + 2; e++) { let td = creEle("td"); if (e == 1) { td.addClass("t-black") td.text(rfloors[f - 1]); } else if (e == eleCnt + 2) { } else { let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]); div.append(`<i class="fas fa-door-open fs-1-05"></i>`) td.append(div) } tr.append(td); } tbody.append(tr); $("#floorTable_wrapper").append(eleCircle) } $("#floorTable").html(tbody); $("#floorTable tbody tr").each((index, tr) => { $(tr).find("td:eq(0)").css("border-left", "0"); $(tr).find("td:eq(-1)").css("border-right", "0"); if (index == 0) { $(tr).find("td").each((index, td) => { $(td).css("border-top", "0"); }) } else if (index == $("#floorTable tbody tr").length - 1) { $(tr).find("td").each((index, td) => { $(td).css("border-bottom", "0"); }) } }) } function drawStateTabBlo() { let strHtml = `<table class="table table-bordered table-striped text-center m-0" id="iframemodal"> <div class="modal-body"> <iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe> </div> </table>` return strHtml; } function drawImdStaBlock() { let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`); let tbody = tabEle.append("<tbody>"); let rows = [ { id: "devNum", text: "號機" }, { id: "status", text: "狀態" }, { id: "group", text: "組別" }, { id: "weight", text: "載重" }, ]; let cols = [ { width: "30%" }, { width: "40%" }, { width: "30%" }, ] $.each(rows, (index, row) => { let tr = $("<tr></tr>"); $.each(cols, (index2, col) => { let td = $("<td></td>"); td.prop("id", row.id) td.css("width", col.width) if (index2 == 0) { td.text(row.text); } tr.append(td); }) tbody.append(tr); }) return tabEle.outerHtml(); } function drawOpeModBlock() { let tabEle = $(`<table id="opeModTable" class="table table-bordered table-striped text-center m-0">`); let tbody = tabEle.append("<tbody>"); let rows = [ { id: "imdStaTabDevNum", text: "自動" }, { id: "imdStaTabDevNumStatus", text: "VIP" }, { id: "imdStaTabDevNumGroup", text: "獨立運轉" }, { id: "imdStaTabDevNumWeight", text: "手動" }, { id: "imdStaTabDevNumWeight", text: "運轉保養" }, { id: "imdStaTabDevNumWeight", text: "回歸完了" }, { id: "imdStaTabDevNumWeight", text: "不服務樓層" }, ]; let cols = [ { width: "30%" }, { width: "40%" }, { width: "30%" }, ] $.each(rows, (index, row) => { let tr = $("<tr></tr>"); $.each(cols, (index2, col) => { let td = $("<td></td>"); td.prop("id", row.id) td.css("width", col.width) if (index2 == 0) { td.text(row.text); } tr.append(td); }) tbody.append(tr); }) return tabEle.outerHtml(); } function drawInfoTabBlo(devGuid) { let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`); let tbody = tabEle.append("<tbody>"); let columnNames = ["設備編號", "設備名稱"]; $.each(columnNames, (index, colName) => { let tr = $("<tr></tr>"); let td = $("<td></td>"); td.text(colName); tr.append(td); tbody.append(tr); }) let url = baseApiUrl + "/api/Device/GetBaseDevice"; let sendData = { device_guid: devGuid, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { tbody.find("tr").eq(0).append(creEle("td", res.data.device_number)); tbody.find("tr").eq(1).append(creEle("td", res.data.full_name)); } }, null, "POST").send(); return tabEle.prop("outerHTML"); } function drawErrRecTabBlo() { let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100"> </table>` return strHtml; } function drawOpeRecTabBlo() { let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100"> </table>` return strHtml; } function loadOpeRecTable(devGuid) { let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid; let tag = "#opeRecTable"; let column_defs = [ { "targets": [0], "width": "8%", "sortable": true }, { "targets": [1], "width": "8%", "sortable": true }, { "targets": [2], "width": "7%", "sortable": true }, { "targets": [3], "width": "7%", "sortable": true }, ]; let columns = [ { "title": "類型", "data": "work_type_name", }, { "title": "項目", "data": "fix_do", }, { "title": "處理人員", "data": "work_person_name", }, { "title": "發生/完成時間", "data": "finishTime", "render": function (data, type, row) { return row.createdAt + "<br>" + data; }, }, ]; //let callback = function () { // $('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody,會導致thead跑掉 // let api = this.api(); // api.columns.adjust(); //} let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi"); } function loadErrRecTable() { let tag = "#errRecTable"; let datas; //getOneDeviceAlarmTop10ByBaja(_devicePath, callback); let column_defs = [ { "targets": [0], "width": "15%", "sortable": true }, { "targets": [1], "width": "25%", "sortable": true }, { "targets": [2], "width": "25%", "sortable": true }, { "targets": [3], "width": "35%", "sortable": true }, ]; let columns = [ { "title": "異常ID", "data": "uuid", }, { "title": "異常原因", "data": "msgText", }, { "title": "ACK確認", "data": "ackState", }, { "title": "發生/賦歸時間", "data": "timestamp", "width": "45%", }, ]; //let callback = function (result) { // datas = result; //} let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}'; let json_object = JSON.parse(result); datas = json_object['data']; errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); } function loadErr(allPath) { if (allPath != undefined && allPath != null) { let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1 let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5]; getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr); } else { console.log("no device"); } } function callbackForErr(result) { let tag = "#errRecTable"; let datas; let column_defs = [ { "targets": [0], "width": "15%", "sortable": true }, { "targets": [1], "width": "25%", "sortable": true }, { "targets": [2], "width": "25%", "sortable": true }, { "targets": [3], "width": "35%", "sortable": true }, ]; let columns = [ { "title": "異常ID", "data": "uuid", }, { "title": "異常原因", "data": "msgText", }, { "title": "ACK確認", "data": "ackState", }, { "title": "發生/完成時間", "data": "normalTime", "render": function (data, type, row) { return row.timestamp + "<br>" + data; }, }, ]; let json_object = JSON.parse(result); datas = json_object['data']; errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); } </script>