Merge pull request #3 from ziqiya/master

feat: 新增大屏自适应缩放 hook

src/hooks/useScreenScale.ts

@@ -0,0 +1,70 @@
+/*
+ * @文件描述: 大屏缩放自适应屏幕 hook
+ * @公司: thundersdata
+ * @作者: 阮旭松
+ * @Date: 2023-11-07 11:00:14
+ * @LastEditors: 阮旭松
+ * @LastEditTime: 2024-12-24 17:53:33
+ */
+import { useEffect, useRef, useState } from 'react';
+
+// 初始缩放比例
+const INITIAL_SCALE = 1;
+
+export function useScreenScale(screenWidth: number, screenHeight: number) {
+  const [scale, setScale] = useState<number>(INITIAL_SCALE);
+  const [isReady, setIsReady] = useState(false);
+  const screenDomRef = useRef<HTMLDivElement | null>(null);
+
+  /** 对 echarts 图表进行反缩放，修复 zoom 以后 tooltip 偏移问题 */
+  useEffect(() => {
+    const canvasDoms = document.getElementsByTagName('canvas');
+    Array.from(canvasDoms).forEach((item: any) => {
+      if (!item || item.id) return;
+      item.style.zoom = `calc(1/${scale})`;
+      item.style.transformOrigin = 'left top';
+      item.style.transform = `scale(${scale})`;
+    });
+  }, [scale]);
+
+  /** 对 dom 进行缩放 */
+  const handelDomScale = (dom: HTMLElement | null, scale: number) => {
+    if (!dom) return;
+    dom.style.transform = 'translate(-50%)';
+    dom.style.zoom = `${scale}`;
+  };
+
+  /** 设置缩放比例 */
+  const setScreenScale = () => {
+    const newScale =
+      document.documentElement.clientWidth / document.documentElement.clientHeight < screenWidth / screenHeight
+        ? document.documentElement.clientWidth / screenWidth
+        : document.documentElement.clientHeight / screenHeight;
+    setScale(newScale);
+    if (screenDomRef.current) {
+      handelDomScale(screenDomRef.current, newScale);
+    }
+  };
+
+  /** 设置缩放比例 */
+  useEffect(() => {
+    setScreenScale(); // 初始化时调用一次
+
+    // 监听屏幕宽度改变事件
+    const resizeObserver = new ResizeObserver(setScreenScale);
+    resizeObserver.observe(document.documentElement); // 观察 documentElement 的尺寸变化
+
+    return () => {
+      resizeObserver.disconnect(); // 清理 ResizeObserver
+    };
+  }, [screenWidth, screenHeight]);
+
+  useEffect(() => {
+    if (scale) {
+      // 当 scale 计算完成后再渲染 Outlet
+      setIsReady(true);
+    }
+  }, [scale]);
+
+  return { isReady, scale, screenDomRef };
+}

src/layouts/BasicLayout/index.module.less

@@ -2,6 +2,15 @@
   height: 100vh;
   width: 100vw;
   position: relative;
+  overflow: hidden;
+  background-color: rgb(7, 8, 20);
+
+  .screen {
+    transform-origin: 0 0;
+    position: fixed;
+    left: 50%;
+    background: transparent;
+  }
 }
 
 .background {

src/layouts/BasicLayout/index.tsx

@@ -1,12 +1,18 @@
 import { Outlet } from '@umijs/max';
 
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '@/constant';
+import { useScreenScale } from '@/hooks/useScreenScale';
+
 import styles from './index.module.less';
 
 export default function BasicLayout() {
+  const { isReady, screenDomRef } = useScreenScale(SCREEN_WIDTH, SCREEN_HEIGHT);
   return (
     <div className={styles.screenWrapper}>
-      <div className={styles.background} />
-      <Outlet />
+      <div className={styles.screen} ref={screenDomRef} style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT }}>
+        <div className={styles.background} />
+        {isReady && <Outlet />}
+      </div>
     </div>
   );
 }

src/pages/homepage/components/Center/Center2/index.module.less

@@ -1,3 +1,4 @@
 .container {
   height: 100%;
+  margin-top: 100px;
 }

src/pages/homepage/components/Left/Left1/index.tsx

@@ -1,18 +1,13 @@
-import { useContext } from 'react';
-
 import { BarLine } from '@td-design/lego';
 
-import { ScreenContext } from '@/context';
-
 export default () => {
-  const echartsHeight = useContext(ScreenContext);
   return (
     <BarLine
       xAxisData={['03月', '04月']}
       yAxis={[{ name: '万元' }, { name: '%' }]}
       lineData={{ name: '同比增长率', data: [12, 11] }}
       barData={{ name: '运费', data: [500, 584] }}
-      style={{ width: '100%', height: echartsHeight }}
+      style={{ width: '100%', height: 300 }}
     />
   );
 };

src/pages/homepage/components/Left/Left2/index.tsx

@@ -1,14 +1,9 @@
-import { useContext } from 'react';
-
 import { BarLine } from '@td-design/lego';
 
-import { ScreenContext } from '@/context';
-
 export default () => {
-  const echartsHeight = useContext(ScreenContext);
   return (
     <BarLine
-      style={{ width: '100%', height: echartsHeight }}
+      style={{ width: '100%', height: 300 }}
       xAxisData={['03月', '04月', '05月', '06月', '07月', '08月']}
       yAxis={[{ name: '万元' }, { name: '%' }]}
       lineData={{ name: '同比增长率', data: [12, 11, 19, 23, 32, 45] }}

src/pages/homepage/components/Left/Left3/index.tsx

@@ -1,15 +1,9 @@
-import { useContext } from 'react';
-
 import { BarLine } from '@td-design/lego';
 
-import { ScreenContext } from '@/context';
-
 export default () => {
-  const echartsHeight = useContext(ScreenContext);
-
   return (
     <BarLine
-      style={{ width: '100%', height: echartsHeight }}
+      style={{ width: '100%', height: 300 }}
       xAxisData={['03月', '04月', '05月', '06月', '07月', '08月']}
       yAxis={[{ name: '万辆' }, { name: '%' }]}
       lineData={{ name: '同比增长率', data: [12, 11, 19, 23, 32, 45] }}

src/pages/homepage/components/Right/Right1/index.tsx

@@ -1,19 +1,13 @@
-import { useContext } from 'react';
-
 import { BarLine } from '@td-design/lego';
 
-import { ScreenContext } from '@/context';
-
 export default () => {
-  const echartsHeight = useContext(ScreenContext);
-
   return (
     <BarLine
       xAxisData={['03月', '04月']}
       yAxis={[{ name: '万元' }, { name: '%' }]}
       lineData={{ name: '同比增长率', data: [12, 11] }}
       barData={{ name: '运费', data: [500, 584] }}
-      style={{ width: '100%', height: echartsHeight }}
+      style={{ width: '100%', height: 300 }}
     />
   );
 };

src/pages/homepage/components/Right/Right2/index.tsx

@@ -1,15 +1,9 @@
-import { useContext } from 'react';
-
 import { BarLine } from '@td-design/lego';
 
-import { ScreenContext } from '@/context';
-
 export default () => {
-  const echartsHeight = useContext(ScreenContext);
-
   return (
     <BarLine
-      style={{ width: '100%', height: echartsHeight }}
+      style={{ width: '100%', height: 300 }}
       xAxisData={['03月', '04月', '05月', '06月', '07月', '08月']}
       yAxis={[{ name: '万元' }, { name: '%' }]}
       lineData={{ name: '同比增长率', data: [12, 11, 19, 23, 32, 45] }}

src/pages/homepage/components/Right/Right3/index.tsx

@@ -1,15 +1,9 @@
-import { useContext } from 'react';
-
 import { BarLine } from '@td-design/lego';
 
-import { ScreenContext } from '@/context';
-
 export default () => {
-  const echartsHeight = useContext(ScreenContext);
-
   return (
     <BarLine
-      style={{ width: '100%', height: echartsHeight }}
+      style={{ width: '100%', height: 300 }}
       xAxisData={['03月', '04月', '05月', '06月', '07月', '08月']}
       yAxis={[{ name: '万辆' }, { name: '%' }]}
       lineData={{ name: '同比增长率', data: [12, 11, 19, 23, 32, 45] }}

src/pages/homepage/index.tsx

@@ -1,7 +1,5 @@
 import CustomLayout from '@/components/CustomLayout';
 import Title from '@/components/Title';
-import { ScreenContext } from '@/context';
-import useCalcHeight from '@/hooks/useCalcHeight';
 
 import Center1 from './components/Center/Center1';
 import Center2 from './components/Center/Center2';
@@ -13,15 +11,13 @@ import Right2 from './components/Right/Right2';
 import Right3 from './components/Right/Right3';
 
 export default () => {
-  const { parentRef, headerRef, contentRef, echartsHeight, observe } = useCalcHeight();
-
   return (
-    <ScreenContext.Provider value={echartsHeight}>
-      <CustomLayout ref={parentRef}>
-        <CustomLayout.Header ref={headerRef} bgUrl={require('../../assets/header-bg.png')} onLoad={observe}>
+    <>
+      <CustomLayout>
+        <CustomLayout.Header bgUrl={require('../../assets/header-bg.png')}>
           <Title>雷数数据可视化大屏</Title>
         </CustomLayout.Header>
-        <CustomLayout.Content ref={contentRef}>
+        <CustomLayout.Content>
           <CustomLayout.Left>
             <CustomLayout.Item>
               <Left1 />
@@ -50,6 +46,6 @@ export default () => {
           </CustomLayout.Right>
         </CustomLayout.Content>
       </CustomLayout>
-    </ScreenContext.Provider>
+    </>
   );
 };