<main id="js-page-content" role="main" class="page-content"> <div class="row"> <div class="col-sm-12 col-xl-2"> <div class="rounded border border-white"> <div class="d-flex position-relative py-3 px-4"> <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i> <input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上"> </div> <!-- nav-menu-reset will reset the font colors --> <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white" data-nav-accordion="true"> </ul> <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div> </div> </div> <div class="col-sm-12 col-xl-10"> <h1 class="p-2 mb-0">歷史資料瀏覽</h1> <div class="row bg-dark p-2 mb-5"> <div class="col-auto"> <div class="btn-group"> <button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button> <button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">日區間</button> <button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button> </div> </div> <div class="col-auto"> <div class="btn-group"> <button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button> <button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</button> </div> </div> <div class="col-auto"> <div class="form-group"> <input class="form-control" id="his_startdate" data-val="" type="date" name="date" value=""> <input class="form-control" id="getmonth" type="month" style="display: none"/> </div> </div> <div class="col-auto" id="his_enddate" style="display: none"> <div class="form-group"> <input class="form-control" type="date" data-val="" name="date" value=""> </div> </div> <div class="col-auto"> <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a> <a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed"> <span class="fal fa-file-excel mr-1"></span> 匯出 </a> </div> </div> <div class="row-cols-1 mb-2"> <div id="devPointsList" class="btn-group"> </div> </div> <div> <div class="frame-wrap"> <table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100"> </table> </div> </div> </div> </div> </main> <script> var historyTable = null; $(function () { initList(); // default list filter initApp.listFilter($('#js_default_list'), $('#js_default_list_filter')); // custom response message initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter')); //accordion filter initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter')); // nested list filter initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter')); //init navigation initApp.buildNavigation($('#js_nested_list')); loadTable(null); $(`[onclick="setDateType('day', this)"]`).click(); $(`[onclick="setDateType('today', this)"]`).click(); onEvent('change', '#his_startdate', function () { let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-'); let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-'); if (pageAct.dateType == 'range') { if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) { console.log('aaaa'); $('#his_startdate').val($('#his_startdate').data('val')); toast_error('不可選擇大於結束時間'); } else { $('#his_startdate').data('val', $('#his_startdate').val()); $('#his_enddate input').data('val', $('#his_enddate input').val()); $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); if ($('#his_startdate').val() == $('#his_enddate input').val()) { if ($('#his_startdate').val() == today) { $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); } else if ($('#his_startdate').val() == ytd) { $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); } } } } else if ($(this).val() == today) { $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); } else if ($(this).val() == ytd) { $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); } }); onEvent('change', '#his_enddate input', function () { let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-'); let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-'); if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) { console.log('bbbb'); $('#his_enddate input').val($('#his_enddate input').data('val')); toast_error('不可選擇大於結束時間'); } else { $('#his_startdate').data('val', $('#his_startdate').val()); $('#his_enddate input').data('val', $('#his_enddate input').val()); $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); if ($('#his_startdate').val() == $('#his_enddate input').val()) { if ($('#his_startdate').val() == today) { $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); } else if ($('#his_startdate').val() == ytd) { $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); } } } }); }); function initList() { let sendData = { building_tag: pageAct.buiTag } objSendData.Data = sendData; let url = baseApiUrl + "/api/History/GetMainSub"; function success(res) { let strHtml = ``; let i1 = null, i2 = null, first = true; $.each(res.data.history_Main_Systems, function (index, val) { if (pageAct.mainStatus) { strHtml += `<li> <a href="#" data-filter-tags="${val.full_name.toLowerCase() }" data-maintag="${val.main_system_tag}"> <span class="nav-link-text">${val.full_name}</span> </a> <ul style="${index == 0 ? `display:block;` : ``}">`; i1 = (val.history_Sub_systems != null && i1 == null) ? index : null; } $.each(val.history_Sub_systems, function (index2, val2) { i2 = (val2.device != null && i2 == null) ? index2 : null; strHtml += `<li> <a href="#" data-filter-tags="${val2.full_name.toLowerCase() }" data-subtag="${val2.sub_system_tag}"> <span class="nav-link-text"> ${val2.full_name} </span> </a> <ul style="${(i1 != null ? index == i1 : first) && index2 == i2 ? `display:block;` : ``}">`; $.each(val2.device, function (index3, val3) { strHtml += `<li> <a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase() } ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}"> <span class="nav-link-text"> ${val3.full_name} ${val3.device_serial_tag} </span> </a> </li>`; if (pageAct.mainStatus) { if (index == i1 && index2 == i2 && first) { first = false; pageAct.deviceNumber = val3.device_number; pageAct.deviceName = val3.full_name; devPointsList(); } } else { if (index2 == i2 && first) { first = false; pageAct.deviceNumber = val3.device_number; pageAct.deviceName = val3.full_name; devPointsList(); } } }); strHtml += `</ul> </li>`; }); if (pageAct.mainStatus) { strHtml += `</ul> </li>`; } }); $('#js_nested_list').html(strHtml); } ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send(); } function devPointsList() { let sendData = { device_number: pageAct.deviceNumber } objSendData.Data = sendData; let url = baseApiUrl + "/api/History/GetDevPoi"; function success(res) { let strHtml = ``; $.each(res.data, function (index, val) { if (index == 0) { strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name} ${val.points}</button>`; pageAct.deviceItem = val.points; pageAct.devicePoiName = val.full_name + ' ' + val.points; getData(); } else { strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name} ${val.points}</button>`; } }); $('#devPointsList').html(strHtml); } ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send(); } function getData(start = null, end = null) { var sdt = new Date(); var edt = new Date(new Date().setDate(sdt.getDate() + 1)); start = start ?? sdt.toLocaleDateString(); end = end ?? edt.toLocaleDateString(); getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem, new Date(start).getTime(), new Date(end).getTime(), pageAct.deviceName, "Mitsubishi_Sup", callBackFromHistory); } function callBackFromHistory(res) { res = JSON.parse(res); loadTable(res.data); if (historyTable != null) { let t = $('#historyTable').dataTable(); t.fnClearTable(); if (res.data.length > 0) t.fnAddData(res.data); } $(loadEle).Loading("close"); } function setValue(deviceNumber, deviceName, deviceItem, elem) { btnSelCss(elem); if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) { pageAct.deviceNumber = deviceNumber; pageAct.deviceName = deviceName; devPointsList(); } else if (deviceItem != null && deviceItem != undefined) { pageAct.devicePoiName = $(elem).text(); pageAct.deviceItem = deviceItem; getData(); } } function setDateType(type, elem) { btnSelCss(elem); pageAct.dateType = type; let now = formatDate(new Date(Date.now()), "date"); let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date"); let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date"); if (type == "day" || type == "today" || type == "ytd") { let date = type == "ytd" ? ytd : now; $('#his_startdate').css('display', 'block'); $('#his_enddate').css('display', 'none'); $('#getmonth').css('display', 'none'); $('#his_startdate').val(date); if (type == "today") getData(formatDate(now, "date", true), formatDate(tmr, "date", true)); else if (type == "ytd") getData(formatDate(ytd, "date", true), formatDate(now, "date", true)); else { $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); } } else if (type == "range") { $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $('#his_startdate').css('display', 'block'); $('#his_enddate').css('display', 'block'); $('#getmonth').css('display', 'none'); $('#his_startdate').val(now); $('#his_startdate').data('val', now); $('#his_enddate input').val(tmr); $('#his_enddate input').data('val', tmr); } else if (type == "month") { $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $('#his_startdate').css('display', 'none'); $('#his_enddate').css('display', 'none'); $('#getmonth').css('display', 'block'); $('#getmonth').val(now.substr(0, 7)); } else if (type == "ytd") { $('#his_startdate').css('display', 'block'); $('#his_enddate').css('display', 'none'); $('#getmonth').css('display', 'none'); $('#his_startdate').val(ytd); } } function searchDate() { let start = new Date($('#his_startdate').val()); let end = new Date(new Date().setDate(new Date($('#his_enddate input').val()).getDate() + 1)); if (pageAct.dateType == "day") end = new Date(new Date().setDate(start.getDate() + 1)); else if (pageAct.dateType == "month") { start = new Date($('#getmonth').val()); end = new Date(new Date().setDate(start.getDate() + 30)); } else if (pageAct.dateType != "range") return; getData(formatDate(start, "date", true), formatDate(end, "date", true)); } function formatDate(date, type, send = false) { if (!send) return displayDate(date, type).replaceAll("/", "-"); else { date = displayDate(date, type); let month = date.split('/')[1]; let year = date.split('/')[0]; let day= date.split('/')[2]; return month + "/" + day + "/" + year; } } function loadTable(data) { if (data) { $.each(data, function (i, v) { v.type = pageAct.devicePoiName; }); } let tag = "#historyTable"; let column_defs = [ { "targets": [0], "width": "20%", "sortable": true }, { "targets": [1], "width": "20%", "sortable": true }, { "targets": [2], "width": "20%", "sortable": true } ]; let columns = [ { "title": "類別", "data": "type" }, { "title": "設備名稱", "data": "deviceName", }, { "title": "數值", "data": "value", }, { "title": "紀錄時間", "data": "timestamp", "render": function (data) { return displayDate(data, "datetime"); } } ]; historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi"); } function exportExcel() { let url = baseApiUrl + "/History/OpeExportExcel"; objSendData.Data = $('#historyTable').dataTable().fnGetData(); $.each(objSendData.Data, function (i, v) { v.starttime = (pageAct.dateType == "month" ? new Date($('#getmonth').val()) : new Date($('#his_startdate').val())); v.endtime = $('#his_enddate input').val() === "" ? null : new Date($('#his_enddate input').val()); v.dateType = pageAct.dateType; }); ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) { if (rel.code == "0000") location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization"); }, null, "POST").send(); } </script>