128 lines
4.8 KiB
JavaScript
128 lines
4.8 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { Container, Row, Col, Card, ButtonGroup, Button } from "react-bootstrap";
|
|
import ForgeModel from "@COM/forges/ForgeModel";
|
|
import { fetchSelectedDeviceMenu, fetchSelectedDeviceList, fetchSelectedDevFlTags, changeMainSubSys } from "@STORE";
|
|
import defdev from "@ASSET/img/defdev.png";
|
|
function Monitor() {
|
|
const params = useParams().systemId; // main_sub
|
|
const [main_system_tag, sub_system_tag] = params.split("_");
|
|
const dispatch = useDispatch();
|
|
const {
|
|
device: { selectedDeviceMenu, selectedDeviceList, selectedDeviceFloorTags },
|
|
system: { mainSub },
|
|
forgeViewer: { viewer, model },
|
|
} = useSelector((state) => state);
|
|
|
|
useEffect(() => {
|
|
if (main_system_tag && sub_system_tag) {
|
|
dispatch(changeMainSubSys({ main_system_tag, sub_system_tag }))
|
|
dispatch(fetchSelectedDeviceMenu({ main_system_tag, sub_system_tag }));
|
|
dispatch(fetchSelectedDeviceList({ sub_system_tag }));
|
|
dispatch(fetchSelectedDevFlTags({ sub_system_tag }));
|
|
}
|
|
// 載入資料
|
|
}, [main_system_tag, sub_system_tag]);
|
|
|
|
// 只顯示指定的設備
|
|
// 取得所有 forge dbid
|
|
const getAllDbIds = (model) => {
|
|
const instanceTree = model.getInstanceTree();
|
|
const allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
|
|
return allDbIdsStr.map(id => parseInt(id));
|
|
}
|
|
useEffect(() => {
|
|
if (model && selectedDeviceList.length !== 0) {
|
|
console.log(model)
|
|
const allDbIds = getAllDbIds(model)
|
|
viewer.hide(allDbIds)
|
|
const showDbIds = selectedDeviceList.map((d) => parseInt(d.forge_dbid))
|
|
let showNodeDbId = [];
|
|
selectedDeviceList.forEach(({ device_nodes }) => {
|
|
showNodeDbId = [...showNodeDbId, ...device_nodes.map(({ forge_dbid }) => forge_dbid)]
|
|
})
|
|
viewer.show([...showDbIds, ...showNodeDbId])
|
|
}
|
|
}, [model, selectedDeviceList])
|
|
|
|
return (
|
|
<>
|
|
<Container
|
|
fluid
|
|
className="mb-3 py-1 d-flex align-items-center"
|
|
style={{ background: "#505050" }}
|
|
>
|
|
<span className="fs-4 text-white-50 mx-4">
|
|
{mainSub.length !== 0 &&
|
|
mainSub.find((s) => params.includes(s.sub_system_tag))?.full_name}
|
|
</span>
|
|
<ButtonGroup size="sm">
|
|
<Button variant="secondary">總覽</Button>
|
|
{selectedDeviceFloorTags.length !== 0 &&
|
|
selectedDeviceFloorTags.map(({ floor_tag, floor_guid }) => (
|
|
<Button variant="secondary" key={floor_guid}>
|
|
{floor_tag}
|
|
</Button>
|
|
))}
|
|
</ButtonGroup>
|
|
</Container>
|
|
<Container fluid className="pe-2 ps-5">
|
|
<Row>
|
|
<Col md={6}>
|
|
{selectedDeviceMenu?.left_system_url &&
|
|
window.location.href.includes("http://220.132.206.5") ? (
|
|
<iframe
|
|
src={selectedDeviceMenu.left_system_url}
|
|
className="w-100 h-100"
|
|
title="設計圖稿"
|
|
></iframe>
|
|
) : (
|
|
selectedDeviceFloorTags.map(({ floor_tag, floor_guid }) => (
|
|
<Row className="g-3" key={floor_guid}>
|
|
<Col md={1}>
|
|
<Button className="px-4 py-2 text-white">{floor_tag}</Button>
|
|
</Col>
|
|
<Col className="d-flex justify-content-start align-items-center flex-wrap">
|
|
{selectedDeviceList.map(({ device_guid, full_name, forge_dbid, device_floor }) => (
|
|
device_floor === floor_tag ?
|
|
<Card
|
|
bg="dark"
|
|
key={device_guid}
|
|
className="mb-3 ms-4"
|
|
style={{ maxWidth: "45%" }}
|
|
>
|
|
<Card.Body>
|
|
<Card.Title>
|
|
<img src={defdev} className="w-25 h-25 me-3" />
|
|
{full_name}
|
|
</Card.Title>
|
|
<Card.Text>
|
|
<span className="text-secondary me-4">功率 kW</span>
|
|
<Card.Link
|
|
className="text-white text-decoration-none"
|
|
data-forgeid={forge_dbid}
|
|
>
|
|
詳細內容
|
|
</Card.Link>
|
|
</Card.Text>
|
|
</Card.Body>
|
|
</Card> :
|
|
<></>
|
|
))}
|
|
</Col>
|
|
</Row>
|
|
))
|
|
)}
|
|
</Col>
|
|
<Col md={6}>
|
|
<ForgeModel forgeHeight="90vh" deviceList={ selectedDeviceList } />
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Monitor;
|