<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 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="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) { 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 == "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(); 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))) { 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 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 ">詳細資料</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 設備 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"); 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"); launchViewerForHotspot(urn, (viewer, nodeIds) => { let devDbIds = allDevList.map(x => x.forge_dbid); // 從資料庫設定不可視模型的類型,若沒有取道該小類不可視類型,則套用資料庫設定預設類型 if (forgeInvType) { setInviForge(forgeInvType, devDbIds); } else { setInviForge(forgeInvTypeDef, 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); }) setHotspotPoint(myDataList); if (pageAct.sysMainTag == "LT") { setLightPoint(myDataList); } callback ? callback() : ""; } }, null, "POST").send(); } function setHotspotPoint(myDataList = []) { console.log(myDataList) getHopspotPoint(myDataList); } function setLightPoint(myDataList = []) { console.log(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) { console.log("devDbIds",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 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>