jiangxucong
/
dq-fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into main

Browse Source
main^2
jiangxucong 1 week ago
parent ed67e60122 a5406f7ded
commit 9700f526a4
3 changed files with 506 additions and 702 deletions
Show Stats Download Patch File Download Diff File

636
src/pages/business_firewarning/components/DataAnalysisWarning.js
Unescape Escape View File

@ -27,7 +27,7 @@ const DataAnalysisWarning = () => {
const [dataSource, setDataSource] = useState([]); const [dataSource, setDataSource] = useState([]);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
current: 1, current: 1,
pageSize: 8, pageSize: 5,
total: 0, total: 0,
}); });
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState('');
@ -42,12 +42,12 @@ const DataAnalysisWarning = () => {
left: '5%', left: '5%',
right: '5%', right: '5%',
bottom: '10%', bottom: '10%',
top: '20%', top: '18%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'], data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: '#333', color: '#333',
@ -64,8 +64,8 @@ const DataAnalysisWarning = () => {
yAxis: { yAxis: {
type: 'value', type: 'value',
min: 0, min: 0,
max: 50, max: 35,
interval: 10, interval: 5,
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: '#666', color: '#666',
@ -84,57 +84,71 @@ const DataAnalysisWarning = () => {
} }
} }
}, },
series: [{ series: [
name: '使用次数', {
name: '火灾报警',
type: 'bar', type: 'bar',
barWidth: 27, stack: 'total',
data: [35, 28, 42, 31, 38], barWidth: 20,
data: [12, 8, 15, 10, 18, 14, 16, 13, 11, 17, 19, 15],
itemStyle: { itemStyle: {
color: { color: '#8979FF'
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#199BFB' },
{ offset: 1, color: '#1373FA' }
]
} }
}, },
emphasis: { {
name: '故障报警',
type: 'bar',
stack: 'total',
barWidth: 20,
data: [6, 9, 7, 12, 8, 11, 9, 14, 10, 7, 8, 6],
itemStyle: { itemStyle: {
color: { color: '#FF928A'
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#0D7AE8' },
{ offset: 1, color: '#0F5BC7' }
]
} }
},
{
name: '误报',
type: 'bar',
stack: 'total',
barWidth: 20,
data: [3, 5, 4, 7, 6, 8, 5, 9, 7, 4, 6, 5],
itemStyle: {
color: '#3CC3DF'
} }
} }
}], ],
legend: { legend: {
show: true, show: true,
top: '5%', top: '8%',
left: 'center', left: 'center',
itemWidth: 15, itemWidth: 8,
itemHeight: 3, itemHeight: 8,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#333' color: '#333'
}, },
data: [{ data: [
name: '使用次数', {
name: '火灾报警',
icon: 'rect', icon: 'rect',
itemStyle: { itemStyle: {
color: '#4B69F1' color: '#8979FF'
} }
}] },
{
name: '故障报警',
icon: 'rect',
itemStyle: {
color: '#FF928A'
}
},
{
name: '误报',
icon: 'rect',
itemStyle: {
color: '#3CC3DF'
}
}
]
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -142,7 +156,11 @@ const DataAnalysisWarning = () => {
type: 'shadow' type: 'shadow'
}, },
formatter: function (params) { formatter: function (params) {
return `${params[0].name}<br/>使用次数: ${params[0].value}`; let result = `${params[0].name}<br/>`;
params.forEach(param => {
result += `${param.seriesName}: ${param.value}<br/>`;
});
return result;
} }
} }
}; };
@ -167,13 +185,12 @@ const DataAnalysisWarning = () => {
} }
}, []); }, []);
// 维护费用趋势折线图初始化 // 设备运行状态趋势折线图初始化
useEffect(() => { useEffect(() => {
if (faultPieChartRef.current) { if (faultPieChartRef.current) {
const faultPieChart = echarts.init(faultPieChartRef.current); const faultPieChart = echarts.init(faultPieChartRef.current);
const faultPieOption = { const faultPieOption = {
legend: { legend: {
show: true, show: true,
top: '5%', top: '5%',
@ -211,9 +228,9 @@ const DataAnalysisWarning = () => {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
min: 20000, min: 0,
max: 30000, max: 100,
interval: 2000, interval: 20,
axisLine: { axisLine: {
show: false show: false
}, },
@ -223,7 +240,7 @@ const DataAnalysisWarning = () => {
axisLabel: { axisLabel: {
color: '#666', color: '#666',
fontSize: 12, fontSize: 12,
formatter: '¥{value}' formatter: '{value}%'
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -232,20 +249,21 @@ const DataAnalysisWarning = () => {
} }
} }
}, },
series: [{ series: [
name: '费用', {
name: '正常运行率',
type: 'line', type: 'line',
data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000], data: [85, 78, 92, 88, 95, 90, 87, 93, 89, 91, 86, 88],
smooth: false, smooth: false,
symbol: 'circle', symbol: 'circle',
symbolSize: 6, symbolSize: 6,
lineStyle: { lineStyle: {
color: '#1269FF', color: '#3CC3DF',
width: 1 width: 1
}, },
itemStyle: { itemStyle: {
color: '#fff', color: '#FFF',
borderColor: '#1269FF', borderColor: '#3CC3DF',
borderWidth: 1 borderWidth: 1
}, },
areaStyle: { areaStyle: {
@ -257,14 +275,61 @@ const DataAnalysisWarning = () => {
y2: 1, y2: 1,
colorStops: [{ colorStops: [{
offset: 0, offset: 0,
color: 'rgba(18, 105, 255, 0.3)' color: 'rgba(60, 195, 223, 0.3)'
}, { }, {
offset: 1, offset: 1,
color: 'rgba(18, 105, 255, 0.05)' color: 'rgba(60, 195, 223, 0.05)'
}] }]
} }
} }
},
{
name: '故障率',
type: 'line',
data: [15, 22, 8, 12, 5, 10, 13, 7, 11, 9, 14, 12],
smooth: false,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
color: '#8979FF',
width: 1
},
itemStyle: {
color: '#fff',
borderColor: '#8979FF',
borderWidth: 1
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(137, 121, 255, 0.3)'
}, {
offset: 1,
color: 'rgba(137, 121, 255, 0.05)'
}] }]
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function (params) {
let result = `${params[0].name}<br/>`;
params.forEach(param => {
result += `${param.seriesName}: ${param.value}%<br/>`;
});
return result;
}
}
}; };
faultPieChart.setOption(faultPieOption); faultPieChart.setOption(faultPieOption);
@ -299,51 +364,51 @@ const DataAnalysisWarning = () => {
}, 100); }, 100);
const option = { const option = {
color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'], tooltip: {
trigger: 'item'
},
legend: { legend: {
orient: 'vertical', bottom: '4%',
right: '2%', left: 'center',
top: 'middle', itemWidth: 16,
itemWidth: 14,
itemHeight: 5, itemHeight: 5,
textStyle: { textStyle: {
fontSize: 10, fontSize: 12,
color: '#666'
} }
}, },
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{d}%'
},
series: [ series: [
{ {
name: '设备类型占比', name: '设备故障原因',
type: 'pie', type: 'pie',
radius: '70%', radius: ['20%', '65%'],
center: ['40%', '55%'], center: ['50%', '40%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
padAngle: 5,
itemStyle: { itemStyle: {
borderRadius: 0, borderRadius: 8,
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1 borderWidth: 2
}, },
label: { label: {
show: false, show: false,
position: 'center' position: 'center'
}, },
emphasis: { // emphasis: {
label: { // label: {
show: false // show: true,
} // fontSize: 40,
}, // fontWeight: 'bold'
// }
// },
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data: [
{ value: 25, name: '灭火器' }, { value: 1048, name: '环境因素（粉尘）', itemStyle: { color: '#44BB5F' } },
{ value: 30, name: '消防栓' }, { value: 735, name: '环境因素（湿度）', itemStyle: { color: '#F8C541' } },
{ value: 20, name: '报警器' }, { value: 580, name: '设备故障', itemStyle: { color: '#A493FB' } },
{ value: 25, name: '烟雾探测器' } { value: 484, name: '施工干扰', itemStyle: { color: '#4B69F1' } },
{ value: 300, name: '其他', itemStyle: { color: '#949FD0' } }
] ]
} }
] ]
@ -440,265 +505,166 @@ const DataAnalysisWarning = () => {
// 表格列定义 // 表格列定义
const columns = [ const columns = [
{ {
title: '编号', title: '序号',
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
width: 60, width: 60,
render: (text, record, index) => { render: (text, record, index) => {
const page = pagination.current || 1; const page = pagination.current || 1;
const pageSize = pagination.pageSize || 8; const pageSize = pagination.pageSize || 5;
const number = (page - 1) * pageSize + index + 1; const number = (page - 1) * pageSize + index + 1;
return `0${number}`.slice(-2); return number;
} }
}, },
{ {
title: '设备编号', title: '区域',
dataIndex: 'deviceId', dataIndex: 'area',
key: 'deviceId', key: 'area',
width: 140, width: 120,
}, },
{ {
title: '设备名称', title: '火灾报警',
dataIndex: 'deviceName', dataIndex: 'fireAlarm',
key: 'deviceName', key: 'fireAlarm',
width: 110, width: 100,
}, },
{ {
title: '类型', title: '故障报警',
dataIndex: 'modelSpec', dataIndex: 'faultAlarm',
key: 'modelSpec', key: 'faultAlarm',
width: 120, width: 100,
}, },
{ {
title: '安装位置', title: '误报',
dataIndex: 'installLocation', dataIndex: 'falseAlarm',
key: 'installLocation', key: 'falseAlarm',
width: 100, width: 100,
}, },
{ {
title: '状态', title: '总计',
dataIndex: 'status', dataIndex: 'total',
key: 'status', key: 'total',
width: 100, width: 100,
},
{
title: '同比变化',
dataIndex: 'yearOverYear',
key: 'yearOverYear',
width: 120,
render: (text) => { render: (text) => {
const statusMap = { const isPositive = text.includes('↑');
'报废': { color: '#FF3E48', bg: '#FFE0E2' }, const color = isPositive ? '#FF3E48' : '#44BB5F';
'待维修': { color: '#FF8800', bg: '#FFF3E9' }, const icon = isPositive ? '↑' : '↓';
'已使用': { color: '#00AAFA', bg: '#DAF3FF' },
'正常': { color: '#44BB5F', bg: '#D8F7DE' }
};
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
return ( return (
<span style={{ <span style={{ color }}>
color: status.color,
backgroundColor: status.bg,
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px'
}}>
{text} {text}
</span> </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 = [ const mockData = [
{ {
key: '1', key: '1',
id: '001', id: '1',
deviceId: 'HQ-XF-01-001', area: 'A栋',
deviceName: '干粉灭火器', fireAlarm: 3,
modelSpec: '灭火设备', faultAlarm: 7,
installLocation: '1层大厅', falseAlarm: 10,
status: '报废', total: 23,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 12%',
}, },
{ {
key: '2', key: '2',
id: '002', id: '2',
deviceId: 'HQ-XF-02-015', area: 'B栋',
deviceName: '室内消火栓', fireAlarm: 2,
modelSpec: '灭火设备', faultAlarm: 9,
installLocation: '3层东区', falseAlarm: 6,
status: '已使用', total: 18,
lastMaintenance: '2025-09-10', yearOverYear: '↑ 8%',
}, },
{ {
key: '3', key: '3',
id: '003', id: '3',
deviceId: 'HQ-XF-03-007', area: 'C栋',
deviceName: '火警报警器', fireAlarm: 1,
modelSpec: '报警设备', faultAlarm: 5,
installLocation: '地下一层', falseAlarm: 8,
status: '正常', total: 16,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 15%',
}, },
{ {
key: '4', key: '4',
id: '004', id: '4',
deviceId: 'HQ-XF-03-008', area: 'D栋',
deviceName: '火警报警器', fireAlarm: 0,
modelSpec: '报警设备', faultAlarm: 2,
installLocation: '地下一层', falseAlarm: 7,
status: '待维修', total: 11,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 16%',
}, },
{ {
key: '5', key: '5',
id: '005', id: '5',
deviceId: 'HQ-XF-01-009', area: 'E栋',
deviceName: '干粉灭火器', fireAlarm: 4,
modelSpec: '灭火设备', faultAlarm: 6,
installLocation: '地下一层', falseAlarm: 5,
status: '报废', total: 15,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 5%',
}, },
{ {
key: '6', key: '6',
id: '006', id: '6',
deviceId: 'HQ-XF-01-010', area: 'F栋',
deviceName: '室内消火栓', fireAlarm: 2,
modelSpec: '灭火设备', faultAlarm: 8,
installLocation: '地下一层', falseAlarm: 9,
status: '已使用', total: 19,
lastMaintenance: '2025-09-10', yearOverYear: '↑ 3%',
}, },
{ {
key: '7', key: '7',
id: '007', id: '7',
deviceId: 'HQ-XF-01-011', area: 'G栋',
deviceName: '火警报警器', fireAlarm: 1,
modelSpec: '报警设备', faultAlarm: 4,
installLocation: '地下一层', falseAlarm: 6,
status: '待维修', total: 11,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 8%',
}, },
{ {
key: '8', key: '8',
id: '008', id: '8',
deviceId: 'HQ-XF-01-012', area: 'H栋',
deviceName: '火警报警器', fireAlarm: 3,
modelSpec: '报警设备', faultAlarm: 3,
installLocation: '地下一层', falseAlarm: 4,
status: '正常', total: 10,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 20%',
}, },
{ {
key: '9', key: '9',
id: '009', id: '9',
deviceId: 'HQ-XF-01-013', area: 'I栋',
deviceName: '干粉灭火器', fireAlarm: 0,
modelSpec: '灭火设备', faultAlarm: 1,
installLocation: '地下一层', falseAlarm: 3,
status: '已使用', total: 4,
lastMaintenance: '2025-09-10', yearOverYear: '↓ 25%',
}, },
{ {
key: '10', key: '10',
id: '010', id: '10',
deviceId: 'HQ-XF-01-014', area: 'J栋',
deviceName: '室内消火栓', fireAlarm: 2,
modelSpec: '灭火设备', faultAlarm: 5,
installLocation: '地下一层', falseAlarm: 7,
status: '待维修', total: 14,
lastMaintenance: '2025-09-10', yearOverYear: '↑ 2%',
},
{
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',
}, },
]; ];
@ -751,17 +717,29 @@ const DataAnalysisWarning = () => {
return ( return (
<div className={styles.analysisContainer}> <div className={styles.analysisContainer}>
{/* 第1个div - 高度39% */}
<div className={styles.analysisContainerMiddle}> <div className={styles.analysisContainerMiddle}>
<div className={styles.analysisSectionContent}> <div className={styles.analysisSectionContent}>
<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 className={styles.analysisMiddleBlock1}> <div className={styles.analysisMiddleBlock1}>
<div className={styles.analysisBlock1Header}> <div className={styles.analysisBlock1Header}>
<div className={styles.analysisBlock1Title}> <div className={styles.analysisBlock1Title}>
<div className={styles.analysisTitleIcon}></div> <div className={styles.analysisTitleIcon}></div>
设备使用频率分析 报表统计生成
</div> </div>
</div> </div>
{/* 设备状态饼图 */}
<div className={styles.analysisDeviceStatusChart} ref={pieChartRef}> <div className={styles.analysisDeviceStatusChart} ref={pieChartRef}>
</div> </div>
</div> </div>
@ -770,43 +748,31 @@ const DataAnalysisWarning = () => {
<div className={styles.analysisBlock1Header}> <div className={styles.analysisBlock1Header}>
<div className={styles.analysisBlock1Title}> <div className={styles.analysisBlock1Title}>
<div className={styles.analysisTitleIcon}></div> <div className={styles.analysisTitleIcon}></div>
近一年维护费用趋势 设备运行状态趋势
</div> </div>
</div> </div>
{/* 维护费用趋势折线图 */}
<div className={styles.analysisDeviceStatusChart} ref={faultPieChartRef}> <div className={styles.analysisDeviceStatusChart} ref={faultPieChartRef}>
</div> </div>
</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>
</div> </div>
{/* 第2个div - 占满剩余位置 */} {/* 底部区域 */}
<div className={styles.analysisContainerBottom}> <div className={styles.analysisBottom}>
<div className={styles.analysisSectionContent}> {/* 左侧维护提醒 */}
<div className={styles.analysisLeftBlock}>
<div className={styles.analysisMaintenanceStack}>
<div className={styles.analysisMaintenanceSection}> <div className={styles.analysisMaintenanceSection}>
<div className={styles.analysisMaintenanceTitle}> <div className={styles.analysisMaintenanceTitle}>
<div className={styles.analysisTitleIcon}></div> <div className={styles.analysisTitleIcon}></div>
<div>近期维护提醒</div> <div>实时预警信息</div>
</div> </div>
<div className={styles.analysisMaintenanceContent1}> <div className={styles.analysisMaintenanceContent}>
<div className={styles.analysisMaintenanceItem}> <div className={styles.analysisMaintenanceItem}>
<div className={styles.analysisMaintenanceLeft}> <div className={styles.analysisMaintenanceLeft}>
<div className={styles.analysisMaintenanceText1}>SH-MHQ-023-C 干粉灭火器</div> <div className={styles.analysisMaintenanceText1}>电路线路过载预警</div>
<div className={styles.analysisMaintenanceText2}>位置: 4楼办公区丨维护类型: 季度检查</div> <div className={styles.analysisMaintenanceText2}>B动丨维护类型: 季度检查</div>
<div className={styles.analysisMaintenanceText3}>负责人: 张三</div> <div className={styles.analysisMaintenanceText3}>负责人: 张三</div>
</div> </div>
<div className={styles.analysisMaintenanceRight}> <div className={styles.analysisMaintenanceRight}>
@ -823,67 +789,37 @@ const DataAnalysisWarning = () => {
<div className={styles.analysisMaintenanceStatus}>8天后到期</div> <div className={styles.analysisMaintenanceStatus}>8天后到期</div>
</div> </div>
</div> </div>
<div className={styles.analysisMaintenanceItem}>
<div className={styles.analysisMaintenanceLeft}>
<div className={styles.analysisMaintenanceText1}>电路线路过载预警</div>
<div className={styles.analysisMaintenanceText2}>B动丨维护类型: 季度检查</div>
<div className={styles.analysisMaintenanceText3}>负责人: 张三</div>
</div> </div>
<div className={styles.analysisMaintenanceRight}>
<div className={styles.analysisMaintenanceStatus}>3天后到期</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 className={styles.analysisMaintenanceItem}>
<div className={styles.analysisMaintenanceLeft}>
<div className={styles.analysisMaintenanceText1}>电路线路过载预警</div>
<div className={styles.analysisMaintenanceText2}>B动丨维护类型: 季度检查</div>
<div className={styles.analysisMaintenanceText3}>负责人: 张三</div>
</div> </div>
<div className={styles.analysisMaintenanceRight}>
<div className={styles.analysisMaintenanceStatus}>3天后到期</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className={styles.analysisRightBlock}> {/* 右侧表格 */}
{/* 表格 */} <div className={styles.analysisTableSection}>
<div className={styles.analysisTableHeader}> <div className={styles.analysisTableHeader}>
<div className={styles.analysisTableTitle}> <div className={styles.analysisTableTitle}>
<div className={styles.analysisTitleIcon}></div> <div className={styles.analysisTitleIcon}></div>
<div>消防设施与器材列表</div> <div>月度报警统计</div>
</div> </div>
</div>
{/* 操作按钮 */}
<div className={styles.analysisTableActions}> <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}> <button className={styles.analysisActionButton} onClick={handleExportData}>
<span className={styles.analysisButtonIcon}><ExportOutlined /></span> <span className={styles.analysisButtonIcon}><ExportOutlined /></span>
<span>导出数据</span> <span>导出数据</span>
@ -891,7 +827,6 @@ const DataAnalysisWarning = () => {
</div> </div>
</div> </div>
{/* 表格 */}
<div className={styles.analysisTableContainer}> <div className={styles.analysisTableContainer}>
<StandardTable <StandardTable
columns={columns} columns={columns}
@ -915,7 +850,6 @@ const DataAnalysisWarning = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };

158
src/pages/business_firewarning/components/DataAnalysisWarning.less
Unescape Escape View File

@ -8,7 +8,7 @@
// 第二个div - 高度35% // 第二个div - 高度35%
.analysisContainerMiddle { .analysisContainerMiddle {
// height: 400px; // height: 400px;
min-height: 35%; min-height: 46%;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -21,7 +21,7 @@
height: 100%; height: 100%;
.analysisMiddleBlock1 { .analysisMiddleBlock1 {
width: 30%; width: 39%;
height: 100%; height: 100%;
background: #fff; background: #fff;
border: 2px solid #fff; border: 2px solid #fff;
@ -120,7 +120,7 @@
} }
.analysisMiddleBlock12 { .analysisMiddleBlock12 {
width: 45%; width: 40%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
@ -170,7 +170,7 @@
.analysisMiddleBlock2 { .analysisMiddleBlock2 {
// flex: 1; // flex: 1;
width: calc(100% - 75% - 15px); width: calc(100% - 76% - 15px);
height: 100%; height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff; // border: 2px solid #fff;
@ -214,55 +214,15 @@
} }
} }
// 第三个div - 占满剩余位置 // 底部区域
.analysisContainerBottom { .analysisBottom {
display: flex;
flex-direction: column;
flex-shrink: 0;
.analysisSectionContent {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1;
gap: 10px;
padding: 0;
.analysisLeftBlock {
width: 30%;
flex-shrink: 0;
height: 100%;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
.analysisLeftBlockTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
margin-bottom: 10px;
.analysisTitleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.analysisMaintenanceStack {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px; gap: 10px;
flex: 1;
.analysisMaintenanceSection { .analysisMaintenanceSection {
width: 100%; width: 30%;
height: 50%;
background: #FFF; background: #FFF;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
@ -278,26 +238,21 @@
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
margin-bottom: 8px; margin-bottom: 8px;
}
.analysisTitleIcon { .analysisTitleIcon {
width: 3px; width: 3px;
height: 16px; height: 16px;
background-color: #2E4CD4; background-color: #2E4CD4;
} }
.analysisMaintenanceContent {
flex: 1;
width: 100%;
} }
.analysisMaintenanceContent1 { .analysisMaintenanceContent {
flex: 1; flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
margin-top: 8px;
.analysisMaintenanceItem { .analysisMaintenanceItem {
display: flex; display: flex;
align-items: center; align-items: center;
@ -346,7 +301,6 @@
background-color: #FFE0E2; background-color: #FFE0E2;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
// border: 1px solid #FFE0E2;
} }
} }
@ -364,83 +318,15 @@
background-color: #FFF3E9; background-color: #FFF3E9;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
// padding-right: 2px;
} }
} }
} }
} }
.analysisMaintenanceContent2 {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
padding: 8px 0;
.analysisWarningBox {
display: flex;
align-items: center;
gap: 8px;
background-color: #FFF3CD;
border: 1px solid #F4E3AE;
border-radius: 4px;
padding: 8px 12px;
// margin-bottom: 8px;
// margin-top: 10px;
.analysisWarningIcon {
color: #8C6C0B;
font-size: 14px;
}
.analysisWarningText {
color: #8C6C0B;
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
}
}
.analysisProgressSection {
width: 100%;
display: flex;
flex-direction: column;
// gap: 12px;
padding: 0px 12px 12px 12px;
.analysisProgressLabel {
font-size: 12px;
color: #666666;
font-family: PingFang SC;
font-weight: 400;
}
// 自定义进度条样式
:global(.ant-progress) {
.ant-progress-bg {
background: linear-gradient(90deg, #2E4CD4 0%, #4B69F1 100%);
}
.ant-progress-text {
color: #2E4CD4;
font-weight: 500;
}
} }
} .analysisTableSection {
} width: calc(100% - 30% - 10px);
}
}
}
.analysisRightBlock {
width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff; background-color: #fff;
padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -465,26 +351,10 @@
background-color: #2E4CD4; background-color: #2E4CD4;
} }
} }
}
.analysisTableActions { .analysisTableActions {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
gap: 8px;
margin-top: 5px;
padding: 0px 15px;
.analysisLeftActions {
display: flex;
align-items: center;
}
.analysisRightActions {
display: flex;
gap: 8px;
align-items: center;
}
.analysisActionButton { .analysisActionButton {
display: flex; display: flex;
@ -516,11 +386,12 @@
} }
} }
} }
}
.analysisTableContainer { .analysisTableContainer {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，左右边距15px margin: 10px 15px 0 15px;
:global(.ant-table) { :global(.ant-table) {
font-size: 12px; font-size: 12px;
@ -555,4 +426,3 @@
} }
} }
} }
}

6
src/pages/business_firewarning/components/RealtimeMonitoring.js
Unescape Escape View File

@ -336,7 +336,7 @@ const RealtimeMonitoring = () => {
title: '设备名称', title: '设备名称',
dataIndex: 'deviceName', dataIndex: 'deviceName',
key: 'deviceName', key: 'deviceName',
width: 110, width: 130,
}, },
{ {
title: '所在位置', title: '所在位置',
@ -370,7 +370,7 @@ const RealtimeMonitoring = () => {
} }
}, },
{ {
title: '最后维护', title: '最后更新',
dataIndex: 'lastMaintenance', dataIndex: 'lastMaintenance',
key: 'lastMaintenance', key: 'lastMaintenance',
width: 150, width: 150,
@ -378,7 +378,7 @@ const RealtimeMonitoring = () => {
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 140, width: 100,
render: (_, record) => ( render: (_, record) => (
<div> <div>
<Button type="link" size="small" style={{ <Button type="link" size="small" style={{

Write Preview
Loading…
Cancel
Save