Files
DMS/DMS.WPF/Views/MqttServerDetailView.xaml

463 lines
23 KiB
Plaintext
Raw Permalink Normal View History

<UserControl
x:Class="DMS.WPF.Views.MqttServerDetailView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:helper="clr-namespace:DMS.WPF.Helper"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
xmlns:valueConverts="clr-namespace:DMS.WPF.ValueConverts"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Resources>
<valueConverts:EnumDescriptionConverter x:Key="EnumDescriptionConverter" />
</UserControl.Resources>
<DockPanel>
<!-- 顶部导航栏 -->
<Border
Margin="20,10"
Padding="15"
DockPanel.Dock="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- 返回MQTT列表按钮 -->
<Button
Grid.Column="0"
Margin="0,0,10,0"
Command="{Binding NavigateToMqttsCommand}"
Style="{StaticResource ButtonDefault}"
ToolTip="返回MQTT服务器列表">
<Button.Content>
<StackPanel Orientation="Horizontal">
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ArrowLeft8}" />
</StackPanel>
</Button.Content>
</Button>
<!-- 操作菜单栏 -->
<ui:CommandBar
Grid.Column="1"
HorizontalAlignment="Right"
DefaultLabelPosition="Right"
IsOpen="False">
<ui:AppBarButton
x:Name="EditButton"
Command="{Binding EditMqttCommand}"
Label="编辑">
<ui:AppBarButton.Icon>
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
</ui:AppBarButton.Icon>
</ui:AppBarButton>
<ui:AppBarButton x:Name="ShareButton" Label="分享">
<ui:AppBarButton.Icon>
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Share}" />
</ui:AppBarButton.Icon>
</ui:AppBarButton>
<ui:CommandBar.SecondaryCommands>
<ui:AppBarButton
x:Name="SettingsButton"
Icon="Setting"
Label="设置" />
</ui:CommandBar.SecondaryCommands>
</ui:CommandBar>
</Grid>
</Border>
<!-- 主内容区域 -->
<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto">
<StackPanel Margin="20">
<!-- MQTT Server Details -->
<Border
Margin="0,0,0,10"
Padding="15"
Background="White"
BorderBrush="#E0E0E0"
BorderThickness="1"
CornerRadius="8">
<Border.Effect>
<DropShadowEffect
BlurRadius="5"
Opacity="0.1"
ShadowDepth="2"
Color="#888888" />
</Border.Effect>
<StackPanel>
<Grid Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,10,0"
VerticalAlignment="Center"
FontFamily="{StaticResource MdFontIcons}"
FontSize="24"
Foreground="#2196F3"
Glyph="&#xF048B;" />
<TextBlock
VerticalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}"
Text="MQTT 服务器详情" />
</StackPanel>
</Grid>
<Grid Margin="0,8,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="0"
Grid.Column="0"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.Tag}" />
<TextBlock VerticalAlignment="Center" Text="名称:" />
</StackPanel>
<TextBlock
Grid.Row="0"
Grid.Column="1"
Margin="0,0,10,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.ServerName}" />
<StackPanel
Grid.Row="0"
Grid.Column="2"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.World}" />
<TextBlock VerticalAlignment="Center" Text="主机:" />
</StackPanel>
<TextBlock
Grid.Row="0"
Grid.Column="3"
Margin="0,0,0,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.ServerUrl}" />
<StackPanel
Grid.Row="1"
Grid.Column="0"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.ConnectApp}" />
<TextBlock VerticalAlignment="Center" Text="端口:" />
</StackPanel>
<TextBlock
Grid.Row="1"
Grid.Column="1"
Margin="0,0,10,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.Port}" />
<StackPanel
Grid.Row="1"
Grid.Column="2"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.ContactInfo}" />
<TextBlock VerticalAlignment="Center" Text="客户端ID:" />
</StackPanel>
<TextBlock
Grid.Row="1"
Grid.Column="3"
Margin="0,0,0,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.ClientId}" />
<StackPanel
Grid.Row="2"
Grid.Column="0"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.People}" />
<TextBlock VerticalAlignment="Center" Text="用户名:" />
</StackPanel>
<TextBlock
Grid.Row="2"
Grid.Column="1"
Margin="0,0,10,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.Username}" />
<StackPanel
Grid.Row="2"
Grid.Column="2"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.Lock}" />
<TextBlock VerticalAlignment="Center" Text="密码:" />
</StackPanel>
<TextBlock
Grid.Row="2"
Grid.Column="3"
Margin="0,0,0,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.Password}" />
<StackPanel
Grid.Row="3"
Grid.Column="0"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontFamily="{StaticResource MdFontIcons}"
FontSize="16"
Foreground="#666666"
Glyph="&#xF06A7;" />
<TextBlock VerticalAlignment="Center" Text="发布主题:" />
</StackPanel>
<TextBlock
Grid.Row="3"
Grid.Column="1"
Margin="0,0,10,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.PublishTopic}" />
<StackPanel
Grid.Row="3"
Grid.Column="2"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontFamily="{StaticResource MdFontIcons}"
FontSize="16"
Foreground="#666666"
Glyph="&#xF009E;" />
<TextBlock VerticalAlignment="Center" Text="订阅主题:" />
</StackPanel>
<TextBlock
Grid.Row="3"
Grid.Column="3"
Margin="0,0,0,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.SubscribeTopic}" />
<StackPanel
Grid.Row="4"
Grid.Column="0"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.PC1}" />
<TextBlock VerticalAlignment="Center" Text="平台:" />
</StackPanel>
<!-- <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding CurrentMqtt.MqttPlatform, Converter={StaticResource EnumDescriptionConverter}}" Margin="0,0,10,12" VerticalAlignment="Center" FontWeight="SemiBold" Foreground="#333333"/> -->
<StackPanel
Grid.Row="5"
Grid.Column="0"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.Mail}" />
<TextBlock VerticalAlignment="Center" Text="消息头:" />
</StackPanel>
<TextBlock
Grid.Row="5"
Grid.Column="1"
Margin="0,0,10,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.MessageHeader}" />
<StackPanel
Grid.Row="5"
Grid.Column="2"
Margin="0,0,5,12"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.Mail}" />
<TextBlock VerticalAlignment="Center" Text="消息内容:" />
</StackPanel>
<TextBlock
Grid.Row="5"
Grid.Column="3"
Margin="0,0,0,12"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.MessageContent}" />
<StackPanel
Grid.Row="6"
Grid.Column="0"
Margin="0,0,5,0"
Orientation="Horizontal">
<ui:FontIcon
Margin="0,0,5,0"
VerticalAlignment="Center"
FontSize="16"
Foreground="#666666"
Icon="{x:Static ui:SegoeFluentIcons.Mail}" />
<TextBlock VerticalAlignment="Center" Text="消息尾:" />
</StackPanel>
<TextBlock
Grid.Row="6"
Grid.Column="1"
Margin="0,0,10,0"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="#333333"
Text="{Binding CurrentMqtt.MessageFooter}" />
</Grid>
</StackPanel>
</Border>
<!-- Associated Variables -->
<Border
Margin="0,0,0,10"
Padding="15"
Background="White"
BorderBrush="#E0E0E0"
BorderThickness="1"
CornerRadius="8">
<Border.Effect>
<DropShadowEffect
BlurRadius="5"
Opacity="0.1"
ShadowDepth="2"
Color="#888888" />
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Margin="0,0,0,10"
Style="{StaticResource SubtitleTextBlockStyle}"
Text="关联变量" />
<DataGrid
x:Name="AssociatedVariablesDataGrid"
Grid.Row="1"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserDeleteRows="False"
IsReadOnly="True"
ItemsSource="{Binding CurrentMqtt.VariableAliases}"
SelectionMode="Extended">
<i:Interaction.Behaviors>
<helper:SelectedItemsBehavior SelectedItems="{Binding SelectedMqttAliaes}" />
</i:Interaction.Behaviors>
<DataGrid.ContextMenu>
<ContextMenu>
<MenuItem
Command="{Binding ModifyAliasCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=DataGrid}, Path=SelectedItems[0]}"
Header="修改发送名称" />
<MenuItem
Command="{Binding UnassignAliasCommand}"
Header="取消关联" />
</ContextMenu>
</DataGrid.ContextMenu>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Variable.VariableTable.Device.Name}" Header="设备名称" />
<DataGridTextColumn Binding="{Binding Variable.VariableTable.Name}" Header="变量表名称" />
<DataGridTextColumn Binding="{Binding Variable.Name}" Header="变量名称" />
<DataGridTextColumn Binding="{Binding Alias}" Header="MQTT发送名称" />
<DataGridTextColumn Binding="{Binding Variable.S7Address}" Header="地址" />
<DataGridTextColumn Binding="{Binding Variable.DataType}" Header="数据类型" />
<DataGridTextColumn Binding="{Binding Variable.DisplayValue}" Header="显示值" />
<DataGridTextColumn Binding="{Binding Variable.UpdatedAt, StringFormat='yyyy-MM-dd HH:mm:ss'}" Header="更新时间" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Border>
</StackPanel>
</ScrollViewer>
</DockPanel>
</UserControl>