现场视频

src/assets/business_Emergency/iconDrill3.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2141_24875)">
+<path d="M12.4592 7.83529C12.5957 7.83525 12.7274 7.88501 12.8297 7.97523C12.9321 8.06545 12.998 8.18993 13.015 8.32529L13.0192 8.39529V11.7497C13.0192 12.0659 12.9003 12.3706 12.6861 12.6033C12.4719 12.8359 12.178 12.9795 11.8628 13.0055L11.7592 13.0097H1.95922C1.64297 13.0097 1.33828 12.8908 1.10564 12.6766C0.872998 12.4623 0.729424 12.1685 0.703421 11.8533L0.699221 11.7497V8.39529C0.698823 8.25257 0.752933 8.11509 0.850497 8.01092C0.94806 7.90675 1.08171 7.84377 1.22416 7.83483C1.3666 7.8259 1.50708 7.87168 1.61689 7.96284C1.72671 8.054 1.79758 8.18364 1.81502 8.32529L1.81922 8.39529V11.7497C1.8192 11.7804 1.82926 11.8102 1.84785 11.8346C1.86644 11.859 1.89253 11.8767 1.92212 11.8848L1.95922 11.8897H11.7592C11.7899 11.8897 11.8197 11.8797 11.8442 11.8611C11.8686 11.8425 11.8862 11.8164 11.8943 11.7868L11.8992 11.7497V8.39529C11.8992 8.24677 11.9582 8.10433 12.0632 7.99931C12.1683 7.89429 12.3107 7.83529 12.4592 7.83529ZM6.85922 0.700195C6.99565 0.700149 7.12741 0.749909 7.22975 0.840132C7.33208 0.930355 7.39797 1.05483 7.41502 1.1902L7.41922 1.2602L7.41852 7.96479L10.1506 5.87109C10.2633 5.7858 10.404 5.74626 10.5446 5.7604C10.6852 5.77453 10.8153 5.8413 10.9087 5.94731C11.0022 6.05332 11.0521 6.19074 11.0484 6.332C11.0448 6.47327 10.9879 6.60793 10.8891 6.70899L10.8317 6.75939L7.20712 9.53979C7.12042 9.60626 7.01617 9.64591 6.90722 9.65387C6.79826 9.66183 6.68936 9.63775 6.59392 9.58459L6.52392 9.53839L2.92592 6.75869C2.81297 6.67213 2.73721 6.54581 2.71404 6.40541C2.69087 6.265 2.72202 6.12104 2.80116 6.00277C2.8803 5.88451 3.0015 5.80081 3.14013 5.76868C3.27876 5.73655 3.42442 5.7584 3.54752 5.82979L3.61052 5.87179L6.29922 7.94799V1.2602C6.29922 1.11167 6.35822 0.969236 6.46324 0.864216C6.56826 0.759195 6.7107 0.700195 6.85922 0.700195Z" fill="#666666"/>
+</g>
+<defs>
+<clipPath id="clip0_2141_24875">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/business_Emergency/iconDrill4.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.10938 6.27158C5.10938 6.24177 5.12122 6.21318 5.1423 6.1921C5.16338 6.17102 5.19197 6.15918 5.22178 6.15918H6.12099C6.1508 6.15918 6.17939 6.17102 6.20047 6.1921C6.22155 6.21318 6.23339 6.24177 6.23339 6.27158V9.64362C6.23339 9.67343 6.22155 9.70202 6.20047 9.7231C6.17939 9.74418 6.1508 9.75602 6.12099 9.75602H5.22178C5.19197 9.75602 5.16338 9.74418 5.1423 9.7231C5.12122 9.70202 5.10938 9.67343 5.10938 9.64362V6.27158ZM8.81862 6.27158C8.81862 6.24177 8.80678 6.21318 8.7857 6.1921C8.76462 6.17102 8.73603 6.15918 8.70622 6.15918H7.80701C7.7772 6.15918 7.74861 6.17102 7.72753 6.1921C7.70645 6.21318 7.69461 6.24177 7.69461 6.27158V9.64362C7.69461 9.67343 7.70645 9.70202 7.72753 9.7231C7.74861 9.74418 7.7772 9.75602 7.80701 9.75602H8.70622C8.73603 9.75602 8.76462 9.74418 8.7857 9.7231C8.80678 9.70202 8.81862 9.67343 8.81862 9.64362V6.27158Z" fill="#666666"/>
+<path d="M4.28042 2.85774V1.22793C4.28042 0.979617 4.48172 0.77832 4.73003 0.77832H9.22608C9.47439 0.77832 9.67568 0.979617 9.67568 1.22793V2.85774H12.2469C12.2767 2.85774 12.3053 2.86959 12.3263 2.89067C12.3474 2.91175 12.3593 2.94034 12.3593 2.97015V3.86936C12.3593 3.89917 12.3474 3.92776 12.3263 3.94884C12.3053 3.96992 12.2767 3.98176 12.2469 3.98176H11.4741V12.9036C11.4741 13.1519 11.2728 13.3532 11.0245 13.3532H2.9316C2.6833 13.3532 2.482 13.1519 2.482 12.9036V3.98176H1.66709C1.63728 3.98176 1.60869 3.96992 1.58761 3.94884C1.56653 3.92776 1.55469 3.89917 1.55469 3.86936V2.97015C1.55469 2.94034 1.56653 2.91175 1.58761 2.89067C1.60869 2.86959 1.63728 2.85774 1.66709 2.85774H4.28042ZM5.40443 1.90233V2.85774H8.55167V1.90233H5.40443ZM3.60601 3.98176V12.2292H10.3501V3.98176H3.60601Z" fill="#666666"/>
+</svg>

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 = () => {
       
       <div className={styles.block2}>
         <div className={styles.block2_item1}>
-          {/* 第一小块 - 70% 宽度 */}
+          <div className={styles.block2_item1_header}>
+            <div className={styles.colorBlock}></div>
+            <div className={styles.title}>协同演练</div>
+          </div>
+
+          <div className={styles.block2_item1_content}>
+            <div className={styles.drillCard1}>
+              <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>生产车间火灾应急演练</div>
+                <div className={styles.statusTag}>进行中</div>
+              </div>
+              <div className={styles.cardInfo}>
+                <div className={styles.infoItem}>
+                  <ClockCircleOutlined className={styles.infoIcon} />
+                  <span>2023-09-12 09:30</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <EnvironmentOutlined className={styles.infoIcon} />
+                  <span>第二生产车间</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <UserOutlined className={styles.infoIcon} />
+                  <span>参与人数：32人</span>
+                </div>
+              </div>
+              <div className={styles.cardButtons}>
+                <Button type="primary" className={styles.joinBtn}>加入演练</Button>
+                <Button className={styles.detailBtn}>查看详情</Button>
+              </div>
+            </div>
+            <div className={styles.drillCard2}>
+              <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>生产车间火灾应急演练</div>
+                <div className={styles.statusTag}>即将开始</div>
+              </div>
+              <div className={styles.cardInfo}>
+                <div className={styles.infoItem}>
+                  <ClockCircleOutlined className={styles.infoIcon} />
+                  <span>2023-09-12 09:30</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <EnvironmentOutlined className={styles.infoIcon} />
+                  <span>第二生产车间</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <UserOutlined className={styles.infoIcon} />
+                  <span>参与人数：32人</span>
+                </div>
+              </div>
+              <div className={styles.cardButtons}>
+                <Button className={styles.reminderBtn}>设置提醒</Button>
+                <Button className={styles.detailBtn}>查看详情</Button>
+              </div>
+            </div>
+            <div className={styles.drillCard3}>
+              <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>生产车间火灾应急演练</div>
+                <div className={styles.statusTag}>已完成</div>
+              </div>
+              <div className={styles.cardInfo}>
+                <div className={styles.infoItem}>
+                  <ClockCircleOutlined className={styles.infoIcon} />
+                  <span>2023-09-12 09:30</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <EnvironmentOutlined className={styles.infoIcon} />
+                  <span>第二生产车间</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <UserOutlined className={styles.infoIcon} />
+                  <span>参与人数：32人</span>
+                </div>
+              </div>
+              <div className={styles.cardButtons}>
+                <Button className={styles.reportBtn}>查看报告</Button>
+                <Button className={styles.detailBtn}>查看详情</Button>
+              </div>
+            </div>
+            <div className={styles.drillCard4}>
+              <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>生产车间火灾应急演练</div>
+                <div className={styles.statusTag}>已完成</div>
+              </div>
+              <div className={styles.cardInfo}>
+                <div className={styles.infoItem}>
+                  <ClockCircleOutlined className={styles.infoIcon} />
+                  <span>2023-09-12 09:30</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <EnvironmentOutlined className={styles.infoIcon} />
+                  <span>第二生产车间</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <UserOutlined className={styles.infoIcon} />
+                  <span>参与人数：32人</span>
+                </div>
+              </div>
+              <div className={styles.cardButtons}>
+                <Button className={styles.reportBtn}>查看报告</Button>
+                <Button className={styles.detailBtn}>查看详情</Button>
+              </div>
+            </div>
+          </div>
         </div>
+        
         <div className={styles.block2_item2}>
-          {/* 第二小块 - 撑满剩余宽度 */}
+          <div className={styles.sectionHeader}>
+            <div className={styles.headerLine}></div>
+            <span className={styles.headerTitle}>现场视频</span>
+          </div>
+          
+          <div className={styles.videoContainer}>
+            {[1, 2, 3].map((item, index) => (
+              <div key={index} className={styles.videoCard}>
+                <div className={styles.videoThumbnail}>
+                  <img src={iconDrill2} alt="视频缩略图" />
+                  <div className={styles.videoDuration}>08:45</div>
+                </div>
+                <div className={styles.videoInfo}>
+                  <div className={styles.videoTitle}>生产车间火灾应急演练</div>
+                  <div className={styles.videoMeta}>
+                    <span className={styles.videoDate}>2023-09-12</span>
+                    <div className={styles.videoActions}>
+                      <img src={iconDrill3} alt="下载" className={styles.actionIcon} />
+                      <img src={iconDrill4} alt="删除" className={styles.actionIcon} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
       

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;
+                  // }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }