分公司BI

src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.js

@@ -24,6 +24,18 @@ function LeftPanel() {
     { id: 9, department: "工程部", deathCount: 1, seriousInjuryCount: 2, minorInjuryCount: 7, loss: 85 },
     { id: 10, department: "设备部", deathCount: 0, seriousInjuryCount: 1, minorInjuryCount: 4, loss: 35 },
   ]);
+  const [block3List, setBlock3List] = useState([
+    { id: 1, department: "安全部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 95 },
+    { id: 2, department: "生产部", checkSituation: "已落实", taskFeedback: "进行中", dutyImplementation: "部分执行", score: 82 },
+    { id: 3, department: "质检部", checkSituation: "待检查", taskFeedback: "已完成", dutyImplementation: "已执行", score: 88 },
+    { id: 4, department: "物流部", checkSituation: "已落实", taskFeedback: "未开始", dutyImplementation: "未执行", score: 75 },
+    { id: 5, department: "技术部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 92 },
+    { id: 6, department: "销售部", checkSituation: "待检查", taskFeedback: "进行中", dutyImplementation: "部分执行", score: 78 },
+    { id: 7, department: "财务部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 90 },
+    { id: 8, department: "人事部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 86 },
+    { id: 9, department: "工程部", checkSituation: "待检查", taskFeedback: "未开始", dutyImplementation: "未执行", score: 70 },
+    { id: 10, department: "设备部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 84 },
+  ]);
 
   return (
     <div className="white_branch_office_left_container">
@@ -83,6 +95,33 @@ function LeftPanel() {
           </div>
         </div>
       </div>
+      <div className="block3">
+        <Title title="考评排名" />
+        <div className="container">
+          <div className="table">
+            <div className="tr">
+              <div className="th">部门名称</div>
+              <div className="th">检查落实情况</div>
+              <div className="th">任务反馈情况</div>
+              <div className="th">职责落实情况</div>
+              <div className="th">分数</div>
+            </div>
+            <div className="scroll">
+              <SeamlessScroll list={block3List} step={0.5}>
+                {block3List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.department}</div>
+                    <div className="td">{item.checkSituation}</div>
+                    <div className="td">{item.taskFeedback}</div>
+                    <div className="td">{item.dutyImplementation}</div>
+                    <div className="td">{item.score}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.less

@@ -73,7 +73,20 @@
       border-top: none;
       background-color: #E0EDFD;
       padding: 10px;
-      .table-style(220px);
+      .table-style(280px, 1.5fr 1fr 1fr 1fr 1.6fr);
+    }
+  }
+
+  .block3 {
+    margin-top: 8px;
+
+    .container {
+      border-radius: 0 0 4px 4px;
+      border: 1px solid #fff;
+      border-top: none;
+      background-color: #E0EDFD;
+      padding: 10px;
+      .table-style(280px, repeat(5, 1fr));
     }
   }
 }

src/pages/Container/WhiteBranchOffice/index.less

@@ -9,7 +9,7 @@
   padding: 0 9px;
 }
 
-.table-style(@height) {
+.table-style(@height, @grid-template-columns) {
   .table {
     border: 1px solid #fff;
 
@@ -26,7 +26,7 @@
 
     .tr {
       display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1.6fr;
+      grid-template-columns: @grid-template-columns;
       background-color: #C4E2F8;
 
       &:not(:last-child) {