Browse Source

迁移服务器监控面板到vue

懒得勤快 1 month ago
parent
commit
f6eb023128

+ 18 - 16
src/Masuit.MyBlogs.Core/Views/Dashboard/Counter.cshtml

@@ -1,26 +1,28 @@
 @using Masuit.MyBlogs.Core.Views.Dashboard
 @{
-    Layout = null;
+  Layout = null;
 }
-
 <!DOCTYPE html>
-
 <html>
 <head>
-    <title>服务器性能监控</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" async defer>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css" rel="stylesheet" async defer>
-    <link href="~/Assets/layui/css/layui.min.css" rel="stylesheet" async defer>
+  <title>服务器性能监控</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-    <div class="container-fluid">
-        <component type="typeof(Counter)" render-mode="ServerPrerendered" />
-    </div>
-    <script src="/_framework/blazor.server.js"></script>
-    <script type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/echarts/5.3.0/echarts.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.10/sweetalert2.min.js"></script>
-    <script src="~/Assets/layui/layui.js"></script>
-    <script src="~/scripts/xm-select.js"></script>
-    <script src="~/Scripts/global/counter.js"></script>
+<div class="container-fluid" id="app">
+  <component render-mode="Static" type="typeof(Counter)"/>
+</div>
+<script src="/_framework/blazor.server.js"></script>
+<!-- 引入vxe-table样式 -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/lib/style.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/lib/style.min.css" rel="stylesheet">
+<script src="https://unpkg.com/vue"></script>
+<!-- 引入vxe-table的JS文件 -->
+<script src="https://cdn.jsdelivr.net/npm/xe-utils/dist/xe-utils.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="~/Scripts/global/counter.js"></script>
 </body>
 </html>

+ 271 - 287
src/Masuit.MyBlogs.Core/Views/Dashboard/Counter.razor

@@ -16,312 +16,296 @@
 @inject IRedisClient CacheManager;
 @attribute [StreamRendering]
 @implements IDisposable
-
 <h3 class="text-center">
-    服务器系统信息概览
+  服务器系统信息概览
 </h3>
-<table class="table table-inner table-vmiddle table-bordered">
-    <tbody>
-        <tr>
-            <td>网站开机时长</td>
-            <th>@_runningTime</th>
-            <td>服务器开机时长</td>
-            <th>@_bootTime</th>
-            <td>操作系统</td>
-            <th>@Environment.OSVersion.VersionString</th>
-        </tr>
-        <tr>
-            <td>CPU型号</td>
-            <th>@_cpu.Type</th>
-            <td>CPU基础频率</td>
-            <th>@_cpu.CurrentClockSpeed MHz</th>
-            <td>CPU睿频</td>
-            <th>@_cpu.MaxClockSpeed MHz</th>
-        </tr>
-        <tr>
-            <td>CPU个数</td>
-            <th>@SystemInfo.GetCpuInfo().Count 插槽</th>
-            <td>CPU核心数</td>
-            <th>@_cpu.NumberOfCores 核心</th>
-            <td>CPU线程数</td>
-            <th>@_cpu.NumberOfLogicalProcessors 线程</th>
-        </tr>
-        <tr>
-            <td>物理总内存</td>
-            <th>@((_memory.PhysicalMemory / 1048576).ToDecimal(2)) MB(@((_memory.PhysicalMemory / 1073741824).ToDecimal(2)) GB)</th>
-            <td>物理内存已使用</td>
-            <th>@((_memory.PhysicalMemory * _memory.MemoryUsage / 104857600).ToDecimal(2)) MB(@((_memory.PhysicalMemory * _memory.MemoryUsage / 107374182400).ToDecimal(2)) GB)</th>
-            <td>物理内存剩余</td>
-            <th>@((_memory.PhysicalMemory * (100 - _memory.MemoryUsage) / 104857600).ToDecimal(2)) MB(@((_memory.PhysicalMemory * (100 - _memory.MemoryUsage) / 107374182400).ToDecimal(2)) GB)</th>
-        </tr>
-        <tr>
-            <td>虚拟内存总数</td>
-            <th>@((_memory.TotalPageFile / 1048576).ToDecimal(2)) MB</th>
-            <td>虚拟内存已使用</td>
-            <th>@(((_memory.TotalPageFile - _memory.AvailablePageFile) / 1048576).ToDecimal(2)) MB</th>
-            <td>虚拟内存可用</td>
-            <th>@((_memory.AvailablePageFile / 1048576).ToDecimal(2)) MB</th>
-        </tr>
-        <tr>
-            <td>磁盘总空间</td>
-            <th>@_driveInfos.Select(kv => kv.Name + " " + (kv.TotalSize * 1.0 / 1073741824).ToDecimal(2) + "GB").Join(" | ")</th>
-            <td>磁盘剩余空间</td>
-            <th>@_driveInfos.Select(kv => kv.Name + " " + (kv.TotalFreeSpace * 1.0 / 1073741824).ToDecimal(2) + "GB").Join(" | ")</th>
-            <td>磁盘可用率</td>
-            <th>@_driveInfos.Select(kv => kv.Name + " " + (kv.AvailableFreeSpace * 1m / kv.TotalSize).ToString("P")).Join(" | ")</th>
-        </tr>
-        <tr>
-            <td>内存占用</td>
-            <th>GC Heap:@(GC.GetTotalMemory(false) / 1048576)MB,工作集:@((SystemInfo.CurrentProcessMemory / 1048576).ToString("N"))MB</th>
-            <td>线程数</td>
-            <th>@_process.Threads.Count</th>
-            <td>句柄数</td>
-            <th>@_process.HandleCount</th>
-        </tr>
-        <tr>
-            <td>整机进程数</td>
-            <th>@_processes.Length</th>
-            <td>整机线程数</td>
-            <th>@_processes.Sum(p => p.Threads.Count)</th>
-            <td>整机句柄数</td>
-            <th>@_processes.Sum(p => p.HandleCount)</th>
-        </tr>
-        <tr>
-            <td>Redis版本</td>
-            <th>@CacheManager.Info("server").Split("\r\n").Select(s => s.Split(':')).FirstOrDefault(s => s[0] == "redis_version")![1]</th>
-            <td>Redis内存使用</td>
-            <th>@_cacheMemoryUsed.ToString("F")MB</th>
-            <td>Redis缓存命中率</td>
-            <th>@_cacheHits.ToString("P")</th>
-        </tr>
-        <tr>
-            <td>Redis执行命令数</td>
-            <th>@_redisStats["total_commands_processed"]</th>
-            <td>网站CPU使用率</td>
-            <th>@(GetCurrentPerformanceCounter().ProcessCpuLoad.ToDecimal(2))%</th>
-            <td>网站内存使用</td>
-            <th>@(GetCurrentPerformanceCounter().ProcessMemoryUsage.ToDecimal(2)) MB</th>
-        </tr>
-        <tr>
-            <td>MAC地址</td>
-            <th>@_macs.Join(" , ")</th>
-            <td>IP地址</td>
-            <th>@_ips.Join(" , ")</th>
-            <td>在线人数</td>
-            <th>@CacheManager.SCard("GlobalOnline") 人</th>
-        </tr>
-    </tbody>
+<table class="table table-bordered table-inner table-vmiddle">
+  <tbody>
+  <tr>
+    <td>网站开机时长</td>
+    <th>@_runningTime</th>
+    <td>服务器开机时长</td>
+    <th>@_bootTime</th>
+    <td>操作系统</td>
+    <th>@Environment.OSVersion.VersionString</th>
+  </tr>
+  <tr>
+    <td>CPU型号</td>
+    <th>@_cpu.Type</th>
+    <td>CPU基础频率</td>
+    <th>@_cpu.CurrentClockSpeed MHz</th>
+    <td>CPU睿频</td>
+    <th>@_cpu.MaxClockSpeed MHz</th>
+  </tr>
+  <tr>
+    <td>CPU个数</td>
+    <th>@SystemInfo.GetCpuInfo().Count 插槽</th>
+    <td>CPU核心数</td>
+    <th>@_cpu.NumberOfCores 核心</th>
+    <td>CPU线程数</td>
+    <th>@_cpu.NumberOfLogicalProcessors 线程</th>
+  </tr>
+  <tr>
+    <td>物理总内存</td>
+    <th>@((_memory.PhysicalMemory / 1048576).ToDecimal(2)) MB(@((_memory.PhysicalMemory / 1073741824).ToDecimal(2)) GB)</th>
+    <td>物理内存已使用</td>
+    <th>@((_memory.PhysicalMemory * _memory.MemoryUsage / 104857600).ToDecimal(2)) MB(@((_memory.PhysicalMemory * _memory.MemoryUsage / 107374182400).ToDecimal(2)) GB)</th>
+    <td>物理内存剩余</td>
+    <th>@((_memory.PhysicalMemory * (100 - _memory.MemoryUsage) / 104857600).ToDecimal(2)) MB(@((_memory.PhysicalMemory * (100 - _memory.MemoryUsage) / 107374182400).ToDecimal(2)) GB)</th>
+  </tr>
+  <tr>
+    <td>虚拟内存总数</td>
+    <th>@((_memory.TotalPageFile / 1048576).ToDecimal(2)) MB</th>
+    <td>虚拟内存已使用</td>
+    <th>@(((_memory.TotalPageFile - _memory.AvailablePageFile) / 1048576).ToDecimal(2)) MB</th>
+    <td>虚拟内存可用</td>
+    <th>@((_memory.AvailablePageFile / 1048576).ToDecimal(2)) MB</th>
+  </tr>
+  <tr>
+    <td>磁盘总空间</td>
+    <th>@_driveInfos.Select(kv => kv.Name + " " + (kv.TotalSize * 1.0 / 1073741824).ToDecimal(2) + "GB").Join(" | ")</th>
+    <td>磁盘剩余空间</td>
+    <th>@_driveInfos.Select(kv => kv.Name + " " + (kv.TotalFreeSpace * 1.0 / 1073741824).ToDecimal(2) + "GB").Join(" | ")</th>
+    <td>磁盘可用率</td>
+    <th>@_driveInfos.Select(kv => kv.Name + " " + (kv.AvailableFreeSpace * 1m / kv.TotalSize).ToString("P")).Join(" | ")</th>
+  </tr>
+  <tr>
+    <td>内存占用</td>
+    <th>GC Heap:@(GC.GetTotalMemory(false) / 1048576)MB,工作集:@((SystemInfo.CurrentProcessMemory / 1048576).ToString("N"))MB</th>
+    <td>线程数</td>
+    <th>@_process.Threads.Count</th>
+    <td>句柄数</td>
+    <th>@_process.HandleCount</th>
+  </tr>
+  <tr>
+    <td>整机进程数</td>
+    <th>@_processes.Length</th>
+    <td>整机线程数</td>
+    <th>@_processes.Sum(p => p.Threads.Count)</th>
+    <td>整机句柄数</td>
+    <th>@_processes.Sum(p => p.HandleCount)</th>
+  </tr>
+  <tr>
+    <td>Redis版本</td>
+    <th>@CacheManager.Info("server").Split("\r\n").Select(s => s.Split(':')).FirstOrDefault(s => s[0] == "redis_version")![1]</th>
+    <td>Redis内存使用</td>
+    <th>@_cacheMemoryUsed.ToString("F")MB</th>
+    <td>Redis缓存命中率</td>
+    <th>@_cacheHits.ToString("P")</th>
+  </tr>
+  <tr>
+    <td>Redis执行命令数</td>
+    <th>@_redisStats["total_commands_processed"]</th>
+    <td>网站CPU使用率</td>
+    <th>@(GetCurrentPerformanceCounter().ProcessCpuLoad.ToDecimal(2))%</th>
+    <td>网站内存使用</td>
+    <th>@(GetCurrentPerformanceCounter().ProcessMemoryUsage.ToDecimal(2)) MB</th>
+  </tr>
+  <tr>
+    <td>MAC地址</td>
+    <th>@_macs.Join(" , ")</th>
+    <td>IP地址</td>
+    <th>@_ips.Join(" , ")</th>
+    <td>在线人数</td>
+    <th>@CacheManager.SCard("GlobalOnline") 人</th>
+  </tr>
+  </tbody>
 </table>
-
 <h3 class="text-center">
-    硬件占用百分位统计
+  硬件占用百分位统计
 </h3>
-<table class="table table-inner table-vmiddle table-bordered">
-    <thead>
-        <tr>
-            <th></th>
-            <th>第 50 个百分位</th>
-            <th>第 75 个百分位</th>
-            <th>第 90 个百分位</th>
-            <th>第 99 个百分位</th>
-            <th>第 99.9 个百分位</th>
-            <th>均值</th>
-            <th>标准差</th>
-        </tr>
-    </thead>
-    <tbody>
-        @foreach (var (key, value) in GetCounterPercent())
-        {
-            <tr>
-                <th>@key</th>
-                <td>@value.p50</td>
-                <td>@value.p75</td>
-                <td>@value.p90</td>
-                <td>@value.p99</td>
-                <td>@value.p999</td>
-                <td>@value.average</td>
-                <td>@value.stdev</td>
-            </tr>
-        }
-    </tbody>
+<table class="table table-bordered table-inner table-vmiddle">
+  <thead>
+  <tr>
+    <th></th>
+    <th>第 50 个百分位</th>
+    <th>第 75 个百分位</th>
+    <th>第 90 个百分位</th>
+    <th>第 99 个百分位</th>
+    <th>第 99.9 个百分位</th>
+    <th>均值</th>
+    <th>标准差</th>
+  </tr>
+  </thead>
+  <tbody>
+  @foreach (var (key, value) in GetCounterPercent()) {
+    <tr>
+      <th>@key</th>
+      <td>@value.p50</td>
+      <td>@value.p75</td>
+      <td>@value.p90</td>
+      <td>@value.p99</td>
+      <td>@value.p999</td>
+      <td>@value.average</td>
+      <td>@value.stdev</td>
+    </tr>
+  }
+  </tbody>
 </table>
 <button class="btn btn-success" @onclick="ClearMemory">整理内存</button>
 <button class="btn btn-success" @onclick="RefreshMemory">刷新GC配置</button>
 <div>
-    <div class="page-header">
-        <h3 class="text-center">性能实时监控</h3>
-    </div>
-    <div class="row">
-        <div id="servers" style="width: 200px"></div>
-    </div>
-    <div class="row">
-        <div id="container" class="col-md-3" style="height: 400px;"></div>
-        <div id="container-cpu" class="col-md-5" style="height: 400px;"></div>
-        <div id="container-io" class="col-md-4" style="height: 400px;"></div>
-    </div>
+  <div class="page-header">
+    <h3 class="text-center">性能实时监控</h3>
+  </div>
+  <div class="row">
+    <vxe-toolbar>
+      <template #buttons>
+        <span>选择服务器:</span>
+        <vxe-select v-model="server">
+          <vxe-option :key="ip" :label="ip" :value="ip" v-for="ip in servers"></vxe-option>
+        </vxe-select>
+      </template>
+    </vxe-toolbar>
+  </div>
+  <div class="row">
+    <div class="col-md-3" id="container" style="height: 400px;"></div>
+    <div class="col-md-5" id="container-cpu" style="height: 400px;"></div>
+    <div class="col-md-4" id="container-io" style="height: 400px;"></div>
+  </div>
 </div>
 
 @code {
-    private readonly Process _process=Process.GetCurrentProcess();
-    private readonly Process[] _processes = Process.GetProcesses();
-    private string _bootTime;
-    private readonly string _ip=SystemInfo.GetLocalUsedIP(AddressFamily.InterNetwork).ToString();
-    private string _runningTime;
-    private readonly CpuInfo _cpu = SystemInfo.GetCpuInfo()[0];
-    private readonly RamInfo _memory = SystemInfo.GetRamInfo();
-    private readonly List<PhysicalAddress> _macs = SystemInfo.GetMacAddress().ToList();
-    private readonly IList<string> _ips = SystemInfo.GetLocalIPs().OrderBy(u => u.Address.AddressFamily != AddressFamily.InterNetwork).Select(a => a.Address.ToString()).ToList();
-    private readonly DriveInfo[] _driveInfos = DriveInfo.GetDrives().Where(d => d.IsReady).ToArray();
-    private decimal _cacheHits;
-    private decimal _cacheMemoryUsed;
-    private IDictionary<string,decimal> _redisStats;
+  private readonly Process _process = Process.GetCurrentProcess();
+  private readonly Process[] _processes = Process.GetProcesses();
+  private string _bootTime;
+  private readonly string _ip = SystemInfo.GetLocalUsedIP(AddressFamily.InterNetwork).ToString();
+  private string _runningTime;
+  private readonly CpuInfo _cpu = SystemInfo.GetCpuInfo()[0];
+  private readonly RamInfo _memory = SystemInfo.GetRamInfo();
+  private readonly List<PhysicalAddress> _macs = SystemInfo.GetMacAddress().ToList();
+  private readonly IList<string> _ips = SystemInfo.GetLocalIPs().OrderBy(u => u.Address.AddressFamily != AddressFamily.InterNetwork).Select(a => a.Address.ToString()).ToList();
+  private readonly DriveInfo[] _driveInfos = DriveInfo.GetDrives().Where(d => d.IsReady).ToArray();
+  private decimal _cacheHits;
+  private decimal _cacheMemoryUsed;
+  private IDictionary<string, decimal> _redisStats;
 
-    protected override void OnInitialized()
-    {
-        _redisStats = CacheManager.Info("stats").Split("\r\n", StringSplitOptions.RemoveEmptyEntries).Select(s => s.Split(':')).Where(s => s.Length == 2).ToFrozenDictionary(s => s[0], s => s[1].ToDecimal());
-        _cacheHits = _redisStats["keyspace_hits"] / (_redisStats["keyspace_hits"] + _redisStats["keyspace_misses"]);
-        _cacheMemoryUsed = CacheManager.Info("memory").Split("\r\n", StringSplitOptions.RemoveEmptyEntries).Select(s => s.Split(':')).FirstOrDefault(s => s[0] == "used_memory")![1].ToDecimal()/1048576;
-        var boot = DateTime.Now - SystemInfo.BootTime();
-        var span = DateTime.Now - IPerfCounter.StartTime;
-        _runningTime = $"{span.Days}天{span.Hours}小时{span.Minutes}分钟";
-        _bootTime = $"{boot.Days}天{boot.Hours}小时{boot.Minutes}分钟";
-    }
+  protected override void OnInitialized() {
+    _redisStats = CacheManager.Info("stats").Split("\r\n", StringSplitOptions.RemoveEmptyEntries).Select(s => s.Split(':')).Where(s => s.Length == 2).ToFrozenDictionary(s => s[0], s => s[1].ToDecimal());
+    _cacheHits = _redisStats["keyspace_hits"] / (_redisStats["keyspace_hits"] + _redisStats["keyspace_misses"]);
+    _cacheMemoryUsed = CacheManager.Info("memory").Split("\r\n", StringSplitOptions.RemoveEmptyEntries).Select(s => s.Split(':')).FirstOrDefault(s => s[0] == "used_memory")![1].ToDecimal() / 1048576;
+    var boot = DateTime.Now - SystemInfo.BootTime();
+    var span = DateTime.Now - IPerfCounter.StartTime;
+    _runningTime = $"{span.Days}天{span.Hours}小时{span.Minutes}分钟";
+    _bootTime = $"{boot.Days}天{boot.Hours}小时{boot.Minutes}分钟";
+  }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await JavaScript.InvokeVoidAsync("getServers");
-        await JavaScript.InvokeVoidAsync("showLine",_ip);
+  [JSInvokable]
+  public static Common.PerformanceCounter GetCurrentPerformanceCounter() {
+    try {
+      return IPerfCounter.List.LastOrDefault() ?? IPerfCounter.GetCurrentPerformanceCounter();
     }
-
-    [JSInvokable]
-    public static Common.PerformanceCounter GetCurrentPerformanceCounter()
-    {
-        try {
-            return IPerfCounter.List.LastOrDefault()??IPerfCounter.GetCurrentPerformanceCounter();
-        }
-        catch (Exception e) {
-            LogManager.Error(e.Demystify());
-            return new Common.PerformanceCounter();
-        }
+    catch (Exception e) {
+      LogManager.Error(e.Demystify());
+      return new Common.PerformanceCounter();
     }
+  }
 
-    [JSInvokable]
-    public static long GetTotalMemory()
-    {
-        return SystemInfo.PhysicalMemory/1048576;
-    }
+  [JSInvokable]
+  public static long GetTotalMemory() {
+    return SystemInfo.PhysicalMemory / 1048576;
+  }
 
-    public void ClearMemory()
-    {
-        Windows.ClearMemorySilent();
-        JavaScript.InvokeVoidAsync("showSuccess");
-    }
+  public void ClearMemory() {
+    Windows.ClearMemorySilent();
+    JavaScript.InvokeVoidAsync("showSuccess");
+  }
 
-    public void RefreshMemory()
-    {
-        GC.RefreshMemoryLimit();
-        JavaScript.InvokeVoidAsync("showSuccess");
-    }
+  public void RefreshMemory() {
+    GC.RefreshMemoryLimit();
+    JavaScript.InvokeVoidAsync("showSuccess");
+  }
 
-    public Dictionary<string, dynamic> GetCounterPercent()
-    {
-        var counters = PerfCounter.CreateDataSource().Where(c => c.ServerIP==_ip).OrderByRandom().Take(15000).ToList();
-        var cpuLoads = counters.Select(c => c.CpuLoad).ToList();
-        var processCpuLoads = counters.Select(c => c.ProcessCpuLoad).ToList();
-        var memUse = counters.Select(c => c.MemoryUsage).ToList();
-        var processMemUse = counters.Select(c => c.ProcessMemoryUsage).ToList();
-        var reads = counters.Select(c => c.DiskRead).ToList();
-        var writes = counters.Select(c => c.DiskWrite).ToList();
-        var downloads = counters.Select(c => c.Download).ToList();
-        var uploads = counters.Select(c => c.Upload).ToList();
-        return new Dictionary<string, dynamic> {
-            ["CPU使用率(%)"] = new
-            {
-                p50 = cpuLoads.Percentile(50).ToDecimal(2),
-                p75 = cpuLoads.Percentile(75).ToDecimal(2),
-                p90 = cpuLoads.Percentile(90).ToDecimal(2),
-                p99 = cpuLoads.Percentile(99).ToDecimal(2),
-                p999 = cpuLoads.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.CpuLoad).ToDecimal(2),
-                stdev = cpuLoads.StandardDeviation().ToDecimal(2),
-            },
-            ["内存使用量(MB)"] = new
-            {
-                p50 = memUse.Percentile(50).ToDecimal(2),
-                p75 = memUse.Percentile(75).ToDecimal(2),
-                p90 = memUse.Percentile(90).ToDecimal(2),
-                p99 = memUse.Percentile(99).ToDecimal(2),
-                p999 = memUse.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.MemoryUsage).ToDecimal(2),
-                stdev = memUse.StandardDeviation().ToDecimal(2),
-            },
-            ["网站CPU使用率(%)"] = new
-            {
-                p50 = processCpuLoads.Percentile(50).ToDecimal(2),
-                p75 = processCpuLoads.Percentile(75).ToDecimal(2),
-                p90 = processCpuLoads.Percentile(90).ToDecimal(2),
-                p99 = processCpuLoads.Percentile(99).ToDecimal(2),
-                p999 = processCpuLoads.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.ProcessCpuLoad).ToDecimal(2),
-                stdev = processCpuLoads.StandardDeviation().ToDecimal(2),
-            },
-            ["网站内存使用量(MB)"] = new
-            {
-                p50 = processMemUse.Percentile(50).ToDecimal(2),
-                p75 = processMemUse.Percentile(75).ToDecimal(2),
-                p90 = processMemUse.Percentile(90).ToDecimal(2),
-                p99 = processMemUse.Percentile(99).ToDecimal(2),
-                p999 = processMemUse.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.ProcessMemoryUsage).ToDecimal(2),
-                stdev = processMemUse.StandardDeviation().ToDecimal(2),
-            },
-            ["磁盘读(KBps)"] = new
-            {
-                p50 = reads.Percentile(50).ToDecimal(2),
-                p75 = reads.Percentile(75).ToDecimal(2),
-                p90 = reads.Percentile(90).ToDecimal(2),
-                p99 = reads.Percentile(99).ToDecimal(2),
-                p999 = reads.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.DiskRead).ToDecimal(2),
-                stdev = reads.StandardDeviation().ToDecimal(2),
-            },
-            ["磁盘写(KBps)"] = new
-            {
-                p50 = writes.Percentile(50).ToDecimal(2),
-                p75 = writes.Percentile(75).ToDecimal(2),
-                p90 = writes.Percentile(90).ToDecimal(2),
-                p99 = writes.Percentile(99).ToDecimal(2),
-                p999 = writes.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.DiskWrite).ToDecimal(2),
-                stdev = writes.StandardDeviation().ToDecimal(2)
-            },
-            ["网络下载(KBps)"] = new
-            {
-                p50 = downloads.Percentile(50).ToDecimal(2),
-                p75 = downloads.Percentile(75).ToDecimal(2),
-                p90 = downloads.Percentile(90).ToDecimal(2),
-                p99 = downloads.Percentile(99).ToDecimal(2),
-                p999 = downloads.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.Download).ToDecimal(2),
-                stdev = downloads.StandardDeviation().ToDecimal(2)
-            },
-            ["网络上行(KBps)"] = new
-            {
-                p50 = uploads.Percentile(50).ToDecimal(2),
-                p75 = uploads.Percentile(75).ToDecimal(2),
-                p90 = uploads.Percentile(90).ToDecimal(2),
-                p99 = uploads.Percentile(99).ToDecimal(2),
-                p999 = uploads.Percentile(99.9).ToDecimal(2),
-                average = counters.Average(c => c.Upload).ToDecimal(2),
-                stdev = uploads.StandardDeviation().ToDecimal(2)
-            }
-        };
-    }
+  public Dictionary<string, dynamic> GetCounterPercent() {
+    var counters = PerfCounter.CreateDataSource().Where(c => c.ServerIP == _ip).OrderByRandom().Take(15000).ToList();
+    var cpuLoads = counters.Select(c => c.CpuLoad).ToList();
+    var processCpuLoads = counters.Select(c => c.ProcessCpuLoad).ToList();
+    var memUse = counters.Select(c => c.MemoryUsage).ToList();
+    var processMemUse = counters.Select(c => c.ProcessMemoryUsage).ToList();
+    var reads = counters.Select(c => c.DiskRead).ToList();
+    var writes = counters.Select(c => c.DiskWrite).ToList();
+    var downloads = counters.Select(c => c.Download).ToList();
+    var uploads = counters.Select(c => c.Upload).ToList();
+    return new Dictionary<string, dynamic> {
+      ["CPU使用率(%)"] = new {
+        p50 = cpuLoads.Percentile(50).ToDecimal(2),
+        p75 = cpuLoads.Percentile(75).ToDecimal(2),
+        p90 = cpuLoads.Percentile(90).ToDecimal(2),
+        p99 = cpuLoads.Percentile(99).ToDecimal(2),
+        p999 = cpuLoads.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.CpuLoad).ToDecimal(2),
+        stdev = cpuLoads.StandardDeviation().ToDecimal(2),
+      },
+      ["内存使用量(MB)"] = new {
+        p50 = memUse.Percentile(50).ToDecimal(2),
+        p75 = memUse.Percentile(75).ToDecimal(2),
+        p90 = memUse.Percentile(90).ToDecimal(2),
+        p99 = memUse.Percentile(99).ToDecimal(2),
+        p999 = memUse.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.MemoryUsage).ToDecimal(2),
+        stdev = memUse.StandardDeviation().ToDecimal(2),
+      },
+      ["网站CPU使用率(%)"] = new {
+        p50 = processCpuLoads.Percentile(50).ToDecimal(2),
+        p75 = processCpuLoads.Percentile(75).ToDecimal(2),
+        p90 = processCpuLoads.Percentile(90).ToDecimal(2),
+        p99 = processCpuLoads.Percentile(99).ToDecimal(2),
+        p999 = processCpuLoads.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.ProcessCpuLoad).ToDecimal(2),
+        stdev = processCpuLoads.StandardDeviation().ToDecimal(2),
+      },
+      ["网站内存使用量(MB)"] = new {
+        p50 = processMemUse.Percentile(50).ToDecimal(2),
+        p75 = processMemUse.Percentile(75).ToDecimal(2),
+        p90 = processMemUse.Percentile(90).ToDecimal(2),
+        p99 = processMemUse.Percentile(99).ToDecimal(2),
+        p999 = processMemUse.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.ProcessMemoryUsage).ToDecimal(2),
+        stdev = processMemUse.StandardDeviation().ToDecimal(2),
+      },
+      ["磁盘读(KBps)"] = new {
+        p50 = reads.Percentile(50).ToDecimal(2),
+        p75 = reads.Percentile(75).ToDecimal(2),
+        p90 = reads.Percentile(90).ToDecimal(2),
+        p99 = reads.Percentile(99).ToDecimal(2),
+        p999 = reads.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.DiskRead).ToDecimal(2),
+        stdev = reads.StandardDeviation().ToDecimal(2),
+      },
+      ["磁盘写(KBps)"] = new {
+        p50 = writes.Percentile(50).ToDecimal(2),
+        p75 = writes.Percentile(75).ToDecimal(2),
+        p90 = writes.Percentile(90).ToDecimal(2),
+        p99 = writes.Percentile(99).ToDecimal(2),
+        p999 = writes.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.DiskWrite).ToDecimal(2),
+        stdev = writes.StandardDeviation().ToDecimal(2)
+      },
+      ["网络下载(KBps)"] = new {
+        p50 = downloads.Percentile(50).ToDecimal(2),
+        p75 = downloads.Percentile(75).ToDecimal(2),
+        p90 = downloads.Percentile(90).ToDecimal(2),
+        p99 = downloads.Percentile(99).ToDecimal(2),
+        p999 = downloads.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.Download).ToDecimal(2),
+        stdev = downloads.StandardDeviation().ToDecimal(2)
+      },
+      ["网络上行(KBps)"] = new {
+        p50 = uploads.Percentile(50).ToDecimal(2),
+        p75 = uploads.Percentile(75).ToDecimal(2),
+        p90 = uploads.Percentile(90).ToDecimal(2),
+        p99 = uploads.Percentile(99).ToDecimal(2),
+        p999 = uploads.Percentile(99.9).ToDecimal(2),
+        average = counters.Average(c => c.Upload).ToDecimal(2),
+        stdev = uploads.StandardDeviation().ToDecimal(2)
+      }
+    };
+  }
+
+  /// <summary>Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources.</summary>
+  public void Dispose() {
+    _process.Dispose();
+    _processes.ForEach(p => p.Dispose());
+  }
 
-    /// <summary>Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources.</summary>
-    public void Dispose()
-    {
-        _process.Dispose();
-        _processes.ForEach(p => p.Dispose());
-    }
 }

+ 330 - 331
src/Masuit.MyBlogs.Core/wwwroot/Scripts/global/counter.js

@@ -1,354 +1,353 @@
-function showSpeed() {
-    var myChart = echarts.init(document.getElementById("container"));
-    myChart.setOption({
-        series: [{
-            type: 'gauge',
-            anchor: {
-                show: true,
-                showAbove: true,
-                size: 18,
-                itemStyle: {
-                    color: '#FAC858'
-                }
-            },
-            pointer: {
-                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-                width: 8,
-                length: '80%',
-                offsetCenter: [0, '8%']
-            },
-
-            progress: {
-                show: true,
-                overlap: true,
-                roundCap: true
-            },
-            axisLine: {
-                roundCap: true
-            },
-            data: [{
-                value: 0,
-                name: 'CPU',
-                title: {
-                    offsetCenter: ['-25%', '80%']
-                },
-                detail: {
-                    offsetCenter: ['-25%', '95%']
-                }
-            },
-            {
-                value: 0,
-                name: '内存',
-                title: {
-                    offsetCenter: ['25%', '80%']
-                },
-                detail: {
-                    offsetCenter: ['25%', '95%']
-                }
-            }, {
-                value: 0,
-                name: 'CPU(网站)',
-                title: {
-                    offsetCenter: ['-75%', '80%']
-                },
-                detail: {
-                    offsetCenter: ['-75%', '95%']
-                }
-            },
-            {
-                value: 0,
-                name: '内存(网站)',
-                title: {
-                    offsetCenter: ['75%', '80%']
-                },
-                detail: {
-                    offsetCenter: ['75%', '95%']
-                }
-            }],
-            title: {
-                fontSize: 14
-            },
-            detail: {
-                width: 40,
-                height: 14,
-                fontSize: 14,
-                color: '#fff',
-                backgroundColor: 'auto',
-                borderRadius: 3,
-                formatter: '{value}%'
-            }
-        }]
-    });
-    return myChart;
-}
+const { createApp, ref, onMounted, watch, computed } = Vue;
+createApp({
+  setup() {
+    const servers = ref([]);
+    const server = ref('');
+    return {
+      servers,
+      server
+    };
+  },
+  methods: {
+    async getServers() {
+      this.servers = await window.fetch("/system/GetServers", {
+        credentials: 'include',
+        method: 'GET',
+        mode: 'cors'
+      }).then(function (response) {
+        return response.json();
+      });
+      this.server = this.servers.length > 0 ? this.servers[0] : '';
+    }
+  },
+  created() {
+    this.getServers();
+    showLine(this.server);
+  },
+  watch: {
+    server(newVal, oldVal) {
+      showLine(this.server);
+    }
+  },
+}).use(VxeUI).use(VXETable).mount('#app');
+function showSpeed() {
+  var myChart = echarts.init(document.getElementById("container"));
+  myChart.setOption({
+    series: [{
+      type: 'gauge',
+      anchor: {
+        show: true,
+        showAbove: true,
+        size: 18,
+        itemStyle: {
+          color: '#FAC858'
+        }
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 8,
+        length: '80%',
+        offsetCenter: [0, '8%']
+      },
 
-function showIO(data) {
-    var myChart = echarts.init(document.getElementById("container-io"));
-    myChart.setOption({
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                animation: false
-            }
+      progress: {
+        show: true,
+        overlap: true,
+        roundCap: true
+      },
+      axisLine: {
+        roundCap: true
+      },
+      data: [{
+        value: 0,
+        name: 'CPU',
+        title: {
+          offsetCenter: ['-25%', '80%']
         },
-        dataZoom: [{
-            type: 'inside',
-            start: 70,
-            end: 100,
-            minValueSpan: 100
-        }, {
-            start: 70,
-            end: 100,
-            minValueSpan: 100
-        }],
-        xAxis: {
-            type: 'time',
-            interval: 20000,
-            axisLabel: {
-                formatter: function (value) {
-                    var dt = new Date(value);
-                    return dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()
-                }
-            },
-            splitLine: {
-                show: false
-            }
+        detail: {
+          offsetCenter: ['-25%', '95%']
+        }
+      },
+      {
+        value: 0,
+        name: '内存',
+        title: {
+          offsetCenter: ['25%', '80%']
         },
-        yAxis: [{
-            name: '磁盘',
-            type: 'value',
-            splitLine: {
-                show: false
-            }
+        detail: {
+          offsetCenter: ['25%', '95%']
+        }
+      }, {
+        value: 0,
+        name: 'CPU(网站)',
+        title: {
+          offsetCenter: ['-75%', '80%']
         },
-        {
-            name: '网络',
-            type: 'value',
-            splitLine: {
-                show: false
-            }
+        detail: {
+          offsetCenter: ['-75%', '95%']
         }
-        ],
-        legend: {
-            data: ['磁盘读(KBps)', '磁盘写(KBps)', "网络上行(KBps)", "网络下行(KBps)"]
+      },
+      {
+        value: 0,
+        name: '内存(网站)',
+        title: {
+          offsetCenter: ['75%', '80%']
         },
-        series: [{
-            name: '磁盘读(KBps)',
-            type: 'line',
-            showSymbol: false,
-            hoverAnimation: false,
-            data: data.read
-        }, {
-            name: '磁盘写(KBps)',
-            type: 'line',
-            showSymbol: false,
-            hoverAnimation: false,
-            data: data.write
-        }, {
-            name: '网络上行(KBps)',
-            yAxisIndex: 1,
-            type: 'line',
-            showSymbol: false,
-            hoverAnimation: false,
-            data: data.up
-        }, {
-            name: '网络下行(KBps)',
-            yAxisIndex: 1,
-            type: 'line',
-            showSymbol: false,
-            hoverAnimation: false,
-            data: data.down
-        }]
-    });
-    return myChart;
+        detail: {
+          offsetCenter: ['75%', '95%']
+        }
+      }],
+      title: {
+        fontSize: 14
+      },
+      detail: {
+        width: 40,
+        height: 14,
+        fontSize: 14,
+        color: '#fff',
+        backgroundColor: 'auto',
+        borderRadius: 3,
+        formatter: '{value}%'
+      }
+    }]
+  });
+  return myChart;
 }
 
-function getServers() {
-    window.fetch("/system/GetServers", {
-        credentials: 'include',
-        method: 'GET',
-        mode: 'cors'
-    }).then(function (response) {
-        return response.json();
-    }).then(function (data) {
-        var arr = [];
-        for (var i = 0; i < data.length; i++) {
-            arr.push({ name: data[i], value: data[i] });
+function showIO(data) {
+  var myChart = echarts.init(document.getElementById("container-io"));
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        animation: false
+      }
+    },
+    dataZoom: [{
+      type: 'inside',
+      start: 70,
+      end: 100,
+      minValueSpan: 100
+    }, {
+      start: 70,
+      end: 100,
+      minValueSpan: 100
+    }],
+    xAxis: {
+      type: 'time',
+      interval: 20000,
+      axisLabel: {
+        formatter: function (value) {
+          var dt = new Date(value);
+          return dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()
         }
-
-        xmSelect.render({
-            el: '#servers',
-            tips: '请选择服务器',
-            model: {
-                icon: 'hidden',
-                label: { type: 'text' }
-            },
-            radio: true,
-            clickClose: true,
-            autoRow: true, //选项过多,自动换行
-            data: arr,
-            on: function (data) {
-                if (data.arr.length > 0) {
-                    showLine(data.arr[0].value);
-                }
-            }
-        });
-    });
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    yAxis: [{
+      name: '磁盘',
+      type: 'value',
+      splitLine: {
+        show: false
+      }
+    },
+    {
+      name: '网络',
+      type: 'value',
+      splitLine: {
+        show: false
+      }
+    }
+    ],
+    legend: {
+      data: ['磁盘读(KBps)', '磁盘写(KBps)', "网络上行(KBps)", "网络下行(KBps)"]
+    },
+    series: [{
+      name: '磁盘读(KBps)',
+      type: 'line',
+      showSymbol: false,
+      hoverAnimation: false,
+      data: data.read
+    }, {
+      name: '磁盘写(KBps)',
+      type: 'line',
+      showSymbol: false,
+      hoverAnimation: false,
+      data: data.write
+    }, {
+      name: '网络上行(KBps)',
+      yAxisIndex: 1,
+      type: 'line',
+      showSymbol: false,
+      hoverAnimation: false,
+      data: data.up
+    }, {
+      name: '网络下行(KBps)',
+      yAxisIndex: 1,
+      type: 'line',
+      showSymbol: false,
+      hoverAnimation: false,
+      data: data.down
+    }]
+  });
+  return myChart;
 }
 
 function showLine(ip) {
-    clearInterval(window.counterInterval);
-    window.fetch("/system/GetCounterHistory?ip=" + ip, {
-        credentials: 'include',
-        method: 'GET',
-        mode: 'cors'
-    }).then(function (response) {
-        return response.json();
-    }).then(function (data) {
-        var myChart = echarts.init(document.getElementById("container-cpu"));
-        myChart.setOption({
-            visualMap: [{
-                show: false,
-                type: 'continuous',
-                seriesIndex: 0
-            }],
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    animation: false
-                }
-            },
-            dataZoom: [{
-                type: 'inside',
-                start: 70,
-                end: 100,
-                minValueSpan: 100
+  clearInterval(window.counterInterval);
+  window.fetch("/system/GetCounterHistory?ip=" + ip, {
+    credentials: 'include',
+    method: 'GET',
+    mode: 'cors'
+  }).then(function (response) {
+    return response.json();
+  }).then(function (data) {
+    var myChart = echarts.init(document.getElementById("container-cpu"));
+    myChart.setOption({
+      visualMap: [{
+        show: false,
+        type: 'continuous',
+        seriesIndex: 0
+      }],
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          animation: false
+        }
+      },
+      dataZoom: [{
+        type: 'inside',
+        start: 70,
+        end: 100,
+        minValueSpan: 100
+      }, {
+        start: 70,
+        end: 100,
+        minValueSpan: 100
+      }],
+      xAxis: {
+        type: 'time',
+        interval: 20000,
+        axisLabel: {
+          formatter: function (value) {
+            var dt = new Date(value);
+            return dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()
+          }
+        },
+        splitLine: {
+          show: false
+        }
+      },
+      yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+        splitLine: {
+          show: false
+        },
+        max: 100
+      },
+      legend: {
+        data: ['CPU使用率', '网站CPU使用率', '内存使用率', '网站内存使用率']
+      },
+      series: [{
+        name: 'CPU使用率',
+        type: 'line',
+        showSymbol: false,
+        hoverAnimation: false,
+        data: data.cpu,
+        markPoint: {
+          data: [
+            { type: 'max', name: '最大值' },
+            { type: 'min', name: '最小值' }
+          ]
+        },
+        markLine: {
+          data: [
+            { type: 'average', name: '平均值' }
+          ]
+        }
+      }, {
+        name: '网站CPU使用率',
+        type: 'line',
+        showSymbol: false,
+        hoverAnimation: false,
+        data: data.processCpu
+      }, {
+        name: '内存使用率',
+        type: 'line',
+        showSymbol: false,
+        hoverAnimation: false,
+        data: data.mem,
+        markPoint: {
+          data: [
+            { type: 'max', name: '最大值' },
+            { type: 'min', name: '最小值' }
+          ]
+        },
+        markLine: {
+          data: [
+            { type: 'average', name: '平均值' }
+          ]
+        }
+      }, {
+        name: '网站内存使用率',
+        type: 'line',
+        showSymbol: false,
+        hoverAnimation: false,
+        data: data.processMem
+      }]
+    });
+    var rateChart = showSpeed();
+    var ioChart = showIO(data);
+    DotNet.invokeMethodAsync('Masuit.MyBlogs.Core', 'GetTotalMemory').then(res => {
+      window.counterInterval = setInterval(function () {
+        DotNet.invokeMethodAsync('Masuit.MyBlogs.Core', 'GetCurrentPerformanceCounter').then(item => {
+          data.cpu.push([item.time, item.cpuLoad.toFixed(2)]);
+          data.mem.push([item.time, (item.memoryUsage / res * 100).toFixed(2)]);
+          data.processCpu.push([item.time, item.processCpuLoad.toFixed(2)]);
+          data.processMem.push([item.time, (item.processMemoryUsage / res * 100).toFixed(2)]);
+          data.read.push([item.time, item.diskRead.toFixed(2)]);
+          data.write.push([item.time, item.diskWrite.toFixed(2)]);
+          data.up.push([item.time, item.upload.toFixed(2)]);
+          data.down.push([item.time, item.download.toFixed(2)]);
+          myChart.setOption({
+            series: [{
+              data: data.cpu
+            }, {
+              data: data.processCpu
+            }, {
+              data: data.mem
             }, {
-                start: 70,
-                end: 100,
-                minValueSpan: 100
-            }],
-            xAxis: {
-                type: 'time',
-                interval: 20000,
-                axisLabel: {
-                    formatter: function (value) {
-                        var dt = new Date(value);
-                        return dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()
-                    }
-                },
-                splitLine: {
-                    show: false
-                }
-            },
-            yAxis: {
-                type: 'value',
-                boundaryGap: [0, '100%'],
-                splitLine: {
-                    show: false
-                },
-                max: 100
-            },
-            legend: {
-                data: ['CPU使用率', '网站CPU使用率', '内存使用率', '网站内存使用率']
-            },
+              data: data.processMem
+            }]
+          });
+          ioChart.setOption({
             series: [{
-                name: 'CPU使用率',
-                type: 'line',
-                showSymbol: false,
-                hoverAnimation: false,
-                data: data.cpu,
-                markPoint: {
-                    data: [
-                        { type: 'max', name: '最大值' },
-                        { type: 'min', name: '最小值' }
-                    ]
-                },
-                markLine: {
-                    data: [
-                        { type: 'average', name: '平均值' }
-                    ]
-                }
+              data: data.read
             }, {
-                name: '网站CPU使用率',
-                type: 'line',
-                showSymbol: false,
-                hoverAnimation: false,
-                data: data.processCpu
+              data: data.write
             }, {
-                name: '内存使用率',
-                type: 'line',
-                showSymbol: false,
-                hoverAnimation: false,
-                data: data.mem,
-                markPoint: {
-                    data: [
-                        { type: 'max', name: '最大值' },
-                        { type: 'min', name: '最小值' }
-                    ]
-                },
-                markLine: {
-                    data: [
-                        { type: 'average', name: '平均值' }
-                    ]
-                }
+              data: data.up
             }, {
-                name: '网站内存使用率',
-                type: 'line',
-                showSymbol: false,
-                hoverAnimation: false,
-                data: data.processMem
+              data: data.down
             }]
+          });
+          let option = rateChart.getOption();
+          option.series[0].data[0].value = item.cpuLoad.toFixed(2);
+          option.series[0].data[1].value = (item.memoryUsage / res * 100).toFixed(2);
+          option.series[0].data[2].value = item.processCpuLoad.toFixed(2);
+          option.series[0].data[3].value = (item.processMemoryUsage / res * 100).toFixed(2);
+          rateChart.setOption(option, true);
         });
-        var rateChart = showSpeed();
-        var ioChart = showIO(data);
-        DotNet.invokeMethodAsync('Masuit.MyBlogs.Core', 'GetTotalMemory').then(res => {
-            window.counterInterval = setInterval(function () {
-                DotNet.invokeMethodAsync('Masuit.MyBlogs.Core', 'GetCurrentPerformanceCounter').then(item => {
-                    data.cpu.push([item.time, item.cpuLoad.toFixed(2)]);
-                    data.mem.push([item.time, (item.memoryUsage / res * 100).toFixed(2)]);
-                    data.processCpu.push([item.time, item.processCpuLoad.toFixed(2)]);
-                    data.processMem.push([item.time, (item.processMemoryUsage / res * 100).toFixed(2)]);
-                    data.read.push([item.time, item.diskRead.toFixed(2)]);
-                    data.write.push([item.time, item.diskWrite.toFixed(2)]);
-                    data.up.push([item.time, item.upload.toFixed(2)]);
-                    data.down.push([item.time, item.download.toFixed(2)]);
-                    myChart.setOption({
-                        series: [{
-                            data: data.cpu
-                        }, {
-                            data: data.processCpu
-                        }, {
-                            data: data.mem
-                        }, {
-                            data: data.processMem
-                        }]
-                    });
-                    ioChart.setOption({
-                        series: [{
-                            data: data.read
-                        }, {
-                            data: data.write
-                        }, {
-                            data: data.up
-                        }, {
-                            data: data.down
-                        }]
-                    });
-                    let option = rateChart.getOption();
-                    option.series[0].data[0].value = item.cpuLoad.toFixed(2);
-                    option.series[0].data[1].value = (item.memoryUsage / res * 100).toFixed(2);
-                    option.series[0].data[2].value = item.processCpuLoad.toFixed(2);
-                    option.series[0].data[3].value = (item.processMemoryUsage / res * 100).toFixed(2);
-                    rateChart.setOption(option, true);
-                });
-            }, 2000);
-        })
-    }).catch(function (e) {
-        console.error(e);
-    });
+      }, 2000);
+    })
+  }).catch(function (e) {
+    console.error(e);
+  });
 }
 
 function showSuccess() {
-    swal({ type: 'success', html: "操作成功" });
+  swal({ type: 'success', html: "操作成功" });
 }