management/src/pages/Safe/Content/Info/Summary/index.tsx

import Header from '@/components/Header'
import { tenderStore } from '@/store/mobx'
import consts from '@/utils/consts'
import dayjs from 'dayjs'
import React, { useEffect, useState, useMemo } from 'react'
import { Link } from 'react-router-dom'
import { apiGetSafeSurvey } from './api'
import ColumnChart from './columnChart'
import './index.scss'
import PieChart from './pieChart'
export interface SafeColumnCharType {
  name: 'rectifyed' | 'submit'
  month: string
  count: number
}

export interface SafeLineChartType {
  month: string
  percentage: number
}
interface iRectifyData {
  auditName: string
  createTime: string
  id: string
  inspectionDetail: string
  status: number
}
interface iSummaryState {
  approvalTotal: number
  rectifyTotal: number
  rectifyedTotal: number
  rectifylist: iRectifyData[]
  columnarData: SafeColumnCharType[]
  lineData: SafeLineChartType[]
}
const Summary: React.FC<{}> = () => {
  const [ state, setState ] = useState<iSummaryState>({
    approvalTotal: 0,
    rectifyTotal: 0,
    rectifyedTotal: 0,
    rectifylist: [],
    columnarData: [],
    lineData: []
  })
  useEffect(() => {
    initData()
  }, [])

  const initData = async () => {
    const { data, code = -1 } = await apiGetSafeSurvey(tenderStore.bid)
    if (code === consts.RET_CODE.SUCCESS) {
      setState({ ...state, ...data })
    }
  }

  const pieData = useMemo(() => {
    const data = [
      {
        type: '审批中',
        value: state.approvalTotal
      },
      {
        type: '整改中',
        value: state.rectifyTotal
      },
      {
        type: '已完成',
        value: state.rectifyedTotal
      }
    ]
    return data
  }, [ state.approvalTotal, state.rectifyTotal, state.rectifyedTotal ])

  const columnCharData = useMemo(() => {
    return { columnData: state.columnarData, lineData: state.lineData }
  }, [ state.columnarData, state.lineData ])
  const handleDate = (createTime: string) => {
    return dayjs(new Date()).diff(dayjs(createTime), 'day') + '天'
  }
  return (
    <div className="wrap-contaniner">
      <Header title="巡检概况" />
      <div className="wrap-content m-3 pi-flex-column pi-justify-start">
        <div className="pi-justify-start">
          <div className="pi-flex-twice card pi-flex-column">
            <header className="card-title">整改中 ({state.rectifyTotal}) </header>
            <div>
              {state.rectifylist.map(item => {
                return (
                  <div key={item.id} className="pi-justify-between pi-lh-18 pi-height-18 pi-mg-2">
                    <Link to={{ pathname: '/console/safe/content/detail/info', state: { id: item.id } }}>{item.inspectionDetail}</Link>
                    <div className="pi-align-center">
                      <span className="pi-mg-right-5">{item.auditName}</span>
                      <span className="pi-badge danger">{handleDate(item.createTime)}</span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
          <div className="pi-flex-treble pi-mg-left-30 card">
            <PieChart data={pieData} />
          </div>
        </div>
        <div className="card echarts-column-chart mt-3">
          <h5 className="pi-fz-25 pi-fw-5">整改趋势</h5>
          <div className="pi-width-100P">
            <ColumnChart data={columnCharData} />
          </div>
        </div>
      </div>
    </div>
  )
}
export default Summary