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

责任落实

Browse Source
main
wangyunfei 3 weeks ago
parent 31b679162d
commit 87f4f8382f
5 changed files with 107 additions and 156 deletions
Show Stats Download Patch File Download Diff File

2
.umirc.ts
Unescape Escape View File

@ -19,7 +19,7 @@ export default defineConfig({
}, },
dva: {}, dva: {},
// layout: {}, // layout: {},
mfsu: { strategy: 'normal' }, // mfsu: { strategy: 'normal' },
locale: { locale: {
default: 'zh-CN', default: 'zh-CN',
antd: true, antd: true,

BIN
src/assets/basic_information/background_examine.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/basic_information/timer_shaft.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

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

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd'; import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col, Select} from 'antd';
import { ExportOutlined } 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 timer_shaft from '@/assets/basic_information/timer_shaft.png'
const ResponsibilityImplementation = () => { const ResponsibilityImplementation = () => {
@ -114,68 +116,12 @@ const ResponsibilityImplementation = () => {
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>履职时间轴</div> <div>履职时间轴</div>
</div> </div>
</div>
{/* 第二块：时间轴内容 */} {/* 时间轴图片 */}
<div className={styles.leftBottomSection}> <div style={{ marginTop: '15px' }}>
<div className={styles.timelineHorizontal}> <img src={timer_shaft} alt="时间轴" style={{ width: '100%', height: 'auto' }} />
<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>
</div> </div>
@ -185,7 +131,7 @@ const ResponsibilityImplementation = () => {
<div className={styles.rightTopLeft}> <div className={styles.rightTopLeft}>
<div className={styles.titleLeft}> <div className={styles.titleLeft}>
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>履职时间轴</div> <div>在线考核</div>
</div> </div>
<Select <Select
style={{ width: 100, marginLeft: 15 }} style={{ width: 100, marginLeft: 15 }}
@ -207,18 +153,28 @@ const ResponsibilityImplementation = () => {
<Button <Button
type="primary" type="primary"
className={styles.exportBtn} className={styles.exportBtn}
icon="📄" icon={<ExportOutlined />}
> >
导出PDF考核报告 导出PDF考核报告
</Button> </Button>
</div> </div>
</div> </div>
{/* 第二块：图片内容 */} {/* 第二块：重叠图片和div */}
<div className={styles.rightBottomSection}> <div className={styles.rightBottomSection}>
<div className={styles.imagePlaceholder}> <div className={styles.overlayContainer}>
<div className={styles.imageIcon}>📊</div> {/* 背景图片1 */}
<div className={styles.imageText}>数据图表</div> <div className={styles.backgroundImage1}>
<div className={styles.placeholderText}>占位图片1</div>
</div>
{/* 背景图片2 */}
<div className={styles.backgroundImage2}>
<div className={styles.placeholderText}>占位图片2</div>
</div>
{/* 重叠的div元素 */}
<div className={styles.overlayDiv1}>待开发123</div>
<div className={styles.overlayDiv2}>待开发123</div>
<div className={styles.overlayDiv3}>待开发123</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -39,85 +39,13 @@
} }
} }
.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{ .containerOneRight{
background-color: white; background: linear-gradient(258.72deg, rgba(219, 226, 255, 0.6) 0%, #FFFFFF 100%), url('@/assets/basic_information/background_examine.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width:42%; width:42%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -176,25 +104,92 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.imagePlaceholder { .overlayContainer {
position: relative;
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
border: 2px dashed #d9d9d9;
border-radius: 4px;
.imageIcon { .backgroundImage1 {
font-size: 48px; position: absolute;
margin-bottom: 10px; top: 10px;
left: 10px;
width: 60%;
height: 60%;
background-color: #e6f7ff;
border: 2px solid #91d5ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
.placeholderText {
font-size: 12px;
color: #1890ff;
font-weight: 500;
}
} }
.imageText { .backgroundImage2 {
position: absolute;
bottom: 10px;
right: 10px;
width: 50%;
height: 50%;
background-color: #f6ffed;
border: 2px solid #b7eb8f;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
.placeholderText {
font-size: 12px;
color: #52c41a;
font-weight: 500;
}
}
.overlayDiv1 {
position: absolute;
top: 20px;
right: 20px;
background-color: rgba(255, 77, 79, 0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
z-index: 3;
}
.overlayDiv2 {
position: absolute;
bottom: 30px;
left: 30px;
background-color: rgba(82, 196, 26, 0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
z-index: 3;
}
.overlayDiv3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(24, 144, 255, 0.8);
color: white;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px; font-size: 14px;
color: #999999; font-weight: 500;
z-index: 3;
} }
} }
} }

Write Preview
Loading…
Cancel
Save