import html from "html";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import Chart from "../components/chart/index.js";
import { get, post } from "../request/index.js";
import { ElMessage, dayjs } from "element-plus";
import { bytesFormat, persentFormat } from "../utils/index.js";
import PubSub from "pubsub-js";
export default {
components: { Chart },
template: html`
{{model.osArchitecture}}
{{model.osDescription}}
{{model.hostName}}
{{model.userName}}
{{dayjs(model.serverTime).format()}}
{{model.hostAddresses}}
{{model.processCount}}
{{model.threadCount}}
{{model.driveName}}
{{bytesFormat(model.drivieTotalSize)}}
{{bytesFormat(model.driveAvailableFreeSpace)}}
{{persentFormat(1-model.driveAvailableFreeSpace/model.drivieTotalSize)}}
{{bytesFormat(model.diskRead)}}
{{bytesFormat(model.diskWrite)}}
{{bytesFormat(model.netReceived)}}
{{bytesFormat(model.netSent)}}
{{model.frameworkDescription}}
{{bytesFormat(model.gcTotalMemory)}}
{{model.finalizationPendingCount}}
{{bytesFormat(model.heapSizeBytes)}}
{{model.processArchitecture}}
{{dayjs(model.processStartTime).format()}}
{{model.processFileName}}
{{model.processArguments}}
{{model.processId}}
{{model.processName}}
{{persentFormat(model.processCpuUsage)}}
{{bytesFormat(model.processMemory)}}
{{bytesFormat(model.processDiskRead)}} / {{bytesFormat(model.processDiskWrite)}}
{{model.processThreadCount}}
`,
setup(props) {
const route = useRoute();
const baseUrl = `${route.meta.path}`.substring(1);
const url = `${baseUrl}/index`;
const schema = reactive({});
const model = reactive({});
//
const cpuModel = reactive({
title: {
text: "处理器",
},
xAxis: {
type: "category",
data: Object.keys(Array(30).fill()),
},
yAxis: {
type: "value",
min: 0,
max: 100,
},
series: [
{
data: [],
type: "line",
smooth: true,
},
],
});
const memoryModel = reactive({
title: {
text: "内存",
},
xAxis: {
type: "category",
data: Object.keys(Array(30).fill()),
},
yAxis: {
type: "value",
min: 0,
max: 100,
},
series: [
{
data: [],
type: "bar",
smooth: true,
},
],
});
//
const onMonitor = (method, data) => {
Object.assign(model, data);
// cpu
if (cpuModel.series[0].data.length > 30) {
cpuModel.series[0].data.shift();
}
cpuModel.title.text = `处理器 ${persentFormat(model.cpuUsage)}`;
cpuModel.series[0].data.push(model.cpuUsage * 100);
// memory
if (memoryModel.series[0].data.length > 30) {
memoryModel.series[0].data.shift();
}
memoryModel.title.text = `内存 ${persentFormat(model.memoryUsage)}`;
memoryModel.series[0].data.push(model.memoryUsage * 100);
};
onMounted(async () => {
Object.assign(schema, (await get(url)).data);
Object.assign(model, (await post(url)).data);
PubSub.subscribe("monitor", onMonitor);
});
onUnmounted(() => {
PubSub.unsubscribe(onMonitor);
});
//
return {
schema,
model,
cpuModel,
memoryModel,
dayjs,
bytesFormat,
persentFormat,
};
},
};