nanyang
/
machinery-admin
关注 2
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

feats

张延森 3 年前
父节点
d22a238031
当前提交
ac6578e8ff
共有 6 个文件被更改，包括 109 次插入 和 39 次删除
分列视图 显示文件统计
  1. 6
    0
      public/css/hyzlsJ-embed.css
  2. 43
    0
      src/pages/MonitoringScreen/hook.js
  3. 20
    39
      src/pages/MonitoringScreen/index.jsx
  4. 22
    0
      src/pages/MonitoringScreen/style.less
  5. 1
    0
      src/pages/document.ejs
  6. 17
    0
      src/utils/hooks/useResize.js

+ 6
- 0
public/css/hyzlsJ-embed.css
文件差异内容过多而无法显示
查看文件


+ 43
- 0
src/pages/MonitoringScreen/hook.js 查看文件 

@@ -0,0 +1,43 @@
1 
+import React, { useCallback, useEffect, useRef, useState } from 'react';
2 
+import useResize from '@/utils/hooks/useResize';
3 
+
4 
+export function useFullScreen() {
5 
+  const [style, setStyle] = useState({});
6 
+  const [isFullScreen, setIsFullScreen] = useState(false);
7 
+  const fullScreenRef = useRef();
8 
+  fullScreenRef.current = isFullScreen;
9 
+
10 
+  const calcStyle = useCallback(() => {
11 
+    const container = document.querySelector('main.ant-layout-content');
12 
+    const header = container.querySelector('.ant-pro-page-container-warp');
13 
+    const height = container.offsetHeight - header.offsetHeight;
14 
+
15 
+    setStyle({
16 
+      width: '100%',
17 
+      height: `${height}px`,
18 
+    });
19 
+  }, []);
20 
+
21 
+  const onFullScreen = useCallback((e) => {
22 
+    document.documentElement.requestFullscreen();
23 
+  }, []);
24 
+
25 
+  useResize((w, h) => {
26 
+    if (fullScreenRef.current) {
27 
+      calcStyle();
28 
+    } else {
29 
+      setStyle({
30 
+        width: `${w}px`,
31 
+        height: `${h}px`,
32 
+      });
33 
+    }
34 
+
35 
+    setIsFullScreen(!fullScreenRef.current);
36 
+  });
37 
+
38 
+  useEffect(() => {
39 
+    calcStyle();
40 
+  }, []);
41 
+
42 
+  return { style, isFullScreen, onFullScreen };
43 
+}

+ 20
- 39
src/pages/MonitoringScreen/index.jsx 查看文件 

@@ -1,49 +1,30 @@
1 
-import React from 'react';
1 
+import React, { useCallback, useEffect, useRef, useState } from 'react';
2 2 
 import { history, Link } from 'umi';
3 
+import classNames from 'classnames';
3 4 
 // import { getPersonList, exportPersonList } from '@/services/person';
4 5 
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
5 
-import moment from 'moment';
6 
-import PageTable from '@/components/PageTable';
7 
-
8 
-const formatterTime = (val) => {
9 
-  return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
10 
-};
6 
+import { FullscreenOutlined } from '@ant-design/icons';
7 
+import { Button } from 'antd';
8 
+import { useFullScreen } from './hook';
9 
+import Styles from './style.less';
11 10
12 11 
 export default (props) => {
13 
-  const columns = [
14 
-    {
15 
-      title: '农机名',
16 
-      dataIndex: 'machineryName',
17 
-      key: 'machineryName',
18 
-    },
19 
-    {
20 
-      title: '农机型号',
21 
-      dataIndex: 'type',
22 
-      key: 'type',
23 
-    },
24 
-    {
25 
-      title: '操作',
26 
-      valueType: 'option',
27 
-      width: '300px',
28 
-      render: (_, record) => [
29 
-        <Link key={2} to={`./detail.jsx`}>
30 
-          查看轨迹
31 
-        </Link>,
32 
-      ],
33 
-    },
34 
-    // 农机列表点击进入详情页 下面是轨迹上面是时间
35 
-  ];
12 
+  const { style, isFullScreen, onFullScreen } = useFullScreen();
36 13
37 14 
   return (
38 
-    <PageHeaderWrapper>
39 
-      <PageTable
40 
-        // request={getPersonList}
41 
-        // expfunc={exportPersonList}
42 
-        columns={columns}
43 
-        rowKey="machineryId"
44 
-        options={false}
45 
-        scroll={{ x: 1000 }}
46 
-      />
15 
+    <PageHeaderWrapper
16 
+      extra={
17 
+        <Button icon={<FullscreenOutlined />} onClick={onFullScreen}>
18 
+          全屏
19 
+        </Button>
20 
+      }
21 
+    >
22 
+      <div
23 
+        className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
24 
+        style={style}
25 
+      >
26 
+        <div className={Styles.demo}>邓州</div>
27 
+      </div>
47 28 
     </PageHeaderWrapper>
48 29 
   );
49 30 
 };

+ 22
- 0
src/pages/MonitoringScreen/style.less 查看文件 

@@ -0,0 +1,22 @@
1 
+.screen-page {
2 
+  position: relative;
3 
+  width: 100%;
4 
+  height: 100%;
5 
+
6 
+  background-color: #021222;
7 
+
8 
+  &.full-screen {
9 
+    position: fixed;
10 
+    top: 0;
11 
+    left: 0;
12 
+    z-index: 1000;
13 
+  }
14 
+}
15 
+
16 
+.demo {
17 
+  font-size: 3em;
18 
+  font-family: 'hyzlsJ';
19 
+  background-image: linear-gradient(#3bd6e8, #0c49c6);
20 
+  background-clip: text;
21 
+  -webkit-text-fill-color: transparent;
22 
+}

+ 1
- 0
src/pages/document.ejs 查看文件 

@@ -23,6 +23,7 @@
23 23 
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
24 24 
     />
25 25 
     <title>Ant Design Pro</title>
26 
+    <link rel="stylesheet" href="./css/hyzlsJ-embed.css" />
26 27 
     <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
27 28 
   </head>
28 29 
   <body>

+ 17
- 0
src/utils/hooks/useResize.js 查看文件 

@@ -0,0 +1,17 @@
1 
+import { useEffect, useRef } from 'react';
2 
+
3 
+export default (fn) => {
4 
+  const fnRef = useRef();
5 
+  fnRef.current = fn;
6 
+
7 
+  useEffect(() => {
8 
+    const resize = () => {
9 
+      const { clientWidth, clientHeight } = document.documentElement;
10 
+      fnRef.current(clientWidth, clientHeight);
11 
+    };
12 
+
13 
+    window.addEventListener('resize', resize);
14 
+
15 
+    return () => window.removeEventListener('resize', resize);
16 
+  }, []);
17 
+};