ibms-dome/Frontend/_historyData.html

<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 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="row">
                <div class="frame-wrap">
                    <table class="table table-bordered table-striped text-center m-0">
                        <thead class="thead-themed">
                            <tr>
                                <th>設備名稱</th>
                                <th>數值</th>
                                <th>紀錄時間</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>儲冰設備A01</td>
                                <td>27.0</td>
                                <td>2021-08-01 23:55:00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</main>

<script>
    let sst = '';
    let mst = '';
    $(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'));

        initData();
    });

    function initList() {
        let sendData = {
			building_tag: pageAct.buiTag
        }
		objSendData.Data = sendData;
        let url = baseApiUrl + "/api/History/GetMainSub";
		function success(res) {
            let strHtml = ``;

            $.each(res.data.history_Main_Systems, function (index, val) {
                console.log(index)
				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;` : ``}">`;
                    
                $.each(val.history_Sub_systems, function (index2, val2) {
                    strHtml += `<li>
			                        <a href="#" onClick="getData(${val2.sub_system_tag}, ${val.main_system_tag})" 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>
		                        </li>`;

                    if (index == 0 && index2 == 0) {
                        sst = val2.sub_system_tag;
                        mst = val.main_system_tag;
					}
                });
                strHtml += `</ul> </li>`;
            });

            $('#js_nested_list').html(strHtml);
            getData(sst, mst);
		}
        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
    }

    function initData() {
		getHistoryDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_A1",
			1667232000000,
			1667232000000,
			"空調設備",
			"Mitsubishi_Sup",
			callbackForHistory);
	}

    function getData(sst2, mst1)
    {
		//getHistoryDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_A1",
		//	1667232000000,
		//	1667232000000,
		//	"空調設備",
		//	"Mitsubishi_Sup",
		//	callbackForHistory);
	}

    function callBackFromHistory(res) {
        console.log(res)
	}
</script>