1115 lines
45 KiB
JavaScript
1115 lines
45 KiB
JavaScript
/**
|
||
* pages.js — 页面渲染器
|
||
*
|
||
* 每个页面对象实现：
|
||
* render(container) — 渲染 HTML 到容器
|
||
* onEnter() — 页面激活时调用
|
||
* onLeave() — 页面离开时调用
|
||
* onData(signalType, arr) — 接收下行数据更新表格
|
||
*
|
||
* 术语映射：
|
||
* out → 注册 | in → 链接注册 | yk → 遥控 | ao → 参数 | param → 定值
|
||
*/
|
||
|
||
var CTRL_TYPE_MAP = { 0: '只读', 1: '直控', 2: '选控' };
|
||
|
||
/* ========================================================================
|
||
* 共用工具
|
||
* ======================================================================== */
|
||
function renderTable(containerId, headers, rowsHtml, emptyText) {
|
||
var html = '<div class="table-card"><div class="table-wrapper"><table class="signal-table">';
|
||
html += '<thead><tr>';
|
||
for (var i = 0; i < headers.length; i++) {
|
||
html += '<th>' + headers[i] + '</th>';
|
||
}
|
||
html += '</tr></thead><tbody id="' + containerId + '">';
|
||
if (rowsHtml) {
|
||
html += rowsHtml;
|
||
} else {
|
||
html += '<tr class="empty-row"><td colspan="' + headers.length + '">' + (emptyText || '暂无数据，请先添加信号') + '</td></tr>';
|
||
}
|
||
html += '</tbody></table></div></div>';
|
||
return html;
|
||
}
|
||
|
||
function fmtVal(v) {
|
||
if (v === null || v === undefined || v === '') return '-';
|
||
return String(v).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||
}
|
||
|
||
/* ------------------------------------------------------------------------
|
||
* XML 工具函数（导入导出）
|
||
* ------------------------------------------------------------------------ */
|
||
function escapeXml(str) {
|
||
if (typeof str !== 'string') return String(str);
|
||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||
}
|
||
|
||
/**
|
||
* 导出所有5种信号类型(out/in/yk/ao/param)到一个XML文件
|
||
*/
|
||
function exportAllToXml() {
|
||
var types = ['out', 'in', 'yk', 'ao', 'param'];
|
||
var typeLabels = { out:'注册', in:'链接注册', yk:'遥控', ao:'参数', param:'定值' };
|
||
var hasData = false;
|
||
|
||
var xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n';
|
||
|
||
for (var t = 0; t < types.length; t++) {
|
||
var st = types[t];
|
||
var data = null;
|
||
if (typeof App !== 'undefined' && App.getSignalData) {
|
||
data = App.getSignalData(st);
|
||
}
|
||
if (!data || !Array.isArray(data) || data.length === 0) {
|
||
xml += ' <signals type="' + st + '"/>\n';
|
||
continue;
|
||
}
|
||
hasData = true;
|
||
xml += ' <signals type="' + st + '">\n';
|
||
for (var i = 0; i < data.length; i++) {
|
||
xml += ' <signal no="' + i + '" saddr="' + escapeXml(data[i].saddr) + '"/>\n';
|
||
}
|
||
xml += ' </signals>\n';
|
||
}
|
||
|
||
xml += '</root>\n';
|
||
|
||
if (!hasData) {
|
||
alert('当前没有任何信号数据，无法导出');
|
||
return;
|
||
}
|
||
|
||
var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
|
||
var url = URL.createObjectURL(blob);
|
||
var a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'signals_all_' + Date.now() + '.xml';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
/**
|
||
* 从 XML 文件导入所有5种信号类型，按 type 分组批量执行 add
|
||
*/
|
||
function importAllFromXml() {
|
||
var input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = '.xml';
|
||
input.style.display = 'none';
|
||
document.body.appendChild(input);
|
||
|
||
input.onchange = function(e) {
|
||
var file = e.target.files[0];
|
||
if (!file) {
|
||
document.body.removeChild(input);
|
||
return;
|
||
}
|
||
|
||
var reader = new FileReader();
|
||
reader.onload = function(ev) {
|
||
document.body.removeChild(input);
|
||
try {
|
||
var parser = new DOMParser();
|
||
var xmlDoc = parser.parseFromString(ev.target.result, 'text/xml');
|
||
|
||
var parseError = xmlDoc.querySelector('parsererror');
|
||
if (parseError) {
|
||
alert('XML 解析失败：' + parseError.textContent);
|
||
return;
|
||
}
|
||
|
||
var typeNodes = xmlDoc.querySelectorAll('signals');
|
||
if (typeNodes.length === 0) {
|
||
alert('XML 文件中没有 <signals> 元素');
|
||
return;
|
||
}
|
||
|
||
var validTypes = { out: '注册', in: '链接注册', yk: '遥控', ao: '参数', param: '定值' };
|
||
var totalCount = 0;
|
||
var typeCounts = {};
|
||
|
||
for (var ti = 0; ti < typeNodes.length; ti++) {
|
||
var signalsEl = typeNodes[ti];
|
||
var fileType = signalsEl.getAttribute('type');
|
||
if (!fileType || !validTypes[fileType]) continue;
|
||
|
||
var signals = [];
|
||
var children = signalsEl.children;
|
||
for (var si = 0; si < children.length; si++) {
|
||
if (children[si].tagName !== 'signal') continue;
|
||
var saddr = children[si].getAttribute('saddr');
|
||
if (!saddr || !saddr.trim()) continue;
|
||
var noAttr = children[si].getAttribute('no');
|
||
signals.push({
|
||
no: noAttr !== null ? parseInt(noAttr) : si,
|
||
saddr: saddr.trim()
|
||
});
|
||
}
|
||
|
||
if (signals.length > 0) {
|
||
typeCounts[fileType] = signals.length;
|
||
totalCount += signals.length;
|
||
}
|
||
}
|
||
|
||
if (totalCount === 0) {
|
||
alert('XML 文件中没有有效的信号数据');
|
||
return;
|
||
}
|
||
|
||
var msg = '即将导入以下信号：\n';
|
||
for (var t in typeCounts) {
|
||
msg += ' ' + validTypes[t] + ' (' + t + '): ' + typeCounts[t] + ' 个\n';
|
||
}
|
||
msg += '\n共 ' + totalCount + ' 个信号，是否继续？';
|
||
|
||
if (!confirm(msg)) {
|
||
return;
|
||
}
|
||
|
||
for (var ti2 = 0; ti2 < typeNodes.length; ti2++) {
|
||
var signalsEl2 = typeNodes[ti2];
|
||
var fileType2 = signalsEl2.getAttribute('type');
|
||
if (!fileType2 || !validTypes[fileType2]) continue;
|
||
|
||
var children2 = signalsEl2.children;
|
||
for (var si2 = 0; si2 < children2.length; si2++) {
|
||
if (children2[si2].tagName !== 'signal') continue;
|
||
var saddr2 = children2[si2].getAttribute('saddr');
|
||
if (!saddr2 || !saddr2.trim()) continue;
|
||
WsClient.send({
|
||
saddr: saddr2.trim(),
|
||
signal_type: fileType2,
|
||
curd: 'add',
|
||
setting_zone: '0',
|
||
signal_data: ''
|
||
});
|
||
}
|
||
}
|
||
|
||
alert('导入完成，共发送 ' + totalCount + ' 个 add 请求');
|
||
} catch (ex) {
|
||
alert('导入失败：' + ex.message);
|
||
}
|
||
};
|
||
reader.readAsText(file);
|
||
};
|
||
|
||
input.click();
|
||
}
|
||
|
||
/* ========================================================================
|
||
* 共用工具栏 HTML
|
||
* ======================================================================== */
|
||
function makeToolbar(signalType, showSet) {
|
||
var typeLabel = signalType === 'ao' ? '参数' : (signalType === 'param' ? '定值' : signalType);
|
||
return ''
|
||
+ '<div class="toolbar">'
|
||
+ '<div class="field">'
|
||
+ '<label>短地址 saddr</label>'
|
||
+ '<input type="text" id="tb-saddr" placeholder="例: iec.run_cnt">'
|
||
+ '</div>'
|
||
+ '<div class="field">'
|
||
+ '<label>操作</label>'
|
||
+ '<select id="tb-curd">'
|
||
+ '<option value="add">add 添加</option>'
|
||
+ '<option value="del">del 删除</option>'
|
||
+ '</select>'
|
||
+ '</div>'
|
||
+ '<button class="btn btn-primary" id="tb-exec">执行</button>'
|
||
+ '<button class="btn btn-outline" id="tb-clear">清空输入</button>'
|
||
+ '</div>';
|
||
}
|
||
|
||
function bindToolbar(signalType, getDataFn) {
|
||
var execBtn = document.getElementById('tb-exec');
|
||
var clearBtn = document.getElementById('tb-clear');
|
||
var saddrInput = document.getElementById('tb-saddr');
|
||
var curdSelect = document.getElementById('tb-curd');
|
||
|
||
if (!execBtn || !clearBtn) return;
|
||
|
||
execBtn.onclick = function() {
|
||
var saddr = saddrInput.value.trim();
|
||
var curd = curdSelect.value;
|
||
if (!saddr) {
|
||
alert('请输入短地址 saddr');
|
||
return;
|
||
}
|
||
if (!WsClient.send({ saddr: saddr, signal_type: signalType, curd: curd, setting_zone: '0', signal_data: '' })) {
|
||
alert('WebSocket 未连接');
|
||
}
|
||
};
|
||
|
||
clearBtn.onclick = function() {
|
||
saddrInput.value = '';
|
||
};
|
||
}
|
||
|
||
|
||
/* ========================================================================
|
||
* 1. LoginPage — 登录页
|
||
* ======================================================================== */
|
||
var LoginPage = {
|
||
render: function(container) {
|
||
container.innerHTML = ''
|
||
+ '<div class="login-card">'
|
||
+ '<h1>RTU 远程终端监控系统</h1>'
|
||
+ '<p class="login-subtitle">Remote Terminal Unit Web Monitor</p>'
|
||
+ '<div class="form-group">'
|
||
+ '<label>用户名</label>'
|
||
+ '<input type="text" id="login-user" placeholder="暂无需认证" disabled>'
|
||
+ '</div>'
|
||
+ '<div class="form-group">'
|
||
+ '<label>密码</label>'
|
||
+ '<input type="password" id="login-pass" placeholder="暂无需认证" disabled>'
|
||
+ '</div>'
|
||
+ '<button class="login-btn" id="login-btn">登 录</button>'
|
||
+ '<p class="login-hint">当前版本无需认证，点击登录即可进入系统</p>'
|
||
+ '</div>';
|
||
document.getElementById('login-btn').onclick = function() {
|
||
localStorage.setItem('rtu_logged_in', '1');
|
||
window.location.hash = '#dashboard';
|
||
};
|
||
},
|
||
onEnter: function() { document.body.classList.add('login-page'); },
|
||
onLeave: function() { document.body.classList.remove('login-page'); }
|
||
};
|
||
|
||
/* ========================================================================
|
||
* 2. DashboardPage — 功能入口主页
|
||
* ======================================================================== */
|
||
var DashboardPage = {
|
||
render: function(container) {
|
||
var cards = [
|
||
{ cls: 'out', icon: '📡', title: '注册', desc: 'out — 状态量信号注册与修改', hash: '#out' },
|
||
{ cls: 'in', icon: '📊', title: '链接注册', desc: 'in — 测量量信号链接注册与监视', hash: '#in' },
|
||
{ cls: 'yk', icon: '⚡', title: '遥控', desc: 'yk — 遥控分合闸控制', hash: '#yk' },
|
||
{ cls: 'ao', icon: '🔧', title: '参数', desc: 'ao — 模拟输出参数设定', hash: '#ao' },
|
||
{ cls: 'param', icon: '⚙', title: '定值', desc: 'param — 多定值区参数管理', hash: '#param' },
|
||
{ cls: 'monitor', icon: '📋', title: '数据监控', desc: '实时查看 WebSocket 交互数据', hash: '#monitor' },
|
||
{ cls: 'terminal', icon: '💻', title: '命令终端', desc: '实时命令行操作 RTU 系统', hash: '#terminal' }
|
||
];
|
||
var html = '<div class="page-header"><h2>功能导航</h2><p>选择需要管理的信号类型进入对应功能页</p></div>';
|
||
html += '<div class="dashboard-grid">';
|
||
for (var i = 0; i < cards.length; i++) {
|
||
var c = cards[i];
|
||
html += '<a class="dash-card ' + c.cls + '" href="' + c.hash + '">'
|
||
+ '<div class="card-icon">' + c.icon + '</div>'
|
||
+ '<div class="card-title">' + c.title + '</div>'
|
||
+ '<div class="card-desc">' + c.desc + '</div>'
|
||
+ '</a>';
|
||
}
|
||
html += '</div>';
|
||
html += '<div class="batch-toolbar">'
|
||
+ '<h3>📦 批量操作</h3>'
|
||
+ '<p>导入/导出所有信号类型 (out/in/yk/ao/param) 到一个 XML 文件</p>'
|
||
+ '<button class="btn btn-info" id="btn-export-all" style="margin-right:12px">📤 批量导出所有信号</button>'
|
||
+ '<button class="btn btn-warn" id="btn-import-all">📥 批量导入所有信号</button>'
|
||
+ '</div>';
|
||
container.innerHTML = html;
|
||
|
||
document.getElementById('btn-export-all').onclick = exportAllToXml;
|
||
document.getElementById('btn-import-all').onclick = importAllFromXml;
|
||
},
|
||
onEnter: function() {},
|
||
onLeave: function() {}
|
||
};
|
||
|
||
/* ========================================================================
|
||
* 3. OutPage — 注册管理 (out)
|
||
* ======================================================================== */
|
||
var OutPage = (function() {
|
||
var data = [];
|
||
function renderTableHtml() {
|
||
if (data.length === 0) return '';
|
||
var rows = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
rows += '<tr>'
|
||
+ '<td>' + (i + 1) + '</td>'
|
||
+ '<td>' + fmtVal(item.saddr) + '</td>'
|
||
+ '<td>' + fmtVal(item.desc) + '</td>'
|
||
+ '<td>' + fmtVal(item.type) + '</td>'
|
||
+ '<td class="val-cell">' + fmtVal(item.val) + '</td>'
|
||
+ '<td><input class="val-input" id="mod-' + i + '" placeholder="修改值"></td>'
|
||
+ '<td><button class="btn btn-sm btn-info" data-idx="' + i + '">修改</button></td>'
|
||
+ '</tr>';
|
||
}
|
||
return rows;
|
||
}
|
||
function bindModifyButtons() {
|
||
var buttons = document.querySelectorAll('#out-tbody .btn-info');
|
||
for (var k = 0; k < buttons.length; k++) {
|
||
buttons[k].onclick = function() {
|
||
var idx = parseInt(this.getAttribute('data-idx'));
|
||
var input = document.getElementById('mod-' + idx);
|
||
var val = input.value.trim();
|
||
if (val === '') { alert('请输入修改值'); return; }
|
||
var item = data[idx];
|
||
WsClient.send({ curd:'set', signal_type:'out', saddr:item.saddr, signal_data:val, setting_zone:'0' });
|
||
};
|
||
}
|
||
}
|
||
return {
|
||
render: function(container) {
|
||
var headers = ['#', 'saddr', 'desc', '数据类型', 'val', '修改值', '修改'];
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>注册管理</h2><p>out — 状态量信号，注册后支持添加、删除、修改值</p></div>'
|
||
+ makeToolbar('out')
|
||
+ renderTable('out-tbody', headers, renderTableHtml(), '暂无注册数据，请先添加信号');
|
||
bindToolbar('out', function() { return data; });
|
||
bindModifyButtons();
|
||
},
|
||
onEnter: function() {},
|
||
onLeave: function() { data = []; },
|
||
onData: function(arr) {
|
||
data = arr || [];
|
||
var tbody = document.getElementById('out-tbody');
|
||
if (!tbody) return;
|
||
if (data.length === 0) { tbody.innerHTML = '<tr class="empty-row"><td colspan="7">暂无注册数据，请先添加信号</td></tr>'; return; }
|
||
tbody.innerHTML = renderTableHtml();
|
||
bindModifyButtons();
|
||
}
|
||
};
|
||
})();
|
||
|
||
/* ========================================================================
|
||
* 4. InPage — 链接注册管理 (in)
|
||
* ======================================================================== */
|
||
var InPage = (function() {
|
||
var data = [];
|
||
|
||
function renderTableHtml() {
|
||
if (data.length === 0) return '';
|
||
var rows = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
rows += '<tr>'
|
||
+ '<td>' + (i + 1) + '</td>'
|
||
+ '<td>' + fmtVal(item.saddr) + '</td>'
|
||
+ '<td>' + fmtVal(item.desc) + '</td>'
|
||
+ '<td>' + fmtVal(item.type) + '</td>'
|
||
+ '<td class="val-cell">' + fmtVal(item.val) + '</td>'
|
||
+ '</tr>';
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
var headers = ['#', 'saddr', 'desc', '数据类型', 'val'];
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>链接注册管理</h2><p>in — 测量量信号，链接注册后仅支持添加和删除，不支持修改</p></div>'
|
||
+ makeToolbar('in')
|
||
+ renderTable('in-tbody', headers, renderTableHtml(), '暂无链接注册数据，请先添加信号');
|
||
bindToolbar('in', function() { return data; });
|
||
},
|
||
onEnter: function() {},
|
||
onLeave: function() { data = []; },
|
||
onData: function(arr) {
|
||
data = arr || [];
|
||
var tbody = document.getElementById('in-tbody');
|
||
if (!tbody) return;
|
||
if (data.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="5">暂无链接注册数据，请先添加信号</td></tr>';
|
||
return;
|
||
}
|
||
tbody.innerHTML = renderTableHtml();
|
||
}
|
||
};
|
||
})();
|
||
|
||
/* ========================================================================
|
||
* 5. YkPage — 遥控管理 (yk)
|
||
* ======================================================================== */
|
||
var YkPage = (function() {
|
||
var data = [];
|
||
|
||
function renderTableHtml() {
|
||
if (data.length === 0) return '';
|
||
var rows = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
var ctrlLabel = CTRL_TYPE_MAP[item.ctrl_type] || item.ctrl_type;
|
||
rows += '<tr>'
|
||
+ '<td>' + (i + 1) + '</td>'
|
||
+ '<td>' + fmtVal(item.saddr) + '</td>'
|
||
+ '<td>' + fmtVal(item.desc) + '</td>'
|
||
+ '<td>' + fmtVal(item.type) + '</td>'
|
||
+ '<td class="val-cell">' + fmtVal(item.val) + '</td>'
|
||
+ '<td>' + ctrlLabel + '</td>'
|
||
+ '<td><button class="btn btn-sm btn-success" data-idx="' + i + '" data-val="1">控合</button></td>'
|
||
+ '<td><button class="btn btn-sm btn-danger" data-idx="' + i + '" data-val="0">控分</button></td>'
|
||
+ '</tr>';
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
function bindButtons() {
|
||
var buttons = document.querySelectorAll('#yk-tbody .btn-sm');
|
||
for (var k = 0; k < buttons.length; k++) {
|
||
buttons[k].onclick = function() {
|
||
var idx = parseInt(this.getAttribute('data-idx'));
|
||
var val = this.getAttribute('data-val');
|
||
var item = data[idx];
|
||
WsClient.send({
|
||
curd: 'set', signal_type: 'yk', saddr: item.saddr,
|
||
signal_data: val, setting_zone: '0'
|
||
});
|
||
};
|
||
}
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
var headers = ['#', 'saddr', 'desc', '数据类型', 'val', 'ctrl_type', '控合', '控分'];
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>遥控管理</h2><p>yk — 遥控分合闸控制，控合=1(闭合)，控分=0(断开)</p></div>'
|
||
+ makeToolbar('yk')
|
||
+ renderTable('yk-tbody', headers, renderTableHtml(), '暂无遥控数据，请先添加信号');
|
||
bindToolbar('yk', function() { return data; });
|
||
bindButtons();
|
||
},
|
||
onEnter: function() {},
|
||
onLeave: function() { data = []; },
|
||
onData: function(arr) {
|
||
data = arr || [];
|
||
var tbody = document.getElementById('yk-tbody');
|
||
if (!tbody) return;
|
||
if (data.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="8">暂无遥控数据，请先添加信号</td></tr>';
|
||
return;
|
||
}
|
||
tbody.innerHTML = renderTableHtml();
|
||
bindButtons();
|
||
}
|
||
};
|
||
})();
|
||
|
||
/* ========================================================================
|
||
* 6. AoPage — 参数管理 (ao, 单值修改)
|
||
* ======================================================================== */
|
||
var AoPage = (function() {
|
||
var data = [];
|
||
|
||
function renderTableHtml() {
|
||
if (data.length === 0) return '';
|
||
var rows = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
var ctrlLabel = CTRL_TYPE_MAP[item.ctrl_type] || item.ctrl_type;
|
||
rows += '<tr>'
|
||
+ '<td>' + (i + 1) + '</td>'
|
||
+ '<td>' + fmtVal(item.saddr) + '</td>'
|
||
+ '<td>' + fmtVal(item.desc) + '</td>'
|
||
+ '<td>' + fmtVal(item.type) + '</td>'
|
||
+ '<td class="val-cell">' + fmtVal(item.val) + '</td>'
|
||
+ '<td>' + ctrlLabel + '</td>'
|
||
+ '<td>' + fmtVal(item.min) + '</td>'
|
||
+ '<td>' + fmtVal(item.max) + '</td>'
|
||
+ '<td>' + fmtVal(item.step) + '</td>'
|
||
+ '<td>' + fmtVal(item.unit) + '</td>'
|
||
+ '<td><input class="val-input" id="ao-mod-' + i + '" placeholder="修改值"></td>'
|
||
+ '<td><button class="btn btn-sm btn-info" data-idx="' + i + '">修改</button></td>'
|
||
+ '</tr>';
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
function bindModifyButtons() {
|
||
var buttons = document.querySelectorAll('#ao-tbody .btn-info');
|
||
for (var k = 0; k < buttons.length; k++) {
|
||
buttons[k].onclick = function() {
|
||
var idx = parseInt(this.getAttribute('data-idx'));
|
||
var input = document.getElementById('ao-mod-' + idx);
|
||
var val = input.value.trim();
|
||
if (val === '') { alert('请输入修改值'); return; }
|
||
var item = data[idx];
|
||
WsClient.send({
|
||
curd: 'set', signal_type: 'ao', saddr: item.saddr,
|
||
signal_data: val, setting_zone: '0'
|
||
});
|
||
};
|
||
}
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
var headers = ['#', 'saddr', 'desc', '数据类型', 'val', 'ctrl_type', 'min', 'max', 'step', 'unit', '修改值', '修改'];
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>参数管理</h2><p>ao — 模拟输出参数设定，支持单值修改</p></div>'
|
||
+ makeToolbar('ao')
|
||
+ renderTable('ao-tbody', headers, renderTableHtml(), '暂无参数数据，请先添加信号');
|
||
bindToolbar('ao', function() { return data; });
|
||
bindModifyButtons();
|
||
},
|
||
onEnter: function() {},
|
||
onLeave: function() { data = []; },
|
||
onData: function(arr) {
|
||
data = arr || [];
|
||
var tbody = document.getElementById('ao-tbody');
|
||
if (!tbody) return;
|
||
if (data.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="12">暂无参数数据，请先添加信号</td></tr>';
|
||
return;
|
||
}
|
||
tbody.innerHTML = renderTableHtml();
|
||
bindModifyButtons();
|
||
}
|
||
};
|
||
})();
|
||
|
||
/* ========================================================================
|
||
* 7. ParamPage — 定值管理 (param, 多定值区展开)
|
||
* ======================================================================== */
|
||
var ParamPage = (function() {
|
||
var data = [];
|
||
var expandedRows = {}; // 记录展开状态
|
||
|
||
function renderTableHtml() {
|
||
if (data.length === 0) return '';
|
||
var rows = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
var ctrlLabel = CTRL_TYPE_MAP[item.ctrl_type] || item.ctrl_type;
|
||
var zones = item.setting_zone_list || [];
|
||
var zoneCount = zones.length;
|
||
var isOpen = expandedRows[i] === true;
|
||
var icon = isOpen ? '▼' : '▶';
|
||
|
||
// 主行（可点击展开）
|
||
rows += '<tr class="expand-row" data-pidx="' + i + '">'
|
||
+ '<td>' + (i + 1) + '</td>'
|
||
+ '<td>' + fmtVal(item.saddr) + '</td>'
|
||
+ '<td>' + fmtVal(item.desc) + '</td>'
|
||
+ '<td>' + fmtVal(item.type) + '</td>'
|
||
+ '<td>' + ctrlLabel + '</td>'
|
||
+ '<td>' + zoneCount + '</td>'
|
||
+ '<td><span class="expand-icon' + (isOpen ? ' open' : '') + '">' + icon + '</span> 展开</td>'
|
||
+ '</tr>';
|
||
|
||
// 展开的定值区子表
|
||
if (isOpen) {
|
||
rows += '<tr class="zone-sub-row" id="zone-sub-' + i + '"><td colspan="7">'
|
||
+ '<table class="zone-sub-table">'
|
||
+ '<thead><tr>'
|
||
+ '<th>定值区 ID</th><th>val</th><th>default_val</th>'
|
||
+ '<th>min</th><th>max</th><th>step</th><th>unit</th>'
|
||
+ '<th>修改值</th><th>修改</th>'
|
||
+ '</tr></thead><tbody>';
|
||
|
||
for (var j = 0; j < zones.length; j++) {
|
||
var zone = zones[j];
|
||
rows += '<tr>'
|
||
+ '<td>' + fmtVal(zone.id) + '</td>'
|
||
+ '<td>' + fmtVal(zone.val) + '</td>'
|
||
+ '<td>' + fmtVal(zone.default_val) + '</td>'
|
||
+ '<td>' + fmtVal(item.min) + '</td>'
|
||
+ '<td>' + fmtVal(item.max) + '</td>'
|
||
+ '<td>' + fmtVal(item.step) + '</td>'
|
||
+ '<td>' + fmtVal(item.unit) + '</td>'
|
||
+ '<td><input class="val-input" id="pm-' + i + '-' + j + '" placeholder="修改值"></td>'
|
||
+ '<td><button class="btn btn-sm btn-info" data-pidx="' + i + '" data-zidx="' + j + '">修改</button></td>'
|
||
+ '</tr>';
|
||
}
|
||
|
||
rows += '</tbody></table></td></tr>';
|
||
}
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
function bindEvents() {
|
||
// 展开/收起
|
||
var expandRows = document.querySelectorAll('#param-tbody .expand-row');
|
||
for (var k = 0; k < expandRows.length; k++) {
|
||
expandRows[k].onclick = function() {
|
||
var idx = parseInt(this.getAttribute('data-pidx'));
|
||
expandedRows[idx] = !expandedRows[idx];
|
||
refreshTable();
|
||
};
|
||
}
|
||
|
||
// 修改按钮
|
||
var modButtons = document.querySelectorAll('#param-tbody .btn-info');
|
||
for (var m = 0; m < modButtons.length; m++) {
|
||
modButtons[m].onclick = function(e) {
|
||
e.stopPropagation();
|
||
var pidx = parseInt(this.getAttribute('data-pidx'));
|
||
var zidx = parseInt(this.getAttribute('data-zidx'));
|
||
var input = document.getElementById('pm-' + pidx + '-' + zidx);
|
||
var val = input.value.trim();
|
||
if (val === '') { alert('请输入修改值'); return; }
|
||
var item = data[pidx];
|
||
var zoneId = item.setting_zone_list[zidx].id;
|
||
WsClient.send({
|
||
curd: 'set', signal_type: 'param', saddr: item.saddr,
|
||
signal_data: val, setting_zone: zoneId
|
||
});
|
||
};
|
||
}
|
||
}
|
||
|
||
function refreshTable() {
|
||
var tbody = document.getElementById('param-tbody');
|
||
if (!tbody) return;
|
||
tbody.innerHTML = renderTableHtml();
|
||
bindEvents();
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
expandedRows = {};
|
||
var headers = ['#', 'saddr', 'desc', '数据类型', 'ctrl_type', '定值区数', '展开'];
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>定值管理</h2><p>param — 多定值区参数管理，点击行展开查看各定值区详情并可修改</p></div>'
|
||
+ makeToolbar('param')
|
||
+ renderTable('param-tbody', headers, renderTableHtml(), '暂无定值数据，请先添加信号');
|
||
bindToolbar('param', function() { return data; });
|
||
bindEvents();
|
||
},
|
||
onEnter: function() {},
|
||
onLeave: function() { data = []; expandedRows = {}; },
|
||
onData: function(arr) {
|
||
data = arr || [];
|
||
expandedRows = {}; // 新数据到达时重置展开状态
|
||
var tbody = document.getElementById('param-tbody');
|
||
if (!tbody) return;
|
||
if (data.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="7">暂无定值数据，请先添加信号</td></tr>';
|
||
return;
|
||
}
|
||
tbody.innerHTML = renderTableHtml();
|
||
bindEvents();
|
||
}
|
||
};
|
||
})();
|
||
|
||
/* ========================================================================
|
||
* 8. MonitorPage — 数据交互监控（可展开列表，15 分钟留存）
|
||
* ======================================================================== */
|
||
var MonitorPage = (function() {
|
||
var refreshTimer = null;
|
||
var expandedSet = {}; // 记录展开状态 {index: true}
|
||
|
||
function formatTime(ts) {
|
||
var d = new Date(ts);
|
||
var h = String(d.getHours()).padStart(2, '0');
|
||
var m = String(d.getMinutes()).padStart(2, '0');
|
||
var s = String(d.getSeconds()).padStart(2, '0');
|
||
var ms = String(d.getMilliseconds()).padStart(3, '0');
|
||
return h + ':' + m + ':' + s + '.' + ms;
|
||
}
|
||
|
||
function buildSummary(dir, raw) {
|
||
try {
|
||
var obj = JSON.parse(raw);
|
||
if (dir === '↑') {
|
||
// 上行：提取 curd, signal_type, saddr
|
||
var parts = [];
|
||
if (obj.curd) parts.push(obj.curd);
|
||
if (obj.signal_type) parts.push(obj.signal_type);
|
||
if (obj.saddr) parts.push(obj.saddr);
|
||
return parts.length > 0 ? parts.join(' ') : raw.substring(0, 60);
|
||
} else {
|
||
// 下行：统计各信号类型数量
|
||
var summaryParts = [];
|
||
var types = ['out', 'in', 'yk', 'ao', 'param'];
|
||
for (var t = 0; t < types.length; t++) {
|
||
var arr = obj[types[t]];
|
||
if (Array.isArray(arr) && arr.length > 0) {
|
||
summaryParts.push(types[t] + '×' + arr.length);
|
||
}
|
||
}
|
||
return summaryParts.length > 0 ? summaryParts.join(', ') : raw.substring(0, 60);
|
||
}
|
||
} catch (e) {
|
||
return raw.substring(0, 60);
|
||
}
|
||
}
|
||
|
||
function escapeHtml(str) {
|
||
return String(str)
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"');
|
||
}
|
||
|
||
function renderLog() {
|
||
var el = document.getElementById('monitor-log');
|
||
if (!el) return;
|
||
|
||
var records = MonitorRing.getAll();
|
||
if (records.length === 0) {
|
||
el.innerHTML = '<div class="monitor-empty">暂无数据交互，请先操作信号页面...</div>';
|
||
document.getElementById('monitor-count').textContent = '0';
|
||
return;
|
||
}
|
||
|
||
// 保存滚动状态：用户是否在底部
|
||
var prevScrollTop = el.scrollTop;
|
||
var prevClientHeight = el.clientHeight;
|
||
var prevScrollHeight = el.scrollHeight;
|
||
var wasAtBottom = (prevScrollTop + prevClientHeight >= prevScrollHeight - 10);
|
||
|
||
var html = '';
|
||
for (var i = 0; i < records.length; i++) {
|
||
var r = records[i];
|
||
var isOpen = expandedSet[i] === true;
|
||
var summary = buildSummary(r.dir, r.data);
|
||
var dirClass = r.dir === '↑' ? 'mon-up' : 'mon-down';
|
||
var dirLabel = r.dir === '↑' ? '↑ 发送' : '↓ 接收';
|
||
var source = r.dir === '↑' ? '客户端' : 'RTU Server';
|
||
var target = r.dir === '↑' ? 'RTU Server' : '客户端';
|
||
var arrow = r.dir === '↑' ? '→' : '←';
|
||
|
||
html += '<div class="mon-item' + (isOpen ? ' open' : '') + '" data-midx="' + i + '">';
|
||
html += '<div class="mon-item-head">';
|
||
html += '<span class="mon-time">[' + formatTime(r.time) + ']</span>';
|
||
html += '<span class="mon-dir ' + dirClass + '">' + dirLabel + '</span>';
|
||
html += '<span class="mon-addr">' + source + ' ' + arrow + ' ' + target + '</span>';
|
||
html += '<span class="mon-summary">' + escapeHtml(summary) + '</span>';
|
||
html += '<span class="mon-expand-icon">' + (isOpen ? '▼' : '▶') + '</span>';
|
||
html += '</div>';
|
||
if (isOpen) {
|
||
html += '<div class="mon-item-body"><pre>' + escapeHtml(r.data) + '</pre></div>';
|
||
}
|
||
html += '</div>';
|
||
}
|
||
|
||
el.innerHTML = html;
|
||
|
||
// 绑定点击展开/收起
|
||
var heads = el.querySelectorAll('.mon-item-head');
|
||
for (var k = 0; k < heads.length; k++) {
|
||
heads[k].onclick = function() {
|
||
var item = this.parentElement;
|
||
var idx = parseInt(item.getAttribute('data-midx'));
|
||
expandedSet[idx] = !expandedSet[idx];
|
||
renderLog();
|
||
};
|
||
}
|
||
|
||
// 恢复滚动位置：在底部才跟随，否则保持原位
|
||
if(wasAtBottom)
|
||
{
|
||
el.scrollTop = el.scrollHeight;
|
||
}
|
||
else if(prevScrollHeight > 0)
|
||
{
|
||
var ratio = prevScrollTop / prevScrollHeight;
|
||
el.scrollTop = Math.round(ratio * el.scrollHeight);
|
||
}
|
||
|
||
document.getElementById('monitor-count').textContent = records.length;
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
expandedSet = {};
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>数据监控</h2><p>实时查看 WebSocket 上下行 JSON 数据，15 分钟自动清理历史，点击条目展开详情</p></div>'
|
||
+ '<div class="monitor-stats">'
|
||
+ '<span class="stat-label">状态：</span>'
|
||
+ '<span class="stat-value" id="monitor-ws-status">' + WsClient.getStatus() + '</span>'
|
||
+ '<span class="stat-label" style="margin-left:16px">已记录：</span>'
|
||
+ '<span class="stat-value" id="monitor-count">0</span>'
|
||
+ '<span class="stat-label">条</span>'
|
||
+ '<button class="btn btn-sm btn-outline" id="monitor-clear" style="margin-left:auto">清空记录</button>'
|
||
+ '</div>'
|
||
+ '<div class="monitor-log" id="monitor-log"></div>';
|
||
|
||
document.getElementById('monitor-clear').onclick = function() {
|
||
MonitorRing.clear();
|
||
expandedSet = {};
|
||
renderLog();
|
||
};
|
||
|
||
renderLog();
|
||
},
|
||
onEnter: function() {
|
||
refreshTimer = setInterval(renderLog, 500);
|
||
},
|
||
onLeave: function() {
|
||
if (refreshTimer) {
|
||
clearInterval(refreshTimer);
|
||
refreshTimer = null;
|
||
}
|
||
expandedSet = {};
|
||
}
|
||
};
|
||
})();
|
||
|
||
|
||
/* ========================================================================
|
||
* 命令终端页面
|
||
* ======================================================================== */
|
||
var TerminalPage = (function() {
|
||
var history = [];
|
||
var historyIdx = 0;
|
||
var cmdList = [];
|
||
|
||
function append(text, cls) {
|
||
var el = document.getElementById('term-output');
|
||
if (!el) return;
|
||
var div = document.createElement('div');
|
||
div.className = cls || '';
|
||
div.textContent = text;
|
||
el.appendChild(div);
|
||
el.scrollTop = el.scrollHeight;
|
||
}
|
||
|
||
function renderCmdList() {
|
||
var el = document.getElementById('term-cmd-list');
|
||
if (!el) return;
|
||
if (cmdList.length === 0) {
|
||
el.innerHTML = '<span class="cmd-list-hint">等待命令列表...</span>';
|
||
return;
|
||
}
|
||
var html = '';
|
||
for (var i = 0; i < cmdList.length; i++) {
|
||
var cmd = cmdList[i];
|
||
html += '<span class="cmd-tag" data-cmd="' + cmd.name + '" title="' + cmd.desc + '">' + cmd.name + '</span>';
|
||
}
|
||
el.innerHTML = html;
|
||
|
||
var tags = el.querySelectorAll('.cmd-tag');
|
||
for (var k = 0; k < tags.length; k++) {
|
||
tags[k].onclick = function() {
|
||
var input = document.getElementById('term-input');
|
||
if (input) {
|
||
input.value = this.getAttribute('data-cmd') + ' ';
|
||
input.focus();
|
||
}
|
||
};
|
||
}
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
history = [];
|
||
historyIdx = 0;
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>命令终端</h2><p>输入 RTU 命令，Enter 发送，↑↓ 历史记录</p></div>'
|
||
+ '<div class="terminal-wrap">'
|
||
+ '<div class="terminal-cmd-list" id="term-cmd-list"></div>'
|
||
+ '<div class="terminal-output" id="term-output"></div>'
|
||
+ '<div class="terminal-input-line">'
|
||
+ '<span class="terminal-prompt">cmd > </span>'
|
||
+ '<input type="text" class="terminal-input" id="term-input" autofocus spellcheck="false">'
|
||
+ '</div>'
|
||
+ '</div>';
|
||
|
||
var input = document.getElementById('term-input');
|
||
if (!input) return;
|
||
|
||
input.onkeydown = function(e) {
|
||
if (e.key === 'Enter') {
|
||
var cmd = input.value.trim();
|
||
if (cmd) {
|
||
history.push(cmd);
|
||
historyIdx = history.length;
|
||
append('cmd > ' + cmd, 'term-sent');
|
||
if (!WsClient.send({type:'cmd', data:cmd})) {
|
||
append('[未连接]', 'term-err');
|
||
}
|
||
}
|
||
input.value = '';
|
||
} else if (e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
if (history.length > 0) {
|
||
historyIdx = Math.max(0, historyIdx - 1);
|
||
input.value = history[historyIdx];
|
||
}
|
||
} else if (e.key === 'ArrowDown') {
|
||
e.preventDefault();
|
||
if (historyIdx < history.length - 1) {
|
||
historyIdx++;
|
||
input.value = history[historyIdx];
|
||
} else {
|
||
historyIdx = history.length;
|
||
input.value = '';
|
||
}
|
||
}
|
||
};
|
||
|
||
renderCmdList();
|
||
append('输入 help 查看所有命令', 'term-info');
|
||
},
|
||
|
||
onData: function(data) {
|
||
if (data && data.cmds) {
|
||
cmdList = data.cmds;
|
||
renderCmdList();
|
||
return;
|
||
}
|
||
if (data && typeof data === 'string') {
|
||
append(data, 'term-resp');
|
||
} else if (data && data.type === 'cmd_list') {
|
||
cmdList = data.cmds;
|
||
renderCmdList();
|
||
}
|
||
},
|
||
|
||
onBinary: function(ab) {
|
||
var decoder = new TextDecoder('utf-8');
|
||
var text = decoder.decode(ab);
|
||
if (text) append(text, 'term-resp');
|
||
},
|
||
|
||
onEnter: function() {
|
||
var input = document.getElementById('term-input');
|
||
if (input) setTimeout(function() { input.focus(); }, 100);
|
||
renderCmdList();
|
||
if (cmdList.length === 0) {
|
||
WsClient.send({type:'get_cmds'});
|
||
}
|
||
},
|
||
|
||
onLeave: function() {
|
||
}
|
||
};
|
||
})();
|
||
|
||
|
||
/* ========================================================================
|
||
* 数据中心页面
|
||
* ======================================================================== */
|
||
var DatacenterPage = (function() {
|
||
var allData = {};
|
||
var activeTab = 'out';
|
||
var searchText = '';
|
||
|
||
var COLUMNS = ['id', 'saddr', 'desc', '数据类型', 'ctrl_type', 'link_saddrs'];
|
||
|
||
function renderTable() {
|
||
var data = allData[activeTab] || [];
|
||
var tbody = document.getElementById('dc-tbody');
|
||
if (!tbody) return;
|
||
|
||
if (data.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="6">暂无数据</td></tr>';
|
||
document.getElementById('dc-count').textContent = '0';
|
||
return;
|
||
}
|
||
|
||
var rows = data;
|
||
if (searchText) {
|
||
var st = searchText.toLowerCase();
|
||
rows = data.filter(function(item) {
|
||
return (item.saddr && item.saddr.toLowerCase().indexOf(st) !== -1)
|
||
|| (item.desc && item.desc.toLowerCase().indexOf(st) !== -1);
|
||
});
|
||
}
|
||
document.getElementById('dc-count').textContent = rows.length + ' / ' + data.length;
|
||
|
||
if (rows.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="6">无匹配结果</td></tr>';
|
||
return;
|
||
}
|
||
|
||
var html = '';
|
||
for (var i = 0; i < rows.length; i++) {
|
||
var item = rows[i];
|
||
html += '<tr>'
|
||
+ '<td>' + fmtVal(item.id) + '</td>'
|
||
+ '<td>' + fmtVal(item.saddr) + '</td>'
|
||
+ '<td>' + fmtVal(item.desc) + '</td>'
|
||
+ '<td>' + fmtVal(item.type) + '</td>'
|
||
+ '<td>' + fmtVal(CTRL_TYPE_MAP[item.ctrl_type] || item.ctrl_type) + '</td>'
|
||
+ '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + fmtVal(item.link_saddrs) + '">' + fmtVal(item.link_saddrs) + '</td>'
|
||
+ '</tr>';
|
||
}
|
||
tbody.innerHTML = html;
|
||
}
|
||
|
||
function renderHeaders() {
|
||
var thead = document.getElementById('dc-thead');
|
||
if (!thead) return;
|
||
var html = '';
|
||
for (var i = 0; i < COLUMNS.length; i++) {
|
||
html += '<th>' + COLUMNS[i] + '</th>';
|
||
}
|
||
thead.innerHTML = html;
|
||
}
|
||
|
||
function renderTabs() {
|
||
var types = ['out', 'in', 'yk', 'ao', 'param'];
|
||
var labels = { out: '注册 (out)', in: '链接注册 (in)', yk: '遥控 (yk)', ao: '参数 (ao)', param: '定值 (param)' };
|
||
var el = document.getElementById('dc-tab-bar');
|
||
if (!el) return;
|
||
var html = '';
|
||
for (var i = 0; i < types.length; i++) {
|
||
var t = types[i];
|
||
var cls = t === activeTab ? 'dc-tab active' : 'dc-tab';
|
||
html += '<span class="' + cls + '" data-tab="' + t + '">' + labels[t] + '</span>';
|
||
}
|
||
el.innerHTML = html;
|
||
var tabs = el.querySelectorAll('.dc-tab');
|
||
for (var k = 0; k < tabs.length; k++) {
|
||
tabs[k].onclick = function() {
|
||
activeTab = this.getAttribute('data-tab');
|
||
searchText = '';
|
||
document.getElementById('dc-search').value = '';
|
||
renderTabs();
|
||
renderHeaders();
|
||
renderTable();
|
||
};
|
||
}
|
||
}
|
||
|
||
return {
|
||
render: function(container) {
|
||
allData = {};
|
||
activeTab = 'out';
|
||
searchText = '';
|
||
container.innerHTML = ''
|
||
+ '<div class="page-header"><h2>数据中心</h2><p>查看所有信号数据，按类型分表，支持搜索</p></div>'
|
||
+ '<div class="datacenter-toolbar">'
|
||
+ '<div class="dc-tab-bar" id="dc-tab-bar"></div>'
|
||
+ '<input type="text" class="dc-search" id="dc-search" placeholder="搜索 saddr 或 desc...">'
|
||
+ '<span class="dc-count" id="dc-count">0</span>'
|
||
+ '</div>'
|
||
+ '<div class="table-card"><div class="table-wrapper">'
|
||
+ '<table class="signal-table"><thead><tr id="dc-thead"></tr></thead><tbody id="dc-tbody"></tbody></table>'
|
||
+ '</div></div>';
|
||
|
||
renderTabs();
|
||
renderHeaders();
|
||
renderTable();
|
||
|
||
var searchInput = document.getElementById('dc-search');
|
||
if (searchInput) {
|
||
searchInput.oninput = function() {
|
||
searchText = this.value;
|
||
renderTable();
|
||
};
|
||
}
|
||
},
|
||
|
||
onEnter: function() {
|
||
},
|
||
|
||
onLeave: function() {
|
||
allData = {};
|
||
},
|
||
|
||
onData: function(data) {
|
||
if (!data || typeof data !== 'object') return;
|
||
if (data.out) allData.out = data.out;
|
||
if (data.in) allData.in = data.in;
|
||
if (data.yk) allData.yk = data.yk;
|
||
if (data.ao) allData.ao = data.ao;
|
||
if (data.param) allData.param = data.param;
|
||
if (data.out || data.in || data.yk || data.ao || data.param) {
|
||
renderTable();
|
||
}
|
||
}
|
||
};
|
||
})();
|