805 lines
28 KiB
JavaScript
805 lines
28 KiB
JavaScript
|
class SystemInfo extends HTMLElement {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
this.attachShadow({ mode: 'open' });
|
|||
|
|
this.charts = [];
|
|||
|
|
this.chartOptions = [
|
|||
|
|
'内存使用率',
|
|||
|
|
'磁盘使用率',
|
|||
|
|
'网络带宽'
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 动态添加CPU核心选项
|
|||
|
|
this.cpuCoreCount = 8; // 默认值，后续会从系统获取
|
|||
|
|
for (let i = 0; i < this.cpuCoreCount; i++) {
|
|||
|
|
this.chartOptions.push(`CPU${i}使用率`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 每个图表的默认选择
|
|||
|
|
this.chartSelections = [
|
|||
|
|
'CPU0使用率',
|
|||
|
|
'CPU1使用率',
|
|||
|
|
'内存使用率',
|
|||
|
|
'网络带宽'
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 存储历史数据
|
|||
|
|
this.historyData = {};
|
|||
|
|
this.chartOptions.forEach(option => {
|
|||
|
|
this.historyData[option] = Array(60).fill(0);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 为上传带宽单独存储数据
|
|||
|
|
this.historyData['上传带宽'] = Array(60).fill(0);
|
|||
|
|
this.historyData['下载带宽'] = Array(60).fill(0);
|
|||
|
|
|
|||
|
|
// 初始化状态
|
|||
|
|
this.chartsInitialized = false;
|
|||
|
|
this.setupInProgress = false;
|
|||
|
|
this.chartJsLoaded = false;
|
|||
|
|
this.domInitialized = false;
|
|||
|
|
this.isActive = false; // 添加活动状态标记
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
connectedCallback() {
|
|||
|
|
this.isActive = true; // 组件连接到DOM时设置为活动状态
|
|||
|
|
this.render();
|
|||
|
|
|
|||
|
|
// 创建一个MutationObserver来监听shadowRoot内容变化
|
|||
|
|
this.observer = new MutationObserver(this.onDomChange.bind(this));
|
|||
|
|
this.observer.observe(this.shadowRoot, { childList: true, subtree: true });
|
|||
|
|
|
|||
|
|
// 立即尝试初始化事件监听器
|
|||
|
|
setTimeout(() => this.setupEventListeners(), 0);
|
|||
|
|
|
|||
|
|
// 获取系统信息
|
|||
|
|
this.fetchSystemInfo();
|
|||
|
|
|
|||
|
|
// 加载Chart.js
|
|||
|
|
this.loadChartJs();
|
|||
|
|
|
|||
|
|
// 设置定时刷新
|
|||
|
|
this.refreshInterval = setInterval(() => {
|
|||
|
|
if (!this.isActive) return; // 非活动状态时不执行更新
|
|||
|
|
|
|||
|
|
this.fetchSystemInfo();
|
|||
|
|
|
|||
|
|
// 图表初始化后才更新
|
|||
|
|
if (this.chartsInitialized) {
|
|||
|
|
this.updateCharts();
|
|||
|
|
}
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
disconnectedCallback() {
|
|||
|
|
this.isActive = false; // 组件断开连接时设置为非活动状态
|
|||
|
|
|
|||
|
|
if (this.refreshInterval) {
|
|||
|
|
clearInterval(this.refreshInterval);
|
|||
|
|
this.refreshInterval = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.observer) {
|
|||
|
|
this.observer.disconnect();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.cleanupCharts();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清理所有图表
|
|||
|
|
cleanupCharts() {
|
|||
|
|
// 销毁图表
|
|||
|
|
if (this.charts) {
|
|||
|
|
this.charts.forEach((chart, index) => {
|
|||
|
|
if (chart) {
|
|||
|
|
try {
|
|||
|
|
chart.destroy();
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(`销毁图表${index}失败:`, e);
|
|||
|
|
}
|
|||
|
|
this.charts[index] = null;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.chartsInitialized = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新激活组件的方法（当标签页重新被选中时调用）
|
|||
|
|
reactivate() {
|
|||
|
|
if (this.isActive) return; // 如果已经是活动状态，不重复处理
|
|||
|
|
|
|||
|
|
this.isActive = true;
|
|||
|
|
|
|||
|
|
// 重置图表状态
|
|||
|
|
this.cleanupCharts();
|
|||
|
|
this.domInitialized = false;
|
|||
|
|
|
|||
|
|
// 重新设置刷新定时器
|
|||
|
|
if (!this.refreshInterval) {
|
|||
|
|
this.refreshInterval = setInterval(() => {
|
|||
|
|
if (!this.isActive) return;
|
|||
|
|
|
|||
|
|
this.fetchSystemInfo();
|
|||
|
|
|
|||
|
|
if (this.chartsInitialized) {
|
|||
|
|
this.updateCharts();
|
|||
|
|
}
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新初始化图表
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (this.chartJsLoaded) {
|
|||
|
|
// 确保DOM已初始化
|
|||
|
|
const canvasElements = this.shadowRoot.querySelectorAll('canvas');
|
|||
|
|
if (canvasElements.length === 4) {
|
|||
|
|
this.domInitialized = true;
|
|||
|
|
this.initializeCharts();
|
|||
|
|
} else {
|
|||
|
|
// 如果DOM还没准备好，等待DOM变化
|
|||
|
|
this.observer = new MutationObserver(this.onDomChange.bind(this));
|
|||
|
|
this.observer.observe(this.shadowRoot, { childList: true, subtree: true });
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 如果Chart.js还没加载，重新加载
|
|||
|
|
this.loadChartJs();
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听DOM变化
|
|||
|
|
onDomChange(mutations) {
|
|||
|
|
if (this.domInitialized) return;
|
|||
|
|
|
|||
|
|
// 检查canvas元素是否已添加到DOM
|
|||
|
|
const canvasElements = this.shadowRoot.querySelectorAll('canvas');
|
|||
|
|
if (canvasElements.length === 4) {
|
|||
|
|
this.domInitialized = true;
|
|||
|
|
|
|||
|
|
// 如果Chart.js已加载，初始化图表
|
|||
|
|
if (this.chartJsLoaded) {
|
|||
|
|
this.initializeCharts();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载Chart.js
|
|||
|
|
loadChartJs() {
|
|||
|
|
if (typeof Chart !== 'undefined') {
|
|||
|
|
this.chartJsLoaded = true;
|
|||
|
|
|
|||
|
|
// 如果DOM已准备就绪，初始化图表
|
|||
|
|
if (this.domInitialized) {
|
|||
|
|
this.initializeCharts();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const script = document.createElement('script');
|
|||
|
|
script.src = './chart.min.js';
|
|||
|
|
|
|||
|
|
script.onload = () => {
|
|||
|
|
this.chartJsLoaded = true;
|
|||
|
|
|
|||
|
|
// 如果DOM已准备就绪，初始化图表
|
|||
|
|
if (this.domInitialized) {
|
|||
|
|
this.initializeCharts();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
script.onerror = () => {
|
|||
|
|
const cdnScript = document.createElement('script');
|
|||
|
|
cdnScript.src = 'https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js';
|
|||
|
|
|
|||
|
|
cdnScript.onload = () => {
|
|||
|
|
this.chartJsLoaded = true;
|
|||
|
|
|
|||
|
|
// 如果DOM已准备就绪，初始化图表
|
|||
|
|
if (this.domInitialized) {
|
|||
|
|
this.initializeCharts();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.head.appendChild(cdnScript);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.head.appendChild(script);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
// 提前生成图表选项HTML字符串
|
|||
|
|
const options0 = this.generateChartOptions(0);
|
|||
|
|
const options1 = this.generateChartOptions(1);
|
|||
|
|
const options2 = this.generateChartOptions(2);
|
|||
|
|
const options3 = this.generateChartOptions(3);
|
|||
|
|
|
|||
|
|
this.shadowRoot.innerHTML = `
|
|||
|
|
<style>
|
|||
|
|
:host {
|
|||
|
|
display: block;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
padding: 16px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.system-info-container {
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|||
|
|
padding: 16px;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
border-bottom: 1px solid #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.system-overview {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.overview-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.overview-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.overview-value {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.overview-subvalue {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.charts-container {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
grid-template-rows: repeat(2, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
min-height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 16px;
|
|||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-select {
|
|||
|
|
padding: 4px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-container {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
canvas {
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 100% !important;
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="system-info-container">
|
|||
|
|
<div class="info-header">
|
|||
|
|
<div class="info-title">系统信息</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="system-overview">
|
|||
|
|
<div class="overview-item">
|
|||
|
|
<div class="overview-label">操作系统</div>
|
|||
|
|
<div class="overview-value" id="os-info">Loading...</div>
|
|||
|
|
<div class="overview-subvalue" id="kernel-info">Loading...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="overview-item">
|
|||
|
|
<div class="overview-label">CPU核心数</div>
|
|||
|
|
<div class="overview-value" id="cpu-cores">Loading...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="overview-item">
|
|||
|
|
<div class="overview-label">IP地址</div>
|
|||
|
|
<div class="overview-value" id="ip-address">Loading...</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="overview-item">
|
|||
|
|
<div class="overview-label">已隔离CPU核心号</div>
|
|||
|
|
<div class="overview-value" id="isolated-cores">Loading...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="charts-container">
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<div class="chart-header">
|
|||
|
|
<div class="chart-title">监控图表 1</div>
|
|||
|
|
<select class="chart-select" data-chart-index="0">
|
|||
|
|
${options0}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chart0"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<div class="chart-header">
|
|||
|
|
<div class="chart-title">监控图表 2</div>
|
|||
|
|
<select class="chart-select" data-chart-index="1">
|
|||
|
|
${options1}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chart1"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<div class="chart-header">
|
|||
|
|
<div class="chart-title">监控图表 3</div>
|
|||
|
|
<select class="chart-select" data-chart-index="2">
|
|||
|
|
${options2}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chart2"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<div class="chart-header">
|
|||
|
|
<div class="chart-title">监控图表 4</div>
|
|||
|
|
<select class="chart-select" data-chart-index="3">
|
|||
|
|
${options3}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chart3"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setupEventListeners() {
|
|||
|
|
// 设置图表选择监听器
|
|||
|
|
const selects = this.shadowRoot.querySelectorAll('.chart-select');
|
|||
|
|
if (selects.length !== 4) {
|
|||
|
|
setTimeout(() => this.setupEventListeners(), 100);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
selects.forEach(select => {
|
|||
|
|
select.addEventListener('change', (e) => {
|
|||
|
|
const chartIndex = parseInt(e.target.getAttribute('data-chart-index'));
|
|||
|
|
const newMetric = e.target.value;
|
|||
|
|
const oldMetric = this.chartSelections[chartIndex];
|
|||
|
|
|
|||
|
|
// 更新选择
|
|||
|
|
this.chartSelections[chartIndex] = newMetric;
|
|||
|
|
|
|||
|
|
// 如果图表已初始化，重新创建图表而不是更新
|
|||
|
|
if (this.charts[chartIndex]) {
|
|||
|
|
this.recreateChart(chartIndex);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化所有图表
|
|||
|
|
initializeCharts() {
|
|||
|
|
if (this.setupInProgress || this.chartsInitialized) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.setupInProgress = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
for (let i = 0; i < 4; i++) {
|
|||
|
|
this.createChart(i);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.chartsInitialized = true;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('图表初始化失败:', error);
|
|||
|
|
} finally {
|
|||
|
|
this.setupInProgress = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建单个图表
|
|||
|
|
createChart(index) {
|
|||
|
|
const canvas = this.shadowRoot.getElementById(`chart${index}`);
|
|||
|
|
if (!canvas) {
|
|||
|
|
throw new Error(`找不到图表${index}的canvas元素`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保canves宽高被设置
|
|||
|
|
canvas.style.width = '100%';
|
|||
|
|
canvas.style.height = '100%';
|
|||
|
|
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
if (!ctx) {
|
|||
|
|
throw new Error(`无法获取图表${index}的2D上下文`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取指标和数据
|
|||
|
|
const metric = this.chartSelections[index];
|
|||
|
|
const data = [...(this.historyData[metric] || Array(60).fill(0))];
|
|||
|
|
|
|||
|
|
// 针对不同指标设置不同的y轴配置和数据集
|
|||
|
|
const yAxisConfig = this.getYAxisConfig(metric);
|
|||
|
|
let datasets = [];
|
|||
|
|
|
|||
|
|
if (metric === '网络带宽') {
|
|||
|
|
// 网络带宽显示两条线：上传和下载
|
|||
|
|
datasets = [
|
|||
|
|
{
|
|||
|
|
label: '下载带宽',
|
|||
|
|
data: [...this.historyData['下载带宽']],
|
|||
|
|
borderColor: '#4CAF50', // 绿色
|
|||
|
|
borderWidth: 2,
|
|||
|
|
fill: false,
|
|||
|
|
tension: 0.4,
|
|||
|
|
pointRadius: 0, // 去掉点
|
|||
|
|
pointHoverRadius: 0 // 去掉悬停点
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '上传带宽',
|
|||
|
|
data: [...this.historyData['上传带宽']],
|
|||
|
|
borderColor: '#F44336', // 红色
|
|||
|
|
borderWidth: 2,
|
|||
|
|
fill: false,
|
|||
|
|
tension: 0.4,
|
|||
|
|
pointRadius: 0, // 去掉点
|
|||
|
|
pointHoverRadius: 0 // 去掉悬停点
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
} else {
|
|||
|
|
// 其他指标只显示一条线
|
|||
|
|
datasets = [
|
|||
|
|
{
|
|||
|
|
label: metric,
|
|||
|
|
data: data,
|
|||
|
|
borderColor: this.getChartColor(metric),
|
|||
|
|
borderWidth: 2,
|
|||
|
|
fill: false,
|
|||
|
|
tension: 0.4,
|
|||
|
|
pointRadius: 0, // 去掉点
|
|||
|
|
pointHoverRadius: 0 // 去掉悬停点
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建图表
|
|||
|
|
this.charts[index] = new Chart(ctx, {
|
|||
|
|
type: 'line',
|
|||
|
|
data: {
|
|||
|
|
labels: Array(60).fill(''),
|
|||
|
|
datasets: datasets
|
|||
|
|
},
|
|||
|
|
options: {
|
|||
|
|
responsive: true,
|
|||
|
|
maintainAspectRatio: false,
|
|||
|
|
animation: {
|
|||
|
|
duration: 0 // 关闭动画提高性能
|
|||
|
|
},
|
|||
|
|
elements: {
|
|||
|
|
point: {
|
|||
|
|
radius: 0 // 全局去掉点
|
|||
|
|
},
|
|||
|
|
line: {
|
|||
|
|
tension: 0.4 // 平滑曲线
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
scales: {
|
|||
|
|
y: yAxisConfig,
|
|||
|
|
x: {
|
|||
|
|
display: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
plugins: {
|
|||
|
|
legend: {
|
|||
|
|
display: metric === '网络带宽', // 只在网络带宽图表显示图例
|
|||
|
|
position: 'top',
|
|||
|
|
labels: {
|
|||
|
|
boxWidth: 12,
|
|||
|
|
font: {
|
|||
|
|
size: 10
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
mode: 'index',
|
|||
|
|
intersect: false,
|
|||
|
|
callbacks: {
|
|||
|
|
label: function(context) {
|
|||
|
|
const value = context.raw;
|
|||
|
|
// 为网络带宽添加单位
|
|||
|
|
if (metric === '网络带宽' ||
|
|||
|
|
context.dataset.label === '上传带宽' ||
|
|||
|
|
context.dataset.label === '下载带宽') {
|
|||
|
|
return `${value} Mbps`;
|
|||
|
|
}
|
|||
|
|
// 为其他指标添加百分比单位
|
|||
|
|
return `${value}%`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据指标类型获取y轴配置
|
|||
|
|
getYAxisConfig(metric) {
|
|||
|
|
// 网络带宽使用Mbps单位，其他使用百分比
|
|||
|
|
if (metric === '网络带宽') {
|
|||
|
|
return {
|
|||
|
|
beginAtZero: true,
|
|||
|
|
// 自动计算最大值，但最少为1
|
|||
|
|
suggestedMax: 1,
|
|||
|
|
title: {
|
|||
|
|
display: true,
|
|||
|
|
text: 'Mbps'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
return {
|
|||
|
|
beginAtZero: true,
|
|||
|
|
max: 100,
|
|||
|
|
title: {
|
|||
|
|
display: true,
|
|||
|
|
text: '%'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据指标类型获取图表颜色
|
|||
|
|
getChartColor(metric) {
|
|||
|
|
if (metric === '下载带宽') {
|
|||
|
|
return '#4CAF50'; // 绿色
|
|||
|
|
} else if (metric === '上传带宽') {
|
|||
|
|
return '#F44336'; // 红色
|
|||
|
|
} else if (metric === '内存使用率') {
|
|||
|
|
return '#2196F3'; // 蓝色
|
|||
|
|
} else if (metric === '磁盘使用率') {
|
|||
|
|
return '#FF9800'; // 橙色
|
|||
|
|
} else if (metric.includes('CPU')) {
|
|||
|
|
// CPU使用率显示紫色色调
|
|||
|
|
return '#9C27B0';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 默认颜色
|
|||
|
|
const colors = [
|
|||
|
|
'#4285F4', // 蓝色
|
|||
|
|
'#EA4335', // 红色
|
|||
|
|
'#34A853', // 绿色
|
|||
|
|
'#FBBC05' // 黄色
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 为不同的指标分配不同的默认颜色
|
|||
|
|
const hash = metric.split('').reduce((hash, char) => {
|
|||
|
|
return char.charCodeAt(0) + ((hash << 5) - hash);
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
return colors[Math.abs(hash) % colors.length];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新单个图表
|
|||
|
|
updateChart(index) {
|
|||
|
|
try {
|
|||
|
|
if (!this.charts[index]) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const metric = this.chartSelections[index];
|
|||
|
|
if (!this.historyData[metric] && metric !== '网络带宽') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (metric === '网络带宽') {
|
|||
|
|
// 获取上传和下载数据
|
|||
|
|
const downloadData = [...this.historyData['下载带宽']];
|
|||
|
|
const uploadData = [...this.historyData['上传带宽']];
|
|||
|
|
|
|||
|
|
// 找出最大值来设置Y轴
|
|||
|
|
const maxDownload = Math.max(...downloadData);
|
|||
|
|
const maxUpload = Math.max(...uploadData);
|
|||
|
|
const maxValue = Math.max(maxDownload, maxUpload);
|
|||
|
|
|
|||
|
|
// 网络带宽图表根据数据自动调整y轴刻度
|
|||
|
|
if (this.charts[index].options.scales.y) {
|
|||
|
|
// 根据当前最大值动态设置y轴，但至少为1
|
|||
|
|
const suggestedMax = Math.max(maxValue * 1.2, 1);
|
|||
|
|
this.charts[index].options.scales.y.suggestedMax = suggestedMax;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新两个数据集
|
|||
|
|
this.charts[index].data.datasets[0].data = downloadData;
|
|||
|
|
this.charts[index].data.datasets[1].data = uploadData;
|
|||
|
|
} else {
|
|||
|
|
// 其他指标只有一个数据集
|
|||
|
|
const currentData = [...this.historyData[metric]];
|
|||
|
|
this.charts[index].data.datasets[0].data = currentData;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.charts[index].update();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(`更新图表${index}失败:`, error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新所有图表
|
|||
|
|
updateCharts() {
|
|||
|
|
if (!this.chartsInitialized) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 0; i < 4; i++) {
|
|||
|
|
this.updateChart(i);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新创建单个图表
|
|||
|
|
recreateChart(index) {
|
|||
|
|
try {
|
|||
|
|
// 销毁现有图表
|
|||
|
|
if (this.charts[index]) {
|
|||
|
|
this.charts[index].destroy();
|
|||
|
|
this.charts[index] = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新创建
|
|||
|
|
this.createChart(index);
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(`重新创建图表${index}失败:`, error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取系统信息
|
|||
|
|
async fetchSystemInfo() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/system-info');
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error(`获取系统信息失败: ${response.status}`);
|
|||
|
|
}
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
// 更新系统概览
|
|||
|
|
const osInfo = this.shadowRoot.getElementById('os-info');
|
|||
|
|
const kernelInfo = this.shadowRoot.getElementById('kernel-info');
|
|||
|
|
const cpuCores = this.shadowRoot.getElementById('cpu-cores');
|
|||
|
|
const ipAddress = this.shadowRoot.getElementById('ip-address');
|
|||
|
|
const isolatedCores = this.shadowRoot.getElementById('isolated-cores');
|
|||
|
|
|
|||
|
|
if (osInfo) osInfo.textContent = data.os;
|
|||
|
|
if (kernelInfo) kernelInfo.textContent = data.kernel || '';
|
|||
|
|
if (cpuCores) cpuCores.textContent = data.cpuCores;
|
|||
|
|
if (ipAddress) ipAddress.textContent = data.ipAddress;
|
|||
|
|
if (isolatedCores) isolatedCores.textContent = data.isolatedCores.join(',') || '无';
|
|||
|
|
|
|||
|
|
// 更新CPU核心数并重新生成选项
|
|||
|
|
if (this.cpuCoreCount !== data.cpuCores) {
|
|||
|
|
this.cpuCoreCount = data.cpuCores;
|
|||
|
|
this.updateCpuOptions();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新历史数据
|
|||
|
|
for (const [key, value] of Object.entries(data.metrics)) {
|
|||
|
|
if (this.historyData[key]) {
|
|||
|
|
this.historyData[key].shift();
|
|||
|
|
this.historyData[key].push(value);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果图表已初始化，则更新图表
|
|||
|
|
if (this.chartsInitialized) {
|
|||
|
|
this.updateCharts();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取系统信息失败:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新CPU选项
|
|||
|
|
updateCpuOptions() {
|
|||
|
|
// 清除旧的CPU选项
|
|||
|
|
this.chartOptions = this.chartOptions.filter(opt => !opt.startsWith('CPU'));
|
|||
|
|
|
|||
|
|
// 添加新的CPU选项
|
|||
|
|
for (let i = 0; i < this.cpuCoreCount; i++) {
|
|||
|
|
const option = `CPU${i}使用率`;
|
|||
|
|
this.chartOptions.push(option);
|
|||
|
|
|
|||
|
|
// 确保历史数据中有此项
|
|||
|
|
if (!this.historyData[option]) {
|
|||
|
|
this.historyData[option] = Array(60).fill(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新图表选择下拉框
|
|||
|
|
const selects = this.shadowRoot.querySelectorAll('.chart-select');
|
|||
|
|
if (selects.length === 4) {
|
|||
|
|
selects.forEach((select, index) => {
|
|||
|
|
// 保存当前选择
|
|||
|
|
const currentValue = this.chartSelections[index];
|
|||
|
|
|
|||
|
|
// 更新选项
|
|||
|
|
select.innerHTML = this.generateChartOptions(index);
|
|||
|
|
|
|||
|
|
// 如果当前选择的值不在新选项中，则更新为第一个选项
|
|||
|
|
if (!this.chartOptions.includes(currentValue)) {
|
|||
|
|
this.chartSelections[index] = this.chartOptions[0];
|
|||
|
|
if (this.charts[index]) {
|
|||
|
|
this.recreateChart(index);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成图表选项HTML
|
|||
|
|
generateChartOptions(chartIndex) {
|
|||
|
|
let html = '';
|
|||
|
|
this.chartOptions.forEach(option => {
|
|||
|
|
const selected = option === this.chartSelections[chartIndex] ? 'selected' : '';
|
|||
|
|
html += `<option value="${option}" ${selected}>${option}</option>`;
|
|||
|
|
});
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
customElements.define('system-info', SystemInfo);
|