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

删除多余菜单和目录

Browse Source
main
jiangxucong 4 days ago
parent f7de13fce4
commit 3108dd058c
21 changed files with 0 additions and 8861 deletions
Show Stats Download Patch File Download Diff File

6
config/routes.js
Unescape Escape View File

@ -24,12 +24,6 @@ export default [
name: 'business',
component: './nav_system_content/SystemContentList',
routes: [
// 基础信息管理
{
path: '/topnavbar00/business/basic',
name: 'basic',
component: './business_basic/basic',
},
{
path: '/topnavbar00/business/homepage',
name: 'homepage',

69
src/pages/business_basic/basic.js
Unescape Escape View File

@ -1,69 +0,0 @@
import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './basic.less';
import ResponsibilityImplementation from './components/ResponsibilityImplementation';
import OnlineMonitoring from './components/OnlineMonitoring';
import RiskAssessment from './components/RiskAssessment';
import EvaluationReport from './components/EvaluationReport';
import LicenseManagement from './components/LicenseManagement';
const SafeMajorHazardList = () => {
const [activeModule, setActiveModule] = useState('organization');
const handleModuleClick = (module) => {
setActiveModule(module)
}
const renderModule = () => {
switch (activeModule) {
case 'organization':
return <ResponsibilityImplementation />;
case 'license':
return <LicenseManagement />;
case 'equipment':
return <OnlineMonitoring />;
case 'firefighting':
return <RiskAssessment />;
case 'other':
return <EvaluationReport />;
default:
return <ResponsibilityImplementation />;
}
};
return (
<div className={styles.container}>
<div className={styles.TopButton}>
<Button
className={`${styles.TopButtonItem} ${activeModule === "organization" ? styles.active : ""}`}
onClick={() => handleModuleClick("organization")}
>组织机构管理
</Button>
<Button
className={`${styles.TopButtonItem} ${activeModule === "license" ? styles.active : ""}`}
onClick={() => handleModuleClick("license")}
>资质证照管理
</Button>
<Button
className={`${styles.TopButtonItem} ${activeModule === "firefighting" ? styles.active : ""}`}
onClick={() => handleModuleClick("firefighting")}
>设备设施管理
</Button>
<Button
className={`${styles.TopButtonItem} ${activeModule === "other" ? styles.active : ""}`}
onClick={() => handleModuleClick("other")}
>建筑消防与器材管理
</Button>
</div>
<div className={styles.content}>
{renderModule()}
</div>
</div>
);
};
export default SafeMajorHazardList;

66
src/pages/business_basic/basic.less
Unescape Escape View File

@ -1,66 +0,0 @@
.container {
background-color: transparent;
width: 100%;
height: 89vh;
overflow: hidden;
display: flex;
flex-direction: column;
.TopButton {
background-color: white;
width: 100%;
padding: 10px 30px;
display: flex;
gap: 24px;
margin-left: 6px;
.TopButtonItem {
background-color: transparent !important;
color: #333333 !important;
font-family: 'PingFang SC', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 100% !important;
border-radius: 8px !important;
padding: 6px 10px !important;
height: auto !important;
border: none !important;
box-shadow: none !important;
position: relative !important;
&:hover {
color: #333333 !important;
border: none !important;
}
&:focus {
color: #2E4CD4 !important;
border: none !important;
}
&.active {
color: #2E4CD4 !important;
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 100%;
height: 4px;
background-color: #2E4CD4;
border-radius: 0;
opacity: 1;
}
}
}
}
.content {
// ======== 内容区域样式 ========
flex: 1; // ======== 占据剩余空间 ========
overflow-y: auto; // ======== 允许垂直滚动 ========
padding: 0; // ======== 无内边距 ========
}
}

922
src/pages/business_basic/components/EvaluationReport.js
Unescape Escape View File

@ -1,922 +0,0 @@
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 './EvaluationReport.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 EvaluationReport = () => {
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.Econtainer}>
{/* 第1个div - 高度39% */}
<div className={styles.EcontainerMiddle}>
<div className={styles.sectionContent}>
<div className={styles.middleBlock1}>
<div className={styles.block1Header}>
<div className={styles.block1Title}>
<div className={styles.titleIcon}></div>
设备使用频率分析
</div>
</div>
{/* 设备状态饼图 */}
<div className={styles.deviceStatusChart} ref={pieChartRef}>
</div>
</div>
<div className={styles.middleBlock12}>
<div className={styles.block1Header}>
<div className={styles.block1Title}>
<div className={styles.titleIcon}></div>
近一年维护费用趋势
</div>
</div>
{/* 维护费用趋势折线图 */}
<div className={styles.deviceStatusChart} ref={faultPieChartRef}>
</div>
</div>
<div className={styles.middleBlock2}>
<div className={styles.middleBlock2Title}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>设备类型占比</div>
</div>
</div>
<div className={styles.middleBlock2Chart} ref={chartRef}>
</div>
</div>
</div>
</div>
{/* 第2个div - 占满剩余位置 */}
<div className={styles.EcontainerBottom}>
<div className={styles.sectionContent}>
<div className={styles.leftBlock}>
<div className={styles.maintenanceStack}>
<div className={styles.maintenanceSection}>
<div className={styles.maintenanceTitle}>
<div className={styles.titleIcon}></div>
<div>近期维护提醒</div>
</div>
<div className={styles.maintenanceContent1}>
<div className={styles.maintenanceItem}>
<div className={styles.maintenanceLeft}>
<div className={styles.maintenanceText1}>SH-MHQ-023-C 干粉灭火器</div>
<div className={styles.maintenanceText2}>位置: 4楼办公区丨维护类型: 季度检查</div>
<div className={styles.maintenanceText3}>负责人: 张三</div>
</div>
<div className={styles.maintenanceRight}>
<div className={styles.maintenanceStatus}>3天后到期</div>
</div>
</div>
<div className={styles.maintenanceItem}>
<div className={styles.maintenanceLeft}>
<div className={styles.maintenanceText1}>SH-XHS-045-D 室内消火栓</div>
<div className={styles.maintenanceText2}>位置: 2楼东侧走廊丨维护类型: 水压测试</div>
<div className={styles.maintenanceText3}>负责人: 李四</div>
</div>
<div className={styles.maintenanceRight2}>
<div className={styles.maintenanceStatus}>8天后到期</div>
</div>
</div>
</div>
</div>
<div className={styles.maintenanceSection}>
<div className={styles.maintenanceTitle}>
<div className={styles.titleIcon}></div>
<div>维护任务进度</div>
</div>
<div className={styles.maintenanceContent2}>
{/* 进度条区域 */}
<div className={styles.progressSection}>
<div className={styles.progressLabel}>月度维护计划</div>
<Progress percent={75} status="active" />
<div className={styles.progressLabel}>季度维护计划</div>
<Progress percent={60} status="active" />
<div className={styles.progressLabel}>年度维护计划</div>
<Progress percent={85} status="active" />
{/* 警告提示框 */}
<div className={styles.warningBox}>
<ExclamationCircleOutlined className={styles.warningIcon} />
<span className={styles.warningText}>本月有5项维护任务即将到期</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.rightBlock}>
{/* 表格 */}
<div className={styles.tableHeader}>
<div className={styles.tableTitle}>
<div className={styles.titleIcon}></div>
<div>消防设施与器材列表</div>
</div>
</div>
{/* 操作按钮 */}
<div className={styles.tableActions}>
<div className={styles.leftActions}>
<Input
placeholder="搜索设备名称、编号..."
onChange={handleSearchChange}
value={searchText}
style={{ width: 250, fontSize: 12 }}
allowClear
suffix={<SearchOutlined />}
/>
</div>
<div className={styles.rightActions}>
<button className={styles.actionButton} onClick={handleAddDevice}>
<span className={styles.buttonIcon}>+</span>
<span>新增设备</span>
</button>
<button className={styles.actionButton} onClick={handleExportData}>
<span className={styles.buttonIcon}><ExportOutlined /></span>
<span>导出数据</span>
</button>
</div>
</div>
{/* 表格 */}
<div className={styles.tableContainer}>
<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 EvaluationReport;

558
src/pages/business_basic/components/EvaluationReport.less
Unescape Escape View File

@ -1,558 +0,0 @@
.Econtainer {
padding: 8px 6px 0px 6px;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
// 第二个div - 高度35%
.EcontainerMiddle {
// height: 400px;
min-height: 35%;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
display: flex;
gap: 10px;
height: 100%;
.middleBlock1 {
width: 30%;
height: 100%;
background: #fff;
border: 2px solid #fff;
position: relative;
padding: 0px 10px 10px 2px;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
margin-top: 5px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
}
.deviceStatusChart {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
z-index: 10;
min-height: 100%;
}
}
.middleBlock12 {
flex: 1;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
position: relative;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
margin-top: 5px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
}
.deviceStatusChart {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
// bottom: 10px;
z-index: 10;
}
}
.middleBlock12 {
width: 45%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
position: relative;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
}
.deviceStatusChart {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
// bottom: 10px;
min-height: 100%;
z-index: 10;
}
}
.middleBlock2 {
// flex: 1;
width: calc(100% - 75% - 15px);
height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff;
background-color: #fff;
// border-radius: 4px;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
.middleBlock2Title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
}
.middleBlock2Chart {
width: 100%;
height: 100%;
}
}
}
}
// 第三个div - 占满剩余位置
.EcontainerBottom {
display: flex;
flex-direction: column;
flex-shrink: 0;
.sectionContent {
display: flex;
flex-direction: row;
flex: 1;
gap: 10px;
padding: 0;
.leftBlock {
width: 30%;
flex-shrink: 0;
height: 100%;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
.leftBlockTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
margin-bottom: 10px;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.maintenanceStack {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
.maintenanceSection {
width: 100%;
height: 50%;
background: #FFF;
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 12px 14px;
.maintenanceTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
margin-bottom: 8px;
}
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
.maintenanceContent {
flex: 1;
width: 100%;
}
.maintenanceContent1 {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
.maintenanceItem {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #F1F7FF;
border-radius: 4px;
padding: 16px 16px;
.maintenanceLeft {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
.maintenanceText1 {
font-size: 14px;
font-weight: 500;
color: #333333;
font-family: PingFang SC;
}
.maintenanceText2 {
font-size: 12px;
color: #666666;
font-family: PingFang SC;
}
.maintenanceText3 {
font-size: 12px;
color: #666666;
font-family: PingFang SC;
}
}
.maintenanceRight {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
.maintenanceStatus {
font-size: 12px;
color: #FF3E48;
font-weight: 500;
font-family: PingFang SC;
background-color: #FFE0E2;
padding: 4px 8px;
border-radius: 4px;
// border: 1px solid #FFE0E2;
}
}
.maintenanceRight2 {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
.maintenanceStatus {
font-size: 12px;
color: #FF8800;
font-weight: 500;
font-family: PingFang SC;
background-color: #FFF3E9;
padding: 4px 8px;
border-radius: 4px;
// padding-right: 2px;
}
}
}
}
.maintenanceContent2 {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
padding: 8px 0;
.warningBox {
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;
.warningIcon {
color: #8C6C0B;
font-size: 14px;
}
.warningText {
color: #8C6C0B;
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
}
}
.progressSection {
width: 100%;
display: flex;
flex-direction: column;
// gap: 12px;
padding: 0px 12px 12px 12px;
.progressLabel {
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;
}
}
}
}
}
}
}
.rightBlock {
width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff;
padding: 0;
display: flex;
flex-direction: column;
.tableHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 15px 5px 15px;
.tableTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
}
.tableActions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 5px;
padding: 0px 15px;
.leftActions {
display: flex;
align-items: center;
}
.rightActions {
display: flex;
gap: 8px;
align-items: center;
}
.actionButton {
display: flex;
align-items: center;
gap: 4px;
height: 28px;
border: 1px solid #DFE4F6;
border-radius: 4px;
color: #2E4CD4;
font-weight: 500;
font-size: 12px;
padding: 0px 8px;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #f0f2ff;
border-color: #2E4CD4;
}
&:active {
background-color: #e6ebff;
}
.buttonIcon {
font-size: 14px;
font-weight: bold;
}
}
}
.tableContainer {
flex: 1;
overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
:global(.ant-table) {
font-size: 12px;
}
:global(.ant-table-thead > tr > th) {
background-color: #f5f5fa;
font-weight: 500;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
color: #666666;
}
:global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;
}
}
}
}
}
}

604
src/pages/business_basic/components/LicenseManagement.js
Unescape Escape View File

@ -1,604 +0,0 @@
import React, { useEffect, useRef, useState } from 'react';
import { Card, Table, Tag, Space, Typography, Progress, Row, Col, Button, Input, Select } from 'antd';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './LicenseManagement.less';
import icon_echart from '@/assets/business_basic/icon_echart.svg';
const { Title } = Typography;
const { Search } = Input;
const { Option } = Select;
const LicenseManagement = () => {
const chartRef = useRef(null);
const [searchValue, setSearchValue] = useState('');
const [selectedType, setSelectedType] = useState('all');
// 图表数据
const chartData = [
{ name: '安全生产许可证', value: 35, itemStyle: { color: '#3C7DFF' } },
{ name: '安全评估报告', value: 25, itemStyle: { color: '#FF8800' } },
{ name: '安全三同时材料', value: 20, itemStyle: { color: '#FF3E48' } },
{ name: '施工资质证书', value: 15, itemStyle: { color: '#FFC403' } },
{ name: '应急预案', value: 10, itemStyle: { color: '#22C55E' } },
{ name: '其他', value: 5, itemStyle: { color: '#31BCFF' } }
];
// 初始化图表
useEffect(() => {
if (chartRef.current) {
const chart = echarts.init(chartRef.current);
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{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 (
<span style={getStatusStyle(text)}>
{text}
</span>
);
}
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
width: 120,
render: (text, record) => {
const handleEdit = (record) => {
console.log('编辑记录:', record);
};
const handleDelete = (record) => {
console.log('删除记录:', record);
};
return (
<div style={{
display: 'flex',
gap: '8px',
justifyContent: 'center',
alignItems: 'center'
}}>
<Button
onClick={() => handleEdit(record)}
style={{
color: '#2E4CD4',
backgroundColor: 'transparent',
// borderColor: '#E6E9FB',
fontSize: '12px',
height: '28px',
padding: '0 12px'
}}
>
更新
</Button>
<Button
onClick={() => handleDelete(record)}
style={{
color: '#2E4CD4',
backgroundColor: 'transparent',
// borderColor: '#E6E9FB',
fontSize: '12px',
height: '28px',
padding: '0 12px'
}}
>
查看
</Button>
</div>
);
}
},
];
return (
<div className={styles.licenseManagementContainer}>
<div className={styles.topSectionContainer}>
<div className={styles.firstBlock}>
<div className={styles.chartHeader}>
<div className={styles.colorBlock}></div>
<span className={styles.chartTitle}>证件类型分布</span>
</div>
<div className={styles.chartContainer}>
<div ref={chartRef} className={styles.chart}></div>
</div>
</div>
<div className={styles.secondBlock}>
<div className={styles.chartHeader}>
<div className={styles.colorBlock}></div>
<span className={styles.chartTitle}>证件状态概览</span>
</div>
<div className={styles.chartContainer}>
{/* 上半部分：进度条和百分比 */}
<div className={styles.progressSection}>
<div className={styles.progressItem}>
<div className={styles.progressLabel}>有效证照</div>
<div className={styles.progressWrapper}>
<Progress
percent={50}
strokeColor="#3C7DFF"
trailColor="#F0F0F0"
showInfo={false}
className={styles.customProgress}
/>
<span className={styles.progressPercent}>50%</span>
</div>
</div>
<div className={styles.progressItem}>
<div className={styles.progressLabel}>即将到期</div>
<div className={styles.progressWrapper}>
<Progress
percent={15}
strokeColor="#FFC403"
trailColor="#F0F0F0"
showInfo={false}
className={styles.customProgress}
/>
<span className={styles.progressPercent}>15%</span>
</div>
</div>
<div className={styles.progressItem}>
<div className={styles.progressLabel}>已过期</div>
<div className={styles.progressWrapper}>
<Progress
percent={20}
strokeColor="#FF3E48"
trailColor="#F0F0F0"
showInfo={false}
className={styles.customProgress}
/>
<span className={styles.progressPercent}>20%</span>
</div>
</div>
<div className={styles.progressItem}>
<div className={styles.progressLabel}>待审核材料</div>
<div className={styles.progressWrapper}>
<Progress
percent={15}
strokeColor="#FF8800"
trailColor="#F0F0F0"
showInfo={false}
className={styles.customProgress}
/>
<span className={styles.progressPercent}>15%</span>
</div>
</div>
</div>
{/* 下半部分：数字统计 */}
<div className={styles.statsSection}>
<Row gutter={[16, 16]}>
<Col span={6}>
<div className={styles.statItem}>
<div className={styles.statNumber} style={{ color: '#3C7DFF' }}>42</div>
<div className={styles.statLabel}>总证照数</div>
</div>
</Col>
<Col span={6}>
<div className={styles.statItem}>
<div className={styles.statNumber} style={{ color: '#FFC403' }}>8</div>
<div className={styles.statLabel}>即将过期</div>
</div>
</Col>
<Col span={6}>
<div className={styles.statItem}>
<div className={styles.statNumber} style={{ color: '#FF3E48' }}>6</div>
<div className={styles.statLabel}>已过期</div>
</div>
</Col>
<Col span={6}>
<div className={styles.statItem}>
<div className={styles.statNumber} style={{ color: '#FF8800' }}>6</div>
<div className={styles.statLabel}>待审核材料</div>
</div>
</Col>
</Row>
</div>
</div>
</div>
<div className={styles.thirdBlock}>
<div className={styles.chartHeader}>
<div className={styles.colorBlock}></div>
<span className={styles.chartTitle}>临期预警</span>
</div>
<div className={styles.chartContainer}>
{/* 透明块容器 */}
<div className={styles.transparentBlock}>
{/* 四个垂直分布的卡片 */}
<div className={styles.licenseCard}>
<div className={styles.cardContent}>
<div className={styles.licenseName}>安全生产许可证</div>
<div className={styles.licenseNumber}>编号: AQXK-2023-0582</div>
</div>
<div className={styles.expiryTag}>
<span className={styles.expiryText}>15天后到期</span>
</div>
</div>
<div className={styles.licenseCard}>
<div className={styles.cardContent}>
<div className={styles.licenseName}>安全评估报告</div>
<div className={styles.licenseNumber}>编号: AQPG-2023-0125</div>
</div>
<div className={styles.expiryTag}>
<span className={styles.expiryText}>30天后到期</span>
</div>
</div>
<div className={styles.licenseCard}>
<div className={styles.cardContent}>
<div className={styles.licenseName}>施工资质证书</div>
<div className={styles.licenseNumber}>编号: SGZZ-2023-0089</div>
</div>
<div className={styles.expiryTag} style={{ backgroundColor: '#FFE0E2' }}>
<span className={styles.expiryText} style={{ color: '#FF2526' }}>7天后到期</span>
</div>
</div>
<div className={styles.licenseCard}>
<div className={styles.cardContent}>
<div className={styles.licenseName}>应急预案</div>
<div className={styles.licenseNumber}>编号: YJYA-2023-0045</div>
</div>
<div className={styles.expiryTag} style={{ backgroundColor: '#FFE0E2' }}>
<span className={styles.expiryText} style={{ color: '#FF2526' }}>4天后到期</span>
</div>
</div>
</div>
</div>
</div>
</div>
{/* 证照列表区域 */}
<div className={styles.listCard}>
<div className={styles.chartHeader}>
<div className={styles.headerLeft}>
<div className={styles.colorBlock}></div>
<span className={styles.chartTitle}>证照列表</span>
</div>
<div className={styles.headerRight}>
<Search
placeholder="搜索证照名称或编号..."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
onSearch={(value) => console.log('搜索:', value)}
className={styles.searchInput}
/>
<Select
value={selectedType}
onChange={setSelectedType}
className={styles.typeSelector}
>
<Option value="all">全部类型</Option>
<Option value="safety">安全生产许可证</Option>
<Option value="assessment">安全评估报告</Option>
<Option value="construction">施工资质证书</Option>
<Option value="emergency">应急预案</Option>
<Option value="other">其他</Option>
</Select>
<Button
type="primary"
className={styles.addButton}
onClick={() => console.log('新增证照')}
>
新增证照
</Button>
</div>
</div>
<StandardTable
columns={columns}
data={{
list: tableData, // ======== 表格数据列表 ========
pagination: { // ======== 分页配置 ========
currentPage: 1, // ======== 当前页码 ========
pageSize: 5, // ======== 每页显示5条数据 ========
total: tableData.length, // ======== 总数据条数 ========
} // ======== 分页配置结束 ========
}} // ======== 数据对象结束 ========
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ========
onSelectRow={() => { }} // ======== 行选择事件处理函数 ========
onChange={() => { }} // ======== 表格变化事件处理函数 ========
pagination={{
currentPage: 1,
pageSize: 5,
total: tableData.length,
showSizeChanger: false,
showQuickJumper: true,
showTotal: (total, range) =>
`共 ${total} 条`,
locale: {
jump_to: '前往',
page: '页',
items_per_page: '条/页',
}
}}
/>
</div>
</div>
);
};
export default LicenseManagement;

498
src/pages/business_basic/components/LicenseManagement.less
Unescape Escape View File

@ -1,498 +0,0 @@
.licenseManagementContainer {
height: 90vh;
.topSectionContainer {
padding: 0;
margin: 15px 0px 15px 5px;
height: 40%;
display: flex;
gap: 15px;
align-items: stretch;
.firstBlock {
width: 30%;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 10px 16px;
border-radius: 2px;
.chartHeader {
display: flex;
align-items: center;
margin-bottom: 16px;
.colorBlock {
width: 2px;
height: 18px;
background-color: #2E4CD4;
margin-right: 8px;
border-radius: 1px;
}
.chartTitle {
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 18px;
}
}
.chartContainer {
flex: 1;
width: 100%;
position: relative;
.chart {
width: 100%;
height: 100%;
min-height: 200px;
}
// 进度条区域样式
.progressSection {
margin-bottom: 20px;
.progressItem {
margin-bottom: 16px;
.progressLabel {
font-size: 12px;
color: #666;
margin-bottom: 8px;
font-weight: 400;
}
.progressWrapper {
display: flex;
align-items: center;
gap: 12px;
.customProgress {
flex: 1;
:global(.ant-progress-bg) {
height: 8px !important;
border-radius: 4px;
}
:global(.ant-progress-outer) {
.ant-progress-inner {
background-color: #F0F0F0;
border-radius: 4px;
}
}
}
.progressPercent {
font-size: 12px;
color: #333;
font-weight: 500;
min-width: 30px;
text-align: right;
}
}
}
}
// 数字统计区域样式
.statsSection {
.statItem {
text-align: center;
padding: 8px;
.statNumber {
font-size: 24px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 4px;
}
.statLabel {
font-size: 12px;
color: #666;
font-weight: 400;
}
}
}
}
}
.secondBlock {
width: 30%;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 10px 16px;
border-radius: 2px;
.chartHeader {
display: flex;
align-items: center;
margin-bottom: 8px;
.colorBlock {
width: 2px;
height: 18px;
background-color: #2E4CD4;
margin-right: 8px;
border-radius: 1px;
}
.chartTitle {
font-size: 14px;
font-weight: 500;
color: #333333;
// line-height: 18px;
}
}
.chartContainer {
flex: 1;
width: 100%;
position: relative;
// 进度条区域样式
.progressSection {
// margin-bottom: 20px;
.progressItem {
// margin-bottom: 16px;
.progressLabel {
font-size: 10px;
color: #666;
// margin-bottom: 8px;
font-weight: 400;
}
.progressWrapper {
display: flex;
align-items: center;
gap: 5px;
.customProgress {
flex: 1;
:global(.ant-progress-bg) {
height: 8px !important;
border-radius: 4px;
}
:global(.ant-progress-outer) {
.ant-progress-inner {
background-color: #F0F0F0;
border-radius: 4px;
}
}
}
.progressPercent {
font-size: 12px;
color: #333;
font-weight: 500;
min-width: 30px;
text-align: right;
}
}
}
}
// 数字统计区域样式
.statsSection {
.statItem {
text-align: center;
padding: 0px 2px 2px 2px;
.statNumber {
font-size: 22px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 4px;
}
.statLabel {
font-size: 12px;
color: #666;
font-weight: 400;
}
}
}
}
}
.thirdBlock {
flex: 1;
background-image: url('@/assets/business_basic/background_lqyj.svg');
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
padding: 10px 16px;
border-radius: 2px;
.chartHeader {
display: flex;
align-items: center;
margin-bottom: 8px;
.colorBlock {
width: 2px;
height: 18px;
background-color: #2E4CD4;
margin-right: 8px;
border-radius: 1px;
}
.chartTitle {
font-size: 14px;
font-weight: 500;
color: #333333;
}
}
.chartContainer {
flex: 1;
width: 100%;
position: relative;
// 透明块容器样式
.transparentBlock {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 8px;
.licenseCard {
width: 60%;
height: auto;
background-color: #FFF9F4;
border: 1px solid #FFD7BB;
border-radius: 2px;
padding: 5px 8px;
display: flex;
justify-content: space-between;
align-items: center;
// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.cardContent {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
.licenseName {
font-size: 12px;
font-weight: 500;
color: #333;
line-height: 1.2;
}
.licenseNumber {
font-size: 12px;
color: #666;
font-weight: 400;
}
}
.expiryTag {
width: 38%;
background-color: #FFEDDE;
border-radius: 2px;
padding: 5px 12px;
margin-left: 12px;
.expiryText {
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
color: #D46B08;
}
}
}
}
}
}
}
.listCard {
padding: 0;
padding: 15px 5px 15px 20px;
flex: 1;
// display: flex;
gap: 15px;
background-color: #fff;
// align-items: stretch;
.chartHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.headerLeft {
display: flex;
align-items: center;
.colorBlock {
width: 2px;
height: 18px;
background-color: #2E4CD4;
margin-right: 8px;
border-radius: 1px;
}
.chartTitle {
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 18px;
}
}
.headerRight {
display: flex;
align-items: center;
gap: 12px;
.searchInput {
width: 280px;
.ant-input {
border-radius: 2px;
border: 1px solid #d9d9d9;
&:hover {
border-color: #40a9ff;
}
&:focus {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
}
.typeSelector {
width: 120px;
.ant-select-selector {
border-radius: 2px;
border: 1px solid #d9d9d9;
&:hover {
border-color: #40a9ff;
}
}
&.ant-select-focused .ant-select-selector {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
.addButton {
border-radius: 4px;
background-color: #2E4CD4;
// border-color: #1890ff;
height: 32px;
padding: 4px 15px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: #2E4CD4;
// border-color: #40a9ff;
}
&:focus {
background-color: #2E4CD4;
// border-color: #40a9ff;
}
}
}
}
// StandardTable 组件样式
:global(.ant-table) {
font-size: 12px;
}
:global(.ant-pagination-options-quick-jumper input) {
text-align: center !important;
}
:global(.ant-table-thead > tr > th) {
background-color: #f5f5fa;
font-weight: 500;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
color: #666666;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;
}
}
}
// 覆盖Ant Design默认样式
.licenseManagementContainer {
.ant-card {
box-shadow: none;
}
.ant-card-body {
padding: 20px;
}
.ant-table {
font-size: 14px;
}
.ant-tag {
border-radius: 4px;
font-size: 12px;
padding: 2px 8px;
}
.ant-btn-link {
padding: 0;
height: auto;
font-size: 14px;
}
.ant-input-search {
.ant-input {
border-radius: 6px;
}
}
.ant-select {
.ant-select-selector {
border-radius: 6px;
}
}
.ant-btn-primary {
border-radius: 6px;
}
}

716
src/pages/business_basic/components/OnlineMonitoring.js
Unescape Escape View File

@ -1,716 +0,0 @@
import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button } from 'antd';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './OnlineMonitoring.less';
import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png';
import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png';
const OnlineMonitoring = () => {
const chartRef = 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: 5,
total: 0,
});
useEffect(() => {
if (chartRef.current) {
const chart = echarts.init(chartRef.current);
const option = {
color: ['#04A7F3', '#E7C42C', '#EC6941'],
legend: {
data: ['液位', '温度', '压力'],
top: "-3px",
left: "center",
itemGap: 40, // 图例间距
textStyle: {
fontSize: 10
}
},
grid: {
left: '2%',
right: '4%',
bottom: '2%',
top: '12%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
min: 0,
max: 500,
axisLabel: {
formatter: '{value}',
fontSize: 10
}
},
series: [
{
name: '液位',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#04A7F3'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(4, 167, 243, 0.3)' },
{ offset: 1, color: 'rgba(4, 167, 243, 0)' }
]
}
},
symbol: 'none', // 不显示数据点
data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
},
{
name: '温度',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#E7C42C'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(231, 196, 44, 0.3)' },
{ offset: 1, color: 'rgba(231, 196, 44, 0)' }
]
}
},
symbol: 'none',
data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75]
},
{
name: '压力',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#EC6941'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(236, 105, 65, 0)' },
{ offset: 1, color: 'rgba(236, 105, 65, 0.3)' }
]
}
},
symbol: 'none',
data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240]
}
]
};
chart.setOption(option);
// 响应式调整 - 使用ResizeObserver监听容器尺寸变化
let resizeTimer = null;
const handleResize = () => {
// 防抖处理，避免频繁调用resize
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(() => {
chart.resize();
}, 100);
};
// 监听窗口大小变化
window.addEventListener('resize', handleResize);
// 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
let resizeObserver = null;
if (window.ResizeObserver) {
resizeObserver = new ResizeObserver(() => {
// 使用setTimeout确保DOM更新完成后再调整图表
setTimeout(() => {
handleResize();
}, 0);
});
resizeObserver.observe(chartRef.current);
}
return () => {
window.removeEventListener('resize', handleResize);
if (resizeObserver) {
resizeObserver.disconnect();
}
if (resizeTimer) {
clearTimeout(resizeTimer);
}
chart.dispose();
};
}
}, []);
// 表格列定义
const columns = [
{
title: '编号',
dataIndex: 'id',
key: 'id',
width: 80,
render: (text, record, index) => {
const page = pagination.current || 1;
const pageSize = pagination.pageSize || 5;
const number = (page - 1) * pageSize + index + 1;
return `0${number}`.slice(-2);
}
},
{
title: '报警时间',
dataIndex: 'alarmTime',
key: 'alarmTime',
width: 150,
},
{
title: '报警传感器名称',
dataIndex: 'sensorName',
key: 'sensorName',
width: 150,
},
{
title: '报警类型',
dataIndex: 'alarmType',
key: 'alarmType',
width: 120,
},
{
title: '报警内容',
dataIndex: 'alarmContent',
key: 'alarmContent',
width: 200,
},
{
title: '优先级',
dataIndex: 'priority',
key: 'priority',
width: 80,
render: (text) => {
const colorMap = {
'高': '#FF4D4F',
'中': '#FAAD14',
'低': '#52C41A'
};
return <span style={{ color: colorMap[text] || '#333' }}>{text}</span>;
}
},
{
title: '处理状态',
dataIndex: 'status',
key: 'status',
width: 100,
render: (text) => {
const statusMap = {
'未处理': { color: '#FF4D4F', bg: '#FFF2F0' },
'处理中': { color: '#FAAD14', bg: '#FFFBE6' },
'已处理': { color: '#52C41A', bg: '#F6FFED' }
};
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: 'processTime',
key: 'processTime',
width: 150,
},
{
title: '处理人',
dataIndex: 'processor',
key: 'processor',
width: 100,
},
{
title: '操作',
key: 'action',
width: 120,
render: (_, record) => (
<div>
<Button type="link" size="small" style={{ padding: 0, marginRight: 8 }}>
查看
</Button>
</div>
),
},
];
// 模拟数据
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 (
<div className={styles.Ocontainer}>
<div className={styles.OcontainerTop}>
<div className={styles.OcontainerTopLeft}>
<div className={styles.OcontainerTopLeftTop}>
<div className={styles.alarmO}>
<div className={styles.alarmOLeft}>
<img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
</div>
<div className={styles.alarmORight}>
<div className={styles.alarmORightText1}>总报警</div>
<div className={styles.alarmORightText2}>1456</div>
<div className={styles.alarmORightText3}>
<div>
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
</div>
<div>
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
</div>
</div>
</div>
</div>
<div className={styles.alarmTw}>
<div className={styles.alarmTwLeft}>
<img style={{ width: 58, height: 47 }} src={alarm1} alt='alarm1' />
</div>
<div className={styles.alarmTwRight}>
<div className={styles.alarmTwRightText1}>一级报警</div>
<div className={styles.alarmTwRightText2}>357</div>
<div className={styles.alarmTwRightText3}>
<div>
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
</div>
<div>
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
</div>
</div>
</div>
</div>
<div className={styles.alarmTh}>
<div className={styles.alarmThLeft}>
<img style={{ width: 58, height: 47 }} src={alarm2} alt='alarm2' />
</div>
<div className={styles.alarmThRight}>
<div className={styles.alarmThRightText1}>二级报警</div>
<div className={styles.alarmThRightText2}>401</div>
<div className={styles.alarmThRightText3}>
<div>
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
</div>
<div>
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
</div>
</div>
</div>
</div>
<div className={styles.alarmF}>
<div className={styles.alarmFLeft}>
<img style={{ width: 58, height: 47 }} src={alarm3} alt='alarm3' />
</div>
<div className={styles.alarmFRight}>
<div className={styles.alarmFRightText1}>三级报警</div>
<div className={styles.alarmFRightText2}>556</div>
<div className={styles.alarmFRightText3}>
<div>
未处理 <text style={{ color: '#FF4D4F' }}>6</text>
</div>
<div>
处理中 <text style={{ color: '#2e4cd4' }}>10</text>
</div>
</div>
</div>
</div>
</div>
<div className={styles.OcontainerTopLeftBottom}>
<div className={styles.OcontainerTopLeftBottomTitle}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>预警看板</div>
</div>
<div className={styles.titleRight}>
<div>检测对象</div>
<Select
style={{ width: 80 }}
defaultValue="储罐"
options={[
{ value: '储罐', label: '储罐' },
{ value: '管道', label: '管道' },
{ value: '设备', label: '设备' }
]}
/>
</div>
</div>
<div className={styles.OcontainerTopLeftBottomChart} ref={chartRef}>
</div>
</div>
</div>
<div className={styles.OcontainerTopRight}>
<div className={styles.realTimeDataHeader}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>实时数据采集</div>
</div>
<div className={styles.totalCount}>
总数： <text style={{ color: '#2e4cd4' }}>1378</text>
</div>
</div>
<div className={styles.dataItem1}>
<div className={styles.dataItemLeft}>
<div className={styles.areaName}>储罐液化装置区</div>
<div className={styles.rValue}>R值: 1765</div>
<div className={styles.codeNumber}>编号:XXXXXXXX</div>
</div>
<div className={styles.dataItemRight}>
<div className={styles.circleContainer}>
<div className={styles.outerCircle}>
<div className={styles.innerCircle}>
<div className={styles.levelText}>三级</div>
<div className={styles.riskText}>危险等级</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.dataItem2}>
<div className={styles.dataItemLeft}>
<div className={styles.areaName}>储罐液化装置区</div>
<div className={styles.rValue}>R值: 1765</div>
<div className={styles.codeNumber}>编号:XXXXXXXX</div>
</div>
<div className={styles.dataItemRight}>
<div className={styles.circleContainer}>
<div className={styles.outerCircle}>
<div className={styles.innerCircle}>
<div className={styles.levelText}>一级</div>
<div className={styles.riskText}>危险等级</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.dataItem3}>
<div className={styles.dataItemLeft}>
<div className={styles.areaName}>储罐液化装置区</div>
<div className={styles.rValue}>R值: 1765</div>
<div className={styles.codeNumber}>编号:XXXXXXXX</div>
</div>
<div className={styles.dataItemRight}>
<div className={styles.circleContainer}>
<div className={styles.outerCircle}>
<div className={styles.innerCircle}>
<div className={styles.levelText}>二级</div>
<div className={styles.riskText}>危险等级</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.dataItem4}>
<div className={styles.dataItemLeft}>
<div className={styles.areaName}>储罐液化装置区</div>
<div className={styles.rValue}>R值: 1765</div>
<div className={styles.codeNumber}>编号:XXXXXXXX</div>
</div>
<div className={styles.dataItemRight}>
<div className={styles.circleContainer}>
<div className={styles.outerCircle}>
<div className={styles.innerCircle}>
<div className={styles.levelText}>三级</div>
<div className={styles.riskText}>危险等级</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* 表格 */}
<div className={styles.OcontainerBottom}>
{/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
<div className={styles.tableHeader}>
<div className={styles.tableTitle}>
<div className={styles.titleIcon}></div>
<div>报警信息列表</div>
</div>
<div className={styles.tableActions}>
<Button
type="primary"
onClick={handleExport}
style={{ marginRight: 8 }}
>
<img src={exportIcon} alt="导出" style={{ width: 16, height: 16, margin: '-2px 6px 0 0px'}} />
导出word 报告
</Button>
<Button
type="primary"
onClick={handleBatchDelete}
>
<img src={deleteIcon} alt="删除" style={{ width: 16, height: 16, margin: '-2px 6px 0 0px' }} />
批量删除
</Button>
</div>
</div>
{/* 表格 5行10列 带页码 每页5条数据 */}
<div className={styles.tableContainer}>
<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} 条`,
}}
scroll={{ x: 1200 }}
/>
</div>
</div>
</div>
);
};
export default OnlineMonitoring;

919
src/pages/business_basic/components/OnlineMonitoring.less
Unescape Escape View File

@ -1,919 +0,0 @@
.Ocontainer {
padding: 8px 6px 0px 6px;
height: 100%;
display: flex;
flex-direction: column;
.OcontainerTop {
display: flex;
height: 50%;
margin-bottom: 5px;
.OcontainerTopLeft {
width: 72%;
height: 100%;
// background-color: pink;
margin-right: 10px;
// display: flex;
.OcontainerTopLeftTop {
width: 100%;
height: 35%;
display: flex;
gap: 12px;
.alarmO {
flex: 1;
height: 100%;
background-color: #F4F7FF;
border: 1px solid #AED3FF;
border-bottom: 0px solid #AED3FF;
border-radius: 4px;
box-shadow: 0px 2px 31px 0px #5382FE33 inset;
display: flex;
.alarmOLeft {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.alarmORight {
flex: 1;
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
margin-left: 2px;
gap: 18px;
font-family: PingFang SC;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
.alarmORightText1 {
margin-top: 15px;
}
.alarmORightText2 {
font-weight: 700;
font-size: 16px;
}
.alarmORightText3 {
display: flex;
gap: 22px;
}
}
}
.alarmTw {
flex: 1;
height: 100%;
background-color: #FFF5f4;
border: 1px solid #FFC5BC;
border-bottom: 0px solid #FFC5BC;
border-radius: 4px;
box-shadow: 0px 2px 31px 0px #FE5F4C33 inset;
display: flex;
.alarmTwLeft {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.alarmTwRight {
flex: 1;
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
margin-left: 2px;
gap: 18px;
font-family: PingFang SC;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
.alarmTwRightText1 {
margin-top: 15px;
}
.alarmTwRightText2 {
font-weight: 700;
font-size: 16px;
}
.alarmTwRightText3 {
display: flex;
gap: 22px;
}
}
}
.alarmTh {
flex: 1;
height: 100%;
background-color: #FFF7F2;
border: 1px solid #FFD9B2;
border-bottom: 0px solid #FFD9B2;
border-radius: 4px;
box-shadow: 0px 2px 31px 0px #FD883C33 inset;
display: flex;
.alarmThLeft {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.alarmThRight {
flex: 1;
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
margin-left: 2px;
gap: 18px;
font-family: PingFang SC;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
.alarmThRightText1 {
margin-top: 15px;
}
.alarmThRightText2 {
font-weight: 700;
font-size: 16px;
}
.alarmThRightText3 {
display: flex;
gap: 22px;
}
}
}
.alarmF {
flex: 1;
height: 100%;
background-color: #EFF9FF;
border: 1px solid #89E1FF;
border-bottom: 0px solid #89E1FF;
border-radius: 4px;
box-shadow: 0px 2px 31px 0px #22A4FD33 inset;
display: flex;
.alarmFLeft {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.alarmFRight {
flex: 1;
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
margin-left: 2px;
gap: 18px;
font-family: PingFang SC;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
.alarmFRightText1 {
margin-top: 15px;
}
.alarmFRightText2 {
font-weight: 700;
font-size: 16px;
}
.alarmFRightText3 {
display: flex;
gap: 22px;
}
}
}
}
.OcontainerTopLeftBottom {
margin-top: 12px;
background-color: #fff;
width: 100%;
height: 60%;
.OcontainerTopLeftBottomTitle {
display: flex;
justify-content: space-between;
align-items: center;
// padding: 8px 15px;
padding: 8px 15px 0px 15px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.titleRight {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-style: Medium;
font-size: 13px;
line-height: 100%;
letter-spacing: 0%;
.selectBox {
padding: 4px 8px;
border: 1px solid #d9d9d9;
border-radius: 4px;
background-color: #fff;
font-size: 12px;
color: #333;
outline: none;
&:focus {
border-color: #2E4CD4;
}
}
}
}
.OcontainerTopLeftBottomChart {
flex: 1;
width: 100%;
height: 75%;
}
}
}
.OcontainerTopRight {
flex: 1;
height: calc(100% - 3.3px);
background-color: #fff;
background-image: url('@/assets/safe_majorHazard/online_monitoring/backTopRight.png');
background-size: 100% auto;
display: flex;
flex-direction: column;
overflow-y: auto;
.realTimeDataHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px;
margin-bottom: 10px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.totalCount {
font-family: PingFang SC;
font-weight: 400;
font-size: 13px;
color: #333333;
}
}
.dataItem {
height: 23%;
flex-shrink: 0;
border: 1px solid #89E1FF;
border-radius: 2px;
margin: 0 15px;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-size: 14px;
// color: #666;
background-color: #EFF9FF;
&:last-child {
// margin-bottom: 1px;
}
}
.dataItem1 {
height: 25%;
flex-shrink: 0;
border: 1px solid #89E1FF;
border-radius: 4px;
margin: 0 15px;
margin-bottom: 6px;
display: flex;
align-items: center;
padding: 0px 15px;
background-color: #EFF9FF;
.dataItemLeft {
width: 65%;
display: flex;
flex-direction: column;
gap: 8px;
.areaName {
font-family: PingFang SC;
font-weight: 400;
font-size: 13px;
color: #333333;
line-height: 2.2;
}
.rValue {
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 0.2;
}
.codeNumber {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #666666;
}
}
.dataItemRight {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.circleContainer {
position: relative;
height: 80%;
aspect-ratio: 1; // 强制宽高比1:1
.outerCircle {
width: 100%;
height: 100%;
background-color: rgba(51, 176, 253, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.innerCircle {
width: 70%;
height: 70%;
background-color: rgba(4, 128, 251, 0.8);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.levelText {
font-family: PingFang SC;
font-weight: 500;
font-size: 11px;
color: #FFFFFF;
line-height: 1.4;
margin-top: -4px;
}
.riskText {
font-family: PingFang SC;
font-weight: 300;
font-size: 8px;
color: #FFFFFF;
line-height: 1;
}
}
}
}
}
}
.dataItem2 {
height: 25%;
flex-shrink: 0;
border: 1px solid rgba(255, 197, 188, 1);
border-radius: 4px;
margin: 0 15px;
margin-bottom: 6px;
display: flex;
align-items: center;
padding: 0px 15px;
background-color: #fff5f4;
.dataItemLeft {
width: 65%;
display: flex;
flex-direction: column;
gap: 8px;
.areaName {
font-family: PingFang SC;
font-weight: 400;
font-size: 13px;
color: #333333;
line-height: 2.2;
}
.rValue {
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 0.2;
}
.codeNumber {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #666666;
}
}
.dataItemRight {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.circleContainer {
position: relative;
height: 80%;
aspect-ratio: 1;
.outerCircle {
width: 100%;
height: 100%;
background-color: rgba(254, 214, 209, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.innerCircle {
width: 70%;
height: 70%;
background-color: rgba(253, 41, 14, 1);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.levelText {
font-family: PingFang SC;
font-weight: 500;
font-size: 11px;
color: #FFFFFF;
line-height: 1.4;
margin-top: -4px;
}
.riskText {
font-family: PingFang SC;
font-weight: 300;
font-size: 8px;
color: #FFFFFF;
line-height: 1;
}
}
}
}
}
}
.dataItem3 {
height: 25%;
flex-shrink: 0;
border: 1px solid rgba(255, 217, 178, 1);
border-radius: 4px;
margin: 0 15px;
margin-bottom: 6px;
display: flex;
align-items: center;
padding: 0px 15px;
background-color: #fef6f1;
.dataItemLeft {
width: 65%;
display: flex;
flex-direction: column;
gap: 8px;
.areaName {
font-family: PingFang SC;
font-weight: 400;
font-size: 13px;
color: #333333;
line-height: 2.2;
}
.rValue {
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 0.2;
}
.codeNumber {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #666666;
}
}
.dataItemRight {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.circleContainer {
position: relative;
height: 80%;
aspect-ratio: 1;
.outerCircle {
width: 100%;
height: 100%;
background-color: rgba(255, 234, 218, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.innerCircle {
width: 70%;
height: 70%;
background-color: rgba(252, 103, 18, 1);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.levelText {
font-family: PingFang SC;
font-weight: 500;
font-size: 11px;
color: #FFFFFF;
line-height: 1.4;
margin-top: -4px;
}
.riskText {
font-family: PingFang SC;
font-weight: 300;
font-size: 8px;
color: #FFFFFF;
line-height: 1;
}
}
}
}
}
}
.dataItem4 {
height: 25%;
flex-shrink: 0;
border: 1px solid #89E1FF;
border-radius: 4px;
margin: 0 15px;
margin-bottom: 6px;
display: flex;
align-items: center;
padding: 0px 15px;
background-color: #EFF9FF;
.dataItemLeft {
width: 65%;
display: flex;
flex-direction: column;
gap: 8px;
.areaName {
font-family: PingFang SC;
font-weight: 400;
font-size: 13px;
color: #333333;
line-height: 2.2;
}
.rValue {
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 0.2;
}
.codeNumber {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #666666;
}
}
.dataItemRight {
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.circleContainer {
position: relative;
height: 80%;
aspect-ratio: 1;
.outerCircle {
width: 100%;
height: 100%;
background-color: rgba(51, 176, 253, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.innerCircle {
width: 70%;
height: 70%;
background-color: rgba(4, 128, 251, 0.8);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.levelText {
font-family: PingFang SC;
font-weight: 500;
font-size: 11px;
color: #FFFFFF;
line-height: 1.4;
margin-top: -4px;
}
.riskText {
font-family: PingFang SC;
font-weight: 300;
font-size: 8px;
color: #FFFFFF;
line-height: 1;
}
}
}
}
}
}
}
}
.OcontainerBottom {
background-color: #fff;
flex: 1;
padding: 8px 15px 5px 15px;
display: flex;
flex-direction: column;
.tableHeader {
display: flex;
justify-content: space-between;
align-items: center;
// margin-bottom: 15px;
padding-bottom: 5px;
// border-bottom: 1px solid #f0f0f0;
.tableTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.tableActions {
display: flex;
gap: 8px;
// 自定义按钮样式
:global(.ant-btn) {
background-color: #ffffff !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
&:hover {
background-color: #f5f5f5 !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
&:focus {
background-color: #ffffff !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
&:active {
background-color: #e6e6e6 !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
// 主要按钮样式
&.ant-btn-primary {
background-color: #ffffff !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
&:hover {
background-color: #f5f5f5 !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
&:focus {
background-color: #ffffff !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
&:active {
background-color: #e6e6e6 !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
}
// 危险按钮样式
&.ant-btn-dangerous {
background-color: #ffffff !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
&:hover {
background-color: #f5f5f5 !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
&:focus {
background-color: #ffffff !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
&:active {
background-color: #e6e6e6 !important;
border-color: #DFE4F6 !important;
color: #333333 !important;
box-shadow: none !important;
}
}
// 禁用状态
&:disabled {
background-color: #f5f5f5 !important;
border-color: #d9d9d9 !important;
color: #bfbfbf !important;
box-shadow: none !important;
}
}
}
}
.tableContainer {
flex: 1;
overflow: hidden;
:global(.ant-table) {
font-size: 12px;
}
:global(.ant-table-thead > tr > th) {
background-color: #f5f5fa;
font-weight: 500;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
}
:global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;
}
}
}
}

581
src/pages/business_basic/components/ResponsibilityImplementation.js
Unescape Escape View File

@ -1,581 +0,0 @@
import React from 'react';
import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
import { PhoneOutlined, IdcardOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './ResponsibilityImplementation.less';
import upload from '@/assets/business_basic/upload.png';
import download from '@/assets/business_basic/download.png';
import import1 from '@/assets/business_basic/import1.png';
import fire_fighting1 from '@/assets/business_basic/fire_fighting1.png';
import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png';
import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png';
import frameIcon from '@/assets/business_basic/Frame.png';
import background1 from '@/assets/business_basic/background1.png';
import export1 from '@/assets/business_basic/export1.png';
const ResponsibilityImplementation = () => {
// 搜索处理函数
const onSearch = (value) => {
console.log('搜索内容:', value);
// 这里可以添加实际的搜索逻辑
};
const columns = [
{
title:"编号",
dataIndex:"id",
key:"id",
width:80,
},
{
title:"组织代码",
dataIndex:"orgCode",
key:"orgCode",
width:120,
},
{
title:"组织类型",
dataIndex:"orgType",
key:"orgType",
width:120,
},
{
title:"负责人",
dataIndex:"manager",
key:"manager",
width:100,
},
{
title:"所属部门",
dataIndex:"department",
key:"department",
width:120,
},
{
title:"创建时间",
dataIndex:"createTime",
key:"createTime",
width:120,
},
{
title:"人员规模",
dataIndex:"staffCount",
key:"staffCount",
width:100,
},
{
title:"状态",
dataIndex:"status",
key:"status",
width:80,
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'
};
}
return {};
};
return (
<span style={getStatusStyle(text)}>
{text}
</span>
);
}
},
{
title:"操作",
dataIndex:"action",
key:"action",
width:120,
render: (text, record) => {
const handleEdit = (record) => {
console.log('编辑记录:', record);
};
const handleDelete = (record) => {
console.log('删除记录:', record);
};
return (
<div style={{
display: 'flex',
gap: '8px',
justifyContent: 'center',
alignItems: 'center'
}}>
<Button
onClick={() => handleEdit(record)}
style={{
color: '#2E4CD4',
backgroundColor: 'transparent',
borderColor: '#E6E9FB',
fontSize: '12px',
height: '28px',
padding: '0 12px'
}}
>
编辑
</Button>
<Button
onClick={() => handleDelete(record)}
style={{
color: '#FF2526',
backgroundColor: 'transparent',
borderColor: '#FFE0E2',
fontSize: '12px',
height: '28px',
padding: '0 12px'
}}
>
删除
</Button>
</div>
);
}
}
];
// 固定的假数据
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 (
<div className={styles.XcontainerR}>
{/* 警告提示框 */}
<div className={styles.warningBox}>
<img src={frameIcon} alt="警告" className={styles.warningIcon} />
<span className={styles.warningText}>
有5个消防设备需要维护，3个资质证书即将到期，请及时处理。
</span>
</div>
<div className={styles.containerOne}>
<div className={styles.containerOneLeft}>
{/* 第一行：标题和按钮 */}
<div className={styles.leftTopSection}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>组织架构图预览</div>
</div>
<div className={styles.buttonGroup}>
<Button className={styles.actionBtn}>
<img src={upload} alt="上传图表" className={styles.btnIcon} />
上传图表
</Button>
<Button className={styles.actionBtn}>
<img src={download} alt="下载" className={styles.btnIcon} />
下载
</Button>
</div>
</div>
{/* 第二行：图片占位 */}
<div className={styles.leftBottomSection}>
<div className={styles.imagePlaceholder}>
<img src={fire_fighting1} alt="消防1" className={styles.imageIcon1} />
<div className={styles.imageRow}>
<img src={fire_fighting2} alt="消防2" className={styles.imageIcon2} />
<img src={fire_fighting3} alt="消防3" className={styles.imageIcon3} />
</div>
</div>
</div>
</div>
<div className={styles.containerOneRight}>
{/* 第一行：标题 + 搜索栏 + 下拉选择框 */}
<div className={styles.rightTopSection}>
<div className={styles.rightTopLeft}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>成员信息管理</div>
</div>
</div>
<div className={styles.rightTopRight}>
<div className={styles.searchGroup}>
<Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 200}} />
<Select
defaultValue="全部组织"
className={styles.organizationSelect}
options={[
{ value: '全部组织', label: '全部组织' },
{ value: '技术部', label: '技术部' },
{ value: '生产部', label: '生产部' },
{ value: '安全部', label: '安全部' },
]}
/>
</div>
</div>
</div>
{/* 第二行：三个小块 */}
<div className={styles.rightBottomSection}>
<div className={styles.threeBlocksContainer}>
<div className={styles.blockItem}>
<div className={styles.blockContent}>
<div className={styles.backgroundContainer}>
{/* 第一个块：姓名和单位 */}
<div className={styles.infoBlock}>
<div className={styles.nameText}>张明</div>
<div className={styles.unitText}>东义区消防队</div>
</div>
{/* 第二个块：电话 */}
<div className={styles.infoBlock}>
<PhoneOutlined className={styles.infoIcon} />
<span className={styles.infoText}>132****3847</span>
</div>
{/* 第三个块：身份证 */}
<div className={styles.infoBlock}>
<IdcardOutlined className={styles.infoIcon} />
<span className={styles.infoText}>1304************10</span>
</div>
{/* 第四个块：职位标签 */}
<div className={styles.infoBlock}>
<div className={styles.tagContainer}>
<div className={styles.tagBlue1}>队长</div>
<div className={styles.tagBlue2}>消防工程师</div>
</div>
</div>
{/* 第五个块：证书状态 */}
<div className={styles.infoBlock}>
<div className={styles.tagContainer}>
<div className={styles.tagBlue3}>消防工程师</div>
<div className={styles.tagYellow}>证书7天后到期</div>
</div>
</div>
{/* 第六个块：操作按钮 */}
<div className={styles.actionBlock}>
<div className={styles.buttonContainer}>
<Button className={styles.editBtn}>编辑</Button>
<Button className={styles.deleteBtn}>删除</Button>
</div>
</div>
</div>
</div>
</div>
<div className={styles.blockItem}>
<div className={styles.blockContent}>
<div className={styles.backgroundContainer2}>
{/* 第一个块：姓名和单位 */}
<div className={styles.infoBlock2}>
<span className={styles.nameText2}>李小明</span>
<span className={styles.unitText2}>消防支队</span>
</div>
{/* 第二个块：电话 */}
<div className={styles.infoBlock2}>
<PhoneOutlined className={styles.infoIcon2} />
<span className={styles.infoText2}>138****5678</span>
</div>
{/* 第三个块：身份证 */}
<div className={styles.infoBlock2}>
<IdcardOutlined className={styles.infoIcon2} />
<span className={styles.infoText2}>1304************20</span>
</div>
{/* 第四个块：职位标签 */}
<div className={styles.infoBlock2}>
<div className={styles.tagContainer2}>
<div className={styles.tagBlue4}>副队长</div>
<div className={styles.tagBlue5}>安全员</div>
</div>
</div>
{/* 第五个块：证书状态 */}
<div className={styles.infoBlock2}>
<div className={styles.tagContainer2}>
<div className={styles.tagBlue6}>安全员证</div>
<div className={styles.tagGreen}>证书正常</div>
</div>
</div>
{/* 第六个块：操作按钮 */}
<div className={styles.actionBlock2}>
<div className={styles.buttonContainer2}>
<Button className={styles.editBtn2}>编辑</Button>
<Button className={styles.deleteBtn2}>删除</Button>
</div>
</div>
</div>
</div>
</div>
<div className={styles.blockItem}>
<div className={styles.blockContent}>
<div className={styles.backgroundContainer3}>
{/* 第一个块：姓名和单位 */}
<div className={styles.infoBlock3}>
<span className={styles.nameText3}>王小红</span>
<span className={styles.unitText3}>消防中队</span>
</div>
{/* 第二个块：电话 */}
<div className={styles.infoBlock3}>
<PhoneOutlined className={styles.infoIcon3} />
<span className={styles.infoText3}>139****9012</span>
</div>
{/* 第三个块：身份证 */}
<div className={styles.infoBlock3}>
<IdcardOutlined className={styles.infoIcon3} />
<span className={styles.infoText3}>1304************30</span>
</div>
{/* 第四个块：职位标签 */}
<div className={styles.infoBlock3}>
<div className={styles.tagContainer3}>
<div className={styles.tagBlue7}>队员</div>
<div className={styles.tagBlue8}>技术员</div>
</div>
</div>
{/* 第五个块：证书状态 */}
<div className={styles.infoBlock3}>
<div className={styles.tagContainer3}>
<div className={styles.tagBlue9}>技术员证</div>
<div className={styles.tagOrange}>证书3天后到期</div>
</div>
</div>
{/* 第六个块：操作按钮 */}
<div className={styles.actionBlock3}>
<div className={styles.buttonContainer3}>
<Button className={styles.editBtn3}>编辑</Button>
<Button className={styles.deleteBtn3}>删除</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.containerTwo}>
{/* 第一块：标题 */}
<div className={styles.containerTwoTitle}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>组织架构管理</div>
</div>
</div>
{/* 第二个大块：搜索和按钮 */}
<div className={styles.containerTwoActions}>
<div className={styles.searchSection}>
<Input.Search placeholder="搜索姓名、工号..." onSearch={onSearch} style={{ width: 180 }} />
</div>
<div className={styles.buttonSection}>
<Button className={styles.addBtn}>
<PlusOutlined className={styles.addIcon} />
新增组织
</Button>
<Button className={styles.importBtn}>
<img src={import1} alt="批量导入" className={styles.importIcon} />
批量导入
</Button>
<Button className={styles.exportBtn}>
<img src={export1} alt="批量导出" className={styles.exportIcon} />
批量导出
</Button>
</div>
</div>
{/* 第三个大块：表格 */}
<div className={styles.containerTwoTable}>
<StandardTable
columns={columns}
data={{
list: tableData, // ======== 表格数据列表 ========
pagination: { // ======== 分页配置 ========
currentPage: 1, // ======== 当前页码 ========
pageSize: 5, // ======== 每页显示10条数据 ========
total: tableData.length, // ======== 总数据条数 ========
} // ======== 分页配置结束 ========
}} // ======== 数据对象结束 ========
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ========
onSelectRow={() => {}} // ======== 行选择事件处理函数 ========
onChange={() => {}} // ======== 表格变化事件处理函数 ========
pagination={{
currentPage: 1,
pageSize: 5,
total: tableData.length,
showSizeChanger: false,
showQuickJumper: true,
showTotal: (total, range) =>
`共 ${total} 条`,
locale: {
jump_to: '前往',
page: '页',
items_per_page: '条/页',
}
}}
/>
</div>
</div>
</div>
);
};
export default ResponsibilityImplementation;

1000
src/pages/business_basic/components/ResponsibilityImplementation.less
View File

File diff suppressed because it is too large Load Diff

865
src/pages/business_basic/components/RiskAssessment.js
Unescape Escape View File

@ -1,865 +0,0 @@
import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button, Segmented } from 'antd';
import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './RiskAssessment.less';
// import './RiskAssessment.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 RiskAssessment = () => {
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: 5,
total: 0,
});
// 饼图初始化
useEffect(() => {
if (pieChartRef.current) {
const pieChart = echarts.init(pieChartRef.current);
const pieOption = {
color: ['#44BB5F', '#F8C541', '#A493FB', '#4B69F1', '#949FD0'],
legend: {
orient: 'vertical',
right: '10%',
top: 'center',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
color: '#333'
}
},
series: [{
name: '设备状态',
type: 'pie',
radius: ['40%', '70%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 480, name: '正常' },
{ value: 289, name: '故障' },
{ value: 200, name: '维修中' },
{ value: 150, name: '待验收' },
{ value: 161, name: '停用' }
]
}]
};
pieChart.setOption(pieOption);
// 响应式调整
const handlePieResize = () => {
if (pieChart && !pieChart.isDisposed()) {
pieChart.resize();
}
};
window.addEventListener('resize', handlePieResize);
return () => {
window.removeEventListener('resize', handlePieResize);
if (pieChart && !pieChart.isDisposed()) {
pieChart.dispose();
}
};
}
}, []);
// 故障类型饼图初始化
useEffect(() => {
if (faultPieChartRef.current) {
const faultPieChart = echarts.init(faultPieChartRef.current);
const faultPieOption = {
color: ['#FF3E48', '#FF8800', '#FFC403'],
legend: {
orient: 'vertical',
right: '10%',
top: 'center',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
color: '#333'
}
},
series: [{
name: '设备故障类型',
type: 'pie',
radius: '70%',
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: '{b}: {c}',
fontSize: 12
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
data: [
{ value: 120, name: '紧急' },
{ value: 80, name: '重要' },
{ value: 60, name: '一般' }
]
}]
};
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: ['#8979FF', '#3CC3DF'],
legend: {
// data: ['消防水泵1', '消防水泵2'],
top: "-3px",
// left: "center",
// itemGap: 40,
itemWidth: 20,
itemHeight: 8,
// icon: 'path://M902 472.7H747.9c-19.1-113.3-117.7-200-236.4-200s-217.3 86.7-236.4 200H119.7c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h155.5c19.1 113.3 117.7 200 236.4 200S728.9 666 748 552.7h154c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z m-390.5 200c-88.2 0-160-71.8-160-160s71.8-160 160-160 160 71.8 160 160-71.8 160-160 160z',
textStyle: {
fontSize: 10
}
},
grid: {
left: '2%',
right: '4%',
bottom: '2%',
top: '12%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
min: 0,
max: 30,
axisLabel: {
formatter: '{value}',
fontSize: 10
}
},
series: [
{
name: '消防水泵1',
type: 'line',
smooth: false,
lineStyle: {
width: 2,
color: '#8979FF'
},
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)' }
]
}
},
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fff',
borderColor: '#8979FF',
borderWidth: 1
},
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
},
{
name: '消防水泵2',
type: 'line',
smooth: false,
lineStyle: {
width: 2,
color: '#3CC3DF'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
{ offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
]
}
},
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fff',
borderColor: '#3CC3DF',
borderWidth: 1
},
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22]
}
]
};
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 || 5;
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: 140,
},
{
title: '安装位置',
dataIndex: 'installLocation',
key: 'installLocation',
width: 200,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 80,
render: (text) => {
const statusMap = {
'故障': { color: '#FF4D4F', bg: '#FFF2F0' },
'预警': { color: '#FAAD14', bg: '#FFF3E9' },
'正常': { 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,
border: '1px solid #E6E9FB',
backgroundColor: 'transparent',
borderRadius: '4px'
}}>
详情
</Button>
</div>
),
},
];
// 模拟数据
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 className={styles.Rcontainer}>
{/* 第一个div - 高度20% */}
<div className={styles.RcontainerTop}>
<div className={styles.sectionContent}>
<div className={styles.blocksContainer}>
{/* 块1 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>设备总数</div>
<div className={styles.blockNumber}>1280</div>
</div>
<div className={styles.blockRight}>
<img src={eqicon1} alt="设备总数" className={styles.blockImage} />
</div>
</div>
{/* 块2 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>正常运行</div>
<div className={styles.blockNumber}>480</div>
</div>
<div className={styles.blockRight}>
<img src={eqicon2} alt="高风险设备" className={styles.blockImage} />
</div>
</div>
{/* 块3 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>需要维护</div>
<div className={styles.blockNumber}>347</div>
</div>
<div className={styles.blockRight}>
<img src={eqicon3} alt="今日预警次数" className={styles.blockImage} />
</div>
</div>
{/* 块4 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>故障设备</div>
<div className={styles.blockNumber}>289</div>
</div>
<div className={styles.blockRight}>
<img src={eqicon4} alt="未处理预警" className={styles.blockImage} />
</div>
</div>
</div>
</div>
</div>
<div className={styles.RcontainerMiddle}>
<div className={styles.sectionContent}>
<div className={styles.middleBlock1}>
<div className={styles.block1Header}>
<div className={styles.block1Title}>
<div className={styles.titleIcon}></div>
设备状态分布
</div>
<Segmented
className={styles.block1Segmented}
options={['月', '季', '年']}
onChange={(value) => {
console.log(value);
}}
/>
</div>
{/* 设备状态饼图 */}
<div className={styles.deviceStatusChart} ref={pieChartRef}>
</div>
</div>
<div className={styles.middleBlock12}>
<div className={styles.block1Header}>
<div className={styles.block1Title}>
<div className={styles.titleIcon}></div>
设备故障类型分布
</div>
<Select
className={styles.customSelect}
style={{
width: 120,
display: 'flex',
alignItems: 'center'
}}
defaultValue="全部区域"
options={[
{ value: '全部区域', label: '全部区域' },
{ value: '部分区域', label: '部分区域' },
]}
/>
</div>
{/* 设备故障类型饼图 */}
<div className={styles.deviceStatusChart} ref={faultPieChartRef}>
</div>
</div>
<div className={styles.middleBlock2}>
<div className={styles.middleBlock2Title}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>设备运行参数</div>
</div>
<div className={styles.titleRight}>
<Select
style={{ width: 80 }}
defaultValue="今日"
options={[
{ value: '近3天', label: '近3天' },
{ value: '近7天', label: '近7天' },
]}
/>
</div>
</div>
<div className={styles.middleBlock2Chart} ref={chartRef}>
</div>
</div>
</div>
</div>
{/* 第三个div - 占满剩余位置 */}
<div className={styles.RcontainerBottom}>
<div className={styles.sectionContent}>
<div className={styles.leftBlock}>
{/* 第一行块 - 蓝色方块加标题 */}
<div className={styles.leftBlockTitle}>
<div className={styles.titleIcon}></div>
<div>预警信息</div>
</div>
<div className={styles.developmentContainer}>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>灭火器压力不足</div>
<div className={styles.subText}>2号楼3层 丨 15分钟前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>烟雾探测器电池低电量</div>
<div className={styles.subText}>1号楼5层 丨 1小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>消防栓维护到期</div>
<div className={styles.subText}>3号楼1层 丨 2小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.normalTag}>一般</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>应急照明故障</div>
<div className={styles.subText}>地下停车场 丨 3小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.normalTag}>一般</div>
</div>
</div>
</div>
</div>
<div className={styles.rightBlock}>
{/* 表格 */}
<div className={styles.tableHeader}>
<div className={styles.tableTitle}>
<div className={styles.titleIcon}></div>
<div>消防设备台账</div>
</div>
<div className={styles.tableActions}>
<button className={styles.actionButton} onClick={handleAddDevice}>
<span className={styles.buttonIcon}>+</span>
<span>新增设备</span>
</button>
<button className={styles.actionButton} onClick={handleExportData}>
<span className={styles.buttonIcon}><ExportOutlined /></span>
<span>导出数据</span>
</button>
</div>
</div>
{/* 表格 */}
<div className={styles.tableContainer}>
<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} 条`,
}}
// scroll={{ x: 1200 }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default RiskAssessment;

594
src/pages/business_basic/components/RiskAssessment.less
Unescape Escape View File

@ -1,594 +0,0 @@
.Rcontainer {
padding: 8px 6px 0px 6px;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
// 第一个div - 高度20%
.RcontainerTop {
height: 16%;
// background-color: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
flex-direction: column;
// padding: 15px;
.blocksContainer {
flex: 1;
display: flex;
gap: 10px;
height: 100%;
.blockItem {
flex: 1;
height: 100%;
display: flex;
background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
border-radius: 4px;
border: 2px solid #FFFFFF;
.blockLeft {
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
padding-left: 20px;
gap: 8px;
.blockTitle {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #333333;
line-height: 1.2;
}
.blockNumber {
font-family: PingFang SC;
font-weight: 700;
font-size: 24px;
color: #333333;
line-height: 1.2;
}
.blockChange {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #1269FF;
line-height: 1.2;
display: flex;
align-items: center;
gap: 4px;
.arrow {
font-size: 14px;
font-weight: bold;
}
.checkIcon {
font-size: 16px;
color: #1269FF;
}
}
}
.blockRight {
flex: 1;
height: 100%;
background-color: transparent;
border-radius: 0 4px 4px 0;
display: flex;
align-items: center;
justify-content: center;
.blockImage {
// width: 80%;
height: 65%;
// height: 80%;
object-fit: contain;
margin-right: -5px;
}
}
}
}
}
}
// 第二个div - 高度39%
.RcontainerMiddle {
height: 33%;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
display: flex;
gap: 10px;
height: 100%;
.middleBlock1 {
// flex: 1;
width: 28%;
height: 100%;
background: #fff;
border: 2px solid #fff;
// border-radius: 4px;
position: relative;
padding: 0px 10px 10px 2px;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.block1Segmented {
padding: 0;
margin: 0;
border: 1px solid #E3E3E3;
border-radius: 4px;
height: 28px;
:global(.ant-segmented) {
padding: 0;
margin: 0;
height: 28px;
}
:global(.ant-segmented-item) {
font-size: 12px;
padding: 2px 8px;
height: 26px;
line-height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
:global(.ant-segmented-item-selected) {
background-color: #1890ff;
color: #fff;
}
}
}
.deviceStatusChart {
position: absolute;
top: 35px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 10;
}
// .block1Chart {
// width: 100%;
// height: 100%;
// margin-top: 20px;
// .mapImage {
// margin-top: 7%;
// width: 90%;
// height: 77%;
// object-fit: cover;
// border-radius: 4px;
// display: block;
// margin-left: auto;
// margin-right: auto;
// }
// }
}
.middleBlock12 {
flex: 1;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
position: relative;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.block1Segmented {
padding: 0;
margin: 0;
border: 1px solid #E3E3E3;
border-radius: 4px;
height: 28px;
:global(.ant-segmented) {
padding: 0;
margin: 0;
height: 28px;
}
:global(.ant-segmented-item) {
font-size: 12px;
padding: 2px 8px;
height: 26px;
line-height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
:global(.ant-segmented-item-selected) {
background-color: #1890ff;
color: #fff;
}
}
.customSelect {
:global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
height: 26px !important;
display: flex !important;
align-items: center !important;
}
:global(.ant-select-selection-item) {
line-height: 24px !important;
// height: 24px !important;
display: flex !important;
align-items: center !important;
}
}
}
.deviceStatusChart {
position: absolute;
top: 35px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 10;
}
}
.middleBlock2 {
flex: 1;
height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff;
background-color: #fff;
// border-radius: 4px;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
.middleBlock2Title {
display: flex;
justify-content: space-between;
align-items: center;
// margin-bottom: 10px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.titleRight {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #666;
}
}
.middleBlock2Chart {
width: 100%;
height: 100%;
// min-height: 200px;
}
}
}
}
// 第三个div - 高度不超过45%
.RcontainerBottom {
height: 45%; // 限制高度不超过45%
max-height: 45%; // 确保最大高度不超过45%
display: flex;
flex-direction: column;
.sectionContent {
display: flex;
flex-direction: row;
gap: 10px;
padding: 0;
.leftBlock {
width: 28%;
flex-shrink: 0;
height: 100%;
background: #fff;
// background-size: cover;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
.leftBlockTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
margin-bottom: 10px;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.developmentContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
.developmentBlock1 {
flex: 1;
background-color: #F1F7FF;
border-radius: 4px;
padding: 15px 20px;
display: flex;
align-items: center;
width: 100%;
.leftContent {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
.mainText {
color: #333333;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 100%;
max-width: 500px;
}
.subText {
color: #666666;
font-size: 12px;
font-weight: 400;
font-family: PingFang SC;
width: 100%;
max-width: 400px;
}
}
.rightContent {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 10px;
min-width: 80px;
.importantTag {
background-color: #FFE0E2;
color: #FF3E48;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 45px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.normalTag {
background-color: #DAF3FF;
color: #00AAFA;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 45px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
}
}
}
}
.rightBlock {
width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff;
padding: 0;
display: flex;
flex-direction: column;
.tableHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px 5px 15px;
.tableTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.tableActions {
display: flex;
gap: 8px;
margin-top: 5px;
.actionButton {
display: flex;
align-items: center;
gap: 4px;
height: 28px;
border: 1px solid #DFE4F6;
border-radius: 4px;
color: #2E4CD4;
font-weight: 500;
font-size: 12px;
padding: 0px 8px;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #f0f2ff;
border-color: #2E4CD4;
}
&:active {
background-color: #e6ebff;
}
.buttonIcon {
font-size: 14px;
font-weight: bold;
}
}
}
}
.tableContainer {
flex: 1;
overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
:global(.ant-table) {
font-size: 12px;
}
:global(.ant-table-thead > tr > th) {
background-color: #f5f5fa;
font-weight: 500;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
color: #666666;
}
:global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;
}
}
}
}
}
}

271
src/pages/business_basic/form/StaffSheetCreateForm.js
Unescape Escape View File

@ -1,271 +0,0 @@
import { useState, useEffect } from 'react'
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
import SelectDeptTree from '@/components/SelectDeptTree'
import SelectOrganTree from '@/components/SelectOrganTree'
import datadictionary from '@/utils/dataDictionary'
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
import { NumberInput } from '@/components/NumberInput'
import styles from '../StaffSheetList.less'
import style from '@/global.less'
import dayjs from 'dayjs'
import { formatDate } from '@/utils/formatUtils'
const { Item: FormItem } = Form
const { TextArea } = Input
const dictData = datadictionary
//新增表单
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree
const StaffSheetCreateForm = (props => {
const [form] = Form.useForm()
const [jobStatus, setJobStatus] = useState('1')
const {
modalVisible,
handleAdd,
handleModalVisible,
loading,
dispatch,
selectDeptTree,
selectOrganTree
} = props
useEffect(() => {
form.setFieldsValue({
user_type: 'employee',
job_status: '1',
mgr_type: '0'
})
}, [])
const selectedDeptTreeValue = (deptRecord) => {
getDeptTreeBySelectTree = deptRecord
}
const selectedOrganTreeValue = (orgRecord) => {
getOrganTreeBySelectTree = orgRecord
}
const parentDeptTreeMethod = {
dispatch: dispatch,
selectDeptTree: selectDeptTree,
selectedDeptTreeValue: selectedDeptTreeValue,
}
const parentOrganTreeMethod = {
dispatch: dispatch,
selectOrganTree: selectOrganTree,
selectedOrganTreeValue: selectedOrganTreeValue
}
const okHandle = () => {
form.validateFields()
.then(fieldsValue => {
form.resetFields()
fieldsValue.birthday = formatDate(fieldsValue.birthday, 'YYYY-MM-DD')
fieldsValue.hiredate = formatDate(fieldsValue.hiredate, 'YYYY-MM-DD')
fieldsValue.departure_time = formatDate(fieldsValue.departure_time, 'YYYY-MM-DD')
fieldsValue.posts = fieldsValue.posts ? JSON.stringify(fieldsValue.posts) : null
// if (getDeptTreeBySelectTree) {
// fieldsValue.dept_code = getDeptTreeBySelectTree.dept_code
// fieldsValue.dept_name = getDeptTreeBySelectTree.title
// }
if (getOrganTreeBySelectTree) {
fieldsValue.org_code = getOrganTreeBySelectTree.org_code
fieldsValue.org_name = getOrganTreeBySelectTree.title
}
handleAdd(fieldsValue)
})
.catch(errInfo => {})
}
const afterClose = () =>{
form.resetFields();
}
const handleJobStatusChange = (value) => {
setJobStatus(value)
}
return (
<Modal
width={800}
height={550}
bodyStyle={{ height: '500px', overflowY: 'auto' }}
className={style.createForm}
centered
destroyOnClose
title='新增'
open={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
afterClose={() => afterClose()}
confirmLoading={loading}
>
<Form form={form} layout='vertical' requiredMark={false}>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='登录账号' name='user_name' rules={[{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='用户名称' name='user_name_cn' rules={[{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='用户性别' name='sex'>
<Select options={formatDictOptions(dictData.sys_user_sex, 'dict_label', 'dict_value')} placeholder='请选择' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='用户生日' name='birthday'>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='手机号码' name='phone' rules={[{ required: false, min: 1, validator: verifyPhone }]}>
<NumberInput placeholder='请输入' style={{width: '100%'}} maxLength={11} />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='电子邮箱' name='email' rules={[{ type: 'email' }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='机构名称' name='org_code'>
<SelectOrganTree {...parentOrganTreeMethod} />
</FormItem>
</Col>
{/*<Col md={12} sm={24}>*/}
{/* <FormItem label='部门名称' name='dept_code'>*/}
{/* <SelectDeptTree {...parentDeptTreeMethod} placeholder={'请选择部门'} />*/}
{/* </FormItem>*/}
{/*</Col>*/}
<Col md={12} sm={24}>
<FormItem label='所属岗位' name='posts'>
<Select
mode='multiple'
allowClear
placeholder='请选择'
options={formatDictOptions(dictData.sys_user_post, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
{/*<Col md={12} sm={24}>
<FormItem
label={
<span>
密码
<em className={styles.optional}>
<Tooltip title='默认密码：123456'>
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</Tooltip>
</em>
</span>
}
name='password'
initialValue={'123456'}
rules={[{required: true, message: '请输入至少6个字符的密码！', min: 6}]}>
<Input placeholder='请输入' type='password'/>
</FormItem>
</Col>*/}
<Col md={12} sm={24}>
<FormItem label='在职状态' name='job_status'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.sys_job_status, 'dict_label', 'dict_value')}
onChange={handleJobStatusChange}
/>
</FormItem>
</Col>
{jobStatus === '1' ?
<Col md={12} sm={24}>
<FormItem label='入职时间' name='hiredate' initialValue={dayjs().endOf('day')}>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
:
<Col md={12} sm={24}>
<FormItem label='离职时间' name='departure_time'>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
}
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='员工类型' name='user_type'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.sys_user_type, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='员工工号' name='emp_no'>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='门禁卡号' name='access_card_no'>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='是否是管理员' name='mgr_type'>
<Select
style={{width: '100%'}}
placeholder='请选择'
options={formatDictOptions(dictData.sys_mgr_type, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={24} sm={24}>
<FormItem label='备注' name='remarks'>
<TextArea rows={4} />
</FormItem>
</Col>
</Row>
</Form>
</Modal>
)
})
export default StaffSheetCreateForm

113
src/pages/business_basic/form/StaffSheetRenderAdvancedForm.js
Unescape Escape View File

@ -1,113 +0,0 @@
import { useEffect } from 'react'
import { Button, Col, Form, Input, Row } from 'antd'
import { UpOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons'
import SelectDeptTree from '@/components/SelectDeptTree'
import SelectOrganTree from '@/components/SelectOrganTree'
import style from '@/global.less'
const { Item: FormItem } = Form
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree
const StaffSheetRenderAdvancedForm = (props) => {
const [form] = Form.useForm()
const { dispatch, handleSearch, handleFormReset, toggleForm, selectDeptTree, selectOrganTree, params } = props
useEffect(() => {
form.setFieldsValue({
user_name: params?.user_name,
user_name_cn: params?.user_name_cn,
deptname: params?.deptname,
orgname: params?.orgname,
})
}, [params])
const onFinish = values => {
// if (getDeptTreeBySelectTree) {
// values.dept_code = getDeptTreeBySelectTree.dept_code
// values.deptname = getDeptTreeBySelectTree.title
// }
if (getOrganTreeBySelectTree) {
values.org_code = getOrganTreeBySelectTree.org_code
values.orgname = getOrganTreeBySelectTree.title
}
handleSearch(values)
}
const myHandleFormReset = () => {
form.resetFields()
handleFormReset()
}
const selectedDeptTreeValue = (deptRecord) => {
getDeptTreeBySelectTree = deptRecord
}
const selectedOrganTreeValue = (orgRecord) => {
getOrganTreeBySelectTree = orgRecord
}
const parentDeptTreeMethod = {
dispatch: dispatch,
selectDeptTree: selectDeptTree,
selectedDeptTreeValue: selectedDeptTreeValue
}
const parentOrganTreeMethod = {
dispatch: dispatch,
selectOrganTree: selectOrganTree,
selectedOrganTreeValue: selectedOrganTreeValue
}
return (
<Form form={form} onFinish={onFinish} layout='inline'>
<Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
<Col md={8} sm={24}>
<FormItem label='用户名' name='user_name'>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label='用户名称' name='user_name_cn'>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label='机构代码' name='orgname'>
<SelectOrganTree {...parentOrganTreeMethod} />
</FormItem>
</Col>
</Row>
<Row gutter={{md: 8, lg: 24, xl: 48}} className={style.searchBox}>
{/*<Col md={8} sm={24}>*/}
{/* <FormItem label='部门名称' name='deptname'>*/}
{/* <SelectDeptTree placeholder={'请选择部门'} {...parentDeptTreeMethod} />*/}
{/* </FormItem>*/}
{/*</Col>*/}
<Col md={24} sm={24}>
<div className={style.searchBtn}>
<Button type='primary' htmlType='submit'>
查询
</Button>
<Button onClick={myHandleFormReset}>
重置
</Button>
<a onClick={() => toggleForm(form)}>
收起 <UpOutlined />
</a>
</div>
</Col>
</Row>
</Form>
)
}
export default StaffSheetRenderAdvancedForm

81
src/pages/business_basic/form/StaffSheetRenderSimpleForm.js
Unescape Escape View File

@ -1,81 +0,0 @@
import { useEffect } from 'react'
import {Button, Col, Form, Input, Row, DatePicker, Select} from 'antd'
import {DownOutlined, RedoOutlined, SearchOutlined} from '@ant-design/icons'
import style from '@/global.less'
import dayjs from 'dayjs'
const { Item: FormItem } = Form
const StaffSheetRenderSimpleForm = (props) => {
const [form] = Form.useForm()
const { handleSearch, handleFormReset, toggleForm, params } = props
useEffect(() => {
form.setFieldsValue({
user_name: params?.user_name,
user_name_cn: params?.user_name_cn,
})
}, [params])
const onFinish = values => {
handleSearch(values)
}
const myHandleFormReset = () => {
form.resetFields()
handleFormReset()
}
return (
<Form form={form} onFinish={onFinish} layout='inline'>
<Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
<Col md={4} sm={24}>
<FormItem label='我的查询条件' name='wdcxtj'>
<Select
placeholder='请选择'
options={[]}
/>
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label='日期' name='rq' rules={[{ required: true, message: '请选择日期!' }]}>
<DatePicker defaultValue={dayjs('2025-04-10', 'YYYY-MM-DD')} format='YYYY-MM-DD' />
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label='工作地点' name='gzdd'>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label='工号' name='gh'>
<Input placeholder='请输入' defaultValue="123456"/>
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label='名称' name='gh'>
<Input placeholder='请输入'/>
</FormItem>
</Col>
<Col md={4} sm={24}>
<div className={style.searchBtn}>
<Button type='primary' htmlType='submit'>
查询
</Button>
<Button onClick={myHandleFormReset}>
重置
</Button>
</div>
</Col>
</Row>
</Form>
)
}
export default StaffSheetRenderSimpleForm

362
src/pages/business_basic/form/StaffSheetUpdateForm.js
Unescape Escape View File

@ -1,362 +0,0 @@
import { useState, useEffect } from 'react'
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
import SelectOrganTree from '@/components/SelectOrganTree'
import datadictionary from '@/utils/dataDictionary'
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
import { NumberInput } from '@/components/NumberInput'
import styles from '../StaffSheetList.less'
import style from '@/global.less'
import dayjs from 'dayjs'
import { formatDate, formatDateObject } from '@/utils/formatUtils'
const { Item: FormItem } = Form
const { TextArea } = Input
const dictData = datadictionary
//新增表单
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree
const StaffSheetUpdateForm = (props) => {
const [form] = Form.useForm()
const [jobStatus, setJobStatus] = useState('1')
const [userStatus, setUserStatus] = useState('0')
const {
handleUpdate,
updateModalVisible,
handleUpdateModalVisible,
values,
loading,
dispatch,
selectDeptTree,
selectOrganTree
} = props
const selectedDeptTreeValue = (deptRecord) => {
getDeptTreeBySelectTree = deptRecord
}
const selectedOrganTreeValue = (orgRecord) => {
getOrganTreeBySelectTree = orgRecord
}
const parentDeptTreeMethod = {
dispatch: dispatch,
selectDeptTree: selectDeptTree,
selectedDeptTreeValue: selectedDeptTreeValue,
}
const parentOrganTreeMethod = {
dispatch: dispatch,
selectOrganTree: selectOrganTree,
selectedOrganTreeValue: selectedOrganTreeValue
}
useEffect(() => {
setJobStatus(values.job_status)
setUserStatus(values.status)
form.setFieldsValue({
user_id: values.user_id,
user_name: values.user_name,
user_name_cn: values.user_name_cn,
user_name_en: values.user_name_en,
password: values.password,
email: values.email,
phone: values.phone,
landline: values.landline,
sex: values.sex,
avatar: values.avatar,
sign: values.sign,
tags: values.tags,
id_card: values.id_card,
birthday: formatDateObject(values.birthday, 'YYYY-MM-DD'),
job_status: values.job_status,
hiredate: formatDateObject(values.hiredate, 'YYYY-MM-DD'),
departure_time: formatDateObject(values.departure_time, 'YYYY-MM-DD'),
user_type: values.user_type,
emp_no: values.emp_no,
access_card_no: values.access_card_no,
country: values.country,
province: values.province,
city: values.city,
address: values.address,
work_addr: values.work_addr,
floor: values.floor,
inprovince: values.inprovince,
// dept_code: values.dept_code,
// dept_name: values.dept_name,
inner_dept_code: values.inner_dept_code,
org_code: values.org_code,
org_name: values.org_name,
inner_org_code: values.inner_org_code,
posts: values.posts ? JSON.parse(values.posts) : [],
wx_openid: values.wx_openid,
wx_mpopenid: values.wx_mpopenid,
wx_miniopenid: values.wx_miniopenid,
wx_unionid: values.wx_unionid,
mobile_imei: values.mobile_imei,
device_num: values.device_num,
al_taobao: values.al_taobao,
al_alipay: values.al_alipay,
al_dingding: values.al_dingding,
is_system_user: values.is_system_user,
mgr_type: values.mgr_type,
pwd_security_level: values.pwd_security_level,
pwd_update_date: values.pwd_update_date,
last_login_ip: values.last_login_ip,
last_login_date: values.last_login_date,
freeze_date: values.freeze_date,
freeze_cause: values.freeze_cause,
zindex: values.zindex,
wx_msg: values.wx_msg,
email_msg: values.email_msg,
system_msg: values.system_msg,
remarks: values.remarks,
status: values.status,
creator: values.creator,
create_date: values.create_date,
updater: values.updater,
update_date: values.update_date
})
}, [])
const handleLocalUpdate = () => {
form
.validateFields()
.then(fieldsValue => {
const formVals = {...values, ...fieldsValue}
formVals.birthday = formatDate(formVals.birthday, 'YYYY-MM-DD')
formVals.hiredate = formatDate(formVals.hiredate, 'YYYY-MM-DD')
formVals.departure_time = formatDate(formVals.departure_time, 'YYYY-MM-DD')
formVals.posts = formVals.posts ? JSON.stringify(formVals.posts) : null
formVals.freeze_date = '3' === formVals.status ? formatDate(dayjs().endOf('day'), 'YYYY-MM-DD') : null
formVals.freeze_cause = '3' === formVals.status ? formVals.freeze_cause : null
// if (getDeptTreeBySelectTree) {
// formVals.dept_code = getDeptTreeBySelectTree.dept_code
// formVals.dept_name = getDeptTreeBySelectTree.title
// }
if (getOrganTreeBySelectTree) {
formVals.org_code = getOrganTreeBySelectTree.org_code
formVals.org_name = getOrganTreeBySelectTree.title
}
handleUpdate(formVals)
})
.catch(errInfo => {})
}
const afterClose = () =>{
form.resetFields();
}
const handleJobStatusChange = (value) => {
setJobStatus(value)
}
const handleUserStatusChange = (value) => {
setUserStatus(value)
}
return (
<Modal
width={800}
height={550}
bodyStyle={{ height: '500px', overflowY: 'auto' }}
className={style.updateForm}
centered
destroyOnClose
title='修改'
open={updateModalVisible}
onOk={() => handleLocalUpdate()}
onCancel={() => handleUpdateModalVisible()}
afterClose={() => afterClose()}
confirmLoading={loading}
>
<Form form={form} layout='vertical' requiredMark={false}>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='登录账号' name='user_name' rules={[{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='用户名称' name='user_name_cn' rules={[{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='用户性别' name='sex'>
<Select options={formatDictOptions(dictData.sys_user_sex, 'dict_label', 'dict_value')} placeholder='请选择' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='用户生日' name='birthday'>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='手机号码' name='phone' rules={[{ required: false, min: 1, validator: verifyPhone }]}>
<NumberInput placeholder='请输入' style={{width: '100%'}} maxLength={11} />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='电子邮箱' name='email' rules={[{ type: 'email' }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='机构名称' name='org_code'>
<SelectOrganTree {...parentOrganTreeMethod} />
</FormItem>
</Col>
{/*<Col md={12} sm={24}>*/}
{/* <FormItem label='部门名称' name='dept_code'>*/}
{/* <SelectDeptTree {...parentDeptTreeMethod} placeholder={'请选择部门'} />*/}
{/* </FormItem>*/}
{/*</Col>*/}
<Col md={12} sm={24}>
<FormItem label='所属岗位' name='posts'>
<Select
mode='multiple'
allowClear
placeholder='请选择'
options={formatDictOptions(dictData.sys_user_post, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
{/*<Col md={12} sm={24}>
<FormItem
label={
<span>
密码
<em className={styles.optional}>
<Tooltip title='默认密码：123456'>
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</Tooltip>
</em>
</span>
}
name='password'
initialValue={'123456'}
rules={[{required: true, message: '请输入至少6个字符的密码！', min: 6}]}>
<Input placeholder='请输入' type='password'/>
</FormItem>
</Col>*/}
<Col md={12} sm={24}>
<FormItem label='在职状态' name='job_status'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.sys_job_status, 'dict_label', 'dict_value')}
onChange={handleJobStatusChange}
/>
</FormItem>
</Col>
{jobStatus === '1' ?
<Col md={12} sm={24}>
<FormItem label='入职时间' name='hiredate' initialValue={dayjs().endOf('day')}>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
:
<Col md={12} sm={24}>
<FormItem label='离职时间' name='departure_time'>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
}
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='员工类型' name='user_type'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.sys_user_type, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='员工工号' name='emp_no'>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='门禁卡号' name='access_card_no'>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='是否是管理员' name='mgr_type'>
<Select
style={{width: '100%'}}
placeholder='请选择'
options={formatDictOptions(dictData.sys_mgr_type, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='状态' name='status'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.user_status, 'dict_label', 'dict_value')}
onChange={handleUserStatusChange}
/>
</FormItem>
</Col>
{ userStatus === '3' &&
<Col md={12} sm={24}>
<FormItem label='冻结原因' name='freeze_cause'>
<Input placeholder='请输入' />
</FormItem>
</Col>
}
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={24} sm={24}>
<FormItem label='备注' name='remarks'>
<TextArea rows={4} />
</FormItem>
</Col>
</Row>
</Form>
</Modal>
)
}
export default StaffSheetUpdateForm

299
src/pages/business_basic/form/StaffSheetViewForm.js
Unescape Escape View File

@ -1,299 +0,0 @@
import { useState, useEffect } from 'react'
import {Col, DatePicker, Form, Input, Modal, Row, Select} from 'antd'
import datadictionary from '@/utils/dataDictionary'
import style from "@/global.less";
import {formatDictOptions, verifyPhone} from "@/utils/globalCommon";
import {NumberInput} from "@/components/NumberInput";
import dayjs from "dayjs";
import SelectOrganTree from "@/components/SelectOrganTree";
import {formatDateObject} from "@/utils/formatUtils";
const { Item: FormItem } = Form
const { TextArea } = Input
const dictData = datadictionary
const StaffSheetViewForm = (props) => {
const [form] = Form.useForm()
const [jobStatus, setJobStatus] = useState('1')
const [userStatus, setUserStatus] = useState('0')
const { viewModalVisible, handleViewModalVisible, values } = props
useEffect(() => {
setJobStatus(values.job_status)
setUserStatus(values.status)
form.setFieldsValue({
user_id: values.user_id,
user_name: values.user_name,
user_name_cn: values.user_name_cn,
user_name_en: values.user_name_en,
password: values.password,
email: values.email,
phone: values.phone,
landline: values.landline,
sex: values.sex,
avatar: values.avatar,
sign: values.sign,
tags: values.tags,
id_card: values.id_card,
birthday: formatDateObject(values.birthday, 'YYYY-MM-DD'),
job_status: values.job_status,
hiredate: formatDateObject(values.hiredate, 'YYYY-MM-DD'),
departure_time: formatDateObject(values.departure_time, 'YYYY-MM-DD'),
user_type: values.user_type,
emp_no: values.emp_no,
access_card_no: values.access_card_no,
country: values.country,
province: values.province,
city: values.city,
address: values.address,
work_addr: values.work_addr,
floor: values.floor,
inprovince: values.inprovince,
// dept_code: values.dept_code,
// dept_name: values.dept_name,
inner_dept_code: values.inner_dept_code,
org_code: values.org_code,
org_name: values.org_name,
inner_org_code: values.inner_org_code,
posts: values.posts ? JSON.parse(values.posts) : [],
wx_openid: values.wx_openid,
wx_mpopenid: values.wx_mpopenid,
wx_miniopenid: values.wx_miniopenid,
wx_unionid: values.wx_unionid,
mobile_imei: values.mobile_imei,
device_num: values.device_num,
al_taobao: values.al_taobao,
al_alipay: values.al_alipay,
al_dingding: values.al_dingding,
is_system_user: values.is_system_user,
mgr_type: values.mgr_type,
pwd_security_level: values.pwd_security_level,
pwd_update_date: values.pwd_update_date,
last_login_ip: values.last_login_ip,
last_login_date: values.last_login_date,
freeze_date: values.freeze_date,
freeze_cause: values.freeze_cause,
zindex: values.zindex,
wx_msg: values.wx_msg,
email_msg: values.email_msg,
system_msg: values.system_msg,
remarks: values.remarks,
status: values.status,
creator: values.creator,
create_date: values.create_date,
updater: values.updater,
update_date: values.update_date
})
}, [])
const afterClose = () =>{
form.resetFields();
}
const handleJobStatusChange = (value) => {
setJobStatus(value)
}
const handleUserStatusChange = (value) => {
setUserStatus(value)
}
return (
<Modal
width={800}
height={550}
bodyStyle={{ height: '500px', overflowY: 'auto' }}
className={style.viewForm}
centered
destroyOnClose
title='查看'
open={viewModalVisible}
onOk={() => handleViewModalVisible()}
onCancel={() => handleViewModalVisible()}
afterClose={() => afterClose()}
>
<Form form={form} layout='vertical' requiredMark={false} style={{pointerEvents: 'none'}}>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='登录账号' name='user_name' rules={[{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='用户名称' name='user_name_cn' rules={[{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='用户性别' name='sex'>
<Select options={formatDictOptions(dictData.sys_user_sex, 'dict_label', 'dict_value')} placeholder='请选择' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='用户生日' name='birthday'>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='手机号码' name='phone' rules={[{ required: false, min: 1, validator: verifyPhone }]}>
<NumberInput placeholder='请输入' style={{width: '100%'}} maxLength={11} />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='电子邮箱' name='email' rules={[{ type: 'email' }]}>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='机构名称' name='org_name'>
<Input placeholder='请输入' />
</FormItem>
</Col>
{/*<Col md={12} sm={24}>*/}
{/* <FormItem label='部门名称' name='dept_code'>*/}
{/* <SelectDeptTree {...parentDeptTreeMethod} placeholder={'请选择部门'} />*/}
{/* </FormItem>*/}
{/*</Col>*/}
<Col md={12} sm={24}>
<FormItem label='所属岗位' name='posts'>
<Select
mode='multiple'
allowClear
placeholder='请选择'
options={formatDictOptions(dictData.sys_user_post, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
{/*<Col md={12} sm={24}>
<FormItem
label={
<span>
密码
<em className={styles.optional}>
<Tooltip title='默认密码：123456'>
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</Tooltip>
</em>
</span>
}
name='password'
initialValue={'123456'}
rules={[{required: true, message: '请输入至少6个字符的密码！', min: 6}]}>
<Input placeholder='请输入' type='password'/>
</FormItem>
</Col>*/}
<Col md={12} sm={24}>
<FormItem label='在职状态' name='job_status'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.sys_job_status, 'dict_label', 'dict_value')}
onChange={handleJobStatusChange}
/>
</FormItem>
</Col>
{jobStatus === '1' ?
<Col md={12} sm={24}>
<FormItem label='入职时间' name='hiredate' initialValue={dayjs().endOf('day')}>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
:
<Col md={12} sm={24}>
<FormItem label='离职时间' name='departure_time'>
<DatePicker format='YYYY-MM-DD' placeholder='请选择' />
</FormItem>
</Col>
}
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='员工类型' name='user_type'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.sys_user_type, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='员工工号' name='emp_no'>
<Input placeholder='请输入' />
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='门禁卡号' name='access_card_no'>
<Input placeholder='请输入' />
</FormItem>
</Col>
<Col md={12} sm={24}>
<FormItem label='是否是管理员' name='mgr_type'>
<Select
style={{width: '100%'}}
placeholder='请选择'
options={formatDictOptions(dictData.sys_mgr_type, 'dict_label', 'dict_value')}
/>
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={12} sm={24}>
<FormItem label='状态' name='status'>
<Select
placeholder='请选择'
options={formatDictOptions(dictData.user_status, 'dict_label', 'dict_value')}
onChange={handleUserStatusChange}
/>
</FormItem>
</Col>
{ userStatus === '3' &&
<Col md={12} sm={24}>
<FormItem label='冻结原因' name='freeze_cause'>
<Input placeholder='请输入' />
</FormItem>
</Col>
}
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={24} sm={24}>
<FormItem label='备注' name='remarks'>
<TextArea rows={4} />
</FormItem>
</Col>
</Row>
</Form>
</Modal>
)
}
export default StaffSheetViewForm

319
src/pages/business_basic/models/StaffSheet.js
Unescape Escape View File

@ -1,319 +0,0 @@
import { deleteByPrimaryKeyForProUser, selectByPrimaryKeyForProUser, insertForProUser, updateForProUser, deleteByMapForProUser,updateByMapForProUser, getOneForProUser,getAllForProUser,queryPageForProUser, countForProUser, insertBatchForProUser, deleteBatchForProUser,updateBatchForProUser, resetPwdForProUser } from '@/services/system/api_prouser';
export default {
namespace: 'safemajorhazard',
state: {
params: {},
data: {
list: [],
pagination: {},
},
},
effects: {
*delete_by_primarykey_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(deleteByPrimaryKeyForProUser, payload)
yield put({
type: 'deleteByPrimaryKeyForProUser',
payload: response
})
if (!response.success) {
callback && callback(response)
return
}
const params = yield select(state => state.prouser.params)
const responseData = yield call(queryPageForProUser, params)
yield put({
type: 'queryPageForProUser',
payload: responseData
})
if (callback) callback(response)
},
*select_by_primarykey_for_prouser({ payload, callback }, { call, put }) {
const response = yield call(selectByPrimaryKeyForProUser, payload)
yield put({
type: 'selectByPrimaryKeyForProUser',
payload: response
})
if (callback) callback(response)
},
*insert_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(insertForProUser, payload)
yield put({
type: 'insertForProUser',
payload: response
})
if (!response.success) {
callback && callback(response)
return
}
const params = yield select(state => state.prouser.params)
const responseData = yield call(queryPageForProUser, params)
yield put({
type: 'queryPageForProUser',
payload: responseData
})
if (callback) callback(response)
},
*update_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(updateForProUser, payload)
yield put({
type: 'updateForProUser',
payload: response
})
if (!response.success) {
callback && callback(response)
return
}
const params = yield select(state => state.prouser.params)
const responseData = yield call(queryPageForProUser, params)
yield put({
type: 'queryPageForProUser',
payload: responseData
})
if (callback) callback(response)
},
*delete_by_map_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(deleteByMapForProUser, payload);
yield put({
type: 'deleteByMapForProUser',
payload: response,
});
const params = yield select(state => state.prouser.params);
const responsedata = yield call(queryPageForProUser, params);
yield put({
type: 'queryPageForProUser',
payload: responsedata,
});
if (callback) callback(response);
},
*update_by_map_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(updateByMapForProUser, payload);
yield put({
type: 'updateByMapForProUser',
payload: response,
});
const params = yield select(state => state.prouser.params);
const responsedata = yield call(queryPageForProUser, params);
yield put({
type: 'queryPageForProUser',
payload: responsedata,
});
if (callback) callback(response);
},
*get_one_for_prouser({ payload, callback }, { call, put }) {
const response = yield call(getOneForProUser, payload);
yield put({
type: 'getOneForProUser',
payload: response,
});
if (callback) callback(response);
},
*get_all_for_prouser({ payload, callback }, { call, put }) {
const response = yield call(getAllForProUser, payload);
yield put({
type: 'getAllForProUser',
payload: response,
});
if (callback) callback(response);
},
*query_page_for_prouser({ payload, callback }, { select, call, put }) {
const params = yield select(state => state.prouser.params);
const newParams = payload?.resetFlag ? payload : {...params, ...payload};
yield put({
type: 'setQueryPageByParams',
payload: newParams,
});
const response = yield call(queryPageForProUser, newParams);
yield put({
type: 'queryPageForProUser',
payload: response,
});
if (callback) callback(response);
},
*count_for_prouser({ payload, callback }, { call, put }) {
const response = yield call(countForProUser, payload);
yield put({
type: 'countForProUser',
payload: response,
});
if (callback) callback(response);
},
*insert_batch_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(insertBatchForProUser, payload);
yield put({
type: 'insertBatchForProUser',
payload: response,
});
const params = yield select(state => state.prouser.params);
const responsedata = yield call(queryPageForProUser, params);
yield put({
type: 'queryPageForProUser',
payload: responsedata,
});
if (callback) callback(response);
},
*delete_batch_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(deleteBatchForProUser, payload);
yield put({
type: 'deleteBatchForProUser',
payload: response,
});
const params = yield select(state => state.prouser.params);
const responsedata = yield call(queryPageForProUser, params);
yield put({
type: 'queryPageForProUser',
payload: responsedata,
});
if (callback) callback(response);
},
*update_batch_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(updateBatchForProUser, payload);
yield put({
type: 'updateBatchForProUser',
payload: response,
});
const params = yield select(state => state.prouser.params);
const responsedata = yield call(queryPageForProUser, params);
yield put({
type: 'queryPageForProUser',
payload: responsedata,
});
if (callback) callback(response);
},
*resetpwd_for_prouser({ payload, callback }, { select, call, put }) {
const response = yield call(resetPwdForProUser, payload);
yield put({
type: 'resetPwdForProUser',
payload: response,
});
const params = yield select(state => state.prouser.params);
const responsedata = yield call(queryPageForProUser, params);
yield put({
type: 'queryPageForProUser',
payload: responsedata,
});
if (callback) callback(response);
},
},
reducers: {
setQueryPageByParams(state, { payload }) {
return {
...state,
params: {...payload},
};
},
deleteByPrimaryKeyForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
selectByPrimaryKeyForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
insertForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
updateForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
deleteByMapForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
updateByMapForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
getOneForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
getAllForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
queryPageForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
countForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
insertBatchForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
deleteBatchForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
updateBatchForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
resetPwdForProUser(state, action) {
return {
...state,
data: action.payload,
};
},
},
};

14
src/pages/nav_system_content/SystemContentList.js
Unescape Escape View File

@ -90,20 +90,6 @@ const SystemContentList = (props) => {
setMenuItems(newList)
const fixedMenuItems = [
{
path: '/topnavbar00/business/basic',
icon: <img
src={icon1}
alt="基础信息管理"
style={{
width: '16px',
height: '16px',
opacity: selectedKey.includes('/topnavbar00/business/basic') ? 1 : 0.6
}}
/>,
key: "/topnavbar00/business/basic",
"label": "基础信息管理"
},
{
path: '/topnavbar00/business/homepage',
icon: <img

4
src/pages/topnavbar/TopNavBar.js
Unescape Escape View File

@ -8,10 +8,6 @@ import Logo from '@/assets/logo.png'
import { userInfo } from '@/utils/globalCommon'
const menuItem = [
{
label: '基础信息管理',
key: '/topnavbar00/business/basic',
},
{
label: '首页',
key: '/topnavbar00/business/homepage',

Write Preview
Loading…
Cancel
Save