ibms-dome/Frontend/_sysMonAll.html

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

    .circle-light {
        width: 25px;
        height: 25px;
        border-radius: 50px;
    }
</style>

<div class="row">
    <div class="col-sm-12 col-xl-5">
        <div class="d-flex mb-4" style="gap:15px">
            <div class="row m-0 align-items-center">
                <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
                <label class="mb-0">正常</label>
            </div>
            <div class="row m-0 align-items-center">
                <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
                <label class="mb-0">關機</label>
            </div>
            <div class="row m-0 align-items-center">
                <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
                <label class="mb-0">異常</label>
            </div>
        </div>

        <div class="col-12 p-0" id="floDevList">


        </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>
    var allDevList = [];
    $(function () {
        getFloDevList();
        setLightColor();
        
        initSub();
    })

    function initSub() {
        myBaja = new subscriptionDevices();
        var ordPath = {
            "building_tag": pageAct.buiTag,
            "system_tag": pageAct.sysMainTag,
            "name_tag": pageAct.sysSubTag,
        }
        myBaja.setSubscribeDevicesByBql(ordPath);
        myBaja.setSubscribeDevicesCallBack(function (data) {
            
            let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0];
            let norDevPoiName = matchDevice.device_normal_point_name;
            let cloDevPoiName = matchDevice.device_close_point_name;
            let errDevPoiName = matchDevice.device_error_point_name;

            if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
                //顯示正常燈號
                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
                
            } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
            } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
            }
            setLightColor();
        });
        
    }

    //function loadStaLight() {
    //    if (pageAct.sysSubObj.device_normal_color) {
    //        $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color);
    //    } else {
    //        $("#sysNorLight").addClass("bg-success");
    //    }
    //    if (pageAct.sysSubObj.device_close_color) {
    //        $("#sysCloLight").css("background-color", pageAct.sysSubObj.device_close_color);
    //    } else {
    //        $("#sysCloLight").addClass("bg-secondary");
    //    }
    //    if (pageAct.sysSubObj.device_error_color) {
    //        $("#sysErrLight").css("background-color", pageAct.sysSubObj.device_error_color);
    //    } else {
    //        $("#sysErrLight").addClass("bg-danger");
    //    }
    //}

    function setLightColor() {
        $("[data-light-type]").each((index, ele) => {
            let type = $(ele).data("light-type");
            let color = "#000";
            switch (type) {
                case "normal":
                    color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
                    break;
                case "close":
                    color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
                    break;
                case "error":
                    color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
                    break;
            }
            $(ele).css("background-color", color);
        })
    }

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

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

                    $.each(floObj.device_list, (index2, devObj) => {
                        console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
                        allDevList.push(devObj);
                        strHtml += `<div class="card m-1 border device-wrap" style="width:300px">
                                        <div class="card-body p-2">
                                            <div class="d-flex mb-2">
                                                <div  class="mr-5 cur-poi">
                                                    <span class="d-inline-block mr-3">
                                                        <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
                                                    </span>
                                                    <a href="javascript:;">${devObj.full_name}</a>
                                                </div>
                                            </div>
                                        <div class="d-flex mb-0 mt-2 align-items-center">
                                                <span id="${devObj.device_number}_status" class="circle-light"></span>
                                                <span class="d-none">即時功率：</span>
                                                <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
                                            </div>
                                        </div>
                                    </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" id="iframemodal">
                        <div class="modal-body">
                            <iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
                        </div>
                       </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();

        return tabEle.prop("outerHTML");
    }

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

                        </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
            let devName = $(ele).data("name"); //full_name
            $(ele).YTTooltip({
                html: `<div class="card m-1 border device-wrap">
                            <div class="col-12 p-0 row justify-content-end m-0">
                                <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
                            </div>
                            <div class="card-header p-2 px-3">
                                
                                <div class="position-absolute w-50" style="word-break: break-all;">
                                    <label class="m-0 mt-2">${devName}</label>
                                </div>
                                <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" })
                    console.log($(oriEle).data("number"))
                    //基本資料tab block
                    $("#info").html(drawInfoTabBlo(devGuid));
                    loadErr($(oriEle).data("number"));
                    loadOpeRecTable(devGuid);
                    //loadErrRecTable2($(oriEle).data("number"));
                    //loadErrRecTable();
                    
                }
            })
        })
    }

    function loadOpeRecTable(devGuid) {
        let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
        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": "類型",
                "data": "work_type_name",
            },
            {
                "title": "項目",
                "data": "fix_do",
            },
            {
                "title": "處理人員",
                "data": "work_person_name",
            },
            {
                "title": "發生/完成時間",
                "data": "finishTime",
                "render": function (data, type, row) {
                    return row.createdAt + "<br>" + data;
                },
            },

        ];



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

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

    function loadErr(allPath) {
        if (allPath != undefined && allPath != null) {
            let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
            let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
            getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
        }
        else {
            console.log("no device");
        }
    }

    function callbackForErr(result) {
        let tag = "#errRecTable";
        let datas;

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

        let columns = [
            {
                "title": "異常ID",
                "data": "uuid",

            },
            {
                "title": "異常原因",
                "data": "msgText",
            },
            {
                "title": "ACK確認",
                "data": "ackState",
            },
            {
                "title": "發生/完成時間",
                "data": "normalTime",
                "render": function (data, type, row) {
                    return row.timestamp + "<br>" + data;
                },
            },

        ];

        let json_object = JSON.parse(result);
        datas = json_object['data'];
        errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");

    }

</script>