2439 lines
112 KiB
HTML
2439 lines
112 KiB
HTML
<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;
|
||
}
|
||
</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 class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
|
||
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
|
||
2D
|
||
</button>
|
||
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv" onclick="show3D()">
|
||
3D
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="elevator-body d-flex align-items-center justify-content-center">
|
||
<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" data-tabname="floShowType" data-tabrole="child">
|
||
<div id="forgeViewer"></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 class="mt-2">
|
||
<div class="pl-3 row">
|
||
<button id="resChartZoom" class="btn btn-info">圖檔重置</button>
|
||
</div>
|
||
<div id="floChart" style="height : 45vh!important;width:100%"></div>
|
||
<!--<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>
|
||
</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="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="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 viewer3DNodeIds = [233, 228, 223];
|
||
var elev3DBind = {};
|
||
var elev3DOption = {};
|
||
var elev3DObj = [];
|
||
var subOrdPath = {
|
||
"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;
|
||
$(function () {
|
||
initChart();
|
||
|
||
setBuildFloor();
|
||
setCards();
|
||
subDeviceSetStatus();
|
||
setEleManTable();
|
||
|
||
})
|
||
|
||
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;
|
||
}
|
||
data.device_number = data.device_number_full;
|
||
let matchDevice = allDevList.filter(x => x.device_number == data.device_number)[0];
|
||
let master = matchDevice.device_number.split("_")[5];
|
||
//狀態
|
||
if (data.point_name == "ST") {
|
||
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
|
||
//若為異常(match資料庫點位值)且後台有設定為閃爍
|
||
if (getValueByName("ST") == matchDevice.device_error_point_value) {
|
||
$(`#${matchDevice.device_number}_card`).addClass("light-flash")
|
||
}
|
||
}
|
||
//現在樓層
|
||
if (data.point_name == "CP") {
|
||
$(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
|
||
}
|
||
//往上或往下
|
||
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");
|
||
|
||
|
||
//將訂閱值塞入 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;
|
||
}
|
||
// 設置燈色、卡片閃爍
|
||
setLightColor();
|
||
// Card table 更新
|
||
subDeviceSetTable(matchDevice.device_number);
|
||
// 重繪 電梯管理 列表
|
||
reloadEleManTable(setEleManTabDataFromBaja());
|
||
// 電梯管理 detail
|
||
subDeviceSetEleManDet(matchDevice.device_number);
|
||
// 電梯管理 不服務樓層 detail
|
||
subDeviceSetEleManNotSerFloor(master);
|
||
});
|
||
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||
|
||
let devNumArr = data.map(x => { return { devNum: x.device_number_full, priority: allDevList.filter(y => y.device_number == x.device_number_full)[0]?.priority } }).DistinctBy("devNum");
|
||
devNumArr = devNumArr.oSort("priority");
|
||
$.each(devNumArr, (idx, devObj) => {
|
||
devNum = devObj.devNum;
|
||
let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
|
||
|
||
if (subData) {
|
||
// 左側 3D 電梯 nodeID 與 device_number match
|
||
if (Object.keys(elev3DBind).indexOf(devNum) == -1) {
|
||
elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
|
||
}
|
||
// 左側 3D 電梯 Viewer Option 設置
|
||
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
|
||
elev3DOption.nodeId = elev3DBind[devNum];
|
||
elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
|
||
elev3DOption.floorHeight.forEach((floObj, idx) => {
|
||
if (floObj.floor.startsWith("B")) {
|
||
let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
|
||
floObj.height = floor * -13;
|
||
} else {
|
||
let floor = parseInt(floObj.floor.split("F")[0]);
|
||
if (floor == 1) {
|
||
floObj.height = 0;
|
||
} else if (floor == 2) {
|
||
floObj.height = 14.75;
|
||
} else {
|
||
floObj.height = (14.75 + ((floor - 2) * 9.75));
|
||
}
|
||
}
|
||
})
|
||
|
||
if (isFirstLoad3D == false && elev3DObj.length != 0) {
|
||
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
|
||
if (!elevObj.id) {
|
||
elevObj.id = devNum;
|
||
}
|
||
elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
|
||
elevObj.obj.init(function () {
|
||
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]);
|
||
frags.forEach((fragProxy) => {
|
||
fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
|
||
fragProxy.frag.updateAnimTransform()
|
||
})
|
||
elevObj.obj.viewer.impl.sceneUpdated(true);
|
||
});
|
||
}
|
||
}
|
||
})
|
||
|
||
reloadEleManTable(setEleManTabDataFromBaja());
|
||
})
|
||
}
|
||
|
||
// 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 (isFirstLoad3D == false && elev3DObj.length != 0) {
|
||
let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
|
||
if (elevObj && elevObj.id) {
|
||
elevObj.obj.setElevatorFloor(subData["CP"])
|
||
elevObj.obj.movElevator();
|
||
}
|
||
}
|
||
|
||
elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
|
||
//現在樓層
|
||
if (subData["CP"]) {
|
||
$(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"]);
|
||
}
|
||
//往上或往下
|
||
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("、"))
|
||
}
|
||
|
||
//取得設備 並繪製Card
|
||
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 = ``;
|
||
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">`);
|
||
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">`);
|
||
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: [],
|
||
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
|
||
}]
|
||
});
|
||
}
|
||
}
|
||
|
||
//=====================================================================
|
||
// ↑ 樓層平面圖 ↑
|
||
//=====================================================================
|
||
|
||
//載入3D模型
|
||
function load3DModel() {
|
||
|
||
|
||
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA==', (viewer) => {
|
||
$.each(viewer3DNodeIds, function (idx, node) {
|
||
let options = {
|
||
element: $("#forgeViewer"),
|
||
viewer: viewer,
|
||
nodeId: node,
|
||
floorHeight: elev3DOption.floorHeight ?? [],
|
||
inited: function () {
|
||
|
||
}
|
||
}
|
||
let elevator3DObj = new elevator3D(options);
|
||
let devNum = Object.keys(elev3DBind).filter(x => elev3DBind[x] == node)[0];
|
||
let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
|
||
|
||
if (elev3DObj.filter(x => x.nodeId == node).length == 0) {
|
||
elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
|
||
}
|
||
|
||
if (subData) {
|
||
let elevObj = elev3DObj.filter(x => x.nodeId == node)[0];
|
||
if (!elevObj.id) {
|
||
elevObj.id = devNum;
|
||
}
|
||
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
|
||
elevObj.obj.init(function () {
|
||
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
|
||
frags.forEach((fragProxy) => {
|
||
fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
|
||
fragProxy.frag.updateAnimTransform()
|
||
})
|
||
elevObj.obj.viewer.impl.sceneUpdated(true);
|
||
})
|
||
|
||
|
||
}
|
||
})
|
||
|
||
//let elevator = elev3DObj[0];
|
||
//elevator.obj.setElevatorFloor(3)
|
||
//elevator.obj.movElevator()
|
||
//setElevatorSpeed(0.2)
|
||
//setElevatorFloor(2)
|
||
//requestAnimationFrame(movElevator);
|
||
});
|
||
|
||
}
|
||
function show3D() {
|
||
if (isFirstLoad3D) {
|
||
isFirstLoad3D = false;
|
||
load3DModel();
|
||
}
|
||
}
|
||
</script>
|