lishenfeng
/
mcfxkh-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改首页细节

qzc-dev
秦子超 2025-07-02 09:31:32 +08:00
parent b6ddee139c
commit 88482842f1
10 changed files with 15241 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/Home/InfoDlg/index.js
View File

@ -48,6 +48,7 @@ import ShuichangguanwangDlg from './ShuichangguanwangDlg';
import FlowjcDlg from './FlowjcDlg'
import EditFaDlg from './EditFaDlg'
import AllSkDlg from './AllSkDlg'
import SpjkDlg from './spjkDlg'
function InfoDlg() {
const infoDlg = useSelector(getInfoDlg);
const dispatch = useDispatch();
@ -155,6 +156,8 @@ function InfoDlg() {
return <EditFaDlg record={properties} onClose={handleClose} />
}else if (layerId === 'allSkFaLayer') {
return <AllSkDlg record={properties} onClose={handleClose} />
}else if (layerId === 'spjkFaLayer') {
return <SpjkDlg record={properties} onClose={handleClose} />
}

66
src/views/Home/InfoDlg/spjkDlg/index.js Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import DpTab from '../../../../layouts/mui/DpTab';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import { useDispatch, useSelector } from 'react-redux';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import SkPicReal from '../../../Mgr/xqjs/SkPicReal2';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: "80%",
marginLeft: "10%",
},
paper: {
backgroundColor: theme.palette.background.paper,
border: '1px solid rgba(41, 182, 246, 0.4)',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
width: "100%",
},
}));
function HDStDlg({ record, onClose }) {
const [value, setValue] = React.useState(0);
const classes = useStyles();
const dispatch = useDispatch();
return (
<Dialog
open={true}
onClose={onClose}
maxWidth="xl"
style={{ borderRadius: 0 }}
PaperComponent={DpPaperComponent}
BackdropComponent={DpBackgroundDrop}
>
<div className="boxhead"></div>
<DialogContent style={{ padding: 0, width: '85rem', overflowX: 'hidden' }}>
<DpAppBar position="sticky">
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
<DpTab label="视频监控" />
</DpTabs>
<DpCloseButton onClick={onClose} />
</DpAppBar>
<div className={classes.paper}>
<SkPicReal />
</div>
</DialogContent>
<div className="boxfoot"></div>
</Dialog>
)
}
export default React.memo(HDStDlg);

14
src/views/Home/MapCtrl/index.js
View File

@ -158,6 +158,20 @@ export default function MapCtrl({ initParams, onLoad }) {
}
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
}
if (feature.layer.id === '流域站点_drp') {
const record = feature.properties
dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: record, coordinates: [record.lgtd, record.lttd] });
}
if (feature.layer.id === '流域站点_hd') {
const record = feature.properties
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: record, coordinates: [record.lgtd, record.lttd] });
}
if (feature.layer.id === '流域站点_sk') {
const record = feature.properties
dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
}
}
});

64
src/views/Home/panels/DrpReal/index.js
View File

@ -1,7 +1,8 @@
import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import HighlightOff from '@material-ui/icons/HighlightOff';
import SkPicReal from '../../../Mgr/xqjs/SkPicReal2';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
@ -19,11 +20,37 @@ import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import Modal from '@material-ui/core/Modal';
import { makeStyles } from '@material-ui/core/styles';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
const useStyles = makeStyles((theme) => ({
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: "80%",
marginLeft: "10%",
},
paper: {
backgroundColor: theme.palette.background.paper,
border: '1px solid rgba(41, 182, 246, 0.4)',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
width: "100%",
},
}));
function DrpReal({ style }) {
const dispatch = useDispatch();
const tableDrpFilter = useSelector(s => s.realview.tableDrpFilter);
const tableDrpSorter = useSelector(s => s.realview.tableDrpSorter);
const drpAutoRefresh = useSelector(s => s.realview.drpAutoRefresh);
const [open, setOpen] = React.useState(false);
const classes = useStyles();
const t = useRefresh(drpAutoRefresh ? 20 * 1000 : 0);
const { data } = useRequest(DrpRealPromise.get, t);
const [setting, showSetting] = useState(false);
@ -57,6 +84,13 @@ function DrpReal({ style }) {
});
}
}
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const toggleStType = (type) => {
const visible = !tableDrpFilter[type];
@ -90,8 +124,11 @@ function DrpReal({ style }) {
}
extra={
<>
<i style={{ marginRight: '0.5rem', color: drpAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
<i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i>
<i style={{ marginRight: '0.5rem' }} className="ionicons image cursor-pointer" onClick={()=>{
dispatch?.runtime.setInfoDlg({ layerId: 'spjkFaLayer', properties: {} })
}}></i>
{/* <i style={{ marginRight: '0.5rem', color: drpAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
</>
}
>
@ -132,6 +169,27 @@ function DrpReal({ style }) {
{
setting && <Setting onClose={() => showSetting(false)} />
}
{/*水库图片弹窗*/}
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<div className={classes.paper}>
<HighlightOff style={{ color: "#fff", position: "absolute", right: "1rem", fontSize: "2rem", cursor: "pointer" }} onClick={handleClose} />
<SkPicReal />
</div>
</Fade>
</Modal>
</PanelBox>
)
}

7
src/views/Home/panels/JbqkLeft/index.js
View File

@ -138,7 +138,7 @@ function DrpReal({ style }) {
<CollapsePage type={'2'} name={'河流水系'} skType={skType} setSkType={setSkType} icon={'河流水系.png'}/>
<Collapse in={skType==='2'} timeout="auto" unmountOnExit>
<div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='2'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
{/* <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='2'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
<img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
{'>500平方公里'}
</div>
@ -149,6 +149,11 @@ function DrpReal({ style }) {
<div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='4'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>{}}>
<img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
{'<50平方公里'}
</div> */}
<div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 2rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
<img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt=""/>
<div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>浮桥河</div>
<div style={{marginBottom:'-0.1rem'}}>{518}平方千米</div>
</div>
</Collapse>

2468
src/views/Home/panels/JbqkRight/page2.js
View File

File diff suppressed because it is too large Load Diff

12429
src/views/Mgr/xqjs/SkPicReal2/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

14
src/views/Mgr/xqjs/SkPicReal2/index.less Normal file
View File

@ -0,0 +1,14 @@
.myCached{
color: #fff;
border: 1px solid #fff;
border-radius: 8px;
padding: 2px 5px;
margin: 15px 0 0 20px;
cursor: pointer;
&:hover{
color:#00deff;
border-color:#00deff;
}
}

172
src/views/Mgr/xqjs/SkPicReal2/picList.js Normal file
View File

@ -0,0 +1,172 @@
import React, { useMemo,useState } from 'react'
import moment from 'moment';
import { renderDrp,renderSkArz } from '../../../../utils/renutils';
import { KrM100Render } from '../../../../utils/tools';
import { Card,CardActionArea,CardContent,CardMedia,Typography,Grid,Modal } from '@material-ui/core/index';
import HighlightOff from '@material-ui/icons/HighlightOff';
import '../SkPicReal/picList.less';
import DefalutImg from '../../../../assets/defalut.png';
import Backdrop from "@material-ui/core/Backdrop/Backdrop";
import MgrCardContent from '../../../../layouts/mgrmui/MgrCardContent'
import Fade from "@material-ui/core/Fade/Fade";
import {makeStyles} from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width:"60%",
marginLeft:"20%",
},
paper: {
backgroundColor: theme.palette.background.paper,
border: '1px solid rgba(41, 182, 246, 0.4)',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
width:"100%",
},
txt: {
color:theme.palette.type === "dark"?"#fff":"#333"
}
}));
function PicList({itemData}) {
const classes = useStyles();
const info = useMemo(() => {
const pic = itemData.pic || [];
pic[0] = pic[0] || {};
pic[1] = pic[1] || {};
return {
pic1: pic[0].url?pic[0].url:DefalutImg,
pic2: pic[1].url?pic[1].url:DefalutImg,
pic1Tm: pic[0].tm ? moment(pic[0].tm).format('MM-DD HH:mm') : '-',
pic2Tm: pic[1].tm ? moment(pic[1].tm).format('MM-DD HH:mm') : '-',
}
}, [itemData]);
const [flipPic, setFlipPic] = useState(false);
const changePic = () => {
setFlipPic(!flipPic);
}
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const { pic1, pic2, pic1Tm, pic2Tm } = info;
return (
<div className="lf cardItem">
<Card>
<CardActionArea>
<div style={{position:"relative",overflow:"hidden"}}>
<CardMedia
className="media"
image={flipPic ? pic1 : pic2}
title={itemData.stnm}
onClick={handleOpen}
/>
{
itemData.pic?<div style={{ position: 'absolute', left: '0px', bottom: '-7px', right: '70%', borderTop: '4px solid white', borderRight: '4px solid white' }}>
<img onClick={e => changePic(e)} alt={itemData.stcd} src={flipPic ? pic2 : pic1} style={{ width: '100%', cursor: 'pointer' }} />
</div>:""
}
</div>
<MgrCardContent>
<Typography gutterBottom variant="h5" component="h2" className="clearFloat">
<span className="lf">{itemData.stnm}</span>
<span className="rf">{flipPic ? pic1Tm : pic2Tm}</span>
</Typography>
<div style={{color:"#999",fontSize:"0.8rem"}}>
<Grid container spacing={3}>
<Grid item xs={4}>
<strong>实时水位</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{itemData.rz}
</Grid>
<Grid item xs={4}>
<strong>01小时雨量</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{renderDrp(itemData, 'h1')}
</Grid>
<Grid item xs={4}>
<strong>汛限水位</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{itemData.fsltdz}
</Grid>
<Grid item xs={4}>
<strong>03小时雨量</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{renderDrp(itemData, 'h3')}
</Grid>
<Grid item xs={4}>
<strong>超汛限</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{renderSkArz(itemData)}
</Grid>
<Grid item xs={4}>
<strong>06小时雨量</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{renderDrp(itemData, 'h6')}
</Grid>
<Grid item xs={4}>
<strong>实时库容</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{KrM100Render(itemData)}
</Grid>
<Grid item xs={4}>
<strong>24小时雨量</strong>
</Grid>
<Grid item xs={2} style={{ textAlign: 'right' }}>
{renderDrp(itemData, 'h24')}
</Grid>
</Grid>
</div>
</MgrCardContent>
</CardActionArea>
</Card>
{/*水库图片弹窗*/}
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<div className={classes.paper}>
<HighlightOff style={{position:"absolute",right: "1rem",fontSize:"2rem",cursor:"pointer" }} className={classes.txt} onClick={handleClose}/>
<img src={flipPic ? pic1 : pic2} alt="" style={{width:"80%",marginLeft:"10%"}}/>
</div>
</Fade>
</Modal>
</div>
);
}
export default PicList

34
src/views/Mgr/xqjs/SkPicReal2/picList.less Normal file
View File

@ -0,0 +1,34 @@
.cardList{
width:100%;
.cardItem{
width: calc( (100% - 3rem)/4 );
margin:0 1rem 1rem 0;
&:nth-child(4n){
margin-right:0;
}
.MuiGrid-item {
padding: 2px 12px;
}
.MuiCard-root{
box-shadow: none;
border: 1px solid #ccc;
border-radius: 4px;
}
}
.media {
height:270px
}
}
.myCached{
color: #fff;
border: 1px solid #fff;
border-radius: 8px;
padding: 2px 5px;
margin: 15px 0 0 20px;
cursor: pointer;
&:hover{
color:#00deff;
border-color:#00deff;
}
}