<main id="js-page-content" role="main" class="page-content"> <div class="row"> <div class="col-sm-12 col-xl-2"> <div class="bg-success-900 rounded bg-info-gradient"> <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="Filter nested items (e.g buttons, chart)"> </div> <!-- nav-menu-reset will reset the font colors --> <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact bg-success-900 bg-info-gradient mb-sm-4 mb-md-0 rounded" 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" class="btn btn-secondary waves-effect waves-themed">日期</button> <button type="button" class="btn btn-secondary waves-effect waves-themed">日區間</button> <button type="button" class="btn btn-secondary waves-effect waves-themed">月</button> </div> </div> <div class="col-auto"> <div class="btn-group"> <button type="button" class="btn btn-secondary waves-effect waves-themed">今天</button> <button type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button> </div> </div> <div class="col-auto"> <div class="form-group"> <input class="form-control" id="example-date" type="date" name="date" value="2023-07-23"> </div> </div> <div class="col-auto"> <a href="#" class="btn btn-info">查詢</a> <a href="#" class="btn btn-info waves-effect waves-themed"> <span class="fal fa-file-excel mr-1"></span> 匯出 </a> </div> </div> <div class="row mb-2"> <div id="devPointsList" class="btn-group"> </div> </div> <div class="row"> <div class="frame-wrap"> <table id="tableData" class="table table-bordered table-striped text-center m-0"> <thead class="thead-themed"> <tr> <th>設備名稱</th> <th>數值</th> <th>紀錄時間</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </main> <script> $(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')); }); 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) { strHtml += `<li> <a href="#" data-filter-tags="user interface buttons compass action dropdown navigation sidebars" 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="user interface buttons" data-subtag="${val2.sub_system_tag}"> <span class="nav-link-text"> ${val2.full_name} ${val2.sub_system_tag} </span> </a> <ul style="${index == i1 && 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="user interface buttons" data-devnum="${val3.device_number}"> <span class="nav-link-text"> ${val3.full_name} ${val3.device_serial_tag} </span> </a> </li>`; if (index == i1 && index2 == i2 && first) { first = false; pageAct.deviceNumber = val3.device_number; pageAct.deviceName = val3.full_name; devPointsList(); } }); strHtml += `</ul> </li>`; }); 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) { strHtml += `<button onClick="setValue(null, null, '${val.points}')" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name} ${val.points}</button>`; if (index == 0) { pageAct.deviceItem = val.points; getData(); } }); $('#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) { let strHtml = ``; res = JSON.parse(res); console.log(res); $.each(res.data, function (index, val) { strHtml += `<tr> <td>${val.deviceName}</td> <td>${val.value}</td> <td>${displayDate(val.timestamp)}</td> </tr>`; }); $('#tableData tbody').html(strHtml); } function setValue(deviceNumber, deviceName, deviceItem) { if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) { pageAct.deviceNumber = deviceNumber; pageAct.deviceName = deviceName; devPointsList(); } else if (deviceItem != null && deviceItem != undefined) { pageAct.deviceItem = deviceItem; getData(); } } </script>