cldV2react/src/pages/Statistic/Product/SoftwareUsage/index.jsx

import { useState, useRef, useMemo } from 'react'
import BasicTable from '@/components/Table'
import { DatePicker, Table, Typography } from 'antd'
import { querySoftwareUsageList } from '@/services/statistic'
import consts from '@/consts'
import dayjs from 'dayjs'
import { Pie } from '@ant-design/charts'
import OptionSelect from '../../components/OptionSelect'

const { Text } = Typography

const colLabelValToZH = {
  giftsCount: '赠送',
  lendCount: '借出',
  salesCount: '销售'
}

const Usage = () => {
  const tRef = useRef(null)
  const [state, setState] = useState({
    params: {
      optionType: 'staff',
      dataIds: [],
      startMonth: [dayjs(new Date()), dayjs(new Date())]
    }
  })

  const pieData = useMemo(() => {
    if (!state.chart || !state.sum) return {}
    const leftKeys = Object.keys(state.chart)
    const pieLeft = []
    leftKeys.forEach(item => {
      const v = state.chart[item]
      pieLeft.push({ label: item === 'unused' ? '未使用' : '已使用', value: v })
    })
    const rightKeys = Object.keys(state.sum)
    const pieRight = []
    rightKeys.forEach(item => {
      const v = state.sum[item]
      if (!['receiveCount', 'createCount'].includes(item)) {
        pieRight.push({ label: colLabelValToZH[item], value: v })
      }
    })
    return { pieLeft, pieRight }
  }, [state.chart])

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      fixed: 'left',
      align: 'center'
    },
    {
      title: '未使用',
      children: [
        {
          title: '生成',
          key: 'create',
          dataIndex: 'create',
          align: 'center'
        },
        {
          title: '接收',
          key: 'receive',
          dataIndex: 'receive',
          align: 'center'
        }
      ]
    },
    {
      title: '已使用',
      children: [
        {
          title: '借出',
          key: 'lend',
          dataIndex: 'lend',
          align: 'center'
        },
        {
          title: '销售',
          key: 'sales',
          dataIndex: 'sales',
          align: 'center'
        },
        {
          title: '赠送',
          key: 'gifts',
          dataIndex: 'gifts',
          align: 'center'
        }
      ]
    }
  ]

  const leftConfig = {
    appendPadding: 10,
    data: pieData.pieLeft,
    angleField: 'value',
    colorField: 'label',
    radius: 0.9,
    color: ['#40B7E6', '#79CE67'],
    interactions: [{ type: 'element-active' }]
  }
  const rightConfig = {
    appendPadding: 10,
    data: pieData.pieRight,
    angleField: 'value',
    colorField: 'label',
    radius: 0.9,
    color: ['#40B7E6', '#79CE67', '#FBD743'],
    interactions: [{ type: 'element-active' }]
  }

  const optionChange = (type, ids) =>
    setState({ ...state, params: { ...state.params, optionType: type, dataIds: ids } })

  return (
    <div className="flex flex-col">
      <div className="flex flex-row justify-between mb-4">
        <div className="card-transition  w-1/2 bg-white mr-2">
          {pieData.pieLeft ? <Pie {...leftConfig} /> : null}
        </div>
        <div className="card-transition w-1/2 bg-white ml-2">
          {pieData.pieRight ? <Pie {...rightConfig} /> : null}
        </div>
      </div>

      <BasicTable
        // manualRequest
        search={false}
        columns={columns}
        actionRef={tRef}
        rowkey="id"
        toolbar={{
          title: <OptionSelect onChange={optionChange} type="SoftwareUsage" />,
          actions: [
            <DatePicker.RangePicker
              picker="month"
              key="DatePicker"
              disabled={[false, true]}
              value={state.startMonth}
              onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
            />
          ]
        }}
        params={state.params}
        pagination={false}
        bordered
        request={async (params, sort, filter) => {
          const {
            code = -1,
            data: { list, sum, chart, create }
          } = await querySoftwareUsageList({ ...params, ...sort, ...filter })
          setState({ ...state, sum, chart, create })
          return {
            data: list,
            success: code === consts.RET_CODE.SUCCESS,
            total: list?.length || 0
          }
        }}
        summary={data =>
          data?.length ? (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell className="text-center">小计</Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.createCount}
                </Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.receiveCount}
                </Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.lendCount}
                </Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.salesCount}
                </Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.giftsCount}
                </Table.Summary.Cell>
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell className="text-center">总计</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={2} className="text-center">
                  <Text type="danger">
                    {(state.sum?.createCount || 0) + state.sum?.receiveCount}
                  </Text>
                </Table.Summary.Cell>
                <Table.Summary.Cell colSpan={3} className="text-center">
                  <Text type="danger">
                    {state.sum?.lendCount + state.sum?.salesCount + state.sum?.giftsCount}
                  </Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          ) : null
        }
      />
    </div>
  )
}

export default Usage