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

地图

master
LiuJiaNan 2026-01-08 17:38:25 +08:00
parent b0cb1ce5e2
commit 891d4b4539
8 changed files with 343 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/map_bi/content/bg10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/map_bi/content/bg9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/map_bi/content/ico4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/map_bi/content/ico5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/map_bi/content/ico6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/assets/images/map_bi/content/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

154
src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js
View File

@ -1,8 +1,160 @@
import { useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg1 from "~/assets/images/map_bi/content/bg9.png";
import bg2 from "~/assets/images/map_bi/content/bg10.png";
import icon1 from "~/assets/images/map_bi/content/ico4.png";
import icon2 from "~/assets/images/map_bi/content/ico5.png";
import icon3 from "~/assets/images/map_bi/content/ico6.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import "./index.less";
function WeiXian() {
const [block1List, setBlock1List] = useState([
{ title: "四新作业", count1: 123, count2: 123, icon: icon1 },
{ title: "危险作业", count1: 123, count2: 123, icon: icon2 },
{ title: "三人及以上作业", count1: 123, count2: 123, icon: icon3 },
]);
const [block2List, setBlock2List] = useState([
{ title: "四新<br/>作业", count1: 123, count2: 123, count3: 123 },
{ title: "危险<br/>作业", count1: 123, count2: 123, count3: 123 },
{ title: "三人及<br/>以上作业", count1: 123, count2: 123, count3: 123 },
]);
const [block3List, setBlock3List] = useState([
{ department: "技术部", newWork: 15, dangerousWork: 22, threeOrMoreWork: 18 },
{ department: "生产部", newWork: 12, dangerousWork: 28, threeOrMoreWork: 25 },
{ department: "安全部", newWork: 8, dangerousWork: 35, threeOrMoreWork: 12 },
{ department: "质检部", newWork: 10, dangerousWork: 15, threeOrMoreWork: 20 },
{ department: "设备部", newWork: 18, dangerousWork: 30, threeOrMoreWork: 22 },
{ department: "维修部", newWork: 14, dangerousWork: 25, threeOrMoreWork: 16 },
{ department: "仓储部", newWork: 6, dangerousWork: 12, threeOrMoreWork: 14 },
{ department: "物流部", newWork: 9, dangerousWork: 18, threeOrMoreWork: 19 },
{ department: "人事部", newWork: 3, dangerousWork: 5, threeOrMoreWork: 8 },
{ department: "财务部", newWork: 2, dangerousWork: 3, threeOrMoreWork: 5 },
]);
const [block4List, setBlock4List] = useState([
{ dangerousWorkCategory: "高空作业", workCount: 25, workStatusCount: 18, personnelCount: 45 },
{ dangerousWorkCategory: "动火作业", workCount: 32, workStatusCount: 28, personnelCount: 68 },
{ dangerousWorkCategory: "受限空间作业", workCount: 18, workStatusCount: 15, personnelCount: 32 },
{ dangerousWorkCategory: "临时用电作业", workCount: 42, workStatusCount: 38, personnelCount: 56 },
{ dangerousWorkCategory: "吊装作业", workCount: 21, workStatusCount: 19, personnelCount: 35 },
{ dangerousWorkCategory: "挖掘作业", workCount: 15, workStatusCount: 12, personnelCount: 28 },
{ dangerousWorkCategory: "爆破作业", workCount: 8, workStatusCount: 6, personnelCount: 18 },
{ dangerousWorkCategory: "带压作业", workCount: 12, workStatusCount: 10, personnelCount: 22 },
{ dangerousWorkCategory: "断路作业", workCount: 9, workStatusCount: 7, personnelCount: 15 },
{ dangerousWorkCategory: "其他危险作业", workCount: 16, workStatusCount: 14, personnelCount: 26 },
]);
return (
<div className="branch_office_weixian">1</div>
<div className="branch_office_weixian">
<div className="block1">
<Title title="重点作业统计" />
<div className="options">
<div className="items">
{block1List.map((item, index) => (
<div className="item" key={index}>
<div className="title">{item.title}</div>
<div className="img">
<img src={item.icon} alt="" />
</div>
<div className="info">
<span>当前作业数：</span>
<CountUp end={+item.count1}></CountUp>
</div>
<div className="info">
<span>申请数：</span>
<CountUp end={+item.count2}></CountUp>
</div>
</div>
))}
</div>
</div>
</div>
<div className="block2">
<Title title="重点作业" />
<div className="options">
<div className="items">
{
block2List.map((item, index) => (
<div className="item" key={index} style={{ backgroundImage: `url(${index % 2 === 0 ? bg1 : bg2})` }}>
<div className="title" dangerouslySetInnerHTML={{ __html: item.title }} />
<div className="info">
<div>
<div className="label">当前作业数</div>
<div className="value">
<CountUp end={+item.count1}></CountUp>
</div>
</div>
<div>
<div className="label">作业中</div>
<div className="value">
<CountUp end={+item.count2}></CountUp>
</div>
</div>
<div>
<div className="label">已归档</div>
<div className="value">
<CountUp end={+item.count3}></CountUp>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
</div>
<div className="block3">
<Title title="部门作业统计" />
<div className="options">
<div className="table">
<div className="tr">
<div className="td">部门名称</div>
<div className="td">四新作业</div>
<div className="td">危险作业</div>
<div className="td">三人以上作业数</div>
</div>
<div className="scroll">
<SeamlessScroll list={block3List} step={0.5}>
{block3List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.department}</div>
<div className="td">{item.newWork}</div>
<div className="td">{item.dangerousWork}</div>
<div className="td">{item.threeOrMoreWork}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
<div className="block4">
<Title title="危险作业数据统计" />
<div className="options">
<div className="table">
<div className="tr">
<div className="td">危险作业类别</div>
<div className="td">作业数</div>
<div className="td">作业状态数</div>
<div className="td">参与人员数</div>
</div>
<div className="scroll">
<SeamlessScroll list={block4List} step={0.5}>
{block4List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.dangerousWorkCategory}</div>
<div className="td">{item.workCount}</div>
<div className="td">{item.workStatusCount}</div>
<div className="td">{item.personnelCount}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
);
}

190
src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less
View File

@ -1,3 +1,193 @@
.branch_office_weixian {
.block1 {
background-color: rgba(12, 28, 88, 0.4);
.options {
padding: 10px 15px;
border: 1px solid;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.items {
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
.item {
.title {
font-weight: bold;
font-size: 14px;
text-align: center;
}
.img {
margin-top: 13px;
text-align: center;
img {
width: 42px;
height: 48px;
}
}
.info {
margin-top: 5px;
font-size: 12px;
}
}
}
}
}
.block2 {
background-color: rgba(12, 28, 88, 0.4);
margin-top: 10px;
.options {
padding: 10px 15px;
border: 1px solid;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.items {
.item {
color: #fff;
display: flex;
align-items: center;
padding: 12px 0;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 5px;
&:first-child {
margin-top: 0;
}
.title {
margin-left: 15px;
border: 1px solid #167CE4;
border-radius: 4px;
width: 65px;
height: 50px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
.info {
margin: 0 30px;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
.label {
font-weight: bold;
}
.value {
font-size: 16px;
}
& > div {
&:nth-child(1) .value {
color: #00aeff;
}
&:nth-child(2) .value {
color: #ffa800;
}
&:nth-child(3) .value {
color: #74cb3f;
}
}
}
}
}
}
}
.block3 {
background-color: rgba(12, 28, 88, 0.4);
margin-top: 10px;
.options {
padding: 10px 15px;
border: 1px solid;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.table {
margin-top: 5px;
.scroll {
height: 145px;
overflow-y: hidden;
}
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
background-color: rgba(17, 51, 112, 0.8);
.td {
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px;
}
}
}
}
}
.block4 {
background-color: rgba(12, 28, 88, 0.4);
margin-top: 10px;
.options {
padding: 10px 15px;
border: 1px solid;
border-image: linear-gradient(to bottom,
rgba(58, 122, 149, 0),
rgba(58, 122, 149, 1)) 1;
border-top: none;
.table {
margin-top: 5px;
.scroll {
height: 145px;
overflow-y: hidden;
}
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
background-color: rgba(17, 51, 112, 0.8);
.td {
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px;
}
}
}
}
}
}