Commit fc3df2cd by 黄明步

新增接口状态监控

parent dd338cf9
......@@ -19,9 +19,7 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.*;
......@@ -425,4 +423,10 @@ public class ViewController {
modelMap.put("gatewayUrl", gatewayUrl);
return "authorization/list";
}
@RequestMapping("/monitoring")
public String monitoring(ModelMap modelMap) {
modelMap.put("gatewayUrl", gatewayUrl);
return "monitoring/index";
}
}
{
"success": true,
"code": 200,
"message": "成功",
"count": null,
"data": [],
"time": 1716626713348
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#request.getContextPath()}+'/'">
<meta charset="UTF-8">
<title>ocr应用能力调用记录</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="js/FileSaver.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #fff;
}
.layui-input-inline {
width: 150px !important;
}
.status-icon {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.status-icon.green {
background-color: #5FB878; /* 绿色 */
}
.status-icon.red {
background-color: #FF5722; /* 红色 */
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend style="color: red;font-weight: bold;">接口状态</legend>
</fieldset>
<table id="interfaceTable" lay-filter="interfaceTable"></table>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend style="color: red;font-weight: bold;">接口异常信息</legend>
</fieldset>
<table id="errorInfo" lay-filter="errorInfo"></table>
</body>
<script type="text/html" id="status">
<div class="status-container">
{{# if(d.status === '1'){ }}
<div class="status-icon green"></div>
{{# } else { }}
<div class="status-icon red"></div>
{{# } }}
</div>
</script>
<script type="text/html" id="isAvailable">
{{# if(d.status == 1){ }}
<span style="color: green"></span>
{{# }else{ }}
<span style="color: red"></span>
{{# } }}
</script>
<script src="layui/layui.all.js"></script>
<script src="js/jquery.min.js"></script>
<script src="layui/xmSelect/xm-select.js"></script>
<script th:inline="javascript">
let gatewayUrl = [[${gatewayUrl}]];
let youxiang = [[${youxiang}]];
</script>
<script>
var list, table, form, condition = {};
layui.use(['laydate', "table", "form"], function () {
var laydate = layui.laydate
table = layui.table;
form = layui.form;
list = table.render({
elem: "#interfaceTable",
url: gatewayUrl + "/interface/list",
title: "接口状态详情",
response: {
statusCode: 200
},
method: "get",
// page: true,
done: function (res, curr, count) {
$("table").css("width", "100%");
},
cols: [
[
{field: 'id', title: '编号', align: "center", hide: true}
, {field: 'interfaceName', title: '接口名称', align: "center"}
, {field: 'interfacePath', title: '接口地址', align: "center"}
, {field: 'status', fixed: 'right', title: '状态', align: "center", templet: '#status'}
, {field: 'status', fixed: 'right', title: '是否可用', align: "center", templet: '#isAvailable'}
]
],
before: function (e) {
condition = e.where;
},
// parseData: function (res) {
// return {
// code: res.code,
// msg: res.msg,
// count: res.data.total,
// data: res.data.records
// }
// }
});
table.render({
elem: "#errorInfo",
url: "/ocrAdmin/monitoring/errorInfo.json",
title: "接口异常信息",
response: {
statusCode: 200
},
method: "get",
done: function (res, curr, count) {
$("table").css("width", "100%");
},
cols: [
[
{field: 'id', title: '编号', align: "center", hide: true}
, {field: 'errorTime', title: '异常发生时间', align: "center"}
, {field: 'nodeIp', title: '异常节点IP', align: "center"}
, {field: 'cause', fixed: 'right', title: '异常原因', align: "center", templet: '#status'}
, {field: 'sendSms', fixed: 'right', title: '是否已经短信通知运维人员', align: "center", templet: '#isAvailable'}
]
],
before: function (e) {
condition = e.where;
},
});
});
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment