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

super-screen/client/src/app.js

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

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;

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

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

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;
+}

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

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

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

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

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

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

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

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

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

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

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

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

@@ -14,6 +14,7 @@ import Weather from '../components/weather'
 import Gis from './gis';
 import moment from 'moment';
 import './style.less'
+import { FullScreenContainer } from '$components'
 
 function homePage(props) {
     const { dispatch, actions } = props;
@@ -162,49 +163,52 @@ function homePage(props) {
     }
 
     return <>
-        <div className='homepage'>
-            <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} />
+        <FullScreenContainer>
+            <div className='homepage'>
+                <div className='_title'>
+                    <div className='water_title_text'>
+                        水务防汛实时监测预警系统
                     </div>
+                    <Weather />
+                    <div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
                 </div>
-            </div>
-            <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 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>
-                    <div className='child-right' style={childStyle}>
-                        <currentContainer.rightBottom structures={structures} videoList={videoList} accessToken={accessToken} />
+                </div>
+                <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 >
+        </FullScreenContainer>
+
     </>
 }