289 lines
8.2 KiB
JavaScript
289 lines
8.2 KiB
JavaScript
|
// 核心库
|
|||
|
|
import React from 'react'
|
|||
|
|
import { connect } from 'dva'
|
|||
|
|
// 组件库
|
|||
|
|
import { Form, Button, DatePicker, Table, message, Icon, Upload, Select, Input } from 'antd'
|
|||
|
|
import { ExportToExcel, LayoutCard } from '@woowalker/feui'
|
|||
|
|
// 工具库
|
|||
|
|
import moment from 'moment'
|
|||
|
|
import { initFilter,addRuleAndGroups } from '../../../utils/common'
|
|||
|
|
// 样式
|
|||
|
|
import config from "../../../config"
|
|||
|
|
|
|||
|
|
const { Option } = Select
|
|||
|
|
|
|||
|
|
class EmImportHistDataPage extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props)
|
|||
|
|
this.state = {
|
|||
|
|
importUrl: '',
|
|||
|
|
head: [],
|
|||
|
|
dataSource: [],
|
|||
|
|
data: [],
|
|||
|
|
selectedRowKeys: [],
|
|||
|
|
messages: "",
|
|||
|
|
energyType: "Electric",
|
|||
|
|
appName: "",
|
|||
|
|
nodeName: "",
|
|||
|
|
appGrade: "",
|
|||
|
|
dateYear: moment().format('YYYY'),
|
|||
|
|
option: []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
this.getConsumData()
|
|||
|
|
this.getTpye()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getTpye = () => {
|
|||
|
|
const { login, dispatch } = this.props
|
|||
|
|
const json = initFilter(login.OrgId)
|
|||
|
|
dispatch({
|
|||
|
|
type: 'app/getDataByPost',
|
|||
|
|
url: 'KR/Statistics/GetEnergyType',
|
|||
|
|
payload: json,
|
|||
|
|
onlyData: false,
|
|||
|
|
onComplete: (res) => {
|
|||
|
|
if (res && res.IsSuccessful && res.Data && res.Data) {
|
|||
|
|
this.setState({ option: res.Data.option })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fillImportData = (ret) => {
|
|||
|
|
if (!ret) {
|
|||
|
|
this.setState({
|
|||
|
|
data: [],
|
|||
|
|
selectedRowKeys: [],
|
|||
|
|
messages: '',
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (ret.ErrorMessage) {
|
|||
|
|
this.setState({
|
|||
|
|
messages: ('错误：' + ret.ErrorMessage)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
let messages = ''
|
|||
|
|
if (ret.Data && ret.Data.MessageList && ret.Data.MessageList.length) {
|
|||
|
|
var tmps = []
|
|||
|
|
ret.Data.MessageList.forEach((n, i) => {
|
|||
|
|
tmps.push(n)
|
|||
|
|
})
|
|||
|
|
messages = tmps.join('\n')
|
|||
|
|
}
|
|||
|
|
const selectedRowKeys = []
|
|||
|
|
if (ret.Data && ret.Data.Data) {
|
|||
|
|
ret.Data.Data.forEach((n, i) => {
|
|||
|
|
selectedRowKeys.push(n.ID)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.setState({
|
|||
|
|
data: (ret.Data && ret.Data.Data ? ret.Data.Data : []),
|
|||
|
|
selectedRowKeys,
|
|||
|
|
messages
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getDataUpdate = (update) => {
|
|||
|
|
if (update) {
|
|||
|
|
this.setState({ importUrl: 'api/PF/Import/ImportHistData' })
|
|||
|
|
} else {
|
|||
|
|
this.setState({ importUrl: 'api/PF/Import/ImportHistData' })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
changeType = (value) => {
|
|||
|
|
this.setState({
|
|||
|
|
energyType: value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
changeGrade = (value) => {
|
|||
|
|
this.setState({
|
|||
|
|
appGrade: value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onChangeApp = (value) => {
|
|||
|
|
this.setState({
|
|||
|
|
appName: value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onChangeNode = (value) => {
|
|||
|
|
this.setState({
|
|||
|
|
nodeName: value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleSearch = (value) => {
|
|||
|
|
this.getConsumData(value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
dateYearChange = (dateYear, str) => {
|
|||
|
|
this.setState({ dateYear: moment(dateYear).format('YYYY') })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getConsumData = (value) => {
|
|||
|
|
const json = {
|
|||
|
|
OrgId: this.props.login.OrgId,
|
|||
|
|
Parameter1: this.state.energyType,
|
|||
|
|
Parameter3: this.state.dateYear,
|
|||
|
|
Parameter4: this.state.appName,
|
|||
|
|
Parameter5: this.state.nodeName,
|
|||
|
|
Parameter6: this.state.appGrade,
|
|||
|
|
}
|
|||
|
|
addRuleAndGroups(json, value)
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: 'app/getDataByPost',
|
|||
|
|
url: 'EM/Monitoring/GetHistDosagesMonthData',
|
|||
|
|
payload: json,
|
|||
|
|
onlyData: false,
|
|||
|
|
onComplete: (res) => {
|
|||
|
|
if (res && res.IsSuccessful && res.Data && res.Data.tableHead && res.Data.tableData) {
|
|||
|
|
const { tableHead, tableData } = res.Data
|
|||
|
|
this.setState({
|
|||
|
|
head: tableHead,
|
|||
|
|
dataSource: tableData
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
let url = this.state.importUrl
|
|||
|
|
const { head, dataSource ,option} = this.state
|
|||
|
|
const that = this
|
|||
|
|
const uploadProps = {
|
|||
|
|
showUploadList: false,
|
|||
|
|
name: 'file',
|
|||
|
|
action: config.serviceHost(url),
|
|||
|
|
data: { OrgId: that.props.login.OrgId, ImportConfigCode: 'configCode' },
|
|||
|
|
fileList: that.state.updateLoadFileList,
|
|||
|
|
accept: '.xls,.xlsx',
|
|||
|
|
onChange(info) {
|
|||
|
|
that.setState({
|
|||
|
|
updateLoadFileList: info.fileList,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (info.file.status === 'done') {
|
|||
|
|
if (info.file.response.IsSuccessful) {
|
|||
|
|
that.setState({
|
|||
|
|
head: info.file.response.Data.Head,
|
|||
|
|
dataSource: info.file.response.Data.DataSource
|
|||
|
|
})
|
|||
|
|
if (url === 'api/PF/Import/ImportHistData') {
|
|||
|
|
message.info(`${info.file.name} 导入并保存成功`)
|
|||
|
|
}
|
|||
|
|
that.fillImportData(info.file.response)
|
|||
|
|
} else {
|
|||
|
|
message.error(`Excel单元格式不正确，无法识别！ `)
|
|||
|
|
}
|
|||
|
|
} else if (info.file.status === 'error') {
|
|||
|
|
if (info.file.response && info.file.response.ErrorMessage) {
|
|||
|
|
message.error(`${info.file.name} 导入错误，详情：${info.file.response.ErrorMessage}`)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
message.error(`${info.file.name} 导入错误`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
const columns = []
|
|||
|
|
head.forEach((n, i) => {
|
|||
|
|
var item = {
|
|||
|
|
title: n.Title, dataIndex: n.DataIndex
|
|||
|
|
}
|
|||
|
|
columns.push(item)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const paginationConfig = {
|
|||
|
|
pageSizeOptions: ['10', '20'],
|
|||
|
|
pageSize: 10,
|
|||
|
|
total: this.state.dataSource.length,
|
|||
|
|
showSizeChanger: true,
|
|||
|
|
size: 'small',
|
|||
|
|
showTotal: () => `共 ${this.state.dataSource.length} 条`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<LayoutCard style={{ marginBottom: '0.15rem' }}>
|
|||
|
|
<div className='advanced-search__form'>
|
|||
|
|
<Form>
|
|||
|
|
<Form.Item label="查询年份">
|
|||
|
|
<DatePicker
|
|||
|
|
allowClear={false}
|
|||
|
|
mode='year'
|
|||
|
|
format='YYYY'
|
|||
|
|
value={moment(this.state.dateYear, 'YYYY')}
|
|||
|
|
onPanelChange={this.dateYearChange}
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label='器具名称'>
|
|||
|
|
<Input placeholder="" value={this.state.appName} style={{ width: '100%' }} onChange={(evt) => this.onChangeApp(evt.target.value)} />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label='节点名称'>
|
|||
|
|
<Input placeholder="" value={this.state.nodeName} style={{ width: '100%' }} onChange={(evt) => this.onChangeNode(evt.target.value)} />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label='器具等级'>
|
|||
|
|
<Select style={{ width: '100%' }} onChange={this.changeGrade} allowClear={true}>
|
|||
|
|
<Option value={0}>一级</Option>
|
|||
|
|
<Option value={1}>二级</Option>
|
|||
|
|
<Option value={2}>三级</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label='矿山安全类型'>
|
|||
|
|
<Select style={{ width: '100%' }} defaultValue="电" onChange={this.changeType}>
|
|||
|
|
{option.map(item => <Option key={item.ID} value={item.CODE}>{item.NAME}</Option>)}
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
<div className='advanced-search__btns-zone'>
|
|||
|
|
<Button type='primary' onClick={this.handleSearch}>查询</Button>
|
|||
|
|
<div className='advanced-search__tool-wrap'>
|
|||
|
|
<div className='advanced-search__children'>
|
|||
|
|
<Upload {...uploadProps}>
|
|||
|
|
<Button type='primary' onClick={() => this.getDataUpdate(true)}> <Icon type="upload" /> 导入</Button>
|
|||
|
|
</Upload>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Form>
|
|||
|
|
</div>
|
|||
|
|
</LayoutCard>
|
|||
|
|
<LayoutCard style={{ textAlign: 'right' }}>
|
|||
|
|
<ExportToExcel
|
|||
|
|
fileName={'导入历史数据#' + this.state.dateYear}
|
|||
|
|
insertRows={['导入历史数据#' + this.state.dateYear]}
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={dataSource}
|
|||
|
|
/>
|
|||
|
|
<Table
|
|||
|
|
id='ImportHistDataTable'
|
|||
|
|
size='small'
|
|||
|
|
style={{ marginTop: 8 }}
|
|||
|
|
bordered
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={dataSource}
|
|||
|
|
scroll={{ x: '100%' }}
|
|||
|
|
pagination={paginationConfig}
|
|||
|
|
/>
|
|||
|
|
</LayoutCard>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
EmImportHistDataPage.propTypes = {
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default connect(({ login, app }) => ({ login, app }))(Form.create()(EmImportHistDataPage))
|