Browse Source

修改首页显示

yangg 6 tháng trước cách đây
mục cha
commit
d94a933d8a

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/index.html


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/css/chunk-04c39295.e4b35bb8.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/css/chunk-af6f3af8.a532e080.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/js/app.9a13f9c5.js


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/js/chunk-04c39295.d984656b.js


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/js/chunk-16694b50.23e17d58.js


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/js/chunk-af6f3af8.07975ae5.js


+ 72 - 29
src/views/dashboard/admin/chart.vue

@@ -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;
 

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác