<style> [id^=yt_tooltip] { width: 650px; } .circle-light { width: 25px; height: 25px; border-radius: 50px; } </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"> <!--<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">--> <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg"> <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>--> </div> </div> <script> $(function () { getFloDevList(); setLightColor(); }) //function loadStaLight() { // if (pageAct.sysSubObj.device_normal_color) { // $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color); // } else { // $("#sysNorLight").addClass("bg-success"); // } // if (pageAct.sysSubObj.device_close_color) { // $("#sysCloLight").css("background-color", pageAct.sysSubObj.device_close_color); // } else { // $("#sysCloLight").addClass("bg-secondary"); // } // if (pageAct.sysSubObj.device_error_color) { // $("#sysErrLight").css("background-color", pageAct.sysSubObj.device_error_color); // } else { // $("#sysErrLight").addClass("bg-danger"); // } //} function setLightColor() { $("[data-light-type]").each((index, ele) => { let type = $(ele).data("light-type"); let color = "#000"; switch (type) { case "normal": color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)"; break; case "close": color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)"; break; case "error": color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)"; break; } $(ele).css("background-color", color); }) } 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); 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" data-light-type="normal"></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(); } function drawStateTabBlo() { let strHtml = `<table class="table table-bordered table-striped text-center m-0" id="iframemodal"> <div class="modal-body"> <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> </table>` return strHtml; } function drawInfoTabBlo(devGuid) { let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`); let tbody = tabEle.append("<tbody>"); let columnNames = ["設備編號", "設備名稱"]; $.each(columnNames, (index, colName) => { let tr = $("<tr></tr>"); let td = $("<td></td>"); td.text(colName); tr.append(td); tbody.append(tr); }) let url = baseApiUrl + "/api/Device/GetBaseDevice"; let sendData = { device_guid: devGuid, }; objSendData.Data = sendData; ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { if (!res || res.code != "0000" || !res.data) { } else { tbody.find("tr").eq(0).append(creEle("td", res.data.device_number)); tbody.find("tr").eq(1).append(creEle("td", res.data.full_name)); } }, null, "POST").send(); return tabEle.prop("outerHTML"); } function drawErrRecTabBlo() { let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100"> </table>` return strHtml; } function drawOpeRecTabBlo() { let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100"> </table>` return strHtml; } function initPopover() { $("[name=devItem]").each((index, ele) => { let devNum = $(ele).data("number"); //設備編號 let devGuid = $(ele).data("id"); //guid let devName = $(ele).data("name"); //full_name $(ele).YTTooltip({ html: `<div class="card m-1 border device-wrap"> <div class="col-12 p-0 row justify-content-end m-0"> <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button> </div> <div class="card-header p-2 px-3"> <div class="position-absolute w-50" style="word-break: break-all;"> <label class="m-0 mt-2">${devName}</label> </div> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button> <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button> <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button> <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button> </div> </div> <div class="card-body p-2 tab-content"> <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child"> ${drawStateTabBlo()} </div> <div id="info" data-tabname="cardTab" data-tabrole="child"> </div> <div id="errRec" data-tabname="cardTab" data-tabrole="child"> ${drawErrRecTabBlo()} </div> <div id="opeRec" data-tabname="cardTab" data-tabrole="child"> ${drawOpeRecTabBlo()} </div> </div> </div>`, group: "device", onShow: function (tooltipEle, oriEle) { var tab = new YT.Tab({ tabName: "cardTab" }) console.log($(oriEle).data("number")) //基本資料tab block $("#info").html(drawInfoTabBlo(devGuid)); loadOpeRecTable(devGuid); //loadErrRecTable2($(oriEle).data("number")); loadErrRecTable(); } }) }) } function loadOpeRecTable(devGuid) { let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid; let tag = "#opeRecTable"; let column_defs = [ { "targets": [0], "width": "8%", "sortable": true }, { "targets": [1], "width": "8%", "sortable": true }, { "targets": [2], "width": "7%", "sortable": true }, { "targets": [3], "width": "7%", "sortable": true }, ]; let columns = [ { "title": "類型", "data": "work_type_name", }, { "title": "項目", "data": "fix_do", }, { "title": "處理人員", "data": "work_person_name", }, { "title": "發生/完成時間", "data": "finishTime", "render": function (data, type, row) { return row.createdAt + "<br>" + data; }, }, ]; //let callback = function () { // $('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody,會導致thead跑掉 // let api = this.api(); // api.columns.adjust(); //} let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi"); } function loadErrRecTable() { let tag = "#errRecTable"; let datas; //getOneDeviceAlarmTop10ByBaja(_devicePath, callback); let column_defs = [ { "targets": [0], "width": "15%", "sortable": true }, { "targets": [1], "width": "25%", "sortable": true }, { "targets": [2], "width": "25%", "sortable": true }, { "targets": [3], "width": "35%", "sortable": true }, ]; let columns = [ { "title": "異常ID", "data": "uuid", }, { "title": "異常原因", "data": "msgText", }, { "title": "ACK確認", "data": "ackState", }, { "title": "發生/賦歸時間", "data": "timestamp", "width": "45%", }, ]; //let callback = function (result) { // datas = result; //} let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}'; let json_object = JSON.parse(result); datas = json_object['data']; errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); } //function loadErrRecTable2(allPath) { // if (allPath != undefined && allPath != null) { // let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1 // let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5]; // //getOneDeviceAlarmTop10ByBaja(_devicePath, callback); // console.log("devicePath: " + _devicePath); // let result = '{"count": 2,"0": { "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "1","msgText": "","ackState": "1","normalTime": "1970-Jan-1 08:00:00.000 AM UTC+08:00"},"1": {"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "0","msgText": "","ackState": "1","normalTime": "2022-Nov-16 10:15:24.939 AM UTC+08:00"}}'; // let result_Json = JSON.parse(result) // var eachTable = $('.each-table tbody'); // for (var i = 0; i < result_Json['count']; i++) // { // item = result_Json[i.toString()]; // eachTable.append( // '<tr>' + // '<td>' + item.uuid + '</td>' + // '<td>' + item.msgText + '</td>' + // '<td>' + (item.ackState = 1 ? item.normalTime : '未確認') + '</td>' + // '<td>' + item.timestamp + '</td>' + // '</tr>'); // } // } // let callback = function (result) { // var eachTable = $('.each-table tbody'); // $.each(result, function (index, element) { // eachTable.append( // '<tr>' + // '<td>' + element[index].uuid + '</td>' + // '<td>' + element[index].msgText + '</td>' + // '<td>' + (element[index].ackState = 1 ? element[index].normalTime : '未確認') + '</td>' + // '<td>' + element[index].timestamp + '</td>' + // '</tr>'); // }); // } //} // } </script>