103 lines
3.9 KiB
JavaScript
103 lines
3.9 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 } 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 {
|
||
|
|
buildingInfo: { selectedBuiTag },
|
||
|
|
device: { selectedDeviceMenu, selectedDeviceList, selectedDeviceFloorTags },
|
||
|
|
system: { mainSub },
|
||
|
|
} = useSelector((state) => state);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (selectedBuiTag && 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, selectedBuiTag]);
|
||
|
|
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-evenly align-items-center flex-wrap">
|
||
|
|
{selectedDeviceList.map(({ device_guid, full_name, forge_dbid }) => (
|
||
|
|
<Card
|
||
|
|
bg="dark"
|
||
|
|
key={device_guid}
|
||
|
|
className="mb-3"
|
||
|
|
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" sprites={selectedDeviceList} />
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</Container>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Monitor;
|