59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<script setup>
|
|
import { onUnmounted, reactive, toRefs } from 'vue'
|
|
|
|
import EachartView from '@/components/echart/eachart-view.vue'
|
|
import MarkdownView from '@/components/markdown/preview-view.vue'
|
|
|
|
/** websocket */
|
|
let ws = new WebSocket('ws://localhost:8000/ws')
|
|
|
|
// 响应式数据
|
|
const data = reactive({
|
|
systemUsage: {
|
|
cpu: '0',
|
|
momery: '0',
|
|
disk: '0'
|
|
},
|
|
performance: {
|
|
rps: [],
|
|
time: [],
|
|
user: []
|
|
}
|
|
})
|
|
|
|
// 接收消息
|
|
ws.onmessage = (e) => {
|
|
const wsData = JSON.parse(e.data)
|
|
data.systemUsage = wsData.usage
|
|
data.performance.rps.push({
|
|
value: [Date.now(), wsData.performance.rps]
|
|
})
|
|
data.performance.time.push({
|
|
value: [Date.now(), wsData.performance.time]
|
|
})
|
|
data.performance.user.push({
|
|
value: [Date.now(), wsData.performance.user]
|
|
})
|
|
}
|
|
|
|
const { systemUsage, performance } = toRefs(data)
|
|
|
|
onUnmounted(() => {
|
|
ws.close()
|
|
console.log('关闭socket 连接')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="about">
|
|
<EachartView :performance="performance" :system-usage="systemUsage" />
|
|
<MarkdownView class="footer" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.footer {
|
|
margin: 20px 0px;
|
|
}
|
|
</style>
|