| | |
| | | import { is, fromJS } from 'immutable' |
| | | import { Chart } from '@antv/g2' |
| | | import DataSet from '@antv/data-set' |
| | | import { Spin, Empty, notification } from 'antd' |
| | | import { Spin, Empty, notification, Modal } from 'antd' |
| | | import { DownloadOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | |
| | | transfield: {}, // 字段名称翻译 |
| | | sync: false, // 是否统一请求数据 |
| | | plot: null, // 图表设置 |
| | | data: null, // 数据 |
| | | data: [], // 数据 |
| | | search: null, // 搜索条件 |
| | | vFields: [], // 数值字段 |
| | | vstFields: null, // 统计数据值字段信息 |
| | |
| | | }) |
| | | } |
| | | |
| | | _config.style.height = config.plot.height || 400 |
| | | _config.plot.height = Utils.getHeight(_config.plot.height) |
| | | _config.style.height = 'auto' |
| | | _config.style.minHeight = _config.plot.height + 30 |
| | | |
| | | if (_config.plot.title) { |
| | | _config.style.minHeight = _config.style.minHeight + 45 |
| | | } |
| | | |
| | | let transfield = {} |
| | | _config.columns.forEach(col => { |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data, |
| | | data: _data || [], |
| | | BID: BID || '', |
| | | vFields: vFields, |
| | | vstFields: vstFields, |
| | |
| | | * @description 图表数据更新,刷新内容 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { sync, config } = this.state |
| | | const { sync, config, data } = this.state |
| | | |
| | | if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { |
| | | let _data = [] |
| | |
| | | _data = nextProps.data[config.dataName] || [] |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data}, () => { |
| | | this.setState({sync: false, data: _data}) |
| | | |
| | | if (!is(fromJS(data), fromJS(_data))) { |
| | | this.handleData() |
| | | }) |
| | | } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | } |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | | }) |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { config } = this.state |
| | | const { config, sync } = this.state |
| | | |
| | | MKEmitter.addListener('reloadData', this.reloadData) |
| | | MKEmitter.addListener('resetSelectLine', this.resetParentParam) |
| | |
| | | this.timer = new TimerTask() |
| | | this.timer.init(config.uuid, config.timer, config.timerRepeats, () => { |
| | | this.loadData(true) |
| | | }) |
| | | } |
| | | |
| | | if (config.$cache && (config.setting.sync !== 'true' || sync)) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res) return |
| | | |
| | | this.setState({data: res}, () => { |
| | | this.handleData() |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | | let reset = true |
| | | |
| | | if (hastimer && is(fromJS(result.data), fromJS(this.state.data))) { |
| | | reset = false |
| | | if (config.$cache) { |
| | | Api.writeCacheConfig(config.uuid, result.data || '') |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data, |
| | | data: result.data || [], |
| | | loading: false |
| | | }, () => { |
| | | if (!reset) return |
| | | this.handleData() |
| | | }) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(result.data || []))) { |
| | | this.handleData() |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.timer && this.timer.stop() |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | |
| | | if (result.ErrCode === 'N') { |
| | | Modal.error({ |
| | | title: result.message, |
| | | }) |
| | | } else { |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | | this.viewrender() |
| | | setTimeout(() => { |
| | | this.viewrender() |
| | | }, 100) |
| | | } |
| | | |
| | | /** |
| | |
| | | getdata = () => { |
| | | const { data, plot, vFields, config } = this.state |
| | | |
| | | if (!data || data.length === 0) { |
| | | if (data.length === 0) { |
| | | this.setState({empty: true}) |
| | | return [] |
| | | } |
| | |
| | | percent = true |
| | | } |
| | | |
| | | if (!data || data.length === 0) { |
| | | if (data.length === 0) { |
| | | this.setState({empty: true}) |
| | | return [] |
| | | } |
| | |
| | | const chart = new Chart({ |
| | | container: this.state.chartId, |
| | | autoFit: true, |
| | | height: this.wrap.offsetHeight - 25 |
| | | height: plot.height |
| | | }) |
| | | |
| | | chart.data(_data) |
| | |
| | | const chart = new Chart({ |
| | | container: this.state.chartId, |
| | | autoFit: true, |
| | | height: this.wrap.offsetHeight - 25 |
| | | height: plot.height |
| | | }) |
| | | |
| | | // 坐标轴格式化 |
| | |
| | | const chart = new Chart({ |
| | | container: this.state.chartId, |
| | | autoFit: true, |
| | | height: this.wrap.offsetHeight - 25 |
| | | height: plot.height |
| | | }) |
| | | |
| | | chart.data(_data) |
| | |
| | | chart.on('element:click', (ev) => { |
| | | let data = ev.data.data |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), data) |
| | | |
| | | if (plot.click === 'menus') { |
| | | let menu = null |
| | | |
| | |
| | | } |
| | | if (!menu || !menu.MenuID) return |
| | | |
| | | menu.type = menu.tabType |
| | | |
| | | let newtab = { |
| | | ...menu, |
| | | MenuID: menu.MenuID, |
| | | MenuName: menu.MenuName, |
| | | MenuNo: menu.MenuNo || '', |
| | | type: menu.tabType, |
| | | param: {} |
| | | } |
| | | |
| | | if (plot.joint === 'true') { |
| | | newtab.param.$BID = data.$$uuid || '' |
| | | |
| | | Object.keys(data).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | newtab.param[key] = data[key] |
| | | }) |
| | | } |
| | | |
| | | if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) { |
| | | MKEmitter.emit('modifyTabs', newtab, 'replace') |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', newtab, 'plus', true) |
| | | } |
| | | } else if (plot.click === 'menu' && plot.MenuID) { |
| | | let menu = { |
| | | MenuID: plot.MenuID, |
| | | MenuName: plot.MenuName, |
| | | MenuNo: plot.MenuNo, |
| | | type: plot.tabType |
| | | MKEmitter.emit('modifyTabs', newtab, true) |
| | | } else if (plot.click === 'menu') { |
| | | let menuId = plot.menu.slice(-1)[0] |
| | | let newtab = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0] |
| | | |
| | | if (!newtab && plot.MenuID) { |
| | | newtab = { |
| | | MenuID: plot.MenuID, |
| | | MenuName: plot.MenuName, |
| | | MenuNo: plot.MenuNo, |
| | | type: plot.tabType |
| | | } |
| | | } else if (!newtab) { |
| | | return |
| | | } |
| | | |
| | | let newtab = { |
| | | ...menu, |
| | | newtab = { |
| | | ...newtab, |
| | | param: {} |
| | | } |
| | | |
| | | if (plot.joint === 'true') { |
| | | newtab.param.$BID = data.$$uuid || '' |
| | | |
| | | Object.keys(data).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | newtab.param[key] = data[key] |
| | | }) |
| | | } |
| | | |
| | | if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) { |
| | | MKEmitter.emit('modifyTabs', newtab, 'replace') |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', newtab, 'plus', true) |
| | | } |
| | | MKEmitter.emit('modifyTabs', newtab, true) |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), data) |
| | | } |
| | | }) |
| | | |
| | |
| | | </div> : null |
| | | } |
| | | <NormalHeader config={config} BID={BID} refresh={this.refreshSearch} /> |
| | | <div className="canvas-wrap" ref={ref => this.wrap = ref}> |
| | | <div className="canvas-wrap"> |
| | | {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} |
| | | <div className={'chart-action' + (config.plot.download === 'enable' ? ' downable' : '')}> |
| | | {config.action.map(item => { |