Merge branch 'master' of http://10.0.41.100:3000/lishenfeng/mcfxkh-Web

src/models/map/index.js

@@ -266,7 +266,7 @@ const map = {
           RealSkLayer: false,
           RainDrpLayer: true,
           ShuikuLayer: false,
-          BxSkLayer: true,
+          BxSkLayer: false,
           FzdxLayer: false,
           WataLayer: false,
           AdcdLayer: true,

src/models/map/layout.js

@@ -272,6 +272,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
       } else if (view === 3) {
         right = [
           { key: '网格', style: { height: '40rem' } },
+          { key: '单个预案', style: { height: '10rem',flexGrow: 1 } },
         ]
         //rightFullHeight = true;
       } else if (view === 4) {

src/models/runtime/index.js

@@ -14,6 +14,7 @@ function initState() {
     layerSetting: {
     },
     yyObj: {},
+    yuananType:'sh',
     duibifxNum:[],
     shkshObj:undefined,
     gwobj: undefined,
@@ -67,6 +68,9 @@ const runtime = {
     setInfoDlg(state, props) {
       return { ...state, infoDlg: props }
     },
+    setYuananType(state, props) {
+      return { ...state, yuananType: props }
+    },
     setYyfa(state, props) {
       return { ...state, yyObj: props }
     },

src/models/shyjview/index.js

@@ -34,7 +34,7 @@ const shyjview = {
       }
 
 
-      // dispatch.runtime.setHome();
+      dispatch.runtime.setHome();
     },
     async showWeatherRadar(_, state) {
       dispatch.map.setCalculating(true);
@@ -49,7 +49,7 @@ const shyjview = {
       }
 
 
-      // dispatch.runtime.setHome();
+      dispatch.runtime.setHome();
     },
 
     async showYj24hContour(latest) {

src/views/Home/PanelIndex.js

@@ -143,7 +143,7 @@ import Gsfhqx from './panels/Gsfhqx'
 import JbqkRight from './panels/JbqkRight'
 import RainSta from './panels/RainSta'
 import DrpSta from './panels/DrpSta'
-
+import Yuanan from './panels/SigelYuanan'
 export default function PanelIndex({ name, style, ...params }) {
   if (name === '天气') {
     return (
@@ -426,6 +426,8 @@ export default function PanelIndex({ name, style, ...params }) {
     return <Zdgzsq style={style} />
   } else if (name === '测站到报率') {
     return <Czdbl style={style} />
+  }  else if (name === '单个预案') {
+    return <Yuanan style={style} />
   }
   return (
     <PanelBox style={style} title={name} color="red">

src/views/Home/index.js

@@ -23,6 +23,7 @@ export default function Demo1() {
   const isSc = useSelector(s => s.runtime.scya);
   const wg = useSelector(s => s.runtime.shkshObj)
   const showGw = useSelector(s => s.runtime.showGw)
+  const yuananType = useSelector(s => s.runtime.yuananType);
   console.log('wg', wg);
 
 
@@ -64,11 +65,22 @@ export default function Demo1() {
         !hp && (
           <TransitionGroup className={clsx('left', 'dp-panel-container', layout.leftFullHeight && 'fullheight')}>
             {
-              layout.left.map(({ key, ...params }) => (
+              layout.left.map(({ key, ...params }) => {
+                if (key != '辅助决策列表') {
+                  return (
                 <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
                   <PanelIndex name={key} {...params} />
                 </CSSTransition>
-              ))
+                )  
+                } else if (yuananType == 'sh') {
+                  return (
+                    <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
+                  <PanelIndex name={key} {...params} />
+                </CSSTransition>
+                  )
+                }
+              }
+              )
             }
 
           </TransitionGroup>
@@ -82,7 +94,7 @@ export default function Demo1() {
           <TransitionGroup className={clsx('right', 'dp-panel-container', layout.rightFullHeight && 'fullheight')}>
             {
               layout.right.map(({ key, ...params }) => {
-                if (key != '网格') {
+                if (key != '网格' && key != '单个预案') {
                   return (
                     <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">
                       <PanelIndex name={key} {...params} />

src/views/Home/panels/BxSkOverall/OverallContent.js

@@ -65,8 +65,8 @@ export default function OverallContent({ data, skAll }) {
       <div>
         <span className={classes.titleDate}>{start}9时</span>至<span className={classes.titleDate}>{end}9时</span>
               24小时中共有<span className={classes.number}>1</span>
-              个站点雨量为<span className={classes.sttype}>大暴雨</span>，雨量值
+              个站点雨量为<span className={classes.sttype}>暴雨</span>，雨量值
-              <span className={classes.number}>261mm</span>；
+              <span className={classes.number}>50.2mm</span>；
               共产生<span className={classes.number}>3</span>个山洪预警（2个内部预警，1个外部预警），均已处置；<span className={classes.number}>1</span>个水库超汛限，已短信通知责任人；<span className={classes.number}>1</span>个超警戒河道预警。
 
             </div>

src/views/Home/panels/Byjc/index.js

@@ -915,39 +915,47 @@ function DrpReal({ style }) {
       "aRz": -17.4
     }
   ]
-
+  const removePoint = () => {
+      const map = window.__mapref;
+      const layer = map.getLayer('关联站点')
+      dispatch?.runtime.setFeaturePop({})
+        if (layer) {
+          map.removeLayer('关联站点');
+          map.removeSource('关联站点');
+        }
+  }
   const [showbx, setShowdbx] = useState(0)
   const [showsy, setShowdsy] = useState(0)
   const [showsl, setShowdsl] = useState(0)
   const [showby, setShowdby] = useState(0)
-  useEffect(() => {
+  // useEffect(() => {
-    const map = window.__mapref;
+  //   const map = window.__mapref;
-    if (map) {
+  //   if (map) {
-      if (tab === '1' && data1 && showbx) {
+  //     if (tab === '1' && data1 && showbx) {
-        setLayer(data1, '变形')
+  //       setLayer(data1, '变形')
-      }
+  //     }
-      if (tab === '2' && data2 && showsy) {
+  //     if (tab === '2' && data2 && showsy) {
 
-        setLayer(data2, '渗压')
+  //       setLayer(data2, '渗压')
-      }
+  //     }
-      if (tab === '3' && data3 && showsl) {
+  //     if (tab === '3' && data3 && showsl) {
-        setLayer(data3, '渗流')
+  //       setLayer(data3, '渗流')
-      }
+  //     }
-      if (tab === '4' && data4 && showby) {
+  //     if (tab === '4' && data4 && showby) {
-        setLayer(data4, '白蚁')
+  //       setLayer(data4, '白蚁')
-      }
+  //     }
-    }
+  //   }
-    else {
+  //   else {
-      const dsq = setInterval(() => {
+  //     const dsq = setInterval(() => {
-        const map = window.__mapref;
+  //       const map = window.__mapref;
-        if (map && skdata.length > 0) {
+  //       if (map && skdata.length > 0) {
-          clearInterval(dsq)
+  //         clearInterval(dsq)
-          setLayer(skdata, 'sk')
+  //         setLayer(skdata, 'sk')
-        }
+  //       }
-      }, 500);
+  //     }, 500);
-    }
+  //   }
 
-  }, [data1, data2, data3, data4, tab, showbx, showsy, showsl, showby])
+  // }, [data1, data2, data3, data4, tab, showbx, showsy, showsl, showby])
 
   const setLayer = (data = [], type) => {
     const map = window.__mapref;
@@ -1229,8 +1237,10 @@ function DrpReal({ style }) {
                   key={row.stcd}
                   onClick={() => {
                     const { lgtd, lttd, res_nm: stnm } = row;
+                    removePoint()
                     if (stnm == '浮桥河水库') {
-                      setShowdbx(1)
+                      setShowdbx(showbx == 1 ? 0 : 1)
+                       setLayer([row],'变形')
                       if (lgtd && lttd) {
                         dispatch.runtime.setCameraTarget({
                           center: [lgtd, lttd],
@@ -1274,8 +1284,10 @@ function DrpReal({ style }) {
                   key={row.stcd}
                   onClick={() => {
                     const { lgtd, lttd, res_nm: stnm } = row;
+                    removePoint()
                     if (stnm == '浮桥河水库') {
-                      setShowdsy(1)
+                      setShowdsy(showsy == 1 ? 0 : 1)
+                       setLayer([row],'渗压')
                       if (lgtd && lttd) {
                         dispatch.runtime.setCameraTarget({
                           center: [lgtd, lttd],
@@ -1315,7 +1327,9 @@ function DrpReal({ style }) {
                   key={row.stcd}
                   onClick={() => {
                     const { lgtd, lttd } = row;
-                    setShowdsl(1)
+                    removePoint()
+                    setShowdsl(showsl == 1 ? 0 : 1)
+                       setLayer([row],'渗流')
                     if (row.cd == 1) {
                       if (lgtd && lttd) {
                         dispatch.runtime.setCameraTarget({
@@ -1356,8 +1370,12 @@ function DrpReal({ style }) {
                 <DpTableRow
                   key={row.stcd}
                   onClick={() => {
+                    removePoint()
+
                     const { lgtd, lttd } = row;
-                    setShowdby(1)
+                    setShowdby(showby == 1 ? 0 : 1)
+                       setLayer([row],'白蚁')
+
                     if (row.cd == '0AB3ED') {
                       if (lgtd && lttd) {
                         dispatch.runtime.setCameraTarget({

src/views/Home/panels/DrpSta/index.js

@@ -447,6 +447,29 @@ export default function Overall({ style }) {
               10, 10,
               14, 16,
             ],
+             'text-max-width': 30,
+          'text-font': ['Roboto Black'],
+          'text-field': [
+            'step',
+            ['zoom'],
+            [
+              'case',
+              ['!=', ['get', 'state'], 1], '',
+              ['concat', ['get', 'rz'], 'm']
+            ],
+            12, [
+              'case',
+              ['!=', ['get', 'state'], 1], ['get', 'stnm'],
+              [
+                'format',
+                ['get', 'stnm'], { 'font-scale': 0.8, 'text-color': '#fff' },
+                '\n', {},
+                ['concat', ['get', 'rz'], 'm'], {}
+              ]
+            ],
+          ],
+          'text-anchor': 'top',
+          'text-offset': [0, 1],
           },
           'paint': {
             'text-color': [

src/views/Home/panels/Drpfx/index.js

@@ -262,8 +262,8 @@ export default function Overall({ style }) {
                               <TableRow onClick={() =>flyTo(item)}>
                                 <DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
                                 <DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>
-                                <DpTableCell style={{ width: '20%' }}>阎家河镇</DpTableCell>
+                                <DpTableCell style={{ width: '20%' }}>福田河镇</DpTableCell>
-                                <DpTableCell style={{ width: '27%' }}>桃林河</DpTableCell>
+                                <DpTableCell style={{ width: '27%' }}>长江流域</DpTableCell>
                               </TableRow>
                             ))
                           }

src/views/Home/panels/FzjcLayers/index.js

@@ -169,13 +169,7 @@ function FzjcLayers({ style }) {
     }
     const [type, setType] = useState('sh')
     const toggleStType = (type) => {
-    // if (type == 'sz') {
+     dispatch.runtime.setYuananType(type)
-    //   dispatch.map.setLayerVisible({'ShuiZhaLayer':true})
-    //   dispatch.map.setLayerVisible({'BzLayer':false})
-    // } else {
-    //   dispatch.map.setLayerVisible({'ShuiZhaLayer':false})
-    //   dispatch.map.setLayerVisible({'BzLayer':true})
-    // }
      setType(type)
     
   }

src/views/Home/panels/Glzd/index.js

@@ -892,35 +892,36 @@ function DrpReal({ style }) {
 
   const [showDrp, setShowdDrp] = useState(0)
   const [showHd, setShowdHd] = useState(0)
-  useEffect(() => {
+  // useEffect(() => {
-    const map = window.__mapref;
+  //   const map = window.__mapref;
-    if (map) {
+  //   if (map) {
-      if (tab === '1' && drpData && showDrp) {
+  //     debugger
-        setLayer(drpData, 'drp')
+  //     if (tab === '1' && drpData) {
-      }
+  //       setLayer(drpData, 'drp')
-      if (tab === '2' && hdData && showHd) {
+  //     }
-        setLayer(hdData, 'hd')
+  //     if (tab === '2' && hdData ) {
-      }
+  //       setLayer(hdData, 'hd')
-      if (tab === '3' && data3) {
+  //     }
-        setLayer(data3, 'll')
+  //     if (tab === '3' && data3) {
-      }
+  //       setLayer(data3, 'll')
-      if (tab === '4' && data4) {
+  //     }
-        setLayer(data4, 'tx')
+  //     if (tab === '4' && data4) {
-      }
+  //       setLayer(data4, 'tx')
-      if (tab === '5' && data5) {
+  //     }
-        setLayer(data5, 'sk')
+  //     if (tab === '5' && data5) {
-      }
+  //       setLayer(data5, 'sk')
-    } else {
+  //     }
-      const dsq = setInterval(() => {
+  //   } else {
-        const map = window.__mapref;
+  //     const dsq = setInterval(() => {
-        if (map && drpData.length > 0) {
+  //       const map = window.__mapref;
-          clearInterval(dsq)
+  //       if (map && drpData.length > 0) {
-          setLayer(drpData, 'drp')
+  //         clearInterval(dsq)
-        }
+  //         setLayer(drpData, 'drp')
-      }, 500);
+  //       }
-    }
+  //     }, 500);
+  //   }
 
-  }, [drpData, hdData, skObj, tab, showDrp, showHd])
+  // }, [drpData, hdData, skObj, showDrp, showHd])
 
 
 
@@ -991,6 +992,7 @@ function DrpReal({ style }) {
             'features': [],
           },
         },
+ 
         'paint': {
           'circle-color': [
             'case',
@@ -1064,6 +1066,29 @@ function DrpReal({ style }) {
             10, 10,
             14, 16,
           ],
+           'text-max-width': 30,
+          'text-font': ['Roboto Black'],
+          'text-field': [
+            'step',
+            ['zoom'],
+            [
+              'case',
+              ['!=', ['get', 'state'], 1], '',
+              ['concat', ['get', 'rz'], 'm']
+            ],
+            12, [
+              'case',
+              ['!=', ['get', 'state'], 1], ['get', 'stnm'],
+              [
+                'format',
+                ['get', 'stnm'], { 'font-scale': 0.8, 'text-color': '#fff' },
+                '\n', {},
+                ['concat', ['get', 'rz'], 'm'], {}
+              ]
+            ],
+          ],
+          'text-anchor': 'top',
+          'text-offset': [0, 1],
         },
         'paint': {
           'text-color': [
@@ -1079,6 +1104,7 @@ function DrpReal({ style }) {
         },
         'visibility': 'visible',
       });
+      
     }
     if (type === 'll') {
       map.addLayer({
@@ -1223,7 +1249,15 @@ function DrpReal({ style }) {
     setShowdDrp(0)
 
   }, [tab])
-
+  const removePoint = () => {
+    dispatch?.runtime.setFeaturePop({})
+    const map = window.__mapref;
+    const layer = map.getLayer('关联站点')
+    // if (layer) {
+    //   map.removeLayer('关联站点');
+    //   map.removeSource('关联站点');
+    // }
+  }
 
   return (
     <PanelBox
@@ -1270,8 +1304,10 @@ function DrpReal({ style }) {
                     key={row.stcd}
                     onClick={() => {
                       const { lgtd, lttd } = row;
+                      removePoint()
                       if (row.stnm == '浮桥河') {
-                        setShowdDrp(1)
+                        setShowdDrp(showDrp == 1 ? 0 : 1)
+                        setLayer([row],'drp')
                         if (lgtd && lttd) {
                           dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] });
                           dispatch.runtime.setCameraTarget({
@@ -1313,7 +1349,8 @@ function DrpReal({ style }) {
                       <div className="table-ellipsis cursor-pointer" onClick={() => {
                         const { lgtd, lttd } = row;
                         if (row.stnm == '浮桥河') {
-                          setShowdHd(1)
+                          setShowdHd(showHd == 1 ? 0: 1)
+                          setLayer([row],'hd')
                           if (lgtd && lttd) {
                             dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] });
                             dispatch.runtime.setCameraTarget({

src/views/Home/panels/HDReal/index.js

@@ -103,6 +103,29 @@ function HDReal({ style }) {
             10, 10,
             14, 16,
           ],
+          'text-max-width': 30,
+          'text-font': ['Roboto Black'],
+          'text-field': [
+            'step',
+            ['zoom'],
+            [
+              'case',
+              ['!=', ['get', 'state'], 1], '',
+              ['concat', ['get', 'rz'], 'm']
+            ],
+            12, [
+              'case',
+              ['!=', ['get', 'state'], 1], ['get', 'stnm'],
+              [
+                'format',
+                ['get', 'stnm'], { 'font-scale': 0.8, 'text-color': '#fff' },
+                '\n', {},
+                ['concat', ['get', 'rz'], 'm'], {}
+              ]
+            ],
+          ],
+          'text-anchor': 'top',
+          'text-offset': [0, 1],
         },
         'paint': {
           'text-color': [

src/views/Home/panels/RainSta/index.js

@@ -248,8 +248,8 @@ export default function Overall({ style }) {
                            station.id == 'storm' && drpData.map(item => (
                               <TableRow onClick={() =>flyTo(item)}>
                                 <DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
-                                <DpTableCell style={{ width: timeRange == '1h' ?'27%':"30%" }}>{item.today}</DpTableCell>
+                                <DpTableCell style={{ width: timeRange == '1h' ?'27%':"28%" }}>{item.today}</DpTableCell>
-                               <DpTableCell style={{ width: timeRange == '1h' ?'20%':'17%' }}>{timeRange == '1h' ? '福田河镇':'福田河'}</DpTableCell>
+                               <DpTableCell style={{ width: timeRange == '1h' ?'20%':'19%' }}>{timeRange == '1h' ? '福田河镇':'长江流域'}</DpTableCell>
                               </TableRow>
                             ))
                           }

src/views/Home/panels/Shksh/index.js

@@ -199,7 +199,7 @@ const useStyles = makeStyles({
   return (
     <PanelBox
       style={style}
-      title="山洪可视化"
+      title="山洪可视化预案"
       color="green"
     >
       <div style={{padding:'10px 8px'}}>

src/views/Home/panels/SigelYuanan/index.js

@@ -0,0 +1,48 @@
+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 { DrpRealPromise } from '../../../../models/_/real';
+import useRefresh from '../../../../utils/useRefresh';
+import clsx from 'clsx';
+import { renderDrp } from '../../../../utils/renutils';
+import { TableSortLabel } from '@material-ui/core';
+import { InfoPopNames } from '../../InfoPops';
+// import AreaDrpChart from './chart';
+import config from '../../../../config';
+import TablePage from './table.js'
+
+function DrpReal({ style }) {
+  const dispatch = useDispatch();
+  const [ tab, setTab ] = useState('1')
+  const [ tab2, setTab2 ] = useState('1')
+
+
+
+  const flyTo = (row) => {
+    dispatch?.runtime.setInfoDlg({ layerId: 'PdfLayer', properties: row })
+  }
+
+
+  return (
+    <PanelBox
+      style={style}
+      title="预案"
+      color="green"
+    >
+      <div style={{ color: "#fff",display:'flex',padding:'10px',cursor:'pointer' }} onClick={() => flyTo({planName:'潭家河村山洪灾害防御预案'})}>
+        <span>潭家河村山洪灾害防御预案</span>
+      </div>
+    </PanelBox>
+  )
+}
+
+export default DrpReal;

src/views/Home/panels/SigelYuanan/table.js

@@ -0,0 +1,91 @@
+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 appconsts from '../../../../models/appconsts';
+import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
+
+
+const data = [
+  { name:'雨量站', name2:'10', name3:'8', name4:'2', name5:'80' },
+  { name:'水位站', name2:'15', name3:'15', name4:'0', name5:'100' },
+  { name:'图像站', name2:'10', name3:'10', name4:'0', name5:'100' },
+  { name:'合计', name2:'35', name3:'33', name4:'2', name5:'94.29' },
+]
+
+const data2 = [
+  { name:'合计', name2:'64', name3:'64', name4:'0', name5:'100' },
+]
+
+const data3 = [
+  { name:'合计', name2:'12', name3:'12', name4:'0', name5:'100' },
+]
+
+function Page({ tab }) {
+
+  return (
+    <TableContainer style={{ height: '12rem' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ minWidth: '2rem' }} align="left"></DpTableCell>
+              <DpTableCell style={{ minWidth: '3rem' }} align="center">总数</DpTableCell>
+              <DpTableCell style={{ minWidth: '5rem' }} align="center">在线数量</DpTableCell>
+              <DpTableCell style={{ minWidth: '5rem' }} align="center">离线数量</DpTableCell>
+              <DpTableCell style={{ minWidth: '5rem' }} align="center">到报率（%）</DpTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {
+              tab==='1'?data.map((row) => (
+                <DpTableRow key={row.name}>
+                  <DpTableCell component="th" scope="row">
+                    <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
+                  </DpTableCell>
+                  <DpTableCell align="center">{row.name2}</DpTableCell>
+                  <DpTableCell align="center">{row.name3}</DpTableCell>
+                  <DpTableCell align="center">{row.name4}</DpTableCell>
+                  <DpTableCell align="center">{row.name5}</DpTableCell>
+                </DpTableRow>
+              )):null
+            }
+            {
+              tab==='2'?data2.map((row) => (
+                <DpTableRow key={row.name}>
+                  <DpTableCell component="th" scope="row">
+                    <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
+                  </DpTableCell>
+                  <DpTableCell align="center">{row.name2}</DpTableCell>
+                  <DpTableCell align="center">{row.name3}</DpTableCell>
+                  <DpTableCell align="center">{row.name4}</DpTableCell>
+                  <DpTableCell align="center">{row.name5}</DpTableCell>
+                </DpTableRow>
+              )):null
+            }
+            {
+              tab==='3'?data3.map((row) => (
+                <DpTableRow key={row.name}>
+                  <DpTableCell component="th" scope="row">
+                    <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
+                  </DpTableCell>
+                  <DpTableCell align="center">{row.name2}</DpTableCell>
+                  <DpTableCell align="center">{row.name3}</DpTableCell>
+                  <DpTableCell align="center">{row.name4}</DpTableCell>
+                  <DpTableCell align="center">{row.name5}</DpTableCell>
+                </DpTableRow>
+              )):null
+            }
+          </TableBody>
+        </Table>
+    </TableContainer>
+  )
+}
+
+export default React.memo(Page);