分公司BI

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

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import img4 from "~/assets/images/public/white/img4.png";
+import img5 from "~/assets/images/public/white/img5.png";
+import img6 from "~/assets/images/public/white/img6.png";
+import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
+import "./index.less";
+
+function LeftPanel() {
+  const [block1List, setBlock1List] = useState([
+    { title: "企业人员", label1: "部门数", value1: 35, label2: "人数", value2: 123, img: img4 },
+    { title: "一级相关方", label1: "单位数", value1: 35, label2: "人数", value2: 123, img: img5 },
+    { title: "二级相关方", label1: "单位数", value1: 35, label2: "人数", value2: 123, img: img6 },
+  ]);
+  const [block2List, setBlock2List] = useState([
+    { id: 1, department: "安全部", deathCount: 0, seriousInjuryCount: 2, minorInjuryCount: 8, loss: 45 },
+    { id: 2, department: "生产部", deathCount: 1, seriousInjuryCount: 1, minorInjuryCount: 5, loss: 75 },
+    { id: 3, department: "质检部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 3, loss: 20 },
+    { id: 4, department: "物流部", deathCount: 0, seriousInjuryCount: 1, minorInjuryCount: 6, loss: 55 },
+    { id: 5, department: "技术部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 2, loss: 15 },
+    { id: 6, department: "销售部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 1, loss: 10 },
+    { id: 7, department: "财务部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 0, loss: 5 },
+    { id: 8, department: "人事部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 1, loss: 8 },
+    { id: 9, department: "工程部", deathCount: 1, seriousInjuryCount: 2, minorInjuryCount: 7, loss: 85 },
+    { id: 10, department: "设备部", deathCount: 0, seriousInjuryCount: 1, minorInjuryCount: 4, loss: 35 },
+  ]);
+
+  return (
+    <div className="white_branch_office_left_container">
+      <div className="block1">
+        <Title title="企业人员信息情况" />
+        <div className="container">
+          <div className="items">
+            {
+              block1List.map((item, index) => (
+                <div key={index} className="item">
+                  <div className="img">
+                    <img src={item.img} alt="" />
+                  </div>
+                  <div className="title">{item.title}</div>
+                  <div className="info">
+                    <div className="label">{`${item.label1}：`}</div>
+                    <div className="value">{item.value1}</div>
+                  </div>
+                  <div className="info">
+                    <div className="label">{`${item.label2}：`}</div>
+                    <div className="value">{item.value2}</div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      <div className="block2">
+        <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">
+                直接经济损失
+                <br />
+                <span className="tip">(20-100万元事故)</span>
+              </div>
+            </div>
+            <div className="scroll">
+              <SeamlessScroll list={block2List} step={0.5}>
+                {block2List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.department}</div>
+                    <div className="td">{item.deathCount}</div>
+                    <div className="td">{item.seriousInjuryCount}</div>
+                    <div className="td">{item.minorInjuryCount}</div>
+                    <div className="td">{item.loss}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LeftPanel;

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

@@ -0,0 +1,79 @@
+@import "../../index.less";
+
+.white_branch_office_left_container {
+  width: 505px;
+
+  .block1 {
+    .container {
+      border-radius: 0 0 4px 4px;
+      border: 1px solid #fff;
+      border-top: none;
+      background-color: #E0EDFD;
+      padding: 16px 20px;
+
+      .items {
+        display: flex;
+        gap: 15px;
+        justify-content: space-between;
+        text-align: center;
+
+        .item {
+          flex: 1;
+          border-radius: 4px;
+          border: 1px solid #fff;
+          padding: 15px 10px;
+          background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
+          box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
+
+          .img {
+            img {
+              width: 50px;
+              height: 50px;
+            }
+          }
+
+          .title {
+            margin-top: 8px;
+            margin-bottom: 8px;
+            color: #305683;
+            font-weight: bold;
+            padding: 4px 25px;
+            border-radius: 10px;
+            border: 1px solid #EBF1FF;
+            background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
+            box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
+          }
+
+          .info {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #305683;
+
+            .label {
+              font-size: 14px;
+            }
+
+            .value {
+              font-size: 18px;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .block2 {
+    margin-top: 8px;
+
+    .container {
+      border-radius: 0 0 4px 4px;
+      border: 1px solid #fff;
+      border-top: none;
+      background-color: #E0EDFD;
+      padding: 10px;
+      .table-style(220px);
+    }
+  }
+}

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

@@ -1,8 +1,9 @@
 .white_bi_title {
-  width: 504px;
+  width: 100%;
   height: 39px;
   background-size: 100% 100%;
   background-repeat: no-repeat;
+  border-radius: 4px 4px 0 0;
 
   .title {
     font-size: 16px;

src/pages/Container/WhiteBranchOffice/index.js

@@ -1,7 +1,7 @@
 import { useMount } from "ahooks";
 import autoFit from "autofit.js";
 import bg from "~/assets/images/public/white/bg.png";
-import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
+import LeftPanel from "~/pages/Container/WhiteBranchOffice/components/LeftPanel";
 import "./index.less";
 
 function WhiteBranchOffice() {
@@ -11,9 +11,7 @@ function WhiteBranchOffice() {
 
   return (
     <div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}>
-      <div>
+      <LeftPanel />
-        <Title title={123123} />
-      </div>
     </div>
   );
 }

src/pages/Container/WhiteBranchOffice/index.less

@@ -3,4 +3,55 @@
   height: 100vh;
   background-size: 100% 100%;
   background-repeat: no-repeat;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 0 9px;
+}
+
+.table-style(@height) {
+  .table {
+    border: 1px solid #fff;
+
+    .scroll {
+      height: @height;
+      overflow-y: hidden;
+
+      .tr {
+        &:nth-child(odd) {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .tr {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr 1fr 1fr 1.6fr;
+      background-color: #C4E2F8;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #fff;
+      }
+
+      .td, .th {
+        text-align: center;
+        font-size: 14px;
+        color: #3B445C;
+        padding: 5px;
+        border-right: 1px solid #fff;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      .th {
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+    }
+  }
 }