DLL-20260616
/
WSCommModifyService


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>串口调试工具</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>串口调试工具</h1>

        <!-- 端口控制区域 -->
        <div class="control-section">
            <div class="port-controls">
                <label for="portSelect">端口:</label>
                <div class="port-select-wrapper">
                    <input type="text" id="portSelect" placeholder="例如: 1">
                    <div id="portOptions" class="port-options">
                        <div class="port-option" data-value="1">1</div>
                        <div class="port-option" data-value="2">2</div>
                        <div class="port-option" data-value="3">3</div>
                        <div class="port-option" data-value="4">4</div>
                        <div class="port-option" data-value="5">5</div>
                        <div class="port-option" data-value="6">6</div>
                        <div class="port-option" data-value="7">7</div>
                        <div class="port-option" data-value="8">8</div>
                    </div>
                </div>
                <div class="btn-group">
                    <button id="startBtn" class="btn btn-primary">开始监听</button>
                    <button id="stopBtn" class="btn btn-secondary">停止监听</button>
                    <button id="clearBtn" class="btn btn-warning">清空日志</button>
                </div>
            </div>
        </div>

        <!-- 数据操作区域 -->
        <div class="data-section">
            <div class="data-controls">
                <div class="input-group">
                    <input type="text" id="readData" placeholder="读数据，例如: 11 22 33" />
                    <button id="readSendBtn" class="btn btn-info">读发送</button>
                </div>

                <div class="input-group">
                    <input type="text" id="writeData" placeholder="写数据，例如: 11 22 33" />
                    <button id="writeSendBtn" class="btn btn-success">写发送</button>
                </div>
            </div>
        </div>

        <!-- 复选框控制区域 -->
        <div class="checkbox-section">
            <h3>数据处理选项</h3>
            
            <!-- 三个复选框 -->
            <div class="checkbox-group">
                <label>
                    <input type="checkbox" id="writeToWriteSend"> 写入数据 → 写发送
                </label>
                <label>
                    <input type="checkbox" id="readToReadSend"> 读取数据 → 读发送
                </label>
                <label>
                    <input type="checkbox" id="readToModifyData"> 读取数据 → 修改数据
                </label>
            </div>
            
            <!-- 数据表格 -->
            <table id="dataTable" class="data-table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>原始值</th>
                        <th>最大值</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 数据将通过JavaScript动态填充 -->
                </tbody>
            </table>
        </div>

        <!-- 日志输出区域 -->
        <div class="log-section">
            <h3>日志输出</h3>
            <div id="logOutput" class="log-output"></div>
        </div>

        <!-- 连接状态 -->
        <div class="status-section">
            <span id="connectionStatus" class="status disconnected">未连接</span>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>