xiaowei/DMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改了设备列表的界面

Browse Source
This commit is contained in:
David P.G
2025-09-14 20:46:31 +08:00
parent ebf67b98fa
commit d923b6a116
10 changed files with 469 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
DMS.WPF/Views/DevicesView.xaml
View File

@@ -14,110 +14,291 @@
mc:Ignorable="d">
<UserControl.Resources>
<localConverters:BooleanToBrushConverter x:Key="BooleanToBrushConverter" />
<!-- 添加需要的转换器 -->
<localConverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<localConverters:CountToVisibilityConverter x:Key="CountToVisibilityConverter" />
<localConverters:BoolToStringConverter x:Key="BoolToStringConverter" />
<localConverters:BoolToColorConverter x:Key="BoolToColorConverter" />
<!-- 设备项模板 -->
<DataTemplate x:Key="DeviceItemTemplate">
<Border
Margin="5"
Padding="15"
BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"
BorderThickness="1"
CornerRadius="8"
Background="{Binding IsRunning, Converter={StaticResource BooleanToBrushConverter}, ConverterParameter='#FFA8E063|{DynamicResource SystemControlBackgroundAltHighBrush}'}">
<Border Background="White"
BorderBrush="#E0E0E0"
BorderThickness="1"
CornerRadius="8"
Margin="5"
Padding="15">
<Border.Effect>
<DropShadowEffect
BlurRadius="5"
Opacity="0.1"
ShadowDepth="1"
Color="Black" />
<DropShadowEffect ShadowDepth="2"
BlurRadius="5"
Opacity="0.1"
Color="#888888"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Row 0: Header with Name and ToggleSwitch -->
<DockPanel Grid.Row="0" Margin="0,0,0,10">
<ui:ToggleSwitch
DockPanel.Dock="Right"
IsOn="{Binding IsActive}"
OffContent="停止"
OnContent="启动" />
<TextBlock
VerticalAlignment="Center"
FontSize="20"
FontWeight="SemiBold"
Text="{Binding Name}" />
</DockPanel>
<!-- Row 1: Details with Icons -->
<StackPanel Grid.Row="1" Margin="0,0,0,10">
<StackPanel Margin="0,2" Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,8,0"
VerticalAlignment="Center"
FontSize="14"
Icon="{x:Static ui:SegoeFluentIcons.Info}" />
<TextBlock
Foreground="{DynamicResource SystemControlForegroundBaseMediumBrush}"
Text="{Binding Description}"
TextTrimming="CharacterEllipsis" />
</StackPanel>
<StackPanel Margin="0,2" Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,8,0"
VerticalAlignment="Center"
FontSize="14"
Icon="{x:Static ui:SegoeFluentIcons.Connect}" />
<TextBlock>
<Run Text="{Binding IpAddress, FallbackValue='192.168.1.1'}" />
<Run Text=":" />
<Run Text="{Binding Port, FallbackValue='102'}" />
</TextBlock>
</StackPanel>
<StackPanel Margin="0,2" Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,8,0"
VerticalAlignment="Center"
FontSize="14"
Icon="{x:Static ui:SegoeFluentIcons.DeveloperTools}" />
<TextBlock>
<Run Text="{Binding DeviceType, FallbackValue='S7_1200'}" />
<Run Text=" / " />
<Run Text="{Binding Protocol, FallbackValue='S7'}" />
</TextBlock>
</StackPanel>
<!-- 设备基本信息区域 -->
<StackPanel Grid.Row="0" Margin="0,0,0,15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- 设备名称和描述 -->
<StackPanel Grid.Column="0">
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<ui:FontIcon Glyph="&#xE975;"
FontSize="20"
Foreground="{DynamicResource SystemAccentColorBrush}"
Margin="0,0,8,0"/>
<TextBlock Text="{Binding Name}"
FontWeight="SemiBold"
FontSize="16"
VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="{Binding Description}"
Foreground="#666666"
FontSize="13"
TextWrapping="Wrap"
Margin="0,0,0,8"/>
<StackPanel Orientation="Horizontal">
<ui:FontIcon Glyph="&#xE76C;"
FontSize="14"
Foreground="#888888"
Margin="0,0,5,0"/>
<TextBlock Text="{Binding DeviceType}"
Foreground="#888888"
FontSize="12"/>
<Rectangle Width="1"
Height="12"
Fill="#CCCCCC"
Margin="10,0"/>
<ui:FontIcon Glyph="&#xE8F4;"
FontSize="14"
Foreground="#888888"
Margin="10,0,5,0"/>
<TextBlock Text="{Binding ConnectionStatus}"
Foreground="#888888"
FontSize="12"/>
</StackPanel>
</StackPanel>
<!-- 状态指示器 -->
<StackPanel Grid.Column="1"
Orientation="Horizontal"
VerticalAlignment="Top">
<Border Background="{Binding IsConnected,
Converter={StaticResource BoolToColorConverter},
ConverterParameter='Green;Red'}"
CornerRadius="8"
Width="16"
Height="16"
Margin="0,0,10,0">
<Border.ToolTip>
<TextBlock Text="{Binding IsConnected,
Converter={StaticResource BoolToStringConverter},
ConverterParameter='已连接;未连接'}"/>
</Border.ToolTip>
</Border>
<ToggleButton x:Name="ExpandToggleButton"
Style="{StaticResource DefaultToggleButtonStyle}"
Content="&#xE70D;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="#666666"
Background="Transparent"
BorderThickness="0"
IsChecked="True"
ToolTip="展开/收起变量表"/>
</StackPanel>
</Grid>
</StackPanel>
<!-- 变量表列表区域 -->
<StackPanel Grid.Row="1" Margin="0,0,0,15">
<Border Background="#F8F8F8"
BorderBrush="#E0E0E0"
BorderThickness="1"
CornerRadius="6"
Visibility="{Binding ElementName=ExpandToggleButton, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel>
<!-- 变量表标题 -->
<Border Background="#F0F0F0"
BorderBrush="#E0E0E0"
BorderThickness="0,0,0,1"
CornerRadius="6,6,0,0"
Padding="12,8">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="变量表列表"
FontWeight="SemiBold"
FontSize="14"
Foreground="#333333"/>
<Button Grid.Column="1"
Style="{StaticResource DefaultButtonStyle}"
Content="&#xE710;"
FontFamily="Segoe MDL2 Assets"
FontSize="14"
Width="28"
Height="28"
Padding="0"
ToolTip="添加变量表"/>
</Grid>
</Border>
<!-- 变量表列表 -->
<ItemsControl ItemsSource="{Binding VariableTables}"
Margin="0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="White"
BorderBrush="#EEEEEE"
BorderThickness="0,0,0,1"
Padding="12,10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<StackPanel Orientation="Horizontal" Margin="0,0,0,3">
<ui:FontIcon Glyph="&#xE8EC;"
FontSize="14"
Foreground="{DynamicResource SystemAccentColorBrush}"
Margin="0,0,6,0"/>
<TextBlock Text="{Binding Name}"
FontWeight="SemiBold"
FontSize="13"/>
</StackPanel>
<TextBlock Text="{Binding Description}"
Foreground="#888888"
FontSize="11"
TextWrapping="Wrap"
MaxWidth="300"/>
</StackPanel>
<StackPanel Grid.Column="1"
Orientation="Horizontal">
<TextBlock Text="{Binding Variables.Count}"
Foreground="#666666"
FontSize="12"
VerticalAlignment="Center"
Margin="0,0,5,0"/>
<TextBlock Text="变量"
Foreground="#888888"
FontSize="12"
VerticalAlignment="Center"/>
<Button Content="&#xE76C;"
FontFamily="Segoe MDL2 Assets"
FontSize="14"
Width="26"
Height="26"
Margin="8,0,0,0"
Padding="0"
Style="{StaticResource DefaultButtonStyle}"
ToolTip="编辑变量表"/>
<Button Content="&#xE74D;"
FontFamily="Segoe MDL2 Assets"
FontSize="14"
Width="26"
Height="26"
Margin="4,0,0,0"
Padding="0"
Style="{StaticResource DefaultButtonStyle}"
ToolTip="删除变量表"/>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- 空状态提示 -->
<TextBlock Text="暂无变量表"
Foreground="#AAAAAA"
FontSize="13"
HorizontalAlignment="Center"
Padding="20,15"
Visibility="{Binding VariableTables.Count,
Converter={StaticResource CountToVisibilityConverter}}"/>
</StackPanel>
</Border>
</StackPanel>
<!-- 操作按钮区域 -->
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="&#xE8A5;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Width="36"
Height="36"
Margin="0,0,8,0"
Padding="0"
Style="{StaticResource AccentButtonStyle}"
ToolTip="连接设备">
<Button.Effect>
<DropShadowEffect ShadowDepth="1"
BlurRadius="3"
Opacity="0.2"
Color="{DynamicResource SystemAccentColor}"/>
</Button.Effect>
</Button>
<Button Content="&#xE76C;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Width="36"
Height="36"
Margin="0,0,8,0"
Padding="0"
Style="{StaticResource DefaultButtonStyle}"
ToolTip="编辑设备"/>
<Button Content="&#xE896;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Width="36"
Height="36"
Margin="0,0,8,0"
Padding="0"
Style="{StaticResource DefaultButtonStyle}"
ToolTip="监控设备"/>
<Button Content="&#xE74D;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Width="36"
Height="36"
Padding="0"
Style="{StaticResource DefaultButtonStyle}"
ToolTip="删除设备">
<Button.Foreground>
<SolidColorBrush Color="#D32F2F"/>
</Button.Foreground>
</Button>
</StackPanel>
<!-- Row 2: Variable Tables -->
<GroupBox
Grid.Row="2"
Padding="5"
Header="变量表">
<ListBox ItemsSource="{Binding VariableTables}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border
Margin="2"
Padding="8,4"
Background="{DynamicResource SystemControlBackgroundListLowBrush}"
CornerRadius="4">
<TextBlock Text="{Binding Name}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</Grid>
</Border>
</DataTemplate>