You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
11 KiB
386 lines
11 KiB
@page "/paramSetting" |
|
@using EGFramework |
|
@using Pages |
|
@using System.Numerics |
|
@implements IEGFramework |
|
@rendermode InteractiveServer |
|
|
|
<PageTitle>参数设置</PageTitle> |
|
<h1>参数设置</h1> |
|
|
|
<EditForm Model="@DataSettings" OnValidSubmit="@HandleValidSubmit" Context="EditContext"> |
|
<DataAnnotationsValidator /> |
|
<ValidationSummary /> |
|
|
|
<div class="settings-container"> |
|
|
|
<h2>基本设置</h2> |
|
|
|
<div class="form-group"> |
|
<label for="deviceId">设备编号:</label> |
|
<InputNumber id="deviceId" class="form-control" @bind-Value="@DataSettings.DeviceID" /> |
|
<ValidationMessage For="@(() => DataSettings.DeviceID)" /> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="moveSpeed">移动速度 (0-1000):</label> |
|
<InputNumber id="moveSpeed" class="form-control" @bind-Value="@DataSettings.MoveSpeed" /> |
|
<ValidationMessage For="@(() => DataSettings.MoveSpeed)" /> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="moveLowSpeed">低速移动速度 (0-500):</label> |
|
<InputNumber id="moveLowSpeed" class="form-control" @bind-Value="@DataSettings.MoveLowSpeed" /> |
|
<ValidationMessage For="@(() => DataSettings.MoveLowSpeed)" /> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="rotateSpeed">旋转速度 (0-360):</label> |
|
<InputNumber id="rotateSpeed" class="form-control" @bind-Value="@DataSettings.RotateSpeed" /> |
|
<ValidationMessage For="@(() => DataSettings.RotateSpeed)" /> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="timeoutStop">超时停止 (毫秒):</label> |
|
<InputNumber id="timeoutStop" class="form-control" @bind-Value="@DataSettings.TimeoutStop" /> |
|
<ValidationMessage For="@(() => DataSettings.TimeoutStop)" /> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="colorOffset">颜色偏移量 (0.0-5.0):</label> |
|
<InputNumber id="colorOffset" class="form-control" @bind-Value="@DataSettings.ColorOffset" step="0.01" /> |
|
<ValidationMessage For="@(() => DataSettings.ColorOffset)" /> |
|
</div> |
|
|
|
<div class="color-mapping-container"> |
|
<h3>颜色映射设置</h3> |
|
|
|
<div class="color-mapping-list"> |
|
<!-- 现有颜色映射项 --> |
|
@foreach (var color in DataSettings.ColorMapping) |
|
{ |
|
<div class="color-mapping-item"> |
|
<div class="form-group"> |
|
<label>位置ID</label> |
|
<input type="number" class="form-control" value="@color.Key" readonly /> |
|
</div> |
|
<div class="form-group"> |
|
<label>色相0-360</label> |
|
<input type="number" class="form-control" value="@color.Value.X" min="0" max="360" /> |
|
</div> |
|
<div class="form-group"> |
|
<label>饱和度</label> |
|
<input type="number" class="form-control" value="@color.Value.Y" min="0" max="100" /> |
|
</div> |
|
<div class="form-group"> |
|
<label>明度</label> |
|
<input type="number" class="form-control" value="@color.Value.Z" min="0" max="100" /> |
|
</div> |
|
<button type="button" class="btn btn-danger delete-btn" title="删除" @onclick="e=>RemoveColorMapping(color.Key)"> |
|
<i class="delete-icon">×</i> |
|
</button> |
|
</div> |
|
} |
|
</div> |
|
|
|
<!-- 添加新项目按钮 --> |
|
<div class="add-color-mapping"> |
|
<InputNumber type="number" class="form-control" @bind-Value="@newColorKey" min="0" max="200" /> |
|
<button type="button" class="btn btn-primary add-btn" @onclick="AddColorMapping"> |
|
<i class="add-icon">+</i> 添加颜色映射 |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<h2>动作状态</h2> |
|
|
|
<div class="form-group"> |
|
<label for="position">位置 (0-25):</label> |
|
<input id="position" class="form-control" value="@DataActionStatus.Position" readonly /> |
|
<ValidationMessage For="@(() => DataActionStatus.Position)" /> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="rotate">旋转角度 (0-90):</label> |
|
<input id="rotate" class="form-control" value="@DataActionStatus.Rotate" readonly /> |
|
<ValidationMessage For="@(() => DataActionStatus.Rotate)" /> |
|
</div> |
|
|
|
<div class="form-actions"> |
|
<button type="submit" class="btn btn-primary">保存设置</button> |
|
<button type="button" class="btn btn-secondary" @onclick="ResetToDefaults">恢复默认</button> |
|
</div> |
|
</div> |
|
</EditForm> |
|
|
|
@code { |
|
private DataSetting DataSettings { get; set; } |
|
private DataActionStatus DataActionStatus { get; set; } |
|
public int newColorKey { set; get; } |
|
private EditContext? EditContext; |
|
|
|
protected override void OnInitialized() |
|
{ |
|
// 这里应该从数据存储加载设置 |
|
LoadSettings(); |
|
EditContext = new EditContext(DataSettings); |
|
} |
|
|
|
private void LoadSettings() |
|
{ |
|
// 模拟加载设置数据 |
|
DataSettings = this.GetModule<ModelParamSetting>().Setting; |
|
DataActionStatus = this.GetModule<ModelActionStatus>().Status; |
|
} |
|
|
|
private void HandleValidSubmit() |
|
{ |
|
// 这里应该保存设置到数据存储 |
|
this.GetModule<ModelParamSetting>().Save(DataSettings); |
|
Console.WriteLine("设置已保存"); |
|
// 显示成功消息或导航到其他页面 |
|
} |
|
|
|
private void ResetToDefaults() |
|
{ |
|
DataSettings = this.GetModule<ModelParamSetting>().CreateDefault(); |
|
EditContext = new EditContext(DataSettings); |
|
} |
|
|
|
private void AddColorMapping() |
|
{ |
|
if (!DataSettings.ColorMapping.ContainsKey(newColorKey)) |
|
{ |
|
DataSettings.ColorMapping[newColorKey] = new Vector3(0, 0, 0); |
|
StateHasChanged(); |
|
} |
|
} |
|
|
|
private void RemoveColorMapping(int key) |
|
{ |
|
if (DataSettings.ColorMapping.ContainsKey(key)) |
|
{ |
|
DataSettings.ColorMapping.Remove(key); |
|
StateHasChanged(); |
|
} |
|
} |
|
} |
|
|
|
<style> |
|
.settings-container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
background-color: #f8f9fa; |
|
border-radius: 8px; |
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.form-group label { |
|
display: block; |
|
margin-bottom: 0.5rem; |
|
font-weight: 500; |
|
} |
|
|
|
.form-control { |
|
width: 100%; |
|
padding: 0.5rem; |
|
border: 1px solid #ced4da; |
|
border-radius: 0.25rem; |
|
} |
|
|
|
.small-input { |
|
width: 80px; |
|
display: inline-block; |
|
margin-right: 0.5rem; |
|
} |
|
|
|
.color-mapping-container { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.color-mapping-item { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 0.5rem; |
|
padding: 0.5rem; |
|
background-color: white; |
|
border-radius: 0.25rem; |
|
} |
|
|
|
.color-mapping-item span { |
|
margin-right: 1rem; |
|
min-width: 60px; |
|
} |
|
|
|
.add-color-mapping { |
|
display: flex; |
|
align-items: center; |
|
margin-top: 1rem; |
|
} |
|
|
|
.add-color-mapping input { |
|
width: 100px; |
|
margin-right: 1rem; |
|
} |
|
|
|
.form-actions { |
|
margin-top: 2rem; |
|
display: flex; |
|
gap: 1rem; |
|
} |
|
|
|
.btn { |
|
padding: 0.5rem 1rem; |
|
border: none; |
|
border-radius: 0.25rem; |
|
cursor: pointer; |
|
} |
|
|
|
.btn-primary { |
|
background-color: #007bff; |
|
color: white; |
|
} |
|
|
|
.btn-secondary { |
|
background-color: #6c757d; |
|
color: white; |
|
} |
|
|
|
.btn-danger { |
|
background-color: #dc3545; |
|
color: white; |
|
} |
|
|
|
h2 { |
|
margin-top: 2rem; |
|
margin-bottom: 1rem; |
|
padding-bottom: 0.5rem; |
|
border-bottom: 1px solid #dee2e6; |
|
} |
|
|
|
.color-mapping-container { |
|
margin: 20px 0; |
|
padding: 20px; |
|
background-color: #f8f9fa; |
|
border-radius: 8px; |
|
border: 1px solid #dee2e6; |
|
} |
|
|
|
.color-mapping-container h3 { |
|
margin-bottom: 20px; |
|
color: #495057; |
|
font-size: 1.25rem; |
|
font-weight: 600; |
|
} |
|
|
|
.color-mapping-list { |
|
margin-bottom: 20px; |
|
} |
|
|
|
.color-mapping-item { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr 1fr 1fr auto; |
|
gap: 12px; |
|
align-items: end; |
|
padding: 15px; |
|
margin-bottom: 12px; |
|
background-color: white; |
|
border-radius: 6px; |
|
border: 1px solid #e9ecef; |
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 0; |
|
} |
|
|
|
.form-group label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-size: 0.875rem; |
|
color: #6c757d; |
|
font-weight: 500; |
|
} |
|
|
|
.form-control { |
|
width: 100%; |
|
padding: 8px 12px; |
|
border: 1px solid #ced4da; |
|
border-radius: 4px; |
|
font-size: 0.875rem; |
|
transition: border-color 0.15s ease-in-out; |
|
} |
|
|
|
.form-control:focus { |
|
border-color: #007bff; |
|
outline: none; |
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); |
|
} |
|
|
|
.delete-btn { |
|
width: 40px; |
|
height: 40px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 0; |
|
border: none; |
|
border-radius: 4px; |
|
background-color: #dc3545; |
|
color: white; |
|
cursor: pointer; |
|
transition: background-color 0.15s ease-in-out; |
|
} |
|
|
|
.delete-btn:hover { |
|
background-color: #c82333; |
|
} |
|
|
|
.delete-icon { |
|
font-size: 1.25rem; |
|
font-weight: bold; |
|
line-height: 1; |
|
} |
|
|
|
.add-btn { |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 8px; |
|
padding: 10px 20px; |
|
border: none; |
|
border-radius: 6px; |
|
background-color: #007bff; |
|
color: white; |
|
font-weight: 500; |
|
cursor: pointer; |
|
transition: background-color 0.15s ease-in-out; |
|
} |
|
|
|
.add-btn:hover { |
|
background-color: #0056b3; |
|
} |
|
|
|
.add-icon { |
|
font-size: 1.1rem; |
|
font-weight: bold; |
|
line-height: 1; |
|
} |
|
|
|
/* 响应式设计 */ |
|
@@media (max-width: 768px) { |
|
.color-mapping-item { |
|
grid-template-columns: 1fr; |
|
gap: 8px; |
|
} |
|
|
|
.delete-btn { |
|
width: 100%; |
|
margin-top: 10px; |
|
} |
|
} |
|
</style> |