|
@@ -42,16 +42,16 @@
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div class="row">
|
|
|
- <div class="col">
|
|
|
- <h5>C/GPU使用率</h5>
|
|
|
- </div>
|
|
|
+ <!-- <div class="col">
|
|
|
+ <h5>CPU/GPU使用率</h5>
|
|
|
+ </div> -->
|
|
|
<!-- <div class="col-auto text-end">
|
|
|
<span>This Month</span>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
- <div class="row mb-2">
|
|
|
+ <div class="row mb-2" style="padding-bottom: 20px;">
|
|
|
<div class="col-auto">
|
|
|
<h2 class="m-0">
|
|
|
<strong>{{ cpuValue + "%"
|
|
@@ -353,7 +353,7 @@
|
|
|
<a class="dropdown-item" href="#">1周</a>
|
|
|
<a class="dropdown-item" href="#">2年</a>
|
|
|
<a class="dropdown-item" href="#"
|
|
|
- >3个月</a
|
|
|
+ >3个��</a
|
|
|
>
|
|
|
</div>
|
|
|
</div> -->
|
|
@@ -548,7 +548,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 收入卡片 -->
|
|
|
+ <!-- ���入卡片 -->
|
|
|
<div class="col-md-4 col-xl-2 col-sm-6">
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
@@ -819,20 +819,20 @@ export default {
|
|
|
|
|
|
// 初始化支持工单完成率图表
|
|
|
initHdComplitedTicket() {
|
|
|
- const chart = am4core.create(
|
|
|
- this.$refs.hdComplitedTicket,
|
|
|
- am4charts.GaugeChart
|
|
|
- );
|
|
|
+ const chart = am4core.create(this.$refs.hdComplitedTicket, am4charts.GaugeChart);
|
|
|
chart.logo.disabled = true;
|
|
|
- chart.innerRadius = am4core.percent(82);
|
|
|
-
|
|
|
+
|
|
|
+ // 调整内半径,使圆环更完整
|
|
|
+ chart.innerRadius = am4core.percent(70);
|
|
|
+
|
|
|
// 修改主配置
|
|
|
const axis = chart.xAxes.push(new am4charts.ValueAxis());
|
|
|
axis.min = 0;
|
|
|
axis.max = 100;
|
|
|
axis.strictMinMax = true;
|
|
|
- // 设置固定的半径
|
|
|
- axis.renderer.radius = 80; // 使用固定像素值而不是百分比
|
|
|
+
|
|
|
+ // 调整轴的位置和大小
|
|
|
+ axis.renderer.radius = am4core.percent(100);
|
|
|
axis.renderer.inside = true;
|
|
|
axis.renderer.line.strokeOpacity = 0;
|
|
|
axis.renderer.ticks.template.strokeOpacity = 1;
|
|
@@ -845,11 +845,12 @@ export default {
|
|
|
const axis2 = chart.xAxes.push(new am4charts.ValueAxis());
|
|
|
axis2.min = 0;
|
|
|
axis2.max = 100;
|
|
|
- // 设置固定的内半径
|
|
|
- axis2.renderer.innerRadius = 65; // 使用固定像素值
|
|
|
- axis2.renderer.radius = 80; // 设置固定的外半径
|
|
|
-
|
|
|
axis2.strictMinMax = true;
|
|
|
+
|
|
|
+ // 调整第二轴的半径
|
|
|
+ axis2.renderer.innerRadius = am4core.percent(70);
|
|
|
+ axis2.renderer.radius = am4core.percent(100);
|
|
|
+
|
|
|
axis2.renderer.labels.template.disabled = true;
|
|
|
axis2.renderer.ticks.template.disabled = true;
|
|
|
axis2.renderer.grid.template.disabled = true;
|
|
@@ -867,12 +868,12 @@ export default {
|
|
|
range1.axisFill.fillOpacity = 1;
|
|
|
range1.axisFill.fill = am4core.color("#eff3f6");
|
|
|
|
|
|
- // 添加标签
|
|
|
+ // 调整标签位置,让其更靠上
|
|
|
const label = chart.radarContainer.createChild(am4core.Label);
|
|
|
label.isMeasured = false;
|
|
|
label.fontSize = 18;
|
|
|
label.x = am4core.percent(50);
|
|
|
- label.y = am4core.percent(100);
|
|
|
+ label.y = am4core.percent(85); // 调整到85%的位置
|
|
|
label.horizontalCenter = "middle";
|
|
|
label.verticalCenter = "bottom";
|
|
|
label.text = "50%";
|
|
@@ -881,10 +882,10 @@ export default {
|
|
|
label2.isMeasured = false;
|
|
|
label2.fontSize = 12;
|
|
|
label2.x = am4core.percent(50);
|
|
|
- label2.y = am4core.percent(100);
|
|
|
+ label2.y = am4core.percent(85); // 调整到85%的位置
|
|
|
label2.horizontalCenter = "middle";
|
|
|
label2.verticalCenter = "top";
|
|
|
- label2.text = "Complited Ticket";
|
|
|
+ label2.text = "Memory Usage";
|
|
|
|
|
|
// 配置指针
|
|
|
const hand = chart.hands.push(new am4charts.ClockHand());
|
|
@@ -895,18 +896,25 @@ export default {
|
|
|
hand.value = 50;
|
|
|
hand.disabled = true;
|
|
|
|
|
|
- // 更新事件处理
|
|
|
hand.events.on("propertychanged", (ev) => {
|
|
|
range0.endValue = ev.target.value;
|
|
|
range1.value = ev.target.value;
|
|
|
axis2.invalidate();
|
|
|
});
|
|
|
- // 设置图表容器的固定大小
|
|
|
- //chart.width = 160; // 设置固定宽度
|
|
|
+
|
|
|
+ // 设置图表容器的固定大小和位置
|
|
|
+ chart.width = am4core.percent(100);
|
|
|
+ chart.height = 100; // 固定高度为100px
|
|
|
+ chart.margin(0, 0, 0, 0);
|
|
|
+ chart.padding(0, 0, 0, 0);
|
|
|
+
|
|
|
+ // 调整图表位置,向上偏移以显示完整
|
|
|
+ chart.seriesContainer.dy = -15; // 向上偏移15px
|
|
|
+ chart.radius = am4core.percent(90); // 调整整体大小为90%
|
|
|
|
|
|
// 定时更新数据
|
|
|
const interval = setInterval(() => {
|
|
|
- const value = this.currentPercentage.percent; // Math.round(Math.random() * 100);
|
|
|
+ const value = this.currentPercentage.percent;
|
|
|
label.text = value + "%";
|
|
|
new am4core.Animation(
|
|
|
hand,
|
|
@@ -919,9 +927,7 @@ export default {
|
|
|
).start();
|
|
|
}, 2000);
|
|
|
|
|
|
- chart.padding(0, 0, 0, 0);
|
|
|
-
|
|
|
- // 保存表实例和定时器
|
|
|
+ // 保存图表实例和定时器
|
|
|
this.charts.hdComplitedTicket = {
|
|
|
chart: chart,
|
|
|
interval: interval,
|
|
@@ -1167,6 +1173,43 @@ export default {
|
|
|
dateAxis.zoom({ start: 1 / 15, end: 1.2 }, false, true);
|
|
|
});
|
|
|
|
|
|
+ // 添加图例
|
|
|
+ const legend = chart.createChild(am4charts.Legend);
|
|
|
+ legend.data = [{
|
|
|
+ name: "CPU使用率",
|
|
|
+ fill: am4core.color("#FF425C")
|
|
|
+ }, {
|
|
|
+ name: "GPU使用率",
|
|
|
+ fill: am4core.color("#19BCBF")
|
|
|
+ }];
|
|
|
+
|
|
|
+ // 配置图例位置和样式
|
|
|
+ legend.position = "absolute";
|
|
|
+ legend.align = "right";
|
|
|
+ legend.valign = "top";
|
|
|
+ legend.dx = 0; // 向左偏移10px
|
|
|
+ legend.dy =-230; // 向下偏移10px
|
|
|
+ legend.fontSize = 12;
|
|
|
+ legend.width = 230; // 调整宽度以适应文字
|
|
|
+
|
|
|
+ // 使图例水平排列
|
|
|
+ legend.layout = "horizontal";
|
|
|
+ legend.useDefaultMarker = true;
|
|
|
+
|
|
|
+ // 配置图例标记样式
|
|
|
+ legend.markers.template.width = 12;
|
|
|
+ legend.markers.template.height = 12;
|
|
|
+ legend.markers.template.marginRight = 5;
|
|
|
+
|
|
|
+ // 配置图例项的间距
|
|
|
+ legend.itemContainers.template.paddingTop = 0;
|
|
|
+ legend.itemContainers.template.paddingBottom = 0;
|
|
|
+ legend.itemContainers.template.marginLeft = 5;
|
|
|
+
|
|
|
+ // 移除图例背景
|
|
|
+ legend.background.fill = am4core.color("#fff");
|
|
|
+ legend.background.fillOpacity = 0;
|
|
|
+
|
|
|
// 存储图表实例
|
|
|
this.charts.siteVisitorChart = chart;
|
|
|
|