2021-09-03 WPF上位机通用框架平台实战-Dashboard

原创 于 2021-09-03 10:03:25 发布 · 3.3w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#wpf #python #pycharm

在这里插入图片描述

一：Dashboard窗口布局和功能实现

<UserControl x:Class="Zhaoxi.HostComputer.Views.MonitorView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Zhaoxi.HostComputer.Views"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" Foreground="#444" UseLayoutRounding="True" TextOptions.TextRenderingMode="ClearType"
             d:DesignHeight="650" d:DesignWidth="1000">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Styles/DataGridStyle.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Styles/ScrollViewerStyle.xaml"/>

                <ResourceDictionary>
                    <Style TargetType="RadioButton" x:Key="TimeRangeButtonStyle">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="RadioButton">
                                    <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="11"/>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Foreground" Value="#FF3269DE"/>
                                            <Setter Property="FontWeight" Value="Bold"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Margin="30,20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="1.5*"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Border BorderBrush="#EEE" BorderThickness="0,0,1,0"/>
            <Border BorderBrush="#EEE" BorderThickness="0,0,1,0" Grid.Column="1"/>
            <!--基本信息-->
            <Grid Margin="0,0,10,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="设备运行工况" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <UniformGrid Columns="3" Grid.Row="1">
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="当前状态" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="运行" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周运行时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="80h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周关机时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="50h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周待机时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="50h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周故障时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="2h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="健康状态" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="良好" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                </UniformGrid>

                <TextBlock Text="设备基本信息" Grid.Row="3" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <UniformGrid Grid.Row="4" Columns="3">
                    <StackPanel Margin="5">
                        <TextBlock Text="1.44m" FontSize="16"/>
                        <TextBlock Text="最大工作范围" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="20kg" FontSize="16"/>
                        <TextBlock Text="有效载荷" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="6J" FontSize="16"/>
                        <TextBlock Text="有效轴数" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="0.001cm" FontSize="16"/>
                        <TextBlock Text="重复定位精确度" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="2500w" FontSize="16"/>
                        <TextBlock Text="额定功率" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="5kg" FontSize="16"/>
                        <TextBlock Text="承重能力" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="2.1m/s" FontSize="16"/>
                        <TextBlock Text="J6轴最大速度" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="200-600v" FontSize="16"/>
                        <TextBlock Text="电源电压" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="225kg" FontSize="16"/>
                        <TextBlock Text="净重" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                </UniformGrid>
            </Grid>

            <!--参数分析-->
            <Grid Margin="10,0" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="参数分析" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <Border Background="White" Grid.Row="1" CornerRadius="5" Margin="5">
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                    </Border.Effect>
                </Border>
                <UniformGrid Columns="2" Grid.Row="1">
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[电压]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#FF7261" PointGeometrySize="0" Values="156,600,70,760,320,540,880,340,500">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#FFE3E0" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[电流]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#FECC71"
                                                    PointGeometrySize="0" Values="156,600,70,760,320,540,880,340,500">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#FFF2DE" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="1000" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[负荷]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#5CD0E1" PointGeometrySize="0" Values="560,160,70,176,302,154,808,340,500">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#DBF3F9" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="1000" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[温度]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#7ADA95" PointGeometrySize="0" Values="220,300,100,500,800,400,270,600,560">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#EDFAF0" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="1000" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                </UniformGrid>
            </Grid>

            <!--报警事件-->
            <Grid Grid.Column="2" Margin="10,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="120"/>
                    <RowDefinition/>
                    <RowDefinition Height="60"/>
                </Grid.RowDefinitions>
                <TextBlock Text="报警事件" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
                    <RadioButton Content="本月" Style="{StaticResource TimeRangeButtonStyle}"/>
                    <RadioButton Content="本周" IsChecked="True" Style="{StaticResource TimeRangeButtonStyle}" Margin="10,0"/>
                    <RadioButton Content="本日" Style="{StaticResource TimeRangeButtonStyle}"/>
                </StackPanel>
                <UniformGrid Rows="1" Grid.Row="1">
                    <Border Background="#FF3269DE" Margin="5" CornerRadius="5" 
                            TextBlock.Foreground="White" TextBlock.FontSize="10">
                        <Grid>
                            <TextBlock Text="Alarm" Foreground="#11FFFFFF" FontSize="60" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                       Margin="0,0,-10,-20" FontWeight="Bold"/>
                            <Grid VerticalAlignment="Center" Margin="10,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="设备二" FontSize="14"/>
                                <TextBlock Text="级别：紧急" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                                <StackPanel Grid.Row="1" Margin="0,8">
                                    <TextBlock Text="设备停止运行"/>
                                    <TextBlock Text="生命值较低，建议维修。"/>
                                </StackPanel>
                                <TextBlock Text="2021/05/30 02:00:00" Grid.Row="2" HorizontalAlignment="Right" Margin="0,10,0,0"/>
                            </Grid>
                        </Grid>
                    </Border>
                    <Border Background="#FF3269DE" Margin="5" CornerRadius="5" 
                            TextBlock.Foreground="White" TextBlock.FontSize="10">
                        <Grid>
                            <TextBlock Text="Alarm" Foreground="#11FFFFFF" FontSize="60" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                       Margin="0,0,-10,-20" FontWeight="Bold"/>
                            <Grid VerticalAlignment="Center" Margin="10,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="设备二" FontSize="14"/>
                                <TextBlock Text="级别：紧急" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                                <StackPanel Grid.Row="1" Margin="0,8">
                                    <TextBlock Text="设备停止运行"/>
                                    <TextBlock Text="生命值较低，建议维修。"/>
                                </StackPanel>
                                <TextBlock Text="2021/05/30 02:00:00" Grid.Row="2" HorizontalAlignment="Right" Margin="0,10,0,0"/>
                            </Grid>
                        </Grid>
                    </Border>
                </UniformGrid>

                <Grid Grid.Row="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="产量统计" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                    <lvc:CartesianChart Grid.Row="1" Margin="10">
                        <lvc:CartesianChart.Series>
                            <lvc:ColumnSeries Values="22,30,10,50,80,40,27,60,56" Width="5" Fill="Orange" MaxColumnWidth="15"
                                              DataLabels="True" Foreground="#888">
                            </lvc:ColumnSeries>
                        </lvc:CartesianChart.Series>
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis  Labels="1/1,1/2,1/3,1/4,1/5,1/6,1/7,1/8,1/9" FontSize="8" DisableAnimations="True">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="1" StrokeThickness="0"/>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis x:Name="axisT" FontSize="8" >
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="20"/>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisY>
                    </lvc:CartesianChart>
                </Grid>

                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3">
                    <TextBlock Grid.Row="3">
                    <Run Text="今日计划产量"/>
                    <Run Text="100"/>
                    </TextBlock>
                    <TextBlock Grid.Row="3" Margin="20,0">
                    <Run Text="今日完成产量"/>
                    <Run Text="100"/>
                    </TextBlock>
                    <TextBlock Grid.Row="3">
                    <Run Text="今日完成率"/>
                    <Run Text="100%"/>
                    </TextBlock>
                </StackPanel>
            </Grid>
        </Grid>

        <Grid Grid.Row="1" Margin="30,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="35"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="1.5*"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Border Height="28" Width="120"  Grid.Row="2" Background="#FF0091F0" BorderBrush="#FF0091F0" BorderThickness="1" CornerRadius="3" Margin="5,0">
                    <TextBlock Text="5号生产车间" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
                <Border Height="28" Width="120"  Grid.Row="2" Background="#FF0091F0" BorderBrush="#FF0091F0" BorderThickness="1" CornerRadius="3">
                    <TextBlock Text="本月类别统计" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </StackPanel>

            <UniformGrid Columns="1" Grid.Row="1">
                <Border Background="#550091F0" CornerRadius="3" Margin="5,5,10,5">
                    <Grid Margin="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontSize="10"
                                                Margin="10,0">
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="生产车间："/>
                                            <Run Text="车间-12号"/>
                            </TextBlock>
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="设备编号："/>
                                            <Run Text="设备-19号"/>
                            </TextBlock>
                        </StackPanel>

                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="76" Background="#55FFFFFF" BorderThickness="0"
                                                 Height="12" Foreground="#FF0091F0" Margin="10,3"/>
                            <Grid Margin="10,0" TextBlock.FontFamily="8" TextBlock.FontSize="10">
                                <TextBlock Text="0" HorizontalAlignment="Left" Foreground="White"/>
                                <TextBlock Text="100%" HorizontalAlignment="Right" Foreground="White"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Border>
                <Border Background="#550091F0" CornerRadius="3" Margin="5,5,10,5">
                    <Grid Margin="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontSize="10"
                                                Margin="10,0">
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="生产车间："/>
                                            <Run Text="车间-12号"/>
                            </TextBlock>
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="设备编号："/>
                                            <Run Text="设备-19号"/>
                            </TextBlock>
                        </StackPanel>

                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="76" Background="#55FFFFFF" BorderThickness="0"
                                                 Height="12" Foreground="#FF0091F0" Margin="10,3"/>
                            <Grid Margin="10,0" TextBlock.FontFamily="8" TextBlock.FontSize="10">
                                <TextBlock Text="0" HorizontalAlignment="Left" Foreground="White"/>
                                <TextBlock Text="100%" HorizontalAlignment="Right" Foreground="White"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Border>
                <Border Background="#550091F0" CornerRadius="3" Margin="5,5,10,5">
                    <Grid Margin="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontSize="10"
                                                Margin="10,0">
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="生产车间："/>
                                            <Run Text="车间-12号"/>
                            </TextBlock>
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="设备编号："/>
                                            <Run Text="设备-19号"/>
                            </TextBlock>
                        </StackPanel>

                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="76" Background="#55FFFFFF" BorderThickness="0"
                                                 Height="12" Foreground="#FF0091F0" Margin="10,3"/>
                            <Grid Margin="10,0" TextBlock.FontFamily="8" TextBlock.FontSize="10">
                                <TextBlock Text="0" HorizontalAlignment="Left" Foreground="White"/>
                                <TextBlock Text="100%" HorizontalAlignment="Right" Foreground="White"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Border>
            </UniformGrid>

            <TextBlock Grid.Column="1" Text="设备运行日志记录" FontWeight="Bold" Foreground="#555" VerticalAlignment="Top"
                           Margin="15,0"/>
            <DataGrid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" ItemsSource="{Binding DataList}" Margin="15,0,5,5"
                          ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="序号" Width="60" Binding="{Binding Name}"/>
                    <DataGridTextColumn Header="数据类型" Width="*" Binding="{Binding Age}"/>
                    <DataGridTextColumn Header="记录日期" Width="*" Binding="{Binding Value}"/>
                    <DataGridTextColumn Header="设备名称" Width="*" Binding="{Binding Name}"/>
                    <DataGridTextColumn Header="温度值" Width="*" Binding="{Binding Age}"/>
                    <DataGridTextColumn Header="Status" Width="*" Binding="{Binding Value}"/>
                    <DataGridTemplateColumn Header="操作" Width="120">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock>
                                    <Hyperlink Command="{Binding}" CommandParameter="{Binding}">操作</Hyperlink>
                                    </TextBlock>
                                    <TextBlock Margin="5,0">
                                    <Hyperlink Command="{Binding}" CommandParameter="{Binding}">操作</Hyperlink>
                                    </TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>

    </Grid>
</UserControl>

/// <summary>
/// MonitorView.xaml 的交互逻辑
/// </summary>
public partial class MonitorView : UserControl
{
    public MonitorView()
    {
        InitializeComponent();

        this.DataContext = new MonitorViewModel();
    }
}

public class MonitorViewModel
{
    public ObservableCollection<DataGridItemModel> DataList { get; set; } = new ObservableCollection<DataGridItemModel>();

    public MonitorViewModel()
    {
        Random random = new Random();
        for (int i = 0; i < 20; i++)
        {
            DataList.Add(new DataGridItemModel { Name = "测试-" + i.ToString("00"), Age = random.Next(18, 90), Value = random.Next(30, 120).ToString() });
        }
    }
}

数据绑定样式

public class DataGridItemModel
{
    public string Name
    {
        get;
        set;
    }

    public int Age
    {
        get;
        set;
    }

    public string Value
    {
        get;
        set;
    }
}

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Style TargetType="DataGridCell" x:Key="DataGridCellStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Grid Background="Transparent">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="#444"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="DataGridColumnHeader" x:Key="DataGridColumnHeaderfStyle">
        <Setter Property="Background" Value="White"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="BorderBrush" Value="#DDD"/>
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"
                                   Foreground="#565656" FontWeight="Bold"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="DataGridRow" x:Key="DataGridRowStyle">
        <Setter Property="Height" Value="40"/>
        <!--行头样式-->
        <Setter Property="HeaderStyle">
            <Setter.Value>
                <Style TargetType="DataGridRowHeader">
                    <Setter Property="Width" Value="0"/>
                    <Setter Property="Background" Value="Red"/>
                </Style>
            </Setter.Value>
        </Setter>
        <!--行头模版-->
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid Margin="5,0">
                        <TextBlock Text="{Binding Item.Age,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=DataGridRow}}"
                                   Foreground="#888"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <!--行右键菜单-->
        <Setter Property="ContextMenu">
            <Setter.Value>
                <ContextMenu>
                    <MenuItem Header="复制" Command="{Binding MenuItemCommand}" CommandParameter="{Binding}"/>
                    <MenuItem Header="剪切" Command="{Binding MenuItemCommand}" CommandParameter="{Binding}"/>
                    <MenuItem Header="粘贴" Command="{Binding MenuItemCommand}" CommandParameter="{Binding}"/>
                </ContextMenu>
            </Setter.Value>
        </Setter>


        <Style.Triggers>
            <!--条纹间隔，需要配合DataGrid.AlternationCount属性-->
            <Trigger Property="AlternationIndex" Value="-1" >
                <Setter Property="Background" Value="#EEE" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#F7F9FA"/>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#F7F9FA"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <!--控件模板、容器模板、数据模板   （触发器、视觉状态管理器）-->

    <!--DataGrid样式-->
    <Style TargetType="{x:Type DataGrid}">
        <!--网格线颜色-->
        <Setter Property="CanUserResizeColumns" Value="True"/>
        <Setter Property="Foreground" Value="#444" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="HorizontalGridLinesBrush" Value="#EEE"/>
        <Setter Property="VerticalGridLinesBrush" Value="Transparent"/>
        <Setter Property="CanUserAddRows" Value="False"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>

        <Setter Property="CellStyle" Value="{StaticResource DataGridCellStyle}"/>
        <Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGridColumnHeaderfStyle}"/>
        <Setter Property="RowStyle" Value="{StaticResource DataGridRowStyle}"/>
    </Style>

</ResourceDictionary>

补充：集合绑定用法
在这里插入图片描述
在这里插入图片描述
补充：滚动条用法
在这里插入图片描述

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <SolidColorBrush x:Key="ScrollBar.Static.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Border" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Thumb" Color="#CDCDCD"/>
    <SolidColorBrush x:Key="ScrollBar.MouseOver.Thumb" Color="#A6A6A6"/>
    <SolidColorBrush x:Key="ScrollBar.Pressed.Thumb" Color="#606060"/>

    <Style TargetType="ScrollViewer">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" 
                                        CanHorizontallyScroll="False" CanVerticallyScroll="False" 
                                        ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                                        Margin="{TemplateBinding Padding}"/>
                        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" 
                           Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" 
                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                           Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                           ViewportSize="{TemplateBinding ViewportHeight}"
                           HorizontalAlignment="Right" Style="{DynamicResource ScrollBarStyle}"
                           Opacity="0"/>
                        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" 
                           Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal"
                           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                           Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                           ViewportSize="{TemplateBinding ViewportWidth}"
                           VerticalAlignment="Bottom"
                           Opacity="0" Style="{DynamicResource ScrollBarStyle}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.3" To="0.7" 
                                                 Storyboard.TargetName="PART_VerticalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                        <DoubleAnimation Duration="0:0:0.3" To="0.7" 
                                                 Storyboard.TargetName="PART_HorizontalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetName="PART_VerticalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetName="PART_HorizontalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource ScrollBar.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ScrollBar.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1,0"/>
        <Setter Property="Width" Value="12"/>
        <Setter Property="MinWidth" Value="12"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" SnapsToDevicePixels="true">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"
                                    Background="Transparent" Grid.Row="1"/>
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{DynamicResource ScrollBarThumbVertical}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Height" Value="12"/>
                <Setter Property="MinHeight" Value="12"/>
                <Setter Property="BorderThickness" Value="0,1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="true">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                            BorderThickness="0" 
                                            Background="Transparent" Grid.Column="1"/>
                                <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{DynamicResource ScrollBarThumbHorizontal}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="#11FFFFFF" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="rectangle" Fill="{StaticResource ScrollBar.Static.Thumb}" Height="{TemplateBinding Height}" 
                                   SnapsToDevicePixels="True" Width="12" RadiusX="6" RadiusY="6"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumbHorizontal" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="rectangle" Fill="{StaticResource ScrollBar.Static.Thumb}" 
                                   Height="{TemplateBinding Height}" SnapsToDevicePixels="True" 
                                   Width="{TemplateBinding Width}"
                                   RadiusX="6" RadiusY="6"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

补充：详情事件用法
在这里插入图片描述

在这里插入图片描述
最终界面效果图
在这里插入图片描述

博客
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》005-TypeScript 中的枚举
03-02 8433
在现代编程中，枚举是一种非常实用的类型，它可以帮助我们管理和组织一组相关的常量，使代码更加清晰和易于维护。TypeScript作为一种静态类型语言，提供了对枚举的强大支持，使得开发者能够更有效地定义和使用常量集合。在鸿蒙原生应用开发中，掌握TypeScript中的枚举，不仅可以提升代码的可读性，还能减少出错的可能性。本篇文章将深入探讨TypeScript中的枚举类型，包括数字枚举、字符串枚举以及异构枚举的使用方法。
博客
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》004-TypeScript 中的泛型
02-28 8097
在现代开发中，泛型是一种重要的编程概念，能够极大地提升代码的灵活性和可重用性。TypeScript作为一种强大的编程语言，提供了对泛型的良好支持，让开发者能够以更安全和高效的方式处理各种数据类型。在鸿蒙原生应用开发中，掌握TypeScript中的泛型，不仅能优化代码结构，还能提升应用的性能和可维护性。在本篇文章中，我们将详细介绍TypeScript中的泛型，包括泛型函数、泛型接口和泛型类等核心概念。
博客
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》003-TypeScript 中的类
02-27 7824
在当今的应用开发中，TypeScript凭借其静态类型和面向对象编程的特性，成为了越来越多开发者的首选语言。而在鸿蒙原生应用开发中，掌握TypeScript中的类的使用，不仅能提升我们的开发效率，还能帮助我们构建更加稳健和可维护的应用程序。本文将重点介绍TypeScript中的类的基本概念和高级特性，从类的定义、构造函数，到继承、多态等内容，逐步带领你深入理解面向对象编程的思想。通过实际案例，我们将展示如何在鸿蒙原生应用中灵活运用类，提高代码的复用性和可读性。
博客
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》002-TypeScript 类型系统详解
02-22 7062
变量名: 类型 = 值类型示例说明布尔类型仅接受truefalse数值类型支持整数、浮点数、二进制等字符串类型支持单引号、双引号、模板字符串模板字符串使用反引号拼接变量nullundefined需显式声明类型//布尔类型//数值类型//字符串类型${//布尔类型 let num : number = 15;//数值类型 let str : string = 'abc';//字符串类型 let str2 : string = ` hello, ${ str } `;${
博客
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》001-TypeScript概述‌
02-22 5813
随着前端开发的迅猛发展，JavaScript已成为构建现代网页和应用的核心语言。然而，随着项目规模的扩大和复杂性的增加，开发者们逐渐意识到，JavaScript在类型安全性和工具支持方面的不足可能会导致潜在的错误和维护困难。在这样的背景下，TypeScript应运而生，作为JavaScript的超集，为开发者提供了静态类型检查和更强大的开发体验。本文将对TypeScript进行全面概述，探讨其基本概念、主要特性以及在开发中的应用价值。
博客
【朝夕教育】2023年11月 .NET CORE工具案例-DeveloperSharp(Web服务负载均衡)
11-06 1万+
Web服务负载均衡是一种将Web服务请求分发到多个服务器上的技术，以提高系统的可靠性、可用性和性能。具体来说，它会将用户的请求分发到不同的服务器上，每个服务器只处理一部分请求，从而减轻单一服务器的负担，避免单点故障，并提高系统的响应速度和吞吐量。Web服务负载均衡可以实现多种算法，如轮询、加权轮询、随机、最少连接等。其中，轮询算法是最简单的一种，它将请求依次分发给每个服务器，直至所有服务器都获得请求。加权轮询算法则是在轮询的基础上，为每个服务器设置不同的权重，以更加合理地分配请求。
博客
【朝夕教育】2023年11月 .NET CORE工具案例-DeveloperSharp(RabbitMQ消息队列)
11-04 643
消息队列是一种应用程序间异步通信的方式。它通过一个存放消息的队列来解耦发送者和接收者的关系。发送者将消息直接发送到队列中，而接收者则从队列中取出消息进行处理。消息队列可以用于解决高并发、异步处理、流量削峰等问题。RabbitMQ是一款开源的消息队列软件，它实现了AMQP（高级消息队列协议）标准，被广泛应用于分布式系统中。RabbitMQ可以通过安装在不同的机器上并通过网络连接来连接不同的应用程序，实现应用程序间的消息传递。
博客
【朝夕教育】2023年11月 .NET CORE工具案例-DeveloperSharp(Redis缓存)
11-02 449
Redis是一个高性能的开源键值对存储系统，可以用作数据库、缓存、消息中间件等多种用途。Redis支持多种数据结构，包括字符串、哈希表、列表、集合和有序集合，可以对这些数据结构进行快速的读写操作。Redis还提供了一些高级特性，如事务、发布/订阅、Lua脚本等。Redis的作用和应用场景包括：缓存：Redis可以作为缓存来加速读取频繁的数据，在访问数据库之前将数据存储在Redis中，从而加快数据的响应速度。
博客
【朝夕教育】2023年11月 .NET CORE工具案例-DeveloperSharp(http请求)
11-01 384
HTTP请求是一个客户端向服务器发送请求的过程，用于获取或提交网络资源。它是基于TCP/IP协议完成的，包含了请求行、请求头、请求体等内容。HTTP请求通常由客户端发起，服务器对请求进行响应。在HTTP请求中，请求行描述了请求的类型、URL、版本等信息；请求头包含了一些请求的元数据，如Host、User-Agent等；请求体则是提交给服务器的数据。常见的HTTP请求类型包括GET、POST、PUT、DELETE等。常见的HTTP请求头包括Content-Type、Accept、Authorization等。
博客
【朝夕教育】2023年10月 .NET CORE工具案例-DeveloperSharp(图片的裁剪、缩放、与加水印)
10-30 492
PIL：Python Imaging Library，Python 中处理图片的标准库，提供了丰富的图片处理功能。OpenCV：一个流行的开源计算机视觉库，支持各种图像处理和计算机视觉任务。ImageMagick：一款功能强大的图像处理工具，可用于从命令行处理图片，支持各种常见的格式，包括JPEG、PNG和GIF等。GraphicsMagick：一个类似于ImageMagick的图像处理工具，具有更高的性能和更低的内存使用量。
博客
【朝夕教育】2023年10月 .NET CORE工具案例-DeveloperSharp(分布式唯一Id)
10-29 476
分布式唯一ID（Distributed Unique ID，简称DUID）是指在分布式系统中，为了避免ID冲突而使用的一种ID生成方式。在分布式系统中，多个节点同时生成ID，如果采用单机自增序列的方式，容易造成ID重复的问题。为了解决这个问题，产生了DUID的概念。常见的DUID生成方式有：UUID：通用唯一识别码，是一种由网络软件使用的标准，用于标识信息的唯一性。UUID是根据时间戳、硬件设备等多个因素生成的，因此非常难以重复。
博客
【朝夕教育】2023年10月 .NET CORE工具案例-DeveloperSharp(数据库读写分离)
10-25 474
数据库读写分离是指将数据库的读操作和写操作分别放置到不同的服务器上进行处理。读操作通常比较频繁，而且不需要对数据进行修改，因此可以通过增加读服务器的数量来提高系统的读取性能。而写操作相对较少，但是需要对数据进行修改，因此只需要在主服务器上进行处理即可。数据库读写分离的主要优点有：提高读取性能：通过增加读取服务器的数量，可以提高系统的读取性能，从而更好地满足用户的需求。减轻主服务器负担：将读操作放置到从服务器上进行处理，可以减轻主服务器的负担，从而提高系统的稳定性和可靠性。
博客
【朝夕教育】2023年10月 .NET CORE工具案例-DeveloperSharp(数据库负载均衡)
10-25 361
数据库负载均衡指的是将数据库的请求分配到多个数据库服务器上，并通过一系列算法和策略来确保各个服务器的负载相对平衡。这样可以有效避免单个数据库服务器的过载，提高数据库的整体稳定性和性能。负载均衡器通常会监控服务器的负载情况以及数据库响应时间，根据不同的负载情况来动态调整请求的分配策略。常见的负载均衡算法包括轮询、随机、最少连接等。本文主要介绍DeveloperSharp的使用，DeveloperSharp是一个研发中大型项目必备的系统平台，也是一个低代码平台。
博客
【朝夕教育】2023年10月 .NET CORE工具案例-DeveloperSharp(高效分页)
10-21 369
数据库分页是指将大量数据按照一定的规则分成若干页，每页只显示固定数量的数据，以方便用户浏览和管理数据。常见的规则是按照数据的主键或排序字段进行分页，通过控制每页的数据量和当前显示的页码，用户可以在整个数据集中浏览到所需的数据。数据库分页通常用于网站、移动应用程序等数据密集型应用中，以提高用户体验和系统性能。数据库分页的瓶颈主要有以下几个方面：数据库查询性能：分页操作需要进行 LIMIT 和 OFFSET 的查询操作，当数据量较大时，查询效率会显著降低，因此需要优化查询语句或使用索引提高查询效率。
博客
【朝夕教育】2023年10月 .NET CORE工具案例-DeveloperSharp(数据库访问技术)
10-20 2万+
数据库访问技术是指访问和操作数据库的方法和技术。数据库访问技术主要有以下几种：SQL：SQL（Structured Query Language）是一种专门用于管理关系型数据库的语言，它可以用来进行数据的增删改查，以及对数据库表、视图等进行创建、修改和删除等操作。JDBC：JDBC（Java Database Connectivity）是一种用于在Java应用程序中访问数据库的API。它提供了一系列的接口和类，可以通过Java代码连接和操作各种数据库。
博客
【朝夕教育】2023年10月 WPF+上位机+工业互联 099-智能停车场项目专题（登录功能实现）
10-10 654
智能停车场是一种利用先进的技术和管理手段，实现停车场智能化管理、车位智能导航、停车费用自动结算以及车辆监控等功能的停车场。该项目主要是为了解决城市停车难、车位紧张等问题，并提高停车场的利用效率和管理水平，从而方便市民的停车需求，缓解城市交通拥堵，优化城市交通环境。智能停车场项目的意义主要表现在：缓解城市停车难、车位紧张的问题，方便市民的停车需求；提高停车场的管理水平和利用效率，实现自动化管理和车位智能导航，减少人工管理和停车时间；减少城市交通拥堵，优化城市交通环境，提高城市的交通运行效率和安全性；促进智能交
博客
【朝夕教育】2023年10月 WPF+上位机+工业互联 098-智能停车场项目专题（框架搭建）
10-09 669
智能停车场是一种利用先进的技术和管理手段，实现停车场智能化管理、车位智能导航、停车费用自动结算以及车辆监控等功能的停车场。该项目主要是为了解决城市停车难、车位紧张等问题，并提高停车场的利用效率和管理水平，从而方便市民的停车需求，缓解城市交通拥堵，优化城市交通环境。智能停车场项目的意义主要表现在：缓解城市停车难、车位紧张的问题，方便市民的停车需求；提高停车场的管理水平和利用效率，实现自动化管理和车位智能导航，减少人工管理和停车时间；减少城市交通拥堵，优化城市交通环境，提高城市的交通运行效率和安全性；
博客
【朝夕教育】2023年10月 WPF+上位机+工业互联 097-智能停车场项目专题（项目介绍）
10-08 543
智能停车场是一种利用先进的技术和管理手段，实现停车场智能化管理、车位智能导航、停车费用自动结算以及车辆监控等功能的停车场。该项目主要是为了解决城市停车难、车位紧张等问题，并提高停车场的利用效率和管理水平，从而方便市民的停车需求，缓解城市交通拥堵，优化城市交通环境。智能停车场项目的意义主要表现在：缓解城市停车难、车位紧张的问题，方便市民的停车需求；提高停车场的管理水平和利用效率，实现自动化管理和车位智能导航，减少人工管理和停车时间；减少城市交通拥堵，优化城市交通环境，提高城市的交通运行效率和安全性；
博客
【朝夕教育】2023年10月 WPF+上位机+工业互联 096-WebApi（minimalApi、AOP、鉴权）
10-07 556
Web API是一种使用HTTP协议，向外部客户端（如浏览器、移动应用、桌面应用等）提供服务的技术，是一种RESTful（Representational State Transfer）架构的Web服务。Web API使用基于标准HTTP的协议，如HTTP请求、HTTP响应、HTTP状态代码、HTTP头和HTTP方法等，来处理请求和返回响应数据。Web API通常用于构建具有动态内容的Web应用程序或Web服务，例如基于客户端-服务器架构的移动应用程序、Web端的单页应用程序和其他类型的Web服务等。
博客
【朝夕教育】2023年09月 WPF+上位机+工业互联 095-分布式服务（WebService、WCF、WebApi）
10-06 491
C# 中的分布式服务包括：.NET Remoting：使用 .NET Remoting，您可以以面向对象的方式通信，使应用程序的各个部分能够在本地或通过网络相互通信。Windows Communication Foundation (WCF)：WCF 是一个基于 SOAP 协议的分布式服务平台，可以用于创建分布式应用程序。ASP.NET Web API：它提供了一种将 Web 服务与现有 Web 应用程序和浏览器应用程序集成的方式，并可用于构建 RESTful Web 服务。Azure Service Fa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值