分公司BI
LiuJiaNan
parent
e37b0101b9
commit
b28a2609a8
|
|
@ -0,0 +1,10 @@
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
function CenterPanel() {
|
||||||
|
return (
|
||||||
|
<div className="white_branch_office_center_container">
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CenterPanel;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.white_branch_office_center_container{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
@ -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="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;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
import { useMount } from "ahooks";
|
import { useMount } from "ahooks";
|
||||||
import autoFit from "autofit.js";
|
import autoFit from "autofit.js";
|
||||||
import bg from "~/assets/images/public/white/bg.png";
|
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 LeftPanel from "~/pages/Container/WhiteBranchOffice/components/LeftPanel";
|
||||||
|
import RightPanel from "~/pages/Container/WhiteBranchOffice/components/RightPanel";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function WhiteBranchOffice() {
|
function WhiteBranchOffice() {
|
||||||
|
|
@ -12,6 +14,8 @@ function WhiteBranchOffice() {
|
||||||
return (
|
return (
|
||||||
<div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}>
|
<div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}>
|
||||||
<LeftPanel />
|
<LeftPanel />
|
||||||
|
<CenterPanel />
|
||||||
|
<RightPanel />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding: 0 9px;
|
padding: 0 9px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue