feat(线缆管理): 新增向导式接线创建功能
- 新增四步向导流程，简化接线创建过程 - 添加线缆标签、颜色、安装信息等新字段 - 实现端口可视化面板和冲突检测功能 - 新增耗材日志设备关联字段 - 添加耗材导入后台任务管理 - 更新线缆管理文档和使用指南
This commit is contained in:
zhang1106
@@ -53,6 +53,31 @@ const Cable = sequelize.define(
|
||||
type: DataTypes.TEXT,
|
||||
allowNull: true,
|
||||
},
|
||||
cableLabel: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '线缆标签/编号',
|
||||
},
|
||||
cableColor: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '线缆颜色（便于识别）',
|
||||
},
|
||||
installedBy: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '安装人',
|
||||
},
|
||||
installedAt: {
|
||||
type: DataTypes.DATE,
|
||||
allowNull: true,
|
||||
comment: '安装时间',
|
||||
},
|
||||
lastTestedAt: {
|
||||
type: DataTypes.DATE,
|
||||
allowNull: true,
|
||||
comment: '上次测试时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
tableName: 'cables',
|
||||
@@ -63,6 +88,7 @@ const Cable = sequelize.define(
|
||||
{ fields: ['status'] },
|
||||
{ fields: ['cableType'] },
|
||||
{ fields: ['sourceDeviceId', 'targetDeviceId'] },
|
||||
{ fields: ['cableLabel'] },
|
||||
],
|
||||
}
|
||||
);
|
||||
|
||||
@@ -96,6 +96,36 @@ const ConsumableLog = sequelize.define(
|
||||
defaultValue: [],
|
||||
comment: '本次操作的SN序列号列表',
|
||||
},
|
||||
deviceId: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '目标设备ID（出库时关联）',
|
||||
},
|
||||
deviceName: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '目标设备名称',
|
||||
},
|
||||
rackId: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '机柜ID',
|
||||
},
|
||||
rackName: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '机柜名称',
|
||||
},
|
||||
roomId: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '机房ID',
|
||||
},
|
||||
roomName: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: true,
|
||||
comment: '机房名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
tableName: 'consumable_logs',
|
||||
@@ -109,6 +139,7 @@ const ConsumableLog = sequelize.define(
|
||||
{ fields: ['originalLogId'] },
|
||||
{ fields: ['isEditable'] },
|
||||
{ fields: ['isConsumableDeleted'] },
|
||||
{ fields: ['deviceId'] },
|
||||
],
|
||||
}
|
||||
);
|
||||
|
||||
@@ -257,6 +257,11 @@ router.post('/', async (req, res) => {
|
||||
cableLength,
|
||||
status,
|
||||
description,
|
||||
cableLabel,
|
||||
cableColor,
|
||||
installedBy,
|
||||
installedAt,
|
||||
lastTestedAt,
|
||||
force,
|
||||
} = req.body;
|
||||
|
||||
@@ -321,6 +326,11 @@ router.post('/', async (req, res) => {
|
||||
cableLength,
|
||||
status: status || 'normal',
|
||||
description,
|
||||
cableLabel: cableLabel || null,
|
||||
cableColor: cableColor || null,
|
||||
installedBy: installedBy || null,
|
||||
installedAt: installedAt || null,
|
||||
lastTestedAt: lastTestedAt || null,
|
||||
});
|
||||
|
||||
const createdCable = await Cable.findByPk(cable.cableId, {
|
||||
|
||||
@@ -0,0 +1,328 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const { Op } = require('sequelize');
|
||||
const { sequelize } = require('../db');
|
||||
const Consumable = require('../models/Consumable');
|
||||
const ConsumableLog = require('../models/ConsumableLog');
|
||||
const { importJobManager } = require('../utils/importJobManager');
|
||||
|
||||
const SUPPORTED_FIELDS = [
|
||||
'consumableId',
|
||||
'name',
|
||||
'category',
|
||||
'unit',
|
||||
'currentStock',
|
||||
'minStock',
|
||||
'maxStock',
|
||||
'unitPrice',
|
||||
'supplier',
|
||||
'location',
|
||||
'description',
|
||||
'snList',
|
||||
'status',
|
||||
];
|
||||
|
||||
const FIELD_ALIASES = {
|
||||
耗材ID: 'consumableId',
|
||||
名称: 'name',
|
||||
分类: 'category',
|
||||
单位: 'unit',
|
||||
当前库存: 'currentStock',
|
||||
最小库存: 'minStock',
|
||||
最大库存: 'maxStock',
|
||||
单价: 'unitPrice',
|
||||
供应商: 'supplier',
|
||||
存放位置: 'location',
|
||||
描述: 'description',
|
||||
SN序列号: 'snList',
|
||||
状态: 'status',
|
||||
};
|
||||
|
||||
const normalizeFieldName = fieldName => {
|
||||
if (!fieldName) return null;
|
||||
const trimmed = String(fieldName).trim();
|
||||
if (FIELD_ALIASES[trimmed]) {
|
||||
return FIELD_ALIASES[trimmed];
|
||||
}
|
||||
if (SUPPORTED_FIELDS.includes(trimmed)) {
|
||||
return trimmed;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const parseSnList = snStr => {
|
||||
if (!snStr) return [];
|
||||
if (Array.isArray(snStr)) return snStr;
|
||||
if (typeof snStr === 'string') {
|
||||
return snStr.split(/[,，;；\n]/).map(s => s.trim()).filter(Boolean);
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
router.post('/consumables/background', async (req, res) => {
|
||||
const { items, operator = '系统', mode = 'create', fieldMapping = {} } = req.body;
|
||||
|
||||
if (!items || !Array.isArray(items) || items.length === 0) {
|
||||
return res.status(400).json({ error: '没有导入数据' });
|
||||
}
|
||||
|
||||
const jobId = `IMP_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
const job = importJobManager.createJob(jobId, 'consumable_import', items.length);
|
||||
|
||||
importJobManager.startJob(jobId);
|
||||
|
||||
setImmediate(async () => {
|
||||
const transaction = await sequelize.transaction();
|
||||
try {
|
||||
const results = {
|
||||
success: 0,
|
||||
failed: 0,
|
||||
updated: 0,
|
||||
skipped: 0,
|
||||
errors: [],
|
||||
details: [],
|
||||
};
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const currentJob = importJobManager.getJob(jobId);
|
||||
if (currentJob && currentJob.status === 'cancelled') {
|
||||
await transaction.rollback();
|
||||
return;
|
||||
}
|
||||
|
||||
const item = items[i];
|
||||
const rowNumber = i + 1;
|
||||
|
||||
try {
|
||||
const mappedItem = {};
|
||||
for (const [sourceField, targetField] of Object.entries(fieldMapping)) {
|
||||
if (sourceField && targetField && item[sourceField] !== undefined) {
|
||||
mappedItem[targetField] = item[sourceField];
|
||||
}
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(item)) {
|
||||
const normalizedField = normalizeFieldName(key);
|
||||
if (normalizedField && mappedItem[normalizedField] === undefined) {
|
||||
mappedItem[normalizedField] = value;
|
||||
}
|
||||
}
|
||||
|
||||
const consumableId =
|
||||
mappedItem.consumableId || mappedItem.name + `_${Date.now()}`;
|
||||
const name = mappedItem.name;
|
||||
const category = mappedItem.category;
|
||||
|
||||
if (!name || !category) {
|
||||
throw new Error('名称和分类为必填项');
|
||||
}
|
||||
|
||||
let snList = [];
|
||||
if (mappedItem.snList) {
|
||||
snList = parseSnList(mappedItem.snList);
|
||||
}
|
||||
|
||||
const consumableData = {
|
||||
consumableId: consumableId || `CON${Date.now()}${i}`,
|
||||
name,
|
||||
category,
|
||||
unit: mappedItem.unit || '个',
|
||||
currentStock:
|
||||
snList.length > 0
|
||||
? snList.length
|
||||
: parseInt(mappedItem.currentStock) || 0,
|
||||
minStock: parseInt(mappedItem.minStock) || 10,
|
||||
maxStock: parseInt(mappedItem.maxStock) || 0,
|
||||
unitPrice: parseFloat(mappedItem.unitPrice) || 0,
|
||||
supplier: mappedItem.supplier || '',
|
||||
location: mappedItem.location || '',
|
||||
description: mappedItem.description || '',
|
||||
status: mappedItem.status || 'active',
|
||||
snList,
|
||||
};
|
||||
|
||||
let existingConsumable = null;
|
||||
if (consumableData.consumableId) {
|
||||
existingConsumable = await Consumable.findByPk(consumableData.consumableId, {
|
||||
transaction,
|
||||
});
|
||||
}
|
||||
|
||||
let operationType;
|
||||
let previousStock = 0;
|
||||
|
||||
if (existingConsumable) {
|
||||
if (mode === 'update') {
|
||||
previousStock = existingConsumable.currentStock;
|
||||
await existingConsumable.update(consumableData, { transaction });
|
||||
operationType = 'import_update';
|
||||
results.updated++;
|
||||
results.details.push({
|
||||
row: rowNumber,
|
||||
status: 'updated',
|
||||
consumableId: existingConsumable.consumableId,
|
||||
name: existingConsumable.name,
|
||||
});
|
||||
} else {
|
||||
results.skipped++;
|
||||
results.details.push({
|
||||
row: rowNumber,
|
||||
status: 'skipped',
|
||||
reason: '耗材已存在',
|
||||
consumableId: consumableData.consumableId,
|
||||
});
|
||||
importJobManager.incrementProgress(jobId, 0, 0, 1, 0);
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
await Consumable.create(consumableData, { transaction });
|
||||
operationType = 'import';
|
||||
results.success++;
|
||||
results.details.push({
|
||||
row: rowNumber,
|
||||
status: 'created',
|
||||
consumableId: consumableData.consumableId,
|
||||
name: consumableData.name,
|
||||
});
|
||||
}
|
||||
|
||||
await ConsumableLog.create(
|
||||
{
|
||||
consumableId: consumableData.consumableId,
|
||||
consumableName: consumableData.name,
|
||||
operationType,
|
||||
quantity: consumableData.currentStock,
|
||||
previousStock,
|
||||
currentStock: consumableData.currentStock,
|
||||
operator,
|
||||
reason: '后台批量导入',
|
||||
notes: existingConsumable ? '更新现有耗材' : '',
|
||||
consumableSnapshot: {
|
||||
category: consumableData.category,
|
||||
unit: consumableData.unit,
|
||||
unitPrice: consumableData.unitPrice,
|
||||
supplier: consumableData.supplier,
|
||||
location: consumableData.location,
|
||||
minStock: consumableData.minStock,
|
||||
maxStock: consumableData.maxStock,
|
||||
},
|
||||
},
|
||||
{ transaction }
|
||||
);
|
||||
|
||||
importJobManager.incrementProgress(jobId, existingConsumable && mode === 'update' ? 0 : 1, 0, 0, existingConsumable ? 1 : 0);
|
||||
} catch (error) {
|
||||
results.failed++;
|
||||
results.errors.push(`第 ${rowNumber} 行: ${error.message}`);
|
||||
results.details.push({
|
||||
row: rowNumber,
|
||||
status: 'failed',
|
||||
error: error.message,
|
||||
});
|
||||
importJobManager.incrementProgress(jobId, 0, 1, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
await transaction.commit();
|
||||
importJobManager.completeJob(jobId, results);
|
||||
} catch (error) {
|
||||
await transaction.rollback();
|
||||
importJobManager.failJob(jobId, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
res.json({
|
||||
jobId,
|
||||
message: '导入任务已创建，正在后台执行',
|
||||
totalItems: items.length,
|
||||
});
|
||||
});
|
||||
|
||||
router.get('/consumables/progress/:jobId', async (req, res) => {
|
||||
const { jobId } = req.params;
|
||||
|
||||
const progress = importJobManager.getJobProgress(jobId);
|
||||
if (!progress) {
|
||||
return res.status(404).json({ error: '任务不存在' });
|
||||
}
|
||||
|
||||
res.json(progress);
|
||||
});
|
||||
|
||||
router.post('/consumables/cancel/:jobId', async (req, res) => {
|
||||
const { jobId } = req.params;
|
||||
|
||||
const job = importJobManager.getJob(jobId);
|
||||
if (!job) {
|
||||
return res.status(404).json({ error: '任务不存在' });
|
||||
}
|
||||
|
||||
if (!job.canCancel) {
|
||||
return res.status(400).json({ error: '该任务无法取消' });
|
||||
}
|
||||
|
||||
importJobManager.cancelJob(jobId);
|
||||
res.json({ message: '任务已取消' });
|
||||
});
|
||||
|
||||
router.get('/consumables/result/:jobId', async (req, res) => {
|
||||
const { jobId } = req.params;
|
||||
|
||||
const job = importJobManager.getJob(jobId);
|
||||
if (!job) {
|
||||
return res.status(404).json({ error: '任务不存在' });
|
||||
}
|
||||
|
||||
if (job.status !== 'completed' && job.status !== 'failed') {
|
||||
return res.status(400).json({ error: '任务尚未完成' });
|
||||
}
|
||||
|
||||
res.json({
|
||||
jobId: job.jobId,
|
||||
status: job.status,
|
||||
result: job.result,
|
||||
error: job.error,
|
||||
completedAt: job.endTime,
|
||||
});
|
||||
});
|
||||
|
||||
router.get('/consumables/field-mappings', async (req, res) => {
|
||||
const mappings = [
|
||||
{ source: '耗材ID', target: 'consumableId', required: false, description: '耗材唯一标识符' },
|
||||
{ source: '名称', target: 'name', required: true, description: '耗材名称' },
|
||||
{ source: '分类', target: 'category', required: true, description: '耗材分类' },
|
||||
{ source: '单位', target: 'unit', required: false, description: '计量单位，默认"个"' },
|
||||
{ source: '当前库存', target: 'currentStock', required: false, description: '当前库存数量' },
|
||||
{ source: '最小库存', target: 'minStock', required: false, description: '安全库存预警值' },
|
||||
{ source: '最大库存', target: 'maxStock', required: false, description: '最大库存限制，0表示无限制' },
|
||||
{ source: '单价', target: 'unitPrice', required: false, description: '耗材单价' },
|
||||
{ source: '供应商', target: 'supplier', required: false, description: '供应商名称' },
|
||||
{ source: '存放位置', target: 'location', required: false, description: '仓库内存放位置' },
|
||||
{ source: '描述', target: 'description', required: false, description: '耗材详细描述' },
|
||||
{ source: 'SN序列号', target: 'snList', required: false, description: '序列号列表，用逗号分隔' },
|
||||
{ source: '状态', target: 'status', required: false, description: '状态：active启用，inactive停用' },
|
||||
];
|
||||
|
||||
const systemFields = [
|
||||
{ name: 'consumableId', type: 'string', description: '耗材唯一标识符' },
|
||||
{ name: 'name', type: 'string', description: '耗材名称' },
|
||||
{ name: 'category', type: 'string', description: '耗材分类' },
|
||||
{ name: 'unit', type: 'string', description: '计量单位' },
|
||||
{ name: 'currentStock', type: 'number', description: '当前库存数量' },
|
||||
{ name: 'minStock', type: 'number', description: '最小库存（预警线）' },
|
||||
{ name: 'maxStock', type: 'number', description: '最大库存限制' },
|
||||
{ name: 'unitPrice', type: 'number', description: '单价' },
|
||||
{ name: 'supplier', type: 'string', description: '供应商' },
|
||||
{ name: 'location', type: 'string', description: '存放位置' },
|
||||
{ name: 'description', type: 'text', description: '描述' },
|
||||
{ name: 'snList', type: 'array', description: 'SN序列号数组' },
|
||||
{ name: 'status', type: 'string', description: '状态' },
|
||||
];
|
||||
|
||||
res.json({
|
||||
aliases: mappings,
|
||||
systemFields,
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -459,7 +459,16 @@ router.post('/quick-inout', async (req, res) => {
|
||||
while (attempt < RETRY.MAX_RETRIES) {
|
||||
const transaction = await sequelize.transaction();
|
||||
try {
|
||||
const { consumableId, type, quantity, operator, reason, notes, snList } = req.body;
|
||||
const {
|
||||
consumableId,
|
||||
type,
|
||||
quantity,
|
||||
operator,
|
||||
reason,
|
||||
notes,
|
||||
snList,
|
||||
deviceId,
|
||||
} = req.body;
|
||||
|
||||
const consumable = await Consumable.findByPk(consumableId, { transaction });
|
||||
if (!consumable) {
|
||||
@@ -467,6 +476,39 @@ router.post('/quick-inout', async (req, res) => {
|
||||
return res.status(404).json({ error: '耗材不存在' });
|
||||
}
|
||||
|
||||
let deviceInfo = {};
|
||||
if (deviceId && type === 'out') {
|
||||
const Device = require('../models/Device');
|
||||
const Rack = require('../models/Rack');
|
||||
const Room = require('../models/Room');
|
||||
|
||||
const device = await Device.findByPk(deviceId, { transaction });
|
||||
if (device) {
|
||||
deviceInfo = {
|
||||
deviceId: device.deviceId,
|
||||
deviceName: device.name,
|
||||
rackId: device.rackId,
|
||||
rackName: null,
|
||||
roomId: null,
|
||||
roomName: null,
|
||||
};
|
||||
|
||||
if (device.rackId) {
|
||||
const rack = await Rack.findByPk(device.rackId, { transaction });
|
||||
if (rack) {
|
||||
deviceInfo.rackName = rack.name;
|
||||
if (rack.roomId) {
|
||||
const room = await Room.findByPk(rack.roomId, { transaction });
|
||||
if (room) {
|
||||
deviceInfo.roomId = room.roomId;
|
||||
deviceInfo.roomName = room.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const previousStock = parseFloat(consumable.currentStock);
|
||||
let newStock;
|
||||
const currentSnList = consumable.snList || [];
|
||||
@@ -554,6 +596,12 @@ router.post('/quick-inout', async (req, res) => {
|
||||
notes,
|
||||
isEditable: false,
|
||||
snList: operationSnList,
|
||||
deviceId: deviceInfo.deviceId || null,
|
||||
deviceName: deviceInfo.deviceName || null,
|
||||
rackId: deviceInfo.rackId || null,
|
||||
rackName: deviceInfo.rackName || null,
|
||||
roomId: deviceInfo.roomId || null,
|
||||
roomName: deviceInfo.roomName || null,
|
||||
consumableSnapshot: {
|
||||
category: consumable.category,
|
||||
unit: consumable.unit,
|
||||
@@ -571,6 +619,7 @@ router.post('/quick-inout', async (req, res) => {
|
||||
message: '操作成功',
|
||||
record,
|
||||
consumable: await Consumable.findByPk(consumableId),
|
||||
deviceInfo: Object.keys(deviceInfo).length > 0 ? deviceInfo : null,
|
||||
});
|
||||
return;
|
||||
} catch (error) {
|
||||
@@ -589,7 +638,18 @@ router.post('/inout', async (req, res) => {
|
||||
while (attempt < RETRY.MAX_RETRIES) {
|
||||
const transaction = await sequelize.transaction();
|
||||
try {
|
||||
const { consumableId, type, quantity, operator, reason, recipient, notes, snList } = req.body;
|
||||
const {
|
||||
consumableId,
|
||||
type,
|
||||
quantity,
|
||||
operator,
|
||||
reason,
|
||||
recipient,
|
||||
notes,
|
||||
snList,
|
||||
deviceId,
|
||||
deviceName,
|
||||
} = req.body;
|
||||
|
||||
const consumable = await Consumable.findByPk(consumableId, { transaction });
|
||||
if (!consumable) {
|
||||
@@ -597,6 +657,39 @@ router.post('/inout', async (req, res) => {
|
||||
return res.status(404).json({ error: '耗材不存在' });
|
||||
}
|
||||
|
||||
let deviceInfo = {};
|
||||
if (deviceId && type === 'out') {
|
||||
const Device = require('../models/Device');
|
||||
const Rack = require('../models/Rack');
|
||||
const Room = require('../models/Room');
|
||||
|
||||
const device = await Device.findByPk(deviceId, { transaction });
|
||||
if (device) {
|
||||
deviceInfo = {
|
||||
deviceId: device.deviceId,
|
||||
deviceName: device.name,
|
||||
rackId: device.rackId,
|
||||
rackName: null,
|
||||
roomId: null,
|
||||
roomName: null,
|
||||
};
|
||||
|
||||
if (device.rackId) {
|
||||
const rack = await Rack.findByPk(device.rackId, { transaction });
|
||||
if (rack) {
|
||||
deviceInfo.rackName = rack.name;
|
||||
if (rack.roomId) {
|
||||
const room = await Room.findByPk(rack.roomId, { transaction });
|
||||
if (room) {
|
||||
deviceInfo.roomId = room.roomId;
|
||||
deviceInfo.roomName = room.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const previousStock = parseFloat(consumable.currentStock);
|
||||
let newStock;
|
||||
const currentSnList = consumable.snList || [];
|
||||
@@ -682,6 +775,12 @@ router.post('/inout', async (req, res) => {
|
||||
notes,
|
||||
isEditable: false,
|
||||
snList: operationSnList,
|
||||
deviceId: deviceInfo.deviceId || null,
|
||||
deviceName: deviceInfo.deviceName || null,
|
||||
rackId: deviceInfo.rackId || null,
|
||||
rackName: deviceInfo.rackName || null,
|
||||
roomId: deviceInfo.roomId || null,
|
||||
roomName: deviceInfo.roomName || null,
|
||||
consumableSnapshot: {
|
||||
category: consumable.category,
|
||||
unit: consumable.unit,
|
||||
@@ -699,6 +798,7 @@ router.post('/inout', async (req, res) => {
|
||||
message: '操作成功',
|
||||
record,
|
||||
consumable: await Consumable.findByPk(consumableId),
|
||||
deviceInfo: Object.keys(deviceInfo).length > 0 ? deviceInfo : null,
|
||||
});
|
||||
return;
|
||||
} catch (error) {
|
||||
@@ -1314,4 +1414,97 @@ router.get('/logs/:id/history', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/devices/search', async (req, res) => {
|
||||
try {
|
||||
const { keyword, limit = 20 } = req.query;
|
||||
|
||||
if (!keyword) {
|
||||
return res.json({ devices: [] });
|
||||
}
|
||||
|
||||
const Device = require('../models/Device');
|
||||
const Rack = require('../models/Rack');
|
||||
const Room = require('../models/Room');
|
||||
|
||||
const escapedKeyword = keyword.replace(/'/g, "''");
|
||||
|
||||
const devices = await Device.findAll({
|
||||
where: {
|
||||
[Op.or]: [
|
||||
{ deviceId: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ name: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ serialNumber: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
],
|
||||
},
|
||||
include: [
|
||||
{
|
||||
model: Rack,
|
||||
as: 'rack',
|
||||
include: [{ model: Room, as: 'room' }],
|
||||
},
|
||||
],
|
||||
limit: parseInt(limit),
|
||||
order: [['name', 'ASC']],
|
||||
});
|
||||
|
||||
const result = devices.map(device => ({
|
||||
deviceId: device.deviceId,
|
||||
name: device.name,
|
||||
type: device.type,
|
||||
model: device.model,
|
||||
serialNumber: device.serialNumber,
|
||||
status: device.status,
|
||||
location: device.rack
|
||||
? {
|
||||
rackId: device.rack.rackId,
|
||||
rackName: device.rack.name,
|
||||
roomId: device.rack.room ? device.rack.room.roomId : null,
|
||||
roomName: device.rack.room ? device.rack.room.name : null,
|
||||
}
|
||||
: null,
|
||||
}));
|
||||
|
||||
res.json({ devices: result });
|
||||
} catch (error) {
|
||||
console.error('搜索设备失败:', error);
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/devices/by-sn/:sn', async (req, res) => {
|
||||
try {
|
||||
const { sn } = req.params;
|
||||
const Device = require('../models/Device');
|
||||
|
||||
const device = await Device.findOne({
|
||||
where: {
|
||||
[Op.or]: [
|
||||
{ deviceId: { [Op.like]: `%${sn}%` } },
|
||||
{ serialNumber: { [Op.like]: `%${sn}%` } },
|
||||
{ name: { [Op.like]: `%${sn}%` } },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
if (!device) {
|
||||
return res.json({ found: false, device: null });
|
||||
}
|
||||
|
||||
res.json({
|
||||
found: true,
|
||||
device: {
|
||||
deviceId: device.deviceId,
|
||||
name: device.name,
|
||||
type: device.type,
|
||||
model: device.model,
|
||||
serialNumber: device.serialNumber,
|
||||
status: device.status,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('查询设备失败:', error);
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
@@ -100,6 +100,11 @@ const migrations = [
|
||||
description: '为 devices 表添加复合索引，优化位置冲突检测和悲观锁性能',
|
||||
migrate: migrateDevicePositionIndexes,
|
||||
},
|
||||
{
|
||||
name: '耗材日志设备关联',
|
||||
description: '为 consumable_logs 表添加 deviceId、deviceName、rackId、rackName、roomId、roomName 字段',
|
||||
migrate: migrateConsumableLogDeviceAssociation,
|
||||
},
|
||||
];
|
||||
|
||||
async function runMigrations() {
|
||||
@@ -738,14 +743,35 @@ async function migrateDevicePositionIndexes() {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(` → 为 ${tableName} 表添加复合索引 rackId_position...`);
|
||||
const indexesToCreate = [
|
||||
{ name: 'devices_rackId_position', fields: ['rackId', 'position'] },
|
||||
{ name: 'devices_rackId_position_isIdle', fields: ['rackId', 'position', 'isIdle'] },
|
||||
];
|
||||
|
||||
for (const idx of indexesToCreate) {
|
||||
console.log(` → 为 ${tableName} 表添加复合索引 ${idx.name}...`);
|
||||
try {
|
||||
if (dialect === 'sqlite') {
|
||||
await sequelize.query(`CREATE INDEX IF NOT EXISTS devices_rackId_position ON ${tableName}(rackId, position)`);
|
||||
const existingIndexes = await sequelize.query(`SHOW INDEX FROM ${tableName}`, {
|
||||
type: sequelize.QueryTypes.SELECT,
|
||||
});
|
||||
const indexExists = existingIndexes.some(
|
||||
existing => existing.Key_name === idx.name
|
||||
);
|
||||
|
||||
if (indexExists) {
|
||||
console.log(' → 索引已存在，跳过');
|
||||
} else {
|
||||
await sequelize.query(`CREATE INDEX IF NOT EXISTS \`devices_rackId_position\` ON \`${tableName}\`(\`rackId\`, \`position\`)`);
|
||||
if (dialect === 'sqlite') {
|
||||
await sequelize.query(
|
||||
`CREATE INDEX IF NOT EXISTS ${idx.name} ON ${tableName}(${idx.fields.join(', ')})`
|
||||
);
|
||||
} else {
|
||||
await sequelize.query(
|
||||
`CREATE INDEX \`${idx.name}\` ON \`${tableName}\`(\`${idx.fields.join('`, `')}\`)`
|
||||
);
|
||||
}
|
||||
console.log(' ✓ 索引创建成功');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.message.includes('already exists') || error.message.includes('Duplicate key name')) {
|
||||
console.log(' → 索引已存在，跳过');
|
||||
@@ -753,22 +779,32 @@ async function migrateDevicePositionIndexes() {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function migrateConsumableLogDeviceAssociation() {
|
||||
const tableName = 'consumable_logs';
|
||||
|
||||
if (!(await tableExists(tableName))) {
|
||||
console.log(` ${tableName} 表不存在，跳过`);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(` → 为 ${tableName} 表添加复合索引 rackId_position_isIdle...`);
|
||||
try {
|
||||
if (dialect === 'sqlite') {
|
||||
await sequelize.query(`CREATE INDEX IF NOT EXISTS devices_rackId_position_isIdle ON ${tableName}(rackId, position, isIdle)`);
|
||||
} else {
|
||||
await sequelize.query(`CREATE INDEX IF NOT EXISTS \`devices_rackId_position_isIdle\` ON \`${tableName}\`(\`rackId\`, \`position\`, \`isIdle\`)`);
|
||||
}
|
||||
console.log(' ✓ 索引创建成功');
|
||||
} catch (error) {
|
||||
if (error.message.includes('already exists') || error.message.includes('Duplicate key name')) {
|
||||
console.log(' → 索引已存在，跳过');
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
const columns = await getTableColumns(tableName);
|
||||
const newColumns = [
|
||||
{ name: 'deviceId', def: 'VARCHAR(255)' },
|
||||
{ name: 'deviceName', def: 'VARCHAR(255)' },
|
||||
{ name: 'rackId', def: 'VARCHAR(255)' },
|
||||
{ name: 'rackName', def: 'VARCHAR(255)' },
|
||||
{ name: 'roomId', def: 'VARCHAR(255)' },
|
||||
{ name: 'roomName', def: 'VARCHAR(255)' },
|
||||
];
|
||||
|
||||
for (const col of newColumns) {
|
||||
await addColumnIfNotExists(tableName, col.name, col.def);
|
||||
}
|
||||
|
||||
console.log(' 耗材日志设备关联迁移完成');
|
||||
}
|
||||
|
||||
// 执行迁移
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
const { sequelize } = require('../db');
|
||||
const Cable = require('../models/Cable');
|
||||
|
||||
async function migrateCableFields() {
|
||||
try {
|
||||
console.log('开始迁移 Cable 模型字段...');
|
||||
|
||||
// 检查字段是否已存在
|
||||
const [results] = await sequelize.query('PRAGMA table_info(cables)');
|
||||
const existingColumns = results.map(row => row.name);
|
||||
|
||||
const newColumns = [
|
||||
{ name: 'cableLabel', type: 'VARCHAR(255)' },
|
||||
{ name: 'cableColor', type: 'VARCHAR(50)' },
|
||||
{ name: 'installedBy', type: 'VARCHAR(100)' },
|
||||
{ name: 'installedAt', type: 'DATETIME' },
|
||||
{ name: 'lastTestedAt', type: 'DATETIME' },
|
||||
];
|
||||
|
||||
for (const column of newColumns) {
|
||||
if (!existingColumns.includes(column.name)) {
|
||||
console.log(`添加字段: ${column.name}`);
|
||||
await sequelize.query(`ALTER TABLE cables ADD COLUMN ${column.name} ${column.type}`);
|
||||
} else {
|
||||
console.log(`字段已存在: ${column.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('迁移完成！');
|
||||
console.log('\n新增字段:');
|
||||
console.log(' - cableLabel: 线缆标签/编号');
|
||||
console.log(' - cableColor: 线缆颜色（便于识别）');
|
||||
console.log(' - installedBy: 安装人');
|
||||
console.log(' - installedAt: 安装时间');
|
||||
console.log(' - lastTestedAt: 上次测试时间');
|
||||
} catch (error) {
|
||||
console.error('迁移失败:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
migrateCableFields();
|
||||
@@ -251,6 +251,9 @@ const operationLogsRoutes = require('./routes/operationLogs');
|
||||
const idleDeviceRoutes = require('./routes/idleDevices');
|
||||
const warehouseRoutes = require('./routes/warehouses');
|
||||
const dangerousOperationsRoutes = require('./routes/dangerousOperations');
|
||||
const consumableImportRoutes = require('./routes/consumableImport');
|
||||
|
||||
app.use('/api', consumableImportRoutes);
|
||||
|
||||
app.use('/api/devices', deviceRoutes);
|
||||
app.use('/api/racks', rackRoutes);
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
const { EventEmitter } = require('events');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
class ImportJobManager extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
this.jobs = new Map();
|
||||
this.JOB_STATUS = {
|
||||
PENDING: 'pending',
|
||||
PROCESSING: 'processing',
|
||||
COMPLETED: 'completed',
|
||||
FAILED: 'failed',
|
||||
CANCELLED: 'cancelled',
|
||||
};
|
||||
}
|
||||
|
||||
createJob(jobId, type, totalItems) {
|
||||
const job = {
|
||||
jobId,
|
||||
type,
|
||||
status: this.JOB_STATUS.PENDING,
|
||||
totalItems,
|
||||
processedItems: 0,
|
||||
successCount: 0,
|
||||
failedCount: 0,
|
||||
skippedCount: 0,
|
||||
updatedCount: 0,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
error: null,
|
||||
canCancel: true,
|
||||
result: null,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
this.jobs.set(jobId, job);
|
||||
return job;
|
||||
}
|
||||
|
||||
getJob(jobId) {
|
||||
return this.jobs.get(jobId);
|
||||
}
|
||||
|
||||
updateJob(jobId, updates) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job) return null;
|
||||
|
||||
Object.assign(job, updates);
|
||||
this.emit('jobUpdate', job);
|
||||
return job;
|
||||
}
|
||||
|
||||
startJob(jobId) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job) return null;
|
||||
|
||||
job.status = this.JOB_STATUS.PROCESSING;
|
||||
job.startTime = new Date();
|
||||
this.emit('jobStart', job);
|
||||
return job;
|
||||
}
|
||||
|
||||
incrementProgress(jobId, success = 0, failed = 0, skipped = 0, updated = 0) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job) return null;
|
||||
|
||||
job.processedItems += success + failed + skipped + updated;
|
||||
job.successCount += success;
|
||||
job.failedCount += failed;
|
||||
job.skippedCount += skipped;
|
||||
job.updatedCount += updated;
|
||||
this.emit('jobProgress', job);
|
||||
return job;
|
||||
}
|
||||
|
||||
completeJob(jobId, result = null) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job) return null;
|
||||
|
||||
job.status = this.JOB_STATUS.COMPLETED;
|
||||
job.endTime = new Date();
|
||||
job.canCancel = false;
|
||||
job.result = result;
|
||||
this.emit('jobComplete', job);
|
||||
return job;
|
||||
}
|
||||
|
||||
failJob(jobId, error) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job) return null;
|
||||
|
||||
job.status = this.JOB_STATUS.FAILED;
|
||||
job.endTime = new Date();
|
||||
job.canCancel = false;
|
||||
job.error = error;
|
||||
this.emit('jobFailed', job);
|
||||
return job;
|
||||
}
|
||||
|
||||
cancelJob(jobId) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job || !job.canCancel) return null;
|
||||
|
||||
job.status = this.JOB_STATUS.CANCELLED;
|
||||
job.endTime = new Date();
|
||||
job.canCancel = false;
|
||||
this.emit('jobCancelled', job);
|
||||
return job;
|
||||
}
|
||||
|
||||
getJobProgress(jobId) {
|
||||
const job = this.jobs.get(jobId);
|
||||
if (!job) return null;
|
||||
|
||||
const progress = {
|
||||
jobId: job.jobId,
|
||||
status: job.status,
|
||||
totalItems: job.totalItems,
|
||||
processedItems: job.processedItems,
|
||||
progressPercent:
|
||||
job.totalItems > 0 ? Math.round((job.processedItems / job.totalItems) * 100) : 0,
|
||||
successCount: job.successCount,
|
||||
failedCount: job.failedCount,
|
||||
skippedCount: job.skippedCount,
|
||||
updatedCount: job.updatedCount,
|
||||
canCancel: job.canCancel,
|
||||
error: job.error,
|
||||
startTime: job.startTime,
|
||||
endTime: job.endTime,
|
||||
elapsedTime: job.startTime
|
||||
? Date.now() - new Date(job.startTime).getTime()
|
||||
: null,
|
||||
};
|
||||
|
||||
return progress;
|
||||
}
|
||||
|
||||
listJobs() {
|
||||
return Array.from(this.jobs.values()).map(job => ({
|
||||
jobId: job.jobId,
|
||||
type: job.type,
|
||||
status: job.status,
|
||||
totalItems: job.totalItems,
|
||||
processedItems: job.processedItems,
|
||||
progressPercent:
|
||||
job.totalItems > 0 ? Math.round((job.processedItems / job.totalItems) * 100) : 0,
|
||||
canCancel: job.canCancel,
|
||||
startTime: job.startTime,
|
||||
endTime: job.endTime,
|
||||
createdAt: job.createdAt,
|
||||
}));
|
||||
}
|
||||
|
||||
cleanupOldJobs(maxAgeMs = 24 * 60 * 60 * 1000) {
|
||||
const now = Date.now();
|
||||
for (const [jobId, job] of this.jobs.entries()) {
|
||||
const jobEndTime = job.endTime || job.createdAt;
|
||||
if (now - new Date(jobEndTime).getTime() > maxAgeMs) {
|
||||
this.jobs.delete(jobId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const importJobManager = new ImportJobManager();
|
||||
|
||||
setInterval(() => {
|
||||
importJobManager.cleanupOldJobs();
|
||||
}, 60 * 60 * 1000);
|
||||
|
||||
module.exports = {
|
||||
importJobManager,
|
||||
ImportJobManager,
|
||||
};
|
||||
@@ -0,0 +1,186 @@
|
||||
# 向导式接线创建功能使用指南
|
||||
|
||||
## 功能概述
|
||||
|
||||
新的向导式接线创建功能提供了一种直观、交互式的接线创建流程，帮助用户更高效地管理设备间的物理连接。
|
||||
|
||||
## 核心特性
|
||||
|
||||
### 1. 四步向导流程
|
||||
|
||||
#### 步骤 1: 选择源设备
|
||||
- 搜索并选择接线的起点设备
|
||||
- 支持设备类型过滤（服务器、交换机、存储设备）
|
||||
- 点击设备卡片快速选择
|
||||
|
||||
#### 步骤 2: 选择目标设备
|
||||
- 搜索并选择接线的终点设备
|
||||
- 实时端口冲突检测
|
||||
- 高亮显示已占用端口
|
||||
|
||||
#### 步骤 3: 线缆配置
|
||||
- **线缆类型选择**:
|
||||
- 🌐 以太网线（适用于1G/10G短距离连接）
|
||||
- 🔦 光纤（适用于长距离或高带宽需求）
|
||||
- 🔌 铜缆（适用于电源或特殊设备连接）
|
||||
|
||||
- **线缆长度选择**:
|
||||
- 提供常用长度选项（1m, 2m, 3m, 5m, 7m, 10m, 15m, 20m, 30m, 50m）
|
||||
- **自动计算建议长度**：根据源/目标设备的机柜位置自动估算所需长度
|
||||
|
||||
- **线缆属性设置**:
|
||||
- 自定义线缆标签（支持自动生成或手动输入）
|
||||
- 添加备注说明
|
||||
|
||||
#### 步骤 4: 预览确认
|
||||
- 全面展示接线信息
|
||||
- 可视化连接预览
|
||||
- 确认创建接线
|
||||
|
||||
### 2. 端口可视化面板
|
||||
|
||||
- **端口状态颜色编码**:
|
||||
- 🟦 灰色：空闲端口
|
||||
- 🟩 绿色：已连接端口
|
||||
- 🟥 红色：故障端口
|
||||
|
||||
- **端口信息提示**:
|
||||
- 悬停显示端口详细信息
|
||||
- 显示端口类型、速率、VLAN
|
||||
- 显示已连接的对端设备信息
|
||||
|
||||
- **智能端口选择**:
|
||||
- 仅显示可用端口
|
||||
- 自动过滤已占用端口
|
||||
- 冲突端口高亮显示
|
||||
|
||||
### 3. 冲突检测
|
||||
|
||||
- 实时检测端口占用情况
|
||||
- 显示冲突的详细信息
|
||||
- 提供解决方案建议
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 从设备管理页面创建接线
|
||||
|
||||
1. 进入**设备管理**页面
|
||||
2. 在交换机设备卡片上找到 **"添加接线"** 按钮
|
||||
3. 点击按钮，打开向导式创建界面
|
||||
4. 按照四步向导完成接线创建
|
||||
|
||||
### 从机柜3D视图创建接线
|
||||
|
||||
1. 进入**机柜3D可视化**页面
|
||||
2. 在3D场景中选择源设备
|
||||
3. 点击设备上的端口
|
||||
4. 选择目标设备的端口
|
||||
5. 确认接线配置
|
||||
|
||||
## 新增字段说明
|
||||
|
||||
### Cable 模型新增字段
|
||||
|
||||
| 字段名 | 类型 | 说明 | 示例 |
|
||||
|--------|------|------|------|
|
||||
| `cableLabel` | VARCHAR(255) | 线缆标签/编号 | CABLE-001-002-1234 |
|
||||
| `cableColor` | VARCHAR(50) | 线缆颜色 | "红色", "蓝色", "黄色" |
|
||||
| `installedBy` | VARCHAR(100) | 安装人 | "张三" |
|
||||
| `installedAt` | DATETIME | 安装时间 | "2024-01-15 10:30:00" |
|
||||
| `lastTestedAt` | DATETIME | 上次测试时间 | "2024-01-15 11:00:00" |
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 前端组件
|
||||
|
||||
- **CableWizardModal**: 向导式接线创建主组件
|
||||
- **PortPanel**: 端口可视化面板
|
||||
- **framer-motion**: 动画效果
|
||||
|
||||
### 后端 API
|
||||
|
||||
- `POST /api/cables`: 创建接线（支持新字段）
|
||||
- `POST /api/cables/check-conflict`: 检查端口冲突
|
||||
- `GET /api/device-ports/device/:deviceId`: 获取设备端口列表
|
||||
|
||||
### 数据库迁移
|
||||
|
||||
运行以下命令添加新字段：
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
node scripts/migrate-cable-fields.js
|
||||
```
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 1. 线缆标签规范
|
||||
|
||||
建议使用以下格式生成线缆标签：
|
||||
|
||||
```
|
||||
CABLE-{源设备ID后4位}-{目标设备ID后4位}-{时间戳后4位}
|
||||
```
|
||||
|
||||
示例：
|
||||
- `CABLE-0001-0002-1234`
|
||||
- `CABLE-SRV01-SW01-5678`
|
||||
|
||||
### 2. 线缆长度估算
|
||||
|
||||
系统会根据设备所在机柜的位置自动估算所需长度：
|
||||
|
||||
```
|
||||
建议长度 = |源机柜ID - 目标机柜ID| × 0.5 + 3
|
||||
```
|
||||
|
||||
最小长度：3m
|
||||
最大长度：50m
|
||||
|
||||
### 3. 端口选择建议
|
||||
|
||||
- 优先选择相邻的端口（便于管理）
|
||||
- 同一设备的端口尽量连续分配
|
||||
- 考虑线缆走线路径，避免交叉
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: 如何查看已创建的接线？
|
||||
|
||||
**A**: 在接线管理页面可以查看所有接线，支持按状态、类型、设备等条件筛选。
|
||||
|
||||
### Q2: 如何编辑已创建的接线？
|
||||
|
||||
**A**: 点击接线记录的"编辑"按钮，修改后保存即可。
|
||||
|
||||
### Q3: 如何删除接线？
|
||||
|
||||
**A**: 点击接线记录的"删除"按钮，确认后删除。
|
||||
|
||||
### Q4: 端口冲突如何解决？
|
||||
|
||||
**A**: 系统会高亮显示冲突端口，建议选择其他空闲端口或先删除原有连接。
|
||||
|
||||
## 未来扩展
|
||||
|
||||
### 计划功能
|
||||
|
||||
1. **批量接线创建**
|
||||
- 支持 Excel 批量导入
|
||||
- 支持模板下载
|
||||
|
||||
2. **3D 线缆渲染**
|
||||
- 在 3D 场景中显示线缆走向
|
||||
- 支持线缆路径追踪
|
||||
|
||||
3. **接线统计报表**
|
||||
- 按类型/长度/状态统计
|
||||
- 导出 Excel 报表
|
||||
|
||||
4. **工单联动**
|
||||
- 接线操作与工单系统集成
|
||||
- 支持变更审批流程
|
||||
|
||||
## 技术支持
|
||||
|
||||
如有问题，请联系系统管理员或查看项目文档。
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tooltip, Badge, Divider, Pagination } from 'antd';
|
||||
import { LinkOutlined, SwapRightOutlined, AimOutlined, NodeIndexOutlined } from '@ant-design/icons';
|
||||
import { LinkOutlined, SwapRightOutlined, AimOutlined, NodeIndexOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const PortPanel = ({
|
||||
ports,
|
||||
@@ -10,6 +10,7 @@ const PortPanel = ({
|
||||
devices = [],
|
||||
onPortClick,
|
||||
compact = false,
|
||||
selectedPort = null,
|
||||
}) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(48); // 默认每页48个端口
|
||||
@@ -420,6 +421,7 @@ const PortPanel = ({
|
||||
const statusColor = getPortStatusColor(port.status);
|
||||
const isClickable = onPortClick && port.status !== 'disabled';
|
||||
const cable = findPortCable(port);
|
||||
const isSelected = selectedPort?.portId === port.portId || selectedPort?.portName === port.portName;
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
@@ -433,27 +435,71 @@ const PortPanel = ({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={() => isClickable && onPortClick(port)}
|
||||
onClick={() => {
|
||||
console.log('Port clicked:', port);
|
||||
if (isClickable) {
|
||||
console.log('Port is clickable, calling onPortClick');
|
||||
onPortClick(port);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: '4px',
|
||||
padding: '6px 4px',
|
||||
cursor: isClickable ? 'pointer' : 'not-allowed',
|
||||
transition: 'all 0.2s ease',
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
minWidth: '0',
|
||||
pointerEvents: isClickable ? 'auto' : 'none',
|
||||
transform: isSelected ? 'scale(1.08)' : 'scale(1)',
|
||||
boxShadow: isSelected
|
||||
? '0 0 0 4px rgba(24,144,255,0.15), 0 8px 25px rgba(24,144,255,0.25)'
|
||||
: isClickable
|
||||
? '0 0 0 0 rgba(24,144,255,0)'
|
||||
: 'none',
|
||||
}}
|
||||
>
|
||||
{/* 选中状态标记 - 更明显的视觉反馈 */}
|
||||
{isSelected && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-4px',
|
||||
right: '-4px',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
|
||||
border: '3px solid #fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 20,
|
||||
boxShadow: '0 4px 12px rgba(24,144,255,0.4), 0 2px 6px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<CheckCircleOutlined
|
||||
style={{
|
||||
color: '#fff',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* LED 指示灯 - 在端口上方 */}
|
||||
<div
|
||||
style={{
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
width: isSelected ? '8px' : '6px',
|
||||
height: isSelected ? '8px' : '6px',
|
||||
borderRadius: '50%',
|
||||
background: statusColor,
|
||||
boxShadow: `0 0 6px ${statusColor}, 0 0 12px ${statusColor}50`,
|
||||
marginBottom: '4px',
|
||||
background: isSelected ? '#1890ff' : statusColor,
|
||||
boxShadow: isSelected
|
||||
? `0 0 8px #1890ff, 0 0 16px #1890ff50`
|
||||
: `0 0 6px ${statusColor}, 0 0 12px ${statusColor}50`,
|
||||
marginBottom: '6px',
|
||||
transition: 'all 0.2s ease',
|
||||
animation: port.status === 'fault' ? 'pulse 1.5s infinite' : 'none',
|
||||
}}
|
||||
/>
|
||||
@@ -463,22 +509,28 @@ const PortPanel = ({
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1.2',
|
||||
background: 'linear-gradient(180deg, #2a3441 0%, #1e2530 100%)',
|
||||
border: `2px solid ${statusColor}`,
|
||||
borderRadius: '2px',
|
||||
background: isSelected
|
||||
? 'linear-gradient(180deg, #e6f7ff 0%, #bae7ff 100%)'
|
||||
: 'linear-gradient(180deg, #2a3441 0%, #1e2530 100%)',
|
||||
border: `2px solid ${isSelected ? '#1890ff' : statusColor}`,
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
boxShadow: `inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3)`,
|
||||
boxShadow: isSelected
|
||||
? 'inset 0 2px 4px rgba(24,144,255,0.2), 0 4px 12px rgba(24,144,255,0.15)'
|
||||
: 'inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3)',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
>
|
||||
{/* 端口内部图标 */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
color: statusColor,
|
||||
opacity: 0.8,
|
||||
fontSize: isSelected ? '12px' : '10px',
|
||||
color: isSelected ? '#1890ff' : statusColor,
|
||||
opacity: 0.9,
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
>
|
||||
{getPortTypeIcon(port.portType)}
|
||||
@@ -504,15 +556,16 @@ const PortPanel = ({
|
||||
{/* 端口名称 - 在端口下方 */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
fontWeight: 500,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: isSelected ? '11px' : '9px',
|
||||
fontWeight: isSelected ? 600 : 500,
|
||||
color: isSelected ? '#1890ff' : 'rgba(255, 255, 255, 0.7)',
|
||||
textAlign: 'center',
|
||||
marginTop: '3px',
|
||||
marginTop: '4px',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '100%',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
>
|
||||
{getPortDisplayName(port.portName)}
|
||||
|
||||
@@ -54,6 +54,7 @@ import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { designTokens } from '../config/theme';
|
||||
import { debounce } from '../utils/common';
|
||||
import CloseButton from '../components/CloseButton';
|
||||
import CableWizardModal from '../components/CableWizardModal';
|
||||
|
||||
const { Option } = Select;
|
||||
const { Panel } = Collapse;
|
||||
@@ -127,6 +128,9 @@ function CableManagement() {
|
||||
const [editingCable, setEditingCable] = useState(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [wizardVisible, setWizardVisible] = useState(false);
|
||||
const [wizardInitialSourceDevice, setWizardInitialSourceDevice] = useState(null);
|
||||
|
||||
const [importModalVisible, setImportModalVisible] = useState(false);
|
||||
const [importFileList, setImportFileList] = useState([]);
|
||||
const [importPreview, setImportPreview] = useState([]);
|
||||
@@ -284,24 +288,14 @@ function CableManagement() {
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingCable(null);
|
||||
form.resetFields();
|
||||
setModalVisible(true);
|
||||
setWizardInitialSourceDevice(null);
|
||||
setWizardVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = cable => {
|
||||
setEditingCable(cable);
|
||||
form.setFieldsValue({
|
||||
sourceDeviceId: cable.sourceDeviceId,
|
||||
sourcePort: cable.sourcePort,
|
||||
targetDeviceId: cable.targetDeviceId,
|
||||
targetPort: cable.targetPort,
|
||||
cableType: cable.cableType,
|
||||
cableLength: cable.cableLength,
|
||||
status: cable.status,
|
||||
description: cable.description,
|
||||
});
|
||||
setModalVisible(true);
|
||||
setWizardInitialSourceDevice(null);
|
||||
setWizardVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async cableId => {
|
||||
@@ -1243,9 +1237,8 @@ function CableManagement() {
|
||||
type="text"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setEditingCable(null);
|
||||
form.setFieldsValue({ sourceDeviceId: switchId });
|
||||
setModalVisible(true);
|
||||
setWizardInitialSourceDevice(switchData.switch);
|
||||
setWizardVisible(true);
|
||||
}}
|
||||
style={{ color: designTokens.colors.primary.main }}
|
||||
/>
|
||||
@@ -1510,6 +1503,22 @@ function CableManagement() {
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
{/* 向导式接线创建弹窗 */}
|
||||
<CableWizardModal
|
||||
visible={wizardVisible}
|
||||
onClose={() => {
|
||||
setWizardVisible(false);
|
||||
setWizardInitialSourceDevice(null);
|
||||
setEditingCable(null);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setEditingCable(null);
|
||||
fetchCables();
|
||||
}}
|
||||
initialSourceDevice={wizardInitialSourceDevice}
|
||||
editingCable={editingCable}
|
||||
/>
|
||||
|
||||
{/* 批量导入弹窗 */}
|
||||
<Modal
|
||||
title={
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Generated
+117
@@ -9,12 +9,67 @@
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ant-design/cssinjs": "^2.1.2",
|
||||
"papaparse": "^5.5.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^9.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/cssinjs": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-2.1.2.tgz",
|
||||
"integrity": "sha512-2Hy8BnCEH31xPeSLbhhB2ctCPXE2ZnASdi+KbSeS79BNbUhL9hAEe20SkUk+BR8aKTmqb6+FKFruk7w8z0VoRQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.11.1",
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@emotion/unitless": "^0.7.5",
|
||||
"@rc-component/util": "^1.4.0",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"stylis": "^4.3.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.0.0",
|
||||
"react-dom": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.29.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
|
||||
"integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/unitless": {
|
||||
"version": "0.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
|
||||
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@rc-component/util": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@rc-component/util/-/util-1.10.0.tgz",
|
||||
"integrity": "sha512-aY9GLBuiUdpyfIUpAWSYer4Tu3mVaZCo5A0q9NtXcazT3MRiI3/WNHCR+DUn5VAtR6iRRf0ynCqQUcHli5UdYw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-mobile": "^5.0.0",
|
||||
"react-is": "^18.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
@@ -86,6 +141,15 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@@ -131,6 +195,12 @@
|
||||
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
@@ -178,12 +248,47 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-mobile": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-5.0.0.tgz",
|
||||
"integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/papaparse": {
|
||||
"version": "5.5.3",
|
||||
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.3.tgz",
|
||||
"integrity": "sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
|
||||
"integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
|
||||
"integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
@@ -204,6 +309,12 @@
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shell-quote": {
|
||||
"version": "1.8.3",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
|
||||
@@ -245,6 +356,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/stylis": {
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
|
||||
"integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"concurrently": "^9.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/cssinjs": "^2.1.2",
|
||||
"papaparse": "^5.5.3"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user