diff --git a/src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.js b/src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.js new file mode 100644 index 0000000..b900440 --- /dev/null +++ b/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="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; diff --git a/src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.less b/src/pages/Container/WhiteBranchOffice/components/LeftPanel/index.less new file mode 100644 index 0000000..c282fa7 --- /dev/null +++ b/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); + } + } +} diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.less b/src/pages/Container/WhiteBranchOffice/components/Title/index.less index f06db0f..2ef6c70 100644 --- a/src/pages/Container/WhiteBranchOffice/components/Title/index.less +++ b/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; diff --git a/src/pages/Container/WhiteBranchOffice/index.js b/src/pages/Container/WhiteBranchOffice/index.js index 1ef4328..dd17802 100644 --- a/src/pages/Container/WhiteBranchOffice/index.js +++ b/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> - <Title title={123123} /> - </div> + <LeftPanel /> </div> ); } diff --git a/src/pages/Container/WhiteBranchOffice/index.less b/src/pages/Container/WhiteBranchOffice/index.less index 442b962..7b74f12 100644 --- a/src/pages/Container/WhiteBranchOffice/index.less +++ b/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; + } + } + } }