David P.G
1f0495fbe7
2
3 - 修改MQTT发布处理器，使用DisplayValue代替DataValue进行数据发布
4 - 在MqttServiceManager中使用DisplayValue进行消息内容替换
5 - 增加MQTT服务器编辑功能，允许用户修改服务器配置
6 - 添加变量MQTT发布别名修改功能，支持右键菜单修改发布名称
7 - 实现变量值变化事件监听，实时更新UI显示
8 - 优化MQTT服务器详情页面UI，改进变量关联数据显示
9 - 修复变量表关联MQTT服务器时的逻辑问题
10 - 完善导航生命周期事件处理
296 lines
19 KiB
XML
296 lines
19 KiB
XML
<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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
|
|
xmlns:valueConverts="clr-namespace:DMS.WPF.ValueConverts"
|
|
mc:Ignorable="d"
|
|
d:DesignHeight="450" d:DesignWidth="800">
|
|
<UserControl.Resources>
|
|
<valueConverts:EnumDescriptionConverter x:Key="EnumDescriptionConverter"/>
|
|
</UserControl.Resources>
|
|
|
|
<DockPanel>
|
|
<!-- 顶部导航栏 -->
|
|
<Border DockPanel.Dock="Top" Margin="20,10" Padding="15">
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto"/>
|
|
<ColumnDefinition Width="*"/>
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- 返回MQTT列表按钮 -->
|
|
<Button Grid.Column="0"
|
|
Command="{Binding NavigateToMqttsCommand}"
|
|
Style="{StaticResource ButtonDefault}"
|
|
ToolTip="返回MQTT服务器列表"
|
|
Margin="0,0,10,0">
|
|
<Button.Content>
|
|
<StackPanel Orientation="Horizontal">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ArrowLeft8}" />
|
|
</StackPanel>
|
|
</Button.Content>
|
|
</Button>
|
|
|
|
<!-- 操作菜单栏 -->
|
|
<ui:CommandBar Grid.Column="1"
|
|
DefaultLabelPosition="Right"
|
|
IsOpen="False"
|
|
HorizontalAlignment="Right">
|
|
|
|
<ui:AppBarButton x:Name="EditButton" Label="编辑" Command="{Binding EditMqttCommand}">
|
|
<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 Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="8" Margin="0,0,0,10" Padding="15">
|
|
<Border.Effect>
|
|
<DropShadowEffect ShadowDepth="2" BlurRadius="5" Opacity="0.1" 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 FontFamily="{StaticResource MdFontIcons}"
|
|
Glyph="󰒋"
|
|
FontSize="24"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,10,0"
|
|
Foreground="#2196F3"/>
|
|
<TextBlock Text="MQTT 服务器详情"
|
|
Style="{StaticResource SubtitleTextBlockStyle}"
|
|
VerticalAlignment="Center"/>
|
|
</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" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Tag}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="名称:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CurrentMqtt.ServerName}"
|
|
Margin="0,0,10,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.World}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="主机:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding CurrentMqtt.ServerUrl}"
|
|
Margin="0,0,0,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ConnectApp}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="端口:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding CurrentMqtt.Port}"
|
|
Margin="0,0,10,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ContactInfo}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="客户端ID:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding CurrentMqtt.ClientId}"
|
|
Margin="0,0,0,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="2" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.People}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="用户名:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding CurrentMqtt.Username}"
|
|
Margin="0,0,10,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Lock}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="密码:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="2" Grid.Column="3" Text="{Binding CurrentMqtt.Password}"
|
|
Margin="0,0,0,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="3" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon FontFamily="{StaticResource MdFontIcons}"
|
|
Glyph="󰚧"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="发布主题:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding CurrentMqtt.PublishTopic}"
|
|
Margin="0,0,10,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="3" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon FontFamily="{StaticResource MdFontIcons}"
|
|
Glyph="󰂞"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="订阅主题:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="3" Grid.Column="3" Text="{Binding CurrentMqtt.SubscribeTopic}"
|
|
Margin="0,0,0,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="4" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.PC1}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="平台:" VerticalAlignment="Center"/>
|
|
</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" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Mail}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="消息头:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="5" Grid.Column="1" Text="{Binding CurrentMqtt.MessageHeader}"
|
|
Margin="0,0,10,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="5" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Mail}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="消息内容:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="5" Grid.Column="3" Text="{Binding CurrentMqtt.MessageContent}"
|
|
Margin="0,0,0,12" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
|
|
<StackPanel Grid.Row="6" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,0">
|
|
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Mail}"
|
|
FontSize="16"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,5,0"
|
|
Foreground="#666666"/>
|
|
<TextBlock Text="消息尾:" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Row="6" Grid.Column="1" Text="{Binding CurrentMqtt.MessageFooter}"
|
|
Margin="0,0,10,0" VerticalAlignment="Center"
|
|
FontWeight="SemiBold" Foreground="#333333"/>
|
|
</Grid>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- Associated Variables -->
|
|
<Border Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="8" Margin="0,0,0,10" Padding="15">
|
|
<Border.Effect>
|
|
<DropShadowEffect ShadowDepth="2" BlurRadius="5" Opacity="0.1" Color="#888888"/>
|
|
</Border.Effect>
|
|
|
|
<Grid>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="*"/>
|
|
</Grid.RowDefinitions>
|
|
<TextBlock Grid.Row="0" Text="关联变量" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,10"/>
|
|
<DataGrid Grid.Row="1" x:Name="AssociatedVariablesDataGrid"
|
|
ItemsSource="{Binding CurrentMqtt.VariableAliases}"
|
|
AutoGenerateColumns="False"
|
|
CanUserAddRows="False"
|
|
CanUserDeleteRows="False"
|
|
IsReadOnly="True"
|
|
SelectionMode="Extended">
|
|
<DataGrid.ContextMenu>
|
|
<ContextMenu>
|
|
<MenuItem Header="修改发送名称" Command="{Binding ModifyAliasCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=DataGrid}, Path=SelectedItems[0]}"/>
|
|
</ContextMenu>
|
|
</DataGrid.ContextMenu>
|
|
<DataGrid.Columns>
|
|
<DataGridTextColumn Header="设备名称" Binding="{Binding Variable.VariableTable.Device.Name}"/>
|
|
<DataGridTextColumn Header="变量表名称" Binding="{Binding Variable.VariableTable.Name}"/>
|
|
<DataGridTextColumn Header="变量名称" Binding="{Binding Variable.Name}"/>
|
|
<DataGridTextColumn Header="MQTT发送名称" Binding="{Binding Alias}"/>
|
|
<DataGridTextColumn Header="地址" Binding="{Binding Variable.S7Address}"/>
|
|
<DataGridTextColumn Header="数据类型" Binding="{Binding Variable.DataType}"/>
|
|
<DataGridTextColumn Header="显示值" Binding="{Binding Variable.DisplayValue}"/>
|
|
<DataGridTextColumn Header="更新时间" Binding="{Binding Variable.UpdatedAt, StringFormat='yyyy-MM-dd HH:mm:ss'}"/>
|
|
</DataGrid.Columns>
|
|
</DataGrid>
|
|
</Grid>
|
|
</Border>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</DockPanel>
|
|
</UserControl> |