perf：优化大屏

2022-06-07 10:09:40 +08:00
parent 02b0262560
commit 5216d61a54
104 changed files with 905 additions and 3298 deletions
--- a/src/layouts/HeadLayout.js
+++ b/src/layouts/HeadLayout.js
@@ -0,0 +1,91 @@
+import React, {useEffect, useState} from "react";
+import less from "./HeadLayout.less";
+import Flex from "../components/Flex";
+import AppHelper from "@/utils/AppHelper";
+
+const designWidth = 1280, designHeight = 720;
+
+/**
+ * 获取头部高度
+ * @returns {number}
+ */
+export const getHeaderHeight = () => {
+  return 60;
+};
+
+export default ({children, location}) => {
+  const [screen, setScreen] = useState({width: designWidth, height: designHeight});
+  const [scale, setScale] = useState(1);
+  const [boxList, setBoxList] = useState([]);
+
+  useEffect(() => {
+    getList();
+    windowScale()
+  }, []);
+
+  ///////////////////////////////////////// 逻辑方法
+
+  const getList = () => {
+    let tmpBoxList = [
+      {id: "/home", name: "首页"},
+      {id: "/vehicle", name: "智慧交通"},
+    ]
+    setBoxList(tmpBoxList);
+  };
+
+  /**
+   * 屏幕比例适配
+   */
+  const windowScale = () => {
+    let tmpWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    let tmpHeight = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
+
+    let ratio = tmpWidth / designWidth;
+    if (tmpWidth > tmpHeight) {
+      setScreen({width: tmpWidth / ratio, height: tmpHeight / ratio});
+    } else {
+      setScreen({width: designWidth, height: designHeight});
+    }
+    setScale(ratio);
+  };
+
+  window.onresize = windowScale;
+
+  ///////////////////////////////////////// 页面渲染
+
+  return (
+    <Flex className={less.body} direction={"column"}>
+      <Flex
+        className={less.container} direction={"column"} id={"headerContainer"}
+        style={{
+          width: screen.width, height: screen.height,
+          transform: "scale(" + scale + ")",
+        }}
+      >
+        <Flex className={less.header}>
+          <img src={"./imgs/title.png"} className={less.logo}/>
+
+          <Flex className={less.module} alignItems={"center"}>
+            {boxList.map((it) => {
+              return (
+                <Flex
+                  key={it.id} className={less.box}
+                  justify={"center"} alignItems={"center"}
+                  style={{
+                    backgroundImage: it.id == location.pathname ? "url(./imgs/module_active.png)" : "url(./imgs/module_normal.png)",
+                  }}
+                  onClick={() => AppHelper.routerPush(it.id)}
+                >
+                  {it.name}
+                </Flex>
+              );
+            })}
+          </Flex>
+        </Flex>
+
+        <Flex itemGrow={1} className={less.content} direction={"column"}>{children}</Flex>
+
+      </Flex>
+    </Flex>
+  );
+};