diff --git a/src/assets/business_Emergency/iconDrill2.jpg b/src/assets/business_Emergency/iconDrill2.jpg new file mode 100644 index 0000000..2104f65 Binary files /dev/null and b/src/assets/business_Emergency/iconDrill2.jpg differ diff --git a/src/assets/business_Emergency/iconDrill3.svg b/src/assets/business_Emergency/iconDrill3.svg new file mode 100644 index 0000000..e45f5f1 --- /dev/null +++ b/src/assets/business_Emergency/iconDrill3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/business_Emergency/iconDrill4.svg b/src/assets/business_Emergency/iconDrill4.svg new file mode 100644 index 0000000..d3f670e --- /dev/null +++ b/src/assets/business_Emergency/iconDrill4.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.js b/src/pages/business_emergencyDrill/EmergencyDrill.js index c0f4484..0db4578 100644 --- a/src/pages/business_emergencyDrill/EmergencyDrill.js +++ b/src/pages/business_emergencyDrill/EmergencyDrill.js @@ -1,9 +1,13 @@ import React, { useState, useEffect, useRef } from 'react'; import { Button } from "antd"; +import { ClockCircleOutlined, EnvironmentOutlined, UserOutlined } from '@ant-design/icons'; import * as echarts from 'echarts'; import styles from './EmergencyDrill.less'; import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection'; import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg'; +import iconDrill2 from '../../assets/business_Emergency/iconDrill2.jpg'; +import iconDrill3 from '../../assets/business_Emergency/iconDrill3.svg'; +import iconDrill4 from '../../assets/business_Emergency/iconDrill4.svg'; const EmergencyDrill = () => { const [timeType, setTimeType] = useState('month'); @@ -360,10 +364,137 @@ const EmergencyDrill = () => {
- {/* 第一小块 - 70% 宽度 */} +
+
+
协同演练
+
+ +
+
+
+
生产车间火灾应急演练
+
进行中
+
+
+
+ + 2023-09-12 09:30 +
+
+ + 第二生产车间 +
+
+ + 参与人数:32人 +
+
+
+ + +
+
+
+
+
生产车间火灾应急演练
+
即将开始
+
+
+
+ + 2023-09-12 09:30 +
+
+ + 第二生产车间 +
+
+ + 参与人数:32人 +
+
+
+ + +
+
+
+
+
生产车间火灾应急演练
+
已完成
+
+
+
+ + 2023-09-12 09:30 +
+
+ + 第二生产车间 +
+
+ + 参与人数:32人 +
+
+
+ + +
+
+
+
+
生产车间火灾应急演练
+
已完成
+
+
+
+ + 2023-09-12 09:30 +
+
+ + 第二生产车间 +
+
+ + 参与人数:32人 +
+
+
+ + +
+
+
+
- {/* 第二小块 - 撑满剩余宽度 */} +
+
+ 现场视频 +
+ +
+ {[1, 2, 3].map((item, index) => ( +
+
+ 视频缩略图 +
08:45
+
+
+
生产车间火灾应急演练
+
+ 2023-09-12 +
+ 下载 + 删除 +
+
+
+
+ ))} +
diff --git a/src/pages/business_emergencyDrill/EmergencyDrill.less b/src/pages/business_emergencyDrill/EmergencyDrill.less index 536653b..1aea53d 100644 --- a/src/pages/business_emergencyDrill/EmergencyDrill.less +++ b/src/pages/business_emergencyDrill/EmergencyDrill.less @@ -293,22 +293,536 @@ .block2 { width: 100%; - height: 25%; + height: 27%; padding: 0; margin: 0; display: flex; gap: 15px; .block2_item1 { - width: 70%; + width: 75%; height: 100%; background-color: #fff; + display: flex; + flex-direction: column; + padding: 10px 10px 10px 10px; + + .block2_item1_header { + display: flex; + align-items: center; + margin-bottom: 10px; + + .colorBlock { + width: 3px; + height: 16px; + background-color: #2E4CD4; + margin-right: 8px; + } + + .title { + font-size: 14px; + font-weight: 500; + color: #333333; + } + } + + .block2_item1_content { + flex: 1; + display: flex; + gap: 5px; + overflow: hidden; + + .drillCard1 { + flex: 1; + background-color: #F1F7FF; + padding: 8px 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .cardHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; + + .cardTitle { + font-size: 13px; + font-weight: 500; + color: #333333; + line-height: 24px; + flex: 1; + } + + .statusTag { + background-color: #D6E4FF; + color: #2E4CD4; + padding: 2px 6px; + font-size: 13px; + white-space: nowrap; + } + } + + .cardInfo { + flex: 1; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 8px; + + .infoItem { + display: flex; + align-items: center; + font-size: 12px; + color: #666666; + + .infoIcon { + font-size: 12px; + color: #999999; + margin-right: 8px; + } + } + } + + .cardButtons { + display: flex; + gap: 12px; + + .joinBtn { + flex: 1; + background-color: #2E4CD4; + border-color: #2E4CD4; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #4D64E0; + border-color: #4D64E0; + } + } + + .detailBtn { + flex: 1; + background-color: #FFFFFF; + border: 1px solid #D9D9D9; + color: #666666; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + color: #2E4CD4; + border-color: #2E4CD4; + } + } + } + } + + .drillCard2 { + flex: 1; + background-color: #FFFBF7; + padding: 8px 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .cardHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; + + .cardTitle { + font-size: 13px; + font-weight: 500; + color: #333333; + line-height: 24px; + flex: 1; + } + + .statusTag { + background-color: #FFE8D1; + color: #FF8C00; + padding: 2px 2px; + font-size: 13px; + white-space: nowrap; + } + } + + .cardInfo { + flex: 1; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 8px; + + .infoItem { + display: flex; + align-items: center; + font-size: 12px; + color: #666666; + + .infoIcon { + font-size: 12px; + color: #999999; + margin-right: 8px; + } + } + } + + .cardButtons { + display: flex; + gap: 12px; + + .reminderBtn { + flex: 1; + background-color: #FF8C00; + border-color: #FF8C00; + color: #FFFFFF; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #FFA833; + border-color: #FFA833; + color: #FFFFFF; + } + } + + .detailBtn { + flex: 1; + background-color: #FFFFFF; + border: 1px solid #D9D9D9; + color: #666666; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + color: #FF8C00; + border-color: #FF8C00; + } + } + } + } + + .drillCard3 { + flex: 1; + background-color: #F3FFF5; + padding: 8px 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .cardHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; + + .cardTitle { + font-size: 13px; + font-weight: 500; + color: #333333; + line-height: 24px; + flex: 1; + } + + .statusTag { + background-color: #D4F4DD; + color: #52C41A; + padding: 2px 6px; + font-size: 13px; + white-space: nowrap; + } + } + + .cardInfo { + flex: 1; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 8px; + + .infoItem { + display: flex; + align-items: center; + font-size: 12px; + color: #666666; + + .infoIcon { + font-size: 12px; + color: #999999; + margin-right: 8px; + } + } + } + + .cardButtons { + display: flex; + gap: 12px; + + .reportBtn { + flex: 1; + background-color: #52C41A; + border-color: #52C41A; + color: #FFFFFF; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #73D13D; + border-color: #73D13D; + color: #FFFFFF; + } + } + + .detailBtn { + flex: 1; + background-color: #FFFFFF; + border: 1px solid #D9D9D9; + color: #666666; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + color: #52C41A; + border-color: #52C41A; + } + } + } + } + + .drillCard4 { + flex: 1; + background-color: #F3FFF5; + padding: 8px 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .cardHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; + + .cardTitle { + font-size: 13px; + font-weight: 500; + color: #333333; + line-height: 24px; + flex: 1; + } + + .statusTag { + background-color: #D4F4DD; + color: #52C41A; + padding: 2px 6px; + font-size: 13px; + white-space: nowrap; + } + } + + .cardInfo { + flex: 1; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 8px; + + .infoItem { + display: flex; + align-items: center; + font-size: 12px; + color: #666666; + + .infoIcon { + font-size: 12px; + color: #999999; + margin-right: 8px; + } + } + } + + .cardButtons { + display: flex; + gap: 12px; + + .reportBtn { + flex: 1; + background-color: #52C41A; + border-color: #52C41A; + color: #FFFFFF; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #73D13D; + border-color: #73D13D; + color: #FFFFFF; + } + } + + .detailBtn { + flex: 1; + background-color: #FFFFFF; + border: 1px solid #D9D9D9; + color: #666666; + border-radius: 4px; + height: 28px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + color: #52C41A; + border-color: #52C41A; + } + } + } + } + } } .block2_item2 { flex: 1; height: 100%; background-color: #fff; + display: flex; + flex-direction: column; + padding: 12px; + + .sectionHeader { + display: flex; + align-items: center; + margin-bottom: 12px; + + .headerLine { + width: 2px; + height: 16px; + background-color: #2E4CD4; + margin-right: 8px; + } + + .headerTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + } + } + + .videoContainer { + flex: 1; + display: flex; + gap: 12px; + overflow-x: auto; + + .videoCard { + flex-shrink: 0; + width: 200px; + height: 150px; + // background-color: pink; + overflow: hidden; + cursor: pointer; + transition: transform 0.2s; + + .videoThumbnail { + position: relative; + width: 100%; + // height: 100%; + overflow: hidden; + + img { + width: 100%; + height: 92px; + object-fit: cover; + } + + .videoDuration { + position: absolute; + top: 8px; + right: 8px; + background-color: rgba(0, 0, 0, 0.7); + color: #FFFFFF; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: 500; + } + } + + .videoInfo { + padding: 6px 12px; + background-color: #EEF4FF; + + .videoTitle { + font-size: 14px; + font-weight: 500; + color: #333333; + margin-bottom: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .videoMeta { + display: flex; + justify-content: space-between; + align-items: center; + + .videoDate { + font-size: 12px; + color: #666666; + } + + .videoActions { + display: flex; + gap: 12px; + align-items: center; + + .actionIcon { + width: 14px; + height: 14px; + // cursor: pointer; + // transition: opacity 0.2s; + + // &:hover { + // opacity: 0.7; + // } + } + } + } + } + } + } } }