<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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>