From c95323d5d35fed23e8e248c67100f7bf02d905d5 Mon Sep 17 00:00:00 2001 From: nagocoler Date: Sun, 3 Dec 2023 15:11:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90Echarts=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5=EF=BC=8C=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E7=9B=91=E6=8E=A7=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=83=A8=E5=88=86=E5=B0=8FBUG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/example/utils/InfluxDbUtils.java | 3 +- itbaima-monitor-web/package-lock.json | 28 +++ itbaima-monitor-web/package.json | 1 + .../src/component/ClientDetails.vue | 226 +++++++++--------- .../src/component/RuntimeHistroy.vue | 99 ++++++++ itbaima-monitor-web/src/echarts/index.js | 123 ++++++++++ 6 files changed, 368 insertions(+), 112 deletions(-) create mode 100644 itbaima-monitor-web/src/component/RuntimeHistroy.vue create mode 100644 itbaima-monitor-web/src/echarts/index.js diff --git a/itbaima-monitor-server/src/main/java/com/example/utils/InfluxDbUtils.java b/itbaima-monitor-server/src/main/java/com/example/utils/InfluxDbUtils.java index 74e8694..a02eb83 100644 --- a/itbaima-monitor-server/src/main/java/com/example/utils/InfluxDbUtils.java +++ b/itbaima-monitor-server/src/main/java/com/example/utils/InfluxDbUtils.java @@ -48,6 +48,7 @@ public class InfluxDbUtils { } public RuntimeDetailsVO readRuntimeData() { + RuntimeDetailsVO vo = new RuntimeDetailsVO(); String query = """ from(bucket: "%s") |> range(start: %s) @@ -56,8 +57,8 @@ public class InfluxDbUtils { String format = String.format(query, BUCKET, "-1h"); List tables = client.getQueryApi().query(format, ORG); int size = tables.size(); + if (size == 0) return vo; List records = tables.get(0).getRecords(); - RuntimeDetailsVO vo = new RuntimeDetailsVO(); for (int i = 0; i < records.size(); i++) { JSONObject object = new JSONObject(); object.put("timestamp", records.get(i).getTime()); diff --git a/itbaima-monitor-web/package-lock.json b/itbaima-monitor-web/package-lock.json index 94eb4ea..2d63f7a 100644 --- a/itbaima-monitor-web/package-lock.json +++ b/itbaima-monitor-web/package-lock.json @@ -11,6 +11,7 @@ "@element-plus/icons-vue": "^2.1.0", "@vueuse/core": "^10.3.0", "axios": "^1.4.0", + "echarts": "^5.4.3", "element-plus": "^2.3.9", "flag-icon-css": "^4.1.7", "vue": "^3.3.4", @@ -868,6 +869,20 @@ "node": ">=0.4.0" } }, + "node_modules/echarts": { + "version": "5.4.3", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", + "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.4" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/element-plus": { "version": "2.3.9", "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.9.tgz", @@ -1900,6 +1915,19 @@ "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz", "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==", "dev": true + }, + "node_modules/zrender": { + "version": "5.4.4", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz", + "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } } diff --git a/itbaima-monitor-web/package.json b/itbaima-monitor-web/package.json index 7e83c71..d003eb2 100644 --- a/itbaima-monitor-web/package.json +++ b/itbaima-monitor-web/package.json @@ -11,6 +11,7 @@ "@element-plus/icons-vue": "^2.1.0", "@vueuse/core": "^10.3.0", "axios": "^1.4.0", + "echarts": "^5.4.3", "element-plus": "^2.3.9", "flag-icon-css": "^4.1.7", "vue": "^3.3.4", diff --git a/itbaima-monitor-web/src/component/ClientDetails.vue b/itbaima-monitor-web/src/component/ClientDetails.vue index 867df1b..5f41c48 100644 --- a/itbaima-monitor-web/src/component/ClientDetails.vue +++ b/itbaima-monitor-web/src/component/ClientDetails.vue @@ -4,6 +4,7 @@ import {get, post} from "@/net"; import {useClipboard} from "@vueuse/core"; import {ElMessage} from "element-plus"; import {cpuNameToImage, fitToRightByteUnit, osNameToIcon, percentageToStatus, rename} from "@/tools"; +import RuntimeHistroy from "@/component/RuntimeHistroy.vue"; const locations = [ {name: 'cn', desc: '中国大陆'}, @@ -63,13 +64,13 @@ function updateDetails() { setInterval(() => { if(props.show && details.runtime) { get(`/api/monitor/runtime-now?clientId=${props.id}`, data => { - details.runtime.list.splice(details.runtime.list.length - 1) - details.runtime.list.unshift(data) + details.runtime.list.splice(0, 1) + details.runtime.list.push(data) }) } }, 10000) -const now = computed(() => details.runtime.list[0]) +const now = computed(() => details.runtime.list[details.runtime.list.length - 1]) const init = id => { if(id < 0) return @@ -83,135 +84,138 @@ watch(() => props.id, init, { immediate: true }) diff --git a/itbaima-monitor-web/src/echarts/index.js b/itbaima-monitor-web/src/echarts/index.js new file mode 100644 index 0000000..097a33c --- /dev/null +++ b/itbaima-monitor-web/src/echarts/index.js @@ -0,0 +1,123 @@ +import * as echarts from "echarts"; + +function defaultOption(name, dataX) { + return { + tooltip: { + trigger: 'axis', + position: function (pt) { + return [pt[0], pt[1]]; + }, + confine: true, + padding: 3, + backgroundColor: '#FFFFFFE0', + textStyle: { + fontSize: 13 + } + }, grid:{ + left: '10', + right: '15', + bottom: '0', + top: '30', + containLabel: true + }, xAxis: { + type: 'category', + boundaryGap: false, + data: dataX, + animation: false, + axisLabel: { + formatter: function (value) { + value = new Date(value) + let time = value.toLocaleTimeString(); + time = time.substring(0, time.length - 3) + const date = [value.getDate() + 1, value.getMonth() + 1].join('/') + return `${time}\n${date}`; + } + } + }, yAxis: { + type: 'value', + name: name, + boundaryGap: [0, '10%'] + }, dataZoom: [ + { + type: 'inside', + start: 95, + end: 100, + minValueSpan: 12 + } + ] + }; +} + +function singleSeries(option, name, dataY, colors) { + option.series = [ + { + name: name, + type: 'line', + sampling: 'lttb', + showSymbol: false, + itemStyle: { + color: colors[0] + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[1] + }, { + offset: 1, + color: colors[2] + } + ]) + }, + data: dataY + } + ] +} + +function doubleSeries(option, name, dataY, colors) { + option.series = [ + { + name: name[0], + type: 'line', + sampling: 'lttb', + showSymbol: false, + itemStyle: { + color: colors[0][0] + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[0][1] + }, { + offset: 1, + color: colors[0][2] + } + ]) + }, + data: dataY[0] + }, { + name: name[1], + type: 'line', + sampling: 'lttb', + showSymbol: false, + itemStyle: { + color: colors[1][0] + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[1][1] + }, { + offset: 1, + color: colors[1][2] + } + ]) + }, + data: dataY[1] + } + ] +} + +export { defaultOption, singleSeries, doubleSeries }