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

地图

master
LiuJiaNan 2026-01-09 10:30:14 +08:00
parent 214b5bfb70
commit 0df5d9cca7
6 changed files with 372 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/ico19.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

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

@ -140,7 +140,7 @@
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);
background-color: rgba(17, 51, 112, 0.8);
.td {

189
src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.js Normal file
View File

@ -0,0 +1,189 @@
import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon1 from "~/assets/images/map_bi/content/ico19.png";
import icon2 from "~/assets/images/map_bi/content/ico20.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import "./index.less";
const block2OptionsNavList = ["消防水罐", "消防泵", "消防管线"];
function XiaoFang() {
const [block1List, setBlock1List] = useState([
{ title: "火灾监测装置", count1: 34, count2: 12, count3: 15, icon: icon1 },
{ title: "消防设备", count1: 34, count2: 12, count3: 15, icon: icon2 },
]);
const [block2Index, setBlock2Index] = useState(0);
const [block2List, setBlock2List] = useState([
{ pumpRoomName: "一号消防泵房", liquidLevel: 2.5, waterPressure: 0.45, status: 1 },
{ pumpRoomName: "二号消防泵房", liquidLevel: 1.8, waterPressure: 0.38, status: 1 },
{ pumpRoomName: "三号消防泵房", liquidLevel: 3.2, waterPressure: 0.52, status: 1 },
{ pumpRoomName: "四号消防泵房", liquidLevel: 0.5, waterPressure: 0.25, status: 2 },
{ pumpRoomName: "五号消防泵房", liquidLevel: 2.8, waterPressure: 0.48, status: 1 },
{ pumpRoomName: "六号消防泵房", liquidLevel: 1.2, waterPressure: 0.32, status: 3 },
{ pumpRoomName: "七号消防泵房", liquidLevel: 3.5, waterPressure: 0.55, status: 1 },
{ pumpRoomName: "八号消防泵房", liquidLevel: 2.1, waterPressure: 0.42, status: 1 },
{ pumpRoomName: "九号消防泵房", liquidLevel: 0.8, waterPressure: 0.28, status: 2 },
{ pumpRoomName: "十号消防泵房", liquidLevel: 2.9, waterPressure: 0.50, status: 1 },
]);
const [block3List, setBlock3List] = useState([
{ alarmDevice: "火灾探测器", alarmTime: "2024-01-01 10:00:00", alarmArea: "A区", status: 1, disposalStatus: 1 },
{ alarmDevice: "烟雾传感器", alarmTime: "2024-01-01 10:05:00", alarmArea: "B区", status: 2, disposalStatus: 2 },
{ alarmDevice: "温度传感器", alarmTime: "2024-01-01 10:10:00", alarmArea: "C区", status: 1, disposalStatus: 1 },
{ alarmDevice: "火焰探测器", alarmTime: "2024-01-01 10:15:00", alarmArea: "D区", status: 2, disposalStatus: 3 },
{ alarmDevice: "手动报警按钮", alarmTime: "2024-01-01 10:20:00", alarmArea: "E区", status: 1, disposalStatus: 2 },
{ alarmDevice: "可燃气体探测器", alarmTime: "2024-01-01 10:25:00", alarmArea: "F区", status: 2, disposalStatus: 1 },
{ alarmDevice: "红外火焰探测器", alarmTime: "2024-01-01 10:30:00", alarmArea: "G区", status: 1, disposalStatus: 3 },
{ alarmDevice: "光电感烟探测器", alarmTime: "2024-01-01 10:35:00", alarmArea: "H区", status: 2, disposalStatus: 2 },
{ alarmDevice: "差定温火灾探测器", alarmTime: "2024-01-01 10:40:00", alarmArea: "I区", status: 1, disposalStatus: 1 },
{ alarmDevice: "缆式线型感温探测器", alarmTime: "2024-01-01 10:45:00", alarmArea: "J区", status: 2, disposalStatus: 3 },
]);
const [block4List, setBlock4List] = useState([
{ teamName: "第一志愿消防队", age: 43, leader: "张队长", phone: "13800138001" },
{ teamName: "第二志愿消防队", age: 55, leader: "李队长", phone: "13800138002" },
{ teamName: "第三志愿消防队", age: 23, leader: "王队长", phone: "13800138003" },
{ teamName: "第四志愿消防队", age: 54, leader: "赵队长", phone: "13800138004" },
{ teamName: "第五志愿消防队", age: 65, leader: "刘队长", phone: "13800138005" },
{ teamName: "第六志愿消防队", age: 34, leader: "陈队长", phone: "13800138006" },
{ teamName: "第七志愿消防队", age: 24, leader: "杨队长", phone: "13800138007" },
{ teamName: "第八志愿消防队", age: 52, leader: "黄队长", phone: "13800138008" },
{ teamName: "第九志愿消防队", age: 23, leader: "周队长", phone: "13800138009" },
{ teamName: "第十志愿消防队", age: 35, leader: "吴队长", phone: "13800138010" },
]);
const block2OptionsClick = (index) => {
if (index === block2Index)
return;
setBlock2Index(index);
};
return (
<div className="branch_office_xiaofang">
<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">
<div>
<span>设备总数：</span>
<span>{item.count1}</span>
</div>
<div>
<span>设备在线数：</span>
<span>{item.count2}</span>
</div>
<div>
<span>设备离线数：</span>
<span>{item.count3}</span>
</div>
</div>
</div>
))}
</div>
</div>
</div>
<div className="block2">
<Title
title="消防泵房状态"
extra={(
<div className="tabs">
{block2OptionsNavList.map((item, index) => (
<div
key={index}
className={`tab ${index === block2Index ? "active" : ""}`}
onClick={() => block2OptionsClick(index)}
>
{item}
</div>
))}
</div>
)}
/>
<div className="options">
<div className="table">
<div className="tr">
<div className="td">泵房名称</div>
<div className="td">液位(米)</div>
<div className="td">水压(mpa)</div>
<div className="td">状态</div>
</div>
<div className="scroll">
<SeamlessScroll list={block2List} step={0.5}>
{block2List.map((item, index) => (
<div key={index} className="tr">
<div className="td">{item.pumpRoomName}</div>
<div className="td">{item.liquidLevel}</div>
<div className="td">{`${item.waterPressure}MPa`}</div>
<div className="td" style={{ color: item.status === 1 ? "#60b321" : item.status === 2 ? "#f18308" : "#fff" }}>
{item.status === 1 ? "正常" : item.status === 2 ? "异常" : "维护中"}
</div>
</div>
))}
</SeamlessScroll>
</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 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.alarmDevice}</div>
<div className="td">{item.alarmTime}</div>
<div className="td">{item.alarmArea}</div>
<div className="td" style={{ color: item.status === 1 ? "#FF8A00" : "#fff" }}>{item.status ? "在线" : "离线"}</div>
<div className="td" style={{ color: item.disposalStatus === 1 ? "#009CFF" : item.disposalStatus === 2 ? "#FFBE0F" : "#46A418" }}>
{item.disposalStatus === 1 ? "待确认" : item.disposalStatus === 2 ? "误报" : "已消除"}
</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.leader}</div>
<div className="td">{item.age}</div>
<div className="td">{item.teamName}</div>
<div className="td">{item.phone}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
);
}
export default XiaoFang;

179
src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.less Normal file
View File

@ -0,0 +1,179 @@
.branch_office_xiaofang {
.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;
.item {
flex: 1;
color: #fff;
.title {
font-weight: bold;
font-size: 14px;
text-align: center;
}
.img {
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
img {
width: 65px;
height: 45px;
}
}
.info {
display: flex;
flex-wrap: wrap;
gap: 5px 15px;
font-size: 12px;
}
}
}
}
}
.block2 {
background-color: rgba(12, 28, 88, 0.4);
margin-top: 10px;
.tabs {
display: flex;
.tab {
background-color: rgba(36, 115, 239, 0.27);
padding: 2px 6px;
border-radius: 2px;
color: #fff;
font-size: 12px;
border: 1px solid #5d718c;
cursor: pointer;
&.active {
background-color: #2473ef;
border: 1px solid #2473ef;
}
}
}
.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: 155px;
overflow-y: hidden;
}
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: rgba(17, 51, 112, 0.8);
.td {
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px;
}
}
}
}
}
.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: 155px;
overflow-y: hidden;
}
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: 1.5fr 2fr 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: 155px;
overflow-y: hidden;
}
.tr {
margin-top: 5px;
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: rgba(17, 51, 112, 0.8);
.td {
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px;
}
}
}
}
}
}

3
src/pages/Container/Map/components/Content/index.js
View File

@ -9,6 +9,7 @@ import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/bran
import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight";
import BranchMenJin from "~/pages/Container/Map/components/Content/branchOffice/MenJin";
import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian";
import BranchXiaoFang from "~/pages/Container/Map/components/Content/branchOffice/XiaoFang";
import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
import PortIndex from "~/pages/Container/Map/components/Content/port/Index";
@ -55,6 +56,8 @@ function Content() {
return <BranchWeiXian />;
if (bottomUtilsCurrentType === "door")
return <BranchMenJin />;
if (bottomUtilsCurrentType === "fire")
return <BranchXiaoFang />;
};
const renderBranchOfficeContentRight = () => {