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)
|