feat: 大屏可视化

src/components/stateless/FixTabPanel/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
-const FixTabPanel = ({ children }) => <div style={{ width: '100%', minHeight: 'calc(100vh - 232px)' }}>{children}</div>
+const FixTabPanel = ({ style, children }) => (
+  <div style={{ width: '100%', minHeight: 'calc(100vh - 232px)', ...style }}>{children}</div>
+)
 
 export default FixTabPanel

src/pages/bigScreen/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-// import FixTabPanel from '@stateless/FixTabPanel'
+import FixTabPanel from '@stateless/FixTabPanel'
 import { previewFitScale } from '@utils/previewScale'
 import EChartsCommon from '@stateless/EChartsCommon'
 import { mapOptions } from './options'
@@ -93,26 +93,26 @@ const BigScreen = () => {
   })
 
   useEffect(() => {
-    const { calcRate, windowResize, unWindowResize } = previewFitScale(1200, 580, scaleDom.current)
+    const { calcRate, windowResize, unWindowResize } = previewFitScale(1440, 900, scaleDom.current)
     calcRate()
     windowResize()
     return () => {
       unWindowResize()
     }
   }, [])
   return (
-    // <FixTabPanel>
-    <section ref={scaleDom} className={styles.bigScreen}>
-      <div
-        style={{
-          width: '760px',
-          height: '400px',
-        }}
-      >
-        <EChartsCommon option={mapOptions(mapData)} />
-      </div>
-    </section>
-    // </FixTabPanel>
+    <FixTabPanel style={{ background: '#04060D' }}>
+      <section ref={scaleDom} className={styles.bigScreen} style={{ background: '#04060D' }}>
+        <div
+          style={{
+            width: '760px',
+            height: '400px',
+          }}
+        >
+          <EChartsCommon option={mapOptions(mapData)} />
+        </div>
+      </section>
+    </FixTabPanel>
   )
 }
 

src/pages/dashboard/index.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 import { Button, Layout, theme, Space } from 'antd'
 import FixLayout from '@src/components/stateless/FixLayout'
+// import BigScreen from '@pages/bigScreen'
 
 const { Content } = Layout
 
@@ -32,6 +33,7 @@ const Dashboard = () => {
                       navigate to invoices
                     </Button>
                   </Space>
+                  {/* <BigScreen /> */}
                 </>
               }
             />