ibms-dome/Frontend/_sysMonAll.html

<style>
    [id^=yt_tooltip] {
        width: 450px;
    }
</style>

<div class="row">
    <div class="col-sm-12 col-xl-5" id="floDevList">
        <!--<div class="d-flex justify-content-start mb-6">
            <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
            <div id="floor19" class="mr-5 cur-poi">
                <span class="status status-success d-inline-block">
                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
                </span> 19F 門口東
            </div>
            <div class="mr-5">
                <span class="status status-danger d-inline-block">
                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
                </span> 19F 戶外門口中間
            </div>
        </div>

        <div class="d-flex justify-content-start mb-6">
            <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">21 F</button>
            <div class=" mr-5">
                <span class="status status-success d-inline-block">
                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
                </span> 21F 電錶01
            </div>
            <div class="mr-5">
                <span class="status status-danger d-inline-block">
                    <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
                </span> 21F 電錶02
            </div>
        </div>-->

    </div>
    <div class="col-sm-12 col-xl-7">
        <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
        <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
        <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
    </div>
</div>







<script>

    $(function () {
        getFloDevList();
    })

    function getFloDevList() {
        let url = baseApiUrl + "/api/Device/GetDeviceList";
        let sendData = {
            main_system_tag: pageAct.sysMainTag,
            building_tag: pageAct.buiTag,
            floor_tag: pageAct.floTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {
                let strHtml = ``;
                $.each(res.data, (index, floObj) => {
                    strHtml += "<div class='d-flex justify-content-start mb-6'>"
                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`

                    $.each(floObj.device_list, (index2, devObj) => {
                        strHtml += `<div name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" class="mr-5 cur-poi">
                                        <span class="status status-success d-inline-block">
                                            <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
                                        </span> ${devObj.full_name}
                                    </div>`;
                    })
                    strHtml += "</div>"
                })
                $("#floDevList").append(strHtml);
                initPopover();
            }
        }, null, "POST").send();
    }

    function drawStateTabBlo() {
        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
                            <tbody>
                                <tr>
                                    <td>電壓 V</td>
                                    <td>113</td>
                                </tr>
                                <tr>
                                    <td>電流 A</td>
                                    <td>8</td>
                                </tr>
                                <tr>
                                    <td>功率 W</td>
                                    <td>203</td>
                                </tr>
                                <tr>
                                    <td>今日用電 kWh</td>
                                    <td>58</td>
                                </tr>
                            </tbody>
                        </table>`
        return strHtml;
    }

    function drawInfoTabBlo(devGuid) {
        let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
        let tbody = tabEle.append("<tbody>");
        let columnNames = ["設備編號", "設備名稱"];

        $.each(columnNames, (index, colName) => {
            let tr = $("<tr></tr>");
            let td = $("<td></td>");
            td.text(colName);
            tr.append(td);
            tbody.append(tr);
        })

        let url = baseApiUrl + "/api/Device/GetBaseDevice";
        let sendData = {
            device_guid: devGuid,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {
                tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
                tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
            }
        }, null, "POST").send();

        //let strHtml = `<table class="table table-bordered table-striped text-center m-0">
        //                    <tbody>
        //                        <tr>
        //                            <td>設備編號</td>
        //                            <td>B01-B2-19F-CR-001</td>
        //                        </tr>
        //                        <tr>
        //                            <td>設備名稱</td>
        //                            <td>A區迴路001</td>
                              
        //                        </tr>
        //                    </tbody>
        //                </table>`
        return tabEle.prop("outerHTML");
    }

    function drawErrRecTabBlo() {
        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
                            <tbody>
                                <tr>
                                    <td>設備編號</td>
                                    <td>B01-B2-19F-CR-001</td>
                                    <td>3D 座標</td>
                                    <td>113</td>
                                </tr>
                                <tr>
                                    <td>設備名稱</td>
                                    <td>A區迴路001</td>
                                    <td>forge dbid</td>
                                    <td>101</td>
                                </tr>
                                <tr>
                                    <td>廠牌</td>
                                    <td>飛利浦 Philip</td>
                                    <td>IP</td>
                                    <td>192.168.1.105</td>
                                </tr>
                                <tr>
                                    <td>型號</td>
                                    <td>BH065</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>原廠文件</td>
                                    <td><a href="#">2022使用手冊.pdf</a></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>型號</td>
                                    <td>BH065</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>`
        return strHtml;
    }

    function drawOpeRecTabBlo() {
        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">

                        </table>`
        return strHtml;
    }

    function initPopover() {
        $("[name=devItem]").each((index, ele) => {
            let devNum = $(ele).data("number"); //設備編號
            let devGuid = $(ele).data("id"); //guid
            $(ele).YTTooltip({
                html: `<div class="card m-1 border device-wrap">
                            <div class="card-header p-2 px-3">
                                <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
                                    <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
                                    <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
                                    <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
                                    <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
                                </div>
                            </div>
                            <div class="card-body p-2 tab-content">

                                <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
                                    ${drawStateTabBlo()}
                                </div>
                                <div id="info" data-tabname="cardTab" data-tabrole="child">
                                    
                                </div>
                                <div id="errRec" data-tabname="cardTab" data-tabrole="child">
                                    ${drawErrRecTabBlo()}
                                </div>
                                <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
                                    ${drawOpeRecTabBlo()}
                                </div>


                            </div>
                        </div>`,
                group: "device",
                onShow: function (tooltipEle, oriEle) {
                    var tab = new YT.Tab({ tabName: "cardTab" })
                    //基本資料tab block
                    $("#info").append(drawInfoTabBlo(devGuid))
                    loadOpeRecTable();
                }
            })
        })
        

        function loadOpeRecTable() {
            let url = "https://api.npoint.io/31e717774a0f5822cc7b";
            let tag = "#opeRecTable";

            let column_defs = [
                { "targets": [0], "width": "8%", "sortable": true },
                { "targets": [1], "width": "8%", "sortable": true },
                { "targets": [2], "width": "7%", "sortable": true },
                { "targets": [3], "width": "7%", "sortable": true },
            ];

            let columns = [
                {
                    "title": "異常ID",
                    "data": "errId",
                },
                {
                    "title": "異常原因",
                    "data": "errReason",
                },
                {
                    "title": "ACK確認",
                    "data": "ackCheck",
                },
                {
                    "title": "發生/賦歸時間",
                    "data": "time",
                },

            ];

            let callback = function () {
                $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
                let api = this.api();
                api.columns.adjust();
            }

            opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, callback, null, null, null, null, null, "tpi");
        }
    }

</script>