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

// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Empty, Row, Col, message, Timeline } from 'antd'
import { Search, LayoutCard, ExportToExcel } from '@woowalker/feui'
import ListPage from '../../Table/ListPage'
import CommonChart from '../../Chart/CommonChart'
//工具库
import { addRuleAndGroups } from '../../../utils/common'
// 样式
import styles from './index.css'

class EmStructurePage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      searchRules: { rules: [] },
      insertRows: [],
      order: 1,
      alarmHead: [],
      alarmSource: [],
      appName: '',
      rowSelectedKeys: [],
      chartData: {}
    }
  }

  componentDidMount () {
    this.getNodeAlarmLog()
    this.getRowSelectedKeys(this.state.searchRules)
  }

  getRowSelectedKeys = (searchRules) => {
    const json = {
      OrgId: this.props.login.OrgId,
      Parameter1: this.props.data.id,
      Parameter2: this.props.data.isNode,
    }
    searchRules.rules.push({
      field: 'Parameter1',
      operator: 0,
      value: this.props.data.id,
      isCustom: true,
      isSysParam: false,
    })
    searchRules.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: this.props.data.isNode,
      isCustom: true,
      isSysParam: false,
    })
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetRowSelectedKeys',
      payload: json
    }).then(res => {
      if (res) {
        this.setState({        
          rowSelectedKeys: res,        
        },()=> this.child.loadData())
      }
    })
  }


  getNodeAlarmLog () {
    const json = {
      OrgId: this.props.login.OrgId,
      Parameter1: this.props.data.id,
      Parameter2: this.props.data.isNode,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetNodeAlarmLog',
      payload: json
    }).then(res => {
      if (res) {
        this.setState({
          alarmHead: res.alarmHead,
          alarmSource: res.alarmSource
        })
      }
    })
  }

  handleSearch = (value) => {
    value.rules.push({
      field: 'Parameter1',
      operator: 0,
      value: this.props.data.id,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: this.props.data.isNode,
      isCustom: true,
      isSysParam: false,
    })
    this.setState({
      searchRules: value,
      insertRows: value.rules.filter(rule => rule.field === 'Keyword').map(item => `查询时间：${item.value}`),
      order: 1
    }, () => {
      this.getData(value)
      this.getNodeAlarmLog()
      this.child.loadData(value)
    })
  }

  getData = (value) => {
    const json = {
      OrgId: this.props.login.OrgId,
      Parameter1: this.props.data.id,
      Parameter2: this.props.data.isNode,
      Parameter3:this.state.rowSelectedKeys.join(','),
      Order: this.state.order,
    }
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetStructureLineData',
      payload: json
    }).then(res => {
      if (res && res.chartData && res.chartData.XAxis.length > 0) {
        const { chartData, appName } = res
        this.setState({
          appName,
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }

  settingSave = (value) => {
    const json = {
      OrgId: this.props.login.OrgId,
      IdArry: value,
      Parameter1: this.props.data.id,
      Parameter2: this.props.data.isNode,
    } 
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/StructureSave',
      payload: json
    }).then(res => {
      if (res) {
        if (res.IsSucceed) {
          this.setState({        
            rowSelectedKeys: res.SelectRowKeys,        
          },()=> this.getData(this.state.searchRules))          
        } else {
          message.error(res.Msg)
        }
      }
    })
  }

  render () {
    const { formId, formCode } = this.props
    const { alarmHead, alarmSource, appName, rowSelectedKeys, chartData, insertRows } = this.state

    return (
      <div className='scroll_page'>
        <Search
          preventDefaultSearch
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}              
        />
        <Row style={{ marginBottom: 16 }}>
          <Col span={19}>
            <LayoutCard title='器具监测'>
              <CommonChart
                chartId='EmStructurePage'
                {...chartData}
                titleText={appName}
                style={{ height: 300 }}
              />
            </LayoutCard>
          </Col>
          <Col span={5}>
            <LayoutCard title={alarmHead[0] ? alarmHead[0].Title : '报警信息'}>
              <div className={styles.structure_alarm}>
                {!alarmSource.length ? <Empty style={{ marginTop: 65 }} /> : null}
                <Timeline>
                  {
                    alarmSource.map((item, index) => {
                      return <Timeline.Item color={'red'}>{item.describe}</Timeline.Item>
                    })
                  }
                </Timeline>
              </div>
            </LayoutCard>
          </Col>
        </Row>
        <LayoutCard className={styles.structure_table}>
          <div style={{ marginRight: 16 }}>
            <ExportToExcel
              tableId='EMStructureTable'
              fileName='器具属性表列表'
              insertRows={insertRows}
            />
          </div>
          <div id='EMStructureTable'>
            <ListPage
              preventDefaultSearch
              formCode='EM033'
              data={this.state.searchRules}
              onRef={ref => this.child = ref}
              rowSelectedKeys={rowSelectedKeys}             
              onRowSelectChange={this.settingSave}
            />
          </div>
        </LayoutCard>
      </div>
    )
  }
}

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