|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
|
import { Card, Result, Select, Button, Segmented, Progress, Input } from 'antd';
|
|
|
|
|
|
import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
|
|
|
import styles from './DataAnalysisWarning.less';
|
|
|
|
|
|
|
|
|
|
|
|
import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
|
|
|
|
|
|
import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
|
|
|
|
|
|
import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
|
|
|
|
|
|
import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png';
|
|
|
|
|
|
import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
|
|
|
|
|
|
import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
|
|
|
|
|
|
import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png';
|
|
|
|
|
|
import eqicon1 from '@/assets/business_basic/eqicon1.png';
|
|
|
|
|
|
import eqicon2 from '@/assets/business_basic/eqicon2.png';
|
|
|
|
|
|
import eqicon3 from '@/assets/business_basic/eqicon3.png';
|
|
|
|
|
|
import eqicon4 from '@/assets/business_basic/eqicon4.png';
|
|
|
|
|
|
|
|
|
|
|
|
const DataAnalysisWarning = () => {
|
|
|
|
|
|
const chartRef = useRef(null);
|
|
|
|
|
|
const pieChartRef = useRef(null);
|
|
|
|
|
|
const faultPieChartRef = useRef(null);
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
|
|
|
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
|
const [dataSource, setDataSource] = useState([]);
|
|
|
|
|
|
const [pagination, setPagination] = useState({
|
|
|
|
|
|
current: 1,
|
|
|
|
|
|
pageSize: 8,
|
|
|
|
|
|
total: 0,
|
|
|
|
|
|
});
|
|
|
|
|
|
const [searchText, setSearchText] = useState('');
|
|
|
|
|
|
|
|
|
|
|
|
// 柱状图初始化
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
if (pieChartRef.current) {
|
|
|
|
|
|
const barChart = echarts.init(pieChartRef.current);
|
|
|
|
|
|
|
|
|
|
|
|
const barOption = {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '5%',
|
|
|
|
|
|
right: '5%',
|
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
|
top: '20%',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'],
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: '#333',
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
rotate: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
max: 50,
|
|
|
|
|
|
interval: 10,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: '#666',
|
|
|
|
|
|
formatter: '{value}'
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#00001A26',
|
|
|
|
|
|
type: 'dashed'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: '使用次数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 27,
|
|
|
|
|
|
data: [35, 28, 42, 31, 38],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{ offset: 0, color: '#199BFB' },
|
|
|
|
|
|
{ offset: 1, color: '#1373FA' }
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{ offset: 0, color: '#0D7AE8' },
|
|
|
|
|
|
{ offset: 1, color: '#0F5BC7' }
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}],
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
top: '5%',
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
itemWidth: 15,
|
|
|
|
|
|
itemHeight: 3,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: '#333'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
name: '使用次数',
|
|
|
|
|
|
icon: 'rect',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#4B69F1'
|
|
|
|
|
|
}
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
},
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
return `${params[0].name}<br/>使用次数: ${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}<br/>{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 (
|
|
|
|
|
|
<span style={{
|
|
|
|
|
|
color: status.color,
|
|
|
|
|
|
backgroundColor: status.bg,
|
|
|
|
|
|
padding: '2px 8px',
|
|
|
|
|
|
borderRadius: '4px',
|
|
|
|
|
|
fontSize: '12px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
{text}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '最后维护时间',
|
|
|
|
|
|
dataIndex: 'lastMaintenance',
|
|
|
|
|
|
key: 'lastMaintenance',
|
|
|
|
|
|
width: 150,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
key: 'action',
|
|
|
|
|
|
width: 140,
|
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<Button type="link" size="small" style={{
|
|
|
|
|
|
padding: '2px 8px',
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
marginRight: 8,
|
|
|
|
|
|
border: '1px solid #E6E9FB',
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
borderRadius: '4px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
编辑
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
<Button type="link" size="small" style={{
|
|
|
|
|
|
padding: '2px 8px',
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: '#FF2526',
|
|
|
|
|
|
border: '1px solid #FFE0E2',
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
borderRadius: '4px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
删除
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟数据
|
|
|
|
|
|
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 (
|
|
|
|
|
|
<div className={styles.analysisContainer}>
|
|
|
|
|
|
{/* 第1个div - 高度39% */}
|
|
|
|
|
|
<div className={styles.analysisContainerMiddle}>
|
|
|
|
|
|
<div className={styles.analysisSectionContent}>
|
|
|
|
|
|
<div className={styles.analysisMiddleBlock1}>
|
|
|
|
|
|
<div className={styles.analysisBlock1Header}>
|
|
|
|
|
|
<div className={styles.analysisBlock1Title}>
|
|
|
|
|
|
<div className={styles.analysisTitleIcon}></div>
|
|
|
|
|
|
设备使用频率分析
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{/* 设备状态饼图 */}
|
|
|
|
|
|
<div className={styles.analysisDeviceStatusChart} ref={pieChartRef}>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.analysisMiddleBlock12}>
|
|
|
|
|
|
<div className={styles.analysisBlock1Header}>
|
|
|
|
|
|
<div className={styles.analysisBlock1Title}>
|
|
|
|
|
|
<div className={styles.analysisTitleIcon}></div>
|
|
|
|
|
|
近一年维护费用趋势
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 维护费用趋势折线图 */}
|
|
|
|
|
|
<div className={styles.analysisDeviceStatusChart} ref={faultPieChartRef}>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.analysisMiddleBlock2}>
|
|
|
|
|
|
<div className={styles.analysisMiddleBlock2Title}>
|
|
|
|
|
|
<div className={styles.analysisTitleLeft}>
|
|
|
|
|
|
<div className={styles.analysisTitleIcon}></div>
|
|
|
|
|
|
<div>设备类型占比</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMiddleBlock2Chart} ref={chartRef}>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第2个div - 占满剩余位置 */}
|
|
|
|
|
|
<div className={styles.analysisContainerBottom}>
|
|
|
|
|
|
<div className={styles.analysisSectionContent}>
|
|
|
|
|
|
<div className={styles.analysisLeftBlock}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceStack}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceSection}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceTitle}>
|
|
|
|
|
|
<div className={styles.analysisTitleIcon}></div>
|
|
|
|
|
|
<div>近期维护提醒</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceContent1}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceItem}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceLeft}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceText1}>SH-MHQ-023-C 干粉灭火器</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceText2}>位置: 4楼办公区丨维护类型: 季度检查</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceText3}>负责人: 张三</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceRight}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceStatus}>3天后到期</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceItem}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceLeft}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceText1}>SH-XHS-045-D 室内消火栓</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceText2}>位置: 2楼东侧走廊丨维护类型: 水压测试</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceText3}>负责人: 李四</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceRight2}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceStatus}>8天后到期</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceSection}>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceTitle}>
|
|
|
|
|
|
<div className={styles.analysisTitleIcon}></div>
|
|
|
|
|
|
<div>维护任务进度</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisMaintenanceContent2}>
|
|
|
|
|
|
{/* 进度条区域 */}
|
|
|
|
|
|
<div className={styles.analysisProgressSection}>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.analysisProgressLabel}>月度维护计划</div>
|
|
|
|
|
|
<Progress percent={75} status="active" />
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.analysisProgressLabel}>季度维护计划</div>
|
|
|
|
|
|
<Progress percent={60} status="active" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.analysisProgressLabel}>年度维护计划</div>
|
|
|
|
|
|
<Progress percent={85} status="active" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 警告提示框 */}
|
|
|
|
|
|
<div className={styles.analysisWarningBox}>
|
|
|
|
|
|
<ExclamationCircleOutlined className={styles.analysisWarningIcon} />
|
|
|
|
|
|
<span className={styles.analysisWarningText}>本月有5项维护任务即将到期</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles.analysisRightBlock}>
|
|
|
|
|
|
{/* 表格 */}
|
|
|
|
|
|
<div className={styles.analysisTableHeader}>
|
|
|
|
|
|
<div className={styles.analysisTableTitle}>
|
|
|
|
|
|
<div className={styles.analysisTitleIcon}></div>
|
|
|
|
|
|
<div>消防设施与器材列表</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 操作按钮 */}
|
|
|
|
|
|
<div className={styles.analysisTableActions}>
|
|
|
|
|
|
<div className={styles.analysisLeftActions}>
|
|
|
|
|
|
<Input
|
|
|
|
|
|
placeholder="搜索设备名称、编号..."
|
|
|
|
|
|
onChange={handleSearchChange}
|
|
|
|
|
|
value={searchText}
|
|
|
|
|
|
style={{ width: 250, fontSize: 12 }}
|
|
|
|
|
|
allowClear
|
|
|
|
|
|
suffix={<SearchOutlined />}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.analysisRightActions}>
|
|
|
|
|
|
<button className={styles.analysisActionButton} onClick={handleAddDevice}>
|
|
|
|
|
|
<span className={styles.analysisButtonIcon}>+</span>
|
|
|
|
|
|
<span>新增设备</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button className={styles.analysisActionButton} onClick={handleExportData}>
|
|
|
|
|
|
<span className={styles.analysisButtonIcon}><ExportOutlined /></span>
|
|
|
|
|
|
<span>导出数据</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 表格 */}
|
|
|
|
|
|
<div className={styles.analysisTableContainer}>
|
|
|
|
|
|
<StandardTable
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
data={{
|
|
|
|
|
|
list: getCurrentPageData(),
|
|
|
|
|
|
pagination: pagination
|
|
|
|
|
|
}}
|
|
|
|
|
|
loading={loading}
|
|
|
|
|
|
selectionType="checkbox"
|
|
|
|
|
|
onSelectRow={onSelectChange}
|
|
|
|
|
|
onChange={handleTableChange}
|
|
|
|
|
|
pagination={{
|
|
|
|
|
|
...pagination,
|
|
|
|
|
|
showSizeChanger: false,
|
|
|
|
|
|
showQuickJumper: true,
|
|
|
|
|
|
showTotal: (total, range) =>
|
|
|
|
|
|
`共 ${total} 条`,
|
|
|
|
|
|
}}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export default DataAnalysisWarning;
|
