872 lines
		
	
	
		
			34 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			872 lines
		
	
	
		
			34 KiB
		
	
	
	
		
			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 id="lightSchBlock" style="height: 60vh"></div>
 | 
						||
            </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 alarmDbIdList = []; // 紀錄異常 forge 圓點,避免點擊與異常顏色衝突
 | 
						||
    var subDeviceData = [];
 | 
						||
    var heatMap = null;
 | 
						||
    var buildMenuData = {};
 | 
						||
    var forgeInvType = null;
 | 
						||
    var forgeInvTypeDef = null;
 | 
						||
 | 
						||
    $(function () {
 | 
						||
        getBuildMenu((arr, data) => {
 | 
						||
            buildMenuData = data;
 | 
						||
            if (arr.indexOf(4) != -1) {
 | 
						||
                getFloDevList(arr[0] == 4 ? "left" : "right");
 | 
						||
                setLightColor();
 | 
						||
            }
 | 
						||
            if (arr.indexOf(3) != -1) {
 | 
						||
                getHotspotPoint(() => {
 | 
						||
                    show3DModel(data.urn_3D);
 | 
						||
                    getInviForge();
 | 
						||
                });
 | 
						||
            }
 | 
						||
        });
 | 
						||
    });
 | 
						||
 | 
						||
    // 依據 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="position: relative; gap:15px">
 | 
						||
                                <div name="forgeViewer" style="position: absolute;width: 100%;height:85vh;">
 | 
						||
                                ${setTopHeatBar()}
 | 
						||
                                  </div>
 | 
						||
                            </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);
 | 
						||
 | 
						||
        // 燈熱點用
 | 
						||
        let lightOnHotColorArr = [];
 | 
						||
        let lightOffHotColorArr = [];
 | 
						||
        // 燈光圈用
 | 
						||
        let lightOnGuidArr = [];
 | 
						||
        let lightOffGuidArr = [];
 | 
						||
 | 
						||
        myBaja.setSubscribeDevicesCallBack(function (data) {
 | 
						||
            // console.log(data)
 | 
						||
            let matchDevice = allDevList.filter(
 | 
						||
                (x) => x.device_number == data.device_number_full
 | 
						||
            )[0];
 | 
						||
            if (!matchDevice) {
 | 
						||
                return false;
 | 
						||
            }
 | 
						||
 | 
						||
            //將訂閱值塞入 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 == "ONOFF" && pageAct.sysSubTag === "L1") {
 | 
						||
                const lightOn = data.value.includes("true");
 | 
						||
 | 
						||
                setLightOpenOrClose(lightOn, matchDevice.device_guid);
 | 
						||
                if (lightOn) {
 | 
						||
                    setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
 | 
						||
                    // changeColorForHotspot(matchDevice.spriteDbid, null, true)
 | 
						||
                    lightOnHotColorArr.push(matchDevice.spriteDbid);
 | 
						||
                    heatMap?.changeTemp(matchDevice.device_number, 40);
 | 
						||
                } else {
 | 
						||
                    setLightValues(matchDevice.device_guid, 0, 0xffffff);
 | 
						||
                    // changeColorForHotspot(matchDevice.spriteDbid)
 | 
						||
                    lightOnHotColorArr = lightOnHotColorArr.filter(
 | 
						||
                        (light) => light !== matchDevice.spriteDbid
 | 
						||
                    );
 | 
						||
                    lightOffHotColorArr.push(matchDevice.spriteDbid);
 | 
						||
                    heatMap?.changeTemp(matchDevice.device_number, 0);
 | 
						||
                }
 | 
						||
            }
 | 
						||
 | 
						||
            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;
 | 
						||
            }
 | 
						||
            console.log(matchDevice, data)
 | 
						||
            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");
 | 
						||
            }
 | 
						||
 | 
						||
            changeColorForHotspot(lightOnHotColorArr, null, true);
 | 
						||
            changeColorForHotspot(lightOffHotColorArr, null, false);
 | 
						||
            setLightColor();
 | 
						||
            setForgeHotSpotColor(matchDevice);
 | 
						||
            lightDevForgeSpotLig(matchDevice);
 | 
						||
            // 從設備訂閱更新每個設備卡片即時點位
 | 
						||
            setDevItemPoiValBySub(data);
 | 
						||
        });
 | 
						||
 | 
						||
        myBaja.setSubscribeDeviceEndCallBack(function (data) {
 | 
						||
            endPageLoading();
 | 
						||
            if (data.findIndex((x) => x.point_name == "Temp") != -1) {
 | 
						||
                // 顯示溫度條
 | 
						||
                showHeat("[name=forgeHeatBar]");
 | 
						||
            }
 | 
						||
        });
 | 
						||
    }
 | 
						||
 | 
						||
    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");
 | 
						||
            } else {
 | 
						||
                $(ele).parents(".card.device-wrap").removeClass("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;
 | 
						||
    }
 | 
						||
 | 
						||
    function setLightSchBlcok(obj) {
 | 
						||
        let devNum = $(obj).parents(".device-wrap").data("number");
 | 
						||
        let devPath = devNum.replaceAll("_", "/");
 | 
						||
        let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`;
 | 
						||
        $("#lightSchBlock").html(iframe);
 | 
						||
    }
 | 
						||
 | 
						||
    // 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)) || !isNaN(parseInt(device._dbId)))
 | 
						||
        ) {
 | 
						||
            const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
 | 
						||
            alarmDbIdList = [...alarmDbIdList, _dbId];
 | 
						||
            // console.log("異常", _dbId)
 | 
						||
            changeColorForHotspot(_dbId, "error");
 | 
						||
        } else if (
 | 
						||
            subData &&
 | 
						||
            subData[device.device_error_point_name] !==
 | 
						||
            device.device_error_point_value &&
 | 
						||
            (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
 | 
						||
        ) {
 | 
						||
            const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
 | 
						||
            let index = alarmDbIdList.findIndex((dbId) => dbId == _dbId);
 | 
						||
            index !== -1 && alarmDbIdList.splice(index, 1);
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    // 取得昇位圖點位 (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'>`;
 | 
						||
                        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 name="devItemName" data-number="${devObj.device_number
 | 
						||
                                }" 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 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
 | 
						||
                                            </div>
 | 
						||
                                        </div>
 | 
						||
                                    </div>`;
 | 
						||
                        });
 | 
						||
                        strHtml += "</div></div>";
 | 
						||
                    });
 | 
						||
                    // Niagara 產生 file 開頭字串問題
 | 
						||
                    strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
 | 
						||
 | 
						||
                    if (!res.data || res.data.length == 0) {
 | 
						||
                        endPageLoading();
 | 
						||
                    } else {
 | 
						||
                        // 訂閱 baja 設備
 | 
						||
                        if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
 | 
						||
                            subDevice();
 | 
						||
                        }
 | 
						||
                    }
 | 
						||
 | 
						||
                    // 繪製 html
 | 
						||
                    $("#floDevList").append(strHtml);
 | 
						||
 | 
						||
                    // 存入 device 基本資料至元素 data 屬性
 | 
						||
                    $("#floDevList a[name=devItem]").each((idx, ele) => {
 | 
						||
                        if (
 | 
						||
                            allDevList.findIndex(
 | 
						||
                                (x) => x.device_number == $(ele).data("number")
 | 
						||
                            ) != -1
 | 
						||
                        ) {
 | 
						||
                            $(ele).data(
 | 
						||
                                "devobj",
 | 
						||
                                allDevList.filter(
 | 
						||
                                    (x) => x.device_number == $(ele).data("number")
 | 
						||
                                )[0]
 | 
						||
                            );
 | 
						||
                        }
 | 
						||
                    });
 | 
						||
 | 
						||
                    // 初始化 pop 視窗
 | 
						||
                    initPopover();
 | 
						||
                    // 卡片設備名稱點擊事件
 | 
						||
                    devItemNameEvent();
 | 
						||
                }
 | 
						||
            },
 | 
						||
            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") || "left";
 | 
						||
        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;
 | 
						||
        if (pageAct.sysSubTag == "C") {
 | 
						||
            strHtml = `<div style="width:${width};height:${height};">
 | 
						||
                            <iframe src="./px/CCTV/TEST_RENDER.mp4" style="width:${width};height:${height};"></iframe>
 | 
						||
                       </div>`;
 | 
						||
        } else {
 | 
						||
            strHtml = `<div style="width:${width};height:${height};">
 | 
						||
                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
 | 
						||
                       </div>`;
 | 
						||
        }
 | 
						||
 | 
						||
        return strHtml;
 | 
						||
    }
 | 
						||
 | 
						||
    function iframeResize(obj) {
 | 
						||
        obj.style.height =
 | 
						||
            obj.contentWindow.document.documentElement.scrollHeight + "px";
 | 
						||
    }
 | 
						||
 | 
						||
    function show3DModel(urn) {
 | 
						||
        $(loadEle).Loading("start");
 | 
						||
        launchViewerForHotspot(
 | 
						||
            urn,
 | 
						||
            (viewer, nodeIds) => {
 | 
						||
                // 隱藏 toolbar
 | 
						||
                // document.querySelector("#guiviewer3d-toolbar").style.display = "none";
 | 
						||
                let devDbIds = allDevList.map((x) => x.forge_dbid);
 | 
						||
                // 大類
 | 
						||
                let subDevDbId = [];
 | 
						||
                allDevList.forEach(({ device_nodes }) => {
 | 
						||
                    subDevDbId = [
 | 
						||
                        ...subDevDbId,
 | 
						||
                        ...device_nodes.map((n) => n.forge_dbid),
 | 
						||
                    ];
 | 
						||
                });
 | 
						||
                // console.log(devDbIds, subDevDbId)
 | 
						||
                // 從資料庫設定不可視模型的類型,若沒有取道該小類不可視類型,則套用資料庫設定預設類型
 | 
						||
                if (forgeInvType) {
 | 
						||
                    setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
 | 
						||
                } else {
 | 
						||
                    setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
 | 
						||
                }
 | 
						||
 | 
						||
                $(loadEle).Loading("close");
 | 
						||
                let sensorObjs = [];
 | 
						||
                let devices = [];
 | 
						||
                if (pageAct.sysSubTag === "M12") {
 | 
						||
                    addHotPoint(viewer);
 | 
						||
                    allDevList.forEach((device) => {
 | 
						||
                        Forge3DSensor.sensorTimes++;
 | 
						||
                        const sensorObj = new Forge3DSensor({
 | 
						||
                            viewer: viewer,
 | 
						||
                            ordPath: {
 | 
						||
                                area_tag: pageAct.AreaTag,
 | 
						||
                                building_tag: pageAct.buiTag,
 | 
						||
                            },
 | 
						||
                            selector: "[name=forgeViewer]",
 | 
						||
                            elevCb: elevatorShow
 | 
						||
                                ? () => {
 | 
						||
                                    let elevOption = {
 | 
						||
                                        selector: "[name=forgeViewer]",
 | 
						||
                                        viewer: viewer,
 | 
						||
                                        ordPath: {
 | 
						||
                                            area_tag: pageAct.AreaTag,
 | 
						||
                                            building_tag: pageAct.buiTag,
 | 
						||
                                        },
 | 
						||
                                        sensorObjs,
 | 
						||
                                    };
 | 
						||
 | 
						||
                                    // 電梯移動訂閱程序載入
 | 
						||
                                    let forge3DElev = new Forge3DElevFull(elevOption);
 | 
						||
                                    forge3DElev.bajaEndCallback = function () {
 | 
						||
                                        endPageLoading();
 | 
						||
                                    };
 | 
						||
                                    forge3DElev.init();
 | 
						||
                                }
 | 
						||
                                : null,
 | 
						||
                            curDevice: {
 | 
						||
                                ...device,
 | 
						||
                                roomDbId: !isNaN(parseInt(device.room_dbid))
 | 
						||
                                    ? parseInt(device.room_dbid)
 | 
						||
                                    : -1,
 | 
						||
                                id: device.device_number,
 | 
						||
                                position: isJSON(device.device_coordinate_3d)
 | 
						||
                                    ? JSON.parse(device.device_coordinate_3d)
 | 
						||
                                    : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
 | 
						||
                                temp: 25,
 | 
						||
                                forge_dbid: parseInt(device.forge_dbid),
 | 
						||
                            },
 | 
						||
                            deviceList: allDevList.map((d) => ({
 | 
						||
                                ...d,
 | 
						||
                                roomDbId: !isNaN(parseInt(d.room_dbid))
 | 
						||
                                    ? parseInt(d.room_dbid)
 | 
						||
                                    : -1,
 | 
						||
                                id: d.device_number,
 | 
						||
                                position: isJSON(d.device_coordinate_3d)
 | 
						||
                                    ? JSON.parse(d.device_coordinate_3d)
 | 
						||
                                    : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
 | 
						||
                                temp: 25,
 | 
						||
                                forge_dbid: parseInt(d.forge_dbid),
 | 
						||
                            })),
 | 
						||
                        });
 | 
						||
                        sensorObjs.push(sensorObj);
 | 
						||
                    });
 | 
						||
                } else {
 | 
						||
                    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"],
 | 
						||
                            temp: 30,
 | 
						||
                            forgeDbId: parseInt(x.forge_dbid),
 | 
						||
                        };
 | 
						||
                    });
 | 
						||
 | 
						||
                    if (
 | 
						||
                        (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
 | 
						||
                        elevatorShow
 | 
						||
                    ) {
 | 
						||
                        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();
 | 
						||
                    }
 | 
						||
                }
 | 
						||
 | 
						||
                let option = {
 | 
						||
                    devices: devices,
 | 
						||
                };
 | 
						||
 | 
						||
                if (pageAct.sysSubTag !== "M12") {
 | 
						||
                    // console.log(pageAct.sysSubTag, option)
 | 
						||
                    heatMap = new ADHeatMaps(option);
 | 
						||
                    heatMap.onComplete = () => {
 | 
						||
                        $.each(allDevList, (idx, dev) => {
 | 
						||
                            heatMap.changeTemp(dev.device_number, dev._temp || 0);
 | 
						||
                        });
 | 
						||
                        subDevice();
 | 
						||
                    };
 | 
						||
                }
 | 
						||
                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);
 | 
						||
                        }
 | 
						||
                    }
 | 
						||
                }
 | 
						||
                if (pageAct.sysSubTag == "W2") {
 | 
						||
                    // console.log("@@",pageAct, pageAct.sub_system_tag)
 | 
						||
                    getWaterNodeId(viewer);
 | 
						||
                } else if (pageAct.sysSubTag == "E1") {
 | 
						||
                    getE1NodeId(viewer);
 | 
						||
                }
 | 
						||
            },
 | 
						||
            () => {
 | 
						||
                $(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();
 | 
						||
        // console.log("1",viewer.model)
 | 
						||
        viewer.model.search(
 | 
						||
            "給水",
 | 
						||
            (nodeIds) => {
 | 
						||
                // console.log("2",nodeIds)
 | 
						||
                viewer.show(nodeIds);
 | 
						||
            },
 | 
						||
            (e) => {
 | 
						||
                console.log(e);
 | 
						||
            }
 | 
						||
        );
 | 
						||
    }
 | 
						||
 | 
						||
    // 高壓配電盤染色
 | 
						||
    function getE1NodeId() {
 | 
						||
        viewer.model.search(
 | 
						||
            "高壓電力",
 | 
						||
            (nodeIds) => {
 | 
						||
                viewer.show(nodeIds);
 | 
						||
            },
 | 
						||
            (e) => {
 | 
						||
                console.log(e);
 | 
						||
            }
 | 
						||
        );
 | 
						||
    }
 | 
						||
 | 
						||
    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);
 | 
						||
                    });
 | 
						||
                    setHotspotPoint(myDataList);
 | 
						||
                    if (pageAct.sysMainTag == "LT") {
 | 
						||
                        setLightPoint(myDataList);
 | 
						||
                    }
 | 
						||
                    callback ? callback() : "";
 | 
						||
                }
 | 
						||
            },
 | 
						||
            null,
 | 
						||
            "POST"
 | 
						||
        ).send();
 | 
						||
    }
 | 
						||
 | 
						||
    function setHotspotPoint(myDataList = []) {
 | 
						||
        getHopspotPoint(myDataList);
 | 
						||
    }
 | 
						||
 | 
						||
    function setLightPoint(myDataList = []) {
 | 
						||
        getLightData(myDataList);
 | 
						||
    }
 | 
						||
 | 
						||
    // 取得 不可視 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();
 | 
						||
    }
 | 
						||
 | 
						||
    // 設置 模型隱藏或透明
 | 
						||
    function setInviForge(type, devDbIds) {
 | 
						||
        if (type == "Hide") {
 | 
						||
            hideAllObjects(devDbIds);
 | 
						||
        } else if (type == "Opacity") {
 | 
						||
            setTransparentBuilding(0, devDbIds);
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    var parentEle = "";
 | 
						||
    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
 | 
						||
        forgeUnFocusAll();
 | 
						||
        let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
 | 
						||
        let position = [rect.left + rect.width / 2, rect.top + rect.height / 3];
 | 
						||
        // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
 | 
						||
        let devObj = obj.myData;
 | 
						||
        let name =
 | 
						||
            allDevList.filter((x) => x.device_guid == devObj.device_guid)[0]
 | 
						||
                ?.full_name || devObj.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) => {
 | 
						||
            const eleDbId = $(ele).data("dbId");
 | 
						||
            if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
 | 
						||
                changeScaleForHotspot(eleDbId, false);
 | 
						||
                return;
 | 
						||
            } else {
 | 
						||
                // 3D 熱點解除
 | 
						||
                controlFocusHotspot(eleDbId, false);
 | 
						||
            }
 | 
						||
        });
 | 
						||
    }
 | 
						||
</script>
 |