Grafana HTML Panel展示post获取后数据

<!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}}