554 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			554 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<main id="js-page-content" role="main" class="page-content">
 | 
						|
    <h1 class="p-2 mb-0">歷史資料</h1>
 | 
						|
 | 
						|
    <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">
 | 
						|
            <div class="row bg-dark p-2">
 | 
						|
                <div>
 | 
						|
                    <div class="py-2 col-12" id="his_building">
 | 
						|
                        <div class="item btn-group btn-group-toggle"
 | 
						|
                             data-toggle="buttons"></div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
            <div class="row bg-dark p-2 mb-5 align-items-center">
 | 
						|
                <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;
 | 
						|
    var buildingTag = null;
 | 
						|
    pageAct.hisBuiName = "";
 | 
						|
    hisFirst = true;
 | 
						|
    $(function () {
 | 
						|
        console.log(1);
 | 
						|
        let html = "";
 | 
						|
        for (let building of pageAct.buildList) {
 | 
						|
            html += `<label class="btn btn-secondary">
 | 
						|
                            <input type="radio" name="buildingRadio" id="radio-${building.getway}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
 | 
						|
                        </label>`;
 | 
						|
        }
 | 
						|
        $("#his_building").find(".item").empty();
 | 
						|
        $("#his_building").find(".item").append(html);
 | 
						|
        if ($("#his_building .item label").first())
 | 
						|
            $("#his_building .item label").first().click()
 | 
						|
 | 
						|
        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() != "")) {
 | 
						|
                    $('#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() != "")) {
 | 
						|
                $('#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: buildingTag
 | 
						|
        }
 | 
						|
        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 data-tabname="hisListItem">
 | 
						|
                                        <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}
 | 
						|
                                            </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);
 | 
						|
            $(`[data-tabname="hisListItem"]`).YTTab();
 | 
						|
        }
 | 
						|
        $(loadEle).Loading("close");
 | 
						|
        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;
 | 
						|
                } 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);
 | 
						|
 | 
						|
            if (!hisFirst) {
 | 
						|
                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 == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd")
 | 
						|
                    end = new Date(new Date(start.valueOf()).setDate(start.getDate() + 1));
 | 
						|
                else if (pageAct.dateType == "month") {
 | 
						|
                    start = new Date($('#getmonth').val());
 | 
						|
                    end = new Date(new Date(start.valueOf()).setDate(start.getDate() + 30));
 | 
						|
                }
 | 
						|
                else if (pageAct.dateType != "range")
 | 
						|
                    return;
 | 
						|
 | 
						|
                getData(formatDate(start, "date", true), formatDate(end, "date", true));
 | 
						|
            }
 | 
						|
        }
 | 
						|
        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
 | 
						|
    }
 | 
						|
 | 
						|
    function getData(start = null, end = null) {
 | 
						|
        $(loadEle).Loading("start");
 | 
						|
        var sdt = new Date();
 | 
						|
        var edt = new Date(new Date().setDate(sdt.getDate() + 1));
 | 
						|
        start = start ?? sdt.toLocaleDateString();
 | 
						|
        end = end ?? edt.toLocaleDateString();
 | 
						|
        // callBackFromHistory();
 | 
						|
        getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
 | 
						|
            new Date(start).getTime(),
 | 
						|
            new Date(end).getTime(),
 | 
						|
            pageAct.deviceName,
 | 
						|
            pageAct.hisBuiName,
 | 
						|
            callBackFromHistory);
 | 
						|
    }
 | 
						|
 | 
						|
    function callBackFromHistory(res = '{"count":0,"data":[]}') {
 | 
						|
        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);
 | 
						|
        }
 | 
						|
 | 
						|
    }
 | 
						|
 | 
						|
    function setValue(deviceNumber, deviceName, deviceItem, elem) {
 | 
						|
        hisFirst = false;
 | 
						|
        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;
 | 
						|
 | 
						|
            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 == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd")
 | 
						|
                end = new Date(new Date(start.valueOf()).setDate(start.getDate() + 1));
 | 
						|
            else if (pageAct.dateType == "month") {
 | 
						|
                start = new Date($('#getmonth').val());
 | 
						|
                end = new Date(new Date(start.valueOf()).setDate(start.getDate() + 30));
 | 
						|
            }
 | 
						|
            else if (pageAct.dateType != "range")
 | 
						|
                return;
 | 
						|
 | 
						|
            getData(formatDate(start, "date", true), formatDate(end, "date", true));
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    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 == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd")
 | 
						|
            end = new Date(new Date(start.valueOf()).setDate(start.getDate() + 1));
 | 
						|
        else if (pageAct.dateType == "month") {
 | 
						|
            start = new Date($('#getmonth').val());
 | 
						|
            end = new Date(new Date(start.valueOf()).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.split(" ")[0];
 | 
						|
            });
 | 
						|
 | 
						|
            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",
 | 
						|
                    "render": function (data) {
 | 
						|
                        if (isNaN(data.toString())) {
 | 
						|
                            return data
 | 
						|
                        }
 | 
						|
                        return data.roundDecimal(2);
 | 
						|
                    }
 | 
						|
                },
 | 
						|
                {
 | 
						|
                    "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() {
 | 
						|
        $(loadEle).Loading("start");
 | 
						|
        let token = cookies.get("JWT-Authorization");
 | 
						|
        let url = baseApiUrl + "/api/ExportHistory";
 | 
						|
        let 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;
 | 
						|
        objSendData.Data = v;
 | 
						|
 | 
						|
        $.ajax({
 | 
						|
            type: "POST",
 | 
						|
            url: url,
 | 
						|
            data: JSON.stringify(objSendData.Data),
 | 
						|
            aysnc: true,
 | 
						|
            headers: {
 | 
						|
                Authorization: "Bearer " + token,
 | 
						|
            },
 | 
						|
            contentType: "application/json; charset=utf-8",
 | 
						|
            xhrFields: {
 | 
						|
                responseType: "blob", // to avoid binary data being mangled on charset conversion
 | 
						|
            },
 | 
						|
            success: function (rel, text, xhr) {
 | 
						|
                if (rel) {
 | 
						|
                    downloadByBlob(xhr, rel);
 | 
						|
                }
 | 
						|
                $(loadEle).Loading("close");
 | 
						|
            },
 | 
						|
            error: function () {
 | 
						|
                $(loadEle).Loading("close");
 | 
						|
            },
 | 
						|
            complete: (xhr) => {
 | 
						|
                setLoading(false);
 | 
						|
            },
 | 
						|
        });
 | 
						|
        // ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
 | 
						|
        //     $(loadEle).Loading("close");
 | 
						|
        // }, function (rel) {
 | 
						|
        //     if (rel) {
 | 
						|
        //        downloadByBlob(xhr, rel);
 | 
						|
        //     }
 | 
						|
 | 
						|
        //     $(loadEle).Loading("close");
 | 
						|
        // }, "POST",true).send();
 | 
						|
    }
 | 
						|
 | 
						|
    //選擇棟別
 | 
						|
    function SelectBuild(e, building_tag) {
 | 
						|
        $(loadEle).Loading("start");
 | 
						|
        checkIsSelectedBuilding();
 | 
						|
    }
 | 
						|
 | 
						|
    function checkIsSelectedBuilding() {
 | 
						|
        let result = false;
 | 
						|
        let buildingRadios = $("[name=buildingRadio]:checked");
 | 
						|
        buildingTag = null;
 | 
						|
        if (buildingRadios && buildingRadios.length > 0) {
 | 
						|
            $("[name=buildingRadio]").parent().removeClass("btn-info");
 | 
						|
            $("[name=buildingRadio]").parent().addClass("btn-secondary");
 | 
						|
            $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
 | 
						|
            $("[name=buildingRadio]:checked").parent().addClass("btn-info");
 | 
						|
            buildingTag = buildingRadios.val(); //building tag
 | 
						|
            pageAct.hisBuiName = buildingRadios.prop('id').split("-")[1];
 | 
						|
            initList();
 | 
						|
            result = true;
 | 
						|
        }
 | 
						|
        return result;
 | 
						|
    }
 | 
						|
</script> |