From 1ae40b96bea7c80b4fc4098e7440ba1fe73e5334 Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Wed, 14 Aug 2024 11:16:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=80=8D=E7=8E=87=E7=BC=A9?= =?UTF-8?q?=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/FullScreen.js | 941 +++++++++++++++++++++------------------ 1 file changed, 500 insertions(+), 441 deletions(-) diff --git a/src/layout/FullScreen.js b/src/layout/FullScreen.js index e48e392..5d53bd8 100644 --- a/src/layout/FullScreen.js +++ b/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) => { ); }; +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 = () => { @@ -310,9 +329,9 @@ class FullScreen extends React.Component { hours = myDate.getHours(); //获取当前小时 } if (myDate.getMinutes() < 10) { - var minutes = "0" + myDate.getMinutes(); + var minutes = "0" + myDate.getMinutes(); } else { - minutes = myDate.getMinutes(); //获取当前分钟 + minutes = myDate.getMinutes(); //获取当前分钟 } if (myDate.getSeconds() < 10) { var seconds = "0" + myDate.getSeconds(); @@ -923,333 +942,365 @@ class FullScreen extends React.Component { }; render() { + const width = 1920, + height = 1080; + // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改 + const { scale } = this.state; return ( -
-
-
- - -
+
+
+
+ + - logo
-

- 安全方针：安全第一、综合治理、控制风险、科学发展 -                    - 安全理念：一切风险皆可控，一切事故皆可防！ -

-
-
- - -
- 宁化行洛坑安全生产标准化运营平台 -
- - -
- {this.state.nowDate} -
- - -
-
- - -
- {/* */} -
-
-
风险等级基本信息
-
- -
- {/* */} -
- -
-
- {/* */} -
-
-
隐患检查基本信息
-
-
+ logo
+

+ 安全方针：安全第一、综合治理、控制风险、科学发展 +                    + 安全理念：一切风险皆可控，一切事故皆可防！ +

+
+
+ + +
+ 宁化行洛坑安全生产标准化运营平台 +
+ + +
+ {this.state.nowDate} +
+ + +
+
+ + +
+ {/* */} +
+
+
+ 风险等级基本信息 +
+
+ +
- {this.state.checkData.map((item, index) => { - return ( -
- -
-
-
- {item.name} -
- -
- /次 -
-
-
- {item.value} -
-
- -
- ); - })} -
-
- -
+ >
+ {/* */}
- {/* */} -
- - -
- {this.state.screenWidh ? ( -
-
- {/*
矿山
*/} -
-
标准化得分
-
83
-
-
-
-
-
标准化得分
-
88
-
-
-
-
-
标准化得分
-
93
-
+ +
+
+ {/* */} +
+
+
+ 隐患检查基本信息
- ) : ( -
-
-
矿山
-
标准化得分
-
83
-
-
-
选矿
-
标准化得分
-
88
-
-
-
尾矿
-
标准化得分
-
93
-
-
- )} -
-
-
- 1
- {this.state.roaData.map((item, index) => { + {this.state.checkData.map((item, index) => { return ( -
  • -
    -
    - {item.name}:{item.value} +
    + +
    +
    +
    + {item.name} +
    + +
    + /次 +
    +
    +
    + {item.value} +
    -
    -
    • + +
    ); })}
    +
    + +
    + {/* */}
    -
    - - -
    - {/* */} -
    -
    -
    基本会议完成情况
    + + +
    +
    +
    + {/*
    矿山
    */} +
    +
    + 标准化得分 +
    +
    83
    +
    +
    +
    +
    +
    + 标准化得分 +
    +
    88
    +
    +
    +
    +
    +
    + 标准化得分 +
    +
    93
    +
    +
    +
    + {/* {this.state.screenWidh ? ( + + ) : ( +
    +
    +
    矿山
    +
    + 标准化得分 +
    +
    83
    +
    +
    +
    选矿
    +
    + 标准化得分 +
    +
    88
    +
    +
    +
    尾矿
    +
    + 标准化得分 +
    +
    93
    +
    +
    + )} */}
    +
    + 1 +
    +
    + {this.state.roaData.map((item, index) => { + return ( +
  • +
    +
    + {item.name}:{item.value} +
    +
    +
    • + ); + })} +
    +
    +
    +
    + + +
    + {/* */} +
    +
    +
    + 基本会议完成情况 +
    +
    - {/*
    +
    + {/*
    @@ -1257,7 +1308,7 @@ class FullScreen extends React.Component { id="completethree" style={{ width: "100%", height: "100%" }} >
    */} - {/* @@ -1269,208 +1320,216 @@ class FullScreen extends React.Component { config={this.state.WaterLevelPondconfig3} style={{ width: "20%", height: "100%" }} /> */} +
    +
    + + {this.state.meetingData.map((item, index) => ( + +
    +
    +
    +
    + {item.value} +
    +
    + {item.name} +
    +
    +
    +
    + + ))} +     +
    +
    +
    + +
    +
    + {/* */} +
    +
    +
    + 安全任务完成情况 +
    +
    +
    +
    + +
    +
    + {/*     */} +
    + + +
    +
    + + +
    + {/* */} +
    +
    +
    隐患整改数据
    - - {this.state.meetingData.map((item, index) => ( - -
    -
    -
    -
    - {item.value} -
    -
    - {item.name} -
    -
    +
    +
    +
    +
    +
    83
    +
    + 隐患数
    - - ))} - -
    -
    -
    - -
    -
    - {/* */} -
    -
    -
    安全任务完成情况
    -
    -
    -
    - -
    -
    - {/*     */} -
    - - -
    -
    - - -
    - {/* */} -
    -
    -
    隐患整改数据
    -
    -
    -
    -
    -
    -
    -
    83
    -
    - 隐患数 +
    +
    +
    +
    +
    +
    23
    +
    + 延期整改数 +
    +
    +
    +
    +
    +
    +
    +
    56
    +
    + 按期整改数 +
    -
    -
    -
    -
    23
    -
    - 延期整改数 -
    -
    -
    -
    -
    -
    -
    -
    56
    -
    - 按期整改数 -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - 83% -
    -
    - 整改率 +
    +
    +
    +
    +
    + 83% +
    +
    + 整改率 +
    + {/* */}
    - {/* */} -
    - - - {/* */} -
    -
    -
    -
    - 安全生产标准化运行走势图 -
    -
    -
    -
    - {/*     */} - - -
    + + + {/* */}
    -
    班组完成率TOP5
    +
    + 安全生产标准化运行走势图 +
    -
    - +
    +
    + {/* */} + + +
    +
    +
    +
    +
    + 班组完成率TOP5 +
    +
    +
    + +
    -
    - - + + +