From 0df5d9cca7d27938520f2d04d1d850a91e611ec9 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Fri, 9 Jan 2026 10:30:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/map_bi/content/ico19.png | Bin 0 -> 6213 bytes src/assets/images/map_bi/content/ico20.png | Bin 0 -> 6096 bytes .../Content/branchOffice/WeiXian/index.less | 2 +- .../Content/branchOffice/XiaoFang/index.js | 189 ++++++++++++++++++ .../Content/branchOffice/XiaoFang/index.less | 179 +++++++++++++++++ .../Container/Map/components/Content/index.js | 3 + 6 files changed, 372 insertions(+), 1 deletion(-) create mode 100644 src/assets/images/map_bi/content/ico19.png create mode 100644 src/assets/images/map_bi/content/ico20.png create mode 100644 src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.js create mode 100644 src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.less diff --git a/src/assets/images/map_bi/content/ico19.png b/src/assets/images/map_bi/content/ico19.png new file mode 100644 index 0000000000000000000000000000000000000000..ac67f00928ffa5ecb10dbc79d3566c0ceae56606 GIT binary patch literal 6213 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 literal 0 HcmV?d00001 diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less index 311c8fb..7ea05e7 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less +++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less @@ -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 { diff --git a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.js b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.js new file mode 100644 index 0000000..b958b19 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.js @@ -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="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; diff --git a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.less b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.less new file mode 100644 index 0000000..6f8aaf3 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/index.less @@ -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; + } + } + } + } + } +} diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index f6e0061..df7cd0e 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/src/pages/Container/Map/components/Content/index.js @@ -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 = () => {