node-red-contrib-symi-mesh 1.7.2 → 1.7.4

package/nodes/symi-mqtt-sync.html

@@ -0,0 +1,381 @@
+<script type="text/javascript">
+    RED.nodes.registerType('symi-mqtt-sync', {
+        category: 'Symi Mesh',
+        color: '#9370DB',
+        defaults: {
+            name: { value: '' },
+            mqttConfig: { value: '', type: 'symi-mqtt', required: true },
+            brandMqttConfig: { value: '', type: 'symi-mqtt-brand', required: true },
+            autoDiscover: { value: true },
+            mappings: { value: '[]' }
+        },
+        inputs: 1,
+        outputs: 1,
+        icon: 'font-awesome/fa-cloud',
+        align: 'left',
+        paletteLabel: 'MQTT同步',
+        label: function() {
+            if (this.name) return this.name;
+            try {
+                var m = JSON.parse(this.mappings || '[]');
+                if (m.length > 0) return 'MQTT同步(' + m.length + '组)';
+            } catch(e) {}
+            return 'MQTT同步';
+        },
+        oneditprepare: function() {
+            var node = this;
+            var mappings = [];
+            var meshDevices = [];
+            var brandDevices = [];
+
+            // 设置编辑面板更宽
+            var panel = $('#dialog-form').parent();
+            if (panel.length && panel.width() < 920) {
+                panel.css('width', '900px');
+            }
+
+            var deviceTypes = {
+                8: { name: '灯具' },
+                12: { name: '空调' },
+                14: { name: '窗帘' },
+                16: { name: '地暖' },
+                36: { name: '新风' }
+            };
+
+            try { mappings = JSON.parse(node.mappings || '[]'); } catch(e) { mappings = []; }
+
+            // 加载Mesh设备列表
+            function loadMeshDevices(callback) {
+                var mqttConfigId = $('#node-input-mqttConfig').val();
+                if (!mqttConfigId) {
+                    meshDevices = [];
+                    if (callback) callback();
+                    return;
+                }
+                var mqttConfigNode = RED.nodes.node(mqttConfigId);
+                var gatewayId = mqttConfigNode ? mqttConfigNode.gateway : null;
+                if (!gatewayId) {
+                    meshDevices = [];
+                    if (callback) callback();
+                    return;
+                }
+                $.getJSON('/symi-gateway/devices/' + gatewayId, function(devices) {
+                    meshDevices = devices || [];
+                    if (callback) callback();
+                }).fail(function() {
+                    meshDevices = [];
+                    if (callback) callback();
+                });
+            }
+
+            // 加载品牌MQTT设备列表
+            function loadBrandDevices(callback) {
+                var brandConfigId = $('#node-input-brandMqttConfig').val();
+                if (!brandConfigId) {
+                    brandDevices = [];
+                    if (callback) callback();
+                    return;
+                }
+                $.getJSON('/symi-mqtt-brand/devices/' + brandConfigId, function(devices) {
+                    brandDevices = devices || [];
+                    if (callback) callback();
+                }).fail(function() {
+                    brandDevices = [];
+                    if (callback) callback();
+                });
+            }
+
+            // 构建Mesh设备选项
+            function getMeshOptions(selectedMac) {
+                var html = '<option value="">-- 选择Mesh设备 --</option>';
+                var selMacNorm = (selectedMac || '').toLowerCase().replace(/:/g, '');
+                meshDevices.forEach(function(d) {
+                    var devMacNorm = (d.mac || '').toLowerCase().replace(/:/g, '');
+                    var selected = (devMacNorm === selMacNorm && selMacNorm !== '') ? ' selected' : '';
+                    html += '<option value="' + d.mac + '" data-channels="' + (d.channels || 1) + '"' + selected + '>' + d.name + '</option>';
+                });
+                return html;
+            }
+
+            // 构建Mesh按键选项
+            function getMeshChannelOptions(mac, selectedChannel) {
+                var macNorm = (mac || '').toLowerCase().replace(/:/g, '');
+                var device = meshDevices.find(function(d) { 
+                    return (d.mac || '').toLowerCase().replace(/:/g, '') === macNorm; 
+                });
+                var channels = device ? (device.channels || 1) : 0;
+                if (channels <= 1) return '';
+                var html = '<select class="mesh-channel">';
+                for (var i = 1; i <= channels; i++) {
+                    var sel = (i == selectedChannel) ? ' selected' : '';
+                    html += '<option value="' + i + '"' + sel + '>第' + i + '路</option>';
+                }
+                html += '</select>';
+                return html;
+            }
+
+            // 构建品牌设备选项
+            function getBrandOptions(selectedType, selectedId) {
+                var html = '<option value="">-- 选择品牌设备 --</option>';
+                var selectedKey = selectedType + '_' + selectedId;
+                
+                // 从已发现设备生成选项
+                brandDevices.forEach(function(d) {
+                    var key = d.deviceType + '_' + d.deviceId;
+                    var selected = (key === selectedKey) ? ' selected' : '';
+                    html += '<option value="' + key + '"' + selected + '>' + d.typeName + ' (ID:' + d.deviceId + ')</option>';
+                });
+                
+                // 如果选中的设备不在列表中，添加它
+                if (selectedType && selectedId) {
+                    var exists = brandDevices.some(function(d) {
+                        return d.deviceType == selectedType && d.deviceId == selectedId;
+                    });
+                    if (!exists) {
+                        var typeName = deviceTypes[selectedType] ? deviceTypes[selectedType].name : '类型' + selectedType;
+                        html += '<option value="' + selectedKey + '" selected>' + typeName + ' (ID:' + selectedId + ')</option>';
+                    }
+                }
+                
+                return html;
+            }
+
+            // 构建品牌设备通道选项（灯具支持多路）
+            function getBrandChannelOptions(deviceType, selectedChannel) {
+                // 灯具(8)支持多路，其他设备单路
+                var channels = (parseInt(deviceType) === 8) ? 8 : 1;
+                if (channels <= 1) return '';
+                var html = '<select class="brand-channel">';
+                for (var i = 1; i <= channels; i++) {
+                    var sel = (i == selectedChannel) ? ' selected' : '';
+                    html += '<option value="' + i + '"' + sel + '>第' + i + '路</option>';
+                }
+                html += '</select>';
+                return html;
+            }
+
+            // 渲染映射列表
+            function renderMappings() {
+                var container = $('#mapping-list');
+                container.empty();
+                
+                if (mappings.length === 0) {
+                    container.append('<div class="mapping-empty">暂无映射，点击下方按钮添加</div>');
+                    return;
+                }
+
+                mappings.forEach(function(m, idx) {
+                    var row = $('<div class="mapping-row" data-idx="' + idx + '"></div>');
+                    row.html(
+                        '<div class="mapping-main">' +
+                        '<div class="mesh-col">' +
+                        '  <select class="mesh-select">' + getMeshOptions(m.meshMac) + '</select>' +
+                        '  <span class="mesh-ch-wrap">' + getMeshChannelOptions(m.meshMac, m.meshChannel || 1) + '</span>' +
+                        '</div>' +
+                        '<div class="arrow-col"><i class="fa fa-arrows-h"></i></div>' +
+                        '<div class="brand-col">' +
+                        '  <select class="brand-select">' + getBrandOptions(m.brandDeviceType, m.brandDeviceId) + '</select>' +
+                        '  <span class="brand-ch-wrap">' + getBrandChannelOptions(m.brandDeviceType, m.brandChannel || 1) + '</span>' +
+                        '</div>' +
+                        '<div class="del-col"><button type="button" class="red-ui-button red-ui-button-small btn-remove" title="删除"><i class="fa fa-times"></i></button></div>' +
+                        '</div>'
+                    );
+                    container.append(row);
+                });
+
+                bindEvents();
+            }
+
+            // 绑定事件
+            function bindEvents() {
+                var container = $('#mapping-list');
+                
+                container.find('.mesh-select').off('change').on('change', function() {
+                    var row = $(this).closest('.mapping-row');
+                    var idx = row.data('idx');
+                    var mac = $(this).val();
+                    mappings[idx].meshMac = mac || '';
+                    mappings[idx].meshChannel = 1;
+                    row.find('.mesh-ch-wrap').html(getMeshChannelOptions(mac, 1));
+                    bindEvents();
+                });
+
+                container.find('.mesh-channel').off('change').on('change', function() {
+                    var idx = $(this).closest('.mapping-row').data('idx');
+                    mappings[idx].meshChannel = parseInt($(this).val()) || 1;
+                });
+
+                container.find('.brand-select').off('change').on('change', function() {
+                    var row = $(this).closest('.mapping-row');
+                    var idx = row.data('idx');
+                    var val = $(this).val();
+                    if (val) {
+                        var parts = val.split('_');
+                        mappings[idx].brandDeviceType = parseInt(parts[0]) || 8;
+                        mappings[idx].brandDeviceId = parseInt(parts[1]) || 1;
+                        mappings[idx].brandChannel = 1;
+                        // 更新通道选择器
+                        row.find('.brand-ch-wrap').html(getBrandChannelOptions(mappings[idx].brandDeviceType, 1));
+                        bindEvents();
+                    } else {
+                        mappings[idx].brandDeviceType = null;
+                        mappings[idx].brandDeviceId = null;
+                        mappings[idx].brandChannel = 1;
+                        row.find('.brand-ch-wrap').empty();
+                    }
+                });
+
+                container.find('.brand-channel').off('change').on('change', function() {
+                    var idx = $(this).closest('.mapping-row').data('idx');
+                    mappings[idx].brandChannel = parseInt($(this).val()) || 1;
+                });
+
+                container.find('.btn-remove').off('click').on('click', function() {
+                    var idx = $(this).closest('.mapping-row').data('idx');
+                    mappings.splice(idx, 1);
+                    renderMappings();
+                });
+            }
+
+            // 刷新品牌设备
+            $('#refresh-brand-btn').on('click', function() {
+                loadBrandDevices(renderMappings);
+            });
+
+            // 添加映射按钮
+            $('#btn-add-mapping').on('click', function() {
+                mappings.push({ meshMac: '', meshChannel: 1, brandDeviceType: 8, brandDeviceId: 1, brandChannel: 1 });
+                renderMappings();
+            });
+
+            // 配置变化时重新加载
+            $('#node-input-mqttConfig').on('change', function() {
+                setTimeout(function() {
+                    loadMeshDevices(renderMappings);
+                }, 100);
+            });
+
+            $('#node-input-brandMqttConfig').on('change', function() {
+                setTimeout(function() {
+                    loadBrandDevices(renderMappings);
+                }, 100);
+            });
+
+            // 保存时更新mappings
+            node._saveMappings = function() {
+                node.mappings = JSON.stringify(mappings);
+                $('#node-input-mappings').val(node.mappings);
+            };
+
+            // 初始加载
+            setTimeout(function() {
+                loadMeshDevices(function() {
+                    loadBrandDevices(renderMappings);
+                });
+            }, 300);
+        },
+        oneditresize: function(size) {
+            var rows = $('#dialog-form>div:not(.bridge-section)');
+            var height = size.height;
+            for (var i = 0; i < rows.length; i++) { height -= $(rows[i]).outerHeight(true); }
+            height -= 120;
+            $('#mapping-list').css('max-height', Math.max(150, height) + 'px');
+        },
+        oneditsave: function() {
+            if (this._saveMappings) { this._saveMappings(); }
+        }
+    });
+</script>
+
+<script type="text/html" data-template-name="symi-mqtt-sync">
+    <style>
+        .bridge-section { margin: 12px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background: #fafafa; }
+        .bridge-section h4 { margin: 0 0 10px 0; padding-bottom: 6px; border-bottom: 1px solid #eee; color: #333; font-size: 13px; }
+        .bridge-section h4 i { margin-right: 6px; color: #666; }
+        
+        #mapping-list { max-height: calc(100vh - 400px); min-height: 150px; overflow-y: auto; }
+        .mapping-empty { padding: 15px; text-align: center; color: #999; font-size: 12px; }
+        .mapping-row { display: flex; flex-direction: column; padding: 6px 8px; margin-bottom: 6px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; gap: 6px; }
+        .mapping-main { display: flex; align-items: center; width: 100%; gap: 6px; min-width: 0; }
+        .mesh-col { flex: 1 1 40%; min-width: 0; display: flex; gap: 4px; }
+        .mesh-col .mesh-select { flex: 1; padding: 4px; border: 1px solid #81c784; border-radius: 3px; background: #e8f5e9; font-size: 12px; }
+        .mesh-col .mesh-channel { width: 58px; padding: 4px; border: 1px solid #81c784; border-radius: 3px; background: #c8e6c9; font-size: 11px; font-weight: bold; }
+        .arrow-col { flex: 0 0 20px; text-align: center; color: #999; }
+        .brand-col { flex: 1 1 40%; display: flex; gap: 4px; }
+        .brand-col .brand-select { flex: 1; padding: 4px; border: 1px solid #ba68c8; border-radius: 3px; background: #f3e5f5; font-size: 12px; }
+        .brand-col .brand-channel { width: 58px; padding: 4px; border: 1px solid #ba68c8; border-radius: 3px; background: #e1bee7; font-size: 11px; font-weight: bold; }
+        .del-col { flex: 0 0 auto; }
+        .btn-remove { color: #d32f2f !important; padding: 2px 6px !important; }
+    </style>
+
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> 名称</label>
+        <input type="text" id="node-input-name" placeholder="如：客厅MQTT同步">
+    </div>
+
+    <div class="bridge-section">
+        <h4><i class="fa fa-server"></i> MQTT配置</h4>
+        <div class="form-row">
+            <label for="node-input-mqttConfig"><i class="fa fa-wifi"></i> Mesh MQTT</label>
+            <input type="text" id="node-input-mqttConfig">
+        </div>
+        <div class="form-row">
+            <label for="node-input-brandMqttConfig"><i class="fa fa-cloud"></i> 品牌MQTT</label>
+            <input type="text" id="node-input-brandMqttConfig">
+        </div>
+        <div class="form-row">
+            <label for="node-input-autoDiscover"><i class="fa fa-search"></i> 自动发现</label>
+            <input type="checkbox" id="node-input-autoDiscover" style="width:auto;"> 启用
+        </div>
+    </div>
+
+    <div class="bridge-section">
+        <h4><i class="fa fa-exchange"></i> 实体映射（Mesh ↔ 品牌MQTT）
+            <button type="button" id="refresh-brand-btn" class="red-ui-button red-ui-button-small" style="float:right;" title="刷新品牌设备"><i class="fa fa-refresh"></i></button>
+        </h4>
+        <div style="display:flex; padding:4px 8px; font-size:11px; color:#666; border-bottom:1px solid #eee; margin-bottom:6px; gap:6px;">
+            <span style="flex:1 1 40%">Mesh设备/按键</span>
+            <span style="flex:0 0 20px"></span>
+            <span style="flex:1 1 40%">品牌设备</span>
+        </div>
+        <div id="mapping-list"></div>
+        <button type="button" id="btn-add-mapping" class="red-ui-button" style="margin-top:8px; width:100%">
+            <i class="fa fa-plus"></i> 添加映射
+        </button>
+    </div>
+
+    <input type="hidden" id="node-input-mappings">
+</script>
+
+<script type="text/html" data-help-name="symi-mqtt-sync">
+    <p>MQTT同步节点 - 实现第三方MQTT品牌设备与Symi Mesh设备的双向状态同步。</p>
+    
+    <h3>功能特性</h3>
+    <ul>
+        <li><strong>双MQTT配置节点</strong>：Mesh MQTT + 品牌MQTT独立配置</li>
+        <li><strong>设备自动发现</strong>：品牌MQTT连接后自动发现设备</li>
+        <li><strong>实体映射</strong>：左边选择Mesh设备，右边选择品牌设备</li>
+        <li><strong>双向同步</strong>：MQTT↔Mesh双向状态实时同步</li>
+        <li><strong>防死循环</strong>：内置2秒防抖机制</li>
+        <li><strong>自动重连</strong>：断线后自动重连</li>
+    </ul>
+
+    <h3>配置说明</h3>
+    <dl class="message-properties">
+        <dt>Mesh MQTT</dt>
+        <dd>选择symi-mqtt配置节点，用于获取Mesh设备列表和状态同步</dd>
+        <dt>品牌MQTT</dt>
+        <dd>选择品牌MQTT配置节点（如HYQW），用于获取品牌设备列表</dd>
+        <dt>实体映射</dt>
+        <dd>配置Mesh设备与品牌设备的对应关系</dd>
+    </dl>
+
+    <h3>支持的设备类型（HYQW）</h3>
+    <ul>
+        <li><strong>灯具(8)</strong>：开关、亮度</li>
+        <li><strong>空调(12)</strong>：开关、温度、模式、风速</li>
+        <li><strong>窗帘(14)</strong>：开关、位置</li>
+        <li><strong>地暖(16)</strong>：开关、温度</li>
+        <li><strong>新风(36)</strong>：开关、风速</li>
+    </ul>
+</script>