YZWater3/src/YZWater.Avalonia/Views/ViewDView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:YZWater.Core.ViewModels"
             x:Class="YZWater.Avalonia.Views.ViewDView"
             x:DataType="vm:ViewDViewModel">

    <UserControl.DataContext>
        <vm:ViewDViewModel/>
    </UserControl.DataContext>

    <Border Background="{DynamicResource AppBgBrush}">
        <Grid RowDefinitions="48,*,32">
            <!-- 顶部 -->
            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
                <Grid Margin="16,0">
                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <Border Background="{DynamicResource DangerBrush}" Width="3" Height="20" CornerRadius="1"/>
                        <TextBlock Text="ALARM LOG" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
                        <TextBlock Text="报警历史记录" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                        <Border Background="{DynamicResource DangerBrush}" CornerRadius="10" Padding="8,2" Margin="8,0,0,0">
                            <TextBlock Text="{Binding UnconfirmedCount, StringFormat='{}{0}'}" FontFamily="{DynamicResource MonoFont}" FontSize="11"
                                       Foreground="White"/>
                        </Border>
                    </StackPanel>
                </Grid>
            </Border>

            <!-- 内容 -->
            <Grid Grid.Row="1" RowDefinitions="Auto,*,Auto" Margin="8,4">

                <!-- 查询条件 -->
                <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,0,4">
                    <StackPanel Orientation="Horizontal" Spacing="16">
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <TextBlock Text="FROM" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                            <DatePicker SelectedDate="{Binding StartDate}" Width="150"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <TextBlock Text="TO" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                            <DatePicker SelectedDate="{Binding EndDate}" Width="150"/>
                        </StackPanel>
                        <Button Content="QUERY" Command="{Binding LoadAlarmRecordsCommand}" Classes="btn-info"/>
                        <Button Content="EXPORT" Command="{Binding ExportAlarmsCommand}" Classes="btn-success"/>
                        <Button Content="ACK ALL" Command="{Binding ConfirmAllAlarmsCommand}" Classes="btn-warning"/>
                        <Button Content="PURGE" Command="{Binding ClearHistoryCommand}" Classes="btn-danger"/>
                    </StackPanel>
                </Border>

                <!-- 报警列表 -->
                <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="8" Margin="0,0,0,4">
                    <DataGrid ItemsSource="{Binding AlarmRecords}" AutoGenerateColumns="False" IsReadOnly="True"
                              SelectedItem="{Binding SelectedRecord}">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="TIME" Binding="{Binding AlarmTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="160"/>
                            <DataGridTextColumn Header="TYPE" Binding="{Binding AlarmType}" Width="100"/>
                            <DataGridTextColumn Header="MESSAGE" Binding="{Binding AlarmMessage}" Width="250"/>
                            <DataGridTextColumn Header="VALUE" Binding="{Binding AlarmValue, StringFormat='{}{0:F1}'}" Width="80"/>
                            <DataGridTextColumn Header="LEVEL" Binding="{Binding AlarmLevel}" Width="60"/>
                            <DataGridCheckBoxColumn Header="ACK" Binding="{Binding IsConfirmed}" Width="60"/>
                            <DataGridTextColumn Header="ACK TIME" Binding="{Binding ConfirmedTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="160"/>
                            <DataGridTextColumn Header="ACK BY" Binding="{Binding ConfirmedBy}" Width="80"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </Border>

                <!-- 报警详情 -->
                <Border Grid.Row="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12"
                        IsVisible="{Binding SelectedRecord, Converter={x:Static ObjectConverters.IsNotNull}}">
                    <Grid ColumnDefinitions="80,*" RowDefinitions="Auto,Auto,Auto,Auto">
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="TIME" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding DetailTime}"
                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>

                        <TextBlock Grid.Row="1" Grid.Column="0" Text="TYPE" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
                        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding DetailType}"
                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource WarningBrush}"/>

                        <TextBlock Grid.Row="2" Grid.Column="0" Text="MESSAGE" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
                        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding DetailMessage}"
                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource DangerBrush}"/>

                        <TextBlock Grid.Row="3" Grid.Column="0" Text="LEVEL" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
                        <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding DetailLevel}"
                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
                    </Grid>
                </Border>
            </Grid>

            <!-- 底部 -->
            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
                <TextBlock Text="ALARM SYSTEM v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
            </Border>
        </Grid>
    </Border>
</UserControl>