246 lines
12 KiB
JavaScript
246 lines
12 KiB
JavaScript
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="white_branch_office_right_container">
|
||
<div className="block1">
|
||
<Title title="应急值班" />
|
||
<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;
|