|
|
@@ -0,0 +1,90 @@
|
|
|
+import React, { useState } from "react";
|
|
|
+import styled from "styled-components";
|
|
|
+import { CustomOverlay } from "react-bmapgl";
|
|
|
+import img from "../../assets/icon1.jpg";
|
|
|
+
|
|
|
+function Project(props) {
|
|
|
+ const [visible, setVisible] = useState(false);
|
|
|
+ return (
|
|
|
+ <CustomOverlay {...props}>
|
|
|
+ <Box>
|
|
|
+ <div onClick={() => setVisible(!visible)} className="icon"></div>
|
|
|
+ {visible && (
|
|
|
+ <InfoBox>
|
|
|
+ <div className="top">
|
|
|
+ 第三水厂
|
|
|
+ <span>
|
|
|
+ 2023-03-15
|
|
|
+ <br />
|
|
|
+ 12:00:00
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className="item">
|
|
|
+ <div className="item-name">运行负荷</div>
|
|
|
+ <div className="item-value">90%</div>
|
|
|
+ </div>
|
|
|
+ <div className="item">
|
|
|
+ <div className="item-name">进水COD</div>
|
|
|
+ <div className="item-value">330 mg/L</div>
|
|
|
+ </div>
|
|
|
+ <div className="item">
|
|
|
+ <div className="item-name">进水COD</div>
|
|
|
+ <div className="item-value">330 mg/L</div>
|
|
|
+ </div>
|
|
|
+ <div className="item">
|
|
|
+ <div className="item-name">进水COD</div>
|
|
|
+ <div className="item-value">330 mg/L</div>
|
|
|
+ </div>
|
|
|
+ <div className="item">
|
|
|
+ <div className="item-name">进水COD</div>
|
|
|
+ <div className="item-value">330 mg/L</div>
|
|
|
+ </div>
|
|
|
+ </InfoBox>
|
|
|
+ )}
|
|
|
+ </Box>
|
|
|
+ </CustomOverlay>
|
|
|
+ );
|
|
|
+}
|
|
|
+const Box = styled.div`
|
|
|
+ position: relative;
|
|
|
+ .icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background: url(${img}) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const InfoBox = styled.div`
|
|
|
+ position: absolute;
|
|
|
+ top: -30%;
|
|
|
+ left: 40px;
|
|
|
+ width: 200px;
|
|
|
+ border: 1px solid #046681;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(8, 41, 75, 0.3);
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 4px 10px;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ border-bottom: 1px solid #046681;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-name,
|
|
|
+ .item-value {
|
|
|
+ flex: 1;
|
|
|
+ padding: 4px 10px;
|
|
|
+ }
|
|
|
+ .item-name {
|
|
|
+ border-right: 1px solid #046681;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+export default Project;
|
