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

设备页面

Browse Source
main
wangyunfei 1 month ago
parent b371c4303a
commit b8fa9e826b
13 changed files with 778 additions and 157 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/business_basic/eqicon1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/business_basic/eqicon2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/business_basic/eqicon3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/business_basic/eqicon4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/business_basic/export1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 485 B

BIN
src/assets/business_basic/import1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

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

@ -40,20 +40,20 @@ const SafeMajorHazardList = () => {
onClick={() => handleModuleClick("organization")} onClick={() => handleModuleClick("organization")}
>组织机构管理 >组织机构管理
</Button> </Button>
<Button {/* <Button
className={`${styles.TopButtonItem} ${activeModule === "equipment" ? styles.active : ""}`} className={`${styles.TopButtonItem} ${activeModule === "equipment" ? styles.active : ""}`}
onClick={() => handleModuleClick("equipment")} onClick={() => handleModuleClick("equipment")}
>设备设施管理 >设备设施管理
</Button> </Button> */}
<Button <Button
className={`${styles.TopButtonItem} ${activeModule === "firefighting" ? styles.active : ""}`} className={`${styles.TopButtonItem} ${activeModule === "firefighting" ? styles.active : ""}`}
onClick={() => handleModuleClick("firefighting")} onClick={() => handleModuleClick("firefighting")}
>建筑消防与器材管理 >设备设施管理
</Button> </Button>
<Button <Button
className={`${styles.TopButtonItem} ${activeModule === "other" ? styles.active : ""}`} className={`${styles.TopButtonItem} ${activeModule === "other" ? styles.active : ""}`}
onClick={() => handleModuleClick("other")} onClick={() => handleModuleClick("other")}
>其他管理 >设备设施管理2
</Button> </Button>
</div> </div>
<div className={styles.content}> <div className={styles.content}>

14
src/pages/business_basic/module/EvaluationReport.js
Unescape Escape View File

@ -544,20 +544,6 @@ const EvaluationReport = () => {
</div> </div>
</div> </div>
{/* 块4 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>未处理预警</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img1} alt="未处理预警" className={styles.blockImage} />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/pages/business_basic/module/EvaluationReport.less
Unescape Escape View File

@ -27,7 +27,7 @@
flex: 1; flex: 1;
height: 100%; height: 100%;
display: flex; 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-radius: 4px;
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;

439
src/pages/business_basic/module/ResponsibilityImplementation.js
Unescape Escape View File

@ -1,17 +1,21 @@
import React from 'react'; import React from 'react';
import { Card, Statistic, Table,Row, Input,Button,Col, Select} from 'antd'; 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 StandardTable from '@/components/StandardTable';
import styles from './ResponsibilityImplementation.less'; import styles from './ResponsibilityImplementation.less';
import upload from '@/assets/business_basic/upload.png'; import upload from '@/assets/business_basic/upload.png';
import download from '@/assets/business_basic/download.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_fighting1 from '@/assets/business_basic/fire_fighting1.png';
import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png'; import fire_fighting2 from '@/assets/business_basic/fire_fighting2.png';
import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png'; import fire_fighting3 from '@/assets/business_basic/fire_fighting3.png';
import frameIcon from '@/assets/business_basic/Frame.png'; import frameIcon from '@/assets/business_basic/Frame.png';
import background1 from '@/assets/business_basic/background1.png'; import background1 from '@/assets/business_basic/background1.png';
import export1 from '@/assets/business_basic/export1.png';
const ResponsibilityImplementation = () => { const ResponsibilityImplementation = () => {
@ -26,99 +30,271 @@ const ResponsibilityImplementation = () => {
title:"编号", title:"编号",
dataIndex:"id", dataIndex:"id",
key:"id", key:"id",
width:60, width:80,
}, },
{ {
title:"责任区域", title:"组织代码",
dataIndex:"zrqy", dataIndex:"orgCode",
key:"zrqy", key:"orgCode",
width:120, width:120,
}, },
{ {
title:"设备型号", title:"组织类型",
dataIndex:"sbxh", dataIndex:"orgType",
key:"sbxh", key:"orgType",
width:120, width:120,
}, },
{ {
title:"危险源类型", title:"负责人",
dataIndex:"wxlylx", dataIndex:"manager",
key:"wxlylx", key:"manager",
width:120, width:100,
}, },
{ {
title:"责任人", title:"所属部门",
dataIndex:"zrr", dataIndex:"department",
key:"zrr", key:"department",
width:120, width:120,
}, },
{ {
title:"联系方式", title:"创建时间",
dataIndex:"lxfs", dataIndex:"createTime",
key:"lxfs", key:"createTime",
width:120, width:120,
}, },
{ {
title:"巡检频率", title:"人员规模",
dataIndex:"xjpl", dataIndex:"staffCount",
key:"xjpl", key:"staffCount",
width:120, width:100,
},
{
title:"最近巡检",
dataIndex:"zjxj",
key:"zjxj",
width:120,
}, },
{ {
title:"状态", title:"状态",
dataIndex:"zt", dataIndex:"status",
key:"zt", key:"status",
width:120, 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:"操作", title:"操作",
dataIndex:"cz", dataIndex:"action",
key:"cz", key:"action",
width:120, width:120,
render: (text, record) => { // ======== 渲染操作列 ======== render: (text, record) => {
const handleView = (record) => { // ======== 定义查看函数 ======== const handleEdit = (record) => {
console.log('查看记录:', record); // ======== 打印记录信息到控制台 ======== console.log('编辑记录:', record);
// 这里可以添加查看详情的逻辑 // ======== 注释：可以添加查看详情的逻辑 ======== };
}; // ======== 函数结束 ========
return ( // ======== 返回按钮组件 ======== const handleDelete = (record) => {
<Button type="link" onClick={() => handleView(record)}>查看</Button> // ======== 查看按钮，点击时调用handleView函数 ======== console.log('删除记录:', record);
); // ======== return语句结束 ======== };
} // ======== render函数结束 ========
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>
);
}
} }
]; ];
// 生成20条假数据 // 固定的假数据
const generateMockData = () => { // ======== 定义生成假数据的函数 ======== const tableData = [
const data = []; // ======== 创建空数组存储数据 ======== {
const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区']; // ======== 责任区域选项 ======== key: '1',
const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀']; // ======== 设备型号选项 ======== id: '01',
const statuses = ['正常', '维护中', '故障', '停用', '检修']; // ======== 状态选项 ======== orgCode: 'DH002',
const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二']; // ======== 责任人姓名选项 ======== orgType: '义务消防队',
manager: '张明',
for (let i = 1; i <= 20; i++) { // ======== 循环生成20条数据 ======== department: '安全管理部',
data.push({ // ======== 添加一条数据到数组 ======== createTime: '2024-12-19 14:32:15',
key: i.toString(), // ======== 唯一标识 ======== staffCount: '15人',
id: `WX${String(i).padStart(3, '0')}`, // ======== 编号：WX001, WX002... ======== status: '正常'
zrqy: areas[Math.floor(Math.random() * areas.length)], // ======== 随机选择责任区域 ======== },
sbxh: devices[Math.floor(Math.random() * devices.length)], // ======== 随机选择设备型号 ======== {
zrr: names[Math.floor(Math.random() * names.length)], // ======== 随机选择责任人 ======== key: '2',
zt: statuses[Math.floor(Math.random() * statuses.length)], // ======== 随机选择状态 ======== id: '02',
}); // ======== 数据对象结束 ======== orgCode: 'DH002',
} // ======== 循环结束 ======== orgType: '义务消防队',
return data; // ======== 返回生成的数据数组 ======== manager: '张明',
}; // ======== 函数结束 ======== department: '安全管理部',
createTime: '2024-12-18 09:25:43',
const tableData = generateMockData(); // ======== 调用函数生成假数据 ======== 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 ( return (
<div className={styles.containerR}> <div className={styles.XcontainerR}>
{/* 警告提示框 */} {/* 警告提示框 */}
<div className={styles.warningBox}> <div className={styles.warningBox}>
<img src={frameIcon} alt="警告" className={styles.warningIcon} /> <img src={frameIcon} alt="警告" className={styles.warningIcon} />
@ -172,7 +348,8 @@ const ResponsibilityImplementation = () => {
</div> </div>
<div className={styles.rightTopRight}> <div className={styles.rightTopRight}>
<div className={styles.searchGroup}> <div className={styles.searchGroup}>
<Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 160}} />
<Input.Search placeholder="搜索成员..." onSearch={onSearch} style={{ width: 200}} />
<Select <Select
defaultValue="全部组织" defaultValue="全部组织"
className={styles.organizationSelect} className={styles.organizationSelect}
@ -223,7 +400,7 @@ const ResponsibilityImplementation = () => {
<div className={styles.infoBlock}> <div className={styles.infoBlock}>
<div className={styles.tagContainer}> <div className={styles.tagContainer}>
<div className={styles.tagBlue3}>消防工程师</div> <div className={styles.tagBlue3}>消防工程师</div>
<div className={styles.tagYellow}>证书3天后到期</div> <div className={styles.tagYellow}>证书7天后到期</div>
</div> </div>
</div> </div>
@ -238,10 +415,98 @@ const ResponsibilityImplementation = () => {
</div> </div>
</div> </div>
<div className={styles.blockItem}> <div className={styles.blockItem}>
<div className={styles.blockContent}>待开发</div> <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>
<div className={styles.blockItem}> <div className={styles.blockItem}>
<div className={styles.blockContent}>待开发</div> <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>
@ -253,26 +518,36 @@ const ResponsibilityImplementation = () => {
<div className={styles.containerTwoTitle}> <div className={styles.containerTwoTitle}>
<div className={styles.titleLeft}> <div className={styles.titleLeft}>
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>重大危险源安全包信息库</div> <div>组织架构管理</div>
</div> </div>
</div> </div>
{/* 第二个大块：搜索和按钮 */} {/* 第二个大块：搜索和按钮 */}
<div className={styles.containerTwoActions}> <div className={styles.containerTwoActions}>
<div className={styles.searchSection}> <div className={styles.searchSection}>
<Input placeholder="搜索危险源编号" /> <Input.Search placeholder="搜索姓名、工号..." onSearch={onSearch} style={{ width: 180 }} />
</div> </div>
<div className={styles.buttonSection}> <div className={styles.buttonSection}>
<Button>新增责任人</Button> <Button className={styles.addBtn}>
<Button>导出清单</Button> <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> </div>
{/* 第三个大块：表格 */} {/* 第三个大块：表格 */}
<div className={styles.containerTwoTable}> <div className={styles.containerTwoTable}>
<StandardTable <StandardTable
columns={columns} // ======== 表格列配置 ======== columns={columns}
data={{ // ======== 数据对象，包含list和pagination ======== data={{
list: tableData, // ======== 表格数据列表 ======== list: tableData, // ======== 表格数据列表 ========
pagination: { // ======== 分页配置 ======== pagination: { // ======== 分页配置 ========
currentPage: 1, // ======== 当前页码 ======== currentPage: 1, // ======== 当前页码 ========
@ -283,6 +558,20 @@ const ResponsibilityImplementation = () => {
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ======== selectedRows={[]} // ======== 选中的行数据，初始为空数组 ========
onSelectRow={() => {}} // ======== 行选择事件处理函数 ======== onSelectRow={() => {}} // ======== 行选择事件处理函数 ========
onChange={() => {}} // ======== 表格变化事件处理函数 ======== 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> </div>

405
src/pages/business_basic/module/ResponsibilityImplementation.less
Unescape Escape View File

@ -1,4 +1,4 @@
.containerR { .XcontainerR {
padding: 8px 6px; padding: 8px 6px;
height: 100%; height: 100%;
display: flex; display: flex;
@ -277,11 +277,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
.infoBlock { .infoBlock {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
white-space: nowrap; white-space: nowrap;
.nameText { .nameText {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
@ -305,16 +307,16 @@
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
.infoText { .infoText {
font-size: 10px; font-size: 10px;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
} }
} }
.tagContainer { .tagContainer {
display: flex; display: flex;
gap: 8px; gap: 8px;
@ -331,6 +333,7 @@
white-space: nowrap; white-space: nowrap;
margin-left: 10px; margin-left: 10px;
} }
.tagBlue2 { .tagBlue2 {
background-color: #D5E5FF; background-color: #D5E5FF;
color: #1269FF; color: #1269FF;
@ -339,8 +342,9 @@
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
} }
.tagBlue3 { .tagBlue3 {
background-color: #D5E5FF; background-color: #D5E5FF;
color: #1269FF; color: #1269FF;
@ -350,7 +354,7 @@
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
margin-left: 10px; margin-left: 10px;
} }
.tagYellow { .tagYellow {
@ -389,12 +393,12 @@
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
padding: 2px 15px; padding: 2px 15px;
&:hover { &:hover {
background-color: #0f5ae0; background-color: #0f5ae0;
} }
} }
.deleteBtn { .deleteBtn {
height: 80%; height: 80%;
background-color: #FF5F60; background-color: #FF5F60;
@ -405,14 +409,298 @@
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
padding: 2px 15px; 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 { &:hover {
background-color: #ff4a4b; 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 { .containerTwo {
flex: 1; flex: 1;
background-color: white; background-color: white;
@ -431,6 +718,7 @@
border-radius: 4px; border-radius: 4px;
.containerTwoTitle { .containerTwoTitle {
margin-top: 5px;
margin-bottom: 15px; margin-bottom: 15px;
.titleLeft { .titleLeft {
@ -455,6 +743,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
padding: 0px 20px;
.searchSection { .searchSection {
flex: 1; flex: 1;
@ -462,7 +751,7 @@
:global(.ant-input) { :global(.ant-input) {
height: 32px; height: 32px;
border-radius: 4px; border-radius: 4px 0px 0px 4px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
&:focus { &:focus {
@ -495,23 +784,106 @@
color: #2E4CD4; 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 { .containerTwoTable {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
padding: 0px 20px;
:global(.ant-table) { :global(.ant-table) {
font-size: 12px; font-size: 12px;
} }
:global(.ant-pagination-options-quick-jumper input) {
text-align: center !important;
}
:global(.ant-table-thead > tr > th) { :global(.ant-table-thead > tr > th) {
background-color: #f5f5fa; background-color: #f5f5fa;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
padding: 8px 12px; padding: 8px 12px;
text-align: center; text-align: center;
} }
@ -523,7 +895,7 @@
} }
:global(.ant-table-tbody > tr:hover > td) { :global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5; // background-color: #f5f5f5;
} }
:global(.ant-pagination) { :global(.ant-pagination) {
@ -622,4 +994,5 @@
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
} }
} }

59
src/pages/business_basic/module/RiskAssessment.js
Unescape Escape View File

@ -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 risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png'; import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.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 RiskAssessment = () => {
const chartRef = useRef(null); const chartRef = useRef(null);
@ -500,77 +503,47 @@ const RiskAssessment = () => {
{/* 块1 */} {/* 块1 */}
<div className={styles.blockItem}> <div className={styles.blockItem}>
<div className={styles.blockLeft}> <div className={styles.blockLeft}>
<div className={styles.blockTitle}>总危险源数量</div> <div className={styles.blockTitle}>设备总数</div>
<div className={styles.blockNumber}>65</div> <div className={styles.blockNumber}>1280</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div> </div>
<div className={styles.blockRight}> <div className={styles.blockRight}>
<img src={img1} alt="总危险源数量" className={styles.blockImage} /> <img src={eqicon1} alt="设备总数" className={styles.blockImage} />
</div> </div>
</div> </div>
{/* 块2 */} {/* 块2 */}
<div className={styles.blockItem}> <div className={styles.blockItem}>
<div className={styles.blockLeft}> <div className={styles.blockLeft}>
<div className={styles.blockTitle}>高风险设备</div> <div className={styles.blockTitle}>正常运行</div>
<div className={styles.blockNumber}>65</div> <div className={styles.blockNumber}>480</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div> </div>
<div className={styles.blockRight}> <div className={styles.blockRight}>
<img src={img2} alt="高风险设备" className={styles.blockImage} /> <img src={eqicon2} alt="高风险设备" className={styles.blockImage} />
</div> </div>
</div> </div>
{/* 块3 */} {/* 块3 */}
<div className={styles.blockItem}> <div className={styles.blockItem}>
<div className={styles.blockLeft}> <div className={styles.blockLeft}>
<div className={styles.blockTitle}>今日预警次数</div> <div className={styles.blockTitle}>需要维护</div>
<div className={styles.blockNumber}>65</div> <div className={styles.blockNumber}>347</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div> </div>
<div className={styles.blockRight}> <div className={styles.blockRight}>
<img src={img3} alt="今日预警次数" className={styles.blockImage} /> <img src={eqicon3} alt="今日预警次数" className={styles.blockImage} />
</div> </div>
</div> </div>
{/* 块4 */} {/* 块4 */}
<div className={styles.blockItem}> <div className={styles.blockItem}>
<div className={styles.blockLeft}> <div className={styles.blockLeft}>
<div className={styles.blockTitle}>未处理预警</div> <div className={styles.blockTitle}>故障设备</div>
<div className={styles.blockNumber}>65</div> <div className={styles.blockNumber}>289</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div> </div>
<div className={styles.blockRight}> <div className={styles.blockRight}>
<img src={img1} alt="未处理预警" className={styles.blockImage} /> <img src={eqicon4} alt="未处理预警" className={styles.blockImage} />
</div> </div>
</div> </div>
{/* 块5 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>已处理预警</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<CheckCircleOutlined className={styles.checkIcon} />
已完成
</div>
</div>
<div className={styles.blockRight}>
<img src={img2} alt="已处理预警" className={styles.blockImage} />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

8
src/pages/business_basic/module/RiskAssessment.less
Unescape Escape View File

@ -29,7 +29,7 @@
flex: 1; flex: 1;
height: 100%; height: 100%;
display: flex; 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-radius: 4px;
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;
@ -47,7 +47,7 @@
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: #666666; color: #333333;
line-height: 1.2; line-height: 1.2;
} }
@ -92,10 +92,10 @@
.blockImage { .blockImage {
// width: 80%; // width: 80%;
height: 130%; height: 65%;
// height: 80%; // height: 80%;
object-fit: contain; object-fit: contain;
margin-right: -10px; margin-right: -5px;
} }
} }
} }

Write Preview
Loading…
Cancel
Save