Merge branch 'master' of lizhiqi/yongxu-web into master

src/pages/Welcome.less

@@ -1,35 +1,123 @@
 @import (reference) '~antd/es/style/themes/index';
 
-.statistic {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
-  .num_style {
-    position: relative;
-    width: 49.5%;
-    height: 128px;
-    padding: 0 30px;
-    background: #fff;
-    .title {
-      margin-top: 30px;
-      font-weight: bold;
-      font-size: 13px;
+.container {
+  .itemLeft {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 40px 0 30px 30px;
+    overflow: hidden;
+    color: #fff;
+    background: url('../../public/assets/book-bg.jpg');
+    background-size: cover;
+    border-radius: 20px;
+    .leftTitle {
+      font-size: 20px;
+    }
+    .imgBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 90px;
+      height: 90px;
+      margin: 40px 0 20px;
+      background-color: #fff;
+      border-radius: 20px;
+      box-shadow: 0 10px 20px rgb(0 0 0 / 14%);
     }
-    .num {
+    .leftNumber {
+      overflow: hidden;
+      font-size: 62px;
+    }
+  }
+  .itemCenter {
+    height: 100%;
+    padding: 40px;
+    background: #f2f8f3;
+    border-radius: 25px;
+    .itemImg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 70px;
+      height: 70px;
+      margin: 0 auto;
+      background: #fff;
+      border-radius: 20px;
+
+      img {
+        width: 50px;
+        height: 50px;
+      }
+    }
+    .itemValue {
+      margin-top: 40px;
       font-weight: bold;
-      font-size: 35px;
+      font-size: 28px;
+      text-align: center;
     }
-    .statistic_icon {
-      position: absolute;
-      top: 0;
-      right: 0;
+    .itemTitle {
+      overflow: hidden;
+      color: #1a1a37;
+      font-size: 15px;
+      white-space: nowrap;
+      text-align: center;
+    }
+  }
+  .itemRight {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    .imgRightBox {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      width: 48%;
+      height: 47%;
+      margin: 10px;
+      padding: 25px;
+      border-radius: 30px;
+      .itemRightImg {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 70px;
+        height: 70px;
+        margin-bottom: 10px;
+        background-color: #fff;
+        border-radius: 19px;
+        img {
+          width: 33px;
+          height: 33px;
+        }
+      }
+      .itemRightVal {
+        margin-bottom: 4px;
+        color: #1a1a37;
+        font-weight: bold;
+        font-size: 28px;
+      }
+      .itemRightTitle {
+        overflow: hidden;
+        color: #1a1a37;
+        font-size: 15px;
+        white-space: nowrap;
+      }
+    }
+    .itemRightBg1 {
+      background: #e8faea url('../../public/icons/1-bg.png');
+      background-size: 100% 100%;
+    }
+    .itemRightBg2 {
+      background: #e7e1fb url('../../public/icons/2-bg.png');
+      background-size: 100% 100%;
+    }
+    .itemRightBg3 {
+      background: #fdf3e9 url('../../public/icons/3-bg.png');
+      background-size: 100% 100%;
+    }
+    .itemRightBg4 {
+      background: #f0f5fb url('../../public/icons/4-bg.png');
+      background-size: 100% 100%;
     }
   }
-}
-.device_status {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  font-weight: bold;
-  font-size: 20px;
-  border-bottom: 1px solid #efefef;
 }

src/pages/Welcome.tsx

@@ -1,21 +1,35 @@
 import { PageContainer } from '@ant-design/pro-components';
-import { Card } from 'antd';
+import { Button, Card, Col, DatePicker, Form, Row, Space } from 'antd';
 import React, { useEffect, useState } from 'react';
 import styles from './Welcome.less';
-import StatisticIndex from '../pages/statistical/index';
 import { getStatisticData } from '@/services/statistic';
+import bookSum from '../../public/assets/book-sum.png';
+import totalOnlineNum from '../../public/icons/total_online_num.png';
+import activation1 from '../../public/icons/activation_1.png';
+import activation2 from '../../public/icons/activation_2.png';
+import online1 from '../../public/icons/online_1.png';
+import online2 from '../../public/icons/online_2.png';
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import moment from 'moment/moment';
+
+const { RangePicker } = DatePicker;
 
 /**
  * 首页
  * @constructor
  */
 const Welcome: React.FC = () => {
+  const [form] = Form.useForm();
   const [data, setData] = useState<any>(null);
+  const [searchData, setSearchData] = useState<object | null>({});
 
   // 获取数据
-  const getData = () => {
-    getStatisticData().then((res) => {
-      if (res?.code === 0) {
+  const getList = () => {
+    const params = {
+      ...searchData,
+    };
+    getStatisticData(params).then((res) => {
+      if (res && res.code === 0) {
         setData(res.data);
       }
     });
@@ -23,34 +37,104 @@ const Welcome: React.FC = () => {
 
   // 初始化
   useEffect(() => {
-    getData();
+    getList();
   }, []);
 
+  useEffect(() => {
+    getList();
+  }, [searchData]);
+
+  //  搜索
+  const onFinish = () => {
+    const params: any = {};
+    form.validateFields().then((res) => {
+      if (res.time) {
+        params.time_start = moment(res.time[0]).format('YYYY-MM-DD');
+        params.time_end = moment(res.time[1]).format('YYYY-MM-DD');
+      }
+      setSearchData(params);
+    });
+  };
+  //  重置
+  const onReset = () => {
+    form.resetFields();
+    setSearchData(null);
+  };
+
   return (
     <PageContainer>
-      <div className={styles.statistic}>
-        <div className={styles.num_style}>
-          <div className={styles.title}>注册用户</div>
-          <div>
-            <span className={styles.num}>{data?.user_count * 2}</span>
-            <span style={{ fontSize: '12px', marginLeft: '5px' }}>人</span>
-          </div>
-          <img src="/assets/user.png" alt="用户" className={styles.statistic_icon} />
-        </div>
-        <div className={styles.num_style}>
-          <div className={styles.title}>设备数</div>
-          <div>
-            <span className={styles.num}>
-              {((data?.device_offline + data?.device_online) * 6).toString()}
-            </span>
-            <span style={{ fontSize: '12px', marginLeft: '5px' }}>个</span>
-          </div>
-          <img src="/assets/device.png" alt="设备" className={styles.statistic_icon} />
-        </div>
-      </div>
-      <Card>
-        <div className={styles.device_status}>设备状态</div>
-        {data && <StatisticIndex data={data} />}
+      <Card style={{ marginBottom: '20px' }}>
+        <Form form={form} layout="inline" onFinish={onFinish}>
+          <Form.Item name="time" label="时间">
+            <RangePicker />
+          </Form.Item>
+          <Form.Item style={{ marginBottom: '10px' }}>
+            <Space>
+              <Button type="primary" htmlType="submit">
+                <SearchOutlined />
+                查询
+              </Button>
+              <Button htmlType="button" onClick={onReset}>
+                <ReloadOutlined />
+                重置
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+      <Card className={styles.container}>
+        <Row gutter={[30, 20]}>
+          <Col span={5}>
+            <div className={styles.itemLeft}>
+              <span className={styles.leftTitle}>总数</span>
+              <div className={styles.imgBox}>
+                <img src={bookSum} alt="" />
+              </div>
+              <span className={styles.leftNumber}>{data?.total}</span>
+            </div>
+          </Col>
+          <Col span={3}>
+            <div className={styles.itemCenter}>
+              <div className={styles.itemImg}>
+                <img src={totalOnlineNum} alt="" />
+              </div>
+              <div className={styles.itemValue}>{data?.online}</div>
+              <div className={styles.itemTitle}>总在线数</div>
+            </div>
+          </Col>
+          <Col span={12}>
+            <div className={styles.itemRight}>
+              <div className={[styles.imgRightBox, styles.itemRightBg4].join(' ')}>
+                <div className={styles.itemRightImg}>
+                  <img src={online2} alt="" />
+                </div>
+                <span className={styles.itemRightVal}>{data?.wuheng_online}</span>
+                <span className={styles.itemRightTitle}>五恒在线数</span>
+              </div>
+              <div className={[styles.imgRightBox, styles.itemRightBg1].join(' ')}>
+                <div className={styles.itemRightImg}>
+                  <img src={activation2} alt="" />
+                </div>
+                <span className={styles.itemRightVal}>{data?.wuheng}</span>
+                <span className={styles.itemRightTitle}>激活五恒数</span>
+              </div>
+              <div className={[styles.imgRightBox, styles.itemRightBg3].join(' ')}>
+                <div className={styles.itemRightImg}>
+                  <img src={online1} alt="" />
+                </div>
+                <span className={styles.itemRightVal}>{data?.ffx_online}</span>
+                <span className={styles.itemRightTitle}>分风箱在线数</span>
+              </div>
+              <div className={[styles.imgRightBox, styles.itemRightBg2].join(' ')}>
+                <div className={styles.itemRightImg}>
+                  <img src={activation1} alt="" />
+                </div>
+                <span className={styles.itemRightVal}>{data?.ffx}</span>
+                <span className={styles.itemRightTitle}>激活分风箱数</span>
+              </div>
+            </div>
+          </Col>
+        </Row>
       </Card>
     </PageContainer>
   );

src/services/statistic.ts

@@ -1,8 +1,9 @@
 import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
 
 /**
  * 首页数据统计
  */
-export async function getStatisticData() {
-  return request(`/web/v1/statistic/user`);
+export async function getStatisticData(params: any) {
+  return request(`/web/v1/statistic/dev_online?${stringify(params)}`);
 }