TargetService/Components/Pages/Control.razor

@page "/control"
@using Pages
@using System.Numerics
@using EGFramework
@implements IEGFramework
@rendermode InteractiveServer

<PageTitle>空轨控制</PageTitle>

<h1>空轨控制</h1>

<div class="control-panel">
    <div class="status-display">
        <p>当前位置: <strong>@dataActionStatus.Position</strong> / 25</p>
        <p>旋转角度: <strong>@dataActionStatus.Rotate</strong>°</p>
        <p>当前定位点: <strong>@(currentLocationName ?? "无")</strong></p>
    </div>

    <div class="control-section">
        <h3>位置控制</h3>
        <div class="slider-container">
            <div class="position-markers">
                @foreach (var marker in locationMarkers)
                {
                    <div class="position-marker" 
                         style="left: @((marker.Key / 25.0) * 100)%; 
                                 background-color: @GetMarkerColor(marker.Value)"
                         title="@marker.Key - @GetLocationName(marker.Key)">
                    </div>
                }
            </div>
            <input type="range" 
                   class="form-range location-slider" 
                   min="0" 
                   max="25" 
                   step="1" 
                   value="@dataActionStatus.Position" 
                   @oninput="OnPositionSliderInput"
                   disabled="@isMoving" />
            <span class="slider-value">@dataActionStatus.Position</span>
        </div>
        <button class="btn btn-secondary mt-2" @onclick="MoveToPosition" disabled="@isMoving">
            @(isMoving ? "移动中..." : "开始移动")
        </button>
        <br />
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.EnableTrack" >启用通讯
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StartTrack" >前进
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.BackTrack" >后退
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StartSlowTrack" >缓速前进
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.BackSlowTrack" >缓速后退
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StopTrack" >停止
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.BreakTrack" >刹车
        </button>
        <br />
        <button class="btn btn-secondary mt-2" @onclick="StartScanColor" >开启扫描
        </button>
        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StopScanColor" >结束扫描
        </button>
        

    </div>

    <div class="control-section">
        <h3>快速定位</h3>
        <div class="location-buttons">
            @foreach (var location in locationMarkers)
            {
                <button class="btn location-btn" 
                        style="background-color: @GetMarkerColor(location.Value); color: white"
                        @onclick="e => MoveToLocation(location.Key)"
                        disabled="@isMoving">
                    @GetLocationName(location.Key)
                </button>
            }
        </div>
    </div>

    <div class="control-section">
        <h3>颜色显示</h3>
        <div class="color-display" style="background-color: @GetColorValue(CurrentColor)">
            <span>RGB: @((int)(CurrentColor.X * 255)), @((int)(CurrentColor.Y * 255)), @((int)(CurrentColor.Z * 255))
            HSV: @((int)(CurrentHSV.X)), @((int)(CurrentHSV.Y)), @((int)(CurrentHSV.Z))
            </span>
        </div>
    </div>

    <div class="control-section">
        <h3>靶机控制</h3>
        <button class="btn @(isTargetActive ? "btn-danger" : "btn-success")" 
                @onclick="ToggleTarget"
                disabled="@isTargetOperationInProgress">
            @if (isTargetOperationInProgress)
            {
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                <span>@(isTargetActive ? "停止中..." : "启动中...")</span>
            }
            else
            {
                <span>@(isTargetActive ? "停止靶机" : "启动靶机")</span>
            }
        </button>
    </div>

    @if (isMoving)
    {
        <div class="moving-overlay">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">移动中...</span>
            </div>
            <p>空轨移动中，请等待...</p>
        </div>
    }
</div>

@code {
    private DataActionStatus dataActionStatus = new DataActionStatus { Position = 0, Rotate = 0 };
    private bool isMoving = false;
    private bool isTargetActive = false;
    private bool isTargetOperationInProgress = false;
    private int targetPosition;
    private string? currentLocationName;
    private Vector3 CurrentColor = new Vector3(0.5f, 0.5f, 0.5f); // 默认灰色
    private Vector3 CurrentHSV = new Vector3();

    public ModelTrackControl ModelTrackControl { set; get; }

    // 定义定位点字典
    private Dictionary<int, Vector3> locationMarkers = new Dictionary<int, Vector3>
    {
        { 0, new Vector3(0.3f, 0.8f, 0.12f) },     // 浅绿 - 起点
        { 7, new Vector3(0.1f, 0.5f, 0.2f) },    // 深绿色 - 中间点1
        { 10, new Vector3(0.0f, 0.5f, 1.0f) },   // 蓝色 - 中间点2
        { 15, new Vector3(0.5f, 0.2f, 0.75f) },   // 紫色 - 中间点3
        { 25, new Vector3(0.8f, 0.2f, 0.5f) }    // 洋红色 - 终点
    };

    protected override void OnInitialized()
    {
        UpdateCurrentLocationName();
        ModelTrackControl = this.GetModule<ModelTrackControl>();
    }

    private void OnPositionSliderInput(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value?.ToString(), out int value))
        {
            // 寻找最近的定位点
            var nearestLocation = locationMarkers.Keys
                .OrderBy(x => Math.Abs(x - value))
                .First();
            
            targetPosition = nearestLocation;
            UpdateCurrentLocationName(targetPosition);
        }
    }

    
    private async Task StartScanColor(){
        if(ModelTrackControl.IsScanning) return;
        ModelTrackControl.StartScanColor();
        StateHasChanged();
        while(ModelTrackControl.IsScanning){
            // 更新颜色显示
            UpdateCurrentColor();
            
            StateHasChanged();
            await Task.Delay(50);
        }
    }

    private async Task MoveToPosition()
    {
        if (isMoving) return;
        
        isMoving = true;
        StateHasChanged();
        
        // 模拟移动过程
        int steps = Math.Abs(targetPosition - dataActionStatus.Position);
        int direction = targetPosition > dataActionStatus.Position ? 1 : -1;
        
        while(ModelTrackControl.MoveStatus != StatusTrack.Stop)
        {
            if(targetPosition!=dataActionStatus.Position){
                dataActionStatus.Position += direction;
            }
            
            // 更新颜色显示
            UpdateCurrentColor();
            
            StateHasChanged();
            await Task.Delay(50);
        }
        
        UpdateCurrentLocationName();
        isMoving = false;
    }

    private async Task MoveToLocation(int position)
    {
        targetPosition = position;
        this.ModelTrackControl.MoveToPosition(position);
        await MoveToPosition();
    }

    private async Task ToggleTarget()
    {
        if (isTargetOperationInProgress) return;
        
        isTargetOperationInProgress = true;
        StateHasChanged();
        
        
        
        isTargetActive = !isTargetActive;
        if(isTargetActive){
            this.ModelTrackControl.StartTarget();
        }else{
            this.ModelTrackControl.RevertTarget();
        }
        // 模拟靶机操作延迟
        await Task.Delay(2000);
        
        dataActionStatus.Rotate = isTargetActive ? 90 : 0;
        
        isTargetOperationInProgress = false;
        StateHasChanged();
    }

    private string GetMarkerColor(Vector3 colorVector)
    {
        // 将Vector3转换为CSS颜色值
        return $"rgb({(int)(colorVector.X * 255)}, {(int)(colorVector.Y * 255)}, {(int)(colorVector.Z * 255)})";
    }
    
    private string GetColorValue(Vector3 colorVector)
    {
        // 将Vector3转换为CSS颜色值
        return $"rgb({(int)(colorVector.X * 255)}, {(int)(colorVector.Y * 255)}, {(int)(colorVector.Z * 255)})";
    }

    private string GetLocationName(int position)
    {
        return locationMarkers.ContainsKey(position) ? 
            $"定位点 {position}" : 
            position.ToString();
    }

    private void UpdateCurrentLocationName(int? position = null)
    {
        int pos = position ?? dataActionStatus.Position;
        currentLocationName = locationMarkers.ContainsKey(pos) ? 
            $"定位点 {pos}" : 
            null;
    }
    
    private void UpdateCurrentColor()
    {
        // 根据传感器检测到的颜色进行更新
        CurrentColor = this.ModelTrackControl.GetColor();
        CurrentHSV = this.ModelTrackControl.GetColorHSV();
    }
}

<style>
    .control-panel {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .control-section {
        margin-bottom: 25px;
    }

    .slider-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        margin-bottom: 15px;
    }

    .position-markers {
        position: relative;
        height: 20px;
        width: 100%;
    }

    .position-marker {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transform: translateX(-50%);
        top: 4px;
        border: 2px solid white;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
    }

    .location-slider {
        width: 100%;
    }

    .slider-value {
        text-align: center;
        font-weight: bold;
        margin-top: 5px;
    }

    .location-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .location-btn {
        flex: 1;
        min-width: 120px;
        border: none;
    }

    .color-display {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        font-weight: bold;
    }

    .status-display {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .moving-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }
</style>