feat: 客户统计图表

config/routes.js

@@ -210,12 +210,12 @@ export default [
             component: './Statistic/Product/InvoiceTrends',
             access: 'authRouteFilter',
             validatePerm: true
+          },
+          {
+            path: 'customer-additions',
+            name: 'customer-additions',
+            component: './Statistic/Product/CustomerAdditions'
           }
-          // {
-          //   path: 'customer-additions',
-          //   name: 'customer-additions',
-          //   component: './Statistic/Product/CustomerAdditions'
-          // }
         ]
       }
     ]

src/pages/Statistic/Product/CustomerAdditions/index.jsx

@@ -2,6 +2,7 @@ import BasicTable from '@/components/Table'
 import consts from '@/consts'
 import React, { useRef, useState } from 'react'
 import { DatePicker, Select, Space } from 'antd'
+import { Column } from '@ant-design/charts'
 import dayjs from 'dayjs'
 import { dayjsFormat } from '@/utils/utils'
 import OptionSelect from '../../components/OptionSelect'
@@ -9,14 +10,19 @@ import { queryCustomerAdditionList } from '@/services/statistic'
 
 const { Option } = Select
 const { RangePicker } = DatePicker
+const columnGroupMap = {
+  client: '客户',
+  company: '单位'
+}
 const CustomerAdditions = () => {
   const [state, setState] = useState({
     params: {
       optionType: 'singleStaff',
       dataIds: [],
+      dateType:'month',
       startMonth: [dayjs(new Date()), dayjs(new Date())]
     },
-    chart: {},
+    data: [],
     type: 'month'
   })
   const [dates, setDates] = useState([])
@@ -72,26 +78,59 @@ const CustomerAdditions = () => {
       render: text => <div className="text-right">{text}</div>
     }
   ]
-
+  
+  const dateTypeOptions= [
+    { label: '月', value: 'month' },
+    { label: '周', value: 'week' },
+    { label: '日', value: 'date' }
+  ]
   const handleOnChange = val => {
-    console.log(state.type)
+    // console.log(state.type)
     if (val?.length !== 2) return
     if (state.type === 'month') {
       const [startTime, endTime] = val
       setState({
         ...state,
-        params: { ...state.params, startMonth: [startTime.startOf('month'), endTime.endOf('month')] }
+        params: { ...state.params, startMonth: [startTime.startOf('month'), endTime.endOf('month')], dateType:state.type }
       })
     } else {
-      setState({ ...state, params: { ...state.params, startMonth: val } })
+      setState({ ...state, params: { ...state.params, startMonth: val, dateType: state.type === 'date' ? 'day' : state.type } })
     }
   }
+  const columnConfig = {
+    data: state.data.reduce((prev, curr) => {
+      const newList = [...prev]
+      const keys = Object.keys(curr)
+      keys.forEach(key => {
+        if (key !== 'name' && key !== 'id') {
+          newList.push({
+            department: curr.name,
+            type: columnGroupMap[key],
+            value: parseInt(curr[key])
+          })
+        }
+      })
+      return newList
+    }, []),
+    isGroup: true,
+    autoFit: true,
+    // padding: 'auto',
+    // dodgePadding: 2,
+    appendPadding: [23, 32, 24, 32],
+    xField: 'department',
+    yField: 'value',
+    seriesField: 'type',
+    legend: {
+      position: 'top'
+    },
+    color: ['#A7D2F9', '#C4E9C1', '#E9C8C1'],
+    colorField: 'type'
+  }
   return (
     <div className="flex flex-col">
       <div className="flex flex-row justify-between mb-4">
         <div className="card-transition bg-white w-full">
-          aa
-          {/* {state.list?.length ? <Column {...columnConfig} /> : null} */}
+          {state.data?.length ? <Column {...columnConfig} /> : null}
         </div>
       </div>
       <BasicTable
@@ -107,14 +146,21 @@ const CustomerAdditions = () => {
           title: [<OptionSelect onChange={handleOptionChange} type="CustomerAdditions" key="op" multiple={false} />],
           actions: [
             <Space key="id">
-              <Select value={state.type} onChange={value => setState({ ...state, type: value })}>
-                <Option value="month">月</Option>
+              <Select 
+                value={state.type} 
+                options={dateTypeOptions} 
+                onChange={value => setState({ ...state, type: value })} 
+              />
+                {/* <Option value="month">月</Option>
                 <Option value="week">周</Option>
-                <Option value="date">日</Option>
-              </Select>
+                <Option value="date">日</Option> */}
+              {/* </Select> */}
               <RangePicker
                 picker={state.type}
                 disabledDate={disabledDate}
+                // allowClear={false}
+                // value={state.params.startMonth}
+                value={hackValue || state.params.startMonth}
                 onCalendarChange={val => setDates(val)}
                 onOpenChange={onOpenChange}
                 onChange={val => handleOnChange(val)}
@@ -122,20 +168,18 @@ const CustomerAdditions = () => {
             </Space>
           ]
         }}
-        request={async (params, sort, filter) => {
+        request={async (params) => {
           const {
             code = -1,
-            data: { list, chart }
+            data=[]
           } = await queryCustomerAdditionList({
-            ...params,
-            ...sort,
-            ...filter
+            ...params
           })
-          setState({ ...state, chart })
+          setState({ ...state, data })
           return {
-            data: list,
-            success: code === consts.RET_CODE.SUCCESS,
-            total: list?.length || 0
+            data,
+            success: code === consts.RET_CODE.SUCCESS
+            // total: list?.length || 0
           }
         }}
       />