Telnet/CLI命令的快速查询页面
每次使用常用还好，不常用的记不太住，所以有了这玩意，纯前端，有需要的同学代码自取。
源代码
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
}
.description {
font-size: 1.1rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.controls {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.search-box {
flex-grow: 1;
min-width: 300px;
position: relative;
}
.search-box input {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
padding-left: 40px;
}
.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #777;
}
.filter-options {
display: flex;
gap: 10px;
}
.filter-btn {
padding: 10px 15px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
}
.filter-btn.active {
background-color: #2575fc;
color: white;
border-color: #2575fc;
}
.commands-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
}
.command-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
padding: 20px;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.command-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.command-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.command-name {
font-weight: bold;
font-size: 1.2rem;
color: #2575fc;
}
.copy-btn {
background-color: #f0f5ff;
color: #2575fc;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s;
}
.copy-btn:hover {
background-color: #e1ebff;
}
.command-desc {
margin-bottom: 15px;
color: #555;
}
.command-format {
background-color: #f8f9fa;
padding: 12px;
border-radius: 6px;
font-family: monospace;
margin-bottom: 10px;
border-left: 3px solid #2575fc;
}
.command-params {
font-size: 0.9rem;
color: #666;
}
.command-params strong {
color: #333;
}
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4caf50;
color: white;
padding: 15px 25px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
transform: translateY(100px);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
z-index: 1000;
}
.notification.show {
transform: translateY(0);
opacity: 1;
}
@media (max-width: 768px) {
.commands-grid {
grid-template-columns: 1fr;
}
.controls {
flex-direction: column;
}
.search-box {
min-width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>网关命令集快速修改工具</h1>
<p class="description">提供网关Telnet/CLI命令的快速查询、复制和修改功能，方便开发调试</p>
</header>
<div class="controls">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" placeholder="搜索命令名称、描述或参数...">
</div>
<div class="filter-options">
<button class="filter-btn active" data-filter="all">全部命令</button>
<button class="filter-btn" data-filter="query">查询命令</button>
<button class="filter-btn" data-filter="config">配置命令</button>
<button class="filter-btn" data-filter="device">设备管理</button>
</div>
</div>
<div class="commands-grid" id="commandsContainer">
<!-- 命令卡片将通过JavaScript动态生成 -->
</div>
</div>
<div class="notification" id="notification">命令已复制到剪贴板</div>
<script>
// 命令数据
const commands = [
{
name: "list",
description: "查询网关支持的命令详情",
format: "list()",
params: "无参数",
category: "query"
},
{
name: "devinit",
description: "删除网关内添加过的全部设备列表",
format: "devinit()",
params: "无参数",
category: "device"
},
{
name: "devinfols",
description: "查询网关已经添加的设备列表",
format: "devinfols(0)",
params: "0-查询全部；1-查询通道1；2-查询通道2",
category: "query"
},
{
name: "deletedev",
description: "单条删除网关内的设备列表",
format: "deletedev(65535)",
params: "终端设备机号（HistId）",
category: "device"
},
{
name: "sethostip",
description: "设置网关通信本地 IP 地址",
format: 'sethostip("10.10.8.254")',
params: "IP 地址字符串",
category: "config"
},
{
name: "setserverip",
description: "设置通信服务器 IP 地址",
format: 'setserverip("10.10.8.134")',
params: "IP 地址字符串",
category: "config"
},
{
name: "sethostmask",
description: "设置网关通信子网掩码",
format: 'sethostgw("10.10.8.1")',
params: "IP 地址字符串",
category: "config"
},
{
name: "sethostgw",
description: "设置网关通信网关（网段内的网关）IP 地址",
format: 'sethostip("10.10.8.254")',
params: "IP 地址字符串",
category: "config"
},
{
name: "sethostmac",
description: "设置网关本地 MAC 地址",
format: 'sethostmac("0:1:3:255:206:145")',
params: "设置时不能出现字符的字符",
category: "config"
},
{
name: "setserverport",
description: "设置通信服务器通信端口",
format: "setserverport(9005)",
params: "整数值",
category: "config"
},
{
name: "setdhcp",
description: "设置DHCP",
format: "setdhcp()",
params: "参数未提供",
category: "config"
},
{
name: "setversion",
description: "设置在线升级版本号（非程序版本）",
format: "setversion(31001)",
params: "整数值",
category: "config"
},
{
name: "gwinfo",
description: "查询网关信息",
format: "gwinfo()",
params: "无参数",
category: "query"
},
{
name: "dump",
description: "打开程序运行状态信息",
format: "dump(1)",
params: "不同的值，可以查看到不同的运行状态信息",
category: "query"
},
{
name: "update",
description: "启动网关为设备做在线升级",
format: "update(165)",
params: "165 启动/0 停止",
category: "device"
},
{
name: "reboot",
description: "重启网关",
format: "reboot()",
params: "无参数",
category: "config"
},
{
name: "quit",
description: "退出 telnet",
format: "quit",
params: "无参数",
category: "config"
},
{
name: "queue",
description: "批量添加 485 终端设备",
format: "queue(1)",
params: "1 表示 485 地址 -开启 0-禁止",
category: "device"
},
{
name: "discovery",
description: "单个添加 485 终端设备",
format: "discovery(1)",
params: "1 代表 485 通道 1",
category: "device"
},
{
name: "autodiscovery",
description: "启动自动单个添加 485 终端设备",
format: "autodiscovery(1)",
params: "1-开启 0-禁止使用单个添加，确保总线上只有一个设备等待添加",
category: "device"
},
{
name: "sethostSn",
description: "设置序列号（设置完自动重启）",
format: "sethostSn",
params: "参数传入序列号ACSSI1码",
category: "config"
},
{
name: "SyncDevList",
description: "上传设备列表给平台",
format: "SyncDevList(1)",
params: "参数未提供",
category: "device"
},
{
name: "channel_add",
description: "按通道和地址以及序列号添加设备",
format: 'channel_add("01260c122010001200A")',
params: "蓝色表示通道，红色表示通信地址，黑色表示序列号，绿色表示结束符号",
category: "device"
},
{
name: "super_register",
description: "按地址发广播（1-255）",
format: "super_register(1)",
params: "1-表示通道1 0-表示关闭",
category: "device"
},
{
name: "ping",
description: "Ping命令",
format: 'ping("10.10.8.1")',
params: "IP地址字符串",
category: "query"
}
];
// 渲染命令卡片
function renderCommands(filteredCommands = commands) {
const container = document.getElementById('commandsContainer');
container.innerHTML = '';
filteredCommands.forEach(command => {
const card = document.createElement('div');
card.className = 'command-card';
card.dataset.category = command.category;
card.innerHTML = `
<div class="command-header">
<div class="command-name">${command.name}</div>
<button class="copy-btn" data-command="${command.format}">
<i class="far fa-copy"></i> 复制
</button>
</div>
<div class="command-desc">${command.description}</div>
<div class="command-format">${command.format}</div>
<div class="command-params"><strong>参数说明:</strong> ${command.params}</div>
`;
container.appendChild(card);
});
// 添加复制事件监听器
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', function() {
const commandText = this.getAttribute('data-command');
copyToClipboard(commandText);
showNotification();
});
});
}
// 复制到剪贴板
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
// 显示通知
function showNotification() {
const notification = document.getElementById('notification');
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 2000);
}
// 搜索功能
document.getElementById('searchInput').addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
if (searchTerm === '') {
applyFilter();
return;
}
const filteredCommands = commands.filter(command =>
command.name.toLowerCase().includes(searchTerm) ||
command.description.toLowerCase().includes(searchTerm) ||
command.params.toLowerCase().includes(searchTerm)
);
renderCommands(filteredCommands);
});
// 筛选功能
let currentFilter = 'all';
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
currentFilter = this.getAttribute('data-filter');
applyFilter();
});
});
function applyFilter() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
let filteredCommands = commands;
if (currentFilter !== 'all') {
filteredCommands = commands.filter(command => command.category === currentFilter);
}
if (searchTerm !== '') {
filteredCommands = filteredCommands.filter(command =>
command.name.toLowerCase().includes(searchTerm) ||
command.description.toLowerCase().includes(searchTerm) ||
command.params.toLowerCase().includes(searchTerm)
);
}
renderCommands(filteredCommands);
}
// 初始渲染
renderCommands();
</script>
</body>
</html>
版权声明：
作者：SnapiQ
链接：http://www.dc6i.cn/271.html
文章版权归作者所有，未经允许请勿转载。
THE END
