Grafana HTML Panel展示post获取后数据

news2024/12/25 1:26:56

<!DOCTYPE html>
<html>
<head>
    <title>API 数据表格展示</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="data-table" border="1">
        <thead>
            <tr>
			    <th style="width: 1000px;">时间</th>
				<th style="width: 1500px;">应用系统名称</th>
                <th style="width: 1000px;">可用率</th>
                <!--
                <th>Count</th>
 				<th>Description</th>
 				<th>Interval</th>
 				<th>Res ID</th> 
 				-->                        
            </tr>
        </thead>
        <tbody>
            <!-- Data rows will be dynamically added here -->
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'http://aiops.test.com:8001/api/business/eventCalcProp/queryPage',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    "conditions": {
                        "full": "true"
                    }
                }),
                success: function(response) {
                    // 清空表格数据
                    $('#data-table tbody').empty();

                    // 解析并添加数据到表格
                    var records = response.data.records;
                    records.forEach(function(item) {
                        var row = '<tr>';
						row += '<td>' + item.occur_time.replace("T"," ") + '</td>';
						row += '<td>' + item.res_name + '</td>';
                        row += '<td>' + item.val + '</td>';
                        // row += '<td>' + item.count + '</td>';
                        // row += '<td>' + item.description + '</td>';
                        // row += '<td>' + item.interval + '</td>';
                        // row += '<td>' + item.res_id + '</td>';                       
                        row += '</tr>';
                        $('#data-table tbody').append(row);
                    });
                },
                error: function(error) {
                    $('#data-table tbody').html('<tr><td colspan="7">Error fetching data</td></tr>');
                }
            });
        });
    </script>
</body>
</html>

post返回数据格式

{"code":1,"msg":"获取成功","data":{"total":3,"size":3,"current":1,"records":[{"val":"100.00%","count":0,"description":"0.000毫秒","interval":0,"res_id":"18591","res_name":"XXX业务系统","occur_time":"2024-05-23T13:37:33"},{"val":"100.00%","count":0,"description":"0.000毫秒","interval":0,"res_id":"18594","res_name":"XXXX系统","occur_time":"2024-05-23T13:37:34"},{"val":"100.00%","count":0,"description":"0.000毫秒","interval":0,"res_id":"18631","res_name":"XXXXX系统","occur_time":"2024-05-23T13:37:35"}],"pages":1}}