Merge branch 'master' of http://git.ycjcjy.com/nanyang/machinery-admin

package.json

@@ -47,6 +47,7 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@ant-design/charts": "^1.3.5",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-card": "^1.18.34",
     "@ant-design/pro-descriptions": "^1.10.0",

src/components/ScreenBox/SquareBox/index.jsx

@@ -0,0 +1,19 @@
+
+
+import './style.less'
+export default (props) => {
+
+
+  return (
+    <div className="win">
+      <div className="border_corner border_corner_left_top" />
+      <div className="border_corner border_corner_right_top" />
+      <div className="border_corner border_corner_left_bottom" />
+      <div className="border_corner border_corner_right_bottom" />
+      {/* 内容 */}
+      <div className="main">
+        {props.children}
+      </div>
+    </div>
+  )
+}

src/components/ScreenBox/SquareBox/style.less

@@ -0,0 +1,41 @@
+.win {
+  position: relative;
+  display: inline-block;
+  margin: 20px;
+}
+.main {
+  color: #fff;
+  border: 1px solid rgba(61, 129, 240, 0.5);
+  border-radius: 4px;
+}
+.border_corner {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #67ffff;
+  border-radius: 50%;
+}
+.border_corner_left_top {
+  top: 0;
+  left: -2px;
+  border-right: none;
+  border-bottom: none;
+}
+.border_corner_right_top {
+  top: 0;
+  right: -2px;
+  border-bottom: none;
+  border-left: none;
+}
+.border_corner_left_bottom {
+  bottom: 0;
+  left: -2px;
+  border-top: none;
+  border-right: none;
+}
+.border_corner_right_bottom {
+  right: -2px;
+  bottom: 0;
+  border-top: none;
+  border-left: none;
+}

src/components/ScreenBox/TitleBox/index.jsx

@@ -0,0 +1,13 @@
+
+
+import './style.less'
+
+export default (props) => {
+  const { value } = props
+  return (
+    <div className='TitleBox'>
+      <div className='TitleBox-ListBox' />
+      <span>{value}</span>
+    </div>
+  )
+}

src/components/ScreenBox/TitleBox/style.less

@@ -0,0 +1,22 @@
+.TitleBox {
+  display: flex;
+  align-items: center;
+  width: 163px;
+  padding: 11px 9px 9px 11px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 10px 0px #3d81f0 inset;
+
+  .TitleBox-ListBox {
+    width: 13px;
+    height: 13px;
+    margin-right: 10px;
+    background: linear-gradient(0deg, #0c49c6, #3bd6e8);
+  }
+  > span {
+    color: transparent;
+    font-weight: 800;
+    font-size: 17px;
+    background: linear-gradient(0deg, #0c49c6, #3bd6e8);
+    background-clip: text;
+  }
+}

src/pages/MonitoringScreen/hook.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import useResize from '@/utils/hooks/useResize';
+
+export function useFullScreen() {
+  const [style, setStyle] = useState({});
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const fullScreenRef = useRef();
+  fullScreenRef.current = isFullScreen;
+
+  const calcStyle = useCallback(() => {
+    const container = document.querySelector('main.ant-layout-content');
+    const header = container.querySelector('.ant-pro-page-container-warp');
+    const height = container.offsetHeight - header.offsetHeight;
+
+    setStyle({
+      width: '100%',
+      height: `${height}px`,
+    });
+  }, []);
+
+  const onFullScreen = useCallback((e) => {
+    document.documentElement.requestFullscreen();
+  }, []);
+
+  useResize((w, h) => {
+    if (fullScreenRef.current) {
+      calcStyle();
+    } else {
+      setStyle({
+        width: `${w}px`,
+        height: `${h}px`,
+      });
+    }
+
+    setIsFullScreen(!fullScreenRef.current);
+  });
+
+  useEffect(() => {
+    calcStyle();
+  }, []);
+
+  return { style, isFullScreen, onFullScreen };
+}

src/pages/MonitoringScreen/index.jsx

@@ -1,49 +1,38 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { history, Link } from 'umi';
+import classNames from 'classnames';
 // import { getPersonList, exportPersonList } from '@/services/person';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import moment from 'moment';
-import PageTable from '@/components/PageTable';
-
-const formatterTime = (val) => {
-  return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
-};
+import { FullscreenOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { useFullScreen } from './hook';
+import Styles from './style.less';
 
 export default (props) => {
-  const columns = [
-    {
-      title: '农机名',
-      dataIndex: 'machineryName',
-      key: 'machineryName',
-    },
-    {
-      title: '农机型号',
-      dataIndex: 'type',
-      key: 'type',
-    },
-    {
-      title: '操作',
-      valueType: 'option',
-      width: '300px',
-      render: (_, record) => [
-        <Link key={2} to={`./detail.jsx`}>
-          查看轨迹
-        </Link>,
-      ],
-    },
-    // 农机列表点击进入详情页 下面是轨迹上面是时间
-  ];
+  const { style, isFullScreen, onFullScreen } = useFullScreen();
 
   return (
-    <PageHeaderWrapper>
-      <PageTable
-        // request={getPersonList}
-        // expfunc={exportPersonList}
-        columns={columns}
-        rowKey="machineryId"
-        options={false}
-        scroll={{ x: 1000 }}
-      />
+    <PageHeaderWrapper
+      extra={
+        <Button icon={<FullscreenOutlined />} onClick={onFullScreen}>
+          全屏
+        </Button>
+      }
+    >
+      <div
+        className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
+        style={style}
+      >
+        <div className={Styles['grail-layout']}>
+          <div className={Styles['grail-header']}></div>
+          <div className={Styles['grail-container']}>
+            <div className={Styles['grail-left']}></div>
+            <div className={Styles['grail-content']}></div>
+            <div className={Styles['grail-right']}></div>
+          </div>
+          <div className={Styles['grail-footer']}></div>
+        </div>
+      </div>
     </PageHeaderWrapper>
   );
 };

src/pages/MonitoringScreen/style.less

@@ -0,0 +1,48 @@
+.screen-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  background-color: #021222;
+  background-image: url('~@/assets/images/screen/bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &.full-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+  }
+
+  .grail-layout {
+    height: 100%;
+
+    .grail-header,
+    .grail-footer {
+      //
+    }
+
+    .grail-container {
+      display: flex;
+      height: 100%;
+
+      .grail-left,
+      .grail-right {
+        flex: 1;
+      }
+
+      .grail-content {
+        flex: 2;
+      }
+    }
+  }
+}
+
+.demo {
+  font-size: 3em;
+  font-family: 'hyzlsJ';
+  background-image: linear-gradient(#3bd6e8, #0c49c6);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

src/pages/SystemManagement/UserRights/index.jsx

@@ -1,7 +1,54 @@
 
 
+
+import SquareBox from '@/components/ScreenBox/SquareBox'
+import TitleBox from '@/components/ScreenBox/TitleBox'
+import { Bar } from '@ant-design/plots';
+// import ba from './a.png'
+
 export default (props) => {
+
+
+  const style = {
+    bgd: {
+      color: 'rgba(0,0,0,.25)',
+      height: '100vh',
+      // backgroundImage: `url(${ba})`,
+      backgroundSize: '100%,100%',
+      padding: '5em 10em'
+    }
+  }
+  const data = [
+    {
+      year: '收割机',
+      value: 200,
+    },
+    {
+      year: '播种机',
+      value: 150,
+    },
+    {
+      year: '农药机',
+      value: 50,
+    },
+  ];
+  const config = {
+    data,
+    xField: 'value',
+    yField: 'year',
+    seriesField: 'year',
+    legend: {
+      position: 'top-left',
+    },
+    color: [' #FB9900', '#23E8AE', '#E63404'],
+  };
+
   return (
-    <div>用户权限</div>
+    <div style={style.bgd} >
+      <TitleBox value='农机类型统计' />
+      <SquareBox>
+        <Bar  {...config} />
+      </SquareBox>
+    </div>
   )
 }

src/pages/document.ejs

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

src/services/PlatformMessageManagement.js

@@ -0,0 +1,28 @@
+
+/**
+ * @表格展示
+ * 
+ */
+
+
+
+
+/**
+ * @增加
+ * 
+ */
+
+
+
+/**
+ * @删除
+ * 
+ */
+
+
+
+
+/**
+ * @修改
+ * 
+ */

src/services/swagger/pet.js

@@ -4,7 +4,7 @@
 import { request } from 'umi';
 /** Update an existing pet PUT /pet */
 
-export async function updatePet(body, options) {
+export async function updatePet (body, options) {
   return request('/pet', {
     method: 'PUT',
     headers: {
@@ -16,7 +16,7 @@ export async function updatePet(body, options) {
 }
 /** Add a new pet to the store POST /pet */
 
-export async function addPet(body, options) {
+export async function addPet (body, options) {
   return request('/pet', {
     method: 'POST',
     headers: {
@@ -28,7 +28,7 @@ export async function addPet(body, options) {
 }
 /** Finds Pets by status Multiple status values can be provided with comma separated strings GET /pet/findByStatus */
 
-export async function findPetsByStatus(params, options) {
+export async function findPetsByStatus (params, options) {
   return request('/pet/findByStatus', {
     method: 'GET',
     params: { ...params },
@@ -37,7 +37,7 @@ export async function findPetsByStatus(params, options) {
 }
 /** Finds Pets by tags Muliple tags can be provided with comma separated strings. Use         tag1, tag2, tag3 for testing. GET /pet/findByTags */
 
-export async function findPetsByTags(params, options) {
+export async function findPetsByTags (params, options) {
   return request('/pet/findByTags', {
     method: 'GET',
     params: { ...params },
@@ -46,7 +46,7 @@ export async function findPetsByTags(params, options) {
 }
 /** Find pet by ID Returns a single pet GET /pet/${param0} */
 
-export async function getPetById(params, options) {
+export async function getPetById (params, options) {
   const { petId: param0 } = params;
   return request(`/pet/${param0}`, {
     method: 'GET',
@@ -56,7 +56,7 @@ export async function getPetById(params, options) {
 }
 /** Updates a pet in the store with form data POST /pet/${param0} */
 
-export async function updatePetWithForm(params, body, options) {
+export async function updatePetWithForm (params, body, options) {
   const { petId: param0 } = params;
   const formData = new FormData();
   Object.keys(body).forEach((ele) => {
@@ -78,7 +78,7 @@ export async function updatePetWithForm(params, body, options) {
 }
 /** Deletes a pet DELETE /pet/${param0} */
 
-export async function deletePet(params, options) {
+export async function deletePet (params, options) {
   const { petId: param0 } = params;
   return request(`/pet/${param0}`, {
     method: 'DELETE',
@@ -88,7 +88,7 @@ export async function deletePet(params, options) {
 }
 /** uploads an image POST /pet/${param0}/uploadImage */
 
-export async function uploadFile(params, body, options) {
+export async function uploadFile (params, body, options) {
   const { petId: param0 } = params;
   const formData = new FormData();
   Object.keys(body).forEach((ele) => {

src/utils/hooks/useResize.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+export default (fn) => {
+  const fnRef = useRef();
+  fnRef.current = fn;
+
+  useEffect(() => {
+    const resize = () => {
+      const { clientWidth, clientHeight } = document.documentElement;
+      fnRef.current(clientWidth, clientHeight);
+    };
+
+    window.addEventListener('resize', resize);
+
+    return () => window.removeEventListener('resize', resize);
+  }, []);
+};