101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
|
import React, { useEffect, useState } from 'react';
|
|||
|
|
import moment from "moment"
|
|||
|
|
import {
|
|||
|
|
CloseOutlined,
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
import { Modal, Tabs } from 'antd';
|
|||
|
|
import genDamImage from '../../../../components/DamGraph/DamImage';
|
|||
|
|
import Skssjc from "../../../../components/skComp/Skssjc";
|
|||
|
|
import Sksjcx from "../../../../components/skComp/Sksjcx";
|
|||
|
|
import { reservoirlist } from "../../../../service/station"
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function ShuikuPop({ id, data, dispatch }) {
|
|||
|
|
console.log(data);
|
|||
|
|
const [picData, setPicData] = useState({});
|
|||
|
|
const [damGraph, setDamGraph] = useState();
|
|||
|
|
const [tableData, setTableData] = useState([])
|
|||
|
|
|
|||
|
|
const getData = async (params) => {
|
|||
|
|
setTableData(await reservoirlist(params));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
// if (data.url && data.url.length > 1) {
|
|||
|
|
// setPicData({
|
|||
|
|
// pic1: data.url[0]?.imgPath,
|
|||
|
|
// pic2: data.url[1]?.imgPath,
|
|||
|
|
// pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
|
|||
|
|
// pic2Tm: moment(data.url[1]?.tm).format('YYYY-MM-DD HH:mm:ss'),
|
|||
|
|
// });
|
|||
|
|
// } else if (data.url && data.url.length == 1) {
|
|||
|
|
// setPicData({
|
|||
|
|
// pic1: data.url[0]?.imgPath,
|
|||
|
|
// pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
}, [data]);// eslint-disable-line
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const img = genDamImage(data, 400, 260)
|
|||
|
|
setDamGraph(img);
|
|||
|
|
}, [data]);// eslint-disable-line
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let option = {
|
|||
|
|
sources: ["SW", "SK"],
|
|||
|
|
args: "",
|
|||
|
|
};
|
|||
|
|
getData(option)
|
|||
|
|
}, [])
|
|||
|
|
const closePop = () => {
|
|||
|
|
dispatch.runtime.closeFeaturePop(id);
|
|||
|
|
};
|
|||
|
|
const width = 1050;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className="dp-popup" style={{ position: 'absolute', top: 0, width,left: 0,height:646, lineHeight: 1,backgroundColor:'#fff',borderRadius:'10px'}}>
|
|||
|
|
<div className="dp-popup-content" style={{height:'100%',borderRadius:'10px'}}>
|
|||
|
|
<div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
|
|||
|
|
<div className="normalModalStyle" style={{borderRadius:10}}>
|
|||
|
|
<div className="normalModalStyle_title" style={{marginBottom:0}}>
|
|||
|
|
<div className="normalModalStyle_title_icon"></div>
|
|||
|
|
<span>{data?.stnm} </span>
|
|||
|
|
{/* {(data?.sttp && data?.stnm==='黑石咀') &&
|
|||
|
|
<span style={
|
|||
|
|
{
|
|||
|
|
display:"inline-block",
|
|||
|
|
padding: "5px 10px",
|
|||
|
|
color: "#74a7ff",
|
|||
|
|
border: "1px solid #74a7ff",
|
|||
|
|
borderRadius: "5px"
|
|||
|
|
}
|
|||
|
|
}> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>} */}
|
|||
|
|
<div className="normalModalStyle_title_cancel">
|
|||
|
|
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{paddingLeft:15}}>
|
|||
|
|
<Tabs defaultActiveKey="1">
|
|||
|
|
<Tabs.TabPane tab="实时监测" key="1">
|
|||
|
|
<Skssjc data={{ ...data }}/>
|
|||
|
|
</Tabs.TabPane>
|
|||
|
|
<Tabs.TabPane tab="数据查询" key="2">
|
|||
|
|
<Sksjcx record={data}/>
|
|||
|
|
</Tabs.TabPane>
|
|||
|
|
</Tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div >
|
|||
|
|
<div className="boxfoot"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default React.memo(ShuikuPop);
|