ibms-dome/Frontend/_sysMonAll.html

<style>
</style>

<div class="row">
    <div id="leftDiv" class="col-sm-12 col-xl-6">

    </div>
    <div id="rightDiv" class="col-sm-12 col-xl-6">

    </div>
</div>

<!-- Modal center Add -->
<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    燈控排程
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
                <button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
            </div>
        </div>
    </div>
</div>

<script>
    var allDevList = [];  //全設備清單
    var subDeviceData = [];
    var heatMap = null;
    var buildMenuData = {};

    $(function () {
        getBuildMenu((arr, data) => {
            buildMenuData = data;
            if (arr.indexOf(4) != -1) {
                getFloDevList(arr[0] == 4 ? "left" :"right");
                setLightColor();
            }
            if (arr.indexOf(3) != -1) {
                getLightPoint();
                getHotspotPoint(() => {
                    show3DModel(data.urn_3D);
                });
            }
        });
    })

    // 依據 drawing type 決定呈現畫面
    function getHtmlByType(type = 0, data = {}) {
        let strHtml = ``;
        switch (type) {
            case 2:
                strHtml = `<div style="height:85vh">
                                <iframe src="${data.system_url}" width="100%" height="100%"></iframe>
                           </div>`;
                break;
            case 4:
                strHtml = `<div class="d-flex mb-4" style="gap:15px">
                                ${setTopLight()}
                            </div>

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

                            </div>`;
                break;
            case 3:
                strHtml = `<div class="d-flex mb-4" style="gap:15px">
                                ${setTopHeatBar()}
                            </div>
                            <div name="forgeViewer" style="height:85vh;"></div>`;
                break;
        }

        return strHtml;
    }
    //baja 訂閱設備
    function subDevice() {

        let myBaja = new subscriptionDevices();
        var ordPath = {
            "area_tag": pageAct.AreaTag,
            "building_tag": pageAct.buiTag,
            "system_tag": pageAct.sysMainTag,
            "name_tag": pageAct.sysSubTag,
        }
        myBaja.setSubscribeDevicesByBql(ordPath);
        myBaja.setSubscribeDevicesCallBack(function (data) {
            console.log(data)
            let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
            if (!matchDevice) {
                return false;
            }
            console.log(data)
            //將訂閱值塞入 subDeviceData
            if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                let obj = {};
                obj.device_number = matchDevice.device_number;
                obj.dbid = matchDevice.forge_dbid;
                subDeviceData.push(obj)
            }

            let subData = subDeviceData.filter(x => x.device_number == matchDevice.device_number)[0];

            if (subData) {
                subData[data.point_name] = data.value;
            }

            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 == "Temp") {
                heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
                let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
                allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
            }

            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();
            setForgeHotSpotColor(matchDevice);
            lightDevForgeSpotLig(matchDevice)
            // 從設備訂閱更新每個設備卡片即時點位
            setDevItemPoiValBySub(data);
        });

        myBaja.setSubscribeDeviceEndCallBack(function (data) {
            endPageLoading();
        });

    }

    function lightDevForgeSpotLig(devObj) {
        
        
    }

    // 從設備訂閱更新每個設備卡片即時點位
    function setDevItemPoiValBySub(data) { 
        
        let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
        if (pointSpan && pointSpan.data("point") == data.point_name) {
            console.log(data)
            pointSpan.text(data.value);
        }
    }

    function setLightColor() {
        $("[data-light-type]").each((index, ele) => {
            let type = $(ele).data("light-type");
            let isFlashing = false;
            let color = "#000";
            switch (type) {
                case "normal":
                    color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
                    break;
                case "close":
                    color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
                    break;
                case "error":
                    color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
                    break;
            }
            $(ele).css("background-color", color);
            //是否閃爍
            if (isFlashing) {
                $(ele).parents(".card.device-wrap").addClass("light-flash");
            }
        })
    }

    // 設置昇位圖上方 燈號
    function setTopLight() {
        let sysSubObj = pageAct.sysSubObj;
        let strHtml = ``;
        if (sysSubObj.device_normal_point_name != null && sysSubObj.device_normal_point_value != null) {
            strHtml += ` <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">${sysSubObj.device_normal_text}</label>
                        </div>`;
        }
        if (sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_value != null) {
            strHtml += ` <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">${sysSubObj.device_close_text}</label>
                            </div>`;
        }
        if (sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_value != null) {
            strHtml += ` <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">${sysSubObj.device_error_text}</label>
                        </div>`;
        }

        return strHtml;
    }

    // 設置 Forge 3D 溫度條
    function setTopHeatBar() {
        let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
        return strHtml;
    }

    // forge 3D 異常點位變紅色
    function setForgeHotSpotColor(device) {
        let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
        if (subData && subData[device.device_error_point_name] == device.device_error_point_value && !isNaN(parseInt(device.spriteDbid))) {
            changeColorForHotspot(parseInt(device.spriteDbid), "error");
        }
    }

    // 取得昇位圖點位 (deviceItem)
    function getRiserPoiObj() {
        let tarDevItem = pageAct.devItems?.filter(x => x.is_show_riserDiagram == 1);
        if (tarDevItem && tarDevItem[0]) {
            return tarDevItem[0];
        }
        return null;
    }

    // 取得設備列表 並繪製卡片
    function getFloDevList(position = "left") {
        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 mt-1 align-self-start" >${floObj.full_name}</button>`
                    strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
                    $.each(floObj.device_list, (index2, devObj) => {
                        allDevList.push(devObj);
                        let devItem = getRiserPoiObj();
                        strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}" data-position="${position}">
                                        <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 + varPathDevIcon + devObj.device_image}" 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="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</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></div>";
                })
                // Niagara 產生 file 開頭字串問題
                strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
                if (!res.data || res.data.length == 0) {
                    endPageLoading();
                } else {
                    subDevice();
                }
                $("#floDevList").append(strHtml);
                initPopover();
            }
        }, null, "POST").send();
    }

    function getBuildMenu(callback = null) {
        let url = baseApiUrl + "/api/Device/GetBuildMenu";
        let sendData = {
            main_system_tag: pageAct.sysMainTag,
            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 leftData = {}, rightData = {};

                for (var key in res.data) {
                    if (key.startsWith("left")) {
                        leftData[key.split("left_")[1]] = res.data[key];
                    } else if (key.startsWith("right")) {
                        rightData[key.split("right_")[1]] = res.data[key];
                    }
                }

                if (res.data.left_drawing != null) {
                    $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
                } else {
                    $("#leftDiv").html(getHtmlByType(0, leftData));
                }
                if (res.data.right_drawing != null) {
                    $("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
                } else {
                    $("#rightDiv").html(getHtmlByType(0, rightData));
                }

                callback ? callback([res.data.left_drawing, res.data.right_drawing], res.data) : "";
            }
        }, null, "POST").send();
    }

    // Card 即時狀態
    function drawStateTabBlo(devNum) {
        let devPath = devNum.replaceAll("_", "/");
        let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position");
        let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
        let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
        let strHtml = `<div style="height:100%;width:100%">
                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};min-height:100px;"></iframe>
                       </div>`
        return strHtml;
    }

    function iframeResize(obj) {
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
    }

    function show3DModel(urn) {
        $(loadEle).Loading("start");
        getLightData(allDevList);
        launchViewerForHotspot(urn, (viewer, nodeIds) => {
            showHeat("[name=forgeHeatBar]");
            let devDbIds = allDevList.map(x => x.forge_dbid);
            /*hideAllObjects(devDbIds);*/
            
            setTransparentBuilding(0, devDbIds);
            $(loadEle).Loading("close");

            let devices = allDevList.map(x => {
                return {
                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
                    id: x.device_number,
                    position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
                    sensorTypes: ["temperature", "humidity"]
                }
            })

            let option = {
                devices: devices,
            }

            heatMap = new ADHeatMaps(option);
            heatMap.onComplete = () => {
                $.each(allDevList, (idx, dev) => {
                    heatMap.changeTemp(dev.device_number, dev._temp || 0);
                })
            }

            let elevOption = {
                selector: "[name=forgeViewer]",
                viewer: viewer,
                ordPath: {
                    "area_tag": pageAct.AreaTag,
                    "building_tag": pageAct.buiTag,
                },
            }

            // 電梯移動訂閱程序載入
            let forge3DElev = new Forge3DElevFull(elevOption);
            forge3DElev.bajaEndCallback = function () {
                endPageLoading();
            }
            forge3DElev.init();


            if (subDeviceData.length != 0) {
                let stSubArr = subDeviceData.map(x => Object.keys(x).filter(y => y == "ST").map(y => x));

                for (let sub of stSubArr) {
                    let matchDevice = allDevList.filter(x => x.device_number == sub[0]?.device_number)[0];
                    if (matchDevice) {
                        setForgeHotSpotColor(matchDevice);
                    }
                }
            }

            getWaterNodeId();
        }, () => {
            $(loadEle).Loading("close");
        }, "[name=forgeViewer]");
    }

    // 供水系統 - 取得欲染色 dbid
    function getWaterNodeId() {
        let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
        let sendData = { forgeNodeKey: "water_wupply" };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {
                if (!isNaN(parseInt(res.data[0]?.system_value))) {
                    changeColor(parseInt(res.data[0]?.system_value))
                }
                console.log(res.data)
            }
        }, null, "POST").send();

    }

    function getHotspotPoint(callback = null) {
        let url = baseApiUrl + "/api/GetDevForCor";
        let sendData = {
            "device_area_tag": pageAct.AreaTag,
            "device_building_tag": pageAct.buiTag,
            "device_system_tag": pageAct.sysMainTag,
            "device_name_tag": pageAct.sysSubTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {

                let myDataList = [];
                $.each(res.data, (idx, data) => {
                    let item = {};
                    item.position = {};
                    if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
                        item.position = JSON.parse(data.device_coordinate_3d);
                    }
                    $.extend(item, data);
                    myDataList.push(item);
                })

                console.log("1", myDataList)
                setHotspotPoint(myDataList);
                callback ? callback() : "";
            }
        }, null, "POST").send();

    }

    async function getLightPoint(callback = null) {
        let url = baseApiUrl + "/api/GetDevNodeForCor";
        let sendData = {
            "device_area_tag": pageAct.AreaTag,
            "device_building_tag": pageAct.buiTag,
            "device_system_tag": pageAct.sysMainTag,
            "device_name_tag": pageAct.sysSubTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {

                let myDataList = [];
                $.each(res.data, (idx, data) => {
                    let item = {};
                    item.position = {};
                    if (data.device_node_coordinate_3d != null && isJSON(data.device_node_coordinate_3d)) {
                        item.position = JSON.parse(data.device_node_coordinate_3d);
                    }
                    $.extend(item, data);
                    myDataList.push(item);
                })

                console.log("2", myDataList)
                setLightPoint(myDataList);
                callback ? callback() : "";
            }
        }, null, "POST").send();

    }

    function setHotspotPoint(myDataList = []) {
        console.log(myDataList)
        getHopspotPoint(myDataList);
    }

    async function setLightPoint(myDataList = []) {
        console.log(myDataList)
        getLightData(myDataList);
    }

    var parentEle = "";
    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
        forgeUnFocusAll();
        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
        let devObj = obj.myData;
        let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
        devObj.full_name = name;
        parentEle = crePosPopover(position, devObj);

        $(parentEle).click();
    })

    onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
        $(parentEle).YTTooltip("hide");
    })

    onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
        
        $("#floDevList a[name=devItem]").each((idx, ele) => {
            let devNum = $(ele).data("number");
            let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
            allDevList.forEach((dev, idx) => {
                if (dev.device_number == devNum) {
                    dev.spriteDbid = dbid;
                    setForgeHotSpotColor(dev);
                }
            })
            $(ele).data("dbId", dbid);

        })
    })

    onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
        forgeUnFocusAll();
    })

    function forgeUnFocusAll() {
        $("#floDevList a[name=devItem]").each((idx, ele) => {
            controlFocusHotspot($(ele).data("dbId"), false);
        })
    }
</script>