diff --git a/public/config.js b/public/config.js
index dd0a90b..3357aa4 100644
--- a/public/config.js
+++ b/public/config.js
@@ -17,6 +17,7 @@ window.$$nazhuaConfig = {
// hideFilter: false, // 隐藏筛选
// hideTag: false, // 隐藏标签
// hideDotBG: true, // 隐藏框框里面的点点背景
+ // monitorRefreshTime: 10, // 监控刷新时间间隔,单位s(秒), 0为不刷新,为保证不频繁请求源站,最低生效值为10s
// customCodeMap: {}, // 自定义的地图点信息
// nezhaVersion: 'v1', // 哪吒版本
// apiMonitorPath: '/api/v1/monitor/{id}',
diff --git a/src/components/charts/line.js b/src/components/charts/line.js
index 2efb659..67e0203 100644
--- a/src/components/charts/line.js
+++ b/src/components/charts/line.js
@@ -5,15 +5,19 @@ import {
TooltipComponent,
LegendComponent,
GridComponent,
+ DataZoomComponent,
} from 'echarts/components';
import dayjs from 'dayjs';
+import config from '@/config';
+
use([
CanvasRenderer,
LineChart,
TooltipComponent,
LegendComponent,
GridComponent,
+ DataZoomComponent,
]);
export default (
@@ -22,6 +26,7 @@ export default (
valueList,
mode = 'dark',
) => {
+ const fontFamily = config.nazhua.disableSarasaTermSC === true ? undefined : 'Sarasa Term SC';
const option = {
tooltip: {
trigger: 'axis',
@@ -32,7 +37,7 @@ export default (
const time = dayjs(parseInt(params[0].axisValue, 10)).format('YYYY.MM.DD HH:mm');
let res = `${time}
`;
params.forEach((i) => {
- res += `${i.marker} ${i.seriesName}: ${i.value}ms
`;
+ res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms
`;
});
return res;
},
@@ -49,27 +54,22 @@ export default (
data: cateList,
textStyle: {
color: mode === 'dark' ? '#ddd' : '#222',
- fontFamily: 'Sarasa Term SC',
+ fontFamily,
fontSize: 14,
},
},
- xAxis: {
- type: 'category',
- data: dateList,
- axisLabel: {
- hideOverlap: true,
- interval: Math.max(
- Math.ceil(dateList.length / 12),
- 1,
- ),
- nameTextStyle: {
- fontSize: 12,
- },
- formatter: (val) => dayjs(parseInt(val, 10)).format('HH:mm'),
- fontFamily: 'Sarasa Term SC',
- color: mode === 'dark' ? '#eee' : '#222',
- },
+ grid: {
+ left: 0,
+ right: 5,
+ bottom: 0,
+ containLabel: true,
},
+ dataZoom: [{
+ id: 'dataZoomX',
+ type: 'slider',
+ xAxisIndex: [0],
+ filterMode: 'filter',
+ }],
yAxis: {
type: 'value',
splitLine: {
@@ -78,16 +78,22 @@ export default (
},
},
axisLabel: {
- fontFamily: 'Sarasa Term SC',
+ fontFamily,
color: mode === 'dark' ? '#ddd' : '#222',
fontSize: 12,
},
},
- grid: {
- left: 0,
- right: 0,
- bottom: 0,
- containLabel: true,
+ xAxis: {
+ type: 'time',
+ data: dateList,
+ axisLabel: {
+ hideOverlap: true,
+ nameTextStyle: {
+ fontSize: 12,
+ },
+ fontFamily,
+ color: mode === 'dark' ? '#eee' : '#222',
+ },
},
series: valueList.map((i) => ({
type: 'line',
diff --git a/src/views/components/server-detail/server-monitor.vue b/src/views/components/server-detail/server-monitor.vue
index 104410f..b7f30b9 100644
--- a/src/views/components/server-detail/server-monitor.vue
+++ b/src/views/components/server-detail/server-monitor.vue
@@ -101,9 +101,10 @@ const monitorChartData = computed(() => {
const dateList = [];
Object.keys(dateMap).forEach((i) => {
if (dateMap[i]?.length) {
- dateList.push(parseInt(i, 10));
+ const time = parseInt(i, 10);
+ dateList.push(time);
dateMap[i].forEach((o) => {
- cateMap[o.name].push(o.value);
+ cateMap[o.name].push([time, o.value]);
});
}
});
@@ -151,9 +152,14 @@ async function setTimeLoadMonitor() {
clearTimeout(loadMonitorTimer);
}
await loadMonitor();
+ let monitorRefreshTime = ((config.nazhua.monitorRefreshTime * 1) || 10);
+ if (Number.isNaN(monitorRefreshTime)) {
+ monitorRefreshTime = 10;
+ }
+ const sTime = Math.min(monitorRefreshTime, 10);
loadMonitorTimer = setTimeout(() => {
setTimeLoadMonitor();
- }, 10000);
+ }, sTime * 1000);
}
onMounted(() => {
@@ -169,7 +175,7 @@ onUnmounted(() => {