mh_jy_safe_web/src/components/CustomPages/EM/EmHistoryTimePage.js

// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Table, message } from 'antd'
import { Search, ExportToExcel, LayoutCard } from '@woowalker/feui'
import CommonChart from '../../Chart/CommonChart'
// 工具库
import moment from 'moment'
import { cloneDeep } from 'lodash'
import { initFilter, addRuleAndGroups, renderExportCell } from '../../../utils/common'

// 消耗网络 -> 同环比统计
class EmHistoryTimePage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      month: moment().format('YYYY-MM'),
      day: moment().format('YYYY-MM-DD'),
      redisDate: '', // redis 缓存存储接口返回的 date
      selectedRowKeys: [],
      monthsData: {}, // 存储鼠标移上对应展示 dataSource 的对象
      showColumns: [], // 展示的表格列配置
      showDataSource: [], // 展示的表格
      exportColumns: [], // 用于导出数据的隐藏的表格列配置
      exportDataSource: [], // 用于导出数据的隐藏的表格
      chartData: {},
      searchRules: {}
    }
  }

  handleSearch = (value) => {
    this.state.searchRules = cloneDeep(value)

    value.rules.push({
      field: 'Parameter1',
      operator: 0,
      value: this.props.formParam.Parameter1,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: '1',
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: this.state.month,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter4',
      operator: 0,
      value: this.state.day,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter5',
      operator: 0,
      value: this.props.data.id,
      isCustom: true,
      isSysParam: false,
    })

    const json = initFilter(this.props.login.OrgId)
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetHistoryTimeData',
      payload: json
    }).then(res => {
      if (res) {
        if (res.msg) {
          message.error(res.msg)
          return
        }

        const { chartData, headTitle, select, date, dateDic, tableData, dataSources } = res
        // 展示的 table 的列配置
        const showColumns = [
          { title: '状态', dataIndex: 'Status' },
          { title: '计量点名称', dataIndex: 'Name' },
          { title: '节点', dataIndex: 'NodeName' },
          { title: '月份', dataIndex: 'Month' },
          { title: '同比值', dataIndex: 'Yoy' },
          { title: '同比（比例%）', dataIndex: 'YoyRatio' },
          { title: '环比值', dataIndex: 'Mom' },
          { title: '环比（比例%）', dataIndex: 'MomRatio' },
          { title: '当前值', dataIndex: 'Current' }
        ]
        showColumns.forEach(item => {
          item.render = (text, record, index) => {
            const color = this.state.selectedRowKeys.indexOf(record.key) !== -1 ? 'inherit' : '#bfbfbf'
            return <span style={{ color }}>{text}</span>
          }
        })
        // 导出的 table 的列配置
        const exportColumns = []
        headTitle.forEach((item, Index) => {
          const column = { title: item.Title, dataIndex: item.DataIndex }
          if (Index === 0) {
            column.render = (text, record, index) => {
              return {
                children: text,
                props: {
                  rowSpan: index % 3 === 0 ? 3 : 0
                }
              }
            }
          }
          exportColumns.push(column)
        })
        this.setState({
          redisDate: date.join(','),
          selectedRowKeys: select,
          monthsData: dateDic,
          showColumns,
          showDataSource: tableData,
          exportColumns,
          exportDataSource: dataSources,
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }

  saveRedis = () => {
    const { redisDate, selectedRowKeys } = this.state
    const json = {
      Code: this.props.formParam.Parameter1,
      Date: redisDate.split(',').map(item => moment(item).startOf('month').format('YYYY-MM-DD')).join(','),
      Ids: selectedRowKeys
    }

    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/HistoryRedisSave',
      payload: json,
      onlyData: false,
      ignoreThrottle: true
    }).then(res => {
      if (res && res.IsSuccessful && res.Data) {
        this.handleSearch(this.state.searchRules)
      }
    })
  }

  onSelectChange = (selectedRowKeys) => {
    if (selectedRowKeys.length == 0) {
      message.error('至少选中1个计量点')
    } else {
      this.setState({ selectedRowKeys }, this.saveRedis)
    }
  }

  setShowDataSource = (evt) => {
    const { monthsData } = this.state
    this.setState({ showDataSource: monthsData[evt.name] })
  }

  getInsertTitle = () => {
    const { formCode } = this.props
    const fieldConfigs = this.props.search.fieldConfigs[formCode] || []
    const exportInserTitle = ['按时间统计历史数据']
    fieldConfigs.forEach(fc => {
      const { label, value, dataSource } = fc
      const cellText = renderExportCell(value, dataSource, fc, this.props.app.enums || {})
      cellText && exportInserTitle.push(`${label}：${cellText}`)
    })
    return exportInserTitle.join(' ')
  }

  render () {
    const { formId, formCode } = this.props
    const { selectedRowKeys, chartData, showColumns, showDataSource, exportColumns, exportDataSource } = this.state

    const exportInserTitle = this.getInsertTitle()
    const { selectedNodes = [] } = this.props.data
    const titleText = selectedNodes.length ? `${selectedNodes.map(item => item.node.name).join('-')}` : ''
    return (
      <div className='scroll_page'>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
        />
        <LayoutCard>
          <div style={{ textAlign: 'right', marginBottom: 8 }}>
            <ExportToExcel
              fileName='按时间统计历史数据'
              insertRows={[exportInserTitle]}
              tableId="HistMonitorHistDataByTime"
            />
            <Table
              id="HistMonitorHistDataByTime"
              columns={exportColumns}
              dataSource={exportDataSource}
              pagination={false}
              style={{ display: 'none' }}
            />
          </div>
          <CommonChart
            chartId='EmHistoryTimePage'
            {...chartData}
            onMouseover={this.setShowDataSource}
            titleText={titleText}
            style={{ height: 300 }}
          />
          <Table
            size='small'
            rowSelection={{
              selectedRowKeys,
              onChange: this.onSelectChange
            }}
            columns={showColumns}
            dataSource={showDataSource}
            pagination={false}
            style={{ marginTop: 16 }}
          />
        </LayoutCard>
      </div>
    )
  }
}

export default connect(({ login, app, search }) => ({ login, app, search }))(EmHistoryTimePage)