427 lines
18 KiB
JavaScript
427 lines
18 KiB
JavaScript
|
/**
|
|||
|
|
* 环境配置模块
|
|||
|
|
* @type {module}
|
|||
|
|
*/
|
|||
|
|
import { createModal, markEdited } from './utils.js';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 渲染环境部分
|
|||
|
|
* @param {HTMLElement} component - 组件实例
|
|||
|
|
* @param {HTMLElement} container - 容器元素
|
|||
|
|
* @param {Element} rootElement - XML根元素
|
|||
|
|
*/
|
|||
|
|
export function renderEnvironmentSection(component, container, rootElement) {
|
|||
|
|
const envElement = rootElement.querySelector('Environment');
|
|||
|
|
|
|||
|
|
if (!envElement) {
|
|||
|
|
return; // 如果找不到Environment元素，直接返回
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const section = document.createElement('div');
|
|||
|
|
section.className = 'editor-section';
|
|||
|
|
|
|||
|
|
const title = document.createElement('div');
|
|||
|
|
title.className = 'section-title';
|
|||
|
|
title.textContent = '环境配置';
|
|||
|
|
section.appendChild(title);
|
|||
|
|
|
|||
|
|
const propertyGroup = document.createElement('div');
|
|||
|
|
propertyGroup.className = 'property-group';
|
|||
|
|
|
|||
|
|
// 获取并显示所有Environment属性
|
|||
|
|
Array.from(envElement.attributes).forEach(attr => {
|
|||
|
|
const propertyItem = document.createElement('div');
|
|||
|
|
propertyItem.className = 'property-item';
|
|||
|
|
|
|||
|
|
const label = document.createElement('label');
|
|||
|
|
label.className = 'property-label';
|
|||
|
|
label.textContent = attr.name;
|
|||
|
|
|
|||
|
|
// 对CPUAffinity属性使用特殊处理
|
|||
|
|
if (attr.name === 'CPUAffinity') {
|
|||
|
|
const inputContainer = document.createElement('div');
|
|||
|
|
inputContainer.style.display = 'flex';
|
|||
|
|
inputContainer.style.position = 'relative';
|
|||
|
|
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.style.flexGrow = '1';
|
|||
|
|
input.title = 'CPU亲和性';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const dropdownButton = document.createElement('button');
|
|||
|
|
dropdownButton.className = 'dropdown-button';
|
|||
|
|
dropdownButton.type = 'button'; // 确保按钮类型为button
|
|||
|
|
dropdownButton.innerHTML = '▼';
|
|||
|
|
dropdownButton.style.width = '30px';
|
|||
|
|
dropdownButton.style.border = '1px solid #ddd';
|
|||
|
|
dropdownButton.style.borderLeft = 'none';
|
|||
|
|
dropdownButton.style.borderRadius = '0 4px 4px 0';
|
|||
|
|
dropdownButton.style.backgroundColor = '#f5f5f5';
|
|||
|
|
dropdownButton.style.cursor = 'pointer';
|
|||
|
|
|
|||
|
|
// 创建下拉框容器
|
|||
|
|
const dropdown = document.createElement('div');
|
|||
|
|
dropdown.className = 'cpu-dropdown';
|
|||
|
|
dropdown.style.position = 'absolute';
|
|||
|
|
dropdown.style.top = '100%';
|
|||
|
|
dropdown.style.left = '0';
|
|||
|
|
dropdown.style.right = '0';
|
|||
|
|
dropdown.style.backgroundColor = 'white';
|
|||
|
|
dropdown.style.border = '1px solid #ddd';
|
|||
|
|
dropdown.style.borderRadius = '4px';
|
|||
|
|
dropdown.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
|
|||
|
|
dropdown.style.zIndex = '50'; // 提高z-index确保在最上层
|
|||
|
|
dropdown.style.padding = '10px';
|
|||
|
|
dropdown.style.display = 'none';
|
|||
|
|
|
|||
|
|
// 生成CPU核心选项
|
|||
|
|
const cpuCount = 16; // 假设最多16个核心
|
|||
|
|
|
|||
|
|
const selectedCores = attr.value.split(',').map(core => parseInt(core.trim())).filter(core => !isNaN(core));
|
|||
|
|
|
|||
|
|
for (let i = 0; i < cpuCount; i++) {
|
|||
|
|
const checkboxContainer = document.createElement('div');
|
|||
|
|
checkboxContainer.style.marginBottom = '6px';
|
|||
|
|
|
|||
|
|
const checkbox = document.createElement('input');
|
|||
|
|
checkbox.type = 'checkbox';
|
|||
|
|
checkbox.id = `cpu-${i}`;
|
|||
|
|
checkbox.value = i;
|
|||
|
|
checkbox.checked = selectedCores.includes(i);
|
|||
|
|
checkbox.style.marginRight = '6px';
|
|||
|
|
|
|||
|
|
const checkboxLabel = document.createElement('label');
|
|||
|
|
checkboxLabel.htmlFor = `cpu-${i}`;
|
|||
|
|
checkboxLabel.textContent = `CPU ${i}`;
|
|||
|
|
|
|||
|
|
checkbox.addEventListener('change', () => {
|
|||
|
|
// 获取所有选中的核心
|
|||
|
|
const checkedCores = Array.from(dropdown.querySelectorAll('input[type="checkbox"]:checked'))
|
|||
|
|
.map(cb => cb.value)
|
|||
|
|
.sort((a, b) => a - b);
|
|||
|
|
|
|||
|
|
// 更新输入框的值
|
|||
|
|
input.value = checkedCores.join(',');
|
|||
|
|
input.dispatchEvent(new Event('change'));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
checkboxContainer.appendChild(checkbox);
|
|||
|
|
checkboxContainer.appendChild(checkboxLabel);
|
|||
|
|
dropdown.appendChild(checkboxContainer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加应用和取消按钮
|
|||
|
|
const buttonContainer = document.createElement('div');
|
|||
|
|
buttonContainer.style.display = 'flex';
|
|||
|
|
buttonContainer.style.justifyContent = 'flex-end';
|
|||
|
|
buttonContainer.style.marginTop = '10px';
|
|||
|
|
buttonContainer.style.gap = '8px';
|
|||
|
|
|
|||
|
|
const closeButton = document.createElement('button');
|
|||
|
|
closeButton.textContent = '关闭';
|
|||
|
|
closeButton.style.padding = '6px 12px';
|
|||
|
|
closeButton.style.backgroundColor = '#f0f0f0';
|
|||
|
|
closeButton.style.border = '1px solid #ddd';
|
|||
|
|
closeButton.style.borderRadius = '4px';
|
|||
|
|
closeButton.style.cursor = 'pointer';
|
|||
|
|
|
|||
|
|
closeButton.addEventListener('click', (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
dropdown.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
buttonContainer.appendChild(closeButton);
|
|||
|
|
dropdown.appendChild(buttonContainer);
|
|||
|
|
|
|||
|
|
// 使用更可靠的方法显示下拉菜单
|
|||
|
|
const toggleDropdown = (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
if (dropdown.style.display === 'none' || !dropdown.style.display) {
|
|||
|
|
dropdown.style.display = 'block';
|
|||
|
|
// 添加全局一次性点击事件，用于关闭下拉框
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const closeDropdown = (event) => {
|
|||
|
|
if (!dropdown.contains(event.target) && event.target !== dropdownButton) {
|
|||
|
|
dropdown.style.display = 'none';
|
|||
|
|
document.removeEventListener('click', closeDropdown);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
document.addEventListener('click', closeDropdown);
|
|||
|
|
}, 0);
|
|||
|
|
} else {
|
|||
|
|
dropdown.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 点击下拉按钮时显示或隐藏下拉框
|
|||
|
|
dropdownButton.addEventListener('click', toggleDropdown);
|
|||
|
|
|
|||
|
|
inputContainer.appendChild(input);
|
|||
|
|
inputContainer.appendChild(dropdownButton);
|
|||
|
|
inputContainer.appendChild(dropdown);
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(inputContainer);
|
|||
|
|
} else if (attr.name === 'BaseFrequency') {
|
|||
|
|
// 对数字类型的属性使用number类型输入框
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'number';
|
|||
|
|
input.min = '0';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '仿真运行基础频率，单位Hz';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'OSName') {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '操作系统名称';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'Version') {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '操作系统版本';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'RTXVersion') {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '实时内核版本';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'WorkPath') {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '仿真工作路径，XNCore环境变量所在路径';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'ModelsPath') {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '模型相对路径，相对于仿真工作路径';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'ServicesPath') {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = '服务相对路径，相对于仿真工作路径';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else if (attr.name === 'DomainID') {
|
|||
|
|
// 对数字类型的属性使用number类型输入框
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'number';
|
|||
|
|
input.min = '0';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.title = 'DDS通信域ID';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
} else {
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = attr.value;
|
|||
|
|
input.dataset.path = `Environment@${attr.name}`;
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
propertyGroup.appendChild(propertyItem);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
section.appendChild(propertyGroup);
|
|||
|
|
|
|||
|
|
// 添加"添加新属性"按钮
|
|||
|
|
const addButton = document.createElement('button');
|
|||
|
|
addButton.className = 'add-button';
|
|||
|
|
addButton.textContent = '添加新属性';
|
|||
|
|
addButton.title = '添加新的运行环境属性';
|
|||
|
|
addButton.addEventListener('click', () => showAddPropertyDialog(component, 'Environment'));
|
|||
|
|
section.appendChild(addButton);
|
|||
|
|
|
|||
|
|
container.appendChild(section);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 添加新属性对话框
|
|||
|
|
* @param {HTMLElement} component - 组件实例
|
|||
|
|
* @param {string} elementName - 元素名称
|
|||
|
|
*/
|
|||
|
|
export function showAddPropertyDialog(component, elementName) {
|
|||
|
|
// 创建表单内容
|
|||
|
|
const formContent = document.createElement('div');
|
|||
|
|
formContent.className = 'modal-form';
|
|||
|
|
|
|||
|
|
// 属性名输入
|
|||
|
|
const nameRow = document.createElement('div');
|
|||
|
|
nameRow.className = 'form-row';
|
|||
|
|
|
|||
|
|
const nameLabel = document.createElement('label');
|
|||
|
|
nameLabel.className = 'form-label';
|
|||
|
|
nameLabel.textContent = '属性名称';
|
|||
|
|
|
|||
|
|
const nameInput = document.createElement('input');
|
|||
|
|
nameInput.className = 'form-input';
|
|||
|
|
nameInput.type = 'text';
|
|||
|
|
nameInput.placeholder = '请输入属性名称';
|
|||
|
|
|
|||
|
|
nameRow.appendChild(nameLabel);
|
|||
|
|
nameRow.appendChild(nameInput);
|
|||
|
|
formContent.appendChild(nameRow);
|
|||
|
|
|
|||
|
|
// 属性值输入
|
|||
|
|
const valueRow = document.createElement('div');
|
|||
|
|
valueRow.className = 'form-row';
|
|||
|
|
|
|||
|
|
const valueLabel = document.createElement('label');
|
|||
|
|
valueLabel.className = 'form-label';
|
|||
|
|
valueLabel.textContent = '属性值';
|
|||
|
|
|
|||
|
|
const valueInput = document.createElement('input');
|
|||
|
|
valueInput.className = 'form-input';
|
|||
|
|
valueInput.type = 'text';
|
|||
|
|
valueInput.placeholder = '请输入属性值';
|
|||
|
|
|
|||
|
|
valueRow.appendChild(valueLabel);
|
|||
|
|
valueRow.appendChild(valueInput);
|
|||
|
|
formContent.appendChild(valueRow);
|
|||
|
|
|
|||
|
|
// 显示对话框
|
|||
|
|
createModal(component.shadowRoot, '添加新属性', formContent, () => {
|
|||
|
|
const propertyName = nameInput.value.trim();
|
|||
|
|
const propertyValue = valueInput.value;
|
|||
|
|
|
|||
|
|
if (propertyName) {
|
|||
|
|
addNewProperty(component, elementName, propertyName, propertyValue);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 添加新属性
|
|||
|
|
* @param {HTMLElement} component - 组件实例
|
|||
|
|
* @param {string} elementName - 元素名称
|
|||
|
|
* @param {string} propertyName - 属性名
|
|||
|
|
* @param {string} propertyValue - 属性值
|
|||
|
|
*/
|
|||
|
|
export function addNewProperty(component, elementName, propertyName, propertyValue) {
|
|||
|
|
// 更新UI
|
|||
|
|
const section = Array.from(component.shadowRoot.querySelectorAll('.section-title')).find(el => {
|
|||
|
|
if (elementName === 'Environment' && el.textContent === '环境配置') return true;
|
|||
|
|
return false;
|
|||
|
|
})?.parentElement;
|
|||
|
|
|
|||
|
|
if (section) {
|
|||
|
|
const propertyGroup = section.querySelector('.property-group');
|
|||
|
|
if (propertyGroup) {
|
|||
|
|
const propertyItem = document.createElement('div');
|
|||
|
|
propertyItem.className = 'property-item';
|
|||
|
|
|
|||
|
|
const label = document.createElement('label');
|
|||
|
|
label.className = 'property-label';
|
|||
|
|
label.textContent = propertyName;
|
|||
|
|
|
|||
|
|
const input = document.createElement('input');
|
|||
|
|
input.className = 'property-input';
|
|||
|
|
input.type = 'text';
|
|||
|
|
input.value = propertyValue;
|
|||
|
|
input.dataset.path = `${elementName}@${propertyName}`;
|
|||
|
|
input.dataset.isNew = 'true';
|
|||
|
|
input.addEventListener('change', () => {
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
propertyItem.appendChild(label);
|
|||
|
|
propertyItem.appendChild(input);
|
|||
|
|
propertyGroup.appendChild(propertyItem);
|
|||
|
|
|
|||
|
|
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
|||
|
|
|
|||
|
|
// 静默更新XML
|
|||
|
|
if (component.updateXmlFromVisualEditor) {
|
|||
|
|
component.updateXmlFromVisualEditor(true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取CPU亲和性设置
|
|||
|
|
* @param {Document} xmlDoc - XML文档
|
|||
|
|
* @returns {number[]} 可用的CPU核心列表
|
|||
|
|
*/
|
|||
|
|
export function getCPUAffinityOptions(xmlDoc) {
|
|||
|
|
// 从环境配置中获取CPUAffinity的值
|
|||
|
|
const envElement = xmlDoc.querySelector('Environment');
|
|||
|
|
if (!envElement) return [];
|
|||
|
|
|
|||
|
|
const cpuAffinity = envElement.getAttribute('CPUAffinity') || '0';
|
|||
|
|
const availableCores = cpuAffinity.split(',').map(core => parseInt(core.trim())).filter(core => !isNaN(core));
|
|||
|
|
return availableCores;
|
|||
|
|
}
|