<style> .elevator { background-color: #fff; min-height: 520px; } .elevator-table-wrapper { padding: 0.8rem; } 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; } .elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; } .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; } .table-compact td { padding: 0.2rem 0.3rem; } #emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; } #emerTurn tr td:nth-child(1) { width: 35%; } </style> <div class="d-flex"> <!-- 左圖區 --> <div class="col-4 my-3"> <div style="position:relative "> <div id="elevatorBlock" class="elevator"> <div class="elevator-header"> <!--<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle"> <button class="btn btn-secondary btn-sm " data-tabname="floShowType" data-target="#2dDiv"> 2D </button> <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#3dDiv" onclick="show3D()"> 3D </button> </div>--> </div> <div class="elevator-body d-flex align-items-center justify-content-center" style="height:85vh;"> <!--<div id="2dDiv" class="p-2" data-tabname="floShowType" data-tabrole="child"> <table id="floorTable" class="elevator-build m-auto"> </table> </div>--> <div id="3dDiv" class="w-100 h-100 position-relative" data-tabname="floShowType" data-tabrole="child"> <div id="forgeViewer" style=""></div> </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> <!-- End-左圖區 --> <!-- 中間卡片區 --> <div class="col-6 my-3"> <div id="eleCards" class="row col-12 p-0"> </div> <div class="mt-2 col-8 p-0 d-none"> <!--<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> </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="#eleManModal"></i> </div> </div> <div class="card col-xxl-3 mt-3"> <div class="card-body text-center"> <h4>緊急回轉</h4> </div> </div> <div class="col-12 p-2"> <table id="emerTurn" class="table-compact w-100"> <tbody> <tr> <td><label class="mb-0 fs-1-05 w-auto" for="flexRadioDefault1">緊急回歸</label></td> <td><label id="emerReturnText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label></td> <td><span id="emerReturn" class="circle-light bg-secondary"></span></td> </tr> <tr> <td><label class="mb-0 fs-1-05 w-auto" for="flexRadioDefault1">群控故障</label></td> <td><label id="groConFailText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label></td> <td><span id="groConFail" class="circle-light bg-secondary"></span></td> </tr> <tr> <td><label class="mb-0 fs-1-05 w-auto" for="flexRadioDefault1">緊急電源</label></td> <td><label id="emerPowerText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label></td> <td><span id="emerPower" class="circle-light bg-secondary"></span></td> </tr> <tr> <td><label class="mb-0 fs-1-05 w-auto" for="flexRadioDefault1">火災回歸</label></td> <td><label id="fireReturnText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label></td> <td><span id="fireReturn" class="circle-light bg-secondary"></span></td> </tr> <tr> <td><label class="mb-0 fs-1-05 w-auto" for="flexRadioDefault1">地震管制</label></td> <td><label id="earQuaConText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label></td> <td><span id="earQuaCon" class="circle-light bg-secondary"></span></td> </tr> <tr> <td><label class="mb-0 fs-1-05 w-auto" for="flexRadioDefault1">遠端休止</label></td> <td><label id="disResText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label></td> <td><span id="disRes" class="circle-light bg-secondary"></span></td> </tr> </tbody> </table> </div> <!--<div class="d-flex justify-content-around mt-2"> <div> <label class="mb-0 fs-1-05" for="flexRadioDefault1">緊急回歸</label> </div> <div> <label id="emerReturnText" class="mb-0 fs-1-05" 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="mb-0 fs-1-05" for="flexRadioDefault1">群控故障</label> </div> <div> <label id="groConFailText" class="mb-0 fs-1-05" 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="mb-0 fs-1-05" for="flexRadioDefault1">緊急電源</label> </div> <div> <label id="emerPowerText" class="mb-0 fs-1-05" 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="mb-0 fs-1-05" for="flexRadioDefault1">火災回歸</label> </div> <div> <label id="fireReturnText" class="mb-0 fs-1-05" 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="mb-0 fs-1-05" for="flexRadioDefault1">地震管制</label> </div> <div> <label id="earQuaConText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label> </div> <div> <span id="earQuaCon" class="circle-light bg-secondary"></span> </div> </div> <div class="d-flex justify-content-around mt-2"> <div class=""> <label class="mb-0 fs-1-05" for="flexRadioDefault1">遠端休止</label> </div> <div> <label id="disResText" class="mb-0 fs-1-05" 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="mb-0 fs-1-05" for="flexRadioDefault1">RET運轉</label> </div> <div> <label id="retOpeText" class="mb-0 fs-1-05" for="flexRadioDefault1">未動作</label> </div> <div> <span id="retOpe" 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="eleManModal" tabindex="-1" aria-labelledby="eleManModal" aria-hidden="true" data-keyboard="false"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title">電梯管理</h1> <button type="button" class="close m-0 p-0 px-2 ml-auto" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <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> <table id="eleManDevTable" 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"> <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"> <input name="preMea" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_DP"> </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"> <input name="stop" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_RCS"> </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"> <input name="onlyOpe" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_IND"> </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"> <input name="vip" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_VIP"> </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"> <input name="retOpe" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_RET"> </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> </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 eleManTable = null; var allDevList = []; //每個設備 var subSeviceData = []; //每個設備訂閱點位值 var floList = []; //每個樓層 var elevObj = null; //左側 2D 電梯物件 var subOrdPath = { "area_tag": pageAct.AreaTag, "building_tag": pageAct.buiTag, "system_tag": pageAct.sysMainTag, "name_tag": pageAct.sysSubTag, }; //平面圖參數 var floChart = null; var currentData = []; var allDeviceRowData = []; //所有設備原始資料 var global_emergency_alarm_device_number = []; var zoomToggle = 3; var isFirstLoad3D = true; var isFirstLoadSub = true; var forgeInvType = null; var forgeInvTypeDef = null; $(function () { initChart(); getInviForge(); setBuildFloor(); setCards(); setEleManTable(); show3D(); }) function getFloDevList() { } //baja 訂閱設備 function subDeviceSetStatus(data) { 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]; if (!matchDevice) return; let master = matchDevice.device_number.split("_")[5]; //將訂閱值塞入 subSeviceData 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; } 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("未動作"); } } function actLightByPoiEx(pointName1, selector, pointName2, exCond) { $(selector).removeClass("bg-orange").removeClass("bg-danger").removeClass("bg-secondary").removeClass("bg-success"); $(selector).parent("td").prev().find("label").text("未動作"); if (subData[pointName2] == exCond) { if (subData[pointName1] == "falseText") { $(selector).addClass("bg-secondary"); $(selector).parent("td").prev().find("label").text("取消控制"); } else { $(selector).addClass("bg-danger"); $(selector).parent("td").prev().find("label").text("控制"); } } else { $(selector).parent("td").prev().find("label").text("休止"); $(selector).addClass("bg-success"); } } //狀態 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"); } else { $(`#${matchDevice.device_number}_card`).removeClass("light-flash"); } } //現在樓層 if (data.point_name == "CP") { console.log("電梯樓層", matchDevice.device_number, data.value) $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value); } 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"); } } 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"); } } // 設置燈色、卡片閃爍 setLightColor(); // Card table 更新 subDeviceSetTable(matchDevice.device_number); // 重繪 電梯管理 列表 reloadEleManTable(setEleManTabDataFromBaja()); // 電梯管理 detail subDeviceSetEleManDet(matchDevice.device_number); // 電梯管理 不服務樓層 detail //subDeviceSetEleManNotSerFloor(master); } // baja 訂閱 變更 電梯管理 Table function setEleManTabDataFromBaja() { let result = []; let masterList = allDevList.map(x => x.device_number.split("_")[5]).Distinct(); // Master(第六段) 區分 $.each(masterList, (idx, master) => { let main = {}; // 匯入 Master 名稱` main.devName = master; let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0]; if (subData) { $.each(Object.keys(subData), (idx3, subKey) => { if (subKey.startsWith("SP_FLS_")) { main[subKey] = subData[subKey]; } }) 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); } }) } }) /*console.log("result:", result)*/ return result; } // Card - 設置列表中訂閱內容 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]); floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]); //左側 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"]); } //現在樓層 if (subData["CP"]) { $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"]); } //往上或往下 if (subData["RD"] == "UP") { $(`#imdStaTable_${devNum} [name=downFloArrow]`).removeClass("light-flash-c"); $(`#imdStaTable_${devNum} [name=upFloArrow]`).addClass("light-flash-c"); } else if (subData["RD"] == "DOWN") { $(`#imdStaTable_${devNum} [name=upFloArrow]`).removeClass("light-flash-c"); $(`#imdStaTable_${devNum} [name=downFloArrow]`).addClass("light-flash-c"); } else { $(`#imdStaTable_${devNum} [name=upFloArrow]`).removeClass("light-flash-c"); $(`#imdStaTable_${devNum} [name=downFloArrow]`).removeClass("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("、")) } //取得設備 並繪製Card function setCards() { let url = baseApiUrl + "/api/Device/GetDeviceList"; let sendData = { sub_system_tag: pageAct.sysSubTag, building_tag: pageAct.buiTag, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let strHtml = ``; let masterArr = []; $("#eleCards").html(""); $.each(res.data, (index, floObj) => { let masters = floObj.device_list.map(x => x.device_number?.split("_")[5]).Distinct(); $.each(masters, (idx, master) => { let masDiv = creDiv(["col-12", "row", "m-0", "gap-5"]); masDiv.append(creEle("h2", master, null, null, ["col-12", "p-0"])); 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); }) }) initPopover(); //平面圖載入 chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`); getDevice(res.data[0].device_list); } }, null, "POST").send(); } //左側 2D 樓層 Table function setBuildFloor() { elevObj = new ElevatorHandler("#floorTable"); } // Card 即時狀態 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(); } // Card 即時狀態 - 左側 table function drawImdStaBlock(devNum) { let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0" style="min-width: 200px">`); 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(); } // Card 即時狀態 - 右側 table function drawOpeModBlock(devNum) { let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0" style="min-width: 200px">`); 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(); } // 電梯管理 Modal - 資料更新 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; } }) }) eleManTable.clear().rows.add(datas).draw(); } // 電梯管理 Modal - table 初始化 function setEleManTable() { let tag = "#eleManTable"; let datas = []; let column_defs = [ { "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 }, ]; let columns = [ { "title": "號機", "data": "devName", }, { "title": "狀態", "data": "ST", }, { "title": "所在樓層", "data": "CP", }, { "title": "載重", "data": "LOAD", }, { "title": "休止", "data": "SP_RCS", }, { "title": "獨立運轉", "data": "SP_IND", }, { "title": "VIP", "data": "SP_VIP", }, { "title": "回歸", "data": "SP_RET", }, { "title": "不服務樓層", "data": null, "render": function (data, type, row) { 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; } }, { "title": "動作", "data": null, "className": "text-center", "render": function (data, type, row) { let btn = ''; if (row._rowType == "master") { btn = creBtn("編輯", "eleManMasEdit" + row.devName, null, ["btn", "btn-info"]); } else if (row._rowType == "device") { 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"); eleManTable.order([]).draw(); } // 電梯管理 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"; } $("#eleManModal #detDevDiv [name=devName]").text(matchDevice.full_name); $("#eleManModal #detDevDiv [name=status]").text(subData["ST"]); $("#eleManModal #detDevDiv [name=curFloor]").text(subData["CP"]); $("#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]); $(`[name^=notSerChk]`).prop("checked", false); $.each(notSerFloors, (idx, floor) => { $(`[name=notSerChk${floor}]`).prop("checked", true); }) } // 電梯管理 Modal - 不服務樓層 設定列表 function setNotSerFloTable(floors) { let tbody = $("<tbody></tbody>"); let rows = []; $.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, data: `<input name="notSerChk${row.text}" data-point="SP_FLS_${row.id}" type="checkbox" class="toggle" data-toggle="toggle">`, }) }) $.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"]; $("#detDevDiv").data("devnum", devNum); $("#bajaSche").html(""); // 電梯管理 Modal 切換到 detail 頁面 modalTogDiv("#eleManModal", "#tabDiv", "#detDevDiv", "next", function () { subDeviceSetEleManDet(devNum); $.each(scheBtn, (idx, scheSelector) => { onEvent("click", `#${scheSelector}`, function () { let devNumPath = devNum.split("_").join("/"); let point = $(this).data("point"); let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>` $("#bajaSche").html(ifHtml); }) }) }) }) // 電梯管理 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(""); $("#detMasDiv").data("devnum", subData.device_number); // 電梯管理 Modal 切換到 detail 頁面 modalTogDiv("#eleManModal", "#tabDiv", "#detMasDiv", "next", function () { subDeviceSetEleManNotSerFloor(master); let devNumPath = subData.device_number?.split("_").join("/"); let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>` $("#bajaMasSche").html(ifHtml); }) }) // 電梯管理 Modal 不服務樓層 設定不服務樓層(BAJA) 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"); require(['baja!'], function (baja) { 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 }) } }) }); }); }) // 電梯管理 Modal 設備 設定點位(BAJA) onEvent("change", "#eleManDevTable input:checkbox", function () { let devNum = $("#detDevDiv").data("devnum"); let tarPoint = $(this).data("point"); let checked = $(this).prop("checked"); let devNumPath = devNum?.split("_").join("/"); require(['baja!'], function (baja) { 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 }) } }) }); }); }) // 切換 modal 內 div 頁面 function modalTogDiv(modal, div1, div2, type = "next", callback = null) { $(modal).find(div1).parent("div").css("overflow", "hidden"); $(modal).find(div1).css({ "position": "relative" }); $(modal).find(div2).css({ "position": "relative" }); 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 () { }) }) }); } //===================================================================== // ↓ 樓層平面圖 ↓ //===================================================================== 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; }); 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 }); option = { // animationDurationUpdate: 1500, tooltip: { formatter: function (params) { 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:${params.data.device_node_guid}` } else { return `名稱:${params.data.full_name}<br> Guid:${params.data.device_guid}` } } }, toolbox: { //工具欄 show: false }, geo: { map: 'floor_svg', roam: true, scaleLimit: { //限制放大縮小倍數 max: 32, min: 1 }, layoutSize: '100%', layoutCenter: ['40%', '50%'], 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); /*console.log(floChart)*/ 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 }] }); } } //===================================================================== // ↑ 樓層平面圖 ↑ //===================================================================== // 設置 模型隱藏或透明 function setInviForge(type, devDbIds) { // console.log("devDbIds", devDbIds) if (type == "Hide") { hideAllObjects(devDbIds); } else if (type == "Opacity") { setTransparentBuilding(0, devDbIds); } } // 取得 不可視 3D 模型類型 function getInviForge() { let url = baseApiUrl + "/api/Device/GetForgeInvType"; ytAjax = new YourTeam.Ajax(url, null, function (res) { if (!res || res.code != "0000" || !res.data) { } else { let datas = res.data; forgeInvType = datas.filter(x => x.sub_system_tag == pageAct.sysSubTag)[0]?.invisible_value; forgeInvTypeDef = datas.filter(x => x.invisible_type == "default_value")[0]?.invisible_value; } }, null, "POST").send(); } //載入3D模型 function load3DModel() { launchViewer(pageAct.urn, (viewer) => { document.querySelector("#guiviewer3d-toolbar").style.display = "none"; let elevOption = { selector: "#forgeViewer", viewer: viewer, ordPath: subOrdPath } // 電梯移動訂閱程序載入 let forge3DElev = new Forge3DElevFull(elevOption); forge3DElev.bajaEndCallback = function () { // 從資料庫設定不可視模型的類型,若沒有取道該小類不可視類型,則套用資料庫設定預設類型 if (forgeInvType) { setInviForge(forgeInvType, this.getNodeIds()); } else { setInviForge(forgeInvTypeDef, this.getNodeIds()); } setTransparentBuilding(0); endPageLoading(); } forge3DElev.bajaChaCallback = function (data) { subDeviceSetStatus(data); } forge3DElev.init(); }); } function show3D() { if (isFirstLoad3D) { isFirstLoad3D = false; load3DModel(); } } </script>