FCC/Applications/UniversalApi_WebConsole_App/Views/FairBanks/Index.cshtml

<script src="~/js/jquery-3.4.1.min.js"></script>
<div id="FairbanksDiv" style="position: relative;width: 100%;height: 100%">
    <div style="position: relative; width: 100%; height: 88.516%;">
        <style type="text/css">
            ::-webkit-scrollbar {
                display: none;
            }
        </style>
        <table id="FairBanks_Table" style="position: absolute; left: 1%; top: 1%;width: 98%; height: 98%; border-collapse: collapse; text-align: center; font-size: 1.6rem;">
            <thead style="width: 100%; height: 9.09%; display: table;">
                <tr style="width: 100%; height: 100%;">
                    <th style="width: 18%;">时间</th>
                    <th style="width: 12%;">数据种类</th>
                    <th style="width: 40%;">文件</th>
                    <th style="width: 20%;">描述</th>
                    <th style="width: 10%;">上传状态</th>
                </tr>
            </thead>
            <tbody style="width: 100%; height: 90.91%; display: block; overflow: hidden; overflow-y: auto;">
                <tr style="width: 100%; height: 10%; display: table;">
                    <td style="width: 18%;"> </td>
                    <td style="width: 12%;"> </td>
                    <td style="width: 40%; text-align: left;"> </td>
                    <td style="width: 20%; text-align: left;"> </td>
                    <td style="width: 10%;"> </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="fairbanks_footer" style="position: relative; width: 100%; height: 11.484%;">
        <img id="fairbanks_tab_img" src="~/images/config/FairbanksSelected.png" style="position: absolute; left: 2.8%; top: 23.077%; height: 53.864%; width: 12.5%;">
    </div>
</div>

<script>
    jQuery.support.cors = true;
    function TableRowAdd(datas) {
        //$.getJSON('http://localhost:8384/u/?mn=GetUploadHistoryAsync&pn=fairbanksRealTimeDataApp&en=Dfs.WayneChina.FairbanksRTData.FairbanksRealTimeDataApp', function (datas) {
        if (datas == null) {
            console.log('response datas is null'); return;
        }
        var fairbanktable = document.getElementById("FairBanks_Table");
        if (fairbanktable == null) {
            console.log("fairbank table is not created");
            return;
        }
        console.log("fairbank upload history:" + datas);
        var originalTableRows = fairbanktable.rows.length;
        datas.forEach(function (d) {
            var r = fairbanktable.insertRow(fairbanktable.rows.length);
            r.style = "width: 100%; height: 10%; display: table;";
            var c1 = r.insertCell(r.cells.length);
            c1.style = "width: 18%;";
            var timestamp = new Date(d.TimeStamp);
            c1.innerHTML = timestamp.getFullYear() + "-" + Pad(timestamp.getMonth() + 1, 2) + "-" + Pad(timestamp.getDate(), 2) + " " + Pad(timestamp.getHours(),2) + ":" + Pad(timestamp.getMinutes(),2);
            var c2 = r.insertCell(r.cells.length);
            //c2.innerHTML = d.Id;
            c2.innerHTML = "";
            c2.style = "width: 12%;";
            var c3 = r.insertCell(r.cells.length);
            c3.innerHTML = d.FileName;
            c3.style = "width: 40%;text-align: left;";
            var c4 = r.insertCell(r.cells.length);
            c4.innerHTML = d.Remark;
            c1.style = "width: 20%;text-align: left;";
            var c5 = r.insertCell(r.cells.length);
            c5.innerHTML = d.Status;
            c5.style = "width: 10%;";
        });
        for (var count = 1; count < originalTableRows; count++) {
            fairbanktable.deleteRow(1);
        };
    }
    function Pad(num, n) {
        var len = num.toString().length;
        while (len < n) {
            num = "0" + num;
            len++;
        }
        return num;
    }
    function DataGet() {
        var temp = {};
        $.ajax({
            url: "http://localhost:8384/u/?mn=GetUploadHistoryAsync&pn=fairbanksRealTimeDataApp&en=Dfs.WayneChina.FairbanksRTData.FairbanksRealTimeDataApp",
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(temp),
            beforeSend: function () {
                //函数体，数据发送前执行。
            },
            success: function (data) {
                //函数体，数据发送成功回调
                TableRowAdd(data);
            },
            error: function (err) {
                //函数体，数据发送错误时执行
                console.log(err);
            }
        });
    }

    $(document).ready(function () {
        DataGet();
    });
</script>