156 lines
4.4 KiB
JavaScript
156 lines
4.4 KiB
JavaScript
// 核心库
|
|
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)
|