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 0000000..ac67f00 Binary files /dev/null and b/src/assets/images/map_bi/content/ico19.png differ diff --git a/src/assets/images/map_bi/content/ico20.png b/src/assets/images/map_bi/content/ico20.png new file mode 100644 index 0000000..314d5f3 Binary files /dev/null and b/src/assets/images/map_bi/content/ico20.png differ 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 = () => {