顶部机型与构型的选择已完成修改

This commit is contained in:
jinchao 2025-05-16 09:21:11 +08:00
parent 5ac2f08724
commit 61cfdb94e9
8 changed files with 199 additions and 35 deletions

Binary file not shown.

View File

@ -7,10 +7,46 @@ class HeaderTools extends HTMLElement {
} }
// 添加getter方法 // 添加getter方法
get selectedPlane() {
return this.shadowRoot.getElementById('planeSelect').value;
}
get selectedProduct() { get selectedProduct() {
return this.shadowRoot.getElementById('productSelect').value; return this.shadowRoot.getElementById('productSelect').value;
} }
// 保存选择到localStorage
saveSelection() {
const selection = {
plane: this.selectedPlane,
product: this.selectedProduct
};
localStorage.setItem('xnsim-selection', JSON.stringify(selection));
}
// 从localStorage恢复选择
restoreSelection() {
const savedSelection = localStorage.getItem('xnsim-selection');
if (savedSelection) {
const selection = JSON.parse(savedSelection);
const planeSelect = this.shadowRoot.getElementById('planeSelect');
const productSelect = this.shadowRoot.getElementById('productSelect');
// 先加载机型列表
this.loadPlanes().then(() => {
if (selection.plane) {
planeSelect.value = selection.plane;
// 加载该机型下的构型列表
this.loadProducts(selection.plane).then(() => {
if (selection.product) {
productSelect.value = selection.product;
}
});
}
});
}
}
render() { render() {
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
<style> <style>
@ -41,18 +77,18 @@ class HeaderTools extends HTMLElement {
height: 20px; height: 20px;
} }
.product-container { .select-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.product-label { .select-label {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
.product-select { .plane-select, .product-select {
min-width: 120px; min-width: 120px;
height: 32px; height: 32px;
padding: 0 8px; padding: 0 8px;
@ -70,7 +106,7 @@ class HeaderTools extends HTMLElement {
border-radius: 4px; border-radius: 4px;
background-color: white; background-color: white;
padding: 0 8px; padding: 0 8px;
margin-left: 50px; /* 增加与下拉框的间距 */ margin-left: 50px;
} }
.search-box input { .search-box input {
@ -86,8 +122,14 @@ class HeaderTools extends HTMLElement {
opacity: 0.5; opacity: 0.5;
} }
</style> </style>
<div class="product-container"> <div class="select-container">
<span class="product-label">构型</span> <span class="select-label">机型</span>
<select class="plane-select" id="planeSelect">
<option value="">选择机型</option>
</select>
</div>
<div class="select-container">
<span class="select-label">构型</span>
<select class="product-select" id="productSelect"> <select class="product-select" id="productSelect">
<option value="">选择构型</option> <option value="">选择构型</option>
</select> </select>
@ -112,8 +154,12 @@ class HeaderTools extends HTMLElement {
} }
addEventListeners() { addEventListeners() {
// 加载机型列表
this.loadPlanes();
// 加载构型列表 // 加载构型列表
this.loadProducts(); this.loadProducts();
// 恢复上次的选择
this.restoreSelection();
// 字体大小调整 // 字体大小调整
this.shadowRoot.getElementById('fontSizeBtn').addEventListener('click', () => { this.shadowRoot.getElementById('fontSizeBtn').addEventListener('click', () => {
@ -135,17 +181,54 @@ class HeaderTools extends HTMLElement {
this.dispatchEvent(new CustomEvent('online-users-click')); this.dispatchEvent(new CustomEvent('online-users-click'));
}); });
// 机型选择
this.shadowRoot.getElementById('planeSelect').addEventListener('change', (e) => {
this.dispatchEvent(new CustomEvent('plane-change', {
detail: { plane: e.target.value }
}));
// 当机型改变时,重新加载该机型下的构型列表
this.loadProducts(e.target.value);
// 保存选择
this.saveSelection();
});
// 构型选择 // 构型选择
this.shadowRoot.getElementById('productSelect').addEventListener('change', (e) => { this.shadowRoot.getElementById('productSelect').addEventListener('change', (e) => {
this.dispatchEvent(new CustomEvent('product-change', { this.dispatchEvent(new CustomEvent('product-change', {
detail: { product: e.target.value } detail: { product: e.target.value }
})); }));
// 保存选择
this.saveSelection();
}); });
} }
async loadProducts() { async loadPlanes() {
try { try {
const response = await fetch('/api/products'); const response = await fetch('/api/planes');
if (!response.ok) {
throw new Error('获取机型列表失败');
}
const planes = await response.json();
const select = this.shadowRoot.getElementById('planeSelect');
// 清空现有选项
select.innerHTML = '<option value="">选择机型</option>';
planes.forEach(plane => {
const option = document.createElement('option');
option.value = plane.PlaneName;
option.textContent = plane.PlaneName;
select.appendChild(option);
});
} catch (error) {
console.error('加载机型列表失败:', error);
}
}
async loadProducts(planeName = '') {
try {
const url = planeName ? `/api/configurations?plane=${planeName}` : '/api/configurations';
const response = await fetch(url);
if (!response.ok) { if (!response.ok) {
throw new Error('获取构型列表失败'); throw new Error('获取构型列表失败');
} }
@ -157,13 +240,12 @@ class HeaderTools extends HTMLElement {
products.forEach(product => { products.forEach(product => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = product.ProductName; option.value = product.ConfName;
option.textContent = product.ProductName; option.textContent = product.ConfName;
select.appendChild(option); select.appendChild(option);
}); });
} catch (error) { } catch (error) {
console.error('加载构型列表失败:', error); console.error('加载构型列表失败:', error);
// 可以在这里添加错误提示UI
} }
} }
} }

View File

@ -0,0 +1,71 @@
const express = require('express');
const router = express.Router();
const {
getConfigurations,
getConfigurationById,
createConfiguration,
updateConfiguration,
deleteConfiguration
} = require('../utils/configuration-utils');
// 获取所有配置列表
router.get('/configurations', (req, res) => {
try {
const planeName = req.query.plane;
const configs = getConfigurations(planeName);
res.json(configs);
} catch (error) {
console.error('获取配置列表失败:', error);
res.status(500).json({ error: '获取配置列表失败', details: error.message });
}
});
// 根据ID获取配置
router.get('/configurations/:id', (req, res) => {
try {
const config = getConfigurationById(req.params.id);
if (!config) {
return res.status(404).json({ error: '配置不存在' });
}
res.json(config);
} catch (error) {
console.error('获取配置详情失败:', error);
res.status(500).json({ error: '获取配置详情失败', details: error.message });
}
});
// 创建新配置
router.post('/configurations', (req, res) => {
try {
const result = createConfiguration(req.body);
res.status(201).json(result);
} catch (error) {
console.error('创建配置失败:', error);
res.status(500).json({ error: '创建配置失败', details: error.message });
}
});
// 更新配置
router.put('/configurations/:id', (req, res) => {
try {
const configData = { ...req.body, ConfID: req.params.id };
const result = updateConfiguration(configData);
res.json(result);
} catch (error) {
console.error('更新配置失败:', error);
res.status(500).json({ error: '更新配置失败', details: error.message });
}
});
// 删除配置
router.delete('/configurations/:id', (req, res) => {
try {
const result = deleteConfiguration(req.params.id);
res.json(result);
} catch (error) {
console.error('删除配置失败:', error);
res.status(500).json({ error: '删除配置失败', details: error.message });
}
});
module.exports = router;

View File

@ -0,0 +1,16 @@
const express = require('express');
const router = express.Router();
const { getPlanes } = require('../utils/db-utils');
// 获取所有飞机列表
router.get('/planes', (req, res) => {
try {
const planes = getPlanes();
res.json(planes);
} catch (error) {
console.error('获取飞机列表失败:', error);
res.status(500).json({ error: '获取飞机列表失败', details: error.message });
}
});
module.exports = router;

View File

@ -1,16 +0,0 @@
const express = require('express');
const router = express.Router();
const { getProducts } = require('../utils/db-utils');
// 获取所有构型列表
router.get('/products', (req, res) => {
try {
const products = getProducts();
res.json(products);
} catch (error) {
console.error('获取构型列表失败:', error);
res.status(500).json({ error: '获取构型列表失败', details: error.message });
}
});
module.exports = router;

View File

@ -20,7 +20,8 @@ const projectModelRoutes = require('./routes/project-model');
const ataChaptersRoutes = require('./routes/model-dev'); const ataChaptersRoutes = require('./routes/model-dev');
const simulationRoutes = require('./routes/run-simulation'); const simulationRoutes = require('./routes/run-simulation');
const udpMonitorRoutes = require('./routes/udp-monitor'); const udpMonitorRoutes = require('./routes/udp-monitor');
const productsRoutes = require('./routes/products'); const planesRoutes = require('./routes/planes');
const configurationsRoutes = require('./routes/configurations');
const interfaceRoutes = require('./routes/interface-config'); const interfaceRoutes = require('./routes/interface-config');
const icdImportRoutes = require('./routes/icd-import'); const icdImportRoutes = require('./routes/icd-import');
const qaRoutes = require('./routes/qa'); const qaRoutes = require('./routes/qa');
@ -91,7 +92,8 @@ app.use('/api', projectModelRoutes);
app.use('/api', ataChaptersRoutes); app.use('/api', ataChaptersRoutes);
app.use('/api', simulationRoutes); app.use('/api', simulationRoutes);
app.use('/api/udp-monitor', udpMonitorRoutes); app.use('/api/udp-monitor', udpMonitorRoutes);
app.use('/api', productsRoutes); app.use('/api', planesRoutes);
app.use('/api', configurationsRoutes);
app.use('/api/interface', interfaceRoutes); app.use('/api/interface', interfaceRoutes);
app.use('/api/icd', icdImportRoutes); app.use('/api/icd', icdImportRoutes);
app.use('/api/qa', qaRoutes); app.use('/api/qa', qaRoutes);

View File

@ -1,14 +1,23 @@
const { getDBConnection } = require('./file-utils'); const { getDBConnection } = require('./file-utils');
// 获取所有配置 // 获取所有配置
function getConfigurations() { function getConfigurations(planeName) {
try { try {
const db = getDBConnection(true); const db = getDBConnection(true);
const configs = db.prepare(` let query = `
SELECT * FROM Configuration SELECT * FROM Configuration
ORDER BY ConfID ASC `;
`).all();
const params = [];
if (planeName) {
query += ` WHERE PlaneName = ?`;
params.push(planeName);
}
query += ` ORDER BY ConfID ASC`;
const configs = db.prepare(query).all(...params);
return configs; return configs;
} catch (error) { } catch (error) {

View File

@ -22,8 +22,8 @@ function getDBConnection(readonly = false) {
throw new Error('无法找到数据库文件'); throw new Error('无法找到数据库文件');
} }
// 打开数据库连接 // 打开数据库连接,始终以可读可写模式打开
dbConnection = new Database(dbPath, { readonly }); dbConnection = new Database(dbPath);
return dbConnection; return dbConnection;
} catch (error) { } catch (error) {
console.error('数据库连接失败:', error); console.error('数据库连接失败:', error);