
Console 控制台
控制台组件,一般用于后台任务的输出
基本用法
显示后台推送的消息
Demo
Monitor
可清空的控制台
通过设置 OnClear
回调方法对数据集进行清空操作,由于本例与上例使用相同数据源,会导致上例中数据源更新延时
Demo
Monitor
不同颜色的消息
通过设置 ConsoleMessageItem
的 Color
参数进行对颜色的更改
Demo
Monitor
自动滚屏
通过设置 ShowAutoScroll
属性值开启或者关闭自动滚屏功能
Demo
设置 ShowAutoScroll="true"
显示自动滚屏选项
Monitor
通过设置 IsAutoScroll
设置开启自动滚屏
Monitor
Attributes
Loading...
ConsoleMessageItem 属性
Loading...
@page "/consoles"
<h3>Console 控制台</h3>
<h4>控制台组件,一般用于后台任务的输出</h4>
<DemoBlock Title="基本用法" Introduction="显示后台推送的消息" Name="Normal">
<Console Items="@Messages" Height="126" />
</DemoBlock>
<DemoBlock Title="可清空的控制台" Introduction="通过设置 <code>OnClear</code> 回调方法对数据集进行清空操作,由于本例与上例使用相同数据源,会导致上例中数据源更新延时" Name="OnClear">
<Console Items="@Messages" Height="126" OnClear="@OnClear" />
</DemoBlock>
<DemoBlock Title="不同颜色的消息" Introduction="通过设置 <code>ConsoleMessageItem</code> 的 <code>Color</code> 参数进行对颜色的更改" Name="Color">
<Console Items="@ColorMessages" Height="126" />
</DemoBlock>
<DemoBlock Title="自动滚屏" Introduction="通过设置 <code>ShowAutoScroll</code> 属性值开启或者关闭自动滚屏功能" Name="AutoScroll">
<p>设置 <code>ShowAutoScroll="true"</code> 显示自动滚屏选项</p>
<Console Items="@Messages" Height="126" ShowAutoScroll="true" />
<p class="mt-3">通过设置 <code>IsAutoScroll</code> 设置开启自动滚屏</p>
<Console Items="@Messages" Height="126" IsAutoScroll="true" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<AttributeTable Items="@GetItemAttributes()" Title="ConsoleMessageItem 属性" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using System.Collections.Concurrent;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Consoles : IDisposable
{
private ConcurrentQueue<ConsoleMessageItem> Messages { get; set; } = new();
private ConcurrentQueue<ConsoleMessageItem> ColorMessages { get; set; } = new();
private CancellationTokenSource? CancelTokenSource { get; set; }
/// <summary>
///
/// </summary>
/// <returns></returns>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
Task.Run(async () =>
{
CancelTokenSource = new CancellationTokenSource();
while (CancelTokenSource != null && !CancelTokenSource.IsCancellationRequested)
{
_locker.WaitOne();
Messages.Enqueue(new ConsoleMessageItem { Message = $"{DateTimeOffset.Now}: Dispatch Message" });
ColorMessages.Enqueue(new ConsoleMessageItem { Message = $"{DateTimeOffset.Now}: Dispatch Message", Color = GetColor() });
if (Messages.Count > 8)
{
Messages.TryDequeue(out var _);
}
if (ColorMessages.Count > 12)
{
ColorMessages.TryDequeue(out var _);
}
await InvokeAsync(StateHasChanged);
_locker.Set();
try
{
await Task.Delay(2000, CancelTokenSource.Token);
}
catch { }
}
});
}
}
private static Color GetColor()
{
var second = DateTime.Now.Second;
return (second % 3) switch
{
1 => Color.Danger,
2 => Color.Info,
_ => Color.None
};
}
private readonly AutoResetEvent _locker = new(true);
private void OnClear()
{
_locker.WaitOne();
while (!Messages.IsEmpty)
{
Messages.TryDequeue(out var _);
}
_locker.Set();
}
private static IEnumerable<AttributeItem> GetItemAttributes() => new AttributeItem[]
{
new AttributeItem(){
Name = "Message",
Description = "控制台输出消息",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "Color",
Description = "消息颜色",
Type = "Color",
ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
DefaultValue = "None"
}
};
/// <summary>
///
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem(){
Name = nameof(BootstrapBlazor.Components.Console.Items),
Description = "组件数据源",
Type = "IEnumerable<ConsoleMessageItem>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "Height",
Description = "组件高度",
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem(){
Name = nameof(BootstrapBlazor.Components.Console.IsAutoScroll),
Description = "是否自动滚屏",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem(){
Name = "ShowAutoScroll",
Description = "是否显示自动滚屏选项",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem(){
Name = "OnClear",
Description = "组件清屏回调方法",
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem(){
Name = "HeaderText",
Description = "Header 显示文字",
Type = "string",
ValueList = " — ",
DefaultValue = "系统监控"
},
new AttributeItem(){
Name = "LightTitle",
Description = "指示灯 Title",
Type = "string",
ValueList = " — ",
DefaultValue = "通讯指示灯"
},
new AttributeItem(){
Name = "ClearButtonText",
Description = "按钮显示文字",
Type = "string",
ValueList = " — ",
DefaultValue = "清屏"
},
new AttributeItem(){
Name = "ClearButtonIcon",
Description = "按钮显示图标",
Type = "string",
ValueList = " — ",
DefaultValue = "fa fa-fw fa-times"
},
new AttributeItem(){
Name = "ClearButtonColor",
Description = "按钮颜色",
Type = "Color",
ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
DefaultValue = "Secondary"
}
};
private void Dispose(bool disposing)
{
if (disposing)
{
if (CancelTokenSource != null)
{
CancelTokenSource.Cancel();
CancelTokenSource.Dispose();
CancelTokenSource = null;
}
}
}
/// <summary>
///
/// </summary>
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
}