itbaima-study/itbaima-monitor-jwt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成Echarts数据展示

Browse Source
This commit is contained in:
柏码の讲师 2023-12-12 23:07:20 +08:00
parent 901e8c01e9
commit 6952d2e8a3
5 changed files with 361 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
itbaima-monitor-web/package-lock.json generated
View File

@ -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",
@ -1889,6 +1904,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=="
}
}
}

1
itbaima-monitor-web/package.json
View File

@ -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",

220
itbaima-monitor-web/src/component/ClientDetails.vue
View File

@ -3,6 +3,7 @@ import {computed, reactive, watch} from "vue";
import {get, post} from "@/net";
import {copyIp, cpuNameToImage, fitByUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
import {ElMessage} from "element-plus";
import RuntimeHistory from "@/component/RuntimeHistory.vue";
const locations = [
{name: 'cn', desc: '中国大陆'},
@ -75,134 +76,137 @@ watch(() => props.id, init, { immediate: true })
</script>
<template>
<div class="client-details" v-loading="Object.keys(details.base).length === 0">
<div v-if="Object.keys(details.base).length">
<div class="title">
<i class="fa-solid fa-server"></i>
服务器信息
</div>
<el-divider style="margin: 10px 0"/>
<div class="details-list">
<div>
<span>服务器ID</span>
<span>{{details.base.id}}</span>
<el-scrollbar>
<div class="client-details" v-loading="Object.keys(details.base).length === 0">
<div v-if="Object.keys(details.base).length">
<div class="title">
<i class="fa-solid fa-server"></i>
服务器信息
</div>
<div>
<span>服务器名称</span>
<span>{{details.base.name}}</span>&nbsp;
<i @click.stop="rename(details.base.id, details.base.name, updateDetails)"
class="fa-solid fa-pen-to-square interact-item"/>
</div>
<div>
<span>运行状态</span>
<span>
<el-divider style="margin: 10px 0"/>
<div class="details-list">
<div>
<span>服务器ID</span>
<span>{{details.base.id}}</span>
</div>
<div>
<span>服务器名称</span>
<span>{{details.base.name}}</span>&nbsp;
<i @click.stop="rename(details.base.id, details.base.name, updateDetails)"
class="fa-solid fa-pen-to-square interact-item"/>
</div>
<div>
<span>运行状态</span>
<span>
<i style="color: #18cb18" class="fa-solid fa-circle-play" v-if="details.base.online"></i>
<i style="color: #18cb18" class="fa-solid fa-circle-stop" v-else></i>
{{details.base.online ? '运行中' : '离线'}}
</span>
</div>
<div v-if="!details.editNode">
<span>服务器节点</span>
<span :class="`flag-icon flag-icon-${details.base.location}`"></span>&nbsp;
<span>{{details.base.node}}</span>&nbsp;
<i @click.stop="enableNodeEdit"
class="fa-solid fa-pen-to-square interact-item"/>
</div>
<div v-else>
<span>服务器节点</span>
<div style="display: inline-block;height: 15px">
<div style="display: flex">
<el-select v-model="nodeEdit.location" style="width: 80px" size="small">
<el-option v-for="item in locations" :value="item.name">
<span :class="`flag-icon flag-icon-${item.name}`"></span>&nbsp;
{{item.desc}}
</el-option>
</el-select>
<el-input v-model="nodeEdit.name" style="margin-left: 10px"
size="small" placeholder="请输入节点名称..."/>
<div style="margin-left: 10px">
<i @click.stop="submitNodeEdit" class="fa-solid fa-check interact-item"/>
</div>
<div v-if="!details.editNode">
<span>服务器节点</span>
<span :class="`flag-icon flag-icon-${details.base.location}`"></span>&nbsp;
<span>{{details.base.node}}</span>&nbsp;
<i @click.stop="enableNodeEdit"
class="fa-solid fa-pen-to-square interact-item"/>
</div>
<div v-else>
<span>服务器节点</span>
<div style="display: inline-block;height: 15px">
<div style="display: flex">
<el-select v-model="nodeEdit.location" style="width: 80px" size="small">
<el-option v-for="item in locations" :value="item.name">
<span :class="`flag-icon flag-icon-${item.name}`"></span>&nbsp;
{{item.desc}}
</el-option>
</el-select>
<el-input v-model="nodeEdit.name" style="margin-left: 10px"
size="small" placeholder="请输入节点名称..."/>
<div style="margin-left: 10px">
<i @click.stop="submitNodeEdit" class="fa-solid fa-check interact-item"/>
</div>
</div>
</div>
</div>
</div>
<div>
<span>公网IP地址</span>
<span>
<div>
<span>公网IP地址</span>
<span>
{{details.base.ip}}
<i class="fa-solid fa-copy interact-item" style="color: dodgerblue" @click.stop="copyIp(details.base.ip)"></i>
</span>
</div>
<div style="display: flex">
<span>处理器</span>
<span>{{details.base.cpuName}}</span>
<el-image style="height: 20px;margin-left: 10px"
:src="`/cpu-icons/${cpuNameToImage(details.base.cpuName)}`"/>
</div>
<div>
<span>硬件配置信息</span>
<span>
</div>
<div style="display: flex">
<span>处理器</span>
<span>{{details.base.cpuName}}</span>
<el-image style="height: 20px;margin-left: 10px"
:src="`/cpu-icons/${cpuNameToImage(details.base.cpuName)}`"/>
</div>
<div>
<span>硬件配置信息</span>
<span>
<i class="fa-solid fa-microchip"></i>
<span style="margin-right: 10px">{{` ${details.base.cpuCore} CPU 核心数 /`}}</span>
<i class="fa-solid fa-memory"></i>
<span>{{` ${details.base.memory.toFixed(1)} GB 内存容量`}}</span>
</span>
</div>
<div>
<span>操作系统</span>
<i :style="{color: osNameToIcon(details.base.osName).color}"
:class="`fa-brands ${osNameToIcon(details.base.osName).icon}`"></i>
<span style="margin-left: 10px">{{`${details.base.osName} ${details.base.osVersion}`}}</span>
</div>
</div>
<div class="title" style="margin-top: 20px">
<i class="fa-solid fa-gauge-high"></i>
实时监控
</div>
<el-divider style="margin: 10px 0"/>
<div v-if="details.base.online" v-loading="!details.runtime.list.length"
style="min-height: 200px">
<div style="display: flex" v-if="details.runtime.list.length">
<el-progress type="dashboard" :width="100" :percentage="now.cpuUsage * 100"
:status="percentageToStatus(now.cpuUsage * 100)">
<div style="font-size: 17px;font-weight: bold;color: initial">CPU</div>
<div style="font-size: 13px;color: grey;margin-top: 5px">{{ (now.cpuUsage * 100).toFixed(1) }}%</div>
</el-progress>
<el-progress style="margin-left: 20px" type="dashboard" :width="100"
:percentage="now.memoryUsage / details.runtime.memory * 100"
:status="percentageToStatus(now.memoryUsage / details.runtime.memory * 100)">
<div style="font-size: 16px;font-weight: bold;color: initial">内存</div>
<div style="font-size: 13px;color: grey;margin-top: 5px">{{ (now.memoryUsage).toFixed(1) }} GB</div>
</el-progress>
<div style="flex: 1;margin-left: 30px;display: flex;flex-direction: column;height: 80px">
<div style="flex: 1;font-size: 14px">
<div>实时网络速度</div>
<div>
<i style="color: orange" class="fa-solid fa-arrow-up"></i>
<span>{{` ${fitByUnit(now.networkUpload, 'KB')}/s`}}</span>
<el-divider direction="vertical"/>
<i style="color: dodgerblue" class="fa-solid fa-arrow-down"></i>
<span>{{` ${fitByUnit(now.networkDownload, 'KB')}/s`}}</span>
</div>
</div>
<div>
<div style="font-size: 13px;display: flex;justify-content: space-between">
<div>
<i class="fa-solid fa-hard-drive"></i>
<span> 磁盘总容量</span>
</div>
<div>{{now.diskUsage.toFixed(1)}} GB / {{details.runtime.disk.toFixed(1)}} GB</div>
</div>
<el-progress type="line" :show-text="false"
:status="percentageToStatus(now.diskUsage / details.runtime.disk * 100)"
:percentage="now.diskUsage / details.runtime.disk * 100" />
</div>
</div>
<div>
<span>操作系统</span>
<i :style="{color: osNameToIcon(details.base.osName).color}"
:class="`fa-brands ${osNameToIcon(details.base.osName).icon}`"></i>
<span style="margin-left: 10px">{{`${details.base.osName} ${details.base.osVersion}`}}</span>
</div>
</div>
<div class="title" style="margin-top: 20px">
<i class="fa-solid fa-gauge-high"></i>
实时监控
</div>
<el-divider style="margin: 10px 0"/>
<div v-if="details.base.online" v-loading="!details.runtime.list.length"
style="min-height: 200px">
<div style="display: flex" v-if="details.runtime.list.length">
<el-progress type="dashboard" :width="100" :percentage="now.cpuUsage * 100"
:status="percentageToStatus(now.cpuUsage * 100)">
<div style="font-size: 17px;font-weight: bold;color: initial">CPU</div>
<div style="font-size: 13px;color: grey;margin-top: 5px">{{ (now.cpuUsage * 100).toFixed(1) }}%</div>
</el-progress>
<el-progress style="margin-left: 20px" type="dashboard" :width="100"
:percentage="now.memoryUsage / details.runtime.memory * 100"
:status="percentageToStatus(now.memoryUsage / details.runtime.memory * 100)">
<div style="font-size: 16px;font-weight: bold;color: initial">内存</div>
<div style="font-size: 13px;color: grey;margin-top: 5px">{{ (now.memoryUsage).toFixed(1) }} GB</div>
</el-progress>
<div style="flex: 1;margin-left: 30px;display: flex;flex-direction: column;height: 80px">
<div style="flex: 1;font-size: 14px">
<div>实时网络速度</div>
<div>
<i style="color: orange" class="fa-solid fa-arrow-up"></i>
<span>{{` ${fitByUnit(now.networkUpload, 'KB')}/s`}}</span>
<el-divider direction="vertical"/>
<i style="color: dodgerblue" class="fa-solid fa-arrow-down"></i>
<span>{{` ${fitByUnit(now.networkDownload, 'KB')}/s`}}</span>
</div>
</div>
<div>
<div style="font-size: 13px;display: flex;justify-content: space-between">
<div>
<i class="fa-solid fa-hard-drive"></i>
<span> 磁盘总容量</span>
</div>
<div>{{now.diskUsage.toFixed(1)}} GB / {{details.runtime.disk.toFixed(1)}} GB</div>
</div>
<el-progress type="line" :show-text="false"
:status="percentageToStatus(now.diskUsage / details.runtime.disk * 100)"
:percentage="now.diskUsage / details.runtime.disk * 100" />
</div>
</div>
</div>
<runtime-history style="margin-top: 20px" :data="details.runtime.list"/>
</div>
<el-empty description="服务器处于离线状态，请检查服务器是否正常运行" v-else/>
</div>
<el-empty description="服务器处于离线状态，请检查服务器是否正常运行" v-else/>
</div>
</div>
</el-scrollbar>
</template>
<style scoped>

97
itbaima-monitor-web/src/component/RuntimeHistory.vue Normal file
View File

@ -0,0 +1,97 @@
<script setup>
import * as echarts from "echarts";
import {onMounted, watch} from "vue";
import {defaultOption, doubleSeries, singleSeries} from "@/echarts";
const charts = []
const props = defineProps({
data: Object
})
const localTimeLine = list => list.map(item => new Date(item.timestamp).toLocaleString())
function updateCpuUsage(list) {
const chart = charts[0]
let data = list.map(item => (item.cpuUsage * 100).toFixed(1))
const option = defaultOption('CPU(%)', localTimeLine(list))
singleSeries(option, 'CPU使用率(%)', data, ['#72c4fe', '#72d5fe', '#2b6fd733'])
chart.setOption(option)
}
function updateMemoryUsage(list) {
const chart = charts[1]
let data = list.map(item => (item.memoryUsage * 1024).toFixed(1));
const option = defaultOption('内存(MB)', localTimeLine(list))
singleSeries(option, '内存使用(MB)', data, ['#6be3a3', '#bbfad4', '#A5FFD033'])
chart.setOption(option);
}
function updateNetworkUsage(list) {
const chart = charts[2]
let data = [
list.map(item => item.networkUpload),
list.map(item => item.networkDownload)
]
const option = defaultOption('网络(KB/s)', localTimeLine(list))
doubleSeries(option, ['上传(KB/s)', '下载(KB/s)'], data, [
['#f6b66e', '#ffd29c', '#fddfc033'],
['#79c7ff', '#3cabf3', 'rgba(192,242,253,0.2)']
])
chart.setOption(option);
}
function updateDiskUsage(list) {
const chart = charts[3]
let data = [
list.map(item => item.diskRead.toFixed(1)),
list.map(item => item.diskWrite.toFixed(1))
]
const option = defaultOption('磁盘(MB/s)', localTimeLine(list))
doubleSeries(option, ['读取(MB/s)', '写入(MB/s)'], data, [
['#d2d2d2', '#d5d5d5', 'rgba(199,199,199,0.2)'],
['#757575', '#7c7c7c', 'rgba(94,94,94,0.2)']
])
chart.setOption(option);
}
function initCharts() {
const chartList = [
document.getElementById('cpuUsage'),
document.getElementById('memoryUsage'),
document.getElementById('networkUsage'),
document.getElementById('diskUsage')
]
for (let i = 0; i < chartList.length; i++) {
const chart = chartList[i]
charts[i] = echarts.init(chart)
}
}
onMounted(() => {
initCharts()
watch(() => props.data, list => {
updateCpuUsage(list)
updateMemoryUsage(list)
updateNetworkUsage(list)
updateDiskUsage(list)
}, { immediate: true, deep: true })
})
</script>
<template>
<div class="charts">
<div id="cpuUsage" style="width: 100%;height:170px"></div>
<div id="memoryUsage" style="width: 100%;height:170px"></div>
<div id="networkUsage" style="width: 100%;height:170px"></div>
<div id="diskUsage" style="width: 100%;height:170px"></div>
</div>
</template>
<style scoped>
.charts {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
</style>

123
itbaima-monitor-web/src/echarts/index.js Normal file
View File

@ -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 }