|
|
@@ -0,0 +1,203 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html xmlns:th="http://www.thymeleaf.org">
|
|
|
+<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
|
|
+ <style>
|
|
|
+ a{
|
|
|
+ color: #005980;
|
|
|
+ }
|
|
|
+ .widget-small{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
|
|
|
+ }
|
|
|
+ .widget-small .fa{
|
|
|
+ float: left;
|
|
|
+ width: 40%;
|
|
|
+ line-height: 80px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .widget-user .fa{
|
|
|
+ background-color: #029789;
|
|
|
+ }
|
|
|
+ .widget-visit .fa{
|
|
|
+ background-color: #17a2b8;
|
|
|
+ }
|
|
|
+ .widget-message .fa{
|
|
|
+ background-color: #fbad4c;
|
|
|
+ }
|
|
|
+ .widget-like .fa{
|
|
|
+ background-color: #ff646d;
|
|
|
+ }
|
|
|
+ .widget-small-info{
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ width: 40%;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-top: 18px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .widget-small-info h4{
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .widget-small-info span{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .project-introduce{
|
|
|
+ min-height: 466px;
|
|
|
+ }
|
|
|
+ .project-introduce h4{
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .project-introduce li{
|
|
|
+ list-style: decimal;
|
|
|
+ margin-left: 28px;
|
|
|
+ }
|
|
|
+ .alert {
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .alert-info {
|
|
|
+ color: #31708f;
|
|
|
+ background-color: #d9edf7;
|
|
|
+ border-color: #bce8f1;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body class="timo-layout-page">
|
|
|
+<div class="layui-row layui-col-space15">
|
|
|
+ <div class="layui-card">
|
|
|
+ <div id="chart1" class="layui-card-body" style="height:500px;"></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
|
|
|
+<script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
|
|
|
+<script type="text/javascript" th:inline="javascript">
|
|
|
+ var myChart = echarts.init(document.getElementById('chart1'));
|
|
|
+ var xData = []
|
|
|
+ var yData = []
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: 'Nginx Log'
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ dataZoom: {
|
|
|
+ yAxisIndex: 'none'
|
|
|
+ },
|
|
|
+ restore: {},
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data:['reqs/s']
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: xData
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: 'reqs/s',
|
|
|
+ type: 'line',
|
|
|
+ smooth:true,
|
|
|
+ data: yData
|
|
|
+ }],
|
|
|
+ dataZoom: [{//这个是设置滚动条的,可以拉动这个滚动条来改变你的图形的显示比例
|
|
|
+ type: 'slider',
|
|
|
+ show: true, //flase直接隐藏图形
|
|
|
+ xAxisIndex: [0],
|
|
|
+ left: '9%', //滚动条靠左侧的百分比
|
|
|
+ bottom: -5,
|
|
|
+ start: 0,//滚动条的起始位置
|
|
|
+ end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option)
|
|
|
+ $.get("/api/log/nginx/chart", function (result) {
|
|
|
+ var data = result.data
|
|
|
+ for (const x of data[0]) {
|
|
|
+ xData.push(x)
|
|
|
+ }
|
|
|
+ for (const y of data[1]) {
|
|
|
+ yData.push(y)
|
|
|
+ }
|
|
|
+
|
|
|
+ myChart.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: xData
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: yData
|
|
|
+ }],
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ var connected = false
|
|
|
+ var ws
|
|
|
+ function initWebSocket() {
|
|
|
+ if ("WebSocket" in window) {
|
|
|
+ var token = '0123456789'
|
|
|
+ var app = 'admin-service'
|
|
|
+ var host = '172.16.90.200'
|
|
|
+ var params = 'token=' + token + '&app=' + app + '&host=' + host;
|
|
|
+ var url = "wss://devops.reghao.cn/ws/log/pull?" + params
|
|
|
+ ws = new WebSocket(url);
|
|
|
+ ws.onopen = function() {
|
|
|
+ connected = true
|
|
|
+ // Web Socket 已连接上，使用 send() 方法发送数据
|
|
|
+ console.log("websocket connected...");
|
|
|
+ };
|
|
|
+ ws.onclose = function() {
|
|
|
+ connected = false
|
|
|
+ console.log("websocket connection closed...");
|
|
|
+ reconnect()
|
|
|
+ };
|
|
|
+ ws.onerror = function () {
|
|
|
+ connected = false
|
|
|
+ console.log("websocket connection error...");
|
|
|
+ reconnect()
|
|
|
+ };
|
|
|
+ ws.onmessage = function (evt) {
|
|
|
+ /*var data = JSON.parse(evt.data)
|
|
|
+ for (const x of data[0]) {
|
|
|
+ xData.push(x)
|
|
|
+ }
|
|
|
+ for (const y of data[1]) {
|
|
|
+ yData.push(y)
|
|
|
+ }
|
|
|
+
|
|
|
+ myChart.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: xData
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: yData
|
|
|
+ }],
|
|
|
+ })*/
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 浏览器不支持 WebSocket
|
|
|
+ alert("您的浏览器不支持 WebSocket!");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function reconnect() {
|
|
|
+ if (connected) return
|
|
|
+
|
|
|
+ setTimeout(function () {
|
|
|
+ console.log('websocket reconnecting...')
|
|
|
+ initWebSocket()
|
|
|
+ }, 5000)
|
|
|
+ }
|
|
|
+ // initWebSocket()
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
