| | |
| | | data: PropTypes.array, // 统一查询数据 |
| | | config: PropTypes.object, // 组件配置信息 |
| | | mainSearch: PropTypes.any, // 外层搜索条件 |
| | | menuType: PropTypes.any, // 菜单类型 |
| | | } |
| | | |
| | | state = { |
| | |
| | | _config.plot.$colors = colors |
| | | } |
| | | |
| | | let limit = _config.plot.XLimit || 11 |
| | | |
| | | let xc = {label: { |
| | | formatter: (val) => { |
| | | if (!val || /^\s*$/.test(val)) return val |
| | | let _val = `${val}` |
| | | if (_val.length <= 11) return val |
| | | return _val.substring(0, 8) + '...' |
| | | if (_val.length <= limit) return val |
| | | return _val.substring(0, limit) + '...' |
| | | }, |
| | | style: { fill: _config.plot.color } |
| | | }} |
| | |
| | | marker: { symbol: item.chartType === 'bar' ? 'square' : 'hyphen', style: { stroke: item.color,fill: item.color, r: 5, lineWidth: 2 } } |
| | | }) |
| | | |
| | | if ((!_config.plot.Bar_axis || item.chartType !== 'bar') && item.show) { // 折线图或重叠下的柱状图可单独设置显示类型 |
| | | vFieldsShow[item.type] = item.show |
| | | if (!_config.plot.Bar_axis || item.chartType !== 'bar') { // 折线图或重叠下的柱状图可单独设置显示类型 |
| | | if (item.show) { |
| | | vFieldsShow[item.type] = item.show |
| | | } else { |
| | | item.show = _config.plot.show |
| | | } |
| | | } |
| | | }) |
| | | _config.plot.customs = fields |
| | |
| | | transfield |
| | | }, () => { |
| | | if (config.setting.sync !== 'true' && config.setting.onload === 'true') { |
| | | this.loadData() |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true' && _data) { |
| | | this.handleData() |
| | | } |
| | |
| | | }) |
| | | return |
| | | } else if (result.run_type) { |
| | | this.setState({timer}) |
| | | let repeats = config.timerRepeats || 0 |
| | | this.setState({timer, repeats}) |
| | | this.timer = setTimeout(() => { |
| | | this.timerTask() |
| | | this.timerTask(repeats) |
| | | }, timer) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | timerTask = () => { |
| | | const { timer } = this.state |
| | | timerTask = (times) => { |
| | | const { timer, repeats } = this.state |
| | | if (!timer) return |
| | | |
| | | this.loadData(true) |
| | | |
| | | |
| | | if (repeats) { |
| | | times = times - 1 |
| | | if (times <= 0) { |
| | | clearTimeout(this.timer) |
| | | return |
| | | } |
| | | } |
| | | this.timer = setTimeout(() => { |
| | | this.timerTask() |
| | | this.timerTask(times) |
| | | }, timer) |
| | | } |
| | | |
| | |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | this.loadData() // 数据刷新 |
| | | |
| | | if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { |
| | | MKEmitter.emit('reloadData', btn.syncComponentId) // 同级标签刷新 |
| | | if ((position === 'mainline' || position === 'popclose') && config.setting.supModule && BID) { // 刷新源组件时,附带刷新上级行与当前组件 |
| | | MKEmitter.emit('reloadData', config.setting.supModule, BID) |
| | | } else { |
| | | this.loadData() |
| | | } |
| | | |
| | | if (position === 'mainline' && config.setting.supModule) { // 主表行刷新 |
| | | MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) |
| | | } else if (position === 'popclose') { // 标签关闭刷新 |
| | | config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) |
| | | if (position === 'popclose') { // 执行启动弹窗的按钮所选择的刷新项 |
| | | btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) |
| | | } |
| | | } |
| | |
| | | * @description 数据加载 |
| | | */ |
| | | async loadData (hastimer) { |
| | | const { mainSearch, menuType } = this.props |
| | | const { mainSearch } = this.props |
| | | const { config, arr_field, BID, search } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | |
| | | } |
| | | |
| | | let _orderBy = config.setting.order || '' |
| | | let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID, menuType) |
| | | let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID) |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | |
| | | } |
| | | if (plot.label !== 'false') { |
| | | _chart.label(_valfield, (value) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | if (plot.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | } |
| | | if (plot.label !== 'false') { |
| | | _chart.label('value*key', (value, key) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | |
| | | if (plot.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | } |
| | | if (plot.label !== 'false') { |
| | | _chart.label('value*key', (value, key) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | |
| | | if (plot.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | const view2 = chart.createView({ |
| | | region: { |
| | | start: { x: 0, y: 0 }, |
| | | end: { x: 1, y: 1 } |
| | | }, |
| | | padding |
| | | }) |
| | | let view2 = chart |
| | | |
| | | if (plot.Bar_axis) { |
| | | view2 = chart.createView({ |
| | | region: { |
| | | start: { x: 0, y: 0 }, |
| | | end: { x: 1, y: 1 } |
| | | }, |
| | | padding |
| | | }) |
| | | } |
| | | |
| | | view2.data(dv.rows) |
| | | view2.legend(false) |
| | |
| | | } |
| | | if (item.label !== 'false') { |
| | | _chart.label(item.name, (value) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | |
| | | if (item.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | |
| | | if (item.label === 'true') { |
| | | _chart.label(item.name, (value) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | |
| | | if (item.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | } |
| | | if (plot.label !== 'false') { |
| | | _chart.label(`${_valfield}*${_typefield}`, (value, key) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | |
| | | if (plot.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | } |
| | | if (plot.label !== 'false') { |
| | | _chart.label(`${_valfield}*${_typefield}`, (value, key) => { |
| | | if (plot.labelValue === 'zero' && value === 0) { |
| | | return null |
| | | } |
| | | |
| | | if (plot.show === 'percent') { |
| | | value = value + '%' |
| | | } |
| | |
| | | |
| | | 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 (plot.menus && plot.menus.length > 0) { |
| | | let s = data[plot.menuType] || '' |
| | | plot.menus.forEach(m => { |
| | | if (s !== m.sign) return |
| | | menu = m |
| | | }) |
| | | } |
| | | if (!menu || !menu.MenuID) return |
| | | |
| | | menu.type = menu.tabType |
| | | |
| | | let newtab = { |
| | | ...menu, |
| | | param: {} |
| | | } |
| | | |
| | | if (plot.joint === 'true') { |
| | | newtab.param.$BID = data.$$uuid || '' |
| | | } |
| | | |
| | | 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 |
| | | } |
| | | |
| | | let newtab = { |
| | | ...menu, |
| | | param: {} |
| | | } |
| | | |
| | | if (plot.joint === 'true') { |
| | | newtab.param.$BID = data.$$uuid || '' |
| | | } |
| | | |
| | | if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) { |
| | | MKEmitter.emit('modifyTabs', newtab, 'replace') |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', newtab, 'plus', true) |
| | | } |
| | | } |
| | | }) |
| | | |
| | | if (plot.interaction && plot.interaction.length) { |
| | |
| | | render() { |
| | | const { config, loading, empty, BID } = this.state |
| | | |
| | | let style = {...config.style} |
| | | if (empty && config.plot.empty === 'hidden') { |
| | | style.opacity = 0 |
| | | style.position = 'absolute' |
| | | style.zIndex = -1 |
| | | style.width = '100%' |
| | | } |
| | | |
| | | return ( |
| | | <div className="custom-line-chart-plot-box" style={config.style}> |
| | | <div className="custom-line-chart-plot-box" id={'anchor' + config.uuid} style={style}> |
| | | {loading ? |
| | | <div className="loading-mask"> |
| | | <div className="ant-spin-blur"></div> |
| | | <Spin /> |
| | | </div> : null |
| | | } |
| | | <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> |
| | | <NormalHeader config={config} BID={BID} refresh={this.refreshSearch} /> |
| | | <div className="canvas-wrap" ref={ref => this.wrap = ref}> |
| | | {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' : '')}> |