pc-admin/src/pages/home/components/EscalationCharts.jsx

import React, { useState } from 'react';
import { Card, Select } from 'antd';
import * as echarts from 'echarts/core';
import Chart from '@/components/chart';
import { getStatEscalation } from "@/service/stat";
import { getSysOrg } from "@/service/sysorg";

export default (props) => {
  const [option, setOption] = useState({});
  const [orgList, setOrgList] = useState([]);
  const [orgId, setOrgId] = useState();
  const [condition, setCondition] = useState();

  React.useEffect(() => {
    if (orgList.length > 0) {
      const e = orgList[0]?.orgId
      setCondition({ orgId: e })
      setOrgId(e)
    }
  }, [orgList])

  React.useEffect(() => {
    getSysOrg({ pageSize: 500 }).then((res) => {
      setOrgList(res.records || [])
    })
  }, []);



  //选择下拉框将条件参数set给condition
  const onChange = e => {
    setCondition({ orgId: e })
    setOrgId(e)
  }

  React.useEffect(() => {
    getStatEscalation(condition).then((res) => {
      setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#F772D1'
            }
          }
        },
        grid: {
          left: '3%',
          bottom: '3%',
          width: '90%',
          height: '90%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: res.map(x => x.name),
            boundaryGap: true,
            name: '状态',
            axisTick: {
              alignWithLabel: true,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            name: '交办次数'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#F772D1' },
                { offset: 0.5, color: '#C872F2' },
                { offset: 1, color: '#E5BEF8' }
              ])
            },
            data: res.map(x => x.value),
          }
        ]
      })
    })
  }, [condition]);

  return (
    <Card
      title="交办统计"
      extra={
        <Select style={{ width: "200px" }} value={orgId} placeholder="请选择单位" onChange={onChange}>
          {
            orgList.map((item) => (
              <Select.Option key={item.orgId} value={item.orgId}>
                {item.name}
              </Select.Option>
            )
            )
          }
        </Select>
      }
    >
      <Chart option={option} style={props.style}></Chart>
    </Card>
  )
}