zcloud_gbs
/
zcloud-gbs-bi-react
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

股份

master
鲁洪霞 2026-01-14 17:48:20 +08:00
parent 38b34ae82d
commit 7a2eb75660
6 changed files with 680 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/Container/Share/components/MiddlePanel/index.js
View File

@ -2,6 +2,7 @@
import "./index.less";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import weather from "~/assets/images/public/weather/1.png";
import img1 from "~/assets/images/public/white/titlebg1.png";
import {useState} from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
function WhiteShareMiddle() {
@ -29,12 +30,51 @@ function WhiteShareMiddle() {
{ unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
{ unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
]);
const [block4List, setBlock4List] = useState([
{ unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" },
{ unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" },
{ unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" },
{ unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" },
{ unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" },
{ unitName: "二公司", safetySupervisionDepartment: "4" ,technicalDepartment:"3", engineeringDepartment:"2", businessDepartment:"1", accident:"0", humanResourcesDepartment:"0", score:"0" },
]);
const [block5List, setBlock5List] = useState([
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
{ unitName: "二公司", scores: "96" },
])
const [block6List, setBlock6List] = useState([
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
{ domainName: "设备", scores: "96" },
])
const [block7List, setBlock7List] = useState([
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
{ Name: "王丹", scores: "96" },
])
return (
<div className="white_share_middle">
<div className="block1">
<Title title={"应急管理"} />
<div className="block1_content">
<div className="block1_content_con">
<div className="emergency_left">
<div className="top">
{
@ -71,7 +111,8 @@ function WhiteShareMiddle() {
</div>
</div>
<div className="emergency_right">
<div className="emergency_right">
<div className="weather">
<div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]</div>
<div className="weather_main">
@ -110,11 +151,121 @@ function WhiteShareMiddle() {
</div>
</div>
</div>
</div>
<div className="block1_content_bottem">
<div className="top">
<div className="title"><img src={img1} alt=""/> 分子公司安全考评</div>
<div className="block1_content_bottem_tab">
<div className="item active">年度</div>
<div className="item">季度</div>
</div>
</div>
<div className="block1_content_con">
<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 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.unitName}</div>
<div className="td">{item.safetySupervisionDepartment}</div>
<div className="td">{item.technicalDepartment}</div>
<div className="td">{item.engineeringDepartment}</div>
<div className="td">{item.businessDepartment}</div>
<div className="td">{item.accident}</div>
<div className="td">{item.humanResourcesDepartment}</div>
<div className="td">{item.score}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="block2">
<Title title={"履职尽责"} />
<div className="block2_content">
<div className="item">
<div className="title">分子公司排名</div>
<div className="block2_content_con">
<div className="table">
<div className="tr">
<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.unitName}</div>
<div className="td">{item.scores}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
<div className="item">
<div className="title">领域排名</div>
<div className="block2_content_con">
<div className="table">
<div className="tr">
<div className="th">领域名称</div>
<div className="th">分数</div>
</div>
<div className="scroll">
<SeamlessScroll list={block6List} step={0.5}>
{block6List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.domainName}</div>
<div className="td">{item.scores}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
<div className="item">
<div className="title">人员排名</div>
<div className="block2_content_con">
<div className="table">
<div className="tr">
<div className="th">姓名</div>
<div className="th">分数</div>
</div>
<div className="scroll">
<SeamlessScroll list={block7List} step={0.5}>
{block7List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.Name}</div>
<div className="td">{item.scores}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

102
src/pages/Container/Share/components/MiddlePanel/index.less
View File

@ -10,7 +10,11 @@
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
display: flex;
.block1_content_con{
display: flex;
.emergency_left{
width: 480px;
.top{
@ -58,10 +62,17 @@
}
.emergency_right{
margin-left: 10px;
padding-top: 5px;
padding-right: 5px;
padding: 5px;
flex: 1;
margin: 5px;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-style: solid;
border-radius: 2px;
background-color: rgba(197, 224, 246, 0.8);
box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3);
.weather{
.title{
color: #ff6600;
@ -75,7 +86,7 @@
color: #2b4977;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
margin-top: 5px;
.item{
width: 30%;
text-align: center;
@ -88,14 +99,93 @@
.fcb{
color: #0c90ff;
}
.table-style(112px, 1fr 1fr 2fr);
.table-style(105px, 1fr 1fr 2fr);
}
}
}
}
.block1_content_bottem{
width: 100%;
.top{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
align-items: center;
.title{
font-size: 15px;
font-weight: bold;
color: #3f4554;
margin-left: 5px;
}
.block1_content_bottem_tab{
display: flex;
border-style: solid;
border-width: 1px;
border-color: rgb(163, 204, 250);
border-radius: 4px;
background-color: rgb(214, 236, 255);
margin-right: 5px;
align-items: center;
.item{
padding: 0 10px;
&.active{
background: #6291fa;
color: #ffffff;
}
&:hover{
background: #6291fa;
color: #ffffff;
cursor: pointer;
}
}
}
}
.block1_content_con{
border-width: 1px;
border-color: rgb(255, 255, 255);
border-style: solid;
border-radius: 4px;
background-color: rgba(234, 246, 255, 0.8);
margin: 5px;
padding: 5px;
.table-style(200px, 2fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr)
}
}
}
}
.block2{
margin-top: 10px;
.block2_content{
width: 100%;
background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
display: flex;
justify-content: space-between;
.table-style(165px, 1fr 1fr );
padding: 5px;
.item{
width: 33%;
text-align: center;
.title{
font-size: 16px;
font-weight: bold;
color: #3b445c;
}
}
}
}
}

187
src/pages/Container/Share/components/RightPanel/index.js Normal file
View File

@ -0,0 +1,187 @@
import "./index.less";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import img1 from "~/assets/images/public/white/img3.png";
import bg1 from "~/assets/images/public/white/bg5.png";
import bg2 from "~/assets/images/public/white/bg6.png";
import {useState} from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
function WhiteShareRight() {
const [block1List, setBlock1List] = useState([
{ name: "封闭区域公司数", num: "13" },
{ name: "封闭区域数", num: "75" },
{ name: "封闭区域当前人数", num: "58" },
]);
const [block2List, setBlock2List] = useState([
{ type: "生产类", numberOfUnits: "23" ,number:"33"},
{ type: "工程类", numberOfUnits: "21" ,number:"22"},
{ type: "劳务类", numberOfUnits: "2" ,number:"11"},
{ type: "卫生环保类", numberOfUnits: "22" ,number:"454"},
{ type: "物资管理类", numberOfUnits: "33" ,number:"65"},
{ type: "其他", numberOfUnits: "44" ,number:"43"},
{ type: "统计", numberOfUnits: "55" ,number:"44"},
]);
const [block3List, setBlock3List] = useState([
{ unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"},
{ unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"},
{ unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"},
{ unitName: "生产类", numberOfItems: "23" ,number:"33" ,amount:"5698"},
]);
return (
<div className="white_share_right">
<div className="block1">
<Title title="四色四固定" extra="更多>" />
<div className="white_share_right_block1_content">
{
block1List.map((item, index) => (
<div key={index} className="item">
<img src={img1} alt="" />
<div className="info">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
</div>
))
}
</div>
</div>
<div className="block2">
<Title title="封闭区域重点作业" extra="更多>" />
<div className="block2_content">
<div className="item" style={{ backgroundImage: `url(${bg1})` }}>
<div className="title">重点作业 <br/>情况统计</div>
<div className="content">
<div className="wrap">
<div className="name">单项发包作业</div>
<div className="num">56</div>
</div>
<div className="wrap">
<div className="name">危险作业</div>
<div className="num">56</div>
</div>
<div className="wrap">
<div className="name">三人及以上作业</div>
<div className="num">56</div>
</div>
<div className="wrap">
<div className="name">四新作业</div>
<div className="num">56</div>
</div>
</div>
</div>
<div className="item" style={{ backgroundImage: `url(${bg2})` }}>
<div className="title">聚集场所<br/>情况统计</div>
<div className="content">
<div className="wrap">
<div className="name">聚集场所数</div>
<div className="num fc9">56</div>
</div>
<div className="wrap">
<div className="name">聚集场所检查数</div>
<div className="num fc9">56</div>
</div>
<div className="wrap">
<div className="name">检查率</div>
<div className="num fc9">56</div>
</div>
</div>
</div>
</div>
</div>
<div className="block3">
<Title title="相关方单位情况统计" extra="更多>" />
<div className="block3_content">
<div className="item">
<div className="title">一级相关方</div>
<div className="content_main">
<div className="table">
<div className="tr">
<div className="th">类型</div>
<div className="th">单位数</div>
<div className="th">人数</div>
</div>
<div className="scroll">
{block2List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.type}</div>
<div className="td">{item.numberOfUnits}</div>
<div className="td">{item.number}</div>
</div>
))}
</div>
</div>
</div>
</div>
<div className="item">
<div className="title">二级相关方</div>
<div className="content_main">
<div className="table">
<div className="tr">
<div className="th">类型</div>
<div className="th">单位数</div>
<div className="th">人数</div>
</div>
<div className="scroll">
{block2List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.type}</div>
<div className="td">{item.numberOfUnits}</div>
<div className="td">{item.number}</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="block4">
<Title title="相关方处罚统计表" extra="更多>" />
<div className="block4_content">
<div className="block4_content_con">
<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="scroll1">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.unitName}</div>
<div className="td">{item.number}</div>
<div className="td">{item.numberOfItems}</div>
<div className="td">{item.amount}</div>
</div>
))}
</SeamlessScroll>
</div>
<div className="tr fch">
<div className="td">统计</div>
<div className="td">43</div>
<div className="td">33</div>
<div className="td">345</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default WhiteShareRight;

231
src/pages/Container/Share/components/RightPanel/index.less Normal file
View File

@ -0,0 +1,231 @@
.white_share_right{
width: 540px;
.block1{
.white_share_right_block1_content{
width: 100%;
background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
display: flex;
justify-content: space-between;
padding: 5px;
.item{
width: 33%;
display: flex;
font-weight: bold;
font-size: 14px;
color: #3d5882;
align-items: center;
img{
width: 33px;
height: 40px;
}
.info{
margin-left: 10px;
.num{
color: #347fd3;
font-size: 18px;
font-weight:normal;
}
}
}
}
}
.block2{
margin-top: 10px;
.block2_content{
background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
display: flex;
justify-content: space-between;
padding: 5px;
flex-wrap: wrap;
.item{
display: flex;
width: 100%;
align-items: center;
background-size: 100% 100%;
margin-bottom: 5px;
.title{
width: 78px;
text-align: center;
font-weight: bold;
color: #3b576a;
}
.content{
display: flex;
width: 440px;
flex-wrap: wrap;
justify-content: space-around;
.wrap{
text-align: center;
padding-top: 5px;
width: 25%;
.name{
font-weight: bold;
color: #3b576a;
font-size: 12px;
}
.num{
color: #347fd3;
font-size: 18px;
}
.fc9{
color: #ff9000;
}
}
}
}
}
}
.block3{
margin-top: 10px;
.block3_content{
width: 100%;
background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
display: flex;
justify-content: space-between;
padding: 5px;
.item{
width: 49.5%;
.title{
width: 100%;
border-style: solid;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-radius: 2px;
box-shadow: inset 0 1px 1px 0 rgba(49, 122, 202, 0.19);
font-weight: bold;
text-align: center;
color: #305683;
line-height: 30px;
background: #bcdffd;
}
.content_main{
.table-style(200px, 1fr 1fr 1fr);
}
}
}
}
.block4{
margin-top: 10px;
.block4_content{
width: 100%;
background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
display: flex;
justify-content: space-between;
padding: 5px;
.block4_content_con{
width: 100%;
.table-style(72px, 2fr 2fr 1.5fr 1.5fr);
.fch{
background: #e8ede1 !important;
}
}
}
}
}
.table-style(@height, @grid-template-columns) {
.table {
border: 1px solid #fff;
.scroll {
height: @height;
overflow-y: hidden;
.tr {
&:nth-child(odd) {
background-color: transparent;
}
&:last-child {
background: #e8ede1;
}
}
}
.scroll1 {
height: @height;
overflow-y: hidden;
.tr {
&:nth-child(odd) {
background-color: transparent;
}
}
}
.tr{
display: grid;
grid-template-columns: @grid-template-columns;
background-color: #C4E2F8;
&:not(:last-child) {
border-bottom: 1px solid #fff;
}
.td, .th {
text-align: center;
font-size: 14px;
color: #3B445C;
border-right: 1px solid #fff;
height: 28px;
line-height: 28px;
&:last-child {
border-right: none;
}
}
.fcb{
color: #0c90ff;
}
.th {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
}
}

9
src/pages/Container/Share/index.js
View File

@ -4,8 +4,14 @@ import "./index.less";
import Header from "~/pages/Container/Share/components/Header";
import Left from "~/pages/Container/Share/components/LeftPanel";
import Middle from "~/pages/Container/Share/components/MiddlePanel";
import Right from "~/pages/Container/Share/components/RightPanel";
import {useMount} from "ahooks";
import autoFit from "autofit.js";
function WhiteShareOffice() {
useMount(() => {
autoFit.init({ dw: 1920, dh: 1080, el: ".white_branch_office", resize: true });
});
return (
<div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}>
<Header />
@ -16,6 +22,9 @@ function WhiteShareOffice() {
<div className="middle">
<Middle/>
</div>
<div className="right">
<Right/>
</div>
</div>
</div>
);

5
src/pages/Container/Share/index.less
View File

@ -6,6 +6,7 @@
.white_share_office_content{
width: 100%;
display: flex;
justify-content: space-between;
.left{
width: 500px;
margin-left: 10px;
@ -14,6 +15,10 @@
width: 840px;
margin-left: 10px;
}
.right{
flex: 1;
margin-left: 10px;
}
}
}