Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
Apq
/
Masuit.MyBlogs
mirror of https://gitee.com/masuit/Masuit.MyBlogs.git
1
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

迁移服务器监控面板到vue

懒得勤快 1 tháng trước cách đây
mục cha
d1c177c54e
commit
f6eb023128
3 tập tin đã thay đổi với 619 bổ sung và 634 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 18 16
      src/Masuit.MyBlogs.Core/Views/Dashboard/Counter.cshtml
  2. 271 287
      src/Masuit.MyBlogs.Core/Views/Dashboard/Counter.razor
  3. 330 331
      src/Masuit.MyBlogs.Core/wwwroot/Scripts/global/counter.js

+ 18 - 16
src/Masuit.MyBlogs.Core/Views/Dashboard/Counter.cshtml
Xem Tập Tin 

@@ -1,26 +1,28 @@
 
 @using Masuit.MyBlogs.Core.Views.Dashboard
 
 @using Masuit.MyBlogs.Core.Views.Dashboard
 
 @{
 
 @{
 
-    Layout = null;
 
+  Layout = null;
 
 }
 
 }
 
-
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-
 
 <html>
 
 <html>
 
 <head>
 
 <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>
 
 </head>
 
 <body>
 
 <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>
 
 </body>
 
 </html>
 
 </html>

+ 271 - 287
src/Masuit.MyBlogs.Core/Views/Dashboard/Counter.razor
Xem Tập Tin 

@@ -16,312 +16,296 @@
 
 @inject IRedisClient CacheManager;
 
 @inject IRedisClient CacheManager;
 
 @attribute [StreamRendering]
 
 @attribute [StreamRendering]
 
 @implements IDisposable
 
 @implements IDisposable
 
-
 
 <h3 class="text-center">
 
 <h3 class="text-center">
 
-    服务器系统信息概览
 
+  服务器系统信息概览
 
 </h3>
 
 </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>
 
 </table>
 
-
 
 <h3 class="text-center">
 
 <h3 class="text-center">
 
-    硬件占用百分位统计
 
+  硬件占用百分位统计
 
 </h3>
 
 </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>
 
 </table>
 
 <button class="btn btn-success" @onclick="ClearMemory">整理内存</button>
 
 <button class="btn btn-success" @onclick="ClearMemory">整理内存</button>
 
 <button class="btn btn-success" @onclick="RefreshMemory">刷新GC配置</button>
 
 <button class="btn btn-success" @onclick="RefreshMemory">刷新GC配置</button>
 
 <div>
 
 <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>
 
 </div>
 
 
 
 @code {
 
 @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
Xem Tập Tin 

@@ -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) {
 
 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: [{
 
             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() {
 
 function showSuccess() {
 
-    swal({ type: 'success', html: "操作成功" });
 
+  swal({ type: 'success', html: "操作成功" });
 
 }
 
 }