import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Popover } from 'antd'
|
import { Chart, registerShape } from '@antv/g2'
|
|
import MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
import { resetStyle } from '@/utils/utils-custom.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import './index.scss'
|
|
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
|
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
|
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
|
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
|
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
|
const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent'))
|
|
registerShape('point', 'pointer', {
|
draw(cfg, container) {
|
const group = container.addGroup({});
|
// 获取极坐标系下画布中心点
|
const center = this.parsePoint({ x: 0, y: 0 });
|
// 绘制指针
|
group.addShape('line', {
|
attrs: {
|
x1: center.x,
|
y1: center.y,
|
x2: cfg.x,
|
y2: cfg.y,
|
stroke: cfg.color,
|
lineWidth: 5,
|
lineCap: 'round',
|
},
|
});
|
group.addShape('circle', {
|
attrs: {
|
x: center.x,
|
y: center.y,
|
r: 9.75,
|
stroke: cfg.color,
|
lineWidth: 4.5,
|
fill: '#fff',
|
},
|
});
|
return group;
|
},
|
})
|
|
class antvDashboardChart extends Component {
|
static propTpyes = {
|
card: PropTypes.object,
|
updateConfig: PropTypes.func,
|
deletecomponent: PropTypes.func,
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
card: null,
|
ismob: sessionStorage.getItem('appType') === 'mob',
|
eventListener: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { card, ismob } = this.props
|
|
if (card.isNew) {
|
let _plot = {
|
width: card.width || 12,
|
height: 400,
|
label: '',
|
valueField: '',
|
name: card.name,
|
maxValue: 100,
|
tickInterval: 10,
|
labelColor: '#545454',
|
tickColor: '#CBCBCB',
|
percent: 'true'
|
}
|
|
if (ismob) {
|
_plot.width = 24
|
}
|
|
let _card = {
|
uuid: card.uuid,
|
type: card.type,
|
floor: card.floor,
|
tabId: card.tabId || '',
|
parentId: card.parentId || '',
|
format: 'object', // 组件属性 - 数据格式
|
pageable: false, // 组件属性 - 是否可分页
|
switchable: false, // 组件属性 - 数据是否可切换
|
dataName: card.dataName || '',
|
width: _plot.width,
|
name: _plot.name,
|
subtype: card.subtype,
|
setting: { interType: 'system' },
|
style: {
|
borderWidth: '1px', borderColor: 'rgb(217, 217, 217)',
|
marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
|
},
|
headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
|
columns: [],
|
scripts: [],
|
search: [],
|
action: [],
|
plot: _plot,
|
btnlog: [],
|
}
|
|
if (card.config) {
|
let config = fromJS(card.config).toJS()
|
|
_card.plot = config.plot
|
_card.plot.name = card.name
|
_card.style = config.style
|
_card.headerStyle = config.headerStyle
|
}
|
|
this.props.updateConfig(_card)
|
this.setState({
|
card: _card
|
})
|
} else {
|
this.setState({
|
card: fromJS(card).toJS()
|
})
|
}
|
}
|
|
componentDidMount () {
|
this.dashboardrender()
|
MKEmitter.addListener('tabsChange', this.handleTabsChange)
|
MKEmitter.addListener('submitStyle', this.getStyle)
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
|
MKEmitter.removeListener('submitStyle', this.getStyle)
|
}
|
|
handleTabsChange = (parentId) => {
|
const { card } = this.state
|
|
if (parentId === card.parentId) {
|
let _element = document.getElementById(card.uuid + 'canvas')
|
if (_element) {
|
_element.innerHTML = ''
|
}
|
|
setTimeout(this.dashboardrender, 100)
|
}
|
}
|
|
getdata = () => {
|
const { card } = this.state
|
|
const data = [];
|
const val = (Math.random() * card.plot.maxValue).toFixed(1);
|
data.push({ value: +val });
|
return data;
|
}
|
|
dashboardrender = () => {
|
const { card } = this.state
|
const plot = card.plot
|
const data = this.getdata()
|
|
const chart = new Chart({
|
container: card.uuid + 'dashboard',
|
autoFit: true,
|
height: plot.height ? (plot.height - 80) : 320,
|
padding: [0, 0, 0, 0],
|
})
|
chart.data(data);
|
chart.scale('value', {
|
min: 0,
|
max: plot.maxValue,
|
tickInterval: plot.tickInterval,
|
});
|
chart.coordinate('polar', {
|
startAngle: (-9 / 8) * Math.PI,
|
endAngle: (1 / 8) * Math.PI,
|
radius: 0.75,
|
});
|
|
chart.axis('1', false);
|
chart.axis('value', {
|
line: null,
|
label: {
|
offset: -36,
|
style: {
|
fontSize: 18,
|
fill: plot.tickColor,
|
textAlign: 'center',
|
textBaseline: 'middle',
|
},
|
},
|
tickLine: {
|
length: -24,
|
style: {
|
stroke: plot.tickColor
|
}
|
},
|
grid: null,
|
});
|
chart.legend(false);
|
chart.tooltip(false);
|
chart
|
.point()
|
.position('value*1')
|
.shape('pointer')
|
.color('value', (val) => {
|
let _color = '#1890FF'
|
if (plot.colors && plot.colors.length > 0) {
|
_color = plot.colors[plot.colors.length - 1].color || '#1890FF'
|
plot.colors.some(item => {
|
if (item.tick > val) {
|
_color = item.color
|
return true
|
}
|
return false
|
})
|
}
|
return _color
|
})
|
.animate({
|
appear: {
|
animation: 'fade-in'
|
}
|
});
|
|
// 绘制仪表盘背景
|
chart.annotation().arc({
|
top: false,
|
start: [0, 1],
|
end: [plot.maxValue, 1],
|
style: {
|
stroke: '#CBCBCB',
|
lineWidth: 18,
|
lineDash: null,
|
},
|
})
|
|
if (!plot.colors || plot.colors.length === 0) {
|
chart.annotation().arc({
|
start: [0, 1],
|
end: [plot.maxValue, 1],
|
style: {
|
stroke: '#1890FF',
|
lineWidth: 18,
|
lineDash: null,
|
},
|
});
|
} else {
|
let start = 0
|
plot.colors.forEach(item => {
|
chart.annotation().arc({
|
start: [start, 1],
|
end: [item.tick, 1],
|
style: {
|
stroke: item.color,
|
lineWidth: 18,
|
lineDash: null,
|
},
|
})
|
start = item.tick
|
})
|
}
|
|
if (plot.label) {
|
chart.annotation().text({
|
position: ['50%', '85%'],
|
content: plot.label,
|
style: {
|
fontSize: 20,
|
fill: plot.labelColor,
|
textAlign: 'center',
|
},
|
})
|
}
|
|
let val = data[0].value
|
if (plot.percent !== 'false' && plot.maxValue) {
|
val = +(val / plot.maxValue * 100).toFixed(2) + ' %'
|
}
|
|
chart.annotation().text({
|
position: ['50%', '90%'],
|
content: val,
|
style: {
|
fontSize: 36,
|
fill: plot.labelColor,
|
textAlign: 'center',
|
},
|
offsetY: 15,
|
});
|
|
chart.render()
|
}
|
|
updateComponent = (component) => {
|
const card = fromJS(this.state.card).toJS()
|
let refresh = false
|
if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) {
|
let _element = document.getElementById(card.uuid + 'dashboard')
|
if (_element) {
|
_element.innerHTML = ''
|
}
|
refresh = true
|
}
|
|
component.width = component.plot.width
|
component.name = component.plot.name
|
|
this.setState({
|
card: component
|
}, () => {
|
if (refresh) {
|
setTimeout(() => {
|
this.dashboardrender()
|
}, 100)
|
}
|
})
|
this.props.updateConfig(component)
|
}
|
|
changeStyle = () => {
|
const { card } = this.state
|
|
MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
|
}
|
|
getStyle = (comIds, style) => {
|
const { card } = this.state
|
|
if (comIds[0] !== card.uuid || comIds.length > 1) return
|
|
let _card = {...card, style}
|
|
this.updateComponent(_card)
|
}
|
|
clickComponent = (e) => {
|
if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
|
e.stopPropagation()
|
MKEmitter.emit('clickComponent', this.state.card)
|
}
|
}
|
|
render() {
|
const { card } = this.state
|
let _style = resetStyle(card.style)
|
|
return (
|
<div className="menu-dashboard-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
|
<NormalHeader config={card} updateComponent={this.updateComponent}/>
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
|
<CopyComponent type="dashboard" card={card}/>
|
<Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
|
<ClockComponent config={card} updateConfig={this.updateComponent}/>
|
<UserComponent config={card}/>
|
<Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
|
<SettingComponent config={card} updateConfig={this.updateComponent}/>
|
</div>
|
} trigger="hover">
|
<Icon type="tool" />
|
</Popover>
|
<div className="canvas" id={card.uuid + 'dashboard'}></div>
|
</div>
|
)
|
}
|
}
|
|
export default antvDashboardChart
|
