增加磁盘使用率

Infrastructure/Helper/ComputerHelper.cs

@@ -1,6 +1,8 @@
 using Infrastructure.Extensions;
 using System;
 using System.Collections.Generic;
+using System.IO;
+using System.Linq;
 using System.Runtime.InteropServices;
 using System.Text;
 
@@ -8,23 +10,53 @@ namespace Infrastructure
 {
     public class ComputerHelper
     {
-        public static ComputerInfo GetComputerInfo()
+        /// <summary>
+        /// 内存使用情况
+        /// </summary>
+        /// <returns></returns>
+        public static MemoryMetrics GetComputerInfo()
         {
-            ComputerInfo computerInfo = new ComputerInfo();
             try
             {
-                MemoryMetricsClient client = new MemoryMetricsClient();
+                MemoryMetricsClient client = new();
                 MemoryMetrics memoryMetrics = client.GetMetrics();
-                computerInfo.TotalRAM = Math.Ceiling(memoryMetrics.Total / 1024).ToString() + " GB";
+                memoryMetrics.FreeRam = Math.Ceiling(memoryMetrics.Free / 1024) + "GB";
-                computerInfo.RAMRate = Math.Ceiling(100 * memoryMetrics.Used / memoryMetrics.Total).ToString() + " %";
+                memoryMetrics.UsedRam = Math.Ceiling(memoryMetrics.Used / 1024) + "GB";
-                computerInfo.CPURate = Math.Ceiling(GetCPURate().ParseToDouble()) + " %";
+                memoryMetrics.TotalRAM = Math.Ceiling(memoryMetrics.Total / 1024).ToString() + " GB";
-                computerInfo.RunTime = GetRunTime();
+                memoryMetrics.RAMRate = Math.Ceiling(100 * memoryMetrics.Used / memoryMetrics.Total).ToString() + "%";
+                memoryMetrics.CPURate = Math.Ceiling(GetCPURate().ParseToDouble()) + "%";
+                return memoryMetrics;
             }
             catch (Exception ex)
             {
-                //LogHelper.Error(ex);
+                Console.WriteLine(ex.Message);
             }
-            return computerInfo;
+            return null;
+        }
+
+        /// <summary>
+        /// 获取内存大小
+        /// </summary>
+        /// <returns></returns>
+        public static List<DiskInfo> GetDiskInfos()
+        {
+            List<DiskInfo> diskInfos = new();
+
+            var driv = DriveInfo.GetDrives();
+            foreach (var item in driv)
+            {
+                var obj = new DiskInfo()
+                {
+                    DickName = item.Name,
+                    TypeName = item.DriveType.ToString(),
+                    TotalFree = item.TotalFreeSpace / 1024 / 1024 / 1024,
+                    TotalSize = item.TotalSize / 1024 / 1024 / 1024,
+                    AvailableFreeSpace = item.AvailableFreeSpace / 1024 / 1024 / 1024,
+                };
+                obj.AvailablePercent =  decimal.Ceiling(((decimal)(obj.TotalSize - obj.AvailableFreeSpace) /(decimal)obj.TotalSize) * 100);
+                diskInfos.Add(obj);
+            }
+            return diskInfos;
         }
 
         public static bool IsUnix()
@@ -35,7 +67,7 @@ namespace Infrastructure
 
         public static string GetCPURate()
         {
-            string cpuRate = string.Empty;
+            string cpuRate;
             if (IsUnix())
             {
                 string output = ShellHelper.Bash("top -b -n1 | grep \"Cpu(s)\" | awk '{print $2 + $4}'");
@@ -72,17 +104,54 @@ namespace Infrastructure
             }
             catch (Exception ex)
             {
-                //LogHelper.Error(ex);
+                Console.WriteLine(ex.Message);
             }
             return runTime;
         }
     }
 
+    /// <summary>
+    /// 内存信息
+    /// </summary>
     public class MemoryMetrics
     {
         public double Total { get; set; }
         public double Used { get; set; }
         public double Free { get; set; }
+
+        public string UsedRam { get; set; }
+        /// <summary>
+        /// CPU使用率%
+        /// </summary>
+        public string CPURate { get; set; }
+        /// <summary>
+        /// 总内存 GB
+        /// </summary>
+        public string TotalRAM { get; set; }
+        /// <summary>
+        /// 内存使用率 %
+        /// </summary>
+        public string RAMRate { get; set; }
+        /// <summary>
+        /// 空闲内存
+        /// </summary>
+        public string FreeRam { get; set; }
+    }
+
+    public class DiskInfo
+    {
+        /// <summary>
+        /// 磁盘名
+        /// </summary>
+        public string DickName { get; set; }
+        public string TypeName { get; set; }
+        public long TotalFree { get; set; }
+        public long TotalSize { get; set; }
+        /// <summary>
+        /// 可使用
+        /// </summary>
+        public long AvailableFreeSpace { get; set; }
+        public decimal AvailablePercent { get; set; }
     }
 
     public class MemoryMetricsClient
@@ -96,6 +165,10 @@ namespace Infrastructure
             return GetWindowsMetrics();
         }
 
+        /// <summary>
+        /// windows系统获取内存信息
+        /// </summary>
+        /// <returns></returns>
         private MemoryMetrics GetWindowsMetrics()
         {
             string output = ShellHelper.Cmd("wmic", "OS get FreePhysicalMemory,TotalVisibleMemorySize /Value");
@@ -112,6 +185,20 @@ namespace Infrastructure
             return metrics;
         }
 
+        /// <summary>
+        /// windows 获取磁盘信息
+        /// </summary>
+        private void GetWindowsDiskInfo()
+        {
+            string output = ShellHelper.Cmd("wmic", "diskdrive get Size /Value");
+
+            Console.WriteLine(output);
+        }
+
+        /// <summary>
+        /// Unix系统获取
+        /// </summary>
+        /// <returns></returns>
         private MemoryMetrics GetUnixMetrics()
         {
             string output = ShellHelper.Bash("free -m");
@@ -128,23 +215,4 @@ namespace Infrastructure
         }
     }
 
-    public class ComputerInfo
-    {
-        /// <summary>
-        /// CPU使用率
-        /// </summary>
-        public string CPURate { get; set; }
-        /// <summary>
-        /// 总内存
-        /// </summary>
-        public string TotalRAM { get; set; }
-        /// <summary>
-        /// 内存使用率
-        /// </summary>
-        public string RAMRate { get; set; }
-        /// <summary>
-        /// 系统运行时间
-        /// </summary>
-        public string RunTime { get; set; }
-    }
 }

Infrastructure/Helper/ShellHelper.cs

@@ -7,6 +7,11 @@ namespace Infrastructure
 {
     public class ShellHelper
     {
+        /// <summary>
+        /// linux 系统命令
+        /// </summary>
+        /// <param name="command"></param>
+        /// <returns></returns>
         public static string Bash(string command)
         {
             var escapedArgs = command.Replace("\"", "\\\"");
@@ -28,6 +33,12 @@ namespace Infrastructure
             return result;
         }
 
+        /// <summary>
+        /// windows系统命令
+        /// </summary>
+        /// <param name="fileName"></param>
+        /// <param name="args"></param>
+        /// <returns></returns>
         public static string Cmd(string fileName, string args)
         {
             string output = string.Empty;

ZR.Vue/src/views/monitor/server/index.vue

@@ -1,87 +1,62 @@
 <template>
   <div class="app-container">
     <el-row>
-      <el-col :lg="12" class="card-box">
+      <el-col :lg="24" class="card-box">
-        <el-card>
+        <el-card class="box-card">
-          <div slot="header"><span>CPU</span></div>
+          <div slot="header" class="clearfix">
-          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
-            <table cellspacing="0" style="width: 100%;">
-              <thead>
-                <tr>
-                  <th class="is-leaf">
-                    属性
-                  </th>
-                  <th class="is-leaf">
-                    值
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <div class="cell">核心数</div>
-                  </td>
-                  <td>
-                    <div class="cell" v-if="server.sys">{{ server.sys.cpuNum }}</div>
-                  </td>
-                </tr>
-                <!-- <tr>
-                  <td><div class="cell">用户使用率</div></td>
-                  <td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
-                </tr> -->
-                <tr>
-                  <td>
-                    <div class="cell">cpu使用率</div>
-                  </td>
-                  <td>
-                    <div class="cell" v-if="server.cpu">{{ server.cpu.cpuRate }}</div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
           </div>
-        </el-card>
+          <div>
+            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
+              <div class="title">CPU使用率</div>
+              <el-tooltip placement="top-end">
+                <div class="content" v-if="server.cpu">
+                  <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+                </div>
+              </el-tooltip>
+              <div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
             </el-col>
+            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
+              <div class="title">内存使用率</div>
+              <el-tooltip placement="top-end">
+                <div slot="content" style="font-size: 12px;">
+                  <div style="padding: 3px;">
+                    总量：{{ server.cpu.totalRAM }}
+                  </div>
+                  <div style="padding: 3px">
+                    已使用：{{ server.cpu.usedRam }}
+                  </div>
+                  <div style="padding: 3px">
+                    空闲：{{ server.cpu.freeRam }}
+                  </div>
+                </div>
+                <div class="content">
+                  <el-progress type="dashboard" :percentage="parseFloat( server.cpu.ramRate)" />
+                </div>
+              </el-tooltip>
+              <div class="footer"> {{server.cpu.usedRam}} / {{ server.cpu.totalRAM }}</div>
+            </el-col>
+            <!--
             
-      <el-col :lg="12" class="card-box">
+            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
-        <el-card>
+              <div class="title">磁盘使用率</div>
-          <div slot="header"><span>内存</span></div>
+              <div class="content">
-          <div class="el-table el-table--enable-row-hover el-table--medium">
+                <el-tooltip placement="top-end">
-            <table cellspacing="0" style="width: 100%;">
+                  <div slot="content" style="font-size: 12px;">
-              <thead>
+                    <div style="padding: 3px">
-                <tr>
+                      总量：{{ 1 }}
-                  <th class="is-leaf">
+                    </div>
-                    属性
+                    <div style="padding: 3px">
-                  </th>
+                      空闲：{{ 1 }}
-                  <th class="is-leaf">
+                    </div>
-                    内存
+                  </div>
-                  </th>
+                  <div class="content">
-                </tr>
+                    <el-progress type="dashboard" :percentage="parseFloat(3)" />
-              </thead>
+                  </div>
-              <tbody>
+                </el-tooltip>
-                <tr>
+              </div>
-                  <td>
+              <div class="footer">{{ 1 }} / {{ 100 }}</div>
-                    <div class="cell">总内存</div>
+            </el-col> -->
-                  </td>
-                  <td>
-                    <div class="cell" v-if="server.cpu">{{ server.cpu.totalRAM }}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">内存使用率</div>
-                  </td>
-                  <td>
-                    <div class="cell" v-if="server.cpu">{{ server.cpu.ramRate}}</div>
-                  </td>
-                </tr>
-                <!-- <tr>
-                  <td><div class="cell">运行时间</div></td>
-                  <td><div class="cell" v-if="server.cpu">{{ server.cpu.runTime }}</div></td>
-                </tr> -->
-
-              </tbody>
-            </table>
           </div>
         </el-card>
       </el-col>
@@ -92,20 +67,20 @@
             <span>服务器信息</span>
           </div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
+            <table cellspacing="0" style="width: 100%;" v-if="server.sys">
               <tbody>
                 <tr>
                   <td>
                     <div class="cell">服务器名称</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div>
+                    <div class="cell">{{ server.sys.computerName }}</div>
                   </td>
                   <td>
                     <div class="cell">操作系统</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.sys">{{ server.sys.osName }}</div>
+                    <div class="cell">{{ server.sys.osName }}</div>
                   </td>
                 </tr>
                 <tr>
@@ -113,13 +88,13 @@
                     <div class="cell">服务器IP</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.sys">{{ server.sys.serverIP }}</div>
+                    <div class="cell">{{ server.sys.serverIP }}</div>
                   </td>
                   <td>
                     <div class="cell">系统架构</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div>
+                    <div class="cell">{{ server.sys.osArch }}</div>
                   </td>
                 </tr>
                 <tr>
@@ -127,7 +102,7 @@
                     <div class="cell">系统运行时长</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.cpu">{{ server.cpu.runTime }}</div>
+                    <div class="cell">{{ server.sys.runTime }}</div>
                   </td>
                   <td>
                     <div class="cell"></div>
@@ -142,6 +117,33 @@
         </el-card>
       </el-col>
 
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>磁盘状态</span>
+          </div>
+					<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
+              <div class="title">{{sysFile.dickName }}盘使用率</div>
+              <div class="content">
+                <el-tooltip placement="top-end">
+                  <div slot="content" style="font-size: 12px;">
+                    <div style="padding: 3px">
+                      总量：{{ sysFile.totalSize }}GB
+                    </div>
+                    <div style="padding: 3px">
+                      空闲：{{ sysFile.availableFreeSpace }}GB
+                    </div>
+                  </div>
+                  <div class="content">
+                    <el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
+                  </div>
+                </el-tooltip>
+              </div>
+              <div class="footer">{{ sysFile.availableFreeSpace }}G / {{ sysFile.totalSize }}G</div>
+            </el-col>
+        </el-card>
+      </el-col>
+
       <el-col :lg="24" class="card-box">
         <el-card>
           <div slot="header">
@@ -211,68 +213,7 @@
           </div>
         </el-card>
       </el-col>
-      <!--
+
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <div slot="header">
-            <span>磁盘状态</span>
-          </div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <thead>
-                <tr>
-                  <th class="is-leaf">
-                    <div class="cell">盘符路径</div>
-                  </th>
-                  <th class="is-leaf">
-                    <div class="cell">文件系统</div>
-                  </th>
-                  <th class="is-leaf">
-                    <div class="cell">盘符类型</div>
-                  </th>
-                  <th class="is-leaf">
-                    <div class="cell">总大小</div>
-                  </th>
-                  <th class="is-leaf">
-                    <div class="cell">可用大小</div>
-                  </th>
-                  <th class="is-leaf">
-                    <div class="cell">已用大小</div>
-                  </th>
-                  <th class="is-leaf">
-                    <div class="cell">已用百分比</div>
-                  </th>
-                </tr>
-              </thead>
-              <tbody v-if="server.sysFiles">
-                <tr v-for="sysFile in server.sysFiles">
-                  <td>
-                    <div class="cell">{{ sysFile.dirName }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.sysTypeName }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.typeName }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.total }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.free }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.used }}</div>
-                  </td>
-                  <td>
-                    <div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col> -->
     </el-row>
   </div>
 </template>
@@ -343,7 +284,27 @@ table tr {
   height: 30px;
 }
 .is-leaf {
-  text-align: left;
+  text-align: center;
   padding: 0 10px;
 }
+.title {
+  text-align: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #999;
+  margin-bottom: 16px;
+}
+.footer {
+  text-align: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #999;
+  margin-top: -5px;
+  margin-bottom: 10px;
+}
+.content {
+  text-align: center;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
 </style>