mh_jy_safe_web/src/components/CustomPages/KR/KrAlarmLogNumPage.js

// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Row, Col } from 'antd'
import { LocalSearch, FullDatePicker, LayoutCard, ExportToExcel } from '@woowalker/feui'
import CommonChart from '../../Chart/CommonChart'
import EditableTable from '../../EditListTable/EditableTable'
import TableChart from '../../Chart/TableChart'
import { getPieChartOption } from '../../Chart/PieChart'
// 工具库
import { initFilter, addRuleAndGroups } from '../../../utils/common'
import moment from 'moment'



class KrAlarmLogNumPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dateType: '1',
      dateString: moment().format('YYYY-MM'),
      statisticalDatas: [],
      chartData: {},
      pieData: {},
      pieChartOption: {},
      columns: [],
      dataSource: []
    }
  }

  handleSearch = (value) => {
    const { formParam } = this.props
    const { dateType, dateString } = this.state
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: dateType,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: dateString,
      isCustom: true,
      isSysParam: false,
    })

    // 获取数据
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    addRuleAndGroups(json, value)

    dispatch({
      type: 'app/getDataByPost',
      url: 'KR/KRAlarmLog/GetAlarmNumChart',
      payload: json
    }).then(res => {
      if (res) {
        const { chartData, Columns, ListData, pieData } = res
        this.setState({
          chartData: {
            xAxis: chartData?.XAxis[0].Data,
            yAxis: chartData?.YAxis,
            data: chartData?.Data
          },
          pieData: {
            xAxis: pieData?.XAxis[0].Data,
            data: pieData?.Data
          },
          columns: Columns,
          dataSource: ListData,
          pieChartOption: pieData?.XAxis ? this.checkPieChartOption(pieData) : {}
        })
      }
    })
  }


  checkPieChartOption = (chartData) => {
    if (chartData.Data?.[0]?.Type === 'pie') {
      return getPieChartOption({
        // echarts option配置
        title: chartData.Data[0]?.Name || '饼图',
        xAxis: chartData.XAxis.map(item => ({ data: item.Data || [] })),
        // 自定义数据存储
        data: chartData.Data.map(item => {
          return {
            yAxisIndex: 0,
            data: (item.Data || []).map(subData => {
              return {
                value: subData.Value,
              }
            })
          }
        })
      })
    }
    return false
  }

  render () {
    const { chartData, columns, dataSource, pieChartOption } = this.state
    return (
      <div className='scroll_page'>
        <LocalSearch
          isRemember
          shareKey='EMPeakValley'
          setExtraData={({ dateString, dateType }, callback) => this.setState({ dateString, dateType }, callback)}
          getExtraData={() => ({ dateType: this.state.dateType, dateString: this.state.dateString })}
          onSearch={this.handleSearch}
        >
          <FullDatePicker
            dateType={this.state.dateType}
            dateString={this.state.dateString}
            onlyItem
            onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
            options={['0', '1', '3']}
          />
        </LocalSearch>
        <LayoutCard style={{ marginBottom: 16 }}>
          <Row gutter={8}>
            <Col span={18}>
              <CommonChart
                chartId='KrAlarmLogNumPageBar'
                {...chartData}
                style={{ height: 300 }}
              />
            </Col>
            <Col span={6}>
              <TableChart option={pieChartOption} type={2} style={{ height: 300 }} />
            </Col>
          </Row>

        </LayoutCard>
        <LayoutCard style={{ textAlign: 'right' }}>
          <ExportToExcel fileName='报警统计' tableId='KrAlarmLogNumPageTable' />
          <div id='KrAlarmLogNumPageTable'>
            <EditableTable
              size='small'
              bordered
              pagination={false}
              scroll={{ x: '100%' }}
              style={{ marginTop: 8 }}
              data={dataSource}
              columns={columns}
            /></div>
        </LayoutCard>
      </div>
    )
  }
}

export default connect(({ login }) => ({ login }))(KrAlarmLogNumPage)