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(() => {