<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 id="emerReturnText" class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <span id="emerReturn" 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"> 群控故障 </label> </div> <div> <label id="groConFailText" class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <span id="groConFail" 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"> 緊急電源 </label> </div> <div> <label id="emerPowerText" class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <span id="emerPower" 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"> 火災回歸 </label> </div> <div> <label id="fireReturnText" class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <span id="fireReturn" 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"> 地震管制 </label> </div> <div> <label id="earQuaConText" class="form-check-label h4" for="flexRadioDefault1"> 未動作 </label> </div> <div> <span id="earQuaCon" class="circle-light bg-secondary"></span> </div> </div> </div> <!-- End-右邊功能區 --> <!-- Modal-Card1 --> <div class="modal fade" id="card1" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header d-flex justify-content-between"> <div> <h5 class="modal-title" id="staticBackdropLabel">1</h5> </div> <div class=""> <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" title="及時狀態"> <i class="fal fa-tv fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" title="基本資訊"> <i class="fal fa-cog fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top" title="異常資料"> <i class="fal fa-exclamation-triangle fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> <a type="button" class="" data-toggle="tooltip" data-placement="top" title="運維紀錄"> <i class="fal fa-server fa-2x" data-toggle="modal" data-target="#exampleModal"></i> </a> </div> </div> <div class="modal-body"> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> ... </div> </div> </div> </div> </div> </div> </div> </div> <!-- Modal-ReplaySystem --> <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">重播系統</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <label> 播放日期 : <input type="date"> ~ <input type="date"> 時段 : <input type="time"> </label> <div> 播放速度 : <div class="btn-group mt-2"> <button class="btn btn-info">正常</button> <button class="btn btn-info">1.5x</button> <button class="btn btn-info">2.0x</button> <button class="btn btn-info">3.0x</button> </div> </div> <div class="row mt-2"> <div> <button class="btn btn-info"> <i class="fas fa-play fa-1x"></i> </button> </div> <div class="progress" style="width: 85%"> <div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <!-- 電梯圖表 --> <div class="mt-3"> <table class="table table-bordered"> <tbody class="text-center"> <tr> <td></td> <td colspan="4">Bank1</td> <td colspan="2">Bank2</td> </tr> <tr> <td></td> <td colspan="2">#1</td> <td colspan="2">#2</td> <td colspan="2">#3</td> </tr> <tr> <td>位置/模式</td> <td>1F</td> <td>自動運轉</td> <td>1F</td> <td>自動運轉</td> <td>4F</td> <td>自動運轉</td> </tr> <tr> <td>負載/狀態</td> <td>40%</td> <td>*</td> <td>0%</td> <td>*</td> <td>80%</td> <td>*</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>10F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>9F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>8F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>7F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>6F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>5F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>4F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>3F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>2F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>1F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <td>B1F</td> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <th>B2F</th> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> <tr> <th>B3F</th> <td id="elevator1-1"></td> <td></td> <td id="elevator2-1"></td> <td></td> <td id="elevator3-1"></td> <td></td> </tr> </tbody> </table> </div> <!-- End-電梯圖表 --> </div> </div> </div> </div> <!-- End-Modal-ReplaySystem --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">載重</th> <th scope="col">休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸</th> <th scope="col">不服務樓層</th> <th scope="col"></th> </tr> </thead> <tbody> <tr class="text-center"> <th>Bank1</th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th>B2F,3F,5F</th> <th> <button class="btn btn-info" data-target="#exampleModal2" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>1</th> <th>運作中</th> <th>3F</th> <th>80%</th> <th>On</th> <th>Off</th> <th>On</th> <th>Off</th> <th></th> <th> <button class="btn btn-info" data-target="#exampleModal1-1" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>2</th> <th>保養</th> <th>2F</th> <th>0%</th> <th>On</th> <th>Off</th> <th>On</th> <th>Off</th> <th></th> <th> <button class="btn btn-info" data-target="#exampleModal1-2" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>Bank2</th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th>B1F,B2F</th> <th> <button class="btn btn-info" data-target="#exampleModal2" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> <tr class="text-center"> <th>3</th> <th>運作中</th> <th>B1F</th> <th>100%</th> <th>On</th> <th>Off</th> <th>On</th> <th>Off</th> <th></th> <th> <button class="btn btn-info" data-target="#exampleModal2-1" data-toggle="modal"> <i class="fal fa-pen"> Edit</i> </button> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal1-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">防疫對策</th> <th scope="col">遠隔休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸運轉</th> </tr> </thead> <tbody> <tr class="text-center"> <th>1</th> <th>運作中</th> <th>3F</th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-1" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-1"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-2" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-2"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-3" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-3"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-4" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-4"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID1-5" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID1-5"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal1-2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">防疫對策</th> <th scope="col">遠隔休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸運轉</th> </tr> </thead> <tbody> <tr class="text-center"> <th>2</th> <th>保養</th> <th>2F</th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-1" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-1"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-2" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-2"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-3" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-3"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-4" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-4"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID2-5" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID2-5"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <!-- Modal-ElevatorManagement --> <div class="modal fade" id="exampleModal2-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-hover"> <thead> <tr class="text-center"> <th scope="col">號機</th> <th scope="col">狀態</th> <th scope="col">所在樓層</th> <th scope="col">防疫對策</th> <th scope="col">遠隔休止</th> <th scope="col">獨立運轉</th> <th scope="col">VIP</th> <th scope="col">回歸運轉</th> </tr> </thead> <tbody> <tr class="text-center"> <th>2</th> <th>運作中</th> <th>B1F</th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-1" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-1"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-2" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-2"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-3" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-3"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-4" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-4"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> <th> <div class="d-flex justify-content-center"> <div class="switch mr-2"> <input class="switch-checkbox" id="switchID3-5" type="checkbox" name="switch-checkbox"> <label class="switch-label" for="switchID3-5"> <div class="switch-txt" turnOn="On" turnOff="Off"></div> <div class="switch-Round-btn"></div> </label> </div> <img type="button" src="img\u1673.svg"> </div> </th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- End-Modal-ElevatorManagement --> <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> </div> <script> var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"] var allDevList = []; var subSeviceData = []; var subOrdPath = { "building_tag": pageAct.buiTag, "system_tag": pageAct.sysMainTag, "name_tag": pageAct.sysSubTag, }; $(function () { setBuildFloor(floors.length, 3); setCards(); subDeviceSetStatus(); }) function getFloDevList() { } //baja 訂閱設備 function subDeviceSetStatus() { myBaja = new subscriptionDevices(); myBaja.setSubscribeDevicesByBql(subOrdPath); myBaja.setSubscribeDevicesCallBack(function (data) { console.log(data) function getValueByName(pointName) { return data.point_name == pointName ? data.value : null; } 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("未動作"); } } if (allDevList.length == 0) { return false; } let matchDevice = allDevList.filter(x => x.device_number?.split("_")[x.device_number?.split("_").length - 1] == data.device_number)[0]; let norDevPoiName = matchDevice.device_normal_point_name; let cloDevPoiName = matchDevice.device_close_point_name; let errDevPoiName = matchDevice.device_error_point_name; //狀態 if (data.point_name == "ST") { $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value); } //現在樓層 if (data.point_name == "CP") { $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value + "F"); } //往上或往下 if (getValueByName("RD") == "UP") { $(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c"); } if (getValueByName("RD") == "DOWN") { $(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c"); } //消防回歸 actLightByPoi("FE", "#emerReturn"); //群控故障 actLightByPoi("GCM", "#groConFail"); //緊急電源 actLightByPoi("EPS", "#emerPower"); //火災回歸 actLightByPoi("FER", "#fireReturn"); //地震管制 actLightByPoi("EER", "#earQuaCon"); if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { //顯示正常燈號 $(`#${matchDevice.device_number}_card`).attr("data-light-type", "normal").data("light-type", "normal"); } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) { $(`#${matchDevice.device_number}_card`).attr("data-light-type", "close").data("light-type", "close"); } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) { $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error"); } setLightColor(); if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) { let obj = {}; obj.device_number = matchDevice.device_number; subSeviceData.push(obj) } let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0]; if (subData) { subData[data.point_name] = data.value; } subDeviceSetTable(matchDevice.device_number) /*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/ }); } //baja 訂閱設備 function subDeviceSetTable(devNum) { let subData = subSeviceData.filter(x => x.device_number == devNum)[0] let matchDevice = allDevList.filter(x => x.device_number == devNum)[0]; if (!subData) { return false; } function creLight(type = "trueText") { let lightType = type == "trueText" ? "bg-success" : "bg-danger"; return creEle("span", null, null, null, [lightType, "circle-light"]).outerHtml(); } let masterTag = devNum?.split("_")[5]; let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]); //現在樓層 if (subData["CP"]) { $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F"); } //往上或往下 if (subData["RD"] == "UP") { $(`#imdStaTable_${devNum} [name=upFloArrow]`).addClass("light-flash-c"); } if (subData["RD"] == "DOWN") { $(`#imdStaTable_${devNum} [name=downFloArrow]`).addClass("light-flash-c"); } //即時狀態(左側Table) $(`#imdStaTable_${devNum} #devName`).text(matchDevice.full_name); $(`#imdStaTable_${devNum} #devNum`).text(devNum); $(`#imdStaTable_${devNum} #status`).text(subData["ST"]) $(`#imdStaTable_${devNum} #group`).text(masterTag); $(`#imdStaTable_${devNum} #weight`).text(subData["LOAD"]) //運轉模式(右側Table) $(`#opeModTable_${devNum} #auto`).html(creLight(subData["DNO"])) $(`#opeModTable_${devNum} #vip`).html(creLight(subData["MD"])) $(`#opeModTable_${devNum} #onlyRun`).html(creLight(subData["IND"])) $(`#opeModTable_${devNum} #manual`).html(creLight(subData["HAND"])) $(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"])) $(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"])) $(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、")) } function setLightColor() { $("[data-light-type]").each((index, ele) => { let type = $(ele).data("light-type"); let isFlashing = false; let color = "#000"; switch (type) { case "normal": color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)"; isFlashing = pageAct.sysSubObj.device_normal_flashing == "1" break; case "close": color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)"; isFlashing = pageAct.sysSubObj.device_close_flashing == "1" break; case "error": color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)"; isFlashing = pageAct.sysSubObj.device_error_flashing == "1" break; } $(ele).css("background-color", color); if (isFlashing) { $(ele).addClass("light-flash"); } }) } function setCards() { let url = baseApiUrl + "/api/Device/GetDeviceList"; let sendData = { sub_system_tag: pageAct.sysSubTag, building_tag: pageAct.buiTag, floor_tag: pageAct.floTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let strHtml = ``; $.each(res.data, (index, floObj) => { $.each(floObj.device_list, (index2, devObj) => { allDevList.push(devObj); strHtml += `<div id="${devObj.device_number}_card" class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;"> <div type="button" class="card-body"> <span class="d-flex"> <h5 class="card-title">號機別 : ${devObj.full_name}</h5> <i 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").html(strHtml); initPopover(); } }, null, "POST").send(); } 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(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(); } function drawImdStaBlock(devNum) { let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`); let tbody = tabEle.append("<tbody>"); let rows = [ { id: "devName", text: "號機" }, { id: "devNum", text: "Tag Name" }, { id: "status", text: "狀態" }, { id: "group", text: "組別" }, { id: "weight", text: "載重" }, ]; let cols = [ { width: "30%" }, { width: "40%" }, { width: "30%" }, ] let data = [{ row: 0, col: 2, style:"vertical-align:middle", 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> `}] $.each(rows, (index, row) => { let tr = $("<tr></tr>"); $.each(cols, (index2, col) => { 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); } }) tbody.append(tr); }) return tabEle.outerHtml(); } function drawOpeModBlock(devNum) { let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`); let tbody = tabEle.append("<tbody>"); let rows = [ { id: "auto", text: "自動" }, { id: "vip", text: "VIP" }, { id: "onlyRun", text: "獨立運轉" }, { id: "manual", text: "手動" }, { id: "runOpe", text: "運轉保養" }, { id: "returnFin", text: "回歸完了" }, { id: "notSerFloor", text: "不服務樓層" }, ]; let cols = [ { width: "50%" }, { width: "50%" }, ] $.each(rows, (index, row) => { let tr = $("<tr></tr>"); $.each(cols, (index2, col) => { let td = $("<td></td>"); td.css("width", col.width) if (index2 == 0) { td.text(row.text); } if (index2 == 1) { td.prop("id", row.id) } tr.append(td); }) tbody.append(tr); }) return tabEle.outerHtml(); } </script>