diff --git a/src/assets/business_basic/eqicon1.png b/src/assets/business_basic/eqicon1.png new file mode 100644 index 0000000..03c5873 Binary files /dev/null and b/src/assets/business_basic/eqicon1.png differ diff --git a/src/assets/business_basic/eqicon2.png b/src/assets/business_basic/eqicon2.png new file mode 100644 index 0000000..a2b1e28 Binary files /dev/null and b/src/assets/business_basic/eqicon2.png differ diff --git a/src/assets/business_basic/eqicon3.png b/src/assets/business_basic/eqicon3.png new file mode 100644 index 0000000..a00929f Binary files /dev/null and b/src/assets/business_basic/eqicon3.png differ diff --git a/src/assets/business_basic/eqicon4.png b/src/assets/business_basic/eqicon4.png new file mode 100644 index 0000000..2ae2b09 Binary files /dev/null and b/src/assets/business_basic/eqicon4.png differ diff --git a/src/assets/business_basic/export1.png b/src/assets/business_basic/export1.png new file mode 100644 index 0000000..b2beef1 Binary files /dev/null and b/src/assets/business_basic/export1.png differ diff --git a/src/assets/business_basic/import1.png b/src/assets/business_basic/import1.png new file mode 100644 index 0000000..21358ae Binary files /dev/null and b/src/assets/business_basic/import1.png differ diff --git a/src/pages/business_basic/basic.js b/src/pages/business_basic/basic.js index db6ea83..8e8b9e3 100644 --- a/src/pages/business_basic/basic.js +++ b/src/pages/business_basic/basic.js @@ -40,20 +40,20 @@ const SafeMajorHazardList = () => { onClick={() => handleModuleClick("organization")} >组织机构管理 - + */}
diff --git a/src/pages/business_basic/module/EvaluationReport.js b/src/pages/business_basic/module/EvaluationReport.js index e98bee6..6c1f076 100644 --- a/src/pages/business_basic/module/EvaluationReport.js +++ b/src/pages/business_basic/module/EvaluationReport.js @@ -544,20 +544,6 @@ const EvaluationReport = () => {
- {/* 块4 */} -
-
-
未处理预警
-
65
-
- ↑ - 较昨日 +2 -
-
-
- 未处理预警 -
-
diff --git a/src/pages/business_basic/module/EvaluationReport.less b/src/pages/business_basic/module/EvaluationReport.less index 9ac7a4d..5c71c1e 100644 --- a/src/pages/business_basic/module/EvaluationReport.less +++ b/src/pages/business_basic/module/EvaluationReport.less @@ -27,7 +27,7 @@ flex: 1; height: 100%; display: flex; - background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%); + background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%); border-radius: 4px; border: 2px solid #FFFFFF; diff --git a/src/pages/business_basic/module/ResponsibilityImplementation.js b/src/pages/business_basic/module/ResponsibilityImplementation.js index f9235eb..d78336f 100644 --- a/src/pages/business_basic/module/ResponsibilityImplementation.js +++ b/src/pages/business_basic/module/ResponsibilityImplementation.js @@ -1,17 +1,21 @@ import React from 'react'; import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd'; -import { PhoneOutlined, IdcardOutlined } from '@ant-design/icons'; +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 = () => { @@ -26,99 +30,271 @@ const ResponsibilityImplementation = () => { title:"编号", dataIndex:"id", key:"id", - width:60, + width:80, }, { - title:"责任区域", - dataIndex:"zrqy", - key:"zrqy", + title:"组织代码", + dataIndex:"orgCode", + key:"orgCode", width:120, }, { - title:"设备型号", - dataIndex:"sbxh", - key:"sbxh", + title:"组织类型", + dataIndex:"orgType", + key:"orgType", width:120, }, { - title:"危险源类型", - dataIndex:"wxlylx", - key:"wxlylx", - width:120, + title:"负责人", + dataIndex:"manager", + key:"manager", + width:100, }, { - title:"责任人", - dataIndex:"zrr", - key:"zrr", + title:"所属部门", + dataIndex:"department", + key:"department", width:120, }, { - title:"联系方式", - dataIndex:"lxfs", - key:"lxfs", + title:"创建时间", + dataIndex:"createTime", + key:"createTime", width:120, }, { - title:"巡检频率", - dataIndex:"xjpl", - key:"xjpl", - width:120, - }, - { - title:"最近巡检", - dataIndex:"zjxj", - key:"zjxj", - width:120, + title:"人员规模", + dataIndex:"staffCount", + key:"staffCount", + width:100, }, { title:"状态", - dataIndex:"zt", - key:"zt", - width:120, + 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 ( + + {text} + + ); + } }, { title:"操作", - dataIndex:"cz", - key:"cz", + dataIndex:"action", + key:"action", width:120, - render: (text, record) => { // ======== 渲染操作列 ======== - const handleView = (record) => { // ======== 定义查看函数 ======== - console.log('查看记录:', record); // ======== 打印记录信息到控制台 ======== - // 这里可以添加查看详情的逻辑 // ======== 注释：可以添加查看详情的逻辑 ======== - }; // ======== 函数结束 ======== + render: (text, record) => { + const handleEdit = (record) => { + console.log('编辑记录:', record); + }; - return ( // ======== 返回按钮组件 ======== - // ======== 查看按钮，点击时调用handleView函数 ======== - ); // ======== return语句结束 ======== - } // ======== render函数结束 ======== + const handleDelete = (record) => { + console.log('删除记录:', record); + }; + + return ( +
+ + +
+ ); + } } ]; - // 生成20条假数据 - const generateMockData = () => { // ======== 定义生成假数据的函数 ======== - const data = []; // ======== 创建空数组存储数据 ======== - const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区']; // ======== 责任区域选项 ======== - const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀']; // ======== 设备型号选项 ======== - const statuses = ['正常', '维护中', '故障', '停用', '检修']; // ======== 状态选项 ======== - const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二']; // ======== 责任人姓名选项 ======== - - for (let i = 1; i <= 20; i++) { // ======== 循环生成20条数据 ======== - data.push({ // ======== 添加一条数据到数组 ======== - key: i.toString(), // ======== 唯一标识 ======== - id: `WX${String(i).padStart(3, '0')}`, // ======== 编号：WX001, WX002... ======== - zrqy: areas[Math.floor(Math.random() * areas.length)], // ======== 随机选择责任区域 ======== - sbxh: devices[Math.floor(Math.random() * devices.length)], // ======== 随机选择设备型号 ======== - zrr: names[Math.floor(Math.random() * names.length)], // ======== 随机选择责任人 ======== - zt: statuses[Math.floor(Math.random() * statuses.length)], // ======== 随机选择状态 ======== - }); // ======== 数据对象结束 ======== - } // ======== 循环结束 ======== - return data; // ======== 返回生成的数据数组 ======== - }; // ======== 函数结束 ======== - - const tableData = generateMockData(); // ======== 调用函数生成假数据 ======== + // 固定的假数据 + 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 ( -
+
{/* 警告提示框 */}
警告 @@ -172,7 +348,8 @@ const ResponsibilityImplementation = () => {
- + + +
- - + + +
{/* 第三个大块：表格 */}
{ 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: '条/页', + } + }} />
diff --git a/src/pages/business_basic/module/ResponsibilityImplementation.less b/src/pages/business_basic/module/ResponsibilityImplementation.less index c6d7b35..19e59b3 100644 --- a/src/pages/business_basic/module/ResponsibilityImplementation.less +++ b/src/pages/business_basic/module/ResponsibilityImplementation.less @@ -1,4 +1,4 @@ -.containerR { +.XcontainerR { padding: 8px 6px; height: 100%; display: flex; @@ -277,11 +277,13 @@ display: flex; flex-direction: column; gap: 8px; + .infoBlock { width: 100%; display: flex; justify-content: flex-start; white-space: nowrap; + .nameText { font-size: 12px; font-weight: 500; @@ -305,16 +307,16 @@ margin-left: 10px; margin-right: 10px; } - + .infoText { font-size: 10px; font-weight: 400; color: #666666; - + } - + } - + .tagContainer { display: flex; gap: 8px; @@ -331,6 +333,7 @@ white-space: nowrap; margin-left: 10px; } + .tagBlue2 { background-color: #D5E5FF; color: #1269FF; @@ -339,8 +342,9 @@ padding: 4px 8px; border-radius: 4px; white-space: nowrap; - + } + .tagBlue3 { background-color: #D5E5FF; color: #1269FF; @@ -350,7 +354,7 @@ border-radius: 4px; white-space: nowrap; margin-left: 10px; - + } .tagYellow { @@ -389,12 +393,12 @@ border-radius: 2px; cursor: pointer; padding: 2px 15px; - + &:hover { background-color: #0f5ae0; } } - + .deleteBtn { height: 80%; background-color: #FF5F60; @@ -405,14 +409,298 @@ border-radius: 2px; cursor: pointer; padding: 2px 15px; - + + &:hover { + background-color: #ff4a4b; + } + } + } + + + } + + // 第二个块的样式 + .backgroundContainer2 { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 8px; + + .infoBlock2 { + width: 100%; + display: flex; + justify-content: flex-start; + white-space: nowrap; + + .nameText2 { + font-size: 12px; + font-weight: 500; + color: #333333; + margin-left: 10px; + margin-right: 10px; + margin-top: 15px; + } + + .unitText2 { + font-size: 10px; + font-weight: 400; + color: #666666; + margin-top: 18px; + } + + .infoIcon2 { + font-size: 10px; + color: #666666; + margin-left: 10px; + margin-right: 10px; + } + + .infoText2 { + font-size: 10px; + font-weight: 400; + color: #666666; + } + } + + .tagContainer2 { + display: flex; + gap: 8px; + align-items: center; + } + + .tagBlue4 { + background-color: #D5E5FF; + color: #1269FF; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + margin-left: 10px; + } + + .tagBlue5 { + background-color: #D5E5FF; + color: #1269FF; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + } + + .tagBlue6 { + background-color: #D5E5FF; + color: #1269FF; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + margin-left: 10px; + } + + .tagGreen { + background-color: #E8F5E8; + color: #52C41A; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + } + + .actionBlock2 { + width: 100%; + height: 50%; + background-color: #BDD6FDCC; + display: flex; + align-items: center; + justify-content: center; + } + + .buttonContainer2 { + display: flex; + gap: 15px; + align-items: center; + justify-content: center; + width: 100%; + + .editBtn2 { + height: 80%; + background-color: #1269FF; + color: #fff; + font-size: 10px; + font-weight: 400; + border: none; + border-radius: 2px; + cursor: pointer; + padding: 2px 15px; + + &:hover { + background-color: #0f5ae0; + } + } + + .deleteBtn2 { + height: 80%; + background-color: #FF5F60; + color: #fff; + font-size: 10px; + font-weight: 400; + border: none; + border-radius: 2px; + cursor: pointer; + padding: 2px 15px; + &:hover { background-color: #ff4a4b; } } } + } + + // 第三个块的样式 + .backgroundContainer3 { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 8px; + + .infoBlock3 { + width: 100%; + display: flex; + justify-content: flex-start; + white-space: nowrap; + + .nameText3 { + font-size: 12px; + font-weight: 500; + color: #333333; + margin-left: 10px; + margin-right: 10px; + margin-top: 15px; + } + + .unitText3 { + font-size: 10px; + font-weight: 400; + color: #666666; + margin-top: 18px; + } + + .infoIcon3 { + font-size: 10px; + color: #666666; + margin-left: 10px; + margin-right: 10px; + } + + .infoText3 { + font-size: 10px; + font-weight: 400; + color: #666666; + } + } + + .tagContainer3 { + display: flex; + gap: 8px; + align-items: center; + } + + .tagBlue7 { + background-color: #D5E5FF; + color: #1269FF; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + margin-left: 10px; + } + + .tagBlue8 { + background-color: #D5E5FF; + color: #1269FF; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + } + + .tagBlue9 { + background-color: #D5E5FF; + color: #1269FF; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + margin-left: 10px; + } + + .tagOrange { + background-color: #FFF2E8; + color: #FF7A00; + font-size: 10px; + font-weight: 400; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; + } + + .actionBlock3 { + width: 100%; + height: 50%; + background-color: #BDD6FDCC; + display: flex; + align-items: center; + justify-content: center; + } + + .buttonContainer3 { + display: flex; + gap: 15px; + align-items: center; + justify-content: center; + width: 100%; + + .editBtn3 { + height: 80%; + background-color: #1269FF; + color: #fff; + font-size: 10px; + font-weight: 400; + border: none; + border-radius: 2px; + cursor: pointer; + padding: 2px 15px; + + &:hover { + background-color: #0f5ae0; + } + } - + .deleteBtn3 { + height: 80%; + background-color: #FF5F60; + color: #fff; + font-size: 10px; + font-weight: 400; + border: none; + border-radius: 2px; + cursor: pointer; + padding: 2px 15px; + + &:hover { + background-color: #ff4a4b; + } + } + } } } } @@ -420,7 +708,6 @@ } } - .containerTwo { flex: 1; background-color: white; @@ -431,6 +718,7 @@ border-radius: 4px; .containerTwoTitle { + margin-top: 5px; margin-bottom: 15px; .titleLeft { @@ -455,6 +743,7 @@ justify-content: space-between; align-items: center; margin-bottom: 15px; + padding: 0px 20px; .searchSection { flex: 1; @@ -462,7 +751,7 @@ :global(.ant-input) { height: 32px; - border-radius: 4px; + border-radius: 4px 0px 0px 4px; border: 1px solid #d9d9d9; &:focus { @@ -495,23 +784,106 @@ color: #2E4CD4; } } + + .addBtn { + 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; + + &:hover { + background-color: #F0F2FF; + border-color: #2E4CD4; + } + + .addIcon { + width: 12px; + height: 12px; + font-size: 12px; + } + } + + .importBtn { + 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; + + &:hover { + background-color: #F0F2FF; + border-color: #2E4CD4; + } + + .importIcon { + width: 12px; + height: 12px; + } + } + + .exportBtn { + 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; + + &:hover { + background-color: #F0F2FF; + border-color: #2E4CD4; + } + + .exportIcon { + width: 12px; + height: 12px; + } + } } } .containerTwoTable { flex: 1; overflow: hidden; + padding: 0px 20px; :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; + border-bottom: 1px solid #f0f0f0; padding: 8px 12px; text-align: center; } @@ -523,7 +895,7 @@ } :global(.ant-table-tbody > tr:hover > td) { - background-color: #f5f5f5; + // background-color: #f5f5f5; } :global(.ant-pagination) { @@ -622,4 +994,5 @@ color: #333333; font-weight: 500; } -} \ No newline at end of file +} + diff --git a/src/pages/business_basic/module/RiskAssessment.js b/src/pages/business_basic/module/RiskAssessment.js index ad4430f..f8209a8 100644 --- a/src/pages/business_basic/module/RiskAssessment.js +++ b/src/pages/business_basic/module/RiskAssessment.js @@ -14,7 +14,10 @@ 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); @@ -500,77 +503,47 @@ const RiskAssessment = () => { {/* 块1 */}
-
总危险源数量
-
65
-
- ↑ - 较昨日 +2 -
+
设备总数
+
1280
- 总危险源数量 + 设备总数
{/* 块2 */}
-
高风险设备
-
65
-
- ↑ - 较昨日 +2 -
+
正常运行
+
480
- 高风险设备 + 高风险设备
{/* 块3 */}
-
今日预警次数
-
65
-
- ↑ - 较昨日 +2 -
+
需要维护
+
347
- 今日预警次数 + 今日预警次数
{/* 块4 */}
-
未处理预警
-
65
-
- ↑ - 较昨日 +2 -
+
故障设备
+
289
- 未处理预警 + 未处理预警
- {/* 块5 */} -
-
-
已处理预警
-
65
-
- - 已完成 -
-
-
- 已处理预警 -
-
diff --git a/src/pages/business_basic/module/RiskAssessment.less b/src/pages/business_basic/module/RiskAssessment.less index ab8ffe0..e2d9b2d 100644 --- a/src/pages/business_basic/module/RiskAssessment.less +++ b/src/pages/business_basic/module/RiskAssessment.less @@ -29,7 +29,7 @@ flex: 1; height: 100%; display: flex; - background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%); + background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%); border-radius: 4px; border: 2px solid #FFFFFF; @@ -47,7 +47,7 @@ font-family: PingFang SC; font-weight: 400; font-size: 12px; - color: #666666; + color: #333333; line-height: 1.2; } @@ -92,10 +92,10 @@ .blockImage { // width: 80%; - height: 130%; + height: 65%; // height: 80%; object-fit: contain; - margin-right: -10px; + margin-right: -5px; } } }