setSelectedRowKeys(keys),
+ columnWidth: 44,
+ }}
+ rowClassName={(record) =>
+ record.id === selectedRuleId ? styles.selectedRow : ''
+ }
+ onRow={(record) => ({
+ onClick: () => setSelectedRuleId(record.id),
+ })}
+ />
+
+
+ );
+ }, [activeTab, columns, ruleList, selectedRowKeys, selectedRuleId]);
+
+ return (
+
+
+
+
+ }
+ >
+ {leftContent}
+
+
+
+
+
详情}
+ extra={
+
+ }
+ bodyStyle={{ padding: 16 }}
+ >
+
+
+
+
+
-
-
-
-
-
-
- {renderModule()}
-
-
-
-
-
-
-
- {renderModule()}
-
-
+
+
+
+
+
+
+
+ {renderModule()}
+
+
使用次数: ${params[0].value}`;
+ }
+ }
+ };
+
+ barChart.setOption(barOption);
+
+ // 响应式调整
+ const handleBarResize = () => {
+ if (barChart && !barChart.isDisposed()) {
+ barChart.resize();
+ }
+ };
+
+ window.addEventListener('resize', handleBarResize);
+
+ return () => {
+ window.removeEventListener('resize', handleBarResize);
+ if (barChart && !barChart.isDisposed()) {
+ barChart.dispose();
+ }
+ };
+ }
+ }, []);
+
+ // 维护费用趋势折线图初始化
+ useEffect(() => {
+ if (faultPieChartRef.current) {
+ const faultPieChart = echarts.init(faultPieChartRef.current);
+
+ const faultPieOption = {
+
+ legend: {
+ show: true,
+ top: '5%',
+ left: 'center',
+ itemWidth: 20,
+ itemHeight: 8,
+ textStyle: {
+ color: '#333',
+ fontSize: 12
+ }
+ },
+ grid: {
+ left: '5%',
+ right: '5%',
+ bottom: '10%',
+ top: '20%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+ axisLine: {
+ lineStyle: {
+ color: '#E5E5E5'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#666',
+ fontSize: 12,
+ interval: 0
+ }
+ },
+ yAxis: {
+ type: 'value',
+ min: 20000,
+ max: 30000,
+ interval: 2000,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#666',
+ fontSize: 12,
+ formatter: '¥{value}'
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#00001A26',
+ type: 'dashed'
+ }
+ }
+ },
+ series: [{
+ name: '费用',
+ type: 'line',
+ data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000],
+ smooth: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ lineStyle: {
+ color: '#1269FF',
+ width: 1
+ },
+ itemStyle: {
+ color: '#fff',
+ borderColor: '#1269FF',
+ borderWidth: 1
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(18, 105, 255, 0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(18, 105, 255, 0.05)'
+ }]
+ }
+ }
+ }]
+ };
+
+ faultPieChart.setOption(faultPieOption);
+
+ // 响应式调整
+ const handleFaultPieResize = () => {
+ if (faultPieChart && !faultPieChart.isDisposed()) {
+ faultPieChart.resize();
+ }
+ };
+
+ window.addEventListener('resize', handleFaultPieResize);
+
+ return () => {
+ window.removeEventListener('resize', handleFaultPieResize);
+ if (faultPieChart && !faultPieChart.isDisposed()) {
+ faultPieChart.dispose();
+ }
+ };
+ }
+ }, []);
+
+ useEffect(() => {
+ if (chartRef.current) {
+ const chart = echarts.init(chartRef.current);
+
+ // 强制初始化时调整大小
+ setTimeout(() => {
+ if (chart && !chart.isDisposed()) {
+ chart.resize();
+ }
+ }, 100);
+
+ const option = {
+ color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'],
+ legend: {
+ orient: 'vertical',
+ right: '2%',
+ top: 'middle',
+ itemWidth: 14,
+ itemHeight: 5,
+ textStyle: {
+ fontSize: 10,
+ color: '#666'
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}
{d}%'
+ },
+ series: [
+ {
+ name: '设备类型占比',
+ type: 'pie',
+ radius: '70%',
+ center: ['40%', '55%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 0,
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 25, name: '灭火器' },
+ { value: 30, name: '消防栓' },
+ { value: 20, name: '报警器' },
+ { value: 25, name: '烟雾探测器' }
+ ]
+ }
+ ]
+ };
+
+ chart.setOption(option);
+
+ // 响应式调整 - 使用多种方式监听容器尺寸变化
+ let resizeTimer = null;
+ const handleResize = () => {
+ // 防抖处理，避免频繁调用resize
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ resizeTimer = setTimeout(() => {
+ if (chart && !chart.isDisposed()) {
+ chart.resize();
+ }
+ }, 50); // 减少延迟时间
+ };
+
+ // 监听窗口大小变化
+ window.addEventListener('resize', handleResize);
+
+ // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
+ let resizeObserver = null;
+ if (window.ResizeObserver) {
+ resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ // 使用requestAnimationFrame确保在下一帧执行
+ requestAnimationFrame(() => {
+ handleResize();
+ });
+ }
+ });
+ resizeObserver.observe(chartRef.current);
+ }
+
+ // 额外监听父容器的尺寸变化
+ const parentContainer = chartRef.current?.parentElement;
+ let parentObserver = null;
+ if (parentContainer && window.ResizeObserver) {
+ parentObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ requestAnimationFrame(() => {
+ handleResize();
+ });
+ }
+ });
+ parentObserver.observe(parentContainer);
+ }
+
+ // 使用MutationObserver监听DOM结构变化（菜单展开收起时）
+ const mutationObserver = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (mutation.type === 'attributes' &&
+ (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
+ // 延迟执行，确保DOM更新完成
+ setTimeout(() => {
+ handleResize();
+ }, 200);
+ }
+ });
+ });
+
+ // 监听整个页面的class和style变化
+ mutationObserver.observe(document.body, {
+ attributes: true,
+ attributeFilter: ['class', 'style'],
+ subtree: true
+ });
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ if (resizeObserver) {
+ resizeObserver.disconnect();
+ }
+ if (parentObserver) {
+ parentObserver.disconnect();
+ }
+ if (mutationObserver) {
+ mutationObserver.disconnect();
+ }
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ if (chart && !chart.isDisposed()) {
+ chart.dispose();
+ }
+ };
+ }
+ }, []);
+
+ // 表格列定义
+ const columns = [
+ {
+ title: '编号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 60,
+ render: (text, record, index) => {
+ const page = pagination.current || 1;
+ const pageSize = pagination.pageSize || 8;
+ const number = (page - 1) * pageSize + index + 1;
+ return `0${number}`.slice(-2);
+ }
+ },
+ {
+ title: '设备编号',
+ dataIndex: 'deviceId',
+ key: 'deviceId',
+ width: 140,
+ },
+ {
+ title: '设备名称',
+ dataIndex: 'deviceName',
+ key: 'deviceName',
+ width: 110,
+ },
+ {
+ title: '类型',
+ dataIndex: 'modelSpec',
+ key: 'modelSpec',
+ width: 120,
+ },
+ {
+ title: '安装位置',
+ dataIndex: 'installLocation',
+ key: 'installLocation',
+ width: 100,
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 100,
+ render: (text) => {
+ const statusMap = {
+ '报废': { color: '#FF3E48', bg: '#FFE0E2' },
+ '待维修': { color: '#FF8800', bg: '#FFF3E9' },
+ '已使用': { color: '#00AAFA', bg: '#DAF3FF' },
+ '正常': { color: '#44BB5F', bg: '#D8F7DE' }
+ };
+ const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
+ return (
+
+ {text}
+
+ );
+ }
+ },
+ {
+ title: '最后维护时间',
+ dataIndex: 'lastMaintenance',
+ key: 'lastMaintenance',
+ width: 150,
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 140,
+ render: (_, record) => (
+
+
+
+
+ ),
+ },
+ ];
+
+ // 模拟数据
+ const mockData = [
+ {
+ key: '1',
+ id: '001',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '干粉灭火器',
+ modelSpec: '灭火设备',
+ installLocation: '1层大厅',
+ status: '报废',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '2',
+ id: '002',
+ deviceId: 'HQ-XF-02-015',
+ deviceName: '室内消火栓',
+ modelSpec: '灭火设备',
+ installLocation: '3层东区',
+ status: '已使用',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '3',
+ id: '003',
+ deviceId: 'HQ-XF-03-007',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '4',
+ id: '004',
+ deviceId: 'HQ-XF-03-008',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下一层',
+ status: '待维修',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '5',
+ id: '005',
+ deviceId: 'HQ-XF-01-009',
+ deviceName: '干粉灭火器',
+ modelSpec: '灭火设备',
+ installLocation: '地下一层',
+ status: '报废',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '6',
+ id: '006',
+ deviceId: 'HQ-XF-01-010',
+ deviceName: '室内消火栓',
+ modelSpec: '灭火设备',
+ installLocation: '地下一层',
+ status: '已使用',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '7',
+ id: '007',
+ deviceId: 'HQ-XF-01-011',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下一层',
+ status: '待维修',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '8',
+ id: '008',
+ deviceId: 'HQ-XF-01-012',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '9',
+ id: '009',
+ deviceId: 'HQ-XF-01-013',
+ deviceName: '干粉灭火器',
+ modelSpec: '灭火设备',
+ installLocation: '地下一层',
+ status: '已使用',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '10',
+ id: '010',
+ deviceId: 'HQ-XF-01-014',
+ deviceName: '室内消火栓',
+ modelSpec: '灭火设备',
+ installLocation: '地下一层',
+ status: '待维修',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '11',
+ id: '011',
+ deviceId: 'HQ-XF-01-015',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '12',
+ id: '012',
+ deviceId: 'HQ-XF-01-016',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下一层',
+ status: '已使用',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '13',
+ id: '013',
+ deviceId: 'HQ-XF-01-017',
+ deviceName: '干粉灭火器',
+ modelSpec: '灭火设备',
+ installLocation: '2层西区',
+ status: '报废',
+ lastMaintenance: '2024-08-15',
+ },
+ {
+ key: '14',
+ id: '014',
+ deviceId: 'HQ-XF-02-018',
+ deviceName: '室内消火栓',
+ modelSpec: '灭火设备',
+ installLocation: '4层南区',
+ status: '报废',
+ lastMaintenance: '2024-07-20',
+ },
+ {
+ key: '15',
+ id: '015',
+ deviceId: 'HQ-XF-03-019',
+ deviceName: '火警报警器',
+ modelSpec: '报警设备',
+ installLocation: '地下二层',
+ status: '报废',
+ lastMaintenance: '2024-06-10',
+ },
+ {
+ key: '16',
+ id: '016',
+ deviceId: 'HQ-XF-01-020',
+ deviceName: '干粉灭火器',
+ modelSpec: '灭火设备',
+ installLocation: '5层北区',
+ status: '报废',
+ lastMaintenance: '2024-05-05',
+ },
+ ];
+
+ // 初始化数据
+ useEffect(() => {
+ setPagination(prev => ({ ...prev, total: mockData.length }));
+ }, []);
+
+ // 根据分页获取当前页数据
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const startIndex = (current - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return mockData.slice(startIndex, endIndex);
+ };
+
+ // 表格选择变化
+ const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ setSelectedRows(newSelectedRows);
+ };
+
+ // 新增设备按钮点击事件
+ const handleAddDevice = () => {
+ console.log('新增设备');
+ // TODO: 实现新增设备逻辑
+ };
+
+ // 导出数据按钮点击事件
+ const handleExportData = () => {
+ console.log('导出数据');
+ // TODO: 实现导出数据逻辑
+ };
+
+ // 分页变化处理
+ const handleTableChange = (pagination) => {
+ setPagination(prev => ({
+ ...prev,
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ }));
+ };
+
+ // 搜索处理
+ const handleSearchChange = (e) => {
+ setSearchText(e.target.value);
+ console.log('搜索:', e.target.value);
+ // TODO: 实现搜索逻辑，根据设备名称、编号等筛选数据
+ };
+
+ return (
+
+ {/* 第1个div - 高度39% */}
+
+
+
+
+
+
+
+ {/* 维护费用趋势折线图 */}
+
+
+
+
+
+
+
+
+ {/* 第2个div - 占满剩余位置 */}
+
+
+
+
+
+
+
+
+
+
SH-MHQ-023-C 干粉灭火器
+
位置: 4楼办公区丨维护类型: 季度检查
+
负责人: 张三
+
+
+
+
+
+
SH-XHS-045-D 室内消火栓
+
位置: 2楼东侧走廊丨维护类型: 水压测试
+
负责人: 李四
+
+
+
+
+
+
+
+
+ {/* 进度条区域 */}
+
+
+
月度维护计划
+
+
+
季度维护计划
+
+
+
+
年度维护计划
+
+
+
+ {/* 警告提示框 */}
+
+
+ 本月有5项维护任务即将到期
+
+
+
+
+
+
+
+
+
+ {/* 表格 */}
+
+
+
+ {/* 操作按钮 */}
+
+
+ }
+ />
+
+
+
+
+
+
+
+ {/* 表格 */}
+
+
+ `共 ${total} 条`,
+ }}
+ />
+
+
+
+
+
{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'horizontal',
+ bottom: 0,
+ left: 'center',
+ itemWidth: 14,
+ itemHeight: 4,
+ itemGap: 10,
+ textStyle: {
+ fontSize: 12,
+ color: '#333',
+ width: 100
+ },
+ formatter: function (name) {
+ return name;
+ },
+ data: (() => {
+ // 找到最长的名称长度
+ const maxLength = Math.max(...chartData.map(item => item.name.length));
+ // 将所有名称填充到相同长度
+ return chartData.map(item => {
+ const paddingLength = maxLength - item.name.length;
+ return item.name + ' '.repeat(paddingLength);
+ });
+ })()
+ },
+ series: [
+ {
+ name: '证件类型分布',
+ type: 'pie',
+ radius: ['20%', '65%'],
+ center: ['50%', '38%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 5,
+ // color:"red",/
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '16',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: (() => {
+ // 找到最长的名称长度
+ const maxLength = Math.max(...chartData.map(item => item.name.length));
+ // 将所有名称填充到相同长度
+ return chartData.map(item => ({
+ ...item,
+ name: item.name + ' '.repeat(maxLength - item.name.length)
+ }));
+ })()
+ }
+ ]
+ };
+
+ chart.setOption(option);
+
+ // 响应式处理
+ const handleResize = () => {
+ chart.resize();
+ };
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ chart.dispose();
+ };
+ }
+ }, []);
+
+ // 表格数据
+ const tableData = [
+ {
+ key: '1',
+ no: '01',
+ name: '安全生产许可证',
+ type: '资质证书',
+ id: 'HQ-XF-01-001',
+ authority: '应急管理部',
+ validUntil: '2025-09-10',
+ status: '已过期',
+ statusType: 'error'
+ },
+ {
+ key: '2',
+ no: '02',
+ name: '安全预评估报告',
+ type: '安全三同时',
+ id: 'HQ-XF-02-015',
+ authority: '第三方评估机构',
+ validUntil: '2025-09-10',
+ status: '有效',
+ statusType: 'warning'
+ },
+ {
+ key: '3',
+ no: '03',
+ name: '施工资质证书',
+ type: '资质证书',
+ id: 'HQ-XF-03-007',
+ authority: '3设计院',
+ validUntil: '2025-09-10',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '4',
+ no: '04',
+ name: '安全标准化证书',
+ type: '资质证书',
+ id: 'HQ-XF-03-007',
+ authority: '第三方评估机构',
+ validUntil: '2025-09-10',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '5',
+ no: '05',
+ name: '消防验收合格证',
+ type: '消防证书',
+ id: 'HQ-XF-05-012',
+ authority: '消防局',
+ validUntil: '2026-03-15',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '6',
+ no: '06',
+ name: '职业健康安全管理体系认证',
+ type: '管理体系认证',
+ id: 'HQ-XF-06-008',
+ authority: '认证机构',
+ validUntil: '2026-06-20',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '7',
+ no: '07',
+ name: '环境管理体系认证',
+ type: '管理体系认证',
+ id: 'HQ-XF-07-009',
+ authority: '认证机构',
+ validUntil: '2026-08-25',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '8',
+ no: '08',
+ name: '特种设备使用登记证',
+ type: '特种设备证书',
+ id: 'HQ-XF-08-011',
+ authority: '质量技术监督局',
+ validUntil: '2026-12-10',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '9',
+ no: '09',
+ name: '危险化学品经营许可证',
+ type: '经营许可证',
+ id: 'HQ-XF-09-013',
+ authority: '应急管理局',
+ validUntil: '2027-01-30',
+ status: '有效',
+ statusType: 'success'
+ },
+ {
+ key: '10',
+ no: '10',
+ name: '辐射安全许可证',
+ type: '辐射安全证书',
+ id: 'HQ-XF-10-014',
+ authority: '生态环境部',
+ validUntil: '2027-04-18',
+ status: '有效',
+ statusType: 'success'
+ }
+ ];
+
+ // 表格列定义
+ const columns = [
+ {
+ title: '编号',
+ dataIndex: 'no',
+ key: 'no',
+ width: 80,
+ },
+ {
+ title: '证照名称',
+ dataIndex: 'name',
+ key: 'name',
+ width: 150,
+ },
+ {
+ title: '类型',
+ dataIndex: 'type',
+ key: 'type',
+ width: 120,
+ },
+ {
+ title: '编号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 150,
+ },
+ {
+ title: '发证机关',
+ dataIndex: 'authority',
+ key: 'authority',
+ width: 150,
+ },
+ {
+ title: '有效期至',
+ dataIndex: 'validUntil',
+ key: 'validUntil',
+ width: 120,
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 120,
+ render: (text, record) => {
+ const getStatusStyle = (status) => {
+ if (status === '有效') {
+ return {
+ color: '#44BB5F',
+ backgroundColor: '#D8F7DE',
+ padding: '4px 8px',
+ borderRadius: '4px',
+ fontSize: '12px',
+ display: 'inline-block'
+ };
+ } else if (status === '即将到期') {
+ return {
+ color: '#FF8800',
+ backgroundColor: '#FFF3E9',
+ padding: '4px 8px',
+ borderRadius: '4px',
+ fontSize: '12px',
+ display: 'inline-block'
+ };
+ } else if (status === '已过期') {
+ return {
+ color: '#FF3E48',
+ backgroundColor: '#FFE0E2',
+ padding: '4px 8px',
+ borderRadius: '4px',
+ fontSize: '12px',
+ display: 'inline-block'
+ };
+ }
+ return {};
+ };
+
+ return (
+
+ {text}
+
+ );
+ }
+ },
+ {
+ title: '操作',
+ dataIndex: 'action',
+ key: 'action',
+ width: 120,
+ render: (text, record) => {
+ const handleEdit = (record) => {
+ console.log('编辑记录:', record);
+ };
+
+ const handleDelete = (record) => {
+ console.log('删除记录:', record);
+ };
+
+ return (
+
+
+
+
+ );
+ }
+ },
+ ];
+
+
+ return (
+
+
+
+
+
+
+
+
+ {/* 上半部分：进度条和百分比 */}
+
+
+ {/* 下半部分：数字统计 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 透明块容器 */}
+
+ {/* 四个垂直分布的卡片 */}
+
+
+
安全生产许可证
+
编号: AQXK-2023-0582
+
+
+ 15天后到期
+
+
+
+
+
+
安全评估报告
+
编号: AQPG-2023-0125
+
+
+ 30天后到期
+
+
+
+
+
+
施工资质证书
+
编号: SGZZ-2023-0089
+
+
+ 7天后到期
+
+
+
+
+
+
应急预案
+
编号: YJYA-2023-0045
+
+
+ 4天后到期
+
+
+
+
+
+
+
+
+
+ {/* 证照列表区域 */}
+
+
+
+
+ setSearchValue(e.target.value)}
+ onSearch={(value) => console.log('搜索:', value)}
+ className={styles.searchInput}
+ />
+
+
+
+
+
{ }} // ======== 行选择事件处理函数 ========
+ onChange={() => { }} // ======== 表格变化事件处理函数 ========
+ pagination={{
+ currentPage: 1,
+ pageSize: 5,
+ total: tableData.length,
+ showSizeChanger: false,
+ showQuickJumper: true,
+ showTotal: (total, range) =>
+ `共 ${total} 条`,
+ locale: {
+ jump_to: '前往',
+ page: '页',
+ items_per_page: '条/页',
+ }
+ }}
+ />
+
+
+
+
+ ),
+ },
+ ];
+
+ // 模拟数据
+ const mockData = [
+ {
+ key: '1',
+ id: '001',
+ alarmTime: '2024-01-15 08:30:25',
+ sensorName: 'LNG储罐',
+ alarmType: '温度超限',
+ alarmContent: '储罐温度超过安全阈值',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '2',
+ id: '002',
+ alarmTime: '2024-01-15 09:15:10',
+ sensorName: 'LNG储罐',
+ alarmType: '压力异常',
+ alarmContent: '管道压力异常波动',
+ priority: '中',
+ status: '处理中',
+ processTime: '2024-01-15 09:20:00',
+ processor: '张三',
+ },
+ {
+ key: '3',
+ id: '003',
+ alarmTime: '2024-01-15 10:45:30',
+ sensorName: 'LNG储罐',
+ alarmType: '液位异常',
+ alarmContent: '储罐液位低于警戒线',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 11:00:15',
+ processor: '李四',
+ },
+ {
+ key: '4',
+ id: '004',
+ alarmTime: '2024-01-15 11:20:45',
+ sensorName: 'LNG储罐',
+ alarmType: '气体泄漏',
+ alarmContent: '检测到可燃气体泄漏',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '5',
+ id: '005',
+ alarmTime: '2024-01-15 12:10:20',
+ sensorName: 'LNG储罐',
+ alarmType: '设备振动',
+ alarmContent: '设备异常振动',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 12:30:00',
+ processor: '王五',
+ },
+ {
+ key: '6',
+ id: '006',
+ alarmTime: '2024-01-15 13:25:15',
+ sensorName: 'LNG管道',
+ alarmType: '流量异常',
+ alarmContent: '管道流量异常波动',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '7',
+ id: '007',
+ alarmTime: '2024-01-15 14:10:30',
+ sensorName: 'LNG储罐',
+ alarmType: '温度异常',
+ alarmContent: '储罐温度异常升高',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 14:15:00',
+ processor: '赵六',
+ },
+ {
+ key: '8',
+ id: '008',
+ alarmTime: '2024-01-15 15:45:20',
+ sensorName: 'LNG管道',
+ alarmType: '压力超限',
+ alarmContent: '管道压力超过安全阈值',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 16:00:00',
+ processor: '孙七',
+ },
+ {
+ key: '9',
+ id: '009',
+ alarmTime: '2024-01-15 16:30:45',
+ sensorName: 'LNG储罐',
+ alarmType: '液位超限',
+ alarmContent: '储罐液位超过警戒线',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '10',
+ id: '010',
+ alarmTime: '2024-01-15 17:15:10',
+ sensorName: 'LNG管道',
+ alarmType: '泄漏检测',
+ alarmContent: '检测到轻微气体泄漏',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 17:30:00',
+ processor: '周八',
+ },
+ {
+ key: '11',
+ id: '011',
+ alarmTime: '2024-01-15 18:20:35',
+ sensorName: 'LNG储罐',
+ alarmType: '设备故障',
+ alarmContent: '储罐阀门异常关闭',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 18:25:00',
+ processor: '吴九',
+ },
+ {
+ key: '12',
+ id: '012',
+ alarmTime: '2024-01-15 19:05:50',
+ sensorName: 'LNG管道',
+ alarmType: '温度异常',
+ alarmContent: '管道温度异常下降',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ ];
+
+ // 初始化数据
+ useEffect(() => {
+ setPagination(prev => ({ ...prev, total: mockData.length }));
+ }, []);
+
+ // 根据分页获取当前页数据
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const startIndex = (current - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return mockData.slice(startIndex, endIndex);
+ };
+
+ // 表格选择变化
+ const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ setSelectedRows(newSelectedRows);
+ };
+
+ // 分页变化处理
+ const handleTableChange = (pagination) => {
+ setPagination(prev => ({
+ ...prev,
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ }));
+ };
+
+ // 导出功能
+ const handleExport = () => {
+ console.log('导出数据');
+ // 这里可以添加导出逻辑
+ };
+
+ // 批量删除功能
+ const handleBatchDelete = () => {
+ if (selectedRowKeys.length === 0) {
+ console.log('没有选中任何行');
+ // 可以在这里添加提示用户选择行的逻辑
+ return;
+ }
+ console.log('批量删除', selectedRowKeys);
+ // 这里可以添加批量删除逻辑
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
总报警
+
1456
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
一级报警
+
357
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
二级报警
+
401
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
三级报警
+
556
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+ {/* 表格 */}
+
+ {/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
+
+
+
+
+
+
+
+
+
+ {/* 表格 5行10列 带页码 每页5条数据 */}
+
+
+ `共 ${total} 条`,
+ }}
+ scroll={{ x: 1200 }}
+ />
+
+
+
+
+
+
+ );
+ }
+ }
+ ];
+
+ // 固定的假数据
+ const tableData = [
+ {
+ key: '1',
+ id: '01',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-19 14:32:15',
+ staffCount: '15人',
+ status: '正常'
+ },
+ {
+ key: '2',
+ id: '02',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-18 09:25:43',
+ staffCount: '20人',
+ status: '正常'
+ },
+ {
+ key: '3',
+ id: '03',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-17 16:48:22',
+ staffCount: '25人',
+ status: '信息不全'
+ },
+ {
+ key: '4',
+ id: '04',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-16 11:15:37',
+ staffCount: '18人',
+ status: '正常'
+ },
+ {
+ key: '5',
+ id: '05',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-15 08:42:56',
+ staffCount: '22人',
+ status: '正常'
+ },
+ {
+ key: '6',
+ id: '06',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-14 13:27:18',
+ staffCount: '16人',
+ status: '信息不全'
+ },
+ {
+ key: '7',
+ id: '07',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-13 15:33:29',
+ staffCount: '19人',
+ status: '正常'
+ },
+ {
+ key: '8',
+ id: '08',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-12 10:56:44',
+ staffCount: '21人',
+ status: '正常'
+ },
+ {
+ key: '9',
+ id: '09',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-11 17:19:52',
+ staffCount: '17人',
+ status: '信息不全'
+ },
+ {
+ key: '10',
+ id: '10',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-10 12:41:07',
+ staffCount: '23人',
+ status: '正常'
+ },
+ {
+ key: '11',
+ id: '11',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-09 14:08:33',
+ staffCount: '24人',
+ status: '正常'
+ },
+ {
+ key: '12',
+ id: '12',
+ orgCode: 'DH002',
+ orgType: '义务消防队',
+ manager: '张明',
+ department: '安全管理部',
+ createTime: '2024-12-08 16:52:14',
+ staffCount: '26人',
+ status: '信息不全'
+ }
+ ];
+
+ return (
+
+ {/* 警告提示框 */}
+
+
+
+ 有5个消防设备需要维护，3个资质证书即将到期，请及时处理。
+
+
+
+
+
+
+ {/* 第一行：标题和按钮 */}
+
+
+
+
+
+
+
+
+ {/* 第二行：图片占位 */}
+
+
+
+
+
+ {/* 第一行：标题 + 搜索栏 + 下拉选择框 */}
+
+
+ {/* 第二行：三个小块 */}
+
+
+
+
+
+ {/* 第一个块：姓名和单位 */}
+
+
+ {/* 第二个块：电话 */}
+
+
+ {/* 第三个块：身份证 */}
+
+
+ 1304************10
+
+
+ {/* 第四个块：职位标签 */}
+
+
+ {/* 第五个块：证书状态 */}
+
+
+ {/* 第六个块：操作按钮 */}
+
+
+
+
+
+
+
+ {/* 第一个块：姓名和单位 */}
+
+ 李小明
+ 消防支队
+
+
+ {/* 第二个块：电话 */}
+
+
+ {/* 第三个块：身份证 */}
+
+
+ 1304************20
+
+
+ {/* 第四个块：职位标签 */}
+
+
+ {/* 第五个块：证书状态 */}
+
+
+ {/* 第六个块：操作按钮 */}
+
+
+
+
+
+
+
+ {/* 第一个块：姓名和单位 */}
+
+ 王小红
+ 消防中队
+
+
+ {/* 第二个块：电话 */}
+
+
+ {/* 第三个块：身份证 */}
+
+
+ 1304************30
+
+
+ {/* 第四个块：职位标签 */}
+
+
+ {/* 第五个块：证书状态 */}
+
+
+ {/* 第六个块：操作按钮 */}
+
+
+
+
+
+
+
+
+
+
+ {/* 第一块：标题 */}
+
+
+ {/* 第二个大块：搜索和按钮 */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* 第三个大块：表格 */}
+
+ {}} // ======== 行选择事件处理函数 ========
+ onChange={() => {}} // ======== 表格变化事件处理函数 ========
+ pagination={{
+ currentPage: 1,
+ pageSize: 5,
+ total: tableData.length,
+ showSizeChanger: false,
+ showQuickJumper: true,
+ showTotal: (total, range) =>
+ `共 ${total} 条`,
+ locale: {
+ jump_to: '前往',
+ page: '页',
+ items_per_page: '条/页',
+ }
+ }}
+ />
+
+
+
+
+
+
+ ),
+ },
+ ];
+
+ // 模拟数据
+ const mockData = [
+ {
+ key: '1',
+ id: '001',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼1层大厅',
+ status: '故障',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '2',
+ id: '002',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼3层 东区',
+ status: '预警',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '3',
+ id: '003',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '4',
+ id: '004',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '故障',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '5',
+ id: '005',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '6',
+ id: '006',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '预警',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '7',
+ id: '007',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '故障',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '8',
+ id: '008',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '9',
+ id: '009',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '预警',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '10',
+ id: '010',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '故障',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '11',
+ id: '011',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '正常',
+ lastMaintenance: '2025-09-10',
+ },
+ {
+ key: '12',
+ id: '012',
+ deviceId: 'HQ-XF-01-001',
+ deviceName: '消防水泵',
+ modelSpec: 'XBD5.0/30-125',
+ installLocation: '总部大楼地下一层',
+ status: '预警',
+ lastMaintenance: '2025-09-10',
+ },
+ ];
+
+ // 初始化数据
+ useEffect(() => {
+ setPagination(prev => ({ ...prev, total: mockData.length }));
+ }, []);
+
+ // 根据分页获取当前页数据
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const startIndex = (current - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return mockData.slice(startIndex, endIndex);
+ };
+
+ // 表格选择变化
+ const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ setSelectedRows(newSelectedRows);
+ };
+
+ // 新增设备按钮点击事件
+ const handleAddDevice = () => {
+ console.log('新增设备');
+ // TODO: 实现新增设备逻辑
+ };
+
+ // 导出数据按钮点击事件
+ const handleExportData = () => {
+ console.log('导出数据');
+ // TODO: 实现导出数据逻辑
+ };
+
+ // 分页变化处理
+ const handleTableChange = (pagination) => {
+ setPagination(prev => ({
+ ...prev,
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ }));
+ };
+
+ return (
+
+ {/* 第一个div - 高度20% */}
+
+
+
+ {/* 块1 */}
+
+
+
+
+
+
+
+ {/* 块2 */}
+
+
+
+
+
+
+
+ {/* 块3 */}
+
+
+
+
+
+
+
+ {/* 块4 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ console.log(value);
+ }}
+ />
+
+ {/* 设备状态饼图 */}
+
+
+
+
+
+
+
+
+ {/* 设备故障类型饼图 */}
+
+
+
+
+
+
+
+
+
+
+ {/* 第三个div - 占满剩余位置 */}
+
+
+
+ {/* 第一行块 - 蓝色方块加标题 */}
+
+
+
+
+
+
灭火器压力不足
+
2号楼3层 丨 15分钟前
+
+
+
+
+
+
烟雾探测器电池低电量
+
1号楼5层 丨 1小时前
+
+
+
+
+
+
消防栓维护到期
+
3号楼1层 丨 2小时前
+
+
+
+
+
+
应急照明故障
+
地下停车场 丨 3小时前
+
+
+
+
+
+
+
+ {/* 表格 */}
+
+
+
+
+
+
+
+
+
+ {/* 表格 */}
+
+
+ `共 ${total} 条`,
+ }}
+ // scroll={{ x: 1200 }}
+ />
+
+
+
+
+
,
- key: "/topnavbar00/business/basic",
- "label": "基础信息管理"
+ key: "/topnavbar00/business/data",
+ "label": "基础数据管理"
},
+ {
+ path: '/topnavbar00/business/dataCollection',
+ icon: 
,
+ key: '/topnavbar00/business/dataCollection',
+ "label": "数据采集",
+ }
]
setMenuItems(fixedMenuItems)
// 初始化默认路由
diff --git a/src/pages/nav_system_content/SystemContentList.less b/src/pages/nav_system_content/SystemContentList.less
index 93516c5..9c6431a 100644
--- a/src/pages/nav_system_content/SystemContentList.less
+++ b/src/pages/nav_system_content/SystemContentList.less
@@ -77,11 +77,17 @@
width: 230px;
overflow-y: auto;
overflow-x: hidden;
- background-color: #2E4CD4;
+ background-color: #3900E4;
+ background-image: linear-gradient(180deg, rgba(54, 87, 255, 0.5) 0%, rgba(78, 0, 188, 0.5) 100%),
+ url('@/assets/menuBack.svg');
+ background-repeat: no-repeat, no-repeat;
+ background-position: 0 0, center bottom;
+ background-size: auto, 100% auto;
.ant-menu-inline,
.ant-menu-vertical {
- background: #2E4CD4 !important;
+ background: transparent !important;
+
}
// 默认情况字体样式和右边距
@@ -133,4 +139,4 @@
// height: 100%;
overflow: auto;
}
-}
\ No newline at end of file
+}
diff --git a/src/pages/systemMenu/SystemMenuList.js b/src/pages/systemMenu/SystemMenuList.js
index 57b49e2..dab61f2 100644
--- a/src/pages/systemMenu/SystemMenuList.js
+++ b/src/pages/systemMenu/SystemMenuList.js
@@ -3,25 +3,15 @@ import {
DeleteOutlined,
EditOutlined,
PlusOutlined,
- SearchOutlined,
- RedoOutlined,
- DownOutlined,
ExclamationCircleFilled,
- UpOutlined,
- InfoCircleFilled,
- QuestionCircleFilled,
- DownloadOutlined
} from '@ant-design/icons';
import {connect, history} from '@umijs/max';
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tree} from 'antd';
import StandardTable from '@/components/StandardTable';
-
-import { MyIcon } from "@/components/Icon"
import style from "@/global.less";
import styles from './SystemMenuList.less';
import datadictionary from "@/utils/dataDictionary";
-import {formatDate} from "@/utils/formatUtils";
-import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
+import { formatDictText, } from "@/utils/globalCommon";
const { confirm } = Modal;
diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js
index 82606cd..b77489c 100644
--- a/src/pages/topnavbar/TopNavBar.js
+++ b/src/pages/topnavbar/TopNavBar.js
@@ -9,16 +9,12 @@ import { userInfo } from '@/utils/globalCommon'
const menuItem = [
{
- label: '基础信息管理',
- key: '/topnavbar00/business/basic',
+ label: '基础数据管理',
+ key: '/topnavbar00/business/data',
},
{
- label: '消防重点部位管理',
- key: '/topnavbar00/business/firekeynotearea',
- },
- {
- label: '消防监测报警',
- key: '/topnavbar00/business/fireWarning',
+ label: "数据采集",
+ key: '/topnavbar00/business/dataCollection',
},
]