<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 devicePointList = []; $(function () { getBuildMenu((arr, data) => { if (arr.indexOf(4) != -1) { getFloDevList(); setLightColor(); } if (arr.indexOf(5) != -1) { setHotspotPoint(); 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"> <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>`; break; case 5: strHtml = `<div name="forgeViewer" style="height:85vh;"></div>`; break; } return strHtml; } //baja 訂閱設備 function subDevice() { if (myBaja == null) { 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; } 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(); }); myBaja.setSubscribeDeviceEndCallBack(function (data) { endPageLoading(); }); } } //根據 data-type 設置顏色 (判斷後台是否有設定,若無則帶預設) 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 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 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); strHtml += `<div class="card m-1 border device-wrap"> <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="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></div>"; }) // Niagara 產生 file 開頭字串問題 strHtml = strHtml.replaceAll(`src="/file/`, `src="`); if (!res.data || res.data.length == 0) { endPageLoading(); } else { subDevice(); } $("#floDevList").append(strHtml); initPopover(pageAct.sysMainTag == "LT" ? "light" : null); } }, 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() { let strHtml = `<div style="height:15rem"> <iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe> </div>` return strHtml; } function show3DModel(urn) { launchViewerForHotspot(urn, (viewer, nodeIds) => { getHotspotPoint(); },"[name=forgeViewer]"); } function getHotspotPoint() { 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 { devicePointList.push(res.data.device_coordinate_3d); } }, null, "POST").send(); } function setHotspotPoint() { //先假設有抓到點位的座標 之後api改input後再接 const mydatalist = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, { position: { x: -21.95, y: 7.61, z: 63.27 } }, { position: { x: -21.95, y: 6.43, z: 63.27 } }, { position: { x: -21.95, y: 5.31, z: 63.27 } } ]; getHopspotPoint(mydatalist); } </script>