240 lines
8.0 KiB
JavaScript
240 lines
8.0 KiB
JavaScript
// 核心库
|
||
import React from 'react'
|
||
import { connect } from 'dva'
|
||
// 组件库
|
||
import { Form, Radio, Row, Col, Collapse } from 'antd'
|
||
import { IFComponent, LayoutCard } from '@woowalker/feui'
|
||
import CommonChart from '../../Chart/CommonChart'
|
||
// 工具库
|
||
import moment from 'moment'
|
||
// 样式
|
||
import styles from './index.css'
|
||
|
||
const { Panel } = Collapse
|
||
|
||
class EmAppRealTimePage extends React.Component {
|
||
constructor (props) {
|
||
super(props)
|
||
this.state = {
|
||
data: [],
|
||
realData: [],
|
||
showData: [],
|
||
chartData: {},
|
||
heartbertData: [],
|
||
num: 1,
|
||
time: moment().add(-6, 'hour').format('YYYY-MM-DD HH:mm:ss') + "," + moment().format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
this.timer = -1
|
||
this._unmounted = false
|
||
}
|
||
|
||
componentDidMount () {
|
||
this.getRealTimeData()
|
||
this.getChartData()
|
||
}
|
||
|
||
componentWillUnmount () {
|
||
this._unmounted = true
|
||
clearTimeout(this.timer)
|
||
}
|
||
|
||
getRealTimeData = () => {
|
||
const json = {
|
||
OrgId: this.props.login.OrgId,
|
||
Parameter1: this.props.formParam.Parameter1,
|
||
Parameter2: this.props.login.userId,
|
||
Parameter3: this.props.data.id,
|
||
Parameter4: this.props.data.isNode,
|
||
}
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: 'EM/Monitoring/GetAppRealTimeData',
|
||
payload: json
|
||
}).then(res => {
|
||
res && !this._unmounted && this.setState({
|
||
data: res.Data,
|
||
realData: res.realData,
|
||
showData: res.showData,
|
||
heartbertData: res.heartbertData
|
||
})
|
||
}).finally(() => {
|
||
if (!this._unmounted) {
|
||
// 一个接口请求完之后，再定时进行请求
|
||
clearTimeout(this.timer)
|
||
this.timer = setTimeout(this.getRealTimeData, 5000)
|
||
}
|
||
})
|
||
}
|
||
|
||
getChartData = () => {
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: 'EM/Monitoring/GetVarIdByApp',
|
||
payload: {
|
||
OrgId: this.props.login.OrgId,
|
||
Parameter3: this.props.data.id,
|
||
Parameter4: this.props.data.isNode
|
||
}
|
||
}).then(res => {
|
||
if (res) {
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: 'FM/FMSrcTag/GetchartPageApiEntities',
|
||
payload: {
|
||
OrgId: this.props.login.OrgId,
|
||
Parameter1: this.state.time,
|
||
Keyword: res
|
||
}
|
||
}).then(response => {
|
||
if (response) {
|
||
this.setState({
|
||
chartData: {
|
||
xAxis: response.XAxis[0].Data,
|
||
yAxis: response.YAxis,
|
||
data: response.Data
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
handleChange = (e) => {
|
||
let time = ''
|
||
const num = e.target.value
|
||
switch (num) {
|
||
case 1:
|
||
time = moment().add(-6, 'hour').format('YYYY-MM-DD HH:mm:ss') + "," + moment().format('YYYY-MM-DD HH:mm:ss')
|
||
break
|
||
case 2:
|
||
time = moment().add(-12, 'hour').format('YYYY-MM-DD HH:mm:ss') + "," + moment().format('YYYY-MM-DD HH:mm:ss')
|
||
break
|
||
case 3:
|
||
time = moment().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss') + "," + moment().format('YYYY-MM-DD HH:mm:ss')
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
this.setState({ num, time }, this.getChartData)
|
||
}
|
||
|
||
render () {
|
||
let bg_class = styles.electric_bg
|
||
let status_class = styles.electric_status
|
||
let curr_class = styles.electric_curr
|
||
let sum_class = styles.electric_sum
|
||
|
||
switch (this.props.formParam.Parameter1) {
|
||
case 'Water':
|
||
bg_class = styles.water_bg
|
||
status_class = styles.water_status
|
||
curr_class = styles.water_curr
|
||
sum_class = styles.water_sum
|
||
break
|
||
case 'Hot':
|
||
bg_class = styles.hot_bg
|
||
status_class = styles.hot_status
|
||
curr_class = styles.hot_curr
|
||
sum_class = styles.hot_sum
|
||
break
|
||
case 'Gas':
|
||
bg_class = styles.gas_bg
|
||
status_class = styles.gas_status
|
||
curr_class = styles.gas_curr
|
||
sum_class = styles.gas_sum
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
const { data, realData, chartData, showData } = this.state
|
||
return (
|
||
<div className='scroll_page'>
|
||
<LayoutCard style={{ marginBottom: 16 }}>
|
||
<Row gutter={16}>
|
||
<Col span={4} style={{ marginTop: 48 }}>
|
||
<div className={styles.realTimePage_boxWrap}>
|
||
{
|
||
data.map(item => {
|
||
const color = item.State === 0 ? '#a4abb6' : item.State === 1 ? '#70b603' : '#d9001b'
|
||
return (
|
||
<div
|
||
key={item.Key}
|
||
className={styles.meter_box}
|
||
>
|
||
<div className={bg_class}>
|
||
<div className={status_class} style={{ backgroundColor: color }} />
|
||
<div className={curr_class}>
|
||
<span>{item.VarName}({item.Unit})</span>
|
||
<span>{item.Value}</span>
|
||
</div>
|
||
<div className={sum_class}>
|
||
{
|
||
showData.map((attr, attrIndex) => {
|
||
const value = `${attr.Value}${attr.Unit === 'None' || attr.Unit === null ? '' : attr.Unit}`
|
||
return <p key={`${attr.Name}_${attrIndex}`} className={styles.sum_text}>{`${attr.Name}：${value}`}</p>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
<p className={styles.meter_title}>{item.ApplianceName}</p>
|
||
<p className={styles.meter_detail}>{item.NodeName}</p>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</Col>
|
||
<Col span={20} style={{ textAlign: 'center' }}>
|
||
<Radio.Group value={this.state.num} buttonStyle="solid" onChange={this.handleChange}>
|
||
<Radio.Button value={1}>过去六小时</Radio.Button>
|
||
<Radio.Button value={2}>过去十二小时</Radio.Button>
|
||
<Radio.Button value={3}>过去二十四小时</Radio.Button>
|
||
</Radio.Group>
|
||
<CommonChart chartId='EmAppRealTimePage' {...chartData} style={{ height: 300 }} />
|
||
</Col>
|
||
</Row>
|
||
</LayoutCard>
|
||
<IFComponent IF={realData.length}>
|
||
<LayoutCard title='器具属性实时数据'>
|
||
<Collapse
|
||
defaultActiveKey={realData.map((item, index) => `${item.Name}_${index}`)}
|
||
style={{ marginTop: '0.15rem' }}
|
||
>
|
||
{
|
||
realData.map((item, index) => {
|
||
return (
|
||
<Panel header={item.Name} key={`${item.Name}_${index}`}>
|
||
<Form labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} colon={false}>
|
||
<Row>
|
||
{
|
||
item.Items.map((attr, attrIndex) => {
|
||
const value = `${attr.Value}${attr.Unit === 'None' || attr.Unit === null ? '' : attr.Unit}`
|
||
return (
|
||
<Col key={`${attr.Name}_${attrIndex}`} span={6}>
|
||
<Form.Item
|
||
label={<div title={attr.Name} className='text-ellipsis'>{attr.Name}</div>}
|
||
style={{ marginBottom: 0 }}
|
||
>
|
||
<div title={value} className='text-ellipsis'>：<span className={styles.equipmentFont}>{value}</span></div>
|
||
</Form.Item>
|
||
</Col>
|
||
)
|
||
})
|
||
}
|
||
</Row>
|
||
</Form>
|
||
</Panel>
|
||
)
|
||
})
|
||
}
|
||
</Collapse>
|
||
</LayoutCard>
|
||
</IFComponent>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default connect(({ login }) => ({ login }))(EmAppRealTimePage)
|