Netty实战Zz5

Zz5-XDU

已于 2024-09-09 11:00:17 修改

阅读量24

点赞数 2

文章标签： JAVA

于 2024-08-15 18:40:44 首次发布

To generate the front-end code for the UI depicted in your sketch, I’ll create a basic HTML structure with some CSS for styling and JavaScript to handle the dropdown selection. Here’s an example based on your image:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Protocol Selection</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .container {
            border: 1px solid #000;
            padding: 20px;
            width: 300px;
        }

        .header {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .dropdown {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .dropdown select {
            padding: 5px;
            width: 200px;
        }

        .button {
            margin-top: 20px;
            text-align: center;
        }

        .button button {
            padding: 10px 20px;
            background-color: #f0f0f0;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header">已选设备: OC:8B:45:3A</div>
    
    <div class="dropdown">
        <label for="pre-adopt-request">PRE-ADOPT-REQUEST</label>
        <select id="pre-adopt-request">
            <option value="v1">v1</option>
            <option value="v2">v2</option>
            <!-- Add more versions if needed -->
        </select>
    </div>

    <div class="dropdown">
        <label for="pre-connect-info">PRE-CONNECT-INFO-RESPONSE</label>
        <select id="pre-connect-info">
            <option value="v1">v1</option>
            <option value="v2">v2</option>
            <!-- Add more versions if needed -->
        </select>
    </div>

    <div class="dropdown">
        <label for="device-verif-response">DEVICE-VERIF-RESPONSE</label>
        <select id="device-verif-response">
            <option value="v1">v1</option>
            <option value="v2">v2</option>
            <!-- Add more versions if needed -->
        </select>
    </div>

    <div class="dropdown">
        <label for="system-negotiation">SYSTEM-NEGOTIATION</label>
        <select id="system-negotiation">
            <option value="v1">v1</option>
            <option value="v2">v2</option>
            <!-- Add more versions if needed -->
        </select>
    </div>

    <div class="button">
        <button onclick="startCollection()">开始收集</button>
    </div>
</div>

<script>
    function startCollection() {
        const preAdoptRequest = document.getElementById('pre-adopt-request').value;
        const preConnectInfo = document.getElementById('pre-connect-info').value;
        const deviceVerifResponse = document.getElementById('device-verif-response').value;
        const systemNegotiation = document.getElementById('system-negotiation').value;

        alert(`Selected Versions:\nPRE-ADOPT-REQUEST: ${preAdoptRequest}\nPRE-CONNECT-INFO-RESPONSE: ${preConnectInfo}\nDEVICE-VERIF-RESPONSE: ${deviceVerifResponse}\nSYSTEM-NEGOTIATION: ${systemNegotiation}`);
    }
</script>

</body>
</html>

Explanation:

HTML Structure:
- Container: A div that wraps the entire form to make it easier to style.
- Dropdowns: Each dropdown corresponds to the different protocol versions. The select element is used to create the dropdown menu.
- Button: A button to trigger the action.
CSS:
- Basic styling is added to make the dropdowns and the button look more like the sketch.
JavaScript:
- When the button is clicked, the function startCollection() gets the selected values from each dropdown and displays them in an alert.

You can expand this code by adding more options to the dropdowns or by customizing the behavior of the button to suit your application’s needs.
根据你的需求，我将为你设计一个简单的前端界面，包含以下功能：

用户点击“加载报文”后，中间框会载入可编辑的Header和Body字段格式。
用户可以在中间的框内输入具体数据。
用户点击“下发报文”后，右侧的框将显示设备端的响应信息。

以下是一个使用HTML、CSS和JavaScript实现的前端代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: space-around;
            margin: 20px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            width: 30%;
            box-sizing: border-box;
        }
        .container h2 {
            text-align: center;
        }
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
        }
        .input-group select, .input-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .editable {
            height: 200px;
            overflow-y: auto;
            background: #f9f9f9;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>设备信息</h2>
    <div class="input-group">
        <label>已选设备：</label>
        <span>OC:8B:45:3A</span>
    </div>
    <div class="input-group">
        <label>设备类型：</label>
        <span>AP</span>
    </div>
    <div class="input-group">
        <label>报文类型：</label>
        <select id="reportType">
            <option value="SET">SET</option>
            <option value="GET">GET</option>
        </select>
    </div>
    <div class="input-group">
        <label>协议版本：</label>
        <select id="protocolVersion">
            <option value="v1">V1</option>
            <option value="v2">V2</option>
        </select>
    </div>
    <button id="loadMessage">加载报文</button>
</div>

<div class="container editable" id="messageContainer">
    <h2>报文信息</h2>
    <textarea id="messageEditor" placeholder="Header 和 Body 信息将在此处显示" style="height: 100%;"></textarea>
</div>

<div class="container">
    <h2>响应信息</h2>
    <textarea id="responseContainer" placeholder="设备端响应信息将显示在这里" readonly style="height: 200px;"></textarea>
    <button id="sendMessage">下发报文</button>
</div>

<script>
    document.getElementById('loadMessage').addEventListener('click', function () {
        // 模拟加载 Header 和 Body 的字段格式
        const messageEditor = document.getElementById('messageEditor');
        messageEditor.value = "Header: {key: value}\n\nBody: {key: value}";
    });

    document.getElementById('sendMessage').addEventListener('click', function () {
        // 模拟发送报文并显示响应信息
        const responseContainer = document.getElementById('responseContainer');
        responseContainer.value = "设备响应: 成功接收报文";
    });
</script>

</body>
</html>