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

股份

master
鲁洪霞 2026-01-13 16:52:23 +08:00
parent c13b60b482
commit aade2fd0c4
10 changed files with 562 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/public/white/img7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/images/public/white/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

40
src/pages/Container/Share/components/Header/index.js
View File

@ -1,21 +1,37 @@
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 bg from "~/assets/images/public/white/titlebg.png";
import title from "~/assets/images/public/white/title.png";
import more from "~/assets/images/public/white/more.png";
import "./index.less";
function WhiteShareOffice() {
useMount(() => {
autoFit.init({ dw: 1920, dh: 1080, el: ".white_branch_office", resize: true });
});
function WhiteShareHead() {
return (
<div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}>
<div>
<Title title={123123} />
<div className="white_share_header" style={{ backgroundImage: `url(${bg})` }}>
<div className="left">
<div className="list">已安全生产 365 天</div>
<div className="list">10~27℃ 多云 星期三</div>
</div>
<div className="title">
<img src={title} alt=""/>
</div>
<div className="right">
<div className="top">
<div className="name">股份公司数据统计</div>
<div className="more">
<img src={more} alt=""/>
</div>
<div className="down_main">
<div className="list">二公司</div>
<div className="list">六公司</div>
<div className="list">七公司</div>
<div className="list">九公司</div>
</div>
</div>
</div>
</div>
);
}
export default WhiteShareOffice;
export default WhiteShareHead;

82
src/pages/Container/Share/components/Header/index.less
View File

@ -0,0 +1,82 @@
.white_share_header{
width: 100vw;
height: 86px;
position: relative;
.title{
position: absolute;
left: 50.5%;
transform: translateX(-50%);
top: 25px;
}
.left{
position: absolute;
top: 30px;
left: 20px;
display: flex;
.list{
padding: 6px 15px;
border-radius: 23px;
background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -ms-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.75);
margin-right: 10px;
color: #465683;
opacity: 0.8;
}
}
.right{
position: absolute;
right: 20px;
top:25px;
border-radius: 23px;
background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -ms-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.75);
padding: 6px 15px;
color: #465683;
.top{
display: flex;
justify-content: space-between;
position: relative;
.name{
margin-right: 20px;
font-weight: bold;
}
.more{
cursor: pointer;
}
.down_main{
width: 150px;
position: absolute;
top: 30px;
left: 0;
background: #ddf1fe;
border: 1px solid #b8dcf3;
border-radius: 4px;
opacity: 0;
.list{
font-weight: bold;
border-bottom: 1px solid #d4e3f7;
line-height: 36px;
padding: 0 10px;
text-align: center;
font-size: 12px;
cursor: pointer;
&:hover{
background: #def1ff;
}
}
}
&:hover{
.down_main{
opacity: 1;
}
}
}
}
}

136
src/pages/Container/Share/components/Left/index.js Normal file
View File

@ -0,0 +1,136 @@
import "./index.less";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import cake from "~/assets/images/public/white/img7.png";
import bg1 from "~/assets/images/public/white/bg1.png";
import img1 from "~/assets/images/public/white/img1.png";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import {useState} from "react";
function WhiteShareLeft() {
const [block3List, setBlock3List] = useState([
{ id: 1, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 2, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 3, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 4, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 5, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 6, level: "二级", name: "东区一号罐", state: "正常"},
]);
return (
<div className="white_share_left">
<div className="block1">
<Title title={"风险辨识管控情况"} />
<div className="white_share_left_conten">
<div className="cake">
<img src={cake} alt="" />
</div>
<div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}>
<div className="item">
<div className="title">重大风险</div>
<div className="num fcr">467</div>
</div>
<div className="item">
<div className="title">较大风险</div>
<div className="num fco">467</div>
</div>
<div className="item">
<div className="title">一般风险</div>
<div className="num fcc">467</div>
</div>
<div className="item">
<div className="title">低风险</div>
<div className="num fcb">9809</div>
</div>
</div>
</div>
</div>
<div className="block2">
<Title title={"重大危险源安全情况"} />
<div className="white_share_left_conten">
<div className="top">
<div className="item">
<div className="title">二级重大危险源（1个）</div>
<div className="item_container">
<span>储罐数: <span className="fcb">3</span> </span>
<span>在用数: <span className="fcg">3</span> </span>
<span>停用数: <span className="fcr">0</span></span>
</div>
</div>
<div className="item">
<div className="title">三级重大危险源（2个）</div>
<div className="item_container">
<span>储罐数: <span className="fcb">10</span> </span>
<span>在用数: <span className="fcg">10</span> </span>
<span>停用数: <span className="fcr">0</span></span>
</div>
</div>
</div>
<div className="container">
<div className="left_table">
<div className="table">
<div className="tr">
<div className="th">级别</div>
<div className="th">名称</div>
<div className="th">状态</div>
</div>
<div className="scroll">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.level}</div>
<div className="td">{item.name}</div>
<div className="td">{item.state}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
<div className="info">
<div className="title"><img src={img1} alt=""/> 东区二号罐液位过低</div>
<div className="comment">
<p>温度待处置数/报警个数：<span>0/0</span> </p>
<p>压力待处置数/报警个数：<span>0/0</span></p>
<p>液位待处置数/报警个数：<span> <span className="fcr">1</span>/1</span></p>
</div>
</div>
</div>
</div>
</div>
<div className="block3">
<Title title={"隐患排查治理情况"} />
<div className="white_share_left_conten">
<div className="top">
<div className="item">
<div className="content">
<div className="title">股份<br/>公司</div>
<div className="info">
<div className="list">
<div className="name">隐患总数</div>
<div className="num">1398</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default WhiteShareLeft;

271
src/pages/Container/Share/components/Left/index.less Normal file
View File

@ -0,0 +1,271 @@
.white_share_left{
width: 500px;
color: #305683;
.block1{
width: 100%;
.white_share_left_conten{
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%);
padding: 5px;
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
display: flex;
align-items: center;
border-radius: 2px;
.cake_contant{
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 20px;
display: flex;
flex-wrap: wrap;
.item{
width: 50%;
text-align: center;
margin: 5px 0;
.title{
font-size: 14px;
font-weight: bold;
color: #2b4977;
}
.num{
font-size: 24px;
}
.fcb{
color: #5daaff;
}
.fcc{
color: #ffa801;
}
.fco{
color: #ff6000;
}
.fcr{
color: #ff2709;
}
}
}
}
}
.block2{
margin-top: 10px;
.white_share_left_conten{
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%);
padding: 5px;
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
border-radius: 2px;
padding: 5px;
.top{
width: 100%;
display: flex;
justify-content: space-between;
.item{
text-align: center;
border-style: solid;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-radius: 4px;
background-color: rgba(1, 162, 255, 0);
width: 49%;
box-shadow: 0 2px 2px 0 rgba(114, 163, 191, 0.45);
padding: 10px;
.title{
font-weight: bold;
color: #305683;
}
.item_container{
color: #51719c;
margin-top: 5px;
.fcb{
color: #0097f7;
}
.fcg{
color: #0a9503;
}
.fcr{
color: #ff2100;
}
}
}
}
.container{
width: 100%;
display: flex;
margin-top: 10px;
.left_table{
width: 50%;
.table-style(109px, 1fr 1.2fr 1fr);
}
.info{
width: 50%;
margin-left: 10px;
.title{
font-size: 14px;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-style: solid;
background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
background-image: -ms-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);
border-radius: 50px;
padding: 5px 10px;
font-weight: bold;
color: #38688e;
}
.comment{
padding-left: 10px;
margin-top: 10px;
p{
margin: 0;
line-height: 30px;
color: #305683;
span{
color: #00aeff;
font-weight: bold;
.fcr{
color: #f90102;
}
}
}
}
}
}
}
}
.block3{
margin-top: 10px;
.white_share_left_conten{
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%);
padding: 5px;
border: 2px solid transparent;
border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
display: flex;
align-items: center;
border-radius: 2px;
.top{
width: 100%;
.item{
width: 100%;
border-style: solid;
border-width: 1px;
border-color:#aacbed;
border-radius: 4px;
background-color: rgb(205, 233, 255);
padding: 4px;
.content{
width: 100%;
border-style: solid;
border-width: 1px;
border-color: rgb(255, 255, 255);
border-radius: 4px;
background-color: rgb(215, 236, 254);
box-shadow: 0 1px 1px 0 rgba(114, 163, 191, 0.45);
display: flex;
align-items: center;
.title{
font-size: 18px;
color: #457fc0;
font-weight: bold;
border-style: solid;
border-width: 2px;
border-color: #c6e6fe;
background-image: -moz-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
text-align: center;
padding: 5px 10px;
line-height: 20px;
}
.info{
flex: 1;
.list{
text-align: center;
width: 25%;
.name{
font-size: 12px;
}
}
}
}
}
}
}
}
}
.table-style(@height, @grid-template-columns) {
.table {
border: 1px solid #fff;
.scroll {
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;
}
}
.th {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
}
}

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

@ -2,11 +2,17 @@
import bg from "~/assets/images/public/white/bg.png";
import "./index.less";
import Header from "~/pages/Container/Share/components/Header";
import Left from "~/pages/Container/Share/components/Left";
function WhiteShareOffice() {
return (
<div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}>
<Header />
<div className="white_share_office_content">
<div className="left">
<Left/>
</div>
</div>
</div>
);
}

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

@ -1,7 +1,15 @@
.white_branch_office{
.white_share_office{
width: 100vw;
height: 100vh;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
.white_share_office_content{
width: 100%;
display: flex;
.left{
width: 500px;
margin-left: 20px;
}
}
}

10
src/pages/Container/WhiteBranchOffice/components/Title/index.js
View File

@ -4,10 +4,14 @@ import "./index.less";
function Title(props) {
return (
<div className="white_bi_title">
<div className="decoration">
<img src={titlebg} alt="" />
<div className="name">
<div className="decoration">
<img src={titlebg} alt="" />
</div>
<div className="title">{props.title}</div>
</div>
<div className="title">{props.title}</div>
<div className="more">更多 ></div>
</div>
);
}

33
src/pages/Container/WhiteBranchOffice/components/Title/index.less
View File

@ -8,18 +8,29 @@
background-image: linear-gradient(0deg, rgb(206, 227, 246) 0%, rgb(188, 219, 244) 100%);
box-shadow: 0.5px 0.866px 2px 0px rgba(44, 91, 162, 0.28), inset 0px 1px 1px 0px rgba(168, 194, 219, 0.82);
display: flex;
padding-top: 5px;
justify-content: space-between;
align-items: center;
.name{
display: flex;
align-items: center;
.decoration {
width: 18px;
height: 18px;
padding-left: 5px;
margin-top: -5px;
}
.decoration {
width: 18px;
height: 18px;
padding-left: 10px;
.title {
font-size: 15px;
color: #3F4554;
font-weight: bold;
padding-left: 10px;
}
}
.more{
color: #3177be;
margin-right: 10px;
}
.title {
font-size: 16px;
color: #3F4554;
font-weight: bold;
padding-left: 18px;
}
}