admin/AdvisorServer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
AdvisorServer/html/monitor.html

332 lines
14 KiB
HTML
Raw Permalink Normal View History

修改鉴权接口
2025-04-14 15:07:14 +08:00
<!DOCTYPE html>
完善monitor
2025-04-28 16:18:10 +08:00
<html>
修改鉴权接口
2025-04-14 15:07:14 +08:00
<head>
<meta charset="UTF-8">
完善monitor
2025-04-28 16:18:10 +08:00
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://cdn.staticfile.org/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet">
修改鉴权接口
2025-04-14 15:07:14 +08:00
<title>Interface Monitor</title>
<script src="https://cdn.staticfile.org/vue/2.7.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script src="https://cdn.staticfile.org/axios/1.6.5/axios.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.14/index.js"></script>
<script src="https://cdn.staticfile.net/dayjs/1.11.10/dayjs.min.js"></script>
<script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
.el-form-item {
display: flex;
height: 50px;
width: 100%;
align-items: center;
justify-content: flex-start;
}
.el-form-item__content {
完善monitor
2025-04-28 16:18:10 +08:00
margin-left: 6px !important;
修改鉴权接口
2025-04-14 15:07:14 +08:00
}
.resu {
完善monitor
2025-04-28 16:18:10 +08:00
margin-left: 360px;
完善monitor
2025-04-30 10:07:11 +08:00
width: 1152px;
完善monitor
2025-04-28 16:18:10 +08:00
min-height: 700px;
修改鉴权接口
2025-04-14 15:07:14 +08:00
}
.line {
完善monitor
2025-04-30 10:07:11 +08:00
width: 1152px;
修改鉴权接口
2025-04-14 15:07:14 +08:00
height: 300px;
}
</style>
</head>
<body>
<div id="app">
完善monitor
2025-04-28 16:18:10 +08:00
<div style="width:320px; position: fixed; padding: 20px 0 0 30px;">
修改鉴权接口
2025-04-14 15:07:14 +08:00
<el-form label-width="80px">
<el-form-item label="Host:">
<div style="width: 108%;">
完善monitor
2025-04-28 16:18:10 +08:00
<el-select @change="init()" placeholder="请选择" v-model="query.host">
<el-option :key="item" :label="item" :value="item" v-for="item in data.host"></el-option>
修改鉴权接口
2025-04-14 15:07:14 +08:00
</el-select>
</div>
</el-form-item>
<el-form-item label="开始时间:">
完善monitor
2025-04-28 16:18:10 +08:00
<el-date-picker @change="init()" placeholder="选择开始时间" type="datetime" v-model="query.startTime">
修改鉴权接口
2025-04-14 15:07:14 +08:00
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间:">
完善monitor
2025-04-28 16:18:10 +08:00
<el-date-picker @change="init()" placeholder="选择结束时间" type="datetime" v-model="query.endTime">
修改鉴权接口
2025-04-14 15:07:14 +08:00
</el-date-picker>
</el-form-item>
<el-form-item label="IP:">
完善monitor
2025-04-28 16:18:10 +08:00
<el-select placeholder="请选择" v-model="query.ip">
<el-option :key="item" :label="item" :value="item" @change="init()" v-for="item in data.ip">
修改鉴权接口
2025-04-14 15:07:14 +08:00
</el-option>
</el-select>
</el-form-item>
<el-form-item label="接口:">
完善monitor
2025-04-28 16:18:10 +08:00
<el-select @change="init(false)" placeholder="请选择" v-model="query.name">
<el-option :key="item" :label="item" :value="item" v-for="item in data.name">
修改鉴权接口
2025-04-14 15:07:14 +08:00
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分组方式:">
完善monitor
2025-04-28 16:18:10 +08:00
<el-radio :label="item" @change="groupData()" v-for="item in data.groupBy" v-model="query.groupBy">{{ item }}</el-radio>
修改鉴权接口
2025-04-14 15:07:14 +08:00
</el-form-item>
<el-form-item>
<div style="margin-left: 20%; display: flex;">
完善monitor
2025-04-28 16:18:10 +08:00
<el-button @click="listData()" type="primary">查询曲线</el-button>
<el-button @click="groupData()" type="primary">查询分组</el-button>
修改鉴权接口
2025-04-14 15:07:14 +08:00
</div>
</el-form-item>
</el-form>
</div>
<div class="resu">
完善monitor
2025-04-28 16:18:10 +08:00
<div id="line" v-show="data.showLine">
<div class="line" id="total"></div>
<div class="line" id="average"></div>
<div class="line" id="failure"></div>
<div class="line" id="timeout"></div>
</div>
<div id="table" v-show="data.showTable">
<el-table :data="data.groupData" :default-sort = "{prop: 'total', order: 'descending'}" @sort-change="sortChange" height="700" >
<el-table-column label="IP" prop="ip" v-if="query.groupBy === 'ip'" width="120"></el-table-column>
<el-table-column label="接口" prop="interfaceName" v-if="query.groupBy === 'name'" width="230"></el-table-column>
完善monitor
2025-04-30 10:07:11 +08:00
<el-table-column label="数量" prop="total" width="78" sortable='custom'></el-table-column>
<el-table-column label="失败" prop="failure" width="78" sortable='custom'></el-table-column>
<el-table-column label="平均" prop="averageTime" width="78" sortable='custom'></el-table-column>
<el-table-column label="最大" prop="maxTime" width="78" sortable='custom'></el-table-column>
<el-table-column label="最小" prop="minTime" width="78" sortable='custom'></el-table-column>
完善monitor
2025-04-28 16:18:10 +08:00
<el-table-column label="10ms" prop="over10ms" width="80" sortable='custom'></el-table-column>
<el-table-column label="50ms" prop="over50ms" width="80" sortable='custom'></el-table-column>
<el-table-column label="100ms" prop="over100ms" width="88" sortable='custom'></el-table-column>
<el-table-column label="500ms" prop="over500ms" width="88" sortable='custom'></el-table-column>
<el-table-column label="1000ms" prop="over1000ms" width="96" sortable='custom'></el-table-column>
<el-table-column label="5000ms" prop="over5000ms" width="96" sortable='custom'></el-table-column>
</el-table>
</div>
修改鉴权接口
2025-04-14 15:07:14 +08:00
</div>
</div>
<script>
const HttpReq = axios.create({
// baseURL, // api的base_url
timeout: 10000, // 请求超时时间,
method: "post"
});
HttpReq.interceptors.request.use(config => {
config.data = config.data || {}
config.data.ticket = md5(`hello_syzb_${dayjs().format('YYYYMMDD')}`)
if(config.data.ip == '全部'){
config.data.ip = ''
}
if(config.data.name == '全部'){
config.data.name = ''
}
return config;
}, error => {
return Promise.reject(error);
});
HttpReq.interceptors.response.use(resp => {
if (resp.code) {
console.log({
title: "HttpRequestError-" + resp.code,
content: resp.message,
});
}
return resp.data.data;
})
function post(host, url, data) {
if (!host) {
return;
}
const targetUrl = (host + url)
return HttpReq({
url: targetUrl,
data,
})
}
function fillTimeData(startTime, endTime, data) {
const result = [];
const timeMap = new Map();
// 建立已有数据的映射，key 是时间字符串
data.forEach(item => {
timeMap.set(item.time, item);
});
let current = dayjs(startTime).second(0);
console.log(current.minute());
while (current.minute() % 5 !== 0) {
current = current.add(1, 'minute');
}
const end = dayjs(endTime);
console.log(current.isSameOrBefore);
while (current.isBefore(end) || current.isSame(end)) {
const timeStr = current.format('YYYY-MM-DD HH:mm:ss');
if (timeMap.has(timeStr)) {
result.push(timeMap.get(timeStr));
} else {
result.push({
averageTime: 0,
failure: 0,
interfaceName: null,
ip: null,
maxTime: 0,
minTime: 0,
over1000ms: 0,
over100ms: 0,
over10ms: 0,
over5000ms: 0,
over500ms: 0,
over50ms: 0,
time: timeStr,
total: 0
});
}
current = current.add(5, 'minute');
}
return result;
}
完善monitor
2025-04-28 16:18:10 +08:00
function drawLine(data, title, div, field, filter) {
修改鉴权接口
2025-04-14 15:07:14 +08:00
if (data && data.length) {
const xyData = data.map(v => [v.time, v[field]]);
完善monitor
2025-04-28 16:18:10 +08:00
const chart = echarts.init(document.getElementById(div));
chart.setOption({
修改鉴权接口
2025-04-14 15:07:14 +08:00
title: {
完善monitor
2025-04-28 16:18:10 +08:00
text: title
修改鉴权接口
2025-04-14 15:07:14 +08:00
},
xAxis: {
type: 'time',
// data: xDate
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: [
{
type: 'line',
data: xyData,
showSymbol: false,
完善monitor
2025-04-28 16:18:10 +08:00
lineStyle: {
color: '#409eff' // 设置折线的颜色为红色
},
修改鉴权接口
2025-04-14 15:07:14 +08:00
}
]
})
}
}
const API = {
listIP: function (host, data) {
return post(host, '/admin/monitor/listIP', data);
},
listInterface: function (host, data) {
return post(host, '/admin/monitor/listInterface', data);
},
listData: function (host, data) {
return post(host, '/admin/monitor/listData', data);
},
groupData: function (host, data) {
return post(host, '/admin/monitor/groupData', data);
},
}
new Vue({
el: '#app',
data() {
return {
query: {
完善monitor
2025-04-28 16:18:10 +08:00
host: "https://do.tgsys.sztg.com",
修改鉴权接口
2025-04-14 15:07:14 +08:00
// startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
// endTime: dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00'),
完善monitor
2025-04-28 16:18:10 +08:00
startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
endTime: dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00'),
修改鉴权接口
2025-04-14 15:07:14 +08:00
ip: "",
name: "",
groupBy: "name",
完善monitor
2025-04-28 16:18:10 +08:00
orderBy: "",
修改鉴权接口
2025-04-14 15:07:14 +08:00
},
data: {
完善monitor
2025-04-28 16:18:10 +08:00
host: ["https://do.tgsys.sztg.com", "http://8.138.144.54:8080", "http://127.0.0.1:8080"],
修改鉴权接口
2025-04-14 15:07:14 +08:00
ip: [],
name: [],
groupBy: ["name", "ip"],
完善monitor
2025-04-28 16:18:10 +08:00
groupData: [],
showLine: false,
showTable: false,
修改鉴权接口
2025-04-14 15:07:14 +08:00
},
monitor: [],
interval: null,
};
},
methods: {
完善monitor
2025-04-28 16:18:10 +08:00
async init(loadName = true) {
修改鉴权接口
2025-04-14 15:07:14 +08:00
const ip = await API.listIP(this.query.host, this.query)
完善monitor
2025-04-28 16:18:10 +08:00
if (ip) {
修改鉴权接口
2025-04-14 15:07:14 +08:00
ip.unshift("全部")
this.data.ip = ip;
this.query.ip = ip[0];
}
完善monitor
2025-04-28 16:18:10 +08:00
if (loadName) {
const name = await API.listInterface(this.query.host, this.query)
if(name){
name.unshift("全部")
this.data.name = name;
this.query.name = name[0];
}
修改鉴权接口
2025-04-14 15:07:14 +08:00
}
},
async listData() {
let data = await API.listData(this.query.host, this.query);
// console.log('before', data);
data = fillTimeData(this.query.startTime, this.query.endTime, data);
// console.log('after', data);
完善monitor
2025-04-28 16:18:10 +08:00
drawLine(data, '总流量', 'total', 'total');
drawLine(data, '平均耗时', 'average', 'averageTime');
drawLine(data, '失败流量', 'failure', 'failure');
drawLine(data, '超时流量', 'timeout', 'over5000ms');
this.data.showLine = true;
this.data.showTable = false;
},
async groupData() {
let groupData = await API.groupData(this.query.host, this.query);
完善monitor
2025-04-30 10:07:11 +08:00
groupData = groupData.filter(data => data.interfaceName && data.interfaceName.indexOf('/admin/monitor') === -1);
完善monitor
2025-04-28 16:18:10 +08:00
this.data.groupData = groupData;
this.data.showLine = false;
this.data.showTable = true;
修改鉴权接口
2025-04-14 15:07:14 +08:00
},
完善monitor
2025-04-28 16:18:10 +08:00
async sortChange({column, prop, order}) {
console.log('sortChange', column, prop, order);
this.query.orderBy = prop;
this.query.order = order;
console.log(this.query);
this.groupData();
}
修改鉴权接口
2025-04-14 15:07:14 +08:00
},
async mounted() {
this.init();
},
watch: {
},
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink