全屏倍率缩放

src/layout/FullScreen.js

@@ -9,6 +9,7 @@ import styles from "./full.less";
 import echarts from "echarts";
 import realGif from "../assets/layout/mofang.png";
 import logo from "../assets/layout/header-logo.png";
+import debounce from "lodash.debounce";
 import {
   FullScreenContainer,
   BorderBox8,
@@ -18,6 +19,7 @@ import {
   WaterLevelPond,
 } from "@jiaminghi/data-view-react";
 import { text } from "@jiaminghi/data-view-react/lib/index-cd27b7f6";
+import { Scale } from "canvg";
 
 const stud = (eve) => {
   return (
@@ -39,12 +41,19 @@ const stud = (eve) => {
     </div>
   );
 };
+const getScale = () => {
+  const width = 1920,
+    height = 1080; // 此处可以根据实际设计稿尺寸修改
+  let ww = window.innerWidth / width;
+  let wh = window.innerHeight / height;
+  return ww < wh ? ww : wh;
+};
 
 class FullScreen extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      screenWidh: window.screen.width > 2000 ? true : false,
+      // screenWidh: window.screen.width > 2000 ? true : false,
       nowDate: "",
       checkData: [
         { name: "公司检查", value: 103 },
@@ -234,6 +243,7 @@ class FullScreen extends React.Component {
           value: 132,
         },
       ],
+      scale: getScale(),
     };
     // this.scrollConfig = {
     //   header: ["检查类型", "检查次数", "完成率"],
@@ -251,7 +261,15 @@ class FullScreen extends React.Component {
     // };
   }
 
+  setScale = debounce(() => {
+    // debounce节流
+    // 获取到缩放比，设置它
+    let scale = getScale();
+    this.setState({ scale });
+  }, 500);
+
   componentDidMount() {
+    window.addEventListener("resize", this.setScale); // 得到呈现的屏幕宽高比
     this.riskLevel();
     this.safedanger();
     const eve = () => {
@@ -294,6 +312,7 @@ class FullScreen extends React.Component {
     // });
   }
   componentWillUnmount() {
+    window.removeEventListener("resize", this.setScale);
     clearInterval(this.timer);
   }
   getDate = () => {
@@ -923,9 +942,22 @@ class FullScreen extends React.Component {
   };
 
   render() {
+    const width = 1920,
+      height = 1080;
+    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
+    const { scale } = this.state;
     return (
       <React.Fragment>
         <FullScreenContainer>
+          <div
+            className={styles.box}
+            style={{
+              transform: `scale(${scale}) translate(-50%, -50%)`,
+              WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
+              width,
+              height,
+            }}
+          >
             <div className={styles.blackBack}>
               <div className={styles.backImage}>
                 <div className={styles.header}>
@@ -1009,7 +1041,9 @@ class FullScreen extends React.Component {
                         {/* <BorderBox10> */}
                         <div className={styles.title}>
                           <div className={styles.circle}></div>
-                        <div className={styles.titlename}>风险等级基本信息</div>
+                          <div className={styles.titlename}>
+                            风险等级基本信息
+                          </div>
                         </div>
 
                         <div
@@ -1031,7 +1065,9 @@ class FullScreen extends React.Component {
                         {/* <BorderBox10> */}
                         <div className={styles.title}>
                           <div className={styles.circle}></div>
-                        <div className={styles.titlename}>隐患检查基本信息</div>
+                          <div className={styles.titlename}>
+                            隐患检查基本信息
+                          </div>
                         </div>
                         <div
                           style={{
@@ -1124,47 +1160,60 @@ class FullScreen extends React.Component {
                           width: "100%",
                         }}
                       >
-                      {this.state.screenWidh ? (
                         <div className={styles.scoreBox}>
                             <div className={styles.score}>
                               {/* <div className={styles.scoreLeft}>矿山</div> */}
                               <div className={styles.scoreRight}>
-                              <div className={styles.scoreText}>标准化得分</div>
+                                <div className={styles.scoreText}>
+                                  标准化得分
+                                </div>
                                 <div className={styles.scoreText2}>83</div>
                               </div>
                             </div>
                             <div className={styles.score2}>
                               <div className={styles.scoreRight}>
-                              <div className={styles.scoreText}>标准化得分</div>
+                                <div className={styles.scoreText}>
+                                  标准化得分
+                                </div>
                                 <div className={styles.scoreText2}>88</div>
                               </div>
                             </div>
                             <div className={styles.score3}>
                               <div className={styles.scoreRight}>
-                              <div className={styles.scoreText}>标准化得分</div>
+                                <div className={styles.scoreText}>
+                                  标准化得分
+                                </div>
                                 <div className={styles.scoreText2}>93</div>
                               </div>
                             </div>
                           </div>
+                        {/* {this.state.screenWidh ? (
+                          
                         ) : (
                           <div className={styles.scoreBox1}>
                             <div className={styles.score4}>
                               <div className={styles.scoreLeft}>矿山</div>
-                            <div className={styles.scoreText3}>标准化得分</div>
+                              <div className={styles.scoreText3}>
+                                标准化得分
+                              </div>
                               <div className={styles.scoreText2}>83</div>
                             </div>
                             <div className={styles.score4}>
                               <div className={styles.scoreLeft}>选矿</div>
-                            <div className={styles.scoreText3}>标准化得分</div>
+                              <div className={styles.scoreText3}>
+                                标准化得分
+                              </div>
                               <div className={styles.scoreText2}>88</div>
                             </div>
                             <div className={styles.score4}>
                               <div className={styles.scoreLeft}>尾矿</div>
-                            <div className={styles.scoreText3}>标准化得分</div>
+                              <div className={styles.scoreText3}>
+                                标准化得分
+                              </div>
                               <div className={styles.scoreText2}>93</div>
                             </div>
                           </div>
-                      )}
+                        )} */}
                       </div>
                       <div
                         style={{
@@ -1224,7 +1273,9 @@ class FullScreen extends React.Component {
                         {/* <BorderBox10> */}
                         <div className={styles.title}>
                           <div className={styles.circle}></div>
-                        <div className={styles.titlename}>基本会议完成情况</div>
+                          <div className={styles.titlename}>
+                            基本会议完成情况
+                          </div>
                         </div>
                         <div
                           style={{
@@ -1281,7 +1332,10 @@ class FullScreen extends React.Component {
                               marginBottom: "10px",
                             }}
                           >
-                          <Row gutter={[8, 8]} style={{ padding: "0px 10px" }}>
+                            <Row
+                              gutter={[8, 8]}
+                              style={{ padding: "0px 10px" }}
+                            >
                               {this.state.meetingData.map((item, index) => (
                                 <Col span={6}>
                                   <div className={styles.gradientThree}>
@@ -1308,7 +1362,9 @@ class FullScreen extends React.Component {
                         {/* <BorderBox10> */}
                         <div className={styles.title}>
                           <div className={styles.circle}></div>
-                        <div className={styles.titlename}>安全任务完成情况</div>
+                          <div className={styles.titlename}>
+                            安全任务完成情况
+                          </div>
                         </div>
                         <div
                           style={{
@@ -1459,7 +1515,9 @@ class FullScreen extends React.Component {
                         >
                           <div className={styles.title}>
                             <div className={styles.circle}></div>
-                          <div className={styles.titlename}>班组完成率TOP5</div>
+                            <div className={styles.titlename}>
+                              班组完成率TOP5
+                            </div>
                           </div>
                           <div className={styles.capsuleChart}>
                             <CapsuleChart
@@ -1474,6 +1532,7 @@ class FullScreen extends React.Component {
                 </div>
               </div>
             </div>
+          </div>
         </FullScreenContainer>
       </React.Fragment>
     );