☰

米家中枢极客版助手

登录(不可用)极客版页面后，自动开启助手插件，显示设备、变量与自动化的关系，方便查找设备或变量用在了哪些自动化中。点击自动化规则名称即可跳转到自动化页面并高亮所对应的设备或变量卡片。支持快捷键折叠/展开，关闭，适应画布布局，设备高亮，日志高亮，自动适应画布、设置自动化列表布局样式等功能。

  1. // ==UserScript==
  2. // @name         米家中枢极客版助手
  3. // @namespace    http://tampermonkey.net/
  4. // @version      v0.9.4
  5. // @description  登录(不可用)极客版页面后，自动开启助手插件，显示设备、变量与自动化的关系，方便查找设备或变量用在了哪些自动化中。点击自动化规则名称即可跳转到自动化页面并高亮所对应的设备或变量卡片。支持快捷键折叠/展开，关闭，适应画布布局，设备高亮，日志高亮，自动适应画布、设置自动化列表布局样式等功能。
  6. // @author       王丰,sk163
  7. // @license      MIT
  8. // @match        http://*/*
  9. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @grant        GM_addStyle
  13. // ==/UserScript==
  14. /**
  15.  * v0.8.8更新：
  16.  * 1. 更改了插件名称
  17.  * 2、增加了快捷键，Ctrl/Command+E折叠/展开，Ctrl/Command+Q关闭，Ctrl/Command+B适应画布布局
  18.  * 3、自动画布布局修改为仅在初次进入规则编排页面或激活编排页面时触发
  19.  * 4、极客版登录(不可用)后自动启动插件，无需再点击设备列表激活
  20.  * 5、修正了一些已知问题
  21.  *
  22.  * v0.8.9更新：
  23.  * 1、修改了日志高亮逻辑，优化了执行效率，提升了性能，减少无用的循环
  24.  * 2、参考了米家自动化极客版样式优化（感谢原作者：lqs1848，https://gf.qytechs.cn/zh-CN/scripts/495833），增加了规则列表样式设置选项，可选择每行显示1-5条规则
  25.  * 3、增加了自动折叠窗口的选项
  26.  * 4、修正了一些已知问题
  27.  *
  28.  * v0.8.10更新：
  29.  * 1、修复了窗口过小的问题
  30.  * 2、取消了规则列表最小宽度限制
  31.  *
  32.  * v0.8.11更新：
  33.  * 1、规则列表换行显示
  34.  *
  35.  * v0.8.12更新：
  36.  * 1、增加了快捷键Ctrl+W，关闭当前的画布
  37.  * 2、将快捷键说明增加到了原生的【使用指南】中
  38.  *
  39.  * v0.8.13更新：
  40.  * 1、修复了一行显示多列时，由于规则名称过长导致显示错位的问题
  41.  *
  42.  * v0.8.14更新：
  43.  * 1、增加刷新助手按钮，同时增加了快捷键Ctrl+R。查看所有的快捷键，可在极客版画布的【使用指南】中进行查看。
  44.  * 2、优化了自动化规则列表在一行多列下的显示效果。
  45.  * 3、修正了一些已知问题
  46.  *
  47.  * v0.8.15更新：
  48.  * 1、修复自动化列表在多列显示时，筛选格式混乱问题（作者：lqs1848）
  49.  * 2、修复自动化列表在多列显示时，第一个自动化显示错位问题（作者：lqs1848）
  50.  *
  51.  * v0.8.16更新：
  52.  * 1、新增变量按照名称排序（作者：Derstood）
  53.  *
  54.  * v0.8.17更新：
  55.  * 1、修正文本变量排序（作者：Derstood）
  56.  *
  57.  * v0.9.0更新：
  58.  * 1、适配v1.6.0极客版
  59.  * 注意：仅兼容极客版v1.6.0版本
  60.  *
  61.  * v0.9.1更新：
  62.  * 1、增加了对变量视图的支持（变量类型、变量名称、变量值的筛选、变量排序、对应规则编排中的变量卡片高亮显示等）
  63.  * 2、调整了选项布局
  64.  * 3、支持了对表格文本的选择，方便复制
  65.  * 注意：仅兼容极客版v1.6.0版本
  66.  *
  67.  * v0.9.2更新：
  68.  * 1、修复已知问题
  69.  *
  70.  * v0.9.3更新：
  71.  * 1、增加了在自动化中高亮显示指定的设备或变量名称
  72.  * 2、修改了描述内容，[规则]的命名统一替换为了[自动化]，方便理解
  73.  * 3、修复其它已知问题
  74.  *
  75.  * v0.9.4更新：
  76.  * 1、修复变量可能引起的初始化错误
  77.  */
  78. (async () => {
  79.     const callAPI = (api, params) => {
  80.         return new Promise(res => editor.gateway.callAPI(api, params, res));
  81.     };
  82.     let scriptTitle=GM_info.script.name;
  83.     let scriptVersion=GM_info.script.version;
  84.     let isInit = false;
  85.     let selectCardIds = '';
  86.     let devMap=null;
  87.     let defaultColor='#43ad7f7f'
  88.     let defaultWindowWidth=1200;
  89.     let defaultWindowHeight=600;
  90.     let defaultRuleStyle='4';
  91.     let minWindowWidth=450;
  92.     let minWindowHeight=100;
  93.     let enableEnhancedDisplayLog=GM_getValue("enableEnhancedDisplayLog");
  94.     let enableAutoFitContent=GM_getValue("enableAutoFitContent");
  95.     let enableAutoCollapseCheck=GM_getValue("enableAutoCollapseCheck");
  96.     let backgroundColor = GM_getValue("backgroundColor") ;
  97.     let windowWidth = GM_getValue("windowWidth");
  98.     let windowHeight = GM_getValue("windowHeight");
  99.     let ruleStyle = GM_getValue("ruleStyle");
  100.  
  101.     if (enableEnhancedDisplayLog === undefined || enableEnhancedDisplayLog === null || enableEnhancedDisplayLog === "") {
  102.         enableEnhancedDisplayLog = true;
  103.     }
  104.     if (enableAutoFitContent === undefined || enableAutoFitContent === null || enableAutoFitContent === "") {
  105.         enableAutoFitContent = true;
  106.     }
  107.     if (enableAutoCollapseCheck === undefined || enableAutoCollapseCheck === null || enableAutoCollapseCheck === "") {
  108.         enableAutoCollapseCheck = false;
  109.     }
  110.     if (backgroundColor === undefined || backgroundColor === null || backgroundColor === "") {
  111.         backgroundColor = defaultColor;
  112.     }
  113.     if (windowWidth === undefined || windowWidth === null || windowWidth === "" || isNaN(windowWidth)) {
  114.         windowWidth = defaultWindowWidth;
  115.     } else {
  116.         windowWidth = parseInt(windowWidth, 10) < minWindowWidth ? minWindowWidth : parseInt(windowWidth, 10);
  117.     }
  118.     if (windowHeight === undefined || windowHeight === null || windowHeight === "" || isNaN(windowHeight)) {
  119.         windowHeight = defaultWindowHeight;
  120.     } else {
  121.         windowHeight = parseInt(windowHeight, 10) < minWindowHeight ? minWindowHeight : parseInt(windowHeight, 10)
  122.     }
  123.     if (ruleStyle === undefined || ruleStyle === null || ruleStyle === "") {
  124.         ruleStyle = defaultRuleStyle;
  125.     }
  126.  
  127.     const executeScript = async () => {
  128.         if (document.getElementById('device-rule-map')||isInit===true) {
  129.             return;
  130.         }
  131.  
  132.         if (typeof editor === 'undefined' || typeof editor.gateway === 'undefined' || typeof editor.gateway.callAPI === 'undefined') {
  133.             console.error('editor.gateway.callAPI 方法未定义。请确保在正确的环境中运行此脚本。');
  134.             return;
  135.         }
  136.  
  137.         try {
  138.             isInit=true;
  139.             const devListResponse = await callAPI('getDevList');
  140.             devMap = devListResponse.devList;
  141.             const roomNames = Array.from(new Set(Object.values(devMap).map(device => device.roomName)));
  142.             let varRuleMap = {};
  143.             let devRuleMap = {};
  144.             let varMap = {};
  145.  
  146.             const varScopes = (await callAPI('getVarScopeList',{})).scopes;
  147.             for(const scope of varScopes){
  148.                 const vars = await callAPI('getVarList',{scope:scope});
  149.                 Object.entries(vars).forEach(([vid, v]) => {
  150.                     varRuleMap[vid]=[];
  151.                     varMap[vid]={name:v.userData.name,scope:(scope==="global"?"全局":"自动化内"),type:(v.type==="string"?"文本":"数值"),value:v.value}
  152.                 });
  153.             }
  154.  
  155.             const ruleList = await callAPI('getGraphList');
  156.  
  157.             for (const rule of ruleList) {
  158.                 const content = await callAPI('getGraph', {id: rule.id});
  159.                 const dids = new Set(content.nodes.map(n => n.props?.did).filter(did => did !== undefined));
  160.                 const devCards = new Set(content.nodes.map(n => {
  161.                     return (n.props && n.id) ? {did: n.props.did, cid: n.id} : undefined;
  162.                 }).filter(card => card !== undefined));
  163.  
  164.                 dids.forEach(did => {
  165.                     devRuleMap[did] = devRuleMap[did] ?? [];
  166.                     const cardIds = Array.from(devCards)
  167.                         .filter(card => card.did === did)
  168.                         .map(card => card.cid).join(',');
  169.                     const tempDevRule = {
  170.                         ruleId: rule.id,
  171.                         cardIds: cardIds,
  172.                         totalCardNum: devCards.size
  173.                     };
  174.  
  175.                     devRuleMap[did].push(tempDevRule);
  176.                 });
  177.                 const varCards = new Set(content.nodes.map(node => {
  178.                     return (node.props && node.id && node.props.scope) ? {vid: node.props.id, cid: node.id} : undefined;
  179.                 }).filter(card => card !== undefined));
  180.                 const varids = new Set(content.nodes.filter(node => node.props && node.props.scope).map(node => node.props.id));
  181.                 varids.forEach(vid=>{
  182.                         varRuleMap[vid] = varRuleMap[vid] ?? [];
  183.                         const cardIds = Array.from(varCards)
  184.                         .filter(card => card.vid === vid)
  185.                         .map(card => card.cid).join(',');
  186.                         const varRule = {
  187.                             ruleId: rule.id,
  188.                             cardIds: cardIds,
  189.                             totalCardNum: varCards.size
  190.                         };
  191.                         varRuleMap[vid].push(varRule);
  192.                     }
  193.                 );
  194.             }
  195.  
  196.             const devRuleData = Object.fromEntries(
  197.                 Object.entries(devRuleMap).map(([did, devRules]) => [
  198.                     did,
  199.                     {
  200.                         device: {
  201.                             name: devMap[did]?.name ?? `did: ${did}`,
  202.                             roomName: devMap[did]?.roomName ?? `未知`
  203.                         },
  204.                         rules: devRules.map(dr => {
  205.                             const rule = ruleList.find(r => r.id === dr.ruleId);
  206.                             return {
  207.                                 id: dr.ruleId,
  208.                                 cardIds: dr.cardIds,
  209.                                 totalCardNum: dr.totalCardNum,
  210.                                 name: rule ? rule.userData.name : 'Unknown'
  211.                             };
  212.                         })
  213.                     }
  214.                 ])
  215.             );
  216.  
  217.             const varRuleData = Object.fromEntries(
  218.                 Object.entries(varRuleMap).map(([vid, varRules]) => [
  219.                     vid,
  220.                     {
  221.                         rules: varRules.map(vr => {
  222.                             const rule = ruleList.find(r => r.id === vr.ruleId);
  223.                             return {
  224.                                 id: vr.ruleId,
  225.                                 cardIds: vr.cardIds,
  226.                                 totalCardNum: vr.totalCardNum,
  227.                                 name: rule ? rule.userData.name : 'Unknown'
  228.                             };
  229.                         })
  230.                     }
  231.                 ])
  232.             );
  233.  
  234.             const container = document.createElement('div');
  235.             container.id = 'device-rule-map';
  236.             container.style.position = 'fixed';
  237.             container.style.top = '10px';
  238.             container.style.right = '40px';
  239.             container.style.width = windowWidth+'px';
  240.             container.style.height = windowHeight+'px';
  241.             container.style.overflowY = 'scroll';
  242.             container.style.backgroundColor = 'white';
  243.             container.style.border = '1px solid #ccc';
  244.             container.style.paddingTop = '45px';
  245.             container.style.zIndex = 10000;
  246.             container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
  247.  
  248.             const topBar = document.createElement('div');
  249.             topBar.id = 'topBar';
  250.             topBar.style.position = 'fixed';
  251.             topBar.style.top = '0';
  252.             topBar.style.right = '40px';
  253.             topBar.style.width = windowWidth+'px';
  254.             topBar.style.height = '38px';
  255.             topBar.style.backgroundColor = 'white';
  256.             topBar.style.zIndex = 10001;
  257.             topBar.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
  258.             topBar.style.display = 'flex';
  259.             topBar.style.justifyContent = 'space-between';
  260.             topBar.style.alignItems = 'center';
  261.             topBar.style.padding = '0 10px';
  262.  
  263.             const titleDiv = document.createElement('div');
  264.             titleDiv.style.display = 'flex';
  265.             const title = document.createElement('h2');
  266.             title.style.margin = '0';
  267.             title.textContent = scriptTitle;
  268.             titleDiv.appendChild(title);
  269.             const version = document.createElement('span');
  270.             version.textContent = scriptVersion;
  271.             version.style.marginLeft = '2px';
  272.             version.style.paddingTop = '16px';
  273.             version.style.fontSize = '9px';
  274.             titleDiv.appendChild(version);
  275.  
  276.             const buttonContainer = document.createElement('div');
  277.             buttonContainer.style.display = 'flex';
  278.             buttonContainer.style.gap = '10px';
  279.  
  280.             const optionsButton = document.createElement('button');
  281.             optionsButton.id="optionsButton";
  282.             optionsButton.textContent = '选项';
  283.             optionsButton.title = '选项';
  284.             optionsButton.onclick = () => {
  285.                 handleOptionsBtnClick();
  286.             };
  287.  
  288.             const collapseButton = document.createElement('button');
  289.             collapseButton.id="collapseButton";
  290.             collapseButton.textContent = '折叠';
  291.             collapseButton.title = '快捷键为Ctrl+E';
  292.             collapseButton.onclick = () => {
  293.                 handleCollapseBtnClick();
  294.             };
  295.  
  296.             const closeButton = document.createElement('button');
  297.             closeButton.id="closeButton";
  298.             closeButton.title = '快捷键为Ctrl+Q';
  299.             closeButton.textContent = '关闭';
  300.             closeButton.onclick = () => {
  301.                 closeGraphContainer();
  302.                 document.body.removeChild(container);
  303.                 isInit=false;
  304.             }
  305.  
  306.             const refreshButton = document.createElement('button');
  307.             refreshButton.id="refreshButton";
  308.             refreshButton.title = '快捷键为Ctrl+R';
  309.             refreshButton.textContent = '刷新';
  310.             refreshButton.onclick = () => {
  311.                 document.body.removeChild(container);
  312.                 isInit=false;
  313.                 executeScript();
  314.                 handleUrlChange();
  315.             }
  316.  
  317.             buttonContainer.appendChild(collapseButton);
  318.             buttonContainer.appendChild(optionsButton);
  319.             buttonContainer.appendChild(refreshButton);
  320.             buttonContainer.appendChild(closeButton);
  321.  
  322.             topBar.appendChild(titleDiv);
  323.             topBar.appendChild(buttonContainer);
  324.  
  325.             const optionsContainer = document.createElement('div');
  326.             optionsContainer.id = 'optionsContainer';
  327.             optionsContainer.style.display = 'flex';
  328.             optionsContainer.style.gap = '10px';
  329.             optionsContainer.style.position = 'fixed';
  330.             optionsContainer.style.top = '40px';
  331.             optionsContainer.style.right = '40px';
  332.             optionsContainer.style.width = '890px';
  333.             optionsContainer.style.height = '50px';
  334.             optionsContainer.style.border = '1px solid #ccc';
  335.             optionsContainer.style.backgroundColor = '#ddd';
  336.             optionsContainer.style.paddingTop = '10px';
  337.             optionsContainer.style.zIndex = 10003;
  338.             optionsContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
  339.             optionsContainer.style.display = 'none';
  340.  
  341.             const widthInput = document.createElement('input');
  342.             widthInput.type = 'text';
  343.             widthInput.placeholder = windowWidth+'px';
  344.             widthInput.style.width = '60px';
  345.             widthInput.style.marginBottom = '10px';
  346.             widthInput.style.marginLeft = '10px';
  347.             widthInput.style.height = '28px';
  348.             widthInput.style.borderStyle = 'solid';
  349.             widthInput.style.borderWidth = '1px';
  350.             widthInput.onchange = () => {
  351.                 windowWidth = parseInt(widthInput.value, 10) < minWindowWidth ? minWindowWidth : parseInt(widthInput.value, 10);
  352.                 GM_setValue("windowWidth", windowWidth);
  353.                 container.style.width = windowWidth + 'px';
  354.                 topBar.style.width = windowWidth + 'px';
  355.             };
  356.             const spanW = document.createElement('span');
  357.             spanW.textContent = '宽度:';
  358.             spanW.style.marginLeft = '10px';
  359.             optionsContainer.appendChild(spanW);
  360.             optionsContainer.appendChild(widthInput);
  361.  
  362.             const heightInput = document.createElement('input');
  363.             heightInput.type = 'text';
  364.             heightInput.placeholder = windowHeight+'px';
  365.             heightInput.style.width = '60px';
  366.             heightInput.style.marginBottom = '10px';
  367.             heightInput.style.marginLeft = '10px';
  368.             heightInput.style.height = '28px';
  369.             heightInput.style.borderStyle = 'solid';
  370.             heightInput.style.borderWidth = '1px';
  371.             heightInput.onchange = () => {
  372.                 windowHeight = parseInt(heightInput.value, 10) < minWindowHeight ? minWindowHeight : parseInt(heightInput.value, 10);
  373.                 GM_setValue("windowHeight", windowHeight);
  374.                 container.style.height = windowHeight + 'px';
  375.             };
  376.             const spanH = document.createElement('span');
  377.             spanH.textContent = '高度:';
  378.             spanH.style.marginLeft = '10px';
  379.             optionsContainer.appendChild(spanH);
  380.             optionsContainer.appendChild(heightInput);
  381.  
  382.             const ruleStyleSelect = document.createElement('select');
  383.             ruleStyleSelect.style.marginBottom = '10px';
  384.             ruleStyleSelect.style.height = '32px';
  385.             ruleStyleSelect.style.marginLeft = '10px';
  386.             ruleStyleSelect.style.borderStyle = 'solid';
  387.             ruleStyleSelect.style.borderWidth = '1px';
  388.             ruleStyleSelect.innerHTML = '<option value="1">每行1列</option>' +
  389.                 '<option value="2">每行2列</option>' +
  390.                 '<option value="3">每行3列</option>' +
  391.                 '<option value="4">每行4列</option>' +
  392.                 '<option value="5">每行5列</option>' ;
  393.             ruleStyleSelect.onchange = () => {
  394.                 GM_setValue("ruleStyle", ruleStyleSelect.value);
  395.                 changeRuleListStyle(ruleStyleSelect.value);
  396.             };
  397.             const spanS = document.createElement('span');
  398.             spanS.textContent = '自动化列表:';
  399.             spanS.style.marginLeft = '10px';
  400.             optionsContainer.appendChild(spanS);
  401.             optionsContainer.appendChild(ruleStyleSelect);
  402.             ruleStyleSelect.value=ruleStyle;
  403.             changeRuleListStyle(ruleStyle);
  404.  
  405.             const colorInput = document.createElement('input');
  406.             colorInput.type = 'text';
  407.             colorInput.placeholder=defaultColor;
  408.             colorInput.style.width = '80px';
  409.             colorInput.style.marginBottom = '10px';
  410.             colorInput.style.marginLeft = '10px';
  411.             colorInput.style.height = '28px';
  412.             colorInput.style.borderStyle = 'solid';
  413.             colorInput.style.borderWidth = '1px';
  414.             colorInput.oninput = () => {
  415.                 backgroundColor = colorInput.value;
  416.                 GM_setValue("backgroundColor", backgroundColor);
  417.             };
  418.             const spanC = document.createElement('span');
  419.             spanC.textContent = '卡片颜色:';
  420.             spanC.style.marginLeft = '10px';
  421.             optionsContainer.appendChild(spanC);
  422.             optionsContainer.appendChild(colorInput);
  423.  
  424.             const logLabel = document.createElement('label');
  425.             logLabel.htmlFor = 'highlightLogCheck';
  426.             logLabel.appendChild(document.createTextNode('日志高亮'));
  427.             logLabel.style.marginBottom = '10px';
  428.             logLabel.style.marginLeft = '10px';
  429.             optionsContainer.appendChild(logLabel);
  430.  
  431.             const highlightLogCheck = document.createElement('input');
  432.             highlightLogCheck.type = 'checkbox';
  433.             highlightLogCheck.id = 'highlightLogCheck';
  434.             highlightLogCheck.checked=enableEnhancedDisplayLog;
  435.             highlightLogCheck.style.marginLeft = '2px';
  436.             highlightLogCheck.onchange=function() {
  437.                 enableEnhancedDisplayLog = highlightLogCheck.checked;
  438.                 GM_setValue("enableEnhancedDisplayLog", enableEnhancedDisplayLog);
  439.             };
  440.             optionsContainer.appendChild(highlightLogCheck);
  441.  
  442.             const fitLabel = document.createElement('label');
  443.             fitLabel.htmlFor = 'autoFitCheck';
  444.             fitLabel.appendChild(document.createTextNode('自动画布'));
  445.             fitLabel.style.marginBottom = '10px';
  446.             fitLabel.style.marginLeft = '10px';
  447.             optionsContainer.appendChild(fitLabel);
  448.  
  449.             const autoFitCheck = document.createElement('input');
  450.             autoFitCheck.type = 'checkbox';
  451.             autoFitCheck.id = 'autoFitCheck';
  452.             autoFitCheck.checked=enableAutoFitContent;
  453.             autoFitCheck.style.marginLeft = '2px';
  454.             autoFitCheck.onchange=function() {
  455.                 enableAutoFitContent = autoFitCheck.checked;
  456.                 GM_setValue("enableAutoFitContent", enableAutoFitContent);
  457.             };
  458.             optionsContainer.appendChild(autoFitCheck);
  459.  
  460.             const autoCollapseLabel = document.createElement('label');
  461.             autoCollapseLabel.htmlFor = 'autoCollapseCheck';
  462.             autoCollapseLabel.appendChild(document.createTextNode('自动折叠'));
  463.             autoCollapseLabel.style.marginBottom = '10px';
  464.             autoCollapseLabel.style.marginLeft = '10px';
  465.             optionsContainer.appendChild(autoCollapseLabel);
  466.             const autoCollapseCheck = document.createElement('input');
  467.             autoCollapseCheck.type = 'checkbox';
  468.             autoCollapseCheck.id = 'autoCollapseCheck';
  469.             autoCollapseCheck.checked=enableAutoCollapseCheck;
  470.             autoCollapseCheck.style.marginLeft = '2px';
  471.             autoCollapseCheck.onchange=function() {
  472.                 enableAutoCollapseCheck = autoCollapseCheck.checked;
  473.                 GM_setValue("enableAutoCollapseCheck", enableAutoCollapseCheck);
  474.                 autoCollapse();
  475.             };
  476.             optionsContainer.appendChild(autoCollapseCheck);
  477.             container.appendChild(optionsContainer);
  478.  
  479.  
  480.             //设备表格
  481.             const devTable = document.createElement('table');
  482.             devTable.id = 'devTable';
  483.             devTable.border = '1';
  484.             devTable.cellSpacing = '0';
  485.             devTable.cellPadding = '5';
  486.             devTable.style.width = '100%';
  487.             devTable.style.border = '1px soild black';
  488.             devTable.style.userSelect = 'text';
  489.             devTable.style.borderCollapse = 'collapse';
  490.  
  491.             const devThead = document.createElement('thead');
  492.             const devHeaderRow = document.createElement('tr');
  493.             const devRoomHeader = document.createElement('th');
  494.             const devDeviceHeader = document.createElement('th');
  495.             const devRuleHeader = document.createElement('th');
  496.             const devTbody = document.createElement('tbody');
  497.  
  498.             let roomSortOrder = 'asc';
  499.             let deviceSortOrder = 'asc';
  500.             let ruleSortOrder = 'asc';
  501.  
  502.             const devUpdateSortMarkers = () => {
  503.                 devRoomHeader.innerHTML = `房间 ${roomSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  504.                 devDeviceHeader.innerHTML = `设备 ${deviceSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  505.                 devRuleHeader.innerHTML = `自动化名称 ${ruleSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  506.             };
  507.  
  508.             devRoomHeader.textContent = '房间';
  509.             devRoomHeader.style.textWrap= 'nowrap';
  510.             devDeviceHeader.textContent = '设备';
  511.             devDeviceHeader.style.textWrap = 'nowrap';
  512.             devRuleHeader.textContent = '自动化名称';
  513.  
  514.             devRoomHeader.onclick = () => {
  515.                 roomSortOrder = roomSortOrder === 'asc' ? 'desc' : 'asc';
  516.                 sortTable(devTbody,0, roomSortOrder);
  517.                 devUpdateSortMarkers();
  518.             };
  519.             devDeviceHeader.onclick = () => {
  520.                 deviceSortOrder = deviceSortOrder === 'asc' ? 'desc' : 'asc';
  521.                 sortTable(devTbody,1, deviceSortOrder);
  522.                 devUpdateSortMarkers();
  523.             };
  524.             devRuleHeader.onclick = () => {
  525.                 ruleSortOrder = ruleSortOrder === 'asc' ? 'desc' : 'asc';
  526.                 sortTable(devTbody,2, ruleSortOrder);
  527.                 devUpdateSortMarkers();
  528.             };
  529.  
  530.             devHeaderRow.appendChild(devRoomHeader);
  531.             devHeaderRow.appendChild(devDeviceHeader);
  532.             devHeaderRow.appendChild(devRuleHeader);
  533.             devThead.appendChild(devHeaderRow);
  534.             devTable.appendChild(devThead);
  535.  
  536.             const devFilterContainer = document.createElement('span');
  537.             devFilterContainer.id = 'devFilterContainer';
  538.             devFilterContainer.style.display = '';
  539.  
  540.             const roomFilterSelect = document.createElement('select');
  541.             roomFilterSelect.style.marginBottom = '10px';
  542.             roomFilterSelect.style.height = '32px';
  543.             roomFilterSelect.style.borderStyle = 'solid';
  544.             roomFilterSelect.style.borderWidth = '1px';
  545.             roomFilterSelect.innerHTML = `<option value="">所有房间</option>` + roomNames.map(room => `<option value="${room}">${room}</option>`).join('');
  546.             roomFilterSelect.onchange = () => {
  547.                 filterDevTable(roomFilterSelect.value,deviceFilterInput.value, devRuleFilterInput.value);
  548.             };
  549.             const deviceFilterInput = document.createElement('input');
  550.             deviceFilterInput.type = 'text';
  551.             deviceFilterInput.placeholder = '设备筛选';
  552.             deviceFilterInput.style.width = '200px';
  553.             deviceFilterInput.style.marginBottom = '10px';
  554.             deviceFilterInput.style.marginLeft = '10px';
  555.             deviceFilterInput.style.height = '28px';
  556.             deviceFilterInput.style.borderStyle = 'solid';
  557.             deviceFilterInput.style.borderWidth = '1px';
  558.             deviceFilterInput.oninput = () => {
  559.                 filterDevTable(roomFilterSelect.value,deviceFilterInput.value, devRuleFilterInput.value);
  560.             };
  561.             const devRuleFilterInput = document.createElement('input');
  562.             devRuleFilterInput.type = 'text';
  563.             devRuleFilterInput.placeholder = '自动化名称筛选';
  564.             devRuleFilterInput.style.width = '200px';
  565.             devRuleFilterInput.style.marginBottom = '10px';
  566.             devRuleFilterInput.style.marginLeft = '10px';
  567.             devRuleFilterInput.style.height = '28px';
  568.             devRuleFilterInput.style.borderStyle = 'solid';
  569.             devRuleFilterInput.style.borderWidth = '1px';
  570.             devRuleFilterInput.oninput = () => {
  571.                 filterDevTable(roomFilterSelect.value,deviceFilterInput.value, devRuleFilterInput.value);
  572.             };
  573.  
  574.             devFilterContainer.appendChild(roomFilterSelect);
  575.             devFilterContainer.appendChild(deviceFilterInput);
  576.             devFilterContainer.appendChild(devRuleFilterInput);
  577.             container.appendChild(devFilterContainer);
  578.  
  579.             const varFilterContainer = document.createElement('span');
  580.             varFilterContainer.id = 'varFilterContainer';
  581.             varFilterContainer.style.display = 'none';
  582.  
  583.             const varScopeFilterSelect = document.createElement('select');
  584.             varScopeFilterSelect.style.marginBottom = '10px';
  585.             varScopeFilterSelect.style.height = '32px';
  586.             varScopeFilterSelect.style.marginLeft = '10px';
  587.             varScopeFilterSelect.style.borderStyle = 'solid';
  588.             varScopeFilterSelect.style.borderWidth = '1px';
  589.             varScopeFilterSelect.innerHTML =
  590.                 '<option value="">所有变量范围</option>' +
  591.                 '<option value="全局">全局</option>' +
  592.                 '<option value="自动化内">自动化内</option>' ;
  593.             varScopeFilterSelect.onchange = () => {
  594.                 filterVarTable(varScopeFilterSelect.value,varTypeFilterSelect.value,varNameFilterInput.value,varValueFilterInput.value,varRuleFilterInput.value);
  595.             };
  596.             const varTypeFilterSelect = document.createElement('select');
  597.             varTypeFilterSelect.style.marginBottom = '10px';
  598.             varTypeFilterSelect.style.height = '32px';
  599.             varTypeFilterSelect.style.marginLeft = '10px';
  600.             varTypeFilterSelect.style.borderStyle = 'solid';
  601.             varTypeFilterSelect.style.borderWidth = '1px';
  602.             varTypeFilterSelect.innerHTML =
  603.                 '<option value="">所有变量类型</option>' +
  604.                 '<option value="文本">文本</option>' +
  605.                 '<option value="数值">数值</option>' ;
  606.             varTypeFilterSelect.onchange = () => {
  607.                 filterVarTable(varScopeFilterSelect.value,varTypeFilterSelect.value,varNameFilterInput.value,varValueFilterInput.value,varRuleFilterInput.value);
  608.             };
  609.             const varNameFilterInput = document.createElement('input');
  610.             varNameFilterInput.type = 'text';
  611.             varNameFilterInput.placeholder = '变量名称筛选';
  612.             varNameFilterInput.style.width = '200px';
  613.             varNameFilterInput.style.marginBottom = '10px';
  614.             varNameFilterInput.style.marginLeft = '10px';
  615.             varNameFilterInput.style.height = '28px';
  616.             varNameFilterInput.style.borderStyle = 'thin';
  617.             varNameFilterInput.style.borderWidth = '1px';
  618.             varNameFilterInput.oninput = () => {
  619.                 filterVarTable(varScopeFilterSelect.value,varTypeFilterSelect.value,varNameFilterInput.value,varValueFilterInput.value,varRuleFilterInput.value);
  620.             };
  621.  
  622.             const varValueFilterInput = document.createElement('input');
  623.             varValueFilterInput.type = 'text';
  624.             varValueFilterInput.placeholder = '变量值称筛选';
  625.             varValueFilterInput.style.width = '200px';
  626.             varValueFilterInput.style.marginBottom = '10px';
  627.             varValueFilterInput.style.marginLeft = '10px';
  628.             varValueFilterInput.style.height = '28px';
  629.             varValueFilterInput.style.borderStyle = 'thin';
  630.             varValueFilterInput.style.borderWidth = '1px';
  631.             varValueFilterInput.oninput = () => {
  632.                 filterVarTable(varScopeFilterSelect.value,varTypeFilterSelect.value,varNameFilterInput.value,varValueFilterInput.value,varRuleFilterInput.value);
  633.             };
  634.             const varRuleFilterInput = document.createElement('input');
  635.             varRuleFilterInput.type = 'text';
  636.             varRuleFilterInput.placeholder = '自动化名称筛选';
  637.             varRuleFilterInput.style.width = '200px';
  638.             varRuleFilterInput.style.marginBottom = '10px';
  639.             varRuleFilterInput.style.marginLeft = '10px';
  640.             varRuleFilterInput.style.height = '28px';
  641.             varRuleFilterInput.style.borderStyle = 'solid';
  642.             varRuleFilterInput.style.borderWidth = '1px';
  643.             varRuleFilterInput.oninput = () => {
  644.                 filterVarTable(varScopeFilterSelect.value,varTypeFilterSelect.value,varNameFilterInput.value,varValueFilterInput.value,varRuleFilterInput.value);
  645.             };
  646.             varFilterContainer.appendChild(varScopeFilterSelect);
  647.             varFilterContainer.appendChild(varTypeFilterSelect);
  648.             varFilterContainer.appendChild(varNameFilterInput);
  649.             varFilterContainer.appendChild(varValueFilterInput);
  650.             varFilterContainer.appendChild(varRuleFilterInput);
  651.             container.appendChild(varFilterContainer);
  652.  
  653.             const modeButton = document.createElement('button');
  654.             modeButton.id="modeButton";
  655.             modeButton.textContent = '切换至变量视图';
  656.             modeButton.title = '切换模式';
  657.             modeButton.style.marginRight = '15px';
  658.             modeButton.style.float = 'right';
  659.             modeButton.style.padding = '5px';
  660.             modeButton.onclick = () => {
  661.                 handleModeBtnClick();
  662.             };
  663.             container.appendChild(modeButton);
  664.  
  665.  
  666.             Object.entries(devRuleData).forEach(([did, data]) => {
  667.                 const device=data.device;
  668.                 const rules=data.rules;
  669.                 const row = document.createElement('tr');
  670.                 const roomCell = document.createElement('td');
  671.                 roomCell.textContent = device.roomName;
  672.                 roomCell.style.textWrap= 'nowrap';
  673.                 const deviceCell = document.createElement('td');
  674.                 deviceCell.textContent = device.name;
  675.                 deviceCell.style.textWrap= 'nowrap';
  676.                 const ruleCell = document.createElement('td');
  677.  
  678.                 const host = window.location.host;
  679.                 let sequence = 0;
  680.                 rules.forEach(rule => {
  681.                     const link = document.createElement('a');
  682.                     link.href = `http://${host}/#/graph/${rule.id}`;
  683.                     link.target = '_self';
  684.                     link.textContent = ++sequence+"、"+rule.name + "[" + rule.cardIds.split(',').length + "/" + rule.totalCardNum + "]";
  685.                     link.onclick = () => {
  686.                         window.location.hash = '#/';
  687.                         selectCardIds = rule.cardIds;
  688.                     };
  689.                     ruleCell.appendChild(link);
  690.                     ruleCell.appendChild(document.createElement('br'));
  691.                 });
  692.                 row.appendChild(roomCell);
  693.                 row.appendChild(deviceCell);
  694.                 row.appendChild(ruleCell);
  695.                 devTbody.appendChild(row);
  696.             });
  697.             devTable.appendChild(devTbody);
  698.  
  699.             //变量表格
  700.             const varTable = document.createElement('table');
  701.             varTable.id = 'varTable';
  702.             varTable.border = '1';
  703.             varTable.cellSpacing = '0';
  704.             varTable.cellPadding = '5';
  705.             varTable.style.width = '100%';
  706.             varTable.style.border = '1px soild black';
  707.             varTable.style.userSelect = 'text';
  708.             varTable.style.borderCollapse = 'collapse';
  709.             varTable.style.display = 'none';
  710.  
  711.             const varThead = document.createElement('thead');
  712.             const varHeaderRow = document.createElement('tr');
  713.             const varScopeHeader = document.createElement('th');
  714.             const varTypeHeader = document.createElement('th');
  715.             const varNameHeader = document.createElement('th');
  716.             const varValueHeader = document.createElement('th');
  717.             const varRuleHeader = document.createElement('th');
  718.             const varTbody = document.createElement('tbody');
  719.  
  720.             let varScopeSortOrder = 'asc';
  721.             let varTypeSortOrder = 'asc';
  722.             let varNameSortOrder = 'asc';
  723.             let varValueSortOrder = 'asc';
  724.             let varRuleSortOrder = 'asc';
  725.             const varUpdateSortMarkers = () => {
  726.                 varScopeHeader.innerHTML = `变量范围 ${varScopeSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  727.                 varTypeHeader.innerHTML = `变量类型 ${varTypeSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  728.                 varNameHeader.innerHTML = `变量名 ${varNameSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  729.                 varValueHeader.innerHTML = `变量值 ${varValueSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  730.                 varRuleHeader.innerHTML = `自动化名称 ${varRuleSortOrder === 'asc' ? '⬆️' : '⬇️'}`;
  731.             };
  732.  
  733.             varScopeHeader.textContent = '变量范围';
  734.             varScopeHeader.style.textWrap= 'nowrap';
  735.             varTypeHeader.textContent = '变量类型';
  736.             varTypeHeader.style.textWrap= 'nowrap';
  737.             varNameHeader.textContent = '变量名';
  738.             varNameHeader.style.textWrap = 'nowrap';
  739.             varValueHeader.textContent = '变量值';
  740.             varValueHeader.style.textWrap = 'nowrap';
  741.             varRuleHeader.textContent = '自动化名称';
  742.             varRuleHeader.style.textWrap = 'nowrap';
  743.  
  744.             varScopeHeader.onclick = () => {
  745.                 varScopeSortOrder = varScopeSortOrder === 'asc' ? 'desc' : 'asc';
  746.                 sortTable(varTbody,0, varScopeSortOrder);
  747.                 varUpdateSortMarkers();
  748.             };
  749.             varTypeHeader.onclick = () => {
  750.                 varTypeSortOrder = varTypeSortOrder === 'asc' ? 'desc' : 'asc';
  751.                 sortTable(varTbody,1, varTypeSortOrder);
  752.                 varUpdateSortMarkers();
  753.             };
  754.             varNameHeader.onclick = () => {
  755.                 varNameSortOrder = varNameSortOrder === 'asc' ? 'desc' : 'asc';
  756.                 sortTable(varTbody,2, varNameSortOrder);
  757.                 varUpdateSortMarkers();
  758.             };
  759.             varValueHeader.onclick = () => {
  760.                 varValueSortOrder = varValueSortOrder === 'asc' ? 'desc' : 'asc';
  761.                 sortTable(varTbody,3, varValueSortOrder);
  762.                 varUpdateSortMarkers();
  763.             };
  764.             varRuleHeader.onclick = () => {
  765.                 varRuleSortOrder = varRuleSortOrder === 'asc' ? 'desc' : 'asc';
  766.                 sortTable(varTbody,4, varRuleSortOrder);
  767.                 varUpdateSortMarkers();
  768.             };
  769.  
  770.             varHeaderRow.appendChild(varScopeHeader);
  771.             varHeaderRow.appendChild(varTypeHeader);
  772.             varHeaderRow.appendChild(varNameHeader);
  773.             varHeaderRow.appendChild(varValueHeader);
  774.             varHeaderRow.appendChild(varRuleHeader);
  775.             varThead.appendChild(varHeaderRow);
  776.             varTable.appendChild(varThead);
  777.             Object.entries(varRuleData).forEach(([vid, data]) => {
  778.                 const rules=data.rules;
  779.                 const varData=varMap[vid];
  780.                 if(varData != null) {
  781.                     const row = document.createElement('tr');
  782.  
  783.                     const varScopeCell = document.createElement('td');
  784.                     varScopeCell.textContent = varData.scope;
  785.                     varScopeCell.style.textWrap = 'nowrap';
  786.                     const varTypeCell = document.createElement('td');
  787.                     varTypeCell.textContent = varData.type;
  788.                     varTypeCell.style.textWrap = 'nowrap';
  789.                     const varNameCell = document.createElement('td');
  790.                     varNameCell.textContent = varData.name;
  791.                     varNameCell.style.textWrap = 'nowrap';
  792.                     const varValueCell = document.createElement('td');
  793.                     varValueCell.textContent = varData.value;
  794.                     varValueCell.style.textWrap = 'nowrap';
  795.  
  796.                     const varRuleCell = document.createElement('td');
  797.                     const host = window.location.host;
  798.                     let sequence = 0;
  799.                     rules.forEach(rule => {
  800.                         const link = document.createElement('a');
  801.                         link.href = `http://${host}/#/graph/${rule.id}`;
  802.                         link.target = '_self';
  803.                         link.textContent = ++sequence + "、" + rule.name + "[" + rule.cardIds.split(',').length + "/" + rule.totalCardNum + "]";
  804.                         link.onclick = () => {
  805.                             window.location.hash = '#/';
  806.                             selectCardIds = rule.cardIds;
  807.                         };
  808.                         varRuleCell.appendChild(link);
  809.                         varRuleCell.appendChild(document.createElement('br'));
  810.                     });
  811.                     row.appendChild(varScopeCell);
  812.                     row.appendChild(varTypeCell);
  813.                     row.appendChild(varNameCell);
  814.                     row.appendChild(varValueCell);
  815.                     row.appendChild(varRuleCell);
  816.                     varTbody.appendChild(row);
  817.                 }
  818.             });
  819.             varTable.appendChild(varTbody);
  820.  
  821.             container.appendChild(topBar);
  822.             container.appendChild(devTable);
  823.             container.appendChild(varTable);
  824.             document.body.appendChild(container);
  825.  
  826.             devUpdateSortMarkers();
  827.             varUpdateSortMarkers();
  828.  
  829.             function filterDevTable(roomName,deviceKeyword, ruleKeyword) {
  830.                 const rows = Array.from(devTable.rows);
  831.                 rows.forEach(row => {
  832.                     const roomText = row.cells[0].textContent;
  833.                     const deviceText = row.cells[1].textContent.toLowerCase();
  834.                     const ruleText = row.cells[2].textContent.toLowerCase();
  835.                     if ((roomName === '' || roomText === roomName) && deviceText.includes(deviceKeyword.toLowerCase()) && ruleText.includes(ruleKeyword.toLowerCase())) {
  836.                         row.style.display = '';
  837.                     } else {
  838.                         row.style.display = 'none';
  839.                     }
  840.                 });
  841.             }
  842.             function filterVarTable(varScope,varType, varName,varValue, ruleName) {
  843.                 const rows = Array.from(varTable.rows);
  844.                 rows.forEach(row => {
  845.                     const varScopeText = row.cells[0].textContent;
  846.                     const varTypeText = row.cells[1].textContent;
  847.                     const varNameText = row.cells[2].textContent.toLowerCase();
  848.                     const varValueText = row.cells[3].textContent.toLowerCase();
  849.                     const ruleNameText = row.cells[4].textContent.toLowerCase();
  850.                     if ((varScope === '' || varScope === varScopeText)
  851.                         && (varType === '' || varType === varTypeText)
  852.                         && varNameText.includes(varName.toLowerCase())
  853.                         && varValueText.includes(varValue.toLowerCase())
  854.                         && ruleNameText.includes(ruleName.toLowerCase())) {
  855.                         row.style.display = '';
  856.                     } else {
  857.                         row.style.display = 'none';
  858.                     }
  859.                 });
  860.             }
  861.             autoCollapse();
  862.         } catch (error) {
  863.             isInit=false;
  864.             console.error('调用 API 时出错:', error);
  865.         }
  866.     };
  867.  
  868.     const selectDevices = async () => {
  869.         await sleep(1000);
  870.         const cardIds = selectCardIds.split(',');
  871.         for (const cardId of cardIds) {
  872.             if (cardId.trim() !== '') {
  873.                 let targetElement = document.querySelector( "[id='"+cardId.trim()+"'] > div > div");
  874.                 if (targetElement) {
  875.                     targetElement.style.backgroundColor = backgroundColor === '' ? defaultColor : backgroundColor;
  876.                 }
  877.             }
  878.         }
  879.         selectCardIds = '';
  880.         closeGraphContainer();
  881.         const graphContainer = document.createElement('div');
  882.         graphContainer.id = 'graph-list-container';
  883.         graphContainer.style.position = 'fixed';
  884.         graphContainer.style.top = '39px';
  885.         graphContainer.style.right = '40px';
  886.         graphContainer.style.width = '450px';
  887.         graphContainer.style.height = '800px';
  888.         graphContainer.style.overflowY = 'scroll';
  889.         graphContainer.style.backgroundColor = 'white';
  890.         graphContainer.style.border = '1px solid #ccc';
  891.         graphContainer.style.paddingTop = '0px';
  892.         graphContainer.style.zIndex = 9999;
  893.         graphContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
  894.  
  895.         const graphDevTableDiv = document.createElement('div');
  896.         const graphDevSpan = document.createElement('span');
  897.         graphDevSpan.textContent = "当前自动化涉及的设备列表：";
  898.         const graphDevCloseBtn = document.createElement('span');
  899.         graphDevCloseBtn.textContent = "x";
  900.         graphDevCloseBtn.title="关闭";
  901.         graphDevCloseBtn.style.color = 'blue';
  902.         graphDevCloseBtn.style.float = 'right';
  903.         graphDevCloseBtn.style.marginRight = '5px';
  904.         graphDevCloseBtn.style.cursor = 'pointer';
  905.         graphDevCloseBtn.onclick = () => {
  906.             closeGraphContainer();
  907.         }
  908.         graphDevTableDiv.appendChild(graphDevSpan);
  909.         graphDevTableDiv.appendChild(graphDevCloseBtn);
  910.         const graphDevTable = document.createElement('table');
  911.         graphDevTable.border = '1';
  912.         graphDevTable.cellSpacing = '0';
  913.         graphDevTable.cellPadding = '5';
  914.         graphDevTable.style.width = '100%';
  915.         graphDevTable.style.border = '1px soild black';
  916.         graphDevTable.style.borderCollapse = 'collapse';
  917.         graphDevTable.style.userSelect = 'text';
  918.  
  919.         const graphDevThead = document.createElement('thead');
  920.         const graphDevHeaderRow = document.createElement('tr');
  921.         const graphDevRoomHeader = document.createElement('th');
  922.         const graphDevInfoHeader = document.createElement('th');
  923.         const graphDevTbody = document.createElement('tbody');
  924.  
  925.         graphDevRoomHeader.textContent = '房间';
  926.         graphDevRoomHeader.style.textWrap= 'nowrap';
  927.         graphDevInfoHeader.textContent = '设备名称';
  928.         graphDevInfoHeader.style.textWrap= 'nowrap';
  929.  
  930.         let ruleId=window.location.hash.split('/')[2];
  931.         const ruleContent = await callAPI('getGraph', {id: ruleId});
  932.  
  933.         const dids = new Set(ruleContent.nodes.map(n => n.props?.did).filter(did => did !== undefined));
  934.         dids.forEach(did => {
  935.             const row = document.createElement('tr');
  936.             const roomCell = document.createElement('td');
  937.             roomCell.textContent = devMap[did]?.roomName ?? `未知`;
  938.             roomCell.style.textWrap= 'nowrap';
  939.             const deviceCell = document.createElement('td');
  940.             deviceCell.style.textWrap= 'nowrap';
  941.             const cards = ruleContent.nodes
  942.                         .filter(node => node.props && node.id && node.props.did === did)
  943.                         .map(node => node.id);
  944.             const link = document.createElement('a');
  945.             link.href = `javascript:void(0);`;
  946.             link.textContent = devMap[did]?.name+" ["+cards.length+"]" ?? `did: ${did}`;
  947.             link.onclick = () => {
  948.                 const cssCards = document.querySelectorAll('.card,.simple-card');
  949.                 if(cssCards){
  950.                     cssCards.forEach(card => {
  951.                         card.style.backgroundColor = '';
  952.                     });
  953.                 }
  954.                 if(cards){
  955.                     cards.forEach(cardId => {
  956.                             let targetElement = document.querySelector( "[id='"+cardId.trim()+"'] > div > div");
  957.                             if (targetElement) {
  958.                                 targetElement.style.backgroundColor = backgroundColor === '' ? defaultColor : backgroundColor;
  959.                             }
  960.                     });
  961.                 }
  962.             };
  963.             deviceCell.appendChild(link);
  964.             row.appendChild(roomCell);
  965.             row.appendChild(deviceCell);
  966.             graphDevTbody.appendChild(row);
  967.         });
  968.  
  969.         const graphVarTableDiv = document.createElement('div');
  970.         graphVarTableDiv.textContent = "当前自动化涉及的变量列表：";
  971.         graphVarTableDiv.style.marginTop='10px';
  972.         const graphVarTable = document.createElement('table');
  973.         graphVarTable.border = '1';
  974.         graphVarTable.cellSpacing = '0';
  975.         graphVarTable.cellPadding = '5';
  976.         graphVarTable.style.width = '100%';
  977.         graphVarTable.style.border = '1px soild black';
  978.         graphVarTable.style.borderCollapse = 'collapse';
  979.         graphVarTable.style.userSelect = 'text';
  980.  
  981.         const graphVarThead = document.createElement('thead');
  982.         const graphVarHeaderRow = document.createElement('tr');
  983.         const graphVarScopeHeader = document.createElement('th');
  984.         const graphVarTypeHeader = document.createElement('th');
  985.         const graphVarNameHeader = document.createElement('th');
  986.         const graphVarValueHeader = document.createElement('th');
  987.         const graphVarTbody = document.createElement('tbody');
  988.  
  989.         graphVarScopeHeader.textContent = '范围';
  990.         graphVarScopeHeader.style.textWrap= 'nowrap';
  991.         graphVarTypeHeader.textContent = '类型';
  992.         graphVarTypeHeader.style.textWrap= 'nowrap';
  993.         graphVarNameHeader.textContent = '变量名称';
  994.         graphVarNameHeader.style.textWrap= 'nowrap';
  995.         graphVarValueHeader.textContent = '变量值';
  996.  
  997.         let varMap={};
  998.         const varScopes = (await callAPI('getVarScopeList',{})).scopes;
  999.         for(const scope of varScopes){
  1000.             if(scope==="global" || scope==="R"+ruleId) {
  1001.                 const vars = await callAPI('getVarList', {scope: scope});
  1002.                 Object.entries(vars).forEach(([vid, v]) => {
  1003.                     varMap[vid] = {
  1004.                         name: v.userData.name,
  1005.                         scope: (scope === "global" ? "全局" : "自动化内"),
  1006.                         type: (v.type === "string" ? "文本" : "数值"),
  1007.                         value: v.value
  1008.                     }
  1009.                 });
  1010.             }
  1011.         }
  1012.  
  1013.         const varids = new Set(ruleContent.nodes.filter(node => node.props && node.props.scope).map(node => node.props.id));
  1014.         varids.forEach(vid => {
  1015.             const row = document.createElement('tr');
  1016.             const varScopeCell = document.createElement('td');
  1017.             varScopeCell.textContent = varMap[vid]?.scope ?? `未知`;
  1018.             varScopeCell.style.textWrap= 'nowrap';
  1019.             const varTypeCell = document.createElement('td');
  1020.             varTypeCell.textContent = varMap[vid]?.type ?? `未知`;
  1021.             varTypeCell.style.textWrap= 'nowrap';
  1022.             const varNameCell = document.createElement('td');
  1023.             varNameCell.style.textWrap= 'nowrap';
  1024.             const cards = ruleContent.nodes
  1025.                 .filter(node => node.props && node.id && node.props.scope &&  node.props.id=== vid)
  1026.                 .map(node => node.id);
  1027.             const link = document.createElement('a');
  1028.             link.href = `javascript:void(0);`;
  1029.             link.textContent = varMap[vid]?.name+" ["+cards.length+"]" ?? `未知`;
  1030.             link.onclick = () => {
  1031.                 const cssCards = document.querySelectorAll('.card,.simple-card');
  1032.                 if(cssCards){
  1033.                     cssCards.forEach(card => {
  1034.                         card.style.backgroundColor = '';
  1035.                     });
  1036.                 }
  1037.                 if(cards){
  1038.                     cards.forEach(cardId => {
  1039.                             let targetElement = document.querySelector( "[id='"+cardId.trim()+"'] > div > div");
  1040.                             if (targetElement) {
  1041.                                 targetElement.style.backgroundColor = backgroundColor === '' ? defaultColor : backgroundColor;
  1042.                             }
  1043.                         });
  1044.                 }
  1045.             };
  1046.             varNameCell.appendChild(link);
  1047.             const varValueCell = document.createElement('td');
  1048.             varValueCell.textContent = varMap[vid]?.value ?? `未知`;
  1049.             row.appendChild(varScopeCell);
  1050.             row.appendChild(varTypeCell);
  1051.             row.appendChild(varNameCell);
  1052.             row.appendChild(varValueCell);
  1053.             graphVarTbody.appendChild(row);
  1054.         });
  1055.  
  1056.         const graphRemarkDiv = document.createElement('div');
  1057.         graphRemarkDiv.textContent = "提示：设备名称或变量名称后的括号内显示的数字为当前自动化涉及的卡片数量，点击设备名称或变量名称可高亮显示对应卡片！";
  1058.         graphRemarkDiv.style.color='red';
  1059.         graphRemarkDiv.style.marginTop='10px';
  1060.  
  1061.         graphDevHeaderRow.appendChild(graphDevRoomHeader);
  1062.         graphDevHeaderRow.appendChild(graphDevInfoHeader);
  1063.         graphDevThead.appendChild(graphDevHeaderRow);
  1064.         graphDevTable.appendChild(graphDevThead);
  1065.         graphDevTable.appendChild(graphDevTbody);
  1066.         sortTable(graphDevTbody,0, 'asc');
  1067.         graphContainer.appendChild(graphDevTableDiv);
  1068.         graphContainer.appendChild(graphDevTable);
  1069.  
  1070.         graphVarHeaderRow.appendChild(graphVarScopeHeader);
  1071.         graphVarHeaderRow.appendChild(graphVarTypeHeader);
  1072.         graphVarHeaderRow.appendChild(graphVarNameHeader);
  1073.         graphVarHeaderRow.appendChild(graphVarValueHeader);
  1074.         graphVarThead.appendChild(graphVarHeaderRow);
  1075.         graphVarTable.appendChild(graphVarThead);
  1076.         graphVarTable.appendChild(graphVarTbody);
  1077.         sortTable(graphVarTbody,0, 'asc');
  1078.         graphContainer.appendChild(graphVarTableDiv);
  1079.         graphContainer.appendChild(graphVarTable);
  1080.         graphContainer.appendChild(graphRemarkDiv);
  1081.         document.body.appendChild(graphContainer);
  1082.  
  1083.     };
  1084.  
  1085.     function sortTable(tbody,columnIndex, sortOrder) {
  1086.         const rows = Array.from(tbody.rows);
  1087.         const sortedRows = rows.sort((a, b) => {
  1088.             const aText = a.cells[columnIndex].textContent;
  1089.             const bText = b.cells[columnIndex].textContent;
  1090.             if (sortOrder === 'asc') {
  1091.                 return aText.localeCompare(bText);
  1092.             } else {
  1093.                 return bText.localeCompare(aText);
  1094.             }
  1095.         });
  1096.         tbody.innerHTML = '';
  1097.         sortedRows.forEach(row => tbody.appendChild(row));
  1098.     }
  1099.     function handleModeBtnClick() {
  1100.         const varTable = document.getElementById('varTable');
  1101.         const devTable = document.getElementById('devTable');
  1102.         const modeButton = document.getElementById('modeButton');
  1103.         const devFilterContainer = document.getElementById('devFilterContainer');
  1104.         const varFilterContainer = document.getElementById('varFilterContainer');
  1105.  
  1106.         if (varTable && devTable && modeButton) {
  1107.             if (modeButton.textContent === "切换至变量视图") {
  1108.                 devTable.style.display = 'none';
  1109.                 varTable.style.display = '';
  1110.                 devFilterContainer.style.display = 'none';
  1111.                 varFilterContainer.style.display = '';
  1112.                 modeButton.textContent = '切换至设备视图';
  1113.             }else{
  1114.                 devTable.style.display = '';
  1115.                 varTable.style.display = 'none';
  1116.                 devFilterContainer.style.display = '';
  1117.                 varFilterContainer.style.display = 'none';
  1118.                 modeButton.textContent = '切换至变量视图';
  1119.             }
  1120.         }
  1121.     }
  1122.     function handleOptionsBtnClick() {
  1123.         const optionsContainer = document.getElementById('optionsContainer');
  1124.         if (optionsContainer) {
  1125.             if(optionsContainer.style.display === 'none'){
  1126.                 optionsContainer.style.display = '';
  1127.             }else{
  1128.                 optionsContainer.style.display = 'none';
  1129.             }
  1130.         }
  1131.     }
  1132.     function handleCollapseBtnClick() {
  1133.         const container = document.getElementById('device-rule-map');
  1134.         if (container) {
  1135.             if (container.style.height === windowHeight + 'px') {
  1136.                 collapse();
  1137.             }else{
  1138.                 expand();
  1139.             }
  1140.         }
  1141.     }
  1142.     function collapse() {
  1143.         const container = document.getElementById('device-rule-map');
  1144.         if (container) {
  1145.             const collapseButton = document.getElementById('collapseButton');
  1146.             const topBar = document.getElementById('topBar');
  1147.             topBar.style.width = '450px';
  1148.             container.style.height = '0px';
  1149.             container.style.width = '0px';
  1150.             collapseButton.textContent = '展开';
  1151.         }
  1152.     }
  1153.  
  1154.     function expand() {
  1155.         const container = document.getElementById('device-rule-map');
  1156.         if (container) {
  1157.             const collapseButton = document.getElementById('collapseButton');
  1158.             const topBar = document.getElementById('topBar');
  1159.             topBar.style.width = windowWidth + 'px';
  1160.             container.style.width = windowWidth + 'px';
  1161.             container.style.height = windowHeight + 'px';
  1162.             collapseButton.textContent = '折叠';
  1163.         }
  1164.     }
  1165.  
  1166.     function autoFitContent() {
  1167.         if(enableAutoFitContent && editor && editor.transformTool){
  1168.             editor.transformTool.fitToBestPos();
  1169.         }
  1170.     }
  1171.     function autoCollapse() {
  1172.         if(enableAutoCollapseCheck){
  1173.             collapse();
  1174.         }
  1175.     }
  1176.  
  1177.     function enhancedDisplayLog() {
  1178.         //监听画布变化
  1179.         const canvas = document.getElementById('canvas-root');
  1180.         if (canvas) {
  1181.             const config = {attributes: false, childList: true, subtree: true};
  1182.             const callback = function (mutationsList, observer) {
  1183.                 if (enableEnhancedDisplayLog) {
  1184.                     let element = document.querySelector('.panel-log-card-blink');
  1185.                     if (element && element.style.outline !== "red solid 20px") {
  1186.                         element.style.outline = "red solid 10px";
  1187.                     }
  1188.                     let animateElement = document.querySelector('animate');
  1189.                     if (animateElement && animateElement.getAttribute('stroke-width') != '10') {
  1190.                         let pathElement = animateElement.parentElement;
  1191.                         pathElement.setAttribute('stroke-width', '10');
  1192.                         if (pathElement) {
  1193.                             let gElement = pathElement.parentElement;
  1194.                             gElement.setAttribute('stroke', 'red');
  1195.                         }
  1196.                     }
  1197.                 }
  1198.             };
  1199.             const observer = new MutationObserver(callback);
  1200.             observer.observe(canvas, config);
  1201.         }
  1202.     }
  1203.     function addShortcutHelp(){
  1204.         const addedSchortcut = document.getElementById('addedSchortcut');
  1205.         if(addedSchortcut){
  1206.             return;
  1207.         }
  1208.         const helpLeft = document.querySelector('.help-modal-left');
  1209.         if(helpLeft) {
  1210.             const leftContent = `
  1211.             <div></div>
  1212.             <div class="help-modal-item-label" id="addedSchortcut">自适应画布</div>
  1213.             <div class="help-modal-item-btn">Ctrl 或 ⌘</div>
  1214.             <div class="help-modal-item-btn" style="width: 41px;">B</div>
  1215.             <div class="help-modal-item-label">关闭画布</div>
  1216.             <div class="help-modal-item-btn">Ctrl</div>
  1217.             <div class="help-modal-item-btn" style="width: 41px;">W</div>
  1218.             <div class="help-modal-item-label">关闭助手</div>
  1219.             <div class="help-modal-item-btn">Ctrl</div>
  1220.             <div class="help-modal-item-btn" style="width: 41px;">Q</div>
  1221.             `;
  1222.             helpLeft.insertAdjacentHTML('beforeend', leftContent);
  1223.         }
  1224.         const helpRight = document.querySelector('.help-modal-right');
  1225.         if(helpRight) {
  1226.             const rightContent = `
  1227.             <div></div>
  1228.             <div class="help-modal-item-label">折叠助手</div>
  1229.             <div class="help-modal-item-btn" style="width: auto;">Ctrl 或 ⌘</div>
  1230.             <div class="help-modal-item-btn" style="width: 41px;">E</div>
  1231.             <div class="help-modal-item-label">刷新助手</div>
  1232.             <div class="help-modal-item-btn">Ctrl</div>
  1233.             <div class="help-modal-item-btn" style="width: 41px;">R</div>
  1234.             `;
  1235.             helpRight.insertAdjacentHTML('beforeend', rightContent);
  1236.         }
  1237.  
  1238.         GM_addStyle('.help-modal .help-modal-middle {grid-template-rows: 32px 32px 32px 32px 32px;}');
  1239.         GM_addStyle('.help-modal .help-modal-right {grid-template-rows: 32px 32px 32px 32px 32px;}');
  1240.         GM_addStyle('.help-modal {height: 238px;}');
  1241.     }
  1242.  
  1243.     function changeRuleListStyle(count) {
  1244.         GM_addStyle('.automation-rule-page .ant-spin-container .content-scroll-wrapper .rule-list {    grid-template-columns: repeat('+count+', 1fr);}')
  1245.     }
  1246.     function sleep(ms) {
  1247.         return new Promise(resolve => setTimeout(resolve, ms));
  1248.     }
  1249.     function sortVars() {
  1250.         const varLists = document.querySelectorAll(".var-list");
  1251.         varLists.forEach(varList => {
  1252.             const commonVarCells = Array.from(varList.querySelectorAll(".common-var-cell"));
  1253.  
  1254.             const cellsWithTitle = commonVarCells.map(cell => ({
  1255.                 cell: cell,
  1256.                 title: (cell.querySelector(".var-name")?.getAttribute("title") || "").toUpperCase()
  1257.             }));
  1258.  
  1259.             cellsWithTitle.sort((a, b) => a.title.localeCompare(b.title));
  1260.  
  1261.             const fragment = document.createDocumentFragment();
  1262.             cellsWithTitle.forEach(item => fragment.appendChild(item.cell));
  1263.  
  1264.             varList.innerHTML = '';
  1265.             varList.appendChild(fragment);
  1266.         });
  1267.     }
  1268.  
  1269.     function isMiJiaJiKePage() {
  1270.         return document.title === "米家自动化极客版" && !document.querySelector('.pin-code-with-keyboard') && editor;
  1271.     }
  1272.     function closeGraphContainer() {
  1273.         const graphContainer = document.getElementById('graph-list-container');
  1274.         if (graphContainer) {
  1275.             document.body.removeChild(graphContainer);
  1276.         }
  1277.     }
  1278.     function handleUrlChange() {
  1279.         if (isMiJiaJiKePage()) {
  1280.             executeScript();
  1281.             closeGraphContainer();
  1282.             if (window.location.hash.match(/^#\/graph\/.*/g)) {
  1283.                 selectDevices();
  1284.                 setTimeout(function () {
  1285.                     autoFitContent();
  1286.                     enhancedDisplayLog();
  1287.                     autoCollapse();
  1288.                     addShortcutHelp();
  1289.                 }, 500);
  1290.             }
  1291.             if (window.location.hash.match(/^#\/vars/g)) {
  1292.                 setTimeout(function () {
  1293.                     sortVars();
  1294.                 }, 500);
  1295.                 sortVars();
  1296.             }
  1297.         }
  1298.     }
  1299.  
  1300.     //页面变化
  1301.     window.addEventListener('popstate', handleUrlChange);
  1302.     window.addEventListener('hashchange', handleUrlChange);
  1303.     const originalPushState = history.pushState;
  1304.     const originalReplaceState = history.replaceState;
  1305.     history.pushState = function() {
  1306.         originalPushState.apply(this, arguments);
  1307.         handleUrlChange();
  1308.     };
  1309.     history.replaceState = function() {
  1310.         originalReplaceState.apply(this, arguments);
  1311.         handleUrlChange();
  1312.     };
  1313.     //快捷键
  1314.     document.addEventListener('keydown', function(event) {
  1315.         if ((event.metaKey || event.ctrlKey) && event.key === 'e') {
  1316.             event.preventDefault();
  1317.             if(document.getElementById('collapseButton')){
  1318.                 document.getElementById('collapseButton').click();
  1319.             }
  1320.         }
  1321.         if (event.ctrlKey && event.key === 'q') {
  1322.             event.preventDefault();
  1323.             if(document.getElementById('closeButton')){
  1324.                 document.getElementById('closeButton').click();
  1325.             }
  1326.         }
  1327.         if (event.ctrlKey && event.key === 'r') {
  1328.             event.preventDefault();
  1329.             if(document.getElementById('refreshButton')){
  1330.                 document.getElementById('refreshButton').click();
  1331.             }
  1332.         }
  1333.         if ((event.metaKey || event.ctrlKey) && event.key === 'b') {
  1334.             event.preventDefault();
  1335.             if(editor && editor.transformTool){
  1336.                 editor.transformTool.fitToBestPos();
  1337.             }
  1338.         }
  1339.         if (event.ctrlKey && event.key === 'w') {
  1340.             event.preventDefault();
  1341.             const selectedMenuItem = document.querySelector('.app-header-menu-item-selected');
  1342.             if(selectedMenuItem){
  1343.                 const actionElement = selectedMenuItem.querySelector('.app-header-menu-item-action');
  1344.                 if(actionElement) {
  1345.                     actionElement.click();
  1346.                 }
  1347.             }
  1348.         }
  1349.  
  1350.     });
  1351.     window.onload = function () {
  1352.         //监控登录(不可用)页面
  1353.         const loginForm = document.querySelector('.account-content');
  1354.         if (loginForm) {
  1355.             const config = {attributes: true, childList: true, subtree: true};
  1356.             const callback = function (mutationsList, observer) {
  1357.                 setTimeout(function () {
  1358.                     handleUrlChange();
  1359.                 }, 1500);
  1360.             };
  1361.             const observer = new MutationObserver(callback);
  1362.             observer.observe(loginForm, config);
  1363.         }
  1364.  
  1365.     };
  1366. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址