272 lines
9.1 KiB
JavaScript
272 lines
9.1 KiB
JavaScript
// 核心库
|
||
import React, { Component } from 'react'
|
||
import { connect } from 'dva'
|
||
import PropTypes from 'prop-types'
|
||
// 组件库
|
||
import ReactEcharts from "echarts-for-react"
|
||
import { Popover, Table, Icon, Spin, Input, message } from 'antd'
|
||
import { ExportToExcel, IFComponent } from '@woowalker/feui'
|
||
// 工具库
|
||
import { isEqual } from 'lodash'
|
||
import { uuid, initFilter } from '../../utils/common'
|
||
// 样式
|
||
import classNames from 'classnames'
|
||
import styles from './chart.css'
|
||
|
||
class TableChart extends Component {
|
||
constructor (props) {
|
||
super(props)
|
||
this.state = {
|
||
data: [],
|
||
columns: [],
|
||
toggleChart: false,
|
||
// 用于列表导出的 id
|
||
tableId: uuid(),
|
||
// 设定的参考目标值
|
||
targetVal: undefined
|
||
}
|
||
this.refOfChart = null
|
||
}
|
||
|
||
componentDidMount () {
|
||
const { option, type, chartId } = this.props
|
||
if (option) {
|
||
this.getTableData(option, type)
|
||
chartId && this.getTargetVal()
|
||
}
|
||
}
|
||
|
||
UNSAFE_componentWillReceiveProps (nextProps) {
|
||
if (!isEqual(this.props.option, nextProps.option)) {
|
||
this.getTableData(nextProps.option, nextProps.type)
|
||
}
|
||
}
|
||
|
||
/** 生成 table 数据 */
|
||
getTableData = (option, type) => {
|
||
const data = []
|
||
const columns = []
|
||
const { radar, series = [], xAxis = [], yAxis = [] } = option
|
||
switch (type) {
|
||
// 饼图
|
||
case 2:
|
||
if (series[0] && Array.isArray(series[0].data) && series[0].data.length) {
|
||
// 从 series 取 columns
|
||
let total = 0
|
||
series[0].data.forEach(({ name, value }) => {
|
||
total += value
|
||
columns.push({ title: name, dataIndex: name, key: name })
|
||
})
|
||
// 从 series 取 data
|
||
const tempTableData = {}
|
||
series[0].data.forEach(({ name, value }) => {
|
||
tempTableData[name] = `${value}(${total ? (value / total * 100).toFixed(2) : 0}%)`
|
||
})
|
||
data.push(tempTableData)
|
||
}
|
||
break
|
||
// 雷达图
|
||
case 3:
|
||
if (radar[0] && Array.isArray(radar[0].indicator) && radar[0].indicator.length) {
|
||
columns.push({ title: '类型', dataIndex: 'name', key: 'name' })
|
||
// 从 radar 取 columns
|
||
radar[0].indicator.forEach(item => columns.push({ title: `${item.text}(${item.max})`, dataIndex: item.text, key: item.text }))
|
||
// 从 series 取 data
|
||
series.forEach(serie => {
|
||
const tempTableData = {}
|
||
columns.forEach((item, index) => {
|
||
const { name, data: serieData } = serie
|
||
tempTableData[item.key] = item.title === '类型' ? name : serieData[0].value[index - 1]
|
||
})
|
||
data.push(tempTableData)
|
||
})
|
||
}
|
||
break
|
||
// 折线、柱状图
|
||
default:
|
||
if (xAxis[0] && Array.isArray(xAxis[0].data) && xAxis[0].data.length) {
|
||
columns.push({ title: '类型', dataIndex: 'name', key: 'name' })
|
||
// 从 xAxis 取 columns
|
||
xAxis[0].data.forEach(item => columns.push({ title: item, dataIndex: item, key: item }))
|
||
// 从 series 取 data
|
||
series.forEach(serie => {
|
||
const tempTableData = {}
|
||
columns.forEach((item, index) => {
|
||
const { name, data: serieData, yAxisIndex } = serie
|
||
const yName = (yAxis[yAxisIndex || 0] || {}).name
|
||
tempTableData[item.key] = item.title === '类型' ? `${name}${yName ? '(' + yName + ')' : ''}` : (serieData[index - 1]?.TooltipValue || serieData[index - 1]?.value)
|
||
})
|
||
data.push(tempTableData)
|
||
})
|
||
}
|
||
}
|
||
this.setState({ data, columns })
|
||
}
|
||
|
||
/** 获取 chartId 对应的目标值 */
|
||
getTargetVal = () => {
|
||
const { chartId, login, dispatch } = this.props
|
||
const json = initFilter(login.OrgId, chartId)
|
||
dispatch({
|
||
type: 'app/getRedisValue',
|
||
payload: json
|
||
}).then(res => {
|
||
this.setState({ targetVal: isNaN(res) ? res : Number(res) })
|
||
})
|
||
}
|
||
|
||
/** 设置 chartId 对应的目标值 */
|
||
setTargetVal = (value) => {
|
||
const { chartId, login, dispatch } = this.props
|
||
const json = initFilter(login.OrgId, chartId)
|
||
json.Parameter1 = value
|
||
dispatch({
|
||
type: 'app/setRedisValue',
|
||
payload: json
|
||
}).then(res => {
|
||
if (res) {
|
||
this.setState({ targetVal: isNaN(value) ? value : Number(value) })
|
||
message.success('操作成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
/** 处理目标值 targetVal 的修改 */
|
||
handleTVChange = (evt) => {
|
||
const { value } = evt.target
|
||
const targetVal = value === '' ? '' : isNaN(value) ? value : Number(value)
|
||
this.setState({ targetVal })
|
||
}
|
||
|
||
getChartOption = (option) => {
|
||
const { targetVal } = this.state
|
||
if (Array.isArray(option.series) && option.series.length && targetVal) {
|
||
if (Array.isArray(option.yAxis) && option.yAxis.length) {
|
||
// 标记线默认对应的Y轴就是第一条Y轴，所以这里默认取第一条Y轴进行设置
|
||
const { max, min } = option.yAxis[0]
|
||
let maxSet = false
|
||
let minSet = false
|
||
// 监测对应 max 值是否小于 targetVal 值
|
||
if (max) {
|
||
maxSet = max < targetVal
|
||
} else {
|
||
// 取对应默认第一条Y轴的数据，取其最大值
|
||
const targetSeries = option.series.filter(item => item.yAxisIndex === 0)
|
||
const maxData = Math.max.apply(null, targetSeries.map(item => Math.max.apply(null, item.data)))
|
||
maxSet = maxData < targetVal
|
||
}
|
||
// 监测对应 min 值是否大于 targetVal 值
|
||
minSet = min > targetVal
|
||
// 设置 targetVal 对应的 max 和 min 值
|
||
maxSet && (option.yAxis[0].max = targetVal)
|
||
minSet && (option.yAxis[0].min = targetVal)
|
||
}
|
||
return {
|
||
...option,
|
||
series: [
|
||
{
|
||
name: '标记线',
|
||
type: 'line',
|
||
markLine: {
|
||
label: {
|
||
position: 'insideEndTop',
|
||
formatter: '{b}: {c}'
|
||
},
|
||
lineStyle: {
|
||
color: '#096dd9'
|
||
},
|
||
data: [
|
||
{
|
||
name: '目标值',
|
||
yAxis: targetVal,
|
||
lineStyle: { width: 2 }
|
||
}
|
||
]
|
||
}
|
||
}
|
||
].concat(option.series)
|
||
}
|
||
}
|
||
return option
|
||
}
|
||
|
||
render () {
|
||
const { chartId, option, onEvents, loading, style } = this.props
|
||
|
||
const { targetVal, data, columns, toggleChart } = this.state
|
||
const loadingGet = this.props.dvaLoading.effects['app/getRedisValue']
|
||
const loadingSet = this.props.dvaLoading.effects['app/setRedisValue']
|
||
return (
|
||
<Spin size='large' spinning={!!loading} wrapperClassName={styles.chartTable}>
|
||
<div className={styles.chartTableSwap}>
|
||
{/** 额外需要插入的工具集 */}
|
||
{this.props.children}
|
||
{/** 目标值设定 */}
|
||
<IFComponent IF={!toggleChart && !!chartId}>
|
||
<Popover
|
||
content={
|
||
<Input.Search
|
||
autoFocus
|
||
allowClear
|
||
value={targetVal}
|
||
loading={loadingGet || loadingSet}
|
||
placeholder='请输入设定目标值'
|
||
enterButton='保存'
|
||
onChange={this.handleTVChange}
|
||
onSearch={this.setTargetVal}
|
||
/>
|
||
}
|
||
trigger='click'
|
||
>
|
||
<Icon type='setting' title='目标值设定' style={{ marginRight: 10 }} />
|
||
</Popover>
|
||
</IFComponent>
|
||
{/** 图形列表切换按钮 */}
|
||
<span onClick={() => { this.setState({ toggleChart: !toggleChart }) }}>
|
||
<Icon type='swap' />
|
||
<span>{`切换${toggleChart ? '图表' : '列表'}`}</span>
|
||
</span>
|
||
{/** 导出按钮 */}
|
||
<IFComponent IF={toggleChart}>
|
||
<ExportToExcel
|
||
fileName='列表数据'
|
||
tableId={this.state.tableId}
|
||
render={({ onExport }) => <Icon type='download' title='导出' onClick={onExport} style={{ paddingLeft: 10 }} />}
|
||
/>
|
||
</IFComponent>
|
||
</div>
|
||
<ReactEcharts
|
||
ref={ref => this.refOfChart = ref?.getEchartsInstance()}
|
||
notMerge
|
||
lazyUpdate
|
||
option={this.getChartOption(option)}
|
||
onEvents={onEvents}
|
||
className={classNames(styles.chart, { [styles.show]: !toggleChart, [styles.hide]: toggleChart })}
|
||
style={{ width: '100%', height: '100%', ...style }}
|
||
/>
|
||
<Table
|
||
id={this.state.tableId}
|
||
bordered
|
||
rowKey='ID'
|
||
size='small'
|
||
dataSource={data}
|
||
columns={columns}
|
||
scroll={{ x: true }}
|
||
pagination={false}
|
||
className={classNames(styles.table, { [styles.show]: toggleChart, [styles.hide]: !toggleChart })}
|
||
/>
|
||
</Spin>
|
||
)
|
||
}
|
||
}
|
||
|
||
TableChart.propTypes = {
|
||
option: PropTypes.object,
|
||
type: PropTypes.string,
|
||
chartId: PropTypes.string,
|
||
onEvents: PropTypes.object,
|
||
style: PropTypes.object
|
||
}
|
||
|
||
export default connect(({ login, loading }) => ({ login, dvaLoading: loading }))(TableChart)
|