feat: 添加工单统计自动刷新功能并优化设备选择逻辑
refactor(工单管理): 重构设备选择表单并优化UI体验 fix(工单统计): 修复每日完成工单统计不准确的问题 perf(后端): 添加批量导出接口优化大数据量查询性能 chore: 添加react-transition-group依赖支持动画效果 feat(设备管理): 添加设备全量查询接口支持导出功能 style(工单管理): 优化表单布局和样式提升用户体验 refactor(工单字段): 优化字段管理组件处理空值情况 fix(机柜管理): 修复机柜列表查询接口参数问题 docs: 移除不再使用的工单字段管理页面
This commit is contained in:
zhang1106
@@ -60,6 +60,55 @@ router.get('/', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
const MAX_EXPORT_SIZE = 50000;
|
||||
|
||||
router.get('/export', async (req, res) => {
|
||||
try {
|
||||
const { keyword, category, status } = req.query;
|
||||
|
||||
const where = {};
|
||||
|
||||
if (keyword) {
|
||||
where[Op.or] = [
|
||||
{ consumableId: { [Op.like]: `%${keyword}%` } },
|
||||
{ name: { [Op.like]: `%${keyword}%` } },
|
||||
{ category: { [Op.like]: `%${keyword}%` } },
|
||||
{ supplier: { [Op.like]: `%${keyword}%` } },
|
||||
{ location: { [Op.like]: `%${keyword}%` } }
|
||||
];
|
||||
}
|
||||
|
||||
if (category && category !== 'all') {
|
||||
where.category = category;
|
||||
}
|
||||
|
||||
if (status && status !== 'all') {
|
||||
where.status = status;
|
||||
}
|
||||
|
||||
const consumables = await Consumable.findAll({
|
||||
where,
|
||||
limit: MAX_EXPORT_SIZE,
|
||||
order: [['createdAt', 'DESC']]
|
||||
});
|
||||
|
||||
const result = consumables.map(item => {
|
||||
const data = item.toJSON();
|
||||
if (!Array.isArray(data.snList)) {
|
||||
data.snList = [];
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
res.json({
|
||||
consumables: result,
|
||||
total: result.length
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/', async (req, res) => {
|
||||
const transaction = await sequelize.transaction();
|
||||
try {
|
||||
|
||||
@@ -584,6 +584,67 @@ router.get('/', validateQuery(queryDeviceSchema), async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
const MAX_EXPORT_SIZE = 50000;
|
||||
|
||||
router.get('/all', async (req, res) => {
|
||||
try {
|
||||
const { keyword, status, type, rackId, roomId } = req.query;
|
||||
|
||||
const where = {};
|
||||
|
||||
if (keyword) {
|
||||
const escapedKeyword = keyword.replace(/'/g, "''");
|
||||
where[Op.or] = [
|
||||
{ deviceId: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ name: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ type: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ model: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ serialNumber: { [Op.like]: `%${escapedKeyword}%` } },
|
||||
{ ipAddress: { [Op.like]: `%${escapedKeyword}%` } }
|
||||
];
|
||||
}
|
||||
|
||||
if (status && status !== 'all') {
|
||||
where.status = status;
|
||||
}
|
||||
|
||||
if (type && type !== 'all') {
|
||||
where.type = type;
|
||||
}
|
||||
|
||||
if (rackId) {
|
||||
where.rackId = rackId;
|
||||
}
|
||||
|
||||
if (roomId && roomId !== 'all') {
|
||||
where['$Rack.roomId$'] = roomId;
|
||||
}
|
||||
|
||||
const devices = await Device.findAll({
|
||||
where,
|
||||
include: [
|
||||
{
|
||||
model: Rack,
|
||||
include: [{ model: Room }],
|
||||
separate: false
|
||||
}
|
||||
],
|
||||
limit: MAX_EXPORT_SIZE,
|
||||
order: [['createdAt', 'DESC']],
|
||||
distinct: true,
|
||||
subQuery: false
|
||||
});
|
||||
|
||||
res.json({
|
||||
devices,
|
||||
total: devices.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error);
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 生成设备ID的辅助函数
|
||||
async function generateDeviceId() {
|
||||
// 获取当前最大的设备ID序号
|
||||
|
||||
@@ -79,6 +79,59 @@ router.get('/', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
const MAX_EXPORT_SIZE = 50000;
|
||||
|
||||
router.get('/all', async (req, res) => {
|
||||
try {
|
||||
const { roomId, status, keyword } = req.query;
|
||||
|
||||
const where = {};
|
||||
if (roomId && roomId !== 'all') {
|
||||
where.roomId = roomId;
|
||||
}
|
||||
if (status && status !== 'all') {
|
||||
where.status = status;
|
||||
}
|
||||
if (keyword) {
|
||||
where[require('sequelize').Op.or] = [
|
||||
{ rackId: { [require('sequelize').Op.like]: `%${keyword}%` } },
|
||||
{ name: { [require('sequelize').Op.like]: `%${keyword}%` } }
|
||||
];
|
||||
}
|
||||
|
||||
const racks = await Rack.findAll({
|
||||
where,
|
||||
include: [{ model: Room, separate: false }],
|
||||
limit: MAX_EXPORT_SIZE
|
||||
});
|
||||
|
||||
const rackIds = racks.map(r => r.rackId);
|
||||
const devices = await Device.findAll({
|
||||
where: { rackId: rackIds },
|
||||
attributes: ['deviceId', 'rackId', 'name', 'powerConsumption', 'height']
|
||||
});
|
||||
|
||||
const deviceMap = {};
|
||||
devices.forEach(d => {
|
||||
if (!deviceMap[d.rackId]) {
|
||||
deviceMap[d.rackId] = [];
|
||||
}
|
||||
deviceMap[d.rackId].push(d);
|
||||
});
|
||||
|
||||
racks.forEach(rack => {
|
||||
rack.dataValues.Devices = deviceMap[rack.rackId] || [];
|
||||
});
|
||||
|
||||
res.json({
|
||||
racks,
|
||||
total: racks.length
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 导出机柜导入模板 - 必须放在 /:rackId 路由之前，避免被当作 rackId 参数
|
||||
router.get('/import-template', async (req, res) => {
|
||||
try {
|
||||
|
||||
@@ -23,7 +23,7 @@ router.get('/stats', async (req, res) => {
|
||||
|
||||
const Sequelize = require('sequelize');
|
||||
|
||||
const [total, statusStats, priorityStats, categoryStats, monthlyStats, deviceStats, dailyStats] = await Promise.all([
|
||||
const [total, statusStats, priorityStats, categoryStats, monthlyStats, deviceStats, dailyCreatedStats, dailyCompletedStats] = await Promise.all([
|
||||
Ticket.count({ where }),
|
||||
Ticket.findAll({
|
||||
where,
|
||||
@@ -68,11 +68,29 @@ router.get('/stats', async (req, res) => {
|
||||
Ticket.findAll({
|
||||
where,
|
||||
attributes: [
|
||||
[Sequelize.fn('DATE', Sequelize.col('createdAt')), 'date'],
|
||||
[dbDialect === 'mysql'
|
||||
? Sequelize.fn('DATE_FORMAT', Sequelize.col('createdAt'), '%Y-%m-%d')
|
||||
: Sequelize.fn('date', Sequelize.col('createdAt')),
|
||||
'date'],
|
||||
[Sequelize.fn('COUNT', '*'), 'created']
|
||||
],
|
||||
group: ['date'],
|
||||
order: [['date', 'ASC']]
|
||||
}),
|
||||
Ticket.findAll({
|
||||
where: {
|
||||
...where,
|
||||
status: 'completed'
|
||||
},
|
||||
attributes: [
|
||||
[dbDialect === 'mysql'
|
||||
? Sequelize.fn('DATE_FORMAT', Sequelize.col('updatedAt'), '%Y-%m-%d')
|
||||
: Sequelize.fn('date', Sequelize.col('updatedAt')),
|
||||
'date'],
|
||||
[Sequelize.fn('COUNT', '*'), 'completed']
|
||||
],
|
||||
group: ['date'],
|
||||
order: [['date', 'ASC']]
|
||||
})
|
||||
]);
|
||||
|
||||
@@ -110,16 +128,42 @@ router.get('/stats', async (req, res) => {
|
||||
deviceType: ''
|
||||
}));
|
||||
|
||||
const trend = dailyStats.map(d => ({
|
||||
date: d.dataValues.date,
|
||||
created: d.dataValues.created,
|
||||
completed: 0,
|
||||
const createdMap = {};
|
||||
dailyCreatedStats.forEach(d => {
|
||||
createdMap[d.dataValues.date] = d.dataValues.created;
|
||||
});
|
||||
const completedMap = {};
|
||||
dailyCompletedStats.forEach(d => {
|
||||
completedMap[d.dataValues.date] = d.dataValues.completed;
|
||||
});
|
||||
|
||||
const allDates = [...new Set([...Object.keys(createdMap), ...Object.keys(completedMap)])].sort();
|
||||
const trend = allDates.map(date => ({
|
||||
date,
|
||||
created: createdMap[date] || 0,
|
||||
completed: completedMap[date] || 0,
|
||||
closed: 0,
|
||||
inProgress: 0,
|
||||
pending: 0
|
||||
}));
|
||||
|
||||
const avgProcessingTime = 0;
|
||||
const completedTickets = await Ticket.findAll({
|
||||
where: {
|
||||
...where,
|
||||
status: 'completed'
|
||||
},
|
||||
attributes: ['createdAt', 'updatedAt']
|
||||
});
|
||||
|
||||
let avgProcessingTime = 0;
|
||||
if (completedTickets.length > 0) {
|
||||
const totalProcessingTime = completedTickets.reduce((sum, ticket) => {
|
||||
const created = new Date(ticket.createdAt);
|
||||
const updated = new Date(ticket.updatedAt);
|
||||
return sum + (updated - created);
|
||||
}, 0);
|
||||
avgProcessingTime = (totalProcessingTime / completedTickets.length / (1000 * 60 * 60)).toFixed(1);
|
||||
}
|
||||
|
||||
res.json({
|
||||
total,
|
||||
@@ -127,7 +171,7 @@ router.get('/stats', async (req, res) => {
|
||||
inProgress,
|
||||
completed,
|
||||
closed,
|
||||
avgProcessingTime,
|
||||
avgProcessingTime: parseFloat(avgProcessingTime),
|
||||
byStatus,
|
||||
byPriority,
|
||||
byCategory,
|
||||
|
||||
Generated
+27
@@ -19,6 +19,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.15.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"styled-components": "^6.3.9",
|
||||
"swr": "^2.4.0",
|
||||
"three": "^0.183.2",
|
||||
@@ -3698,6 +3699,16 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/draco3d": {
|
||||
"version": "1.5.7",
|
||||
"resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
|
||||
@@ -6975,6 +6986,22 @@
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.6.0",
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-use-measure": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.15.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"styled-components": "^6.3.9",
|
||||
"swr": "^2.4.0",
|
||||
"three": "^0.183.2",
|
||||
|
||||
@@ -70,7 +70,6 @@ const Login = lazy(() => import('./pages/Login'));
|
||||
const TicketManagement = lazy(() => import('./pages/TicketManagement'));
|
||||
const TicketCategoryManagement = lazy(() => import('./pages/TicketCategoryManagement'));
|
||||
const TicketStatistics = lazy(() => import('./pages/TicketStatistics'));
|
||||
const TicketFieldManagement = lazy(() => import('./pages/TicketFieldManagement'));
|
||||
const SystemSettings = lazy(() => import('./pages/SystemSettings'));
|
||||
const CableManagement = lazy(() => import('./pages/CableManagement'));
|
||||
const PortManagement = lazy(() => import('./pages/PortManagement'));
|
||||
@@ -321,11 +320,6 @@ const AppLayout = ({ children }) => {
|
||||
icon: <BarChartOutlined style={{ fontSize: '16px' }} />,
|
||||
label: <Link to="/ticket-statistics">统计报表</Link>,
|
||||
},
|
||||
{
|
||||
key: 'ticket-fields',
|
||||
icon: <DatabaseOutlined style={{ fontSize: '16px' }} />,
|
||||
label: <Link to="/ticket-fields">字段管理</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -599,7 +593,6 @@ const routeConfig = [
|
||||
{ path: '/tickets', component: TicketManagement },
|
||||
{ path: '/ticket-categories', component: TicketCategoryManagement },
|
||||
{ path: '/ticket-statistics', component: TicketStatistics },
|
||||
{ path: '/ticket-fields', component: TicketFieldManagement },
|
||||
{ path: '/settings', component: SystemSettings },
|
||||
{ path: '/cables', component: CableManagement },
|
||||
{ path: '/inventory', component: InventoryManagement },
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Modal, Button, Card, Row, Col, Tag } from 'antd';
|
||||
import { AppstoreOutlined } from '@ant-design/icons';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Button, Row, Col, Tag, Progress } from 'antd';
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
EnvironmentOutlined,
|
||||
ThunderboltOutlined,
|
||||
CalendarOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
EditOutlined,
|
||||
FileTextOutlined,
|
||||
PlusOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
SyncOutlined,
|
||||
StopOutlined,
|
||||
DesktopOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { designTokens } from '../../config/theme';
|
||||
import { getStatusConfig, getTypeLabel, getDeviceTypeIcon } from '../../utils/deviceUtils.jsx';
|
||||
|
||||
const modalHeaderStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
};
|
||||
|
||||
const secondaryActionStyle = {
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
border: `1px solid ${designTokens.colors.border.light}`,
|
||||
fontWeight: '500',
|
||||
};
|
||||
const { colors, shadows, borderRadius, transitions, spacing } = designTokens;
|
||||
|
||||
const DeviceDetailModal = ({
|
||||
visible,
|
||||
@@ -28,225 +30,723 @@ const DeviceDetailModal = ({
|
||||
onViewTickets,
|
||||
onCreateTicket,
|
||||
}) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('basic');
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setIsVisible(true);
|
||||
} else {
|
||||
const timer = setTimeout(() => setIsVisible(false), 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
if (!device) return null;
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
const iconMap = {
|
||||
running: <SyncOutlined spin style={{ color: colors.status.running }} />,
|
||||
maintenance: <ClockCircleOutlined style={{ color: colors.status.maintenance }} />,
|
||||
offline: <StopOutlined style={{ color: colors.status.offline }} />,
|
||||
fault: <ExclamationCircleOutlined style={{ color: colors.status.fault }} />,
|
||||
idle: <CheckCircleOutlined style={{ color: '#36cfc9' }} />,
|
||||
};
|
||||
return iconMap[status] || <DesktopOutlined style={{ color: colors.text.tertiary }} />;
|
||||
};
|
||||
|
||||
const getDeviceTypeColor = (type) => {
|
||||
return colors.device[type] || colors.device.other;
|
||||
};
|
||||
|
||||
const isWarrantyExpired = device.warrantyExpiry && new Date(device.warrantyExpiry) < new Date();
|
||||
const warrantyDaysLeft = device.warrantyExpiry
|
||||
? Math.ceil((new Date(device.warrantyExpiry) - new Date()) / (1000 * 60 * 60 * 24))
|
||||
: null;
|
||||
|
||||
const InfoCard = ({ title, icon, children, className = '' }) => (
|
||||
<div
|
||||
className={`info-card ${className}`}
|
||||
style={{
|
||||
background: colors.background.primary,
|
||||
borderRadius: borderRadius.large,
|
||||
border: `1px solid ${colors.border.light}`,
|
||||
boxShadow: shadows.small,
|
||||
overflow: 'hidden',
|
||||
transition: `all ${transitions.normal}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '16px 20px',
|
||||
borderBottom: `1px solid ${colors.border.light}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
background: `linear-gradient(180deg, ${colors.background.secondary} 0%, ${colors.background.primary} 100%)`,
|
||||
}}
|
||||
>
|
||||
<span style={{ color: colors.primary.main, fontSize: '16px' }}>{icon}</span>
|
||||
<span style={{ fontWeight: 600, fontSize: '15px', color: colors.text.primary }}>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ padding: '20px' }}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const InfoItem = ({ label, value, status, copyable = false, fullWidth = false }) => {
|
||||
const renderValue = () => {
|
||||
if (status === 'warning') {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
color: colors.warning.main,
|
||||
fontWeight: 600,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
<ExclamationCircleOutlined />
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (status === 'danger') {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
color: colors.error.main,
|
||||
fontWeight: 600,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
<CloseCircleOutlined />
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span style={{ fontWeight: 500 }}>{value || '-'}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
paddingBottom: '16px',
|
||||
borderBottom: `1px dashed ${colors.border.light}`,
|
||||
}}
|
||||
className={fullWidth ? 'info-item-full' : ''}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: colors.text.tertiary,
|
||||
marginBottom: '6px',
|
||||
fontWeight: 500,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.text.primary,
|
||||
}}
|
||||
>
|
||||
{renderValue()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const tabItems = [
|
||||
{ key: 'basic', label: '基本信息' },
|
||||
{ key: 'location', label: '位置信息' },
|
||||
{ key: 'maintenance', label: '维保信息' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ ...modalHeaderStyle, paddingRight: '32px' }}>
|
||||
<AppstoreOutlined style={{ color: '#667eea' }} />
|
||||
设备详情
|
||||
</div>
|
||||
}
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
footer={[
|
||||
<Button key="close" onClick={onClose} style={secondaryActionStyle}>
|
||||
关闭
|
||||
</Button>,
|
||||
<Button key="viewTickets" onClick={() => onViewTickets(device)} style={secondaryActionStyle}>
|
||||
查看工单
|
||||
</Button>,
|
||||
<Button key="createTicket" onClick={() => onCreateTicket(device)} style={secondaryActionStyle}>
|
||||
创建工单
|
||||
</Button>,
|
||||
<Button
|
||||
key="edit"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
onEdit(device);
|
||||
}}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
color: '#ffffff',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
fontWeight: '500',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>,
|
||||
]}
|
||||
width={700}
|
||||
destroyOnHidden
|
||||
footer={null}
|
||||
width={800}
|
||||
destroyOnClose
|
||||
centered
|
||||
className="device-detail-modal"
|
||||
styles={{
|
||||
header: {
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
padding: '16px 24px',
|
||||
position: 'relative',
|
||||
mask: {
|
||||
backdropFilter: 'blur(4px)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.45)',
|
||||
},
|
||||
content: {
|
||||
padding: 0,
|
||||
borderRadius: borderRadius.xl,
|
||||
overflow: 'hidden',
|
||||
boxShadow: shadows.xl,
|
||||
},
|
||||
body: { padding: '0', overflow: 'auto' },
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<style>{`
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.device-detail-modal .info-card:hover {
|
||||
box-shadow: ${shadows.md};
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.device-detail-modal .info-item:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.device-detail-modal .tab-btn {
|
||||
transition: all ${transitions.fast};
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.device-detail-modal .tab-btn:hover {
|
||||
color: ${colors.primary.main};
|
||||
background: ${colors.primary.bg};
|
||||
}
|
||||
|
||||
.device-detail-modal .tab-btn.active {
|
||||
color: ${colors.primary.main};
|
||||
border-bottom-color: ${colors.primary.main};
|
||||
background: ${colors.primary.bg};
|
||||
}
|
||||
|
||||
.device-detail-modal .action-btn {
|
||||
transition: all ${transitions.fast};
|
||||
}
|
||||
|
||||
.device-detail-modal .action-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: ${shadows.md};
|
||||
}
|
||||
|
||||
.device-detail-modal .device-icon-wrapper {
|
||||
transition: all ${transitions.normal};
|
||||
}
|
||||
|
||||
.device-detail-modal .device-icon-wrapper:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.device-detail-modal .progress-bar {
|
||||
transition: all ${transitions.slow};
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.device-detail-modal .ant-modal {
|
||||
max-width: 95vw !important;
|
||||
margin: 10px auto !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors.primary.main} 0%, ${colors.primary.dark} 50%, ${colors.purple.main} 100%)`,
|
||||
padding: '28px 32px',
|
||||
color: '#fff',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '24px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: '#fff',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: '200px',
|
||||
height: '200px',
|
||||
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||
borderRadius: '0 0 0 100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
borderRadius: '12px',
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '-50px',
|
||||
left: '20%',
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '20px', position: 'relative', zIndex: 1 }}>
|
||||
<div
|
||||
className="device-icon-wrapper"
|
||||
style={{
|
||||
width: '72px',
|
||||
height: '72px',
|
||||
borderRadius: borderRadius.large,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: `0 8px 32px rgba(0, 0, 0, 0.2)`,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '32px', color: '#fff' }}>
|
||||
{getDeviceTypeIcon(device.type)}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: '24px', fontWeight: 600, marginBottom: '8px' }}>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: 700,
|
||||
color: '#fff',
|
||||
textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
}}
|
||||
>
|
||||
{device.name}
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', opacity: 0.9 }}>
|
||||
<span>{getTypeLabel(device.type)}</span>
|
||||
<span>|</span>
|
||||
<span>{device.deviceId}</span>
|
||||
<span>|</span>
|
||||
</h2>
|
||||
{device.status && (
|
||||
<Tag
|
||||
color={device.status ? getStatusConfig(device.status).badgeColor : 'default'}
|
||||
style={{ margin: 0 }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
||||
color: '#fff',
|
||||
borderRadius: borderRadius.round,
|
||||
padding: '2px 12px',
|
||||
fontWeight: 500,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
{device.status ? getStatusConfig(device.status).text : '-'}
|
||||
{getStatusIcon(device.status)}
|
||||
{getStatusConfig(device.status).text}
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '16px',
|
||||
opacity: 0.9,
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
padding: '4px 12px',
|
||||
borderRadius: borderRadius.round,
|
||||
}}
|
||||
>
|
||||
<AppstoreOutlined style={{ fontSize: '12px' }} />
|
||||
{getTypeLabel(device.type)}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
padding: '4px 12px',
|
||||
borderRadius: borderRadius.round,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '13px' }}>{device.deviceId}</span>
|
||||
</span>
|
||||
{device.model && (
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
padding: '4px 12px',
|
||||
borderRadius: borderRadius.round,
|
||||
}}
|
||||
>
|
||||
{device.model}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '20px 24px' }}>
|
||||
<Card
|
||||
size="small"
|
||||
title={<span style={{ fontWeight: 600 }}>基本信息</span>}
|
||||
style={{ marginBottom: '16px', borderRadius: '8px' }}
|
||||
>
|
||||
<Row gutter={[24, 16]}>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>设备型号</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.model || '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>序列号</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.serialNumber || '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>IP地址</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.ipAddress || '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>所在机房</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.Rack?.Room?.name || '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>所在机柜</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.Rack?.name || '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>位置(U)</div>
|
||||
<div style={{ fontWeight: 500 }}>U{device.position || '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>高度</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.height ? `${device.height}U` : '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>功率</div>
|
||||
<div style={{ fontWeight: 500 }}>{device.powerConsumption ? `${device.powerConsumption}W` : '-'}</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>状态</div>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
color: device.status ? getStatusConfig(device.status).color : '#666',
|
||||
}}
|
||||
>
|
||||
{device.status ? getStatusConfig(device.status).text : '-'}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
size="small"
|
||||
title={<span style={{ fontWeight: 600 }}>维保信息</span>}
|
||||
style={{ marginBottom: '16px', borderRadius: '8px' }}
|
||||
>
|
||||
<Row gutter={[24, 16]}>
|
||||
<Col span={12}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>购买日期</div>
|
||||
<div style={{ fontWeight: 500 }}>
|
||||
{device.purchaseDate
|
||||
? new Date(device.purchaseDate).toLocaleDateString('zh-CN')
|
||||
: '-'}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>保修到期</div>
|
||||
<div
|
||||
style={{
|
||||
fontWeight:
|
||||
device.warrantyExpiry && new Date(device.warrantyExpiry) < new Date()
|
||||
? 600
|
||||
: 500,
|
||||
color:
|
||||
device.warrantyExpiry && new Date(device.warrantyExpiry) < new Date()
|
||||
? '#d93025'
|
||||
: '#333',
|
||||
}}
|
||||
>
|
||||
{device.warrantyExpiry
|
||||
? new Date(device.warrantyExpiry).toLocaleDateString('zh-CN')
|
||||
: '-'}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{device.description && (
|
||||
<Card
|
||||
size="small"
|
||||
title={<span style={{ fontWeight: 600 }}>描述</span>}
|
||||
style={{ marginBottom: '16px', borderRadius: '8px' }}
|
||||
<div style={{ padding: '0 24px', backgroundColor: colors.background.secondary }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
paddingTop: '16px',
|
||||
}}
|
||||
>
|
||||
{tabItems.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`tab-btn ${activeTab === tab.key ? 'active' : ''}`}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
color: activeTab === tab.key ? colors.primary.main : colors.text.secondary,
|
||||
borderRadius: borderRadius.medium,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{device.description}</div>
|
||||
</Card>
|
||||
)}
|
||||
{tab.label}
|
||||
{activeTab === tab.key && (
|
||||
<span
|
||||
style={{
|
||||
width: '4px',
|
||||
height: '4px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: colors.primary.main,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{device.customFields && Object.keys(device.customFields).length > 0 && (
|
||||
<Card
|
||||
size="small"
|
||||
title={<span style={{ fontWeight: 600 }}>自定义字段</span>}
|
||||
style={{ borderRadius: '8px' }}
|
||||
<div style={{ padding: '24px 32px', maxHeight: '480px', overflowY: 'auto' }}>
|
||||
{activeTab === 'basic' && (
|
||||
<InfoCard
|
||||
title="基本信息"
|
||||
icon={<AppstoreOutlined />}
|
||||
style={{ animation: 'fadeInUp 0.3s ease-out' }}
|
||||
>
|
||||
<Row gutter={[24, 16]}>
|
||||
<Col span={8}>
|
||||
<InfoItem label="设备ID" value={device.deviceId} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="设备名称" value={device.name} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="设备类型" value={getTypeLabel(device.type)} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="设备型号" value={device.model} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="序列号" value={device.serialNumber} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="IP地址" value={device.ipAddress} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem
|
||||
label="设备状态"
|
||||
value={device.status ? getStatusConfig(device.status).text : '-'}
|
||||
status={
|
||||
device.status === 'fault'
|
||||
? 'danger'
|
||||
: device.status === 'maintenance'
|
||||
? 'warning'
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="功率消耗" value={device.powerConsumption ? `${device.powerConsumption}W` : '-'} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="设备高度" value={device.height ? `${device.height}U` : '-'} />
|
||||
</Col>
|
||||
</Row>
|
||||
{device.description && (
|
||||
<div style={{ marginTop: '16px', paddingTop: '16px', borderTop: `1px dashed ${colors.border.light}` }}>
|
||||
<InfoItem label="设备描述" value={device.description} fullWidth />
|
||||
</div>
|
||||
)}
|
||||
{device.customFields && Object.keys(device.customFields).length > 0 && (
|
||||
<div style={{ marginTop: '16px', paddingTop: '16px', borderTop: `1px dashed ${colors.border.light}` }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: colors.text.tertiary,
|
||||
marginBottom: '12px',
|
||||
fontWeight: 500,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
自定义字段
|
||||
</div>
|
||||
<Row gutter={[16, 16]}>
|
||||
{Object.entries(device.customFields).map(([key, value]) => {
|
||||
const fieldConfig = deviceFields.find((f) => f.fieldName === key);
|
||||
const displayName = fieldConfig?.displayName || key;
|
||||
return (
|
||||
<Col span={8} key={key}>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 16px',
|
||||
background: colors.background.secondary,
|
||||
borderRadius: borderRadius.medium,
|
||||
border: `1px solid ${colors.border.light}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: colors.text.tertiary,
|
||||
marginBottom: '4px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{displayName}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.text.primary,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{String(value)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
</InfoCard>
|
||||
)}
|
||||
|
||||
{activeTab === 'location' && (
|
||||
<InfoCard
|
||||
title="位置信息"
|
||||
icon={<EnvironmentOutlined />}
|
||||
style={{ animation: 'fadeInUp 0.3s ease-out' }}
|
||||
>
|
||||
<Row gutter={[24, 16]}>
|
||||
<Col span={8}>
|
||||
<InfoItem label="所在机房" value={device.Rack?.Room?.name} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="所在机柜" value={device.Rack?.name} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="机柜编号" value={device.Rack?.rackId} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem label="安装位置" value={device.position ? `U${device.position}` : '-'} />
|
||||
</Col>
|
||||
</Row>
|
||||
</InfoCard>
|
||||
)}
|
||||
|
||||
{activeTab === 'maintenance' && (
|
||||
<>
|
||||
<InfoCard
|
||||
title="购买与维保信息"
|
||||
icon={<CalendarOutlined />}
|
||||
style={{ animation: 'fadeInUp 0.3s ease-out', marginBottom: '20px' }}
|
||||
>
|
||||
<Row gutter={[24, 16]}>
|
||||
{Object.entries(device.customFields).map(([key, value]) => {
|
||||
const fieldConfig = deviceFields.find((f) => f.fieldName === key);
|
||||
const displayName = fieldConfig?.displayName || key;
|
||||
return (
|
||||
<Col span={8} key={key}>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>
|
||||
{displayName}
|
||||
</div>
|
||||
<div style={{ fontWeight: 500 }}>{String(value)}</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
<Col span={8}>
|
||||
<InfoItem label="购买日期" value={device.purchaseDate ? new Date(device.purchaseDate).toLocaleDateString('zh-CN') : '-'} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InfoItem
|
||||
label="保修到期"
|
||||
value={device.warrantyExpiry ? new Date(device.warrantyExpiry).toLocaleDateString('zh-CN') : '-'}
|
||||
status={isWarrantyExpired ? 'danger' : undefined}
|
||||
/>
|
||||
</Col>
|
||||
{warrantyDaysLeft !== null && warrantyDaysLeft > 0 && (
|
||||
<Col span={24}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: colors.text.tertiary,
|
||||
marginBottom: '8px',
|
||||
fontWeight: 500,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
保修剩余天数
|
||||
</div>
|
||||
<Progress
|
||||
percent={Math.min(Math.round((warrantyDaysLeft / 365) * 100), 100)}
|
||||
format={() => `${warrantyDaysLeft} 天`}
|
||||
strokeColor={warrantyDaysLeft < 30 ? colors.error.main : colors.primary.main}
|
||||
trailColor={colors.border.light}
|
||||
size="small"
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Card>
|
||||
)}
|
||||
{isWarrantyExpired && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: '16px',
|
||||
padding: '12px',
|
||||
backgroundColor: colors.error.bg,
|
||||
borderRadius: borderRadius.medium,
|
||||
border: `1px solid ${colors.error.main}30`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<ExclamationCircleOutlined style={{ color: colors.error.main, fontSize: '18px' }} />
|
||||
<span style={{ color: colors.error.main, fontSize: '13px', fontWeight: 500 }}>
|
||||
设备已过保，建议续保
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</InfoCard>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: '20px 32px',
|
||||
borderTop: `1px solid ${colors.border.light}`,
|
||||
background: colors.background.primary,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<Button
|
||||
className="action-btn"
|
||||
icon={<FileTextOutlined />}
|
||||
onClick={() => onViewTickets(device)}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: borderRadius.medium,
|
||||
border: `1px solid ${colors.border.light}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
查看工单
|
||||
</Button>
|
||||
<Button
|
||||
className="action-btn"
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => onCreateTicket(device)}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: borderRadius.medium,
|
||||
background: colors.primary.gradient,
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontWeight: 500,
|
||||
boxShadow: shadows.small,
|
||||
}}
|
||||
>
|
||||
创建工单
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: borderRadius.medium,
|
||||
border: `1px solid ${colors.border.light}`,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
<Button
|
||||
className="action-btn"
|
||||
type="primary"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
onEdit(device);
|
||||
}}
|
||||
style={{
|
||||
height: '40px',
|
||||
borderRadius: borderRadius.medium,
|
||||
background: colors.primary.gradient,
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontWeight: 500,
|
||||
boxShadow: shadows.small,
|
||||
}}
|
||||
>
|
||||
编辑设备
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -347,8 +347,8 @@ function ConsumableManagement() {
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/consumables', {
|
||||
params: { keyword, category, status, pageSize: 1000 },
|
||||
const response = await axios.get('/api/consumables/export', {
|
||||
params: { keyword, category, status },
|
||||
});
|
||||
const consumables = response.data.consumables;
|
||||
exportToCSV(consumables, `consumables_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
|
||||
@@ -193,9 +193,7 @@ function DeviceManagement() {
|
||||
|
||||
const fetchRacks = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/racks', {
|
||||
params: { pageSize: 1000 },
|
||||
});
|
||||
const response = await axios.get('/api/racks/all');
|
||||
setRacks(response.data.racks || []);
|
||||
} catch (error) {
|
||||
message.error('获取机柜列表失败');
|
||||
|
||||
@@ -18,17 +18,19 @@ import CloseButton from '../components/CloseButton';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const OptionsEditor = ({ value = [], onChange }) => {
|
||||
const OptionsEditor = ({ value, onChange }) => {
|
||||
const options = Array.isArray(value) ? value : [];
|
||||
|
||||
const handleAdd = () => {
|
||||
onChange([...value, { value: '', label: '' }]);
|
||||
onChange([...options, { value: '', label: '' }]);
|
||||
};
|
||||
|
||||
const handleRemove = index => {
|
||||
onChange(value.filter((_, i) => i !== index));
|
||||
onChange(options.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleUpdate = (index, field, fieldValue) => {
|
||||
const newOptions = value.map((opt, i) =>
|
||||
const newOptions = options.map((opt, i) =>
|
||||
i === index ? { ...opt, [field]: fieldValue } : opt
|
||||
);
|
||||
onChange(newOptions);
|
||||
@@ -62,7 +64,7 @@ const OptionsEditor = ({ value = [], onChange }) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{value.length === 0 ? (
|
||||
{options.length === 0 ? (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '24px',
|
||||
@@ -153,7 +155,7 @@ const OptionsEditor = ({ value = [], onChange }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{value.length > 0 && (
|
||||
{options.length > 0 && (
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusCircleOutlined />}
|
||||
|
||||
@@ -139,6 +139,20 @@ const DEFAULT_TICKET_FIELDS = [
|
||||
{ value: 'urgent', label: '紧急' },
|
||||
],
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
displayName: '状态',
|
||||
fieldType: 'select',
|
||||
required: false,
|
||||
order: 6.5,
|
||||
visible: true,
|
||||
options: [
|
||||
{ value: 'pending', label: '待处理' },
|
||||
{ value: 'in_progress', label: '处理中' },
|
||||
{ value: 'completed', label: '已完成' },
|
||||
{ value: 'closed', label: '已关闭' },
|
||||
],
|
||||
},
|
||||
{
|
||||
fieldName: 'description',
|
||||
displayName: '故障描述',
|
||||
@@ -255,7 +269,7 @@ function TicketManagement() {
|
||||
});
|
||||
|
||||
const [searchFilters, setSearchFilters] = useState({});
|
||||
const [deviceSource, setDeviceSource] = useState('select');
|
||||
const [manualDeviceSource, setManualDeviceSource] = useState(false);
|
||||
const [ticketFields, setTicketFields] = useState(DEFAULT_TICKET_FIELDS);
|
||||
const [loadingFields, setLoadingFields] = useState(true);
|
||||
const [deviceFields, setDeviceFields] = useState([]);
|
||||
@@ -302,11 +316,11 @@ function TicketManagement() {
|
||||
const fetchDevices = useCallback(async (keyword = '') => {
|
||||
try {
|
||||
setDeviceSearching(true);
|
||||
const params = { pageSize: 50 };
|
||||
const params = {};
|
||||
if (keyword && keyword.trim()) {
|
||||
params.keyword = keyword.trim();
|
||||
}
|
||||
const response = await axios.get('/api/devices', { params });
|
||||
const response = await axios.get('/api/devices/all', { params });
|
||||
setDevices(response.data.devices || []);
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error);
|
||||
@@ -344,8 +358,34 @@ function TicketManagement() {
|
||||
try {
|
||||
setLoadingFields(true);
|
||||
const response = await axios.get('/api/ticket-fields');
|
||||
const sortedFields = response.data.sort((a, b) => a.order - b.order);
|
||||
setTicketFields(sortedFields);
|
||||
const dbFields = response.data.sort((a, b) => a.order - b.order);
|
||||
|
||||
const isValidOptions = (opts) => {
|
||||
if (!opts) return false;
|
||||
if (!Array.isArray(opts)) return false;
|
||||
if (opts.length === 0) return false;
|
||||
return opts.some(opt => opt && opt.value !== undefined && opt.value !== null && opt.value !== '');
|
||||
};
|
||||
|
||||
const mergedFields = DEFAULT_TICKET_FIELDS.map(defaultField => {
|
||||
const dbField = dbFields.find(f => f.fieldName === defaultField.fieldName);
|
||||
if (dbField) {
|
||||
return {
|
||||
...defaultField,
|
||||
...dbField,
|
||||
options: isValidOptions(dbField.options) ? dbField.options : defaultField.options,
|
||||
};
|
||||
}
|
||||
return defaultField;
|
||||
});
|
||||
|
||||
dbFields.forEach(dbField => {
|
||||
if (!DEFAULT_TICKET_FIELDS.some(f => f.fieldName === dbField.fieldName)) {
|
||||
mergedFields.push(dbField);
|
||||
}
|
||||
});
|
||||
|
||||
setTicketFields(mergedFields);
|
||||
} catch (error) {
|
||||
console.error('获取工单字段配置失败:', error);
|
||||
setTicketFields(DEFAULT_TICKET_FIELDS);
|
||||
@@ -378,12 +418,9 @@ function TicketManagement() {
|
||||
// 处理从设备详情页跳转过来创建工单的情况
|
||||
useEffect(() => {
|
||||
if (urlDeviceId && devices.length > 0 && urlCreate === 'true') {
|
||||
// 自动打开创建工单弹窗
|
||||
setEditingTicket(null);
|
||||
setDeviceSource('select');
|
||||
setModalVisible(true);
|
||||
|
||||
// 填充设备信息 - 使用 setTimeout 确保弹窗打开后再设置表单值
|
||||
setTimeout(() => {
|
||||
form.setFieldsValue({
|
||||
deviceId: urlDeviceId,
|
||||
@@ -418,34 +455,35 @@ function TicketManagement() {
|
||||
let formItem;
|
||||
switch (fieldType) {
|
||||
case 'string':
|
||||
formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
|
||||
formItem = <Input placeholder={placeholder || `请输入${displayName}`} size="large" />;
|
||||
break;
|
||||
case 'number':
|
||||
formItem = (
|
||||
<InputNumber
|
||||
placeholder={placeholder || `请输入${displayName}`}
|
||||
style={{ width: '100%' }}
|
||||
size="large"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'textarea':
|
||||
formItem = (
|
||||
<Input.TextArea rows={3} placeholder={placeholder || `请输入${displayName}`} />
|
||||
<Input.TextArea rows={3} placeholder={placeholder || `请输入${displayName}`} showCount />
|
||||
);
|
||||
break;
|
||||
case 'boolean':
|
||||
formItem = <Switch />;
|
||||
break;
|
||||
case 'date':
|
||||
formItem = <DatePicker style={{ width: '100%' }} />;
|
||||
formItem = <DatePicker style={{ width: '100%' }} size="large" />;
|
||||
break;
|
||||
case 'datetime':
|
||||
formItem = <DatePicker showTime style={{ width: '100%' }} />;
|
||||
formItem = <DatePicker showTime style={{ width: '100%' }} size="large" />;
|
||||
break;
|
||||
case 'select':
|
||||
const selectOptions = options && Array.isArray(options) ? options : [];
|
||||
formItem = (
|
||||
<Select placeholder={placeholder || `请选择${displayName}`}>
|
||||
<Select placeholder={placeholder || `请选择${displayName}`} size="large">
|
||||
{selectOptions.map((opt, idx) => (
|
||||
<Option key={idx} value={opt.value}>
|
||||
{opt.label}
|
||||
@@ -469,6 +507,7 @@ function TicketManagement() {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
@@ -479,11 +518,17 @@ function TicketManagement() {
|
||||
);
|
||||
break;
|
||||
default:
|
||||
formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
|
||||
formItem = <Input placeholder={placeholder || `请输入${displayName}`} size="large" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Form.Item key={fieldName} name={fieldName} label={displayName} rules={rules}>
|
||||
<Form.Item
|
||||
key={fieldName}
|
||||
name={fieldName}
|
||||
label={<span style={{ fontWeight: 500 }}>{displayName}</span>}
|
||||
rules={rules}
|
||||
valuePropName={fieldType === 'boolean' ? 'checked' : undefined}
|
||||
>
|
||||
{formItem}
|
||||
</Form.Item>
|
||||
);
|
||||
@@ -596,6 +641,7 @@ function TicketManagement() {
|
||||
const showModal = useCallback((ticket = null) => {
|
||||
setEditingTicket(ticket);
|
||||
if (ticket) {
|
||||
setManualDeviceSource(!ticket.deviceId);
|
||||
const ticketData = { ...ticket };
|
||||
if (ticketData.expectedCompletionDate) {
|
||||
ticketData.expectedCompletionDate = dayjs(ticketData.expectedCompletionDate);
|
||||
@@ -603,14 +649,6 @@ function TicketManagement() {
|
||||
if (ticketData.completionDate) {
|
||||
ticketData.completionDate = dayjs(ticketData.completionDate);
|
||||
}
|
||||
if (ticket.deviceId) {
|
||||
setDeviceSource('select');
|
||||
ticketData.deviceId = ticket.deviceId;
|
||||
} else {
|
||||
setDeviceSource('manual');
|
||||
ticketData.deviceName = ticket.deviceName;
|
||||
ticketData.serialNumber = ticket.serialNumber;
|
||||
}
|
||||
if (ticket.metadata && typeof ticket.metadata === 'object') {
|
||||
Object.entries(ticket.metadata).forEach(([key, value]) => {
|
||||
ticketData[key] = value;
|
||||
@@ -618,8 +656,8 @@ function TicketManagement() {
|
||||
}
|
||||
form.setFieldsValue(ticketData);
|
||||
} else {
|
||||
setManualDeviceSource(false);
|
||||
form.resetFields();
|
||||
setDeviceSource('select');
|
||||
const newTicketId = generateTicketId();
|
||||
form.setFieldsValue({ ticketId: newTicketId });
|
||||
}
|
||||
@@ -654,9 +692,9 @@ function TicketManagement() {
|
||||
}
|
||||
});
|
||||
|
||||
if (deviceSource === 'manual') {
|
||||
if (manualDeviceSource) {
|
||||
ticketData.deviceId = null;
|
||||
ticketData.deviceName = values.deviceName;
|
||||
ticketData.deviceName = values.deviceName || '未知设备';
|
||||
ticketData.serialNumber = values.serialNumber;
|
||||
} else {
|
||||
const selectedDevice = devices.find(d => d.deviceId === values.deviceId);
|
||||
@@ -680,13 +718,12 @@ function TicketManagement() {
|
||||
setModalVisible(false);
|
||||
fetchTickets();
|
||||
setEditingTicket(null);
|
||||
setDeviceSource('select');
|
||||
} catch (error) {
|
||||
message.error(editingTicket ? '工单更新失败' : '工单创建失败');
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
[editingTicket, fetchTickets, deviceSource, ticketFields, devices]
|
||||
[editingTicket, fetchTickets, ticketFields, devices, manualDeviceSource]
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(
|
||||
@@ -779,57 +816,6 @@ function TicketManagement() {
|
||||
[fetchTickets, searchFilters]
|
||||
);
|
||||
|
||||
const handleDeviceSourceChange = useCallback(value => {
|
||||
setDeviceSource(value);
|
||||
}, []);
|
||||
|
||||
const renderDeviceFormItems = useCallback(() => {
|
||||
if (deviceSource === 'select') {
|
||||
return (
|
||||
<Form.Item name="deviceId" label="关联设备" rules={[{ required: false }]}>
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
|
||||
showSearch
|
||||
allowClear
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
name="deviceName"
|
||||
label="设备名称"
|
||||
rules={[{ required: true, message: '请输入设备名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="serialNumber"
|
||||
label="设备序列号"
|
||||
rules={[{ required: true, message: '请输入设备序列号' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备序列号" />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}, [deviceSource, devices, deviceSearching, handleDeviceSearch, fetchDevices]);
|
||||
|
||||
const renderFormItems = useCallback(() => {
|
||||
const items = [];
|
||||
if (!editingTicket) {
|
||||
@@ -839,84 +825,181 @@ function TicketManagement() {
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
|
||||
// 检查 ticketFields 是否包含 deviceId
|
||||
|
||||
const hasDeviceIdField = ticketFields.some(f => f.fieldName === 'deviceId');
|
||||
const hasDeviceNameField = ticketFields.some(f => f.fieldName === 'deviceName');
|
||||
|
||||
|
||||
ticketFields.forEach(field => {
|
||||
if (field.fieldName === 'ticketId') {
|
||||
// 已处理
|
||||
} else if (field.fieldName === 'deviceId') {
|
||||
// 渲染设备选择器
|
||||
items.push(
|
||||
<React.Fragment key="deviceSource">
|
||||
<Form.Item label="设备来源" required>
|
||||
<Select
|
||||
value={deviceSource}
|
||||
onChange={handleDeviceSourceChange}
|
||||
value={manualDeviceSource ? 'manual' : 'select'}
|
||||
onChange={val => setManualDeviceSource(val === 'manual')}
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
<Option value="select">从设备管理选择</Option>
|
||||
<Option value="manual">手动输入</Option>
|
||||
<Option value="select">从设备列表选择</Option>
|
||||
<Option value="manual">手动输入序列号</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
{renderDeviceFormItems()}
|
||||
{manualDeviceSource ? (
|
||||
<>
|
||||
<Form.Item
|
||||
name="serialNumber"
|
||||
label="设备序列号"
|
||||
rules={[{ required: true, message: '请输入设备序列号' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备序列号" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="deviceName"
|
||||
label="设备名称"
|
||||
rules={[{ required: false, message: '请输入设备名称（选填）' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备名称（选填）" />
|
||||
</Form.Item>
|
||||
</>
|
||||
) : (
|
||||
<Form.Item
|
||||
name="deviceId"
|
||||
label="关联设备"
|
||||
rules={[{ required: true, message: '请选择关联设备' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
|
||||
showSearch
|
||||
allowClear
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
} else if (field.fieldName === 'deviceName' || field.fieldName === 'serialNumber') {
|
||||
// 如果存在 deviceId 字段，这些字段会在 renderDeviceFormItems 中处理
|
||||
// 如果不存在 deviceId 字段但存在 deviceName，则显示手动输入模式
|
||||
if (!hasDeviceIdField && field.fieldName === 'deviceName') {
|
||||
items.push(
|
||||
<React.Fragment key="deviceSource">
|
||||
<Form.Item label="设备来源" required>
|
||||
<Select
|
||||
value={deviceSource}
|
||||
onChange={handleDeviceSourceChange}
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
<Option value="select">从设备管理选择</Option>
|
||||
<Option value="manual">手动输入</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
{renderDeviceFormItems()}
|
||||
</React.Fragment>
|
||||
<Form.Item
|
||||
key="deviceId"
|
||||
name="deviceId"
|
||||
label="关联设备"
|
||||
rules={[{ required: true, message: '请选择关联设备' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
|
||||
showSearch
|
||||
allowClear
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
items.push(renderFormItem(field));
|
||||
}
|
||||
});
|
||||
|
||||
// 如果 ticketFields 中既没有 deviceId 也没有 deviceName，则手动添加设备选择器
|
||||
|
||||
if (!hasDeviceIdField && !hasDeviceNameField) {
|
||||
items.push(
|
||||
<React.Fragment key="deviceSource">
|
||||
<Form.Item label="设备来源" required>
|
||||
<Select
|
||||
value={deviceSource}
|
||||
onChange={handleDeviceSourceChange}
|
||||
value={manualDeviceSource ? 'manual' : 'select'}
|
||||
onChange={val => setManualDeviceSource(val === 'manual')}
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
<Option value="select">从设备管理选择</Option>
|
||||
<Option value="manual">手动输入</Option>
|
||||
<Option value="select">从设备列表选择</Option>
|
||||
<Option value="manual">手动输入序列号</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
{renderDeviceFormItems()}
|
||||
{manualDeviceSource ? (
|
||||
<>
|
||||
<Form.Item
|
||||
name="serialNumber"
|
||||
label="设备序列号"
|
||||
rules={[{ required: true, message: '请输入设备序列号' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备序列号" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="deviceName"
|
||||
label="设备名称"
|
||||
rules={[{ required: false, message: '请输入设备名称（选填）' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备名称（选填）" />
|
||||
</Form.Item>
|
||||
</>
|
||||
) : (
|
||||
<Form.Item
|
||||
name="deviceId"
|
||||
label="关联设备"
|
||||
rules={[{ required: true, message: '请选择关联设备' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
|
||||
showSearch
|
||||
allowClear
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return items;
|
||||
}, [
|
||||
ticketFields,
|
||||
deviceSource,
|
||||
devices,
|
||||
handleDeviceSourceChange,
|
||||
renderDeviceFormItems,
|
||||
renderFormItem,
|
||||
deviceSearching,
|
||||
handleDeviceSearch,
|
||||
fetchDevices,
|
||||
editingTicket,
|
||||
renderFormItem,
|
||||
manualDeviceSource,
|
||||
]);
|
||||
|
||||
const getActionItems = useCallback(
|
||||
@@ -1046,23 +1129,354 @@ function TicketManagement() {
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingTicket ? '编辑工单' : '创建工单'}
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
}}>
|
||||
<PlusOutlined />
|
||||
</div>
|
||||
<span style={{ fontWeight: 600, fontSize: 18 }}>
|
||||
{editingTicket ? '编辑工单' : '创建工单'}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
open={modalVisible}
|
||||
closeIcon={<CloseButton />}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={700}
|
||||
width={800}
|
||||
destroyOnClose
|
||||
style={{ top: 40 }}
|
||||
bodyStyle={{ padding: '24px 24px 8px 24px' }}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
||||
{renderFormItems()}
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
{editingTicket ? '更新' : '创建'}
|
||||
</Button>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
requiredMark="optional"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
{!editingTicket && (
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%)',
|
||||
border: '1px solid #e8eaff',
|
||||
borderRadius: 12,
|
||||
padding: '12px 16px',
|
||||
marginBottom: 20,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
}}>
|
||||
<div style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 8,
|
||||
background: '#667eea',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
TKT
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, color: '#666', marginBottom: 2 }}>工单编号（自动生成）</div>
|
||||
<Form.Item name="ticketId" noStyle>
|
||||
<Input
|
||||
disabled
|
||||
placeholder="点击创建后自动生成"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
fontWeight: 600,
|
||||
color: '#333',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: '0 24px',
|
||||
}}>
|
||||
<div style={{ gridColumn: '1 / -1', marginBottom: 8 }}>
|
||||
<div style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: '#333',
|
||||
marginBottom: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}>
|
||||
<span style={{
|
||||
width: 4,
|
||||
height: 16,
|
||||
background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: 2,
|
||||
display: 'inline-block',
|
||||
}} />
|
||||
设备信息
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
const hasDeviceIdField = ticketFields.some(f => f.fieldName === 'deviceId');
|
||||
const hasDeviceNameField = ticketFields.some(f => f.fieldName === 'deviceName');
|
||||
|
||||
const renderDeviceSection = () => (
|
||||
<React.Fragment>
|
||||
<div style={{ gridColumn: '1 / -1', marginBottom: 16 }}>
|
||||
<Form.Item
|
||||
label={<span style={{ fontWeight: 500 }}>设备来源</span>}
|
||||
name="deviceSource"
|
||||
initialValue="select"
|
||||
>
|
||||
<Select
|
||||
value={manualDeviceSource ? 'manual' : 'select'}
|
||||
onChange={val => setManualDeviceSource(val === 'manual')}
|
||||
style={{ width: '100%' }}
|
||||
size="large"
|
||||
>
|
||||
<Option value="select">从设备列表选择</Option>
|
||||
<Option value="manual">手动输入序列号</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
{manualDeviceSource ? (
|
||||
<>
|
||||
<div>
|
||||
<Form.Item
|
||||
name="serialNumber"
|
||||
label={<span style={{ fontWeight: 500 }}>设备序列号 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请输入设备序列号' }]}
|
||||
>
|
||||
<Input placeholder="请输入设备序列号" size="large" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div>
|
||||
<Form.Item
|
||||
name="deviceName"
|
||||
label={<span style={{ fontWeight: 500 }}>设备名称</span>}
|
||||
>
|
||||
<Input placeholder="请输入设备名称（选填）" size="large" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<Form.Item
|
||||
name="deviceId"
|
||||
label={<span style={{ fontWeight: 500 }}>关联设备 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请选择关联设备' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="输入关键词搜索设备（序列号/名称/IP等）"
|
||||
showSearch
|
||||
allowClear
|
||||
loading={deviceSearching}
|
||||
filterOption={false}
|
||||
onSearch={handleDeviceSearch}
|
||||
notFoundContent={deviceSearching ? '搜索中...' : '请输入关键词搜索'}
|
||||
onDropdownVisibleChange={open => {
|
||||
if (open && devices.length === 0) {
|
||||
fetchDevices();
|
||||
}
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
{devices.map(device => (
|
||||
<Option key={device.deviceId} value={device.deviceId}>
|
||||
{device.name} {device.serialNumber ? `- ${device.serialNumber}` : ''}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
if (hasDeviceIdField) {
|
||||
return renderDeviceSection();
|
||||
} else if (hasDeviceNameField) {
|
||||
if (!ticketFields.some(f => f.fieldName === 'deviceId')) {
|
||||
return (
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
{renderDeviceSection()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return renderDeviceSection();
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
|
||||
<div style={{ gridColumn: '1 / -1', marginBottom: 8, marginTop: 8 }}>
|
||||
<div style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: '#333',
|
||||
marginBottom: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}>
|
||||
<span style={{
|
||||
width: 4,
|
||||
height: 16,
|
||||
background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: 2,
|
||||
display: 'inline-block',
|
||||
}} />
|
||||
工单信息
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ticketFields.filter(f =>
|
||||
!['ticketId', 'deviceId', 'deviceName', 'serialNumber', 'expectedCompletionDate', 'resolution', 'notes', 'description'].includes(f.fieldName)
|
||||
).map(field => (
|
||||
<div key={field.fieldName}>
|
||||
{renderFormItem(field)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<Form.Item
|
||||
name="title"
|
||||
label={<span style={{ fontWeight: 500 }}>工单标题 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请输入工单标题' }]}
|
||||
>
|
||||
<Input placeholder="请输入工单标题" size="large" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Form.Item
|
||||
name="faultCategory"
|
||||
label={<span style={{ fontWeight: 500 }}>故障分类 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请选择故障分类' }]}
|
||||
>
|
||||
<Select placeholder="请选择故障分类" size="large">
|
||||
{categories.map(cat => (
|
||||
<Option key={cat.categoryId} value={cat.name}>
|
||||
{cat.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Form.Item
|
||||
name="priority"
|
||||
label={<span style={{ fontWeight: 500 }}>优先级 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请选择优先级' }]}
|
||||
initialValue="medium"
|
||||
>
|
||||
<Select placeholder="请选择优先级" size="large">
|
||||
<Option value="low">
|
||||
<Tag color="green" style={{ margin: 0 }}>低</Tag>
|
||||
</Option>
|
||||
<Option value="medium">
|
||||
<Tag color="orange" style={{ margin: 0 }}>中</Tag>
|
||||
</Option>
|
||||
<Option value="high">
|
||||
<Tag color="red" style={{ margin: 0 }}>高</Tag>
|
||||
</Option>
|
||||
<Option value="urgent">
|
||||
<Tag color="magenta" style={{ margin: 0 }}>紧急</Tag>
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Form.Item
|
||||
name="expectedCompletionDate"
|
||||
label={<span style={{ fontWeight: 500 }}>期望完成时间</span>}
|
||||
>
|
||||
<DatePicker
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
style={{ width: '100%' }}
|
||||
size="large"
|
||||
placeholder="选择期望完成时间"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<Form.Item
|
||||
name="description"
|
||||
label={<span style={{ fontWeight: 500 }}>故障描述 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请输入故障描述' }]}
|
||||
>
|
||||
<TextArea
|
||||
rows={4}
|
||||
placeholder="请详细描述故障现象、发生时间、影响范围等信息"
|
||||
showCount
|
||||
maxLength={500}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: '1 / -1', marginTop: 8 }}>
|
||||
<Form.Item
|
||||
name="notes"
|
||||
label={<span style={{ fontWeight: 500 }}>备注信息</span>}
|
||||
>
|
||||
<TextArea
|
||||
rows={2}
|
||||
placeholder="补充说明或其他相关信息（选填）"
|
||||
showCount
|
||||
maxLength={200}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
borderTop: '1px solid #f0f0f0',
|
||||
marginTop: 24,
|
||||
paddingTop: 20,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 12,
|
||||
}}>
|
||||
<Button onClick={handleCancel} size="large" style={{ minWidth: 100 }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
style={{
|
||||
minWidth: 120,
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
{editingTicket ? '更新工单' : '创建工单'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Card, Row, Col, Statistic, Table, DatePicker, Select, Space, Tag, message } from 'antd';
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import { Card, Row, Col, Statistic, Table, DatePicker, Select, Space, Tag, message, Button, Switch, Tooltip } from 'antd';
|
||||
import {
|
||||
BarChartOutlined,
|
||||
PieChartOutlined,
|
||||
@@ -8,6 +8,8 @@ import {
|
||||
ClockCircleOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
ReloadOutlined,
|
||||
SyncOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -15,6 +17,8 @@ import dayjs from 'dayjs';
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Option } = Select;
|
||||
|
||||
const REFRESH_INTERVAL = 30000;
|
||||
|
||||
const getStatusColor = status => {
|
||||
const colors = {
|
||||
pending: 'orange',
|
||||
@@ -59,7 +63,9 @@ const getPriorityText = priority => {
|
||||
|
||||
function TicketStatistics() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [dateRange, setDateRange] = useState([dayjs().subtract(30, 'days'), dayjs()]);
|
||||
const [lastUpdateTime, setLastUpdateTime] = useState(null);
|
||||
const [statistics, setStatistics] = useState({
|
||||
total: 0,
|
||||
pending: 0,
|
||||
@@ -74,16 +80,21 @@ function TicketStatistics() {
|
||||
trend: [],
|
||||
});
|
||||
|
||||
const fetchStatistics = useCallback(async () => {
|
||||
const timerRef = useRef(null);
|
||||
|
||||
const fetchStatistics = useCallback(async (isManual = false) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
if (isManual) {
|
||||
setLoading(true);
|
||||
}
|
||||
const params = {
|
||||
startDate: dateRange[0].format('YYYY-MM-DD'),
|
||||
endDate: dateRange[1].format('YYYY-MM-DD'),
|
||||
};
|
||||
|
||||
const response = await axios.get('/api/tickets/statistics', { params });
|
||||
const response = await axios.get('/api/tickets/stats', { params });
|
||||
setStatistics(response.data);
|
||||
setLastUpdateTime(new Date());
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
console.error('获取统计数据失败:', error);
|
||||
@@ -96,12 +107,34 @@ function TicketStatistics() {
|
||||
fetchStatistics();
|
||||
}, [fetchStatistics]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoRefresh) {
|
||||
timerRef.current = setInterval(() => {
|
||||
fetchStatistics();
|
||||
}, REFRESH_INTERVAL);
|
||||
} else {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
}
|
||||
};
|
||||
}, [autoRefresh, fetchStatistics]);
|
||||
|
||||
const handleDateChange = useCallback(dates => {
|
||||
if (dates) {
|
||||
setDateRange(dates);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleManualRefresh = useCallback(() => {
|
||||
fetchStatistics(true);
|
||||
}, [fetchStatistics]);
|
||||
|
||||
const getStatusColor = status => {
|
||||
const colors = {
|
||||
pending: 'orange',
|
||||
@@ -296,6 +329,23 @@ function TicketStatistics() {
|
||||
title="工单统计报表"
|
||||
extra={
|
||||
<Space>
|
||||
<Tooltip title={lastUpdateTime ? `最后更新: ${dayjs(lastUpdateTime).format('HH:mm:ss')}` : '尚未更新'}>
|
||||
<span style={{ fontSize: 12, color: '#888', marginRight: 8 }}>
|
||||
{lastUpdateTime && `更新于 ${dayjs(lastUpdateTime).format('HH:mm:ss')}`}
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="自动刷新（每30秒）">
|
||||
<Switch
|
||||
checked={autoRefresh}
|
||||
onChange={setAutoRefresh}
|
||||
checkedChildren={<SyncOutlined spin={autoRefresh} />}
|
||||
unCheckedChildren={<SyncOutlined />}
|
||||
size="small"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button icon={<ReloadOutlined />} onClick={handleManualRefresh} size="small">
|
||||
刷新
|
||||
</Button>
|
||||
<RangePicker value={dateRange} onChange={handleDateChange} allowClear={false} />
|
||||
</Space>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user