344 lines
10 KiB
JavaScript
344 lines
10 KiB
JavaScript
// 核心库
|
||
import React from 'react'
|
||
import { connect } from 'dva'
|
||
// 组件库
|
||
import { Icon, Table, message, Button } from 'antd'
|
||
import { Search, ExportToExcel, IFComponent, 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 EmHistoryPage extends React.Component {
|
||
constructor (props) {
|
||
super(props)
|
||
this.state = {
|
||
type: '1',
|
||
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: this.state.type,
|
||
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.TreeSelected.join(','),
|
||
isCustom: true,
|
||
isSysParam: false,
|
||
})
|
||
|
||
const json = initFilter(this.props.login.OrgId)
|
||
addRuleAndGroups(json, value)
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: 'EM/Monitoring/GetHistoryData',
|
||
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: 'Index' },
|
||
{ title: '计量点名称', dataIndex: 'Name' },
|
||
{ title: '节点', dataIndex: 'NodeName' },
|
||
{ title: '最大值', dataIndex: 'Max' },
|
||
{ title: '最小值', dataIndex: 'Min' },
|
||
{ title: '平均值', dataIndex: 'Avg' },
|
||
{ title: '当前值', dataIndex: 'Current' }
|
||
]
|
||
showColumns.forEach(item => {
|
||
item.render = (text, record, index) => {
|
||
return <span style={{ color: record.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 { showDataSource, monthsData } = this.state
|
||
showDataSource.forEach((item, index) => {
|
||
item.Current = monthsData[evt.name][index]
|
||
})
|
||
this.setState({ showDataSource: [...showDataSource] })
|
||
}
|
||
|
||
throughClick = (evt) => {
|
||
const { type, searchRules } = this.state
|
||
switch (type) {
|
||
case '1':
|
||
this.setState({ month: evt.name, type: '2' }, () => {
|
||
this.handleSearch(searchRules)
|
||
})
|
||
break
|
||
case '2':
|
||
this.setState({ day: evt.name, type: '3' }, () => {
|
||
this.handleSearch(searchRules)
|
||
})
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
backClick = () => {
|
||
const { type, searchRules } = this.state
|
||
switch (type) {
|
||
case '2':
|
||
this.setState({ type: '1' }, () => {
|
||
this.handleSearch(searchRules)
|
||
})
|
||
break
|
||
case '3':
|
||
this.setState({ type: '2' }, () => {
|
||
this.handleSearch(searchRules)
|
||
})
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
beforeHandle = () => {
|
||
const month = moment(this.state.month + '-1', 'YYYY-MM-DD')
|
||
const day = moment(this.state.day, 'YYYY-MM-DD')
|
||
|
||
switch (this.state.type) {
|
||
case '2':
|
||
this.setState({ month: month.add(-1, 'months').format('YYYY-MM') }, () => {
|
||
this.handleSearch(this.state.searchRules)
|
||
})
|
||
break
|
||
case '3':
|
||
this.setState({ day: day.add(-1, 'days').format('YYYY-MM-DD') }, () => {
|
||
this.handleSearch(this.state.searchRules)
|
||
})
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
afterHandle = () => {
|
||
const month = moment(this.state.month + '-1', 'YYYY-MM-DD')
|
||
const day = moment(this.state.day, 'YYYY-MM-DD')
|
||
switch (this.state.type) {
|
||
case '2':
|
||
this.setState({ month: month.add(1, 'months').format('YYYY-MM') }, () => {
|
||
this.handleSearch(this.state.searchRules)
|
||
})
|
||
break
|
||
case '3':
|
||
this.setState({ day: day.add(1, 'days').format('YYYY-MM-DD') }, () => {
|
||
this.handleSearch(this.state.searchRules)
|
||
})
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
getInsertTitle = () => {
|
||
const { formCode } = this.props
|
||
const fieldConfigs = this.props.search.fieldConfigs[formCode] || []
|
||
const exportInserTitle = ['历史数据']
|
||
if (this.state.type === "1") {
|
||
fieldConfigs.forEach(fc => {
|
||
const { label, value, dataSource } = fc
|
||
const cellText = renderExportCell(value, dataSource, fc, this.props.app.enums || {})
|
||
cellText && exportInserTitle.push(`${label}：${cellText}`)
|
||
})
|
||
}
|
||
else {
|
||
exportInserTitle.push(`${this.state.month}`)
|
||
}
|
||
return exportInserTitle.join(' ')
|
||
}
|
||
|
||
render () {
|
||
const { formId, formCode } = this.props
|
||
const { selectedRowKeys, chartData, showColumns, showDataSource, exportColumns, exportDataSource } = this.state
|
||
|
||
const exportToExcel = this.state.type === "1" ? "历史数据" : "历史数据" + this.state.month
|
||
const exportInserTitle = this.getInsertTitle()
|
||
const { selectedNodes = [] } = this.props.data
|
||
const saveImgName = selectedNodes.length ? `${selectedNodes.map(item => item.node.name).join('-')}历史检测` : '历史检测'
|
||
return (
|
||
<div className='scroll_page'>
|
||
<Search
|
||
formId={formId}
|
||
formCode={formCode}
|
||
onSearch={this.handleSearch}
|
||
iconEle={
|
||
<IFComponent IF={this.state.type !== '1'}>
|
||
<span
|
||
style={{ cursor: 'pointer', marginRight: 8 }}
|
||
onClick={this.backClick}>
|
||
<Icon type="rollback" />
|
||
<span>返回</span>
|
||
</span>
|
||
</IFComponent>
|
||
}
|
||
/>
|
||
<LayoutCard style={{ textAlign: 'center' }}>
|
||
<IFComponent IF={this.state.type !== '3'}>
|
||
<div style={{ textAlign: 'right', marginBottom: 8 }}>
|
||
<ExportToExcel
|
||
fileName={exportToExcel}
|
||
insertRows={[exportInserTitle]}
|
||
tableId="HistMonitorHistData"
|
||
/>
|
||
<Table
|
||
id='HistMonitorHistData'
|
||
columns={exportColumns}
|
||
dataSource={exportDataSource}
|
||
pagination={false}
|
||
style={{ display: 'none' }}
|
||
/>
|
||
</div>
|
||
</IFComponent>
|
||
<IFComponent IF={this.state.type === '2'}>
|
||
<Button.Group>
|
||
<Button size='small' onClick={this.beforeHandle}><Icon type="left" />上个月</Button>
|
||
<Button size='small' onClick={this.afterHandle}>下个月<Icon type="right" /></Button>
|
||
</Button.Group>
|
||
</IFComponent>
|
||
<IFComponent IF={this.state.type === '3'}>
|
||
<Button.Group>
|
||
<Button size='small' onClick={this.beforeHandle}><Icon type="left" />上一天</Button>
|
||
<Button size='small' onClick={this.afterHandle}>下一天<Icon type="right" /></Button>
|
||
</Button.Group>
|
||
</IFComponent>
|
||
<CommonChart
|
||
chartId='EmHistoryPage'
|
||
{...chartData}
|
||
onMouseover={this.setShowDataSource}
|
||
onClick={this.throughClick}
|
||
saveImgName={saveImgName}
|
||
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 }))(EmHistoryPage)
|