|
@@ -38,7 +38,7 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
- <div class="col-xl-8">
|
|
|
+ <div class="col-xl-6">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div class="row">
|
|
@@ -81,13 +81,175 @@
|
|
|
</div>
|
|
|
<div
|
|
|
ref="siteVisitorChart"
|
|
|
- style="height: 285px; width: 100%"
|
|
|
+ style="height: 245px; width: 100%"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- -->
|
|
|
- <div class="col-xl-4">
|
|
|
+ <div class="col-xl-3">
|
|
|
+ <div class="row">
|
|
|
+ <!-- GPU温度 -->
|
|
|
+ <div class="col-xl-12 col-md-6">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-body">
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ style="display: flex; align-items: center"
|
|
|
+ >
|
|
|
+ <div class="col-auto">
|
|
|
+ <h6>温度监控</h6>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <!-- CPU温度 -->
|
|
|
+ <div class="col-6">
|
|
|
+ <h2 class="mb-0" style="margin-top: 20px !important">
|
|
|
+ {{ cpuTemperature }}°C
|
|
|
+ </h2>
|
|
|
+ <span>CPU温度</span>
|
|
|
+ <div class="temperature-select-wrapper" style="margin-top: 15px">
|
|
|
+ <select
|
|
|
+ class="temperature-select"
|
|
|
+ :value="Math.round(cpuTemperature / temperatureData.cpu.critical)"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <option v-for="n in 24" :key="`cpu-${n}`" :value="n"></option>
|
|
|
+ </select>
|
|
|
+ <div
|
|
|
+ class="temperature-progress"
|
|
|
+ :style="{
|
|
|
+ width: `${(cpuTemperature / temperatureData.cpu.critical) * 100}%`,
|
|
|
+ backgroundColor: getTemperatureColor(cpuTemperature, 'cpu'),
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- GPU温度 -->
|
|
|
+ <div class="col-6">
|
|
|
+ <h2 class="mb-0" style="margin-top: 20px !important">
|
|
|
+ {{ gpuTemperature }}°C
|
|
|
+ </h2>
|
|
|
+ <span>GPU温度</span>
|
|
|
+ <div class="temperature-select-wrapper" style="margin-top: 15px">
|
|
|
+ <select
|
|
|
+ class="temperature-select"
|
|
|
+ :value="Math.round(gpuTemperature / temperatureData.gpu.critical)"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <option v-for="n in 24" :key="`gpu-${n}`" :value="n"></option>
|
|
|
+ </select>
|
|
|
+ <div
|
|
|
+ class="temperature-progress"
|
|
|
+ :style="{
|
|
|
+ width: `${(gpuTemperature / temperatureData.gpu.critical) * 100}%`,
|
|
|
+ backgroundColor: getTemperatureColor(gpuTemperature, 'gpu'),
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 磁盘信息 -->
|
|
|
+ <div class="col-xl-12 col-md-6">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-6">
|
|
|
+ <h6>磁盘信息</h6>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <div
|
|
|
+ ref="diskChart"
|
|
|
+ style="height: 110px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="col-xl-12 col-md-6">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-body">
|
|
|
+ <h6>Traffic tracker</h6>
|
|
|
+ <div class="row mt-2">
|
|
|
+ <div class="col-6">
|
|
|
+ <span class="d-block text-uppercase"
|
|
|
+ >Inbound</span
|
|
|
+ >
|
|
|
+ <h3 class="mt-1">180 GB</h3>
|
|
|
+ <div
|
|
|
+ ref="transactions1"
|
|
|
+ style="
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-6">
|
|
|
+ <span class="d-block text-uppercase"
|
|
|
+ >Outbound</span
|
|
|
+ >
|
|
|
+ <h3 class="mt-1">597.1 GB</h3>
|
|
|
+ <div
|
|
|
+ ref="transactions2"
|
|
|
+ style="
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-xl-12 col-md-6">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="row d-flex align-items-center">
|
|
|
+ <div class="col-6 p-r-0">
|
|
|
+ <span class="d-block mb-1"
|
|
|
+ ><i
|
|
|
+ class="fas fa-circle f-10 m-r-5"
|
|
|
+ style="color: #a367dc"
|
|
|
+ ></i
|
|
|
+ >Desktop [66.6%]</span
|
|
|
+ >
|
|
|
+ <span class="d-block mb-1"
|
|
|
+ ><i
|
|
|
+ class="fas fa-circle f-10 m-r-5"
|
|
|
+ style="color: #67b7dc"
|
|
|
+ ></i
|
|
|
+ >Mobile [29.7%]</span
|
|
|
+ >
|
|
|
+ <span class="d-block"
|
|
|
+ ><i
|
|
|
+ class="fas fa-circle f-10 m-r-5"
|
|
|
+ style="color: #6771dc"
|
|
|
+ ></i
|
|
|
+ >Tablet [38.6%]</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="col-6">
|
|
|
+ <div
|
|
|
+ ref="deviceChart"
|
|
|
+ id="device-chart"
|
|
|
+ style="height: 140px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-xl-3">
|
|
|
<div class="row">
|
|
|
<!-- 支持分析卡片 -->
|
|
|
<div class="col-xl-12 col-md-6">
|
|
@@ -134,10 +296,10 @@
|
|
|
</h6>
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
- <!-- 支持工单完成率图表 -->
|
|
|
+ <!-- 支持工单完成图表 -->
|
|
|
<div
|
|
|
ref="hdComplitedTicket"
|
|
|
- style="height: 130px; width: 100%"
|
|
|
+ style="height: 100px; width: 100%"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -241,7 +403,7 @@
|
|
|
<!-- 设备占比饼图 -->
|
|
|
<div
|
|
|
ref="chartPercent"
|
|
|
- style="height: 131px"
|
|
|
+ style="height: 100px"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -446,7 +608,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- charts: {}, // 存储图表实例
|
|
|
+ charts: {
|
|
|
+ diskChart: null,
|
|
|
+ // 其他图表...
|
|
|
+ },
|
|
|
chartData: {},
|
|
|
currentPercentage: {},
|
|
|
cpuValue: 0,
|
|
@@ -461,6 +626,20 @@ export default {
|
|
|
docList: {},
|
|
|
chartUpdateInterval: null, // 添加新的数据属性用于存储定时器
|
|
|
isPageVisible: !document.hidden, // 添加新的数据属性
|
|
|
+ cpuTemperature: 0,
|
|
|
+ gpuTemperature: 0,
|
|
|
+ temperatureData: {
|
|
|
+ cpu: {
|
|
|
+ current: 0,
|
|
|
+ high: 95, // 默认CPU高温阈值
|
|
|
+ critical: 100 // 默认CPU临界温度
|
|
|
+ },
|
|
|
+ gpu: {
|
|
|
+ current: 0,
|
|
|
+ high: 85, // 默认GPU高温阈值
|
|
|
+ critical: 90 // 默认GPU临界温度
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
@@ -479,7 +658,7 @@ export default {
|
|
|
if (newValue) {
|
|
|
// 页面变为可见时
|
|
|
console.log("Page became visible");
|
|
|
- this.initSiteVisitorChart();
|
|
|
+ this.initSiteVisitorChart();
|
|
|
} else {
|
|
|
// 页面变为不可见时
|
|
|
console.log("Page became hidden");
|
|
@@ -502,6 +681,8 @@ export default {
|
|
|
this.initSiteVisitorChart(); // 添加这行
|
|
|
this.initTransactionCharts();
|
|
|
this.initDeviceChart(); // 添加这行
|
|
|
+ this.initDiskChart();
|
|
|
+
|
|
|
},
|
|
|
|
|
|
// 修改生命周期钩子
|
|
@@ -568,7 +749,7 @@ export default {
|
|
|
try {
|
|
|
const data = JSON.parse(event.data);
|
|
|
// 检查数据结构是否完整
|
|
|
- console.log("wsData",data);
|
|
|
+ /* console.log("gpuTemperature", this.gpuTemperature); */
|
|
|
if (
|
|
|
data &&
|
|
|
data.data &&
|
|
@@ -576,12 +757,16 @@ export default {
|
|
|
data.data.system.cpu &&
|
|
|
data.data.system.cpu.memory
|
|
|
) {
|
|
|
-
|
|
|
// 更新图表数据
|
|
|
this.chartData = data;
|
|
|
this.cpuValue = data.data.system.cpu.total_usage;
|
|
|
this.GpuValue = data.data.system.gpu.devices[0]?.power || 0;
|
|
|
+ // 更新 GPU 温度
|
|
|
+ /* this.gpuTemperature =
|
|
|
+ data.data.system.gpu.devices[0]?.temperature || 0; */
|
|
|
+
|
|
|
this.currentPercentage = data.data.system.cpu.memory;
|
|
|
+ this.handleWebSocketMessage(data)
|
|
|
} else {
|
|
|
console.warn("Received incomplete data structure:", data);
|
|
|
}
|
|
@@ -593,6 +778,10 @@ export default {
|
|
|
// 连接关闭回调
|
|
|
this.ws.onclose = () => {
|
|
|
console.log("WebSocket连接关闭");
|
|
|
+ // 可以添加重连逻辑
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initWebSocket();
|
|
|
+ }, 3000);
|
|
|
};
|
|
|
|
|
|
// 连接错误回调
|
|
@@ -601,6 +790,14 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
|
|
|
+ // 添加一个用于检查 WebSocket 连接状态的方法
|
|
|
+ checkWebSocketConnection() {
|
|
|
+ if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
|
|
|
+ console.log("WebSocket disconnected, attempting to reconnect...");
|
|
|
+ this.initWebSocket();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
// 初始化支持工单完成率图表
|
|
|
initHdComplitedTicket() {
|
|
|
const chart = am4core.create(
|
|
@@ -610,7 +807,7 @@ export default {
|
|
|
chart.logo.disabled = true;
|
|
|
chart.innerRadius = am4core.percent(82);
|
|
|
|
|
|
- // 修改主轴配置
|
|
|
+ // 修改主配置
|
|
|
const axis = chart.xAxes.push(new am4charts.ValueAxis());
|
|
|
axis.min = 0;
|
|
|
axis.max = 100;
|
|
@@ -705,7 +902,7 @@ export default {
|
|
|
|
|
|
chart.padding(0, 0, 0, 0);
|
|
|
|
|
|
- // 保存图表实例和定时器
|
|
|
+ // 保存表实例和定时器
|
|
|
this.charts.hdComplitedTicket = {
|
|
|
chart: chart,
|
|
|
interval: interval,
|
|
@@ -935,7 +1132,7 @@ export default {
|
|
|
gpuBullet.fill = am4core.color("#19BCBF");
|
|
|
gpuBullet.isMeasured = false;
|
|
|
|
|
|
- // 更新两个系列的圆点位置
|
|
|
+ // 更新两个系列圆点位置
|
|
|
cpuSeries.events.on("validated", () => {
|
|
|
cpuBullet.moveTo(cpuSeries.dataItems.last.point);
|
|
|
cpuBullet.validatePosition();
|
|
@@ -1248,7 +1445,7 @@ export default {
|
|
|
return colors[type.toLowerCase()] || "#666666";
|
|
|
},
|
|
|
|
|
|
- // 计算变化率
|
|
|
+ // 计算化率
|
|
|
getChangePercentage(type) {
|
|
|
const currentCount = this.fileTypeCounts[type] || 0;
|
|
|
const previousCount = this.previousCounts[type] || currentCount;
|
|
@@ -1305,6 +1502,220 @@ export default {
|
|
|
return merged;
|
|
|
}, {});
|
|
|
},
|
|
|
+
|
|
|
+ // 处理WebSocket消息的方法修改
|
|
|
+ handleWebSocketMessage(data) {
|
|
|
+ try {
|
|
|
+ if (data?.data?.system?.temperature) {
|
|
|
+ this.updateTemperatures(data.data.system.temperature);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("Error processing WebSocket message:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ updateTemperatures(temperatureData) {
|
|
|
+ // 更新CPU温度
|
|
|
+ if (temperatureData.cpu && Array.isArray(temperatureData.cpu)) {
|
|
|
+ // 获取Package温度作为主要CPU温度
|
|
|
+ const packageTemp = temperatureData.cpu.find(temp => temp.label === 'Package id 0');
|
|
|
+ if (packageTemp) {
|
|
|
+ this.temperatureData.cpu = {
|
|
|
+ current: packageTemp.current,
|
|
|
+ high: packageTemp.high || this.temperatureData.cpu.high,
|
|
|
+ critical: packageTemp.critical || this.temperatureData.cpu.critical
|
|
|
+ };
|
|
|
+ this.cpuTemperature = packageTemp.current;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 记录最高核心温度用于告警
|
|
|
+ const maxCoreTemp = Math.max(
|
|
|
+ ...temperatureData.cpu
|
|
|
+ .filter(temp => temp.label.startsWith('Core'))
|
|
|
+ .map(temp => temp.current)
|
|
|
+ );
|
|
|
+ if (maxCoreTemp > this.temperatureData.cpu.high) {
|
|
|
+ console.warn(`CPU temperature warning: ${maxCoreTemp}°C`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新GPU温度
|
|
|
+ if (temperatureData.gpu && temperatureData.gpu.length > 0) {
|
|
|
+ const gpuTemp = temperatureData.gpu[0];
|
|
|
+ this.temperatureData.gpu.current = gpuTemp.temperature;
|
|
|
+ this.gpuTemperature = gpuTemp.temperature;
|
|
|
+
|
|
|
+ if (gpuTemp.temperature > this.temperatureData.gpu.high) {
|
|
|
+ console.warn(`GPU temperature warning: ${gpuTemp.temperature}°C`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getTemperatureColor(temp, type = 'cpu') {
|
|
|
+ const thresholds = this.temperatureData[type];
|
|
|
+ const percentage = (temp / thresholds.critical) * 100;
|
|
|
+
|
|
|
+ if (percentage >= 90) return "#FF425C"; // 危险温度 - 红色
|
|
|
+ if (percentage >= 70) return "#FFA726"; // 警告温度 - 橙色
|
|
|
+ return "#19BCBF"; // 正常温度 - 蓝色
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化磁盘图表
|
|
|
+ initDiskChart() {
|
|
|
+ try {
|
|
|
+ // 创建环形图实例
|
|
|
+ const chart = am4core.create(this.$refs.diskChart, am4charts.PieChart);
|
|
|
+ if (!chart) return;
|
|
|
+
|
|
|
+ // 禁用 logo
|
|
|
+ if (chart.logo) {
|
|
|
+ chart.logo.disabled = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置内半径创建环形效果
|
|
|
+ chart.innerRadius = am4core.percent(65);
|
|
|
+
|
|
|
+ // 添加数据
|
|
|
+ chart.data = this.formatDiskData();
|
|
|
+
|
|
|
+ // 创建饼图系列
|
|
|
+ const series = chart.series.push(new am4charts.PieSeries());
|
|
|
+ if (series) {
|
|
|
+ // 配置数据字段
|
|
|
+ series.dataFields.value = "used";
|
|
|
+ series.dataFields.category = "diskName";
|
|
|
+
|
|
|
+ // 禁用标签和刻度
|
|
|
+ series.labels.template.disabled = true;
|
|
|
+ series.ticks.template.disabled = true;
|
|
|
+
|
|
|
+ // 配置切片样式
|
|
|
+ if (series.slices.template) {
|
|
|
+ series.slices.template.strokeWidth = 2;
|
|
|
+ series.slices.template.strokeOpacity = 1;
|
|
|
+ series.slices.template.stroke = am4core.color("#fff");
|
|
|
+
|
|
|
+ // 设置切片颜色
|
|
|
+ series.slices.template.adapter.add("fill", (fill, target) => {
|
|
|
+ const dataItem = target.dataItem;
|
|
|
+ if (dataItem) {
|
|
|
+ const percentUsed = (dataItem.values.value.value / dataItem.dataContext.total) * 100;
|
|
|
+ if (percentUsed > 80) return am4core.color("#FF425C"); // 危险
|
|
|
+ if (percentUsed > 60) return am4core.color("#FFA726"); // 警告
|
|
|
+ return am4core.color("#19BCBF"); // 正常
|
|
|
+ }
|
|
|
+ return fill;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 配置悬浮提示
|
|
|
+ series.slices.template.tooltipHTML = `
|
|
|
+ <div style="padding: 10px;">
|
|
|
+ <div style="margin-bottom: 5px;color:#333;"><strong>{diskName}</strong></div>
|
|
|
+ <div style="color: #666;">总容量: {total.formatNumber('#.##')} GB</div>
|
|
|
+ <div style="color: #FF425C;">已使用: {used.formatNumber('#.##')} GB</div>
|
|
|
+ <div style="color: #19BCBF;">可用空间: {free.formatNumber('#.##')} GB</div>
|
|
|
+ <div style="color: #666;">使用率: {percent.formatNumber('#.##')}%</div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ // 设置悬浮提示样式
|
|
|
+ if (series.tooltip) {
|
|
|
+ series.tooltip.getFillFromObject = false;
|
|
|
+ series.tooltip.pointerOrientation = "vertical";
|
|
|
+ series.tooltip.dy = -5;
|
|
|
+ series.tooltip.dx = 0;
|
|
|
+
|
|
|
+ if (series.tooltip.background) {
|
|
|
+ series.tooltip.background.fill = am4core.color("#ffffff");
|
|
|
+ series.tooltip.background.stroke = am4core.color("#19BCBF");
|
|
|
+ series.tooltip.background.strokeWidth = 1;
|
|
|
+ series.tooltip.background.cornerRadius = 4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加中心标签
|
|
|
+ const label = chart.seriesContainer.createChild(am4core.Label);
|
|
|
+ label.text = "{percent.formatNumber('#.#')}%";
|
|
|
+ label.horizontalCenter = "middle";
|
|
|
+ label.verticalCenter = "middle";
|
|
|
+ label.fontSize = 20;
|
|
|
+ label.fontWeight = "600";
|
|
|
+
|
|
|
+ // 更新中心标签的值
|
|
|
+ series.events.on("validated", () => {
|
|
|
+ const total = series.dataItems.getIndex(0).dataContext.total;
|
|
|
+ const used = series.dataItems.getIndex(0).dataContext.used;
|
|
|
+ const percent = (used / total) * 100;
|
|
|
+ label.text = `${percent.toFixed(1)}%`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存图表实例
|
|
|
+ this.charts.diskChart = chart;
|
|
|
+
|
|
|
+ // 设置自动更新
|
|
|
+ this.startDiskDataInterval();
|
|
|
+ } catch (error) {
|
|
|
+ console.error("初始化磁盘图表失败:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 格式化磁盘数据
|
|
|
+ formatDiskData() {
|
|
|
+ if (!this.chartData?.data?.system?.cpu?.disk?.partitions) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+
|
|
|
+ const diskNameMap = {
|
|
|
+ C: "系统盘",
|
|
|
+ D: "数据盘",
|
|
|
+ E: "扩展盘",
|
|
|
+ };
|
|
|
+
|
|
|
+ return this.chartData.data.system.cpu.disk.partitions
|
|
|
+ .filter(partition => partition.mountpoint === "/")
|
|
|
+ .map(partition => {
|
|
|
+ const driveLetter = partition.device.replace(":\\", "");
|
|
|
+ const diskName = diskNameMap[driveLetter] || `${driveLetter}盘`;
|
|
|
+ return {
|
|
|
+ device: driveLetter,
|
|
|
+ diskName: diskName,
|
|
|
+ used: partition.used,
|
|
|
+ free: partition.free,
|
|
|
+ total: partition.total,
|
|
|
+ percent: partition.percent
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 启动磁盘数据更新定时器
|
|
|
+ startDiskDataInterval() {
|
|
|
+ if (this.diskUpdateInterval) {
|
|
|
+ clearInterval(this.diskUpdateInterval);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.diskUpdateInterval = setInterval(() => {
|
|
|
+ if (this.charts.diskChart) {
|
|
|
+ this.charts.diskChart.data = this.formatDiskData();
|
|
|
+ }
|
|
|
+ }, 2000); // 每2秒更新一次
|
|
|
+ },
|
|
|
+
|
|
|
+ /* // 在 WebSocket 消息处理中添加磁盘数据更新
|
|
|
+ handleWebSocketMessage(event) {
|
|
|
+ try {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ if (data?.data?.system?.cpu?.disk) {
|
|
|
+ this.chartData = data;
|
|
|
+ if (this.charts.diskChart) {
|
|
|
+ this.charts.diskChart.data = this.formatDiskData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("Error processing WebSocket message:", error);
|
|
|
+ }
|
|
|
+ }, */
|
|
|
},
|
|
|
// 修改beforeDestroy钩子
|
|
|
beforeDestroy() {
|
|
@@ -1346,7 +1757,7 @@ export default {
|
|
|
border-radius: 2px;
|
|
|
box-shadow: 0 0px 0 1px #e2e5e8;
|
|
|
border: none;
|
|
|
- margin-bottom: 24px;
|
|
|
+ margin-bottom: 17px;
|
|
|
background: #fff;
|
|
|
|
|
|
.card-body {
|
|
@@ -1465,5 +1876,113 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.progress {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.progress-bar {
|
|
|
+ transition: width 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.temperature-select-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+
|
|
|
+ .temperature-select {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ appearance: none;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ &::-ms-expand {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ option {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .temperature-progress {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #19bcbf;
|
|
|
+ transition: width 0.3s ease;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: repeating-linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ currentColor,
|
|
|
+ currentColor 4px,
|
|
|
+ transparent 4px,
|
|
|
+ transparent 8px
|
|
|
+ );
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 添加条纹背景
|
|
|
+.temperature-select-wrapper::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: repeating-linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ #e0e0e0,
|
|
|
+ #e0e0e0 4px,
|
|
|
+ #f0f0f0 4px,
|
|
|
+ #f0f0f0 8px
|
|
|
+ );
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+// 更新温度进度条样式
|
|
|
+.temperature-select-wrapper {
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .temperature-progress {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ opacity: 0.15;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 添加新的温度显示样式
|
|
|
+.col-6 {
|
|
|
+ h2 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style src="./css/bootstrap.min.css" scoped></style>
|