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: {},
// layout: {},
mfsu: { strategy: 'normal' },
// mfsu: { strategy: 'normal' },
locale: {
default: 'zh-CN',
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

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

@ -1,9 +1,11 @@
import React from 'react';
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 styles from './ResponsibilityImplementation.less';
import timer_shaft from '@/assets/basic_information/timer_shaft.png'
const ResponsibilityImplementation = () => {
@ -114,68 +116,12 @@ const ResponsibilityImplementation = () => {
<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 style={{ marginTop: '15px' }}>
<img src={timer_shaft} alt="时间轴" style={{ width: '100%', height: 'auto' }} />
</div>
</div>
</div>
@ -185,7 +131,7 @@ const ResponsibilityImplementation = () => {
<div className={styles.rightTopLeft}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>履职时间轴</div>
<div>在线考核</div>
</div>
<Select
style={{ width: 100, marginLeft: 15 }}
@ -207,18 +153,28 @@ const ResponsibilityImplementation = () => {
<Button
type="primary"
className={styles.exportBtn}
icon="📄"
icon={<ExportOutlined />}
>
导出PDF考核报告
</Button>
</div>
</div>
{/* 第二块：图片内容 */}
{/* 第二块：重叠图片和div */}
<div className={styles.rightBottomSection}>
<div className={styles.imagePlaceholder}>
<div className={styles.imageIcon}>📊</div>
<div className={styles.imageText}>数据图表</div>
<div className={styles.overlayContainer}>
{/* 背景图片1 */}
<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>

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{
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%;
display: flex;
flex-direction: column;
@ -176,25 +104,92 @@
align-items: center;
justify-content: center;
.imagePlaceholder {
.overlayContainer {
position: relative;
width: 100%;
height: 100%;
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;
.backgroundImage1 {
position: absolute;
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;
color: #999999;
font-weight: 500;
z-index: 3;
}
}
}

Write Preview
Loading…
Cancel
Save