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

提交

Browse Source
main
wangyunfei 1 month ago
parent 10042eb0a7
commit dfd86fb847
3 changed files with 527 additions and 21 deletions
Show Stats Download Patch File Download Diff File

137
src/pages/safe_majorHazard/module/ResponsibilityImplementation.js
Unescape Escape View File

@ -1,6 +1,6 @@
import React from 'react';
import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col} from 'antd';
import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
import StandardTable from '@/components/StandardTable';
import styles from './ResponsibilityImplementation.less';
@ -107,16 +107,145 @@ const ResponsibilityImplementation = () => {
return (
<div className={styles.containerR}>
<div className={styles.containerOne}>
<div className={styles.containerOneLeft}>1</div>
<div className={styles.containerOneRight}>2</div>
<div className={styles.containerOneLeft}>
{/* 第一块：蓝色块 + 标题 履职时间轴 */}
<div className={styles.leftTopSection}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>履职时间轴</div>
</div>
</div>
{/* 第二块：时间轴内容 */}
<div className={styles.leftBottomSection}>
<div className={styles.timelineHorizontal}>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#2E4CD4' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-01-15</div>
<div className={styles.timelineText}>完成安全培训</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#52C41A' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-02-20</div>
<div className={styles.timelineText}>设备巡检完成</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#FAAD14' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-03-10</div>
<div className={styles.timelineText}>隐患排查处理</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#2E4CD4' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-04-05</div>
<div className={styles.timelineText}>月度安全会议</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#52C41A' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-05-12</div>
<div className={styles.timelineText}>安全检查</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#FAAD14' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-06-18</div>
<div className={styles.timelineText}>应急演练</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#2E4CD4' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-07-25</div>
<div className={styles.timelineText}>设备维护</div>
</div>
</div>
<div className={styles.timelineItem}>
<div className={styles.timelineDot} style={{ backgroundColor: '#52C41A' }}></div>
<div className={styles.timelineContent}>
<div className={styles.timelineDate}>2024-08-30</div>
<div className={styles.timelineText}>安全评估</div>
</div>
</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>
<Select
style={{ width: 100, marginLeft: 15 }}
defaultValue="每月"
className={styles.rightTopSelect}
options={[
{ value: '每月', label: '每月' },
{ value: '每年', label: '每年' },
]}
optionRender={(option) => (
<div className={styles.customOption}>
<span className={styles.optionIcon}>📅</span>
<span className={styles.optionText}>{option.label}</span>
</div>
)}
/>
</div>
<div className={styles.rightTopRight}>
<Button
type="primary"
className={styles.exportBtn}
icon="📄"
>
导出PDF考核报告
</Button>
</div>
</div>
{/* 第二块：图片内容 */}
<div className={styles.rightBottomSection}>
<div className={styles.imagePlaceholder}>
<div className={styles.imageIcon}>📊</div>
<div className={styles.imageText}>数据图表</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>
{/* 第二个大块：搜索和按钮 */}
<div className={styles.containerTwoActions}>
<div className={styles.searchSection}>
<Input placeholder="搜索危险源编号" />
</div>
<div className={styles.buttonSection}>
<Button>新增责任人</Button>
<Button>导出清单</Button>
</div>
</div>
{/* 第三个大块：表格 */}
<div className={styles.containerTwoTable}>
<StandardTable
columns={columns} // ======== 表格列配置 ========
data={{ // ======== 数据对象，包含list和pagination ========

378
src/pages/safe_majorHazard/module/ResponsibilityImplementation.less
Unescape Escape View File

@ -13,11 +13,191 @@
.containerOneLeft{
background-color: white;
width:58%;
// margin-right: 12px;
display: flex;
flex-direction: column;
padding: 15px;
border: 1px solid #f0f0f0;
border-radius: 4px;
.leftTopSection {
margin-bottom: 15px;
.titleLeft {
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;
}
}
}
.leftBottomSection {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
height: 80px;
.timelineHorizontal {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
padding: 12px 0;
width: 100%;
.timelineItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 20%;
position: relative;
flex-shrink: 0;
.timelineDot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
z-index: 2;
&::after {
content: '';
position: absolute;
left: 10px;
top: 50%;
width: calc(20% - 10px);
height: 2px;
background-color: #e8e8e8;
transform: translateY(-50%);
}
}
&:last-child .timelineDot::after {
display: none;
}
.timelineContent {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
width: 100%;
.timelineDate {
font-size: 11px;
color: #999999;
font-weight: 400;
white-space: nowrap;
}
.timelineText {
font-size: 10px;
color: #333333;
font-weight: 500;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
.containerOneRight{
background-color: white;
width:42%;
display: flex;
flex-direction: column;
padding: 15px;
border: 1px solid #f0f0f0;
border-radius: 4px;
.rightTopSection {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.rightTopLeft {
display: flex;
align-items: center;
.titleLeft {
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;
}
}
}
.rightTopRight {
.exportBtn {
background-color: #2E4CD4 !important;
border-color: #2E4CD4 !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 32px;
padding: 0 16px;
&:hover {
background-color: #1e3bb8 !important;
border-color: #1e3bb8 !important;
}
}
}
}
.rightBottomSection {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
.imagePlaceholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
border: 2px dashed #d9d9d9;
border-radius: 4px;
.imageIcon {
font-size: 48px;
margin-bottom: 10px;
}
.imageText {
font-size: 14px;
color: #999999;
}
}
}
}
}
@ -25,5 +205,201 @@
.containerTwo{
flex: 1;
background-color: white;
display: flex;
flex-direction: column;
padding: 15px;
border: 1px solid #f0f0f0;
border-radius: 4px;
.containerTwoTitle {
margin-bottom: 15px;
.titleLeft {
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;
}
}
}
.containerTwoActions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.searchSection {
flex: 1;
max-width: 300px;
:global(.ant-input) {
height: 32px;
border-radius: 4px;
border: 1px solid #d9d9d9;
&:focus {
border-color: #2E4CD4;
box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2);
}
}
}
.buttonSection {
display: flex;
gap: 8px;
:global(.ant-btn) {
height: 32px;
padding: 0 16px;
border-radius: 4px;
font-size: 14px;
border: 1px solid #d9d9d9;
background-color: #fff;
color: #333;
&:hover {
border-color: #2E4CD4;
color: #2E4CD4;
}
&:focus {
border-color: #2E4CD4;
color: #2E4CD4;
}
}
}
}
.containerTwoTable {
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;
}
}
}
}
.rightTopSelect{
// 下拉框本身的样式
:global(.ant-select-selector) {
background-color: #f8f9fa !important;
border: 1px solid #d9d9d9 !important;
border-radius: 6px !important;
height: 32px !important;
min-height: 32px !important;
&:hover {
border-color: #2E4CD4 !important;
}
&:focus {
border-color: #2E4CD4 !important;
box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
}
}
// 下拉框内的文字样式
:global(.ant-select-selection-item) {
color: #333333 !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 30px !important;
}
// 下拉箭头样式
:global(.ant-select-arrow) {
color: #666666 !important;
font-size: 12px !important;
}
// 下拉菜单容器样式
:global(.ant-select-dropdown) {
background-color: #ffffff !important;
border: 1px solid #e8e8e8 !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
padding: 4px 0 !important;
}
// 下拉选项样式
:global(.ant-select-item) {
color: #333333 !important;
font-size: 14px !important;
padding: 8px 12px !important;
border-radius: 4px !important;
margin: 2px 8px !important;
&:hover {
background-color: #f0f2ff !important;
color: #2E4CD4 !important;
}
&.ant-select-item-option-selected {
background-color: #e6f7ff !important;
color: #2E4CD4 !important;
font-weight: 600 !important;
}
}
// 选中状态的样式
:global(.ant-select-focused .ant-select-selector) {
border-color: #2E4CD4 !important;
box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
}
}
// 自定义选项样式
.customOption {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
.optionIcon {
font-size: 16px;
color: #2E4CD4;
}
.optionText {
font-size: 14px;
color: #333333;
font-weight: 500;
}
}

1
src/pages/safe_majorHazard/module/RiskAssessment.js
Unescape Escape View File

@ -5,6 +5,7 @@ import { CheckCircleOutlined } 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';

Write Preview
Loading…
Cancel
Save