mcfxkh-Web/src/views/Home/panels/Jcgj/index.js

90 lines
3.2 KiB
JavaScript

import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'
function rzRender(rz, base) {
return (
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
{typeof base === 'number' ? base.toFixed(2) : ''}
</DpTableCell>
);
}
function HDReal({ style }) {
const [dimension, setDimension] = useState('ft');
const dispatch = useDispatch();
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
// let { data } = useRequest(HDRealPromise.get, t);
const [setting, showSetting] = useState(false);
const toggleAutoRefresh = () => {
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
}
const handleBxDlg = () => {
dispatch.runtime.setInfoDlg({ layerId: 'WyWarnLayer', properties: {} })
}
return (
<PanelBox
style={style}
title="监测告警"
color="green"
extra={
<div>
{moment().subtract(6, 'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
</div>
}
>
<div style={{ display: 'flex', padding: '10px 5px', marginLeft: 30, justifyContent: 'space-between', flexWrap: 'wrap' }}>
<div>
<img src={`${process.env.PUBLIC_URL}/assets/s3.png`} alt="" style={{ width: 180, cursor: 'pointer' }} onClick={handleBxDlg} />
<img src={`${process.env.PUBLIC_URL}/assets/s4.png`} alt="" style={{ width: 180 }} />
</div>
<div style={{ margin: '5px 0' }}>
<img src={`${process.env.PUBLIC_URL}/assets/s5.png`} alt="" style={{ width: 180 }} />
<img src={`${process.env.PUBLIC_URL}/assets/s2.png`} alt="" style={{ width: 180 }} />
</div>
<div >
<img src={`${process.env.PUBLIC_URL}/assets/s1.png`} alt="" style={{ width: 180 }} />
<img src={`${process.env.PUBLIC_URL}/assets/s6.png`} alt="" style={{ width: 180 }} />
</div>
<img src={`${process.env.PUBLIC_URL}/assets/s7.png`} alt="" style={{ width: 180, marginTop: 5 }} />
</div>
{
setting && <Setting onClose={() => showSetting(false)} />
}
</PanelBox>
)
}
export default HDReal;