新增安全作业许可页面
parent
65fb990d7c
commit
4225521559
@ -0,0 +1,3 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3666 0.194824C13.8289 0.194824 14.2047 0.562877 14.2047 1.01668V13.1826H2.05037V13.5729C2.05037 14.0993 2.46262 14.5295 2.99029 14.5832L3.09759 14.5876H13.9945V15.8052H3.09759C1.8714 15.8052 0.869921 14.8787 0.797366 13.709L0.792969 13.5729V1.01646C0.792969 0.563097 1.1685 0.194824 1.63131 0.194824H13.3664H13.3666ZM3.89086 7.48377C3.89086 9.44628 5.48575 11.0506 7.43375 11.0506C9.38175 11.0506 10.9766 9.44518 10.9766 7.48267H3.89108V7.48377H3.89086ZM7.43397 2.13161C7.07867 2.13161 6.72535 2.16723 6.37115 2.27452V4.62817H5.66252V2.55859C5.01811 2.88612 4.4778 3.38688 4.1023 4.00458C3.7268 4.62228 3.53099 5.33245 3.53688 6.05531H2.82715V6.76899H12.0375V6.05531H11.3302C11.3302 4.52109 10.4795 3.20103 9.20322 2.55859V4.62817H8.4957V2.27562C8.15055 2.17492 7.79238 2.12601 7.43287 2.13051L7.43397 2.13161Z" fill="white" fill-opacity="0.45"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 963 B |
@ -0,0 +1,3 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3666 0.194824C13.8289 0.194824 14.2047 0.562877 14.2047 1.01668V13.1826H2.05037V13.5729C2.05037 14.0993 2.46262 14.5295 2.99029 14.5832L3.09759 14.5876H13.9945V15.8052H3.09759C1.8714 15.8052 0.869921 14.8787 0.797366 13.709L0.792969 13.5729V1.01646C0.792969 0.563097 1.1685 0.194824 1.63131 0.194824H13.3664H13.3666ZM3.89086 7.48377C3.89086 9.44628 5.48575 11.0506 7.43375 11.0506C9.38175 11.0506 10.9766 9.44518 10.9766 7.48267H3.89108V7.48377H3.89086ZM7.43397 2.13161C7.07867 2.13161 6.72535 2.16723 6.37115 2.27452V4.62817H5.66252V2.55859C5.01811 2.88612 4.4778 3.38688 4.1023 4.00458C3.7268 4.62228 3.53099 5.33245 3.53688 6.05531H2.82715V6.76899H12.0375V6.05531H11.3302C11.3302 4.52109 10.4795 3.20103 9.20322 2.55859V4.62817H8.4957V2.27562C8.15055 2.17492 7.79238 2.12601 7.43287 2.13051L7.43397 2.13161Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 943 B |
@ -0,0 +1,4 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.097 8.03631C9.28795 8.84538 9.41235 10.1834 10.128 11.0856C10.2836 11.3036 10.2214 11.428 10.128 11.5525C10.097 11.5836 9.97246 11.7391 9.94127 11.7703C9.81688 11.9571 9.78586 12.237 9.81688 12.3926C9.87908 12.6414 10.128 12.6728 10.3148 12.6728C10.7193 12.7038 11.1549 12.6728 11.5594 12.6728H12.7728C13.0218 12.6728 13.2086 12.6104 13.3019 12.3926C13.3953 12.1437 13.3641 11.9257 13.1774 11.7391L12.9906 11.5524C12.8352 11.3968 12.8352 11.2412 12.9906 11.0856L13.3641 10.6189C13.9242 9.71664 13.7376 8.5654 12.8972 7.8809C12.0573 7.22724 10.8437 7.28961 10.097 8.03631ZM14.9821 13.7308C14.9821 13.2951 14.7953 13.0771 14.3598 13.0771H8.75903C8.32331 13.0771 8.13672 13.2639 8.13672 13.6996V14.3219H14.9821V13.7308Z" fill="white"/>
|
||||
<path d="M9.10177 12.3926C9.07076 12.0503 9.16414 11.677 9.38191 11.3968C9.38191 11.3658 9.41293 11.3658 9.44411 11.3346C9.07059 10.8057 8.85298 10.1834 8.85298 9.56108C8.8218 8.7832 9.10177 8.06752 9.59968 7.53842C10.1286 7.00949 10.8131 6.72952 11.56 6.72952C11.9023 6.72952 12.2445 6.79172 12.5868 6.91628V1.65936C12.5868 1.28584 12.2757 0.974854 11.9023 0.974854H2.56755C2.22522 1.00587 1.91406 1.31702 1.91406 1.65936V13.6995C1.91406 14.073 2.22522 14.384 2.59857 14.384H7.48381V13.7308C7.48381 13.3263 7.6082 13.0151 7.82614 12.7972C8.04392 12.5484 8.38609 12.455 8.79062 12.455C8.884 12.3928 9.00856 12.3928 9.10177 12.3928V12.3926ZM3.87453 4.17977C3.87453 3.96183 4.06129 3.77523 4.27906 3.77523H9.41326C9.63103 3.77523 9.81763 3.96199 9.81763 4.17977C9.81763 4.39754 9.63087 4.58413 9.41309 4.58413H4.27889C4.06112 4.55312 3.87436 4.39737 3.87436 4.17977H3.87453ZM7.82631 7.32232C7.82631 7.54026 7.63955 7.72685 7.42178 7.72685H4.27889C4.06112 7.72685 3.87436 7.54009 3.87436 7.32232C3.87436 7.10454 4.06112 6.91795 4.27889 6.91795H7.42161C7.67057 6.94896 7.82614 7.10471 7.82614 7.32232H7.82631ZM7.82631 5.73553C7.82631 5.95331 7.63955 6.14007 7.42178 6.14007H4.27889C4.06112 6.14007 3.87436 5.95331 3.87436 5.73553C3.87436 5.51776 4.06112 5.331 4.27889 5.331H7.42161C7.67057 5.36218 7.82614 5.51776 7.82614 5.73553H7.82631ZM14.3295 15.224H9.03958C8.884 15.224 8.72842 15.0996 8.72842 14.9129C8.72842 14.7573 8.85298 14.6017 9.03958 14.6017H14.3293C14.4849 14.6017 14.6405 14.7573 14.6405 14.9129C14.6405 15.0996 14.5159 15.224 14.3293 15.224H14.3295Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,501 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Card, Row, Col, Tag, Button, Statistic, Select, Input, Space } from 'antd';
|
||||
import { SearchOutlined, CheckOutlined, ExclamationCircleOutlined, FileTextOutlined, BarChartOutlined, BellOutlined, AlertOutlined } from '@ant-design/icons';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import styles from './SpecialOperationPermit.less';
|
||||
|
||||
const { Option } = Select;
|
||||
const { Column } = Table;
|
||||
|
||||
// 模拟数据 - 统计卡片数据
|
||||
const statsData = [
|
||||
{
|
||||
title: '作业总数',
|
||||
count: 126,
|
||||
icon: <FileTextOutlined />,
|
||||
status: '正常',
|
||||
color: '#52c41a'
|
||||
},
|
||||
{
|
||||
title: '技能合格率',
|
||||
count: '23%',
|
||||
icon: <CheckOutlined />,
|
||||
status: '待提升',
|
||||
color: '#ff7875'
|
||||
},
|
||||
{
|
||||
title: '作业完成率',
|
||||
count: '67%',
|
||||
icon: <BarChartOutlined />,
|
||||
status: '正常',
|
||||
color: '#52c41a'
|
||||
},
|
||||
{
|
||||
title: '风险防控数',
|
||||
count: 16,
|
||||
icon: <BellOutlined />,
|
||||
status: '较上月持平',
|
||||
color: '#1890ff'
|
||||
}
|
||||
];
|
||||
|
||||
// 模拟数据 - 趋势分析图表
|
||||
const trendAnalysisData = {
|
||||
title: {
|
||||
text: '趋势分析',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['技能合格率', '作业完成率', '风险防控数'],
|
||||
bottom: 0,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '技能合格率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: [25, 23, 28, 26, 30, 23, 25],
|
||||
itemStyle: { color: '#ff7a75' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(255, 122, 117, 0.8)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(255, 122, 117, 0.1)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '作业完成率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: [65, 68, 70, 65, 62, 67, 69],
|
||||
itemStyle: { color: '#9254de' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(146, 84, 222, 0.8)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(146, 84, 222, 0.1)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '风险防控数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: [15, 18, 16, 14, 17, 16, 19],
|
||||
itemStyle: { color: '#40a9ff' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(64, 169, 255, 0.8)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(64, 169, 255, 0.1)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
// 模拟数据 - 作业类型分布图表
|
||||
const operationTypeData = {
|
||||
title: {
|
||||
text: '作业类型分布',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['动火作业', '高处作业', '有限空间作业', '临时用电', '断路作业'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '作业类型',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
data: [
|
||||
{
|
||||
value: 35,
|
||||
name: '动火作业',
|
||||
itemStyle: { color: '#1890ff' }
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
name: '高处作业',
|
||||
itemStyle: { color: '#52c41a' }
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: '有限空间作业',
|
||||
itemStyle: { color: '#faad14' }
|
||||
},
|
||||
{
|
||||
value: 15,
|
||||
name: '临时用电',
|
||||
itemStyle: { color: '#f5222d' }
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '断路作业',
|
||||
itemStyle: { color: '#722ed1' }
|
||||
}
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 模拟数据 - 作业列表数据
|
||||
const operationListData = [
|
||||
{
|
||||
key: '1',
|
||||
operationType: '动火作业',
|
||||
operationNo: 'DH-20230906-002',
|
||||
applicant: '张小龙',
|
||||
location: '2号车间',
|
||||
startTime: '2025-09-03 03:23:12',
|
||||
warningDept: '生产一部',
|
||||
warningType: '气体浓度超标',
|
||||
riskLevel: '高风险',
|
||||
status: '进行中',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
operationType: '高处作业',
|
||||
operationNo: 'GC-20230906-002',
|
||||
applicant: '李小龙',
|
||||
location: '2号车间',
|
||||
startTime: '2025-09-03 03:23:12',
|
||||
warningDept: '生产一部',
|
||||
warningType: '气体浓度超标',
|
||||
riskLevel: '较高风险',
|
||||
status: '未开始',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
operationType: '有限空间作业',
|
||||
operationNo: 'YX-20230906-002',
|
||||
applicant: '张小虎',
|
||||
location: '2号车间',
|
||||
startTime: '2025-09-03 03:23:12',
|
||||
warningDept: '生产一部',
|
||||
warningType: '气体浓度超标',
|
||||
riskLevel: '中风险',
|
||||
status: '未开始',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
operationType: '临时用电',
|
||||
operationNo: 'LS-20230906-002',
|
||||
applicant: '张小龙',
|
||||
location: '2号车间',
|
||||
startTime: '2025-09-03 03:23:12',
|
||||
warningDept: '生产一部',
|
||||
warningType: '气体浓度超标',
|
||||
riskLevel: '低风险',
|
||||
status: '进行中',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
operationType: '动火作业',
|
||||
operationNo: 'DH-20230906-002',
|
||||
applicant: '张小龙',
|
||||
location: '2号车间',
|
||||
startTime: '2025-09-03 03:23:12',
|
||||
warningDept: '生产一部',
|
||||
warningType: '气体浓度超标',
|
||||
riskLevel: '高风险',
|
||||
status: '进行中',
|
||||
},
|
||||
];
|
||||
|
||||
// 状态标签渲染
|
||||
const renderStatusTag = (status) => {
|
||||
switch (status) {
|
||||
case '进行中':
|
||||
return <Tag color="blue">{status}</Tag>;
|
||||
case '未开始':
|
||||
return <Tag color="default">{status}</Tag>;
|
||||
case '已完成':
|
||||
return <Tag color="green">{status}</Tag>;
|
||||
case '已暂停':
|
||||
return <Tag color="orange">{status}</Tag>;
|
||||
default:
|
||||
return <Tag>{status}</Tag>;
|
||||
}
|
||||
};
|
||||
|
||||
// 风险等级标签渲染
|
||||
const renderRiskLevelTag = (level) => {
|
||||
switch (level) {
|
||||
case '高风险':
|
||||
return <Tag color="red">{level}</Tag>;
|
||||
case '较高风险':
|
||||
return <Tag color="orange">{level}</Tag>;
|
||||
case '中风险':
|
||||
return <Tag color="yellow">{level}</Tag>;
|
||||
case '低风险':
|
||||
return <Tag color="green">{level}</Tag>;
|
||||
default:
|
||||
return <Tag>{level}</Tag>;
|
||||
}
|
||||
};
|
||||
|
||||
const SpecialOperationPermit = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [filteredData, setFilteredData] = useState(operationListData);
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = (value) => {
|
||||
setSearchText(value);
|
||||
const filtered = operationListData.filter(item =>
|
||||
item.operationNo.includes(value) ||
|
||||
item.applicant.includes(value) ||
|
||||
item.location.includes(value)
|
||||
);
|
||||
setFilteredData(filtered);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// 处理操作按钮
|
||||
const handleViewDetails = (record) => {
|
||||
// 查看详情逻辑
|
||||
console.log('查看详情:', record);
|
||||
};
|
||||
|
||||
const handleApprove = (record) => {
|
||||
// 审批逻辑
|
||||
console.log('审批:', record);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{/* 顶部统计卡片 */}
|
||||
<Row gutter={16} className={styles.statsRow}>
|
||||
{statsData.map((stat, index) => (
|
||||
<Col key={index} xs={24} sm={12} md={6}>
|
||||
<Card className={styles.statCard}>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statIcon}>
|
||||
{React.cloneElement(stat.icon, { style: { color: stat.color } })}
|
||||
</div>
|
||||
<div className={styles.statInfo}>
|
||||
<div className={styles.statTitle}>{stat.title}</div>
|
||||
<div className={styles.statCount}>{stat.count}</div>
|
||||
<div className={styles.statStatus} style={{ color: stat.color }}>{stat.status}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* 中间图表区域 */}
|
||||
<Row gutter={16} className={styles.chartRow}>
|
||||
{/* 监控预警 */}
|
||||
<Col xs={24} md={6} lg={6}>
|
||||
<Card title="监控预警" className={styles.chartCard}>
|
||||
<div className={styles.alarmList}>
|
||||
<div className={styles.alarmItem}>
|
||||
<div className={styles.alarmIcon} style={{ backgroundColor: '#FF4D4F' }}>
|
||||
<AlertOutlined style={{ color: '#fff' }} />
|
||||
</div>
|
||||
<div className={styles.alarmInfo}>
|
||||
<div className={styles.alarmTitle}>高风险气体超标</div>
|
||||
<div className={styles.alarmDesc}>测试气体浓度超出安全标准值25.0%</div>
|
||||
<div className={styles.alarmTime}>5分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.alarmItem}>
|
||||
<div className={styles.alarmIcon} style={{ backgroundColor: '#FF7A45' }}>
|
||||
<AlertOutlined style={{ color: '#fff' }} />
|
||||
</div>
|
||||
<div className={styles.alarmInfo}>
|
||||
<div className={styles.alarmTitle}>高温作业防护缺失</div>
|
||||
<div className={styles.alarmDesc}>作业人员未按规定佩戴防护装备</div>
|
||||
<div className={styles.alarmTime}>30分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.alarmItem}>
|
||||
<div className={styles.alarmIcon} style={{ backgroundColor: '#FFC53D' }}>
|
||||
<AlertOutlined style={{ color: '#fff' }} />
|
||||
</div>
|
||||
<div className={styles.alarmInfo}>
|
||||
<div className={styles.alarmTitle}>受限空间超时</div>
|
||||
<div className={styles.alarmDesc}>作业人员在受限空间内停留超过规定时间</div>
|
||||
<div className={styles.alarmTime}>60分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.alarmItem}>
|
||||
<div className={styles.alarmIcon} style={{ backgroundColor: '#1890FF' }}>
|
||||
<AlertOutlined style={{ color: '#fff' }} />
|
||||
</div>
|
||||
<div className={styles.alarmInfo}>
|
||||
<div className={styles.alarmTitle}>受限空间作业超时</div>
|
||||
<div className={styles.alarmDesc}>受限空间作业已超规定时间30分钟</div>
|
||||
<div className={styles.alarmTime}>90分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 趋势分析图表 */}
|
||||
<Col xs={24} md={18} lg={8}>
|
||||
<Card title="趋势分析" className={styles.chartCard}>
|
||||
<ReactECharts option={trendAnalysisData} className={styles.chart} />
|
||||
</Card>
|
||||
</Col>
|
||||
{/* 作业类型分布图表 */}
|
||||
<Col xs={24} md={24} lg={10}>
|
||||
<Card title="作业类型分布" className={styles.chartCard}>
|
||||
<ReactECharts option={operationTypeData} className={styles.chart} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 作业列表区域 */}
|
||||
<Card title="作业管理列表" className={styles.tableCard}>
|
||||
{/* 搜索和筛选 */}
|
||||
<div className={styles.searchFilter}>
|
||||
<Space>
|
||||
<Input
|
||||
placeholder="搜索作业编号、申请人、作业地点..."
|
||||
prefix={<SearchOutlined />}
|
||||
allowClear
|
||||
style={{ width: 300 }}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
<Select placeholder="作业类型" style={{ width: 120 }}>
|
||||
<Option value="all">全部</Option>
|
||||
<Option value="dh">动火作业</Option>
|
||||
<Option value="gc">高处作业</Option>
|
||||
<Option value="yx">有限空间作业</Option>
|
||||
<Option value="ls">临时用电</Option>
|
||||
<Option value="dl">断路作业</Option>
|
||||
</Select>
|
||||
<Select placeholder="状态" style={{ width: 100 }}>
|
||||
<Option value="all">全部</Option>
|
||||
<Option value="progress">进行中</Option>
|
||||
<Option value="not-started">未开始</Option>
|
||||
<Option value="completed">已完成</Option>
|
||||
<Option value="paused">已暂停</Option>
|
||||
</Select>
|
||||
<Select placeholder="风险等级" style={{ width: 100 }}>
|
||||
<Option value="all">全部</Option>
|
||||
<Option value="high">高风险</Option>
|
||||
<Option value="medium-high">较高风险</Option>
|
||||
<Option value="medium">中风险</Option>
|
||||
<Option value="low">低风险</Option>
|
||||
</Select>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 作业列表表格 */}
|
||||
<Table
|
||||
dataSource={filteredData}
|
||||
pagination={{
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: filteredData.length,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total, range) => `共 ${total} 条 ${range[0]}-${range[1]}`
|
||||
}}
|
||||
rowKey="key"
|
||||
size="small"
|
||||
className={styles.operationTable}
|
||||
>
|
||||
<Column title="作业类型" dataIndex="operationType" key="operationType" width={100} />
|
||||
<Column title="作业编号" dataIndex="operationNo" key="operationNo" width={150} />
|
||||
<Column title="申请人" dataIndex="applicant" key="applicant" width={80} />
|
||||
<Column title="作业地点" dataIndex="location" key="location" width={100} />
|
||||
<Column title="开始时间" dataIndex="startTime" key="startTime" width={160} />
|
||||
<Column title="预警部门" dataIndex="warningDept" key="warningDept" width={100} />
|
||||
<Column title="预警类型" dataIndex="warningType" key="warningType" width={120} />
|
||||
<Column
|
||||
title="风险等级"
|
||||
dataIndex="riskLevel"
|
||||
key="riskLevel"
|
||||
width={80}
|
||||
render={(text) => renderRiskLevelTag(text)}
|
||||
/>
|
||||
<Column
|
||||
title="状态"
|
||||
dataIndex="status"
|
||||
key="status"
|
||||
width={80}
|
||||
render={(text) => renderStatusTag(text)}
|
||||
/>
|
||||
<Column
|
||||
title="操作"
|
||||
key="action"
|
||||
width={120}
|
||||
fixed="right"
|
||||
render={(text, record) => (
|
||||
<Space size="middle">
|
||||
<Button size="small" type="link" onClick={() => handleViewDetails(record)}>查看</Button>
|
||||
<Button size="small" type="link" onClick={() => handleApprove(record)}>审批</Button>
|
||||
</Space>
|
||||
)}
|
||||
/>
|
||||
</Table>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpecialOperationPermit;
|
||||
@ -0,0 +1,207 @@
|
||||
/* 主容器样式 */
|
||||
.container {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* 统计卡片样式 */
|
||||
.statsRow {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e8e8e8;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.statContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.statIcon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e6f7ff;
|
||||
border-radius: 4px;
|
||||
font-size: 24px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.statInfo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.statTitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statCount {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statStatus {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 图表区域样式 */
|
||||
.chartRow {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chartCard {
|
||||
margin-bottom: 16px;
|
||||
height: 360px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 监控预警样式 */
|
||||
.alarmList {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.alarmItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.alarmIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.alarmInfo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.alarmTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.alarmDesc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.alarmTime {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* 表格区域样式 */
|
||||
.tableCard {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.searchFilter {
|
||||
margin-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.operationTable {
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.searchFilter {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.searchFilter > * {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue