-
-
交接班管理
+
+ {/* 第一行：交接提醒 */}
+
+ 
+ 交接提醒：
+ 距离下一班交接时间还有 2小时30分钟，请提前准备交班内容。
- {/* 搜索和操作区域 */}
-
- 
,
"key": "/topnavbar00/business/emergencyDuty",
- "label": "应急值班管理"
+ "label": "应急值班值守"
},
// // 事故接警单
// {
diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js
index 985faa1..b448f32 100644
--- a/src/pages/topnavbar/TopNavBar.js
+++ b/src/pages/topnavbar/TopNavBar.js
@@ -23,7 +23,7 @@ const menuItem = [
},
// 应急值班管理
{
- label: '应急值班管理',
+ label: '应急值班值守',
key: '/topnavbar00/business/emergencyDuty',
},
// 事故接警单
-
-
- }
- onClick={handleAdd}
- className={styles.customButton}
- >
- 新增
-
- }
- onClick={handleBatchDelete}
- >
- 删除
-
+ {/* 第二行：主内容区域 */}
+
);
diff --git a/src/pages/business_emergencyDuty/components/DutyHandover.less b/src/pages/business_emergencyDuty/components/DutyHandover.less
index 1c6a136..568ed17 100644
--- a/src/pages/business_emergencyDuty/components/DutyHandover.less
+++ b/src/pages/business_emergencyDuty/components/DutyHandover.less
@@ -1,127 +1,375 @@
-.container {
- padding: 20px;
- background: #fff;
- height: 100vh;
-}
-
-.header {
+.pageWrapper {
+ padding: 0;
+ margin: 10px 0px 0px 5px;
+ min-height: 100%;
display: flex;
- align-items: center;
- margin-bottom: 15px;
-
- .titleBar {
- width: 3px;
- height: 16px;
- background: #2E4CD4;
- margin-right: 12px;
- }
-
- .title {
- margin: 0;
- font-size: 14px;
- font-weight: 500;
- color: #333;
- }
-}
+ flex-direction: column;
-.searchBar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10px;
- padding: 5px;
-
- .searchLeft {
- display: flex;
- align-items: center;
- gap: 12px;
- }
-
- .searchRight {
+ // 第一行：交接提醒
+ .alertBar {
+ padding: 8px 20px;
+ background-color: #FFF3CD;
+ border: 2px solid #FFECB2;
+ border-radius: 2px;
+ color: #8C6C0B;
display: flex;
align-items: center;
- gap: 12px;
- }
-}
-
-// 自定义按钮样式
-.customButton {
- background-color: #2E4CD4 !important;
- border-color: #2E4CD4 !important;
- border-radius: 2px !important;
- height: 30px !important;
- width: 75px;
- display: flex !important;
- align-items: center !important;
- justify-content: center !important;
-
- &:hover {
- background-color: #1e3bb8 !important;
- border-color: #1e3bb8 !important;
- }
-
- &:focus {
- background-color: #2E4CD4 !important;
- border-color: #2E4CD4 !important;
- }
-}
-
-.tableContainer {
- background: #fff;
- border-radius: 0px;
- overflow: hidden;
-
- .actionButtons {
- display: flex;
gap: 8px;
- font-size: 10px;
- justify-content: center;
-
- .ant-btn-link {
- padding: 0;
- height: auto;
- font-size: 10px;
- }
+ font-size: 14px;
+ font-weight: 450;
+ margin-bottom: 10px;
}
-}
-
-// 表格样式优化
-.tableContainer {
- :global {
- .ant-table-thead > tr > th {
- background: #F5F5FA;
- font-weight: 500;
- color: #333333;
- font-size: 14px;
- text-align: center;
- }
-
- .ant-table-tbody > tr > td {
- color: #666666;
- font-size: 13px;
- text-align: center;
- }
-
- .ant-table-tbody > tr:hover > td {
- background: #f5f5f5;
- }
-
- .ant-pagination {
- margin-top: 10px;
- text-align: right;
- }
-
- .ant-btn.ant-btn-sm {
- font-size: 13px !important;
- height: 20px !important;
- padding: 0px 4px !important;
+
+ // 第二行：主内容区域
+ .mainContent {
+ flex: 1;
+ display: flex;
+ gap: 15px;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+ min-height: 0;
+
+ // A块：左侧区域
+ .leftArea {
+ width: 68%;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+
+ // a块：统计数据
+ .statsBlock {
+ height: 100px;
+ // background-color: pink;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .statItem {
+ height: 100%;
+ width: 32%;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ border: solid #FFFFFF;
+ border-width: 2px 2px 0px 2px;
+ background: linear-gradient(170.5deg, #F5F7FF 10%, #FFFFFF 60%);
+
+
+ .statContent {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-left: 20px;
+ flex: 1;
+
+ .statLabel {
+ font-size: 14px;
+ color: #333;
+ white-space: nowrap;
+ }
+
+ .statValue {
+ font-size: 28px;
+ font-weight: bold;
+ font-family: 'Fette-Mittelschrift';
+ color: #333;
+ }
+ }
+ }
+ }
+
+ // b块：交接班流程
+ .flowBlock {
+ height: 180px;
+ background: url("@/assets/business_Emergency/bgDrill1.svg") no-repeat center center;
+ background-size: cover;
+ padding: 8px 10px 0px 10px;
+ display: flex;
+ flex-direction: column;
+
+ .flowTitle {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #333333;
+ margin-bottom: 5px;
+
+ &::before {
+ content: '';
+ width: 3px;
+ height: 18px;
+ background-color: #2E4CD4;
+ }
+ }
+
+ .flowContent {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ background: linear-gradient(360deg, rgba(255, 255, 255, 0.7) 0%, rgba(208, 225, 255, 0.7) 100%);
+ border: 1px solid;
+ border-image-source: linear-gradient(0deg, #FFFFFF 29.33%, rgba(255, 255, 255, 0.6) 51.92%, rgba(211, 229, 255, 0.2) 77.4%, rgba(211, 229, 255, 0.3) 100%);
+ justify-content: center;
+ // flex: 1;
+ padding: 10px 10px;
+
+ // 自定义 antd Steps 样式
+ :global {
+ .ant-steps {
+ margin-left: 10px;
+
+ }
+
+ .ant-steps-item-container{
+ width: 150px;
+ }
+
+ .ant-steps-item-content {
+ margin-top: 0px !important;
+ margin-left: 2px;
+ }
+
+ .ant-steps-item-title {
+ font-size: 13px !important;
+ font-weight: 500 !important;
+ color: #333 !important;
+ height: 28px;
+ margin-top: 0px !important;
+ padding: 0 !important;
+ margin-bottom: 0px !important;
+ }
+
+ .ant-steps-item-description {
+ margin-top: 0px !important;
+
+ padding: 0 !important;
+ margin-bottom: 0px !important;
+ width: 132px !important;
+ font-size: 12px !important;
+ color: #666 !important;
+ line-height: 1.2 !important;
+ }
+
+ // 控制步骤之间的连接线
+ .ant-steps-item-tail {
+ padding: 5px 0 !important; // 控制连接线的垂直位置
+ }
+
+ // .ant-steps-item-tail::after {
+ // background-color: #B5C6DF !important; // 连接线颜色
+ // height: 1px !important; // 连接线长度
+ // width: 160px !important; // 连接线粗细
+ // }
+
+ // 背景图片作为连接线
+ .ant-steps-item-tail::after {
+ background-image: url('@/assets/business_Emergency/iconDuty6.svg') !important;
+ background-size: contain !important;
+ background-repeat: no-repeat !important;
+ background-position: center !important;
+ background-color: transparent;
+ width: 190px !important;
+ height: 12px !important;
+ }
+ }
+ }
+ }
+
+ // c块：最近交接班记录（自适应高度）
+ .tableBlock {
+ background: #fff;
+ padding: 8px 10px 10px 10px;
+ display: flex;
+ flex-direction: column;
+
+ .tableHeader {
+ margin-bottom: 10px;
+
+ .tableTitle {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #333333;
+
+ &::before {
+ content: '';
+ width: 3px;
+ height: 18px;
+ background-color: #2E4CD4;
+ }
+ }
+ }
+
+ .statusSuccess {
+ display: inline-block;
+ padding: 2px 12px;
+ background: #D8F7DE;
+ color: #44BB5F;
+ border-radius: 2px;
+ font-size: 12px;
+ }
+
+ .statusWarning {
+ display: inline-block;
+ padding: 2px 12px;
+ background: #FFF3E9;
+ color: #FF8800;
+ border-radius: 2px;
+ font-size: 12px;
+ }
+
+ .linkBtn {
+ padding: 0;
+ font-size: 13px;
+ color: #2E4CD4;
+ }
+
+ :global {
+ .ant-table-wrapper {
+ // 表格自适应内容高度
+ }
+
+ .ant-table-thead>tr>th {
+ background: #F5F5FA;
+ font-weight: 500;
+ color: #333;
+ font-size: 13px;
+ text-align: center;
+ padding: 12px 8px;
+ border-radius: 2px;
+ }
+
+ .ant-table-tbody>tr>td {
+ color: #666;
+ font-size: 13px;
+ text-align: center;
+ padding: 12px 8px;
+ }
+
+ .ant-table-tbody>tr:hover>td {
+ background: #f5f5f5;
+ }
+
+ .ant-pagination {
+ margin-top: 15px;
+ text-align: right;
+ }
+ }
+ }
}
-
- .ant-btn-link.ant-btn-sm {
- font-size: 13px !important;
- height: auto !important;
- padding: 0 !important;
+
+ // B块：右侧区域
+ .rightArea {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .formBlock {
+ background: #fff;
+ padding: 20px;
+ height: 100%;
+ overflow-y: auto;
+
+ .formTitle {
+ font-size: 16px;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 20px;
+ }
+
+ .formRow {
+ display: flex;
+ gap: 15px;
+ margin-bottom: 15px;
+
+ .formItem {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .formLabel {
+ font-size: 14px;
+ color: #333;
+ }
+
+ .formInput {
+ width: 100%;
+ }
+ }
+ }
+
+ .formFullRow {
+ margin-bottom: 15px;
+
+ .formLabel {
+ font-size: 14px;
+ color: #333;
+ display: block;
+ margin-bottom: 8px;
+ }
+
+ .eventList {
+ background: #F5F7FA;
+ padding: 12px;
+ border-radius: 4px;
+
+ .eventItem {
+ font-size: 13px;
+ color: #666;
+ line-height: 1.8;
+ margin-bottom: 5px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .taskList {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ .taskCheckbox {
+ font-size: 13px;
+ color: #666;
+ }
+ }
+ }
+
+ .formActions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 15px;
+ margin-top: 30px;
+
+ .btnDefault {
+ border-radius: 4px;
+ padding: 6px 20px;
+ }
+
+ .btnPrimary {
+ background-color: #2E4CD4;
+ border-color: #2E4CD4;
+ border-radius: 4px;
+ padding: 6px 20px;
+
+ &:hover {
+ background-color: #1e3bb8;
+ border-color: #1e3bb8;
+ }
+ }
+ }
+ }
}
}
-}
-
+}
\ No newline at end of file
diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js
index d18fd5a..ce7b298 100644
--- a/src/pages/nav_system_content/SystemContentList.js
+++ b/src/pages/nav_system_content/SystemContentList.js
@@ -124,7 +124,7 @@ const SystemContentList = (props) => {
"path": "/topnavbar00/business/emergencyDuty",
icon:
+ {/* A块：左侧区域 */}
+
- {/* 数据表格 */}
-
+ {/* a块：统计数据 */}
+
-
+
+
+ {/* b块：交接班流程 */}
+
+ 
+
+
+
+ 本月交接班次数
+ 24
+
+
+ 
+
+
+
+ 交接班完成率
+ 98%
+
+
+ 
+
+
+
+ 待处理事项
+ 24
+
+
+
+ {/* c块：最近交接班记录 */}
+ 交接班流程
+
+ 
,
+ },
+ {
+ title: '查看交班内容',
+ description: '接班人员登录查看交班内容，全面了解值班情况',
+ status: 'wait',
+ icon: 
,
+ },
+ {
+ title: '确认与签字',
+ description: '双方确认系统填写信息认签字，完成交接',
+ status: 'wait',
+ icon: 
,
+ },
+ {
+ title: '记录存档',
+ description: '系统自动对交接班记录进行存档，方便查询和审计',
+ status: 'wait',
+ icon: 
,
+ },
+ ]}
+ />
+
+
+
+ 最近交接班记录
+
+
-
+
+
+ 交接班内容提醒
+
+ {/* 交班人和接班人 */}
+
+
+
+ {/* 日期和交班时间 */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* 值班期间重要事件描述 */}
+
+
+
+
+
+
+
+
+
+
+ {/* 未完成工作任务 */}
+
+
+
+ 1. 10-23 接到火灾报警器误报，已进行本人员处理，11:45 修复完成。
+
+
+ 2. 14:05 邮箱火灾预警告警，已答复处理完成。
+
+
+ 3. 16:30 进行了一起巡检交给本人，间题已解决。
+
+
+
+
+
+ {/* 按钮组 */}
+
+
+ 递交系统表单-运行正常
+
+
+ 应急电话-运行正常
+
+
+ 应急电话-运行正常
+
+
+
+
+
+
+