feat: 首页数据对接

packages/app/src/apis/queryList.ts

@@ -23,6 +23,8 @@ import {
   OtherInListData,
   GetOtherOutParams,
   PurchaseScreenData,
+  HomeGroupData,
+  MainChartData,
 } from '@models';
 import {request} from './request';
 
@@ -359,3 +361,36 @@ export function getReserveWarningScreenList(
     signal,
   });
 }
+
+/** 首页数据组 */
+export function getMainGroupData(
+  signal?: AbortSignal,
+): BaseResult<HomeGroupData> {
+  return request({
+    method: 'GET',
+    url: `${BASE_URL}/getDisplayContent`,
+    signal,
+  });
+}
+
+/** 首页原材料统计 */
+export function getMainMaterialChartData(
+  signal?: AbortSignal,
+): BaseResult<MainChartData[]> {
+  return request({
+    method: 'GET',
+    url: `${BASE_URL}/getRawMaterial`,
+    signal,
+  });
+}
+
+/** 产成品首页统计 */
+export function getMainFinishChartData(
+  signal?: AbortSignal,
+): BaseResult<MainChartData[]> {
+  return request({
+    method: 'GET',
+    url: `${BASE_URL}/getFinishedGoods`,
+    signal,
+  });
+}

packages/app/src/models/response/queryList.ts

@@ -440,3 +440,27 @@ export type PurchaseScreenDataList = {
   /** 采购单号 */
   orderCode: string;
 };
+
+/** 首页数据组 */
+export type HomeGroupData = {
+  /** 错误数据 */
+  ErrorListAmount: number | null;
+  /** 呆滞品数量 */
+  deadStockAmount: number | null;
+  /** 储量预警物料数量 */
+  earlyWarningAmount: number | null;
+  /** 已收货数量 */
+  quantityArrived: number | null;
+  /** 未收货数量 */
+  unarrivedQuantity: number | null;
+};
+
+/** 首页统计图数据格式 */
+export type MainChartData = {
+  /** 日期 */
+  dateTime: string;
+  /** 入库数量 */
+  amount: number;
+  /** 出库数量 */
+  count: number;
+};

packages/app/src/pages/main/finish/hoos.ts

@@ -0,0 +1,27 @@
+import {getMainFinishChartData} from '@apis';
+import {useQuery} from '@tanstack/react-query';
+
+export function useChartData() {
+  const {data} = useQuery({
+    queryKey: [getMainFinishChartData.name],
+    async queryFn({signal}) {
+      const data = await getMainFinishChartData(signal);
+
+      if (data.msg === '200') {
+        return data.data.reverse().map(function ({dateTime, amount, count}) {
+          return {
+            name: dateTime,
+            value: amount,
+            data: count,
+          };
+        });
+      }
+
+      return [];
+    },
+
+    initialData: [],
+  });
+
+  return data;
+}

packages/app/src/pages/main/finish/index.tsx

@@ -12,52 +12,11 @@ import {
 } from 'recharts';
 import classNames from 'classnames';
 import {useFullscreen} from '../hooks';
-
-const data = [
-  {
-    name: '03-06',
-    data: 290,
-    value: 590,
-  },
-  {
-    name: '03-07',
-    data: 268,
-    value: 868,
-  },
-  {
-    name: '03-08',
-    data: 397,
-    value: 1397,
-  },
-  {
-    name: '03-09',
-    data: 2280,
-    value: 1480,
-  },
-  {
-    name: '03-10',
-    data: 120,
-    value: 1520,
-  },
-  {
-    name: '03-11',
-    data: 2400,
-    value: 1400,
-  },
-  {
-    name: '03-12',
-    data: 1500,
-    value: 1200,
-  },
-  {
-    name: '03-13',
-    data: 1900,
-    value: 100,
-  },
-];
+import {useChartData} from './hoos';
 
 const FinishChart: FC = function () {
   const ref = useFullscreen();
+  const data = useChartData();
 
   return (
     <Card
@@ -75,6 +34,13 @@ const FinishChart: FC = function () {
             }}
           />
           <Tooltip
+            contentStyle={{
+              background: 'rgba(0,0,0,.4)',
+              color: 'white !important',
+              borderRadius: '12px',
+              border: 'unset',
+              padding: '12px 24px',
+            }}
             formatter={function (value: string, name: string) {
               return [value, name === 'value' ? '入库' : '出库'];
             }}

packages/app/src/pages/main/group/Item.tsx

@@ -1,21 +1,26 @@
-import {ChildrenFC} from '@utils';
 import css from './index.module.css';
 import {Card, Col} from 'antd';
-import classNames from 'classnames';
+import {FC, ReactNode} from 'react';
 
 type Props = {
   title: string;
-  content: string;
+  content: string | number | null;
+  icon: ReactNode;
 };
 
-const GroupItem: ChildrenFC<Props> = function ({children, title, content}) {
+const GroupItem: FC<Props> = function ({title, content, icon}) {
   return (
-    <Col span={6}>
-      <Card title={title}>
-        <p className={css.cardContent}>{content}</p>
-        <div className={classNames([css.cardExpand, 'main-card-item-expand'])}>
-          {children}
-        </div>
+    <Col span={6} className={css.cardWrapper}>
+      <Card
+        title={
+          <div className={css.cardTitle}>
+            {icon}
+            <span>{title}</span>
+          </div>
+        }
+        className={css.card}
+      >
+        <p className={css.cardContent}>{content ?? '0'}</p>
       </Card>
     </Col>
   );

packages/app/src/pages/main/group/hooks.ts

@@ -1,3 +1,6 @@
+import {getMainGroupData} from '@apis';
+import {HomeGroupData} from '@models';
+import {useQuery} from '@tanstack/react-query';
 import {useEventListener, useThrottleFn} from 'ahooks';
 import {useEffect, useState} from 'react';
 
@@ -47,3 +50,27 @@ export function useMockAnimate() {
 
   return width;
 }
+
+export function useQueryData() {
+  const defaultData: HomeGroupData = {
+    ErrorListAmount: 0,
+    deadStockAmount: 0,
+    earlyWarningAmount: 0,
+    unarrivedQuantity: 0,
+    quantityArrived: 0,
+  };
+
+  const {data} = useQuery({
+    queryKey: [getMainGroupData.name],
+    async queryFn({signal}) {
+      const data = await getMainGroupData(signal);
+
+      if (data.msg === '200') return data.data;
+
+      return defaultData;
+    },
+    initialData: defaultData,
+  });
+
+  return data;
+}

packages/app/src/pages/main/group/index.module.css

@@ -14,15 +14,9 @@
   transition: width 500ms linear;
 }
 
-.card-title {
-  font-size: 14px;
-  font-weight: normal;
-  color: rgb(0 0 0 / 55%);
-}
-
 .card-content {
   height: 30px;
-  margin-top: 12px;
+  margin: 12px 0;
   overflow: hidden;
   font-size: 30px;
   line-height: 30px;
@@ -31,10 +25,52 @@
   white-space: nowrap;
 }
 
-.card-expand {
+.card {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 6px;
+    content: '';
+    background-color: var(--card-bg-color);
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+}
+
+.card-wrapper {
+  &:nth-child(1) {
+    --card-bg-color: #24b2d1;
+  }
+
+  &:nth-child(2) {
+    --card-bg-color: #fac95a;
+  }
+
+  &:nth-child(3) {
+    --card-bg-color: #9cd4b2;
+  }
+
+  &:nth-child(4) {
+    --card-bg-color: #abc6fb;
+  }
+}
+
+.card-title {
   display: flex;
   align-items: center;
-  width: 100%;
-  height: 70px;
-  margin-top: 24px;
+
+  & img {
+    width: 22px;
+    margin-right: 12px;
+  }
+
+  & span {
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 1;
+  }
 }

packages/app/src/pages/main/group/index.tsx

@@ -1,132 +1,42 @@
 import {FC} from 'react';
 import GroupItem from './Item';
 import {Row} from 'antd';
-import {AreaChart, Area, ResponsiveContainer} from 'recharts';
-import {useMockAnimate} from './hooks';
-import css from './index.module.css';
-
-const areaData = [
-  {
-    name: 'Page A',
-    value: 4000,
-  },
-  {
-    name: 'Page B',
-    value: 3000,
-  },
-  {
-    name: 'Page C',
-    value: 2000,
-  },
-  {
-    name: 'Page D',
-    value: 2780,
-  },
-];
-
-const lineData = [
-  {
-    name: 'Page A',
-    value: 4000,
-  },
-  {
-    name: 'Page B',
-    value: 3000,
-  },
-  {
-    name: 'Page C',
-    value: 2000,
-  },
-  {
-    name: 'Page D',
-    value: 2780,
-  },
-  {
-    name: 'Page e',
-    value: 2280,
-  },
-  {
-    name: 'Page f',
-    value: 2280,
-  },
-];
-
-const line2Data = [
-  {
-    name: 'Page A',
-    value: 2000,
-  },
-  {
-    name: 'Page B',
-    value: 2300,
-  },
-  {
-    name: 'Page C',
-    value: 2200,
-  },
-  {
-    name: 'Page D',
-    value: 4780,
-  },
-  {
-    name: 'Page e',
-    value: 1280,
-  },
-  {
-    name: 'Page f',
-    value: 1280,
-  },
-];
+import {useQueryData} from './hooks';
+import errorIcon from '@assets/images/main/error.svg';
+import deadIcon from '@assets/images/main/dead.svg';
+import waitIcon from '@assets/images/main/wait.svg';
+import warningIcon from '@assets/images/main/warning.svg';
 
 const Group: FC = function () {
-  const processWidth = useMockAnimate();
+  const {
+    deadStockAmount,
+    earlyWarningAmount,
+    ErrorListAmount,
+    unarrivedQuantity,
+  } = useQueryData();
 
   return (
     <Row gutter={12}>
-      <GroupItem title='今日预计到货数量(单)' content='20'>
-        <ResponsiveContainer>
-          <AreaChart data={areaData}>
-            <Area
-              type='monotone'
-              dataKey='value'
-              stroke='#00a6ca'
-              fill='#E0F6FD'
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-      </GroupItem>
-      <GroupItem title='今日到货率' content='50%'>
-        <div className={css.process}>
-          <span
-            className={css.processInner}
-            style={{width: `${processWidth}%`}}
-          />
-        </div>
-      </GroupItem>
-      <GroupItem title='原料入库数量(台)' content='2000'>
-        <ResponsiveContainer>
-          <AreaChart data={lineData}>
-            <Area
-              type='monotone'
-              dataKey='value'
-              stroke='#82ca9d'
-              fill='#E8F5ED'
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-      </GroupItem>
-      <GroupItem title='原料出库数量(台)' content='100'>
-        <ResponsiveContainer>
-          <AreaChart data={line2Data}>
-            <Area
-              type='monotone'
-              dataKey='value'
-              stroke='#6395F9'
-              fill='#E6F2FF'
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-      </GroupItem>
+      <GroupItem
+        title='错误日志数量'
+        content={ErrorListAmount}
+        icon={<img src={errorIcon} />}
+      />
+      <GroupItem
+        title='呆滞品数量'
+        content={deadStockAmount}
+        icon={<img src={deadIcon} />}
+      />
+      <GroupItem
+        title='存储预警数量'
+        content={earlyWarningAmount}
+        icon={<img src={warningIcon} />}
+      />
+      <GroupItem
+        title='待收货数量'
+        content={unarrivedQuantity}
+        icon={<img src={waitIcon} />}
+      />
     </Row>
   );
 };

packages/app/src/pages/main/index.tsx

@@ -10,9 +10,9 @@ const Main: FC = function () {
   return (
     <>
       <section className='content-main'>
-        <Space direction='vertical' className='width-full'>
+        <Space direction='vertical' className='width-full' size={24}>
           <Group />
-          <Row gutter={12}>
+          <Row gutter={8}>
             <Col span={15}>
               <Space direction='vertical' className='width-full'>
                 <RawChart />

packages/app/src/pages/main/raw/hoos.ts

@@ -0,0 +1,27 @@
+import {getMainMaterialChartData} from '@apis';
+import {useQuery} from '@tanstack/react-query';
+
+export function useChartData() {
+  const {data} = useQuery({
+    queryKey: [getMainMaterialChartData.name],
+    async queryFn({signal}) {
+      const data = await getMainMaterialChartData(signal);
+
+      if (data.msg === '200') {
+        return data.data.reverse().map(function ({dateTime, amount, count}) {
+          return {
+            name: dateTime,
+            value: amount,
+            data: count,
+          };
+        });
+      }
+
+      return [];
+    },
+
+    initialData: [],
+  });
+
+  return data;
+}

packages/app/src/pages/main/raw/index.tsx

@@ -12,67 +12,11 @@ import {
 import css from '../index.module.css';
 import classNames from 'classnames';
 import {useFullscreen} from '../hooks';
-
-const data = [
-  {
-    name: '03-06',
-    value: 590,
-    data: 100,
-  },
-  {
-    name: '03-07',
-    value: 868,
-    data: 200,
-  },
-  {
-    name: '03-08',
-    value: 1397,
-    data: 500,
-  },
-  {
-    name: '03-09',
-    value: 1480,
-    data: 700,
-  },
-  {
-    name: '03-10',
-    value: 1520,
-    data: 300,
-  },
-  {
-    name: '03-11',
-    value: 1400,
-    data: 100,
-  },
-  {
-    name: '03-12',
-    value: 1200,
-    data: 0,
-  },
-  {
-    name: '03-13',
-    value: 100,
-    data: 1200,
-  },
-  {
-    name: '03-14',
-    value: 1200,
-    data: 1200,
-  },
-  {
-    name: '03-15',
-    value: 500,
-    data: 800,
-  },
-  {
-    name: '03-16',
-    value: 1000,
-    data: 1200,
-  },
-];
+import {useChartData} from './hoos';
 
 const RawChart: FC = function () {
   const ref = useFullscreen();
+  const data = useChartData();
 
   return (
     <Card
@@ -90,7 +34,6 @@ const RawChart: FC = function () {
             }}
           />
           <Tooltip
-            labelClassName='123'
             contentStyle={{
               background: 'rgba(0,0,0,.4)',
               color: 'white !important',