push

hfljzrxsj · Feb 24, 2024 · 30af8bc · 30af8bc
1 parent 3867d8a
commit 30af8bc
Show file tree

Hide file tree

Showing 17 changed files with 409 additions and 53 deletions.
diff --git a/core.12180 b/core.12180
diff --git a/src/Route/index.tsx b/src/Route/index.tsx
@@ -1,14 +1,21 @@
 import {
-  Route, Routes, type NonIndexRouteObject, type RouteObject,
-  // createHashRouter
+  Route, Routes, type RouteObject,
+  // createHashRouter, useRoutes
 } from 'react-router-dom';
 import type { RRNstring } from '@/types';
 import MainFrame from '@/pages';
 import Login from '@/pages/Login';
 import Overview from '@/pages/Overview';
-import DistributionOfTerminalSales from '@/pages/SalesVolumeMonitoring/DistributionOfTerminalSales';
+// import DistributionOfTerminalSales from '@/pages/SalesVolumeMonitoring/DistributionOfTerminalSales';
 import TerminalActivitySalesStructure from '@/pages/SalesVolumeMonitoring/TerminalActivitySalesStructure';
 import SalesStructureOfTerminalPriceRanges from '@/pages/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges';
+import TOP10ModelInformation from '@/pages/SalesVolumeMonitoring/TOP10ModelInformation';
+import QualityOfTerminalSalesInThePanAlliance from '@/pages/SalesVolumeMonitoring/QualityOfTerminalSalesInThePanAlliance';
+import SalesSituationOfTerminalSubChannels from '@/pages/SalesVolumeMonitoring/SalesSituationOfTerminalSubChannels';
+import OrderQuantityOfMobileTerminals from '@/pages/PurchaseQuantityMonitoring/OrderQuantityOfMobileTerminals';
+import InventoryQuantity from '@/pages/InventoryMonitoring/InventoryQuantity';
+import InventoryStructure from '@/pages/InventoryMonitoring/InventoryStructure';
+import { lazy, Suspense } from 'react';
 
 export enum pathString {
   login = 'login',
@@ -51,39 +58,47 @@ export enum pathString {
 //     }
 //   },
 // });
-export interface menuItem extends NonIndexRouteObject {
-  readonly id: RRNstring;
-}
+// export interface menuItem extends NonIndexRouteObject {
+//   readonly id: RRNstring;
+// }
+const DistributionOfTerminalSales = lazy(() => import('@/pages/SalesVolumeMonitoring/DistributionOfTerminalSales'));
 export const menuItems: Array<RouteObject> = ([
   { path: '', id: '总览', element: <Overview /> },
   {
     path: pathString.SalesVolumeMonitoring, id: '终端销量分布', children: [
-      { path: pathString.DistributionOfTerminalSales, id: '终端销量分布', element: <DistributionOfTerminalSales /> },
+      {
+        path: pathString.DistributionOfTerminalSales, id: '终端销量分布', element: <Suspense fallback={<></>}>
+          <DistributionOfTerminalSales />
+        </Suspense>,
+        // lazy: () => import('@/pages/SalesVolumeMonitoring/DistributionOfTerminalSales')
+      },
       { path: pathString.TerminalActivitySalesStructure, id: '终端活动销售结构', element: <TerminalActivitySalesStructure /> },
       { path: pathString.SalesStructureOfTerminalPriceRanges, id: '终端各价位段销售结构', element: <SalesStructureOfTerminalPriceRanges /> },
-      { path: pathString.TOP10ModelInformation, id: 'TOP10机型信息' },
-      { path: pathString.QualityOfTerminalSalesInThePanAlliance, id: '泛全联盟终端销售质量' },
-      { path: pathString.SalesSituationOfTerminalSubChannels, id: '终端分渠道销售情况' },
+      { path: pathString.TOP10ModelInformation, id: 'TOP10机型信息', element: <TOP10ModelInformation /> },
+      { path: pathString.QualityOfTerminalSalesInThePanAlliance, id: '泛全联盟终端销售质量', element: <QualityOfTerminalSalesInThePanAlliance /> },
+      { path: pathString.SalesSituationOfTerminalSubChannels, id: '终端分渠道销售情况', element: <SalesSituationOfTerminalSubChannels /> },
     ]
   },
   {
     path: pathString.PurchaseQuantityMonitoring, id: '进货量监控', children: [
-      { path: pathString.OrderQuantityOfMobileTerminals, id: '手机终端订货数量' }
+      { path: pathString.OrderQuantityOfMobileTerminals, id: '手机终端订货数量', element: <OrderQuantityOfMobileTerminals /> }
     ]
   },
   {
     path: pathString.InventoryMonitoring, id: '库存量监控', children: [
-      { path: pathString.InventoryQuantity, id: '库存数量' },
-      { path: pathString.InventoryStructure, id: '库存结构' },
+      { path: pathString.InventoryQuantity, id: '库存数量', element: <InventoryQuantity /> },
+      { path: pathString.InventoryStructure, id: '库存结构', element: <InventoryStructure /> },
     ]
   },
 ]);
 export const concatUrl = (...args: ReadonlyArray<RRNstring>) => (`/${args.join('/')}`);
+// const UseRoutes = () => useRoutes(menuItems);
 export default function MyRoute () {
   // const isLogin = true;
   // if (!isLogin) {
   //   return <Navigate to={concatUrl(pathString.login)} />;
   // }
+  // return <UseRoutes />;
   return (
     <Routes>
       <Route
@@ -93,9 +108,11 @@ export default function MyRoute () {
       <Route
         path='/'
         element={<MainFrame />}
-      >{
+      >
+        {
           menuItems.map((item, index) => (
-            <Route key={index} path={item.path ?? ''} element={item.element} >
+            <Route key={index} path={item.path ?? ''} element={item.element}
+            >
               {
                 item.children?.map((child, index) =>
                   <Route key={index} path={child.path ?? ''} element={child.element}
@@ -118,7 +135,6 @@ export default function MyRoute () {
           ))
         }
       </Route>
-      {/* {useRoutes([...menuItems])} */}
     </Routes>
   );
 }
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -1,7 +1,6 @@
-import type { addressArrType } from "@/components/FilterDialogWithBreadcrumbs";
-import type { data } from "@/echarts";
 import type { DistributionOfTerminalSalesArray } from "@/pages/SalesVolumeMonitoring/DistributionOfTerminalSales";
-import type { SalesStructureOfTerminalPriceRangesArray } from "@/pages/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges";
+import { priceNameArr } from "@/pages/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges";
+import type { TOP10ModelInformation_labelType } from "@/pages/SalesVolumeMonitoring/TOP10ModelInformation";
 import { enumActionName, enumSeverity, enumSnackbarAlert, type snackbarAlertAction } from "@/store/SnackBarRuducer";
 import axios from "axios";
 import type { Dispatch } from "redux";
@@ -44,25 +43,63 @@ export const getScode = () => axios.get<commonResponse<string>>('/api/scode/', {
     })()
   }
 }).then(e => e?.data?.data).catch(console.error);
-export const getInitParams = () => ({ [level]: Number(getLevel()) || 0, regionId: getLocalStorageFromJSON(orgId) || 'HB' });
+export const getInitParams = () => ({ [level]: Number(getLevel()) || 0, orgId: getLocalStorageFromJSON(orgId) || 'HB' });
 export const getSalesVolumeMonitoring_DistributionOfTerminalSales = (e = getInitParams()) => axios.get<commonResponse<DistributionOfTerminalSalesArray>>('/api/sale/subregion', {
   params: e
 }).then(e => e.data.data).catch(console.error);
-export const getSalesVolumeMonitoring_SalesStructureOfTerminalPriceRanges = (e = {}) => axios.get<commonResponse<SalesStructureOfTerminalPriceRangesArray>>('/api/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges', {
+export const getSalesVolumeMonitoring_SalesStructureOfTerminalPriceRanges = (e = {}) => axios.get<commonResponse<{
+  readonly salesRecordMap: Record<string, {
+    readonly salesNum: number;
+    readonly ratio: number;
+  }>;
+}>>('/api/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges', {
   params: e
-}).then(e => e.data.data).catch(console.error);
+}).then(e => e.data.data.salesRecordMap).then(e => priceNameArr.map(i => ({
+  price: i,
+  salesVolume: e[i]?.salesNum ?? 0,
+  proportion: e[i]?.ratio ?? 0,
+}))).catch(console.error);
 export const testLogin = () => axios.get<commonResponse>('/api/sell').then(e => e.data.code === successCode).catch(console.error);
-export const getTerminalActivitySalesStructure = (props: {
-  readonly type?: string;
-  readonly regionId?: string;
-} = { ...getInitParams() }) => axios.get<commonResponse<data>>('/api/SalesVolumeMonitoring/TerminalActivitySalesStructure', {
-  params: props
-}).then(e => e.data.data).catch(console.error);
-export const getAddressList = ({ id }: {
-  // readonly type: string;
-  readonly id?: string;
-}) => axios.get<commonResponse<addressArrType>>('/api/getAddressList', {
-  params: {
-    id
+type timeType = 'year' | 'month' | 'day';
+export const getTerminalActivitySalesStructure = ({ type, ...others }: {
+  readonly type?: timeType;
+  readonly orgId?: string;
+  readonly level?: number;
+} = { ...getInitParams() }) => axios.get<commonResponse<{
+  readonly scRatio: number;
+  readonly feRatio: number;
+  readonly jbRatio: number;
+}>>(`/api/sale/contract/${type}`, {
+  params: { ...others }
+}).then(e => Object.entries(e.data.data).map(i => ({ value: i[1], name: i[0] }))).catch(console.error);
+// export const getAddressList = ({ id }: {
+//   // readonly type: string;
+//   readonly id?: string;
+// }) => axios.get<commonResponse<addressArrType>>('/api/getAddressList', {
+//   params: {
+//     id
+//   }
+// }).then(e => e.data.data).catch(console.error);
+export const getTOP10ModelInformation = ({ type, ...others }: {
+  readonly type?: timeType;
+  readonly orgId?: string;
+  readonly level?: number;
+} = { ...getInitParams() }) => axios.get<commonResponse<{
+  readonly phoneInfoRank: Record<string, TOP10ModelInformation_labelType>;
+}>>(`/api/sale/topPhone/${type}`, {
+  params: { ...others }
+}).then(e => e.data.data.phoneInfoRank).then(e => Object.keys(e).map((i, ind) => {
+  const item = e[ind + 1];
+  if (item) {
+    return { ...item, index: String(i) };
+  }
+  else {
+    return {
+      "phoneType": "",
+      "salesNum": 0,
+      "rate": 0,
+      "priceLevel": "",
+      index: '0'
+    };
   }
-}).then(e => e.data.data).catch(console.error);
+})).then(e => e.filter(i => Boolean(i.salesNum))).catch(console.error);
diff --git a/src/components/FilterDialogWithBreadcrumbs/index.tsx b/src/components/FilterDialogWithBreadcrumbs/index.tsx
@@ -24,7 +24,7 @@ export interface labelType {
 const { fromEntries } = Object;
 const custom = 'custom';
 const dateFormat = (now = new Date()) => `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
-const timeFormat = (...args: ReadonlyArray<string>) => args.map(i => i.replaceAll('-', '')).join('-');
+const timeFormat = (...args: ReadonlyArray<string>) => args.map(i => i.replaceAll('-', '/')).join('-');
 const dateFromOldToNow = (n: number) => {
   const now = new Date();
   now.setDate(now.getDate() - n);
@@ -72,7 +72,7 @@ export interface noNeedSomething {
   readonly noNeedAddress?: boolean;
 }
 export interface TT {
-  readonly regionId?: string;
+  readonly orgId?: string;
   readonly date?: string;
 }
 interface CurrentFilterShow extends noNeedSomething {
@@ -148,7 +148,7 @@ export const FilterDialogWithBreadcrumbs = forwardRef<FilterDialogIncludeButtonI
     Partial<Record<unitNameEnum, addressArrType>>
   >(fromEntries(unitName.map(i => [i.label, []])));
   useMount(() => unstable_batchedUpdates(() => {
-    getSalesVolumeMonitoring_DistributionOfTerminalSales({ level, regionId: getLocalStorageFromJSON(orgId) }).then(e => {
+    getSalesVolumeMonitoring_DistributionOfTerminalSales({ level, orgId: getLocalStorageFromJSON(orgId) }).then(e => {
       const label0 = unitName[0]?.label;
       if (e && label0) {
         setAddressList({
@@ -176,8 +176,8 @@ export const FilterDialogWithBreadcrumbs = forwardRef<FilterDialogIncludeButtonI
       //@ts-expect-error
       run({
         ...(!noNeedTime && { date: isCustomTime ? customTimeFormat : f?.value }),
-        regionId:
-          [getInitParams().regionId, ...unitName.filter(i => address[i.label]).map(i => address[i.label]?.regionId)].join('.')
+        orgId:
+          [getInitParams().orgId, ...unitName.filter(i => address[i.label]).map(i => address[i.label]?.regionId)].join('.')
         , level: hasDataIndex < 0 ? unitNameAll.length - 1 : hasDataIndex
         // ...((() => {
         //   // const label = unitName[hasDataIndex - 1]?.label;
@@ -323,7 +323,7 @@ export const FilterDialogWithBreadcrumbs = forwardRef<FilterDialogIncludeButtonI
                 });
                 if (index !== unitName.length - 1 && regionId) {
                   // getAddressListData(index, id);
-                  getSalesVolumeMonitoring_DistributionOfTerminalSales({ level: level + index + 1, regionId }).then(e => {
+                  getSalesVolumeMonitoring_DistributionOfTerminalSales({ level: level + index + 1, orgId: regionId }).then(e => {
                     const curLabel = unitName[index + 1]?.label;
                     if (e && curLabel)
                       setAddressList({

diff --git a/src/components/MyTable/index.tsx b/src/components/MyTable/index.tsx
@@ -19,7 +19,7 @@ interface Type<T = {}, D extends TT = TT> extends noNeedSomething {
     readonly level?: number;
   }> | void>;
 }
-export default function MyTable<T, D extends object = {}> (props: Type<T, D>) {
+export default function MyTable<T, D extends TT = TT> (props: Type<T, D>) {
   const { columns, action, noNeedTime, noNeedAddress } = props;
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import './index.scss';
 import * as React from 'react';
 import App from './App';
 import { render } from 'react-dom';
+import { register } from './serviceWorkerRegistration';
 import './mock';
 // import 'virtual:svg-cions-register';
 // import { createRoot } from 'react-dom/client';
@@ -17,6 +18,7 @@ render(
   </React.StrictMode>
   , document.body
 );
+register();
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

diff --git a/src/pages/InventoryMonitoring/InventoryQuantity/index.tsx b/src/pages/InventoryMonitoring/InventoryQuantity/index.tsx
@@ -0,0 +1,5 @@
+import { StrictMode } from "react";
+
+export default function InventoryQuantity () {
+  return <StrictMode></StrictMode>;
+}
diff --git a/src/pages/InventoryMonitoring/InventoryStructure/index.tsx b/src/pages/InventoryMonitoring/InventoryStructure/index.tsx
@@ -0,0 +1,5 @@
+import { StrictMode } from "react";
+
+export default function InventoryStructure () {
+  return <StrictMode></StrictMode>;
+}
diff --git a/src/pages/PurchaseQuantityMonitoring/OrderQuantityOfMobileTerminals/index.tsx b/src/pages/PurchaseQuantityMonitoring/OrderQuantityOfMobileTerminals/index.tsx
@@ -0,0 +1,5 @@
+import { StrictMode } from "react";
+
+export default function OrderQuantityOfMobileTerminals () {
+  return <StrictMode></StrictMode>;
+}
diff --git a/src/pages/SalesVolumeMonitoring/DistributionOfTerminalSales/index.tsx b/src/pages/SalesVolumeMonitoring/DistributionOfTerminalSales/index.tsx
@@ -29,7 +29,7 @@ export default function DistributionOfTerminalSales () {
   return (<StrictMode>
     <MyTable<labelType, {
       readonly level: number;
-      readonly regionId: string;
+      readonly orgId: string;
     }> columns={columns} action={getSalesVolumeMonitoring_DistributionOfTerminalSales}
       noNeedAddress
       noNeedTime

diff --git a/src/pages/SalesVolumeMonitoring/QualityOfTerminalSalesInThePanAlliance/index.tsx b/src/pages/SalesVolumeMonitoring/QualityOfTerminalSalesInThePanAlliance/index.tsx
@@ -0,0 +1,5 @@
+import { StrictMode } from "react";
+
+export default function QualityOfTerminalSalesInThePanAlliance () {
+  return <StrictMode></StrictMode>;
+}
diff --git a/src/pages/SalesVolumeMonitoring/SalesSituationOfTerminalSubChannels/index.tsx b/src/pages/SalesVolumeMonitoring/SalesSituationOfTerminalSubChannels/index.tsx
@@ -0,0 +1,5 @@
+import { StrictMode } from "react";
+
+export default function SalesSituationOfTerminalSubChannels () {
+  return <StrictMode></StrictMode>;
+}
diff --git a/src/pages/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges/index.tsx b/src/pages/SalesVolumeMonitoring/SalesStructureOfTerminalPriceRanges/index.tsx
@@ -7,19 +7,20 @@ interface labelType {
   readonly salesVolume: number;
   readonly proportion: number;
 }
-export type SalesStructureOfTerminalPriceRangesArray = ReadonlyArray<labelType>;
+// export const priceNameArr = ['0-1000元', '1000-2000元', '2000-3000元', '3000-4000元', '4000-5000元', '5000元以上'];
+export const priceNameArr = [...' '.repeat(4).split(' ').map((_i, ind) => `${ind * 1000}-${ind * 1000 + 1000}元`), '5000元以上'];
 export default function SalesStructureOfTerminalPriceRanges () {
   return (<StrictMode>
     <MyTable<labelType>
       columns={[
         {
           label: 'price', text: '机型价位段',
-          format: (value: number) => {
-            if (value === 5000) {
-              return `5000元以上`;
-            }
-            return `${value.toLocaleString()}元`;
-          },
+          // format: (value: number) => {
+          //   if (value === 5000) {
+          //     return `5000元以上`;
+          //   }
+          //   return `${value.toLocaleString()}元`;
+          // },
         },
         { label: 'salesVolume', text: '销量' },
         {

diff --git a/src/pages/SalesVolumeMonitoring/TOP10ModelInformation/index.tsx b/src/pages/SalesVolumeMonitoring/TOP10ModelInformation/index.tsx
@@ -0,0 +1,52 @@
+import { StrictMode } from "react";
+import { getTOP10ModelInformation } from "@/actions";
+import MyTable from "@/components/MyTable";
+
+export interface TOP10ModelInformation_labelType {
+  readonly phoneType: string;
+  readonly salesNum: number;
+  readonly rate: number;
+  readonly priceLevel: string;
+  readonly index: string;
+}
+// export const priceNameArr = ' '.repeat(10);
+export default function TOP10ModelInformation () {
+  return (<StrictMode>
+    <MyTable<TOP10ModelInformation_labelType>
+      columns={[{
+        label: 'index',
+        text: '销量排名'
+      },
+      {
+        label: 'phoneType', text: '机型名称',
+        // format: (value: number) => {
+        //   if (value === 5000) {
+        //     return `5000元以上`;
+        //   }
+        //   return `${value.toLocaleString()}元`;
+        // },
+      },
+      {
+        label: 'salesNum',
+        text: '销量'
+      },
+      { label: 'rate', text: '占比', format: (value: number) => `${value.toLocaleString()}%`, },
+      {
+        label: 'priceLevel',
+        text: '价格段'
+      },
+      ]}
+      action={(e) => getTOP10ModelInformation(e).then(e => {
+        if (!e)
+          return [];
+        return [...e, {
+          index: '',
+          phoneType: '合计',
+          salesNum: e.filter(i => Boolean(i)).reduce((previousValue, currentValue) => previousValue + currentValue?.salesNum, 0),
+          rate: 100,
+          priceLevel: ''
+        }];
+      })}
+    />
+  </StrictMode>);
+}