Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Console 控制台

控制台组件,一般用于后台任务的输出

基本用法

显示后台推送的消息

Demo
Monitor
4/23/2021 7:02:49 PM +08:00: Dispatch Message

可清空的控制台

通过设置 OnClear 回调方法对数据集进行清空操作,由于本例与上例使用相同数据源,会导致上例中数据源更新延时

Demo
Monitor
4/23/2021 7:02:49 PM +08:00: Dispatch Message

不同颜色的消息

通过设置 ConsoleMessageItemColor 参数进行对颜色的更改

Demo
Monitor
4/23/2021 7:02:49 PM +08:00: Dispatch Message

自动滚屏

通过设置 ShowAutoScroll 属性值开启或者关闭自动滚屏功能

Demo
Monitor
4/23/2021 7:02:49 PM +08:00: Dispatch Message

Attributes

Loading...

ConsoleMessageItem 属性

Loading...
@page "/consoles"

<h3>Console 控制台</h3>

<h4>控制台组件,一般用于后台任务的输出</h4>

<Block Title="基本用法" Introduction="显示后台推送的消息">
    <Console Items="@Messages" Height="126" />
</Block>

<Block Title="可清空的控制台" Introduction="通过设置 <code>OnClear</code> 回调方法对数据集进行清空操作,由于本例与上例使用相同数据源,会导致上例中数据源更新延时">
    <Console Items="@Messages" Height="126" OnClear="@OnClear" />
</Block>

<Block Title="不同颜色的消息" Introduction="通过设置 <code>ConsoleMessageItem</code> 的 <code>Color</code> 参数进行对颜色的更改">
    <Console Items="@ColorMessages" Height="126" />
</Block>

<Block Title="自动滚屏" Introduction="通过设置 <code>ShowAutoScroll</code> 属性值开启或者关闭自动滚屏功能">
    <Console Items="@Messages" Height="126" ShowAutoScroll="true" />
</Block>

<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;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Consoles : IDisposable
    {
        private ConcurrentQueue<ConsoleMessageItem> Messages { get; set; } = new();
        private ConcurrentQueue<ConsoleMessageItem> ColorMessages { get; set; } = new();
        private readonly CancellationTokenSource _cancelTokenSource = new();

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            var _ = Task.Run(async () =>
            {
                do
                {
                    _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();
                    await Task.Delay(2000, _cancelTokenSource.Token);
                }
                while (!_cancelTokenSource.IsCancellationRequested);
            });
        }

        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()
        {
            return 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()
        {
            return new AttributeItem[]
            {
                new AttributeItem(){
                    Name = "Items",
                    Description = "组件数据源",
                    Type = "IEnumerable<ConsoleMessageItem>",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "Height",
                    Description = "组件高度",
                    Type = "int",
                    ValueList = " — ",
                    DefaultValue = "0"
                },
                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)
            {
                _cancelTokenSource.Cancel();
                _cancelTokenSource.Dispose();
            }
        }

        /// <summary>
        /// 
        /// </summary>
        public void Dispose()
        {
            Dispose(true);
            GC.SuppressFinalize(this);
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload