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

股份

master
鲁洪霞 2026-01-13 17:38:23 +08:00
parent aade2fd0c4
commit 97bed0725b
2 changed files with 94 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/Container/Share/components/Left/index.js
View File

@ -8,7 +8,20 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import {useState} from "react";
function WhiteShareLeft() {
const [block1List, setBlock1List] = useState([
{ name: "隐患总数", num: "1398" },
{ name: "隐患整改数", num: "1212" },
{ name: "隐患未整改数", num: "563" },
{ name: "隐患整改率", num: "89%" },
]);
const [block2List, setBlock2List] = useState([
{ name: "隐患总数", num: "1398" },
{ name: "隐患整改数", num: "1212" },
{ name: "隐患未整改数", num: "563" },
{ name: "隐患整改率", num: "89%" },
]);
const [block3List, setBlock3List] = useState([
{ id: 1, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 2, level: "二级", name: "东区一号罐", state: "正常"},
@ -17,6 +30,13 @@ function WhiteShareLeft() {
{ id: 5, level: "二级", name: "东区一号罐", state: "正常"},
{ id: 6, level: "二级", name: "东区一号罐", state: "正常"},
]);
const [block4List, setBlock4List] = useState([
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
{ name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
]);
return (
<div className="white_share_left">
@ -114,16 +134,62 @@ function WhiteShareLeft() {
<div className="content">
<div className="title">股份<br/>公司</div>
<div className="info">
<div className="list">
<div className="name">隐患总数</div>
<div className="num">1398</div>
</div>
{
block1List.map((item, index) => (
<div key={index} className="list">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
))
}
</div>
</div>
</div>
<div className="item">
<div className="content">
<div className="title">分子<br/>公司</div>
<div className="info">
{
block2List.map((item, index) => (
<div key={index} className="list">
<div className="name">{item.name}</div>
<div className="num">{item.num}</div>
</div>
))
}
</div>
</div>
</div>
</div>
<div className="field">
<div className="top">领域隐患</div>
</div>
<div className="main">
<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.name}</div>
<div className="td">{item.total}</div>
<div className="td">{item.rectificationNumber}</div>
<div className="td">{item.unNumber}</div>
<div className="td">{item.rectificationRate}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>

29
src/pages/Container/Share/components/Left/index.less
View File

@ -165,10 +165,7 @@
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{
@ -179,6 +176,7 @@
border-radius: 4px;
background-color: rgb(205, 233, 255);
padding: 4px;
margin-bottom: 5px;
.content{
width: 100%;
border-style: solid;
@ -200,23 +198,42 @@
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;
padding: 2px 10px;
line-height: 20px;
}
.info{
flex: 1;
display: flex;
.list{
text-align: center;
width: 25%;
.name{
font-size: 12px;
}
.num{
font-size: 16px;
}
}
}
}
}
}
.field{
width: 100%;
.top{
width: 100%;
background-color: rgb(205, 233, 255);
text-align: center;
font-size: 18px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #b7d6f5;
color: #457fc0;
}
}
.main{
width: 100%;
.table-style(70px, 1fr 1fr 1fr 1fr 1fr);
}
}
}