Browse Source

(*)一体化大屏增加自适应

master
peng.peng 1 year ago
parent
commit
035c85f02c
  1. 2
      super-screen/client/src/app.js
  2. 50
      super-screen/client/src/components/full-screen-container.js
  3. 4
      super-screen/client/src/components/index.js
  4. 9
      super-screen/client/src/components/style.less
  5. 72
      super-screen/client/src/sections/community-safty/containers/homePage.js
  6. 2
      super-screen/client/src/sections/fire-control/components/left-middle.js
  7. 2
      super-screen/client/src/sections/fire-control/components/right-middle.js
  8. 8
      super-screen/client/src/sections/fire-control/containers/gis.js
  9. 117
      super-screen/client/src/sections/fire-control/containers/homePage.js
  10. 4
      super-screen/client/src/sections/water-prevention/components/left-bottom.js
  11. 14
      super-screen/client/src/sections/water-prevention/containers/gis.js
  12. 80
      super-screen/client/src/sections/water-prevention/containers/homePage.js

2
super-screen/client/src/app.js

@ -21,7 +21,7 @@ const App = props => {
homePage, homePage,
Auth, Auth,
waterprevention, waterprevention,
communitysafty, // communitysafty,
firecontrol firecontrol
]} ]}
/> />

50
super-screen/client/src/components/full-screen-container.js

@ -0,0 +1,50 @@
import React, { useLayoutEffect, forwardRef, useEffect } from 'react';
import { useAutoResize } from '@jiaminghi/data-view-react';
import './style.less'
const FullScreenContainer = forwardRef(({
children, className, style, designWidth = 1920, designHeight = 1080, onlyAutoSize = false, divRef,
}, ref) => {
const { domRef } = useAutoResize(ref);
useEffect(() => {
const innerWidth = document.body.clientWidth;
const innerHeight = document.body.clientHeight;
const w = document.body.clientWidth / designWidth;
const h = document.body.clientHeight / designHeight;
const scale = w < h ? w : h;
const divRect = divRef?.current?.getBoundingClientRect();
if (onlyAutoSize) {
Object.assign(domRef.current.style, {
width: `${divRect?.width || 0}px`,
height: `${divRect?.height || 0}px`,
// width: '100vw',
// height: '100vh',
position: 'fixed',
zIndex: 999,
top: `${divRect?.top || 0}px`,
left: `${divRect?.left || 0}px`,
});
} else {
const isSuperScreen = innerWidth > 3000 && innerHeight >= 976 && innerHeight <= 1080 ? true : false
Object.assign(domRef.current.style, {
width: isSuperScreen ? '100vw' : `${designWidth}px`,
height: isSuperScreen ? '100vh' : `${designHeight}px`,
});
domRef.current.style.transform = `scale(${scale}) translate(-50%, -50%)`;
}
});
return (
<div
className={onlyAutoSize ? 'dv-screen-container' : 'dv-full-screen-container'}
style={style}
ref={domRef}
>
{children}
</div>
);
});
export default FullScreenContainer;

4
super-screen/client/src/components/index.js

@ -10,6 +10,7 @@ import UploadLocal from './UploadLocal';
import Box from './public/table-card'; import Box from './public/table-card';
import CarouselList from './public/carousel-list'; import CarouselList from './public/carousel-list';
import NoData from './public/noData' import NoData from './public/noData'
import FullScreenContainer from './full-screen-container'
export { export {
Upload, Upload,
Uploads, Uploads,
@ -19,5 +20,6 @@ export {
UploadLocal, UploadLocal,
Box, Box,
CarouselList, CarouselList,
NoData NoData,
FullScreenContainer
}; };

9
super-screen/client/src/components/style.less

@ -0,0 +1,9 @@
.dv-full-screen-container {
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
transform-origin: left top;
// padding: 14px 8px 28px 8px;
transition: 0.3s;
}

72
super-screen/client/src/sections/community-safty/containers/homePage.js

@ -9,6 +9,7 @@ import RightMiddle from '../components/special-person'
import RightBottom from '../components/traffic-ranking' import RightBottom from '../components/traffic-ranking'
import Gis from './gis'; import Gis from './gis';
import Weather from '../../water-prevention/components/weather'; import Weather from '../../water-prevention/components/weather';
import { FullScreenContainer } from '$components'
import './style.less' import './style.less'
function homePage(props) { function homePage(props) {
@ -17,47 +18,50 @@ function homePage(props) {
const cardHeight = document.body.clientHeight * 0.896 * 0.32 const cardHeight = document.body.clientHeight * 0.896 * 0.32
const cardContentHeight = cardHeight - 42 - 13 const cardContentHeight = cardHeight - 42 - 13
return <> return <>
<div className='homepage'> <FullScreenContainer>
<div className='_title'> <div className='homepage'>
<div className='_title_text'> <div className='_title'>
<span>社区安全</span> <div className='_title_text'>
<div className='_title_dot'></div> <span>社区安全</span>
<span>流动人口</span> <div className='_title_dot'></div>
</div> <span>流动人口</span>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
</div>
<div className='homepage-left homepage-left-left'>
<div className="list">
<div className='child' style={childStyle}>
<LeftTop />
</div>
<div className='child' style={childStyle}>
<LeftMiddle />
</div>
<div className='child' style={childStyle}>
<LeftBottom cardContentHeight={cardContentHeight} />
</div> </div>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
</div> </div>
</div> <div className='homepage-left homepage-left-left'>
<div className='homepage-center'> <div className="list">
<Gis /> <div className='child' style={childStyle}>
</div> <LeftTop />
<div className='homepage-left homepage-left-right'> </div>
<div className="list"> <div className='child' style={childStyle}>
<div className='child-right' style={childStyle}> <LeftMiddle />
<RightTop /> </div>
</div> <div className='child' style={childStyle}>
<div className='child-right' style={childStyle}> <LeftBottom cardContentHeight={cardContentHeight} />
<RightMiddle cardContentHeight={cardContentHeight} /> </div>
</div> </div>
<div className='child-right' style={childStyle}> </div>
<RightBottom /> <div className='homepage-center'>
<Gis />
</div>
<div className='homepage-left homepage-left-right'>
<div className="list">
<div className='child-right' style={childStyle}>
<RightTop />
</div>
<div className='child-right' style={childStyle}>
<RightMiddle cardContentHeight={cardContentHeight} />
</div>
<div className='child-right' style={childStyle}>
<RightBottom />
</div>
</div> </div>
</div> </div>
</div> </div>
</FullScreenContainer>
</div>
</> </>

2
super-screen/client/src/sections/fire-control/components/left-middle.js

@ -134,7 +134,7 @@ function PopulationDynamics() {
option={options} option={options}
notMerge notMerge
lazyUpdate lazyUpdate
style={{ height: '100%' }} style={{ height: 231, width: 423 }}
/> />
</Box> </Box>
} }

2
super-screen/client/src/sections/fire-control/components/right-middle.js

@ -156,7 +156,7 @@ function PopulationDynamics() {
option={option} option={option}
notMerge notMerge
lazyUpdate lazyUpdate
style={{ height: '100%' }} style={{ height: 231, width: 423 }}
/> />
</Box> </Box>
} }

8
super-screen/client/src/sections/fire-control/containers/gis.js

@ -4,7 +4,7 @@ import { render } from 'react-dom';
import { Row, Col, Modal, Form, Input, Select } from 'antd'; import { Row, Col, Modal, Form, Input, Select } from 'antd';
import { heatmapData } from '../constant/index' import { heatmapData } from '../constant/index'
import './gis.less' import './gis.less'
const MAPDOMID = 'fs-amap-container'; const MAPDOMID = 'fs-amap-container-fire';
const LOCATION_MAP_ID = 'location_map_id'; const LOCATION_MAP_ID = 'location_map_id';
let map = null; let map = null;
let heatmap = null; let heatmap = null;
@ -66,7 +66,8 @@ function Map(props) {
setTimeout(() => { setTimeout(() => {
setDelay(false) setDelay(false)
}, 1000); }, 1000);
map && renderAlarms()
loca && renderHeapLayer()
}); });
map.on('click', (e) => { map.on('click', (e) => {
@ -93,8 +94,7 @@ function Map(props) {
// 初始化GIS 组件销毁清空定时器 // 初始化GIS 组件销毁清空定时器
useEffect(() => { useEffect(() => {
loadMap(); loadMap();
map && renderAlarms()
loca && renderHeapLayer()
}, []); }, []);
useEffect(() => { useEffect(() => {

117
super-screen/client/src/sections/fire-control/containers/homePage.js

@ -12,6 +12,8 @@ import RightBottom from '../components/right-bottom'
import Gis from './gis'; import Gis from './gis';
import './style.less' import './style.less'
import Weather from '../../water-prevention/components/weather'; import Weather from '../../water-prevention/components/weather';
import { FullScreenContainer } from '$components'
function homePage(props) { function homePage(props) {
const { dispatch } = props; const { dispatch } = props;
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
@ -20,69 +22,72 @@ function homePage(props) {
const [tab, setTab] = useState('overview') const [tab, setTab] = useState('overview')
const [emengencyTab, setEmengencyTab] = useState('yjjg'); const [emengencyTab, setEmengencyTab] = useState('yjjg');
return <> return <>
<div className='homepage'> <FullScreenContainer>
<div className='_title'> <div className='homepage'>
<div className='_title_text'> <div className='_title'>
<span>智慧消防</span> <div className='_title_text'>
<div className='_title_dot'></div> <span>智慧消防</span>
<span>一键护航</span> <div className='_title_dot'></div>
<span>一键护航</span>
</div>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
</div> </div>
<Weather /> <div className='homepage-left homepage-left-left'>
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div> <div div className="list">
</div> {tab == 'overview' ?
<div className='homepage-left homepage-left-left'> <>
<div div className="list"> <div className='child' style={childStyle}>
{tab == 'overview' ? <LeftTop />
<> </div>
<div className='child' style={childStyle}> <div className='child' style={childStyle}>
<LeftTop /> <LeftMiddle />
</div> </div>
<div className='child' style={childStyle}> <div className='child' style={childStyle}>
<LeftMiddle /> <LeftBottom cardContentHeight={cardContentHeight} />
</div> </div>
<div className='child' style={childStyle}> </>
<LeftBottom cardContentHeight={cardContentHeight} /> :
<div className='child' style={{ height: '100%' }} >
<Left endEvent={() => {
setTab('overview')
}} cardContentHeight={document.body.clientHeight * 0.896} />
</div> </div>
</> }
: </div>
</div>
<div className='homepage-center'>
<Gis
propTab={tab}
alarmOk={() => {
setTab('item')
}}
changeEmengencyTab={(e) => {
setEmengencyTab(e)
}}
/>
</div>
<div className='homepage-left homepage-left-right'>
{tab == 'overview' ? <div className="list">
<div className='child-right' style={childStyle}>
<RightTop />
</div>
<div className='child-right' style={childStyle}>
<RightMiddle cardContentHeight={cardContentHeight} />
</div>
<div className='child-right' style={childStyle}>
<RightBottom />
</div>
</div> :
<div className='child' style={{ height: '100%' }} > <div className='child' style={{ height: '100%' }} >
<Left endEvent={() => { <Right emengencyTab={emengencyTab} cardContentHeight={document.body.clientHeight * 0.896} />
setTab('overview')
}} cardContentHeight={document.body.clientHeight * 0.896} />
</div> </div>
} }
</div> </div>
</div>
<div className='homepage-center'>
<Gis
propTab={tab}
alarmOk={() => {
setTab('item')
}}
changeEmengencyTab={(e) => {
setEmengencyTab(e)
}}
/>
</div>
<div className='homepage-left homepage-left-right'>
{tab == 'overview' ? <div className="list">
<div className='child-right' style={childStyle}>
<RightTop />
</div>
<div className='child-right' style={childStyle}>
<RightMiddle cardContentHeight={cardContentHeight} />
</div>
<div className='child-right' style={childStyle}>
<RightBottom />
</div>
</div> :
<div className='child' style={{ height: '100%' }} >
<Right emengencyTab={emengencyTab} cardContentHeight={document.body.clientHeight * 0.896} />
</div>
}
</div>
</div > </div >
</FullScreenContainer>
</> </>

4
super-screen/client/src/sections/water-prevention/components/left-bottom.js

@ -42,8 +42,8 @@ function LeftBottom(props) {
<RingChart <RingChart
data={data} data={data}
colors={colors} colors={colors}
width="100%" width={220}
height="100%" height={220}
image={ image={
{ {
url: '/assets/images/ring_bg.png', url: '/assets/images/ring_bg.png',

14
super-screen/client/src/sections/water-prevention/containers/gis.js

@ -51,6 +51,8 @@ function Map(props) {
map.on('complete', () => { map.on('complete', () => {
setTimeout(() => { setTimeout(() => {
setDelay(false) setDelay(false)
map && renderMarkers()
map && renderAlarms()
}, 1500); }, 1500);
}); });
@ -71,12 +73,12 @@ function Map(props) {
}) })
loca = new Loca.Container({ map: map }) loca = new Loca.Container({ map: map })
{ map && renderMarkers() } // { map && renderMarkers() }
{ map && renderAlarms() } // { map && renderAlarms() }
setTimeout(() => { // setTimeout(() => {
renderLayer() // renderLayer()
createText() // createText()
}, 1000); // }, 1000);
}; };
const createText = () => { const createText = () => {

80
super-screen/client/src/sections/water-prevention/containers/homePage.js

@ -14,6 +14,7 @@ import Weather from '../components/weather'
import Gis from './gis'; import Gis from './gis';
import moment from 'moment'; import moment from 'moment';
import './style.less' import './style.less'
import { FullScreenContainer } from '$components'
function homePage(props) { function homePage(props) {
const { dispatch, actions } = props; const { dispatch, actions } = props;
@ -162,49 +163,52 @@ function homePage(props) {
} }
return <> return <>
<div className='homepage'> <FullScreenContainer>
<div className='_title'> <div className='homepage'>
<div className='water_title_text'> <div className='_title'>
水务防汛实时监测预警系统 <div className='water_title_text'>
</div> 水务防汛实时监测预警系统
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
</div>
<div className='homepage-left homepage-left-left'>
<div div className="list">
<div className='child' style={childStyle}>
<currentContainer.leftTop />
</div>
<div className='child' style={childStyle}>
<currentContainer.leftBottom waterLevelLength={trendData.length} waterLevelAlarms={waterLevelAlarms} />
</div> </div>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
</div> </div>
</div> <div className='homepage-left homepage-left-left'>
<div className='homepage-center'> <div div className="list">
<Gis <div className='child' style={childStyle}>
changeTab={(e) => { <currentContainer.leftTop />
setTab(e) </div>
}} <div className='child' style={childStyle}>
changeEmengencyTab={(e) => { <currentContainer.leftBottom waterLevelLength={trendData.length} waterLevelAlarms={waterLevelAlarms} />
setEmengencyTab(e) </div>
const { token } = JSON.parse(sessionStorage.getItem('worksafetyUser'));
getEmerResource(e, token)
}}
trendData={trendData}
waterLevelAlarms={waterLevelAlarms}
/>
</div>
<div className='homepage-left homepage-left-right'>
<div div className="list">
<div className='child-right' style={childStyle}>
<currentContainer.rightTop emengencyTab={emengencyTab} emerResource={emerResource} trendData={trendData} />
</div> </div>
<div className='child-right' style={childStyle}> </div>
<currentContainer.rightBottom structures={structures} videoList={videoList} accessToken={accessToken} /> <div className='homepage-center'>
<Gis
changeTab={(e) => {
setTab(e)
}}
changeEmengencyTab={(e) => {
setEmengencyTab(e)
const { token } = JSON.parse(sessionStorage.getItem('worksafetyUser'));
getEmerResource(e, token)
}}
trendData={trendData}
waterLevelAlarms={waterLevelAlarms}
/>
</div>
<div className='homepage-left homepage-left-right'>
<div div className="list">
<div className='child-right' style={childStyle}>
<currentContainer.rightTop emengencyTab={emengencyTab} emerResource={emerResource} trendData={trendData} />
</div>
<div className='child-right' style={childStyle}>
<currentContainer.rightBottom structures={structures} videoList={videoList} accessToken={accessToken} />
</div>
</div> </div>
</div> </div>
</div> </div >
</div > </FullScreenContainer>
</> </>
} }

Loading…
Cancel
Save