<style> </style> <div class="row"> <div class="col-sm-12 col-xl-5"> <div class="d-flex mb-4" style="gap:15px"> <div class="row m-0 align-items-center"> <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span> <label class="mb-0">正常</label> </div> <div class="row m-0 align-items-center"> <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span> <label class="mb-0">關機</label> </div> <div class="row m-0 align-items-center"> <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span> <label class="mb-0">異常</label> </div> </div> <div class="col-12 p-0" id="floDevList"> </div> </div> <div class="col-sm-12 col-xl-7"> </div> </div> <script> var allDevList = []; //全設備清單 $(function () { getFloDevList(); setLightColor(); subDevice(); }) //baja 訂閱設備 function subDevice() { myBaja = new subscriptionDevices(); var ordPath = { "building_tag": pageAct.buiTag, "system_tag": pageAct.sysMainTag, "name_tag": pageAct.sysSubTag, } myBaja.setSubscribeDevicesByBql(ordPath); myBaja.setSubscribeDevicesCallBack(function (data) { let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0]; let norDevPoiName = matchDevice.device_normal_point_name; let cloDevPoiName = matchDevice.device_close_point_name; let errDevPoiName = matchDevice.device_error_point_name; if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { //顯示正常燈號 $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal"); } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) { $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close"); } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) { $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error"); } setLightColor(); }); } //根據 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 align-self-center" >${floObj.full_name}</button>` $.each(floObj.device_list, (index2, devObj) => { console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon); allDevList.push(devObj); strHtml += `<div class="card m-1 border device-wrap" style="width:300px"> <div class="card-body p-2"> <div class="d-flex mb-2"> <div class="mr-5 cur-poi"> <span class="d-inline-block mr-3"> <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."> </span> <a href="javascript:;">${devObj.full_name}</a> </div> </div> <div class="d-flex mb-0 mt-2 align-items-center"> <span id="${devObj.device_number}_status" class="circle-light"></span> <span class="d-none">即時功率:</span> <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a> </div> </div> </div>`; }) strHtml += "</div>" }) $("#floDevList").append(strHtml); initPopover(); } }, null, "POST").send(); } // Card 即時狀態 function drawStateTabBlo() { let strHtml = `<div style="height:15rem"> <iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe> </div>` return strHtml; } </script>