diff --git a/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js new file mode 100644 index 0000000..832ceb6 --- /dev/null +++ b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js @@ -0,0 +1,10 @@ +import "./index.less"; + +function CenterPanel() { + return ( +
+
+ ); +} + +export default CenterPanel; diff --git a/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less new file mode 100644 index 0000000..9854f2d --- /dev/null +++ b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less @@ -0,0 +1,3 @@ +.white_branch_office_center_container{ + flex: 1; +} diff --git a/src/pages/Container/WhiteBranchOffice/components/RightPanel/index.js b/src/pages/Container/WhiteBranchOffice/components/RightPanel/index.js new file mode 100644 index 0000000..3e4b6a4 --- /dev/null +++ b/src/pages/Container/WhiteBranchOffice/components/RightPanel/index.js @@ -0,0 +1,245 @@ +import { useState } from "react"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import bg1 from "~/assets/images/public/white/bg5.png"; +import bg2 from "~/assets/images/public/white/bg6.png"; +import img1 from "~/assets/images/public/white/img3.png"; +import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; +import "./index.less"; + +function RightPanel() { + const [block1List, setBlock1List] = useState([ + { id: 1, department: "安全部", position: "值班经理", name: "张三", phone: "13800138001" }, + { id: 2, department: "生产部", position: "值班主管", name: "李四", phone: "13800138002" }, + { id: 3, department: "质检部", position: "值班员", name: "王五", phone: "13800138003" }, + { id: 4, department: "物流部", position: "调度员", name: "赵六", phone: "13800138004" }, + { id: 5, department: "技术部", position: "工程师", name: "钱七", phone: "13800138005" }, + { id: 6, department: "销售部", position: "业务员", name: "孙八", phone: "13800138006" }, + { id: 7, department: "财务部", position: "会计", name: "周九", phone: "13800138007" }, + { id: 8, department: "人事部", position: "人事专员", name: "吴十", phone: "13800138008" }, + { id: 9, department: "工程部", position: "项目经理", name: "郑一", phone: "13800138009" }, + { id: 10, department: "设备部", position: "维修技师", name: "刘二", phone: "13800138010" }, + ]); + const [block4List, setBlock4List] = useState([ + { id: 1, type: "承包商", firstLevelUnits: 15, firstLevelPeople: 120, secondLevelUnits: 8, secondLevelPeople: 65 }, + { id: 2, type: "供应商", firstLevelUnits: 22, firstLevelPeople: 85, secondLevelUnits: 12, secondLevelPeople: 45 }, + { id: 3, type: "服务商", firstLevelUnits: 9, firstLevelPeople: 45, secondLevelUnits: 5, secondLevelPeople: 25 }, + { id: 4, type: "租赁商", firstLevelUnits: 6, firstLevelPeople: 30, secondLevelUnits: 3, secondLevelPeople: 15 }, + { id: 5, type: "临时工", firstLevelUnits: 3, firstLevelPeople: 25, secondLevelUnits: 1, secondLevelPeople: 8 }, + { id: 6, type: "外包单位", firstLevelUnits: 12, firstLevelPeople: 95, secondLevelUnits: 7, secondLevelPeople: 50 }, + { id: 7, type: "合作单位", firstLevelUnits: 8, firstLevelPeople: 70, secondLevelUnits: 4, secondLevelPeople: 30 }, + { id: 8, type: "施工单位", firstLevelUnits: 10, firstLevelPeople: 150, secondLevelUnits: 6, secondLevelPeople: 80 }, + { id: 9, type: "监理单位", firstLevelUnits: 5, firstLevelPeople: 20, secondLevelUnits: 2, secondLevelPeople: 10 }, + { id: 10, type: "设计单位", firstLevelUnits: 4, firstLevelPeople: 18, secondLevelUnits: 1, secondLevelPeople: 5 }, + ]); + const [block5List, setBlock5List] = useState([ + { id: 1, companyName: "华建建设集团有限公司", projectCount: 8, penaltyCount: 2, penaltyAmount: 15000 }, + { id: 2, companyName: "宏达机械设备有限公司", projectCount: 5, penaltyCount: 1, penaltyAmount: 8000 }, + { id: 3, companyName: "永泰建筑工程有限公司", projectCount: 12, penaltyCount: 3, penaltyAmount: 25000 }, + { id: 4, companyName: "安达安全服务有限公司", projectCount: 6, penaltyCount: 0, penaltyAmount: 0 }, + { id: 5, companyName: "兴盛劳务分包有限公司", projectCount: 15, penaltyCount: 5, penaltyAmount: 35000 }, + { id: 6, companyName: "创新技术咨询有限公司", projectCount: 3, penaltyCount: 1, penaltyAmount: 12000 }, + { id: 7, companyName: "顺通物流运输有限公司", projectCount: 7, penaltyCount: 2, penaltyAmount: 18000 }, + { id: 8, companyName: "蓝天环保工程有限公司", projectCount: 4, penaltyCount: 0, penaltyAmount: 0 }, + { id: 9, companyName: "恒力钢结构有限公司", projectCount: 10, penaltyCount: 4, penaltyAmount: 30000 }, + { id: 10, companyName: "美佳装饰设计有限公司", projectCount: 9, penaltyCount: 1, penaltyAmount: 10000 }, + ]); + + const calculateSummary = () => { + const totalFirstLevelUnits = block4List.reduce((sum, item) => sum + item.firstLevelUnits, 0); + const totalFirstLevelPeople = block4List.reduce((sum, item) => sum + item.firstLevelPeople, 0); + const totalSecondLevelUnits = block4List.reduce((sum, item) => sum + item.secondLevelUnits, 0); + const totalSecondLevelPeople = block4List.reduce((sum, item) => sum + item.secondLevelPeople, 0); + + return { + totalFirstLevelUnits, + totalFirstLevelPeople, + totalSecondLevelUnits, + totalSecondLevelPeople, + }; + }; + + return ( +
+
+ + <div className="container"> + <div className="info"> + <span>带班领导：李玉龙</span> + <span>职务：安环部副部长</span> + <span>电话：3095519</span> + </div> + <div className="table"> + <div className="tr"> + <div className="th">部门名称</div> + <div className="th">职务</div> + <div className="th">姓名</div> + <div className="th">电话</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block1List} step={0.5}> + {block1List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.department}</div> + <div className="td">{item.position}</div> + <div className="td">{item.name}</div> + <div className="td">{item.phone}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + <div className="block2"> + <Title title="封闭区域统计" /> + <div className="container"> + <div className="img"> + <img src={img1} alt="" /> + </div> + <div> + <div className="title">封闭区域数/人数</div> + <div className="info"> + <div> + <span className="label">红：</span> + <span className="value" style={{ color: "#FF0000" }}>5/30</span> + </div> + <div> + <span className="label">橙：</span> + <span className="value" style={{ color: "#FC5B4A" }}>5/30</span> + </div> + <div> + <span className="label">黄：</span> + <span className="value" style={{ color: "#F98011" }}>5/30</span> + </div> + <div> + <span className="label">蓝：</span> + <span className="value" style={{ color: "#347FD3" }}>5/30</span> + </div> + </div> + </div> + </div> + </div> + <div className="block3"> + <Title title="重点作业" /> + <div className="container"> + <div className="items"> + <div className="item" style={{ backgroundImage: `url(${bg1})` }}> + <div className="title"> + 重点作业 + <br /> + 情况统计 + </div> + <div className="info" style={{ color: "#347FD3" }}> + <div> + <div className="label">单项发包作业</div> + <div className="value">123</div> + </div> + <div> + <div className="label">危险作业</div> + <div className="value">123</div> + </div> + <div> + <div className="label">三人及以上作业</div> + <div className="value">123</div> + </div> + <div> + <div className="label">四新作业</div> + <div className="value">123</div> + </div> + </div> + </div> + <div className="item" style={{ backgroundImage: `url(${bg2})` }}> + <div className="title"> + 聚集场所 + <br /> + 情况统计 + </div> + <div className="info" style={{ color: "#FF9000" }}> + <div> + <div className="label">聚集场所数</div> + <div className="value">123</div> + </div> + <div> + <div className="label">聚集场所检查数</div> + <div className="value">123</div> + </div> + <div> + <div className="label">检查率</div> + <div className="value">100%</div> + </div> + </div> + </div> + </div> + </div> + </div> + <div className="block4"> + <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={block4List} step={0.5}> + {block4List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.type}</div> + <div className="td">{item.firstLevelUnits}</div> + <div className="td">{item.firstLevelPeople}</div> + <div className="td">{item.secondLevelUnits}</div> + <div className="td">{item.secondLevelPeople}</div> + </div> + ))} + </SeamlessScroll> + </div> + <div className="summary"> + {(() => { + const summaryData = calculateSummary(); + return ( + <div className="tr summary-row"> + <div className="td"><strong>总计</strong></div> + <div className="td"><strong>{summaryData.totalFirstLevelUnits}</strong></div> + <div className="td"><strong>{summaryData.totalFirstLevelPeople}</strong></div> + <div className="td"><strong>{summaryData.totalSecondLevelUnits}</strong></div> + <div className="td"><strong>{summaryData.totalSecondLevelPeople}</strong></div> + </div> + ); + })()} + </div> + </div> + </div> + </div> + <div className="block5"> + <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> + <div className="scroll"> + <SeamlessScroll list={block5List} step={0.5}> + {block5List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.companyName}</div> + <div className="td">{item.projectCount}</div> + <div className="td">{item.penaltyCount}</div> + <div className="td">{item.penaltyAmount}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + </div> + ); +} + +export default RightPanel; diff --git a/src/pages/Container/WhiteBranchOffice/components/RightPanel/index.less b/src/pages/Container/WhiteBranchOffice/components/RightPanel/index.less new file mode 100644 index 0000000..310b626 --- /dev/null +++ b/src/pages/Container/WhiteBranchOffice/components/RightPanel/index.less @@ -0,0 +1,179 @@ +@import "../../index.less"; + +.white_branch_office_right_container { + width: 505px; + + .block1 { + .container { + border-radius: 0 0 4px 4px; + border: 1px solid #fff; + border-top: none; + background-color: #E0EDFD; + padding: 10px; + .table-style(100px, repeat(4, 1fr)); + + .info { + color: #3B445C; + font-size: 14px; + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 5px; + } + } + } + + .block2 { + margin-top: 8px; + + .container { + border-radius: 0 0 4px 4px; + border: 1px solid #fff; + border-top: none; + background-color: #E0EDFD; + padding: 20px 30px; + display: flex; + align-items: center; + gap: 7px; + + .img { + img { + width: 33px; + height: 40px; + } + } + + > div:not(.img) { + flex: 1; + } + + .title { + color: #3D5882; + font-weight: bold; + } + + .info { + display: flex; + align-items: center; + justify-content: space-between; + margin-right: 20px; + padding-top: 5px; + + .label { + color: #4F697B; + } + + .value { + font-weight: bold; + } + } + } + } + + .block3 { + margin-top: 8px; + + .container { + border-radius: 0 0 4px 4px; + border: 1px solid #fff; + border-top: none; + background-color: #E0EDFD; + padding: 10px; + + .items { + .item { + border-radius: 4px; + padding: 15px 10px; + display: flex; + align-items: center; + margin-top: 7px; + background-size: 100% 100%; + background-repeat: no-repeat; + + &:first-child { + margin-top: 0; + } + + .title { + color: #3B576A; + font-weight: bold; + } + + .info { + flex: 1; + display: flex; + justify-content: space-around; + text-align: center; + padding-left: 15px; + + >div{ + flex: 1; + } + + .label { + color: #3B576A; + font-weight: bold; + } + + .value { + font-size: 18px; + } + } + } + } + } + } + + .block4 { + margin-top: 8px; + + .container { + border-radius: 0 0 4px 4px; + border: 1px solid #fff; + border-top: none; + background-color: #E0EDFD; + padding: 10px; + .table-style(100px, repeat(5, 1fr)); + + .info { + color: #3B445C; + font-size: 14px; + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 5px; + } + + .summary-row { + background-color: #f0f9ff; + border-top: 1px solid #fff; + + .td { + font-weight: bold; + } + } + } + } + + .block5 { + margin-top: 8px; + + .container { + border-radius: 0 0 4px 4px; + border: 1px solid #fff; + border-top: none; + background-color: #E0EDFD; + padding: 10px; + .table-style(120px, 2fr 1fr 1fr 1fr); + + .info { + color: #3B445C; + font-size: 14px; + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 5px; + } + } + } +} diff --git a/src/pages/Container/WhiteBranchOffice/index.js b/src/pages/Container/WhiteBranchOffice/index.js index dd17802..275ab92 100644 --- a/src/pages/Container/WhiteBranchOffice/index.js +++ b/src/pages/Container/WhiteBranchOffice/index.js @@ -1,7 +1,9 @@ import { useMount } from "ahooks"; import autoFit from "autofit.js"; import bg from "~/assets/images/public/white/bg.png"; +import CenterPanel from "~/pages/Container/WhiteBranchOffice/components/CenterPanel"; import LeftPanel from "~/pages/Container/WhiteBranchOffice/components/LeftPanel"; +import RightPanel from "~/pages/Container/WhiteBranchOffice/components/RightPanel"; import "./index.less"; function WhiteBranchOffice() { @@ -12,6 +14,8 @@ function WhiteBranchOffice() { return ( <div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}> <LeftPanel /> + <CenterPanel /> + <RightPanel /> </div> ); } diff --git a/src/pages/Container/WhiteBranchOffice/index.less b/src/pages/Container/WhiteBranchOffice/index.less index b9c5118..e399151 100644 --- a/src/pages/Container/WhiteBranchOffice/index.less +++ b/src/pages/Container/WhiteBranchOffice/index.less @@ -4,6 +4,7 @@ background-size: 100% 100%; background-repeat: no-repeat; display: flex; + gap: 15px; justify-content: space-between; align-items: stretch; padding: 0 9px;