| | |
| | | let _style = {...card.style} |
| | | |
| | | if (cards.type === 'carousel') { |
| | | _style.height = cards.style.height |
| | | _style.height = cards.wrap.height |
| | | } |
| | | |
| | | let control = true |
| | |
| | | _style = resetStyle(_style) |
| | | |
| | | return ( |
| | | <div className="ant-col ant-col-24"> |
| | | <div className="card-item" style={_style}> |
| | | <CardCellComponent cards={cards} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> |
| | | <div className="card-control"> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <PlusOutlined className="plus" title="添加元素" onClick={this.addElement}/> |
| | | <PlusSquareOutlined className="plus" title="添加按钮" onClick={this.addButton}/> |
| | | {cards.type !== 'timeline' ? <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>} |
| | | {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null} |
| | | <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <ArrowLeftOutlined className="plus" title="前移" onClick={() => this.props.move(card, 'left')} /> |
| | | <ArrowRightOutlined className="close" title="后移" onClick={() => this.props.move(card, 'right')} /> |
| | | </div> |
| | | } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> |
| | | <SwapOutlined id={card.uuid + 'swap'}/> |
| | | </Popover> : null} |
| | | {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <ToolOutlined/> |
| | | </Popover> |
| | | </div> |
| | | <div className="card-item" style={_style}> |
| | | <CardCellComponent cards={cards} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> |
| | | <div className="card-control"> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <PlusOutlined className="plus" title="添加元素" onClick={this.addElement}/> |
| | | <PlusSquareOutlined className="plus" title="添加按钮" onClick={this.addButton}/> |
| | | {cards.type !== 'timeline' ? <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>} |
| | | {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null} |
| | | <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <ArrowLeftOutlined className="plus" title="前移" onClick={() => this.props.move(card, 'left')} /> |
| | | <ArrowRightOutlined className="close" title="后移" onClick={() => this.props.move(card, 'right')} /> |
| | | </div> |
| | | } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> |
| | | <SwapOutlined id={card.uuid + 'swap'}/> |
| | | </Popover> : null} |
| | | {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <ToolOutlined/> |
| | | </Popover> |
| | | </div> |
| | | </div> |
| | | ) |
| | |
| | | |
| | | state = { |
| | | config: null, |
| | | data: [], |
| | | BID: '', |
| | | BData: '', |
| | | plot: null, |
| | |
| | | empty: true |
| | | } |
| | | |
| | | data = [] |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | | let _config = fromJS(config).toJS() |
| | | |
| | | let _data = null |
| | | let _sync = _config.setting.sync === 'true' |
| | | |
| | | let BID = '' |
| | |
| | | } |
| | | |
| | | if (_sync && data) { |
| | | _data = data[config.dataName] || [] |
| | | this.data = data[config.dataName] || [] |
| | | _sync = false |
| | | } else if (_sync && initdata) { |
| | | _data = initdata || [] |
| | | this.data = initdata || [] |
| | | _sync = false |
| | | } |
| | | |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data || [], |
| | | BID: BID || '', |
| | | BData: BData || '', |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true' && _data) { |
| | | this.handleData() |
| | | } |
| | | }) |
| | | |
| | | if (this.data.length > 0) { |
| | | this.handleData() |
| | | } |
| | | |
| | | let that = this |
| | | |
| | |
| | | _data = nextProps.data[config.dataName] |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data}) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(_data))) { |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({sync: false}) |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | |
| | | if (config.$cache && (config.setting.sync !== 'true' || sync)) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res) return |
| | | if (!res || this.data.length > 0) return |
| | | |
| | | this.setState({data: res}) |
| | | |
| | | this.handleData() |
| | | if (!is(fromJS(this.data), fromJS(res))) { |
| | | this.data = res |
| | | this.handleData() |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | |
| | | async loadData () { |
| | | const { mainSearch } = this.props |
| | | const { config, arr_field, BID, data } = this.state |
| | | const { config, arr_field, BID } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | | data: [] |
| | | }, () => { |
| | | if (!is(fromJS(this.data), fromJS([]))) { |
| | | this.data = [] |
| | | this.handleData() |
| | | }) |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data || [], |
| | | loading: false |
| | | }) |
| | | |
| | | if (!is(fromJS(data), fromJS(result.data || []))) { |
| | | if (!is(fromJS(this.data), fromJS(result.data || []))) { |
| | | this.data = result.data || [] |
| | | this.handleData() |
| | | } |
| | | } else { |
| | |
| | | } |
| | | |
| | | getdata = () => { |
| | | const { plot, data, config, BData } = this.state |
| | | const { plot, config, BData } = this.state |
| | | |
| | | let root = { |
| | | label: 'Root', |
| | |
| | | let _options = [] |
| | | let logMap = new Map() |
| | | |
| | | data.forEach(item => { |
| | | this.data.forEach(item => { |
| | | let pval = item[plot.parentField] |
| | | let val = item[plot.valueField] |
| | | let label = item[plot.labelField] || '' |
| | |
| | | } |
| | | |
| | | viewrender = () => { |
| | | const { plot, data } = this.state |
| | | const { plot } = this.state |
| | | |
| | | if (data.length === 0) { |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | } else { |
| | | this.setState({empty: false}) |
| | |
| | | transfield: {}, // 字段名称翻译 |
| | | sync: false, // 是否统一请求数据 |
| | | plot: null, // 图表设置 |
| | | data: [], // 数据 |
| | | search: null, // 搜索条件 |
| | | vFields: [], // 数值字段 |
| | | vstFields: null, // 统计数据值字段信息 |
| | | chart: null |
| | | } |
| | | |
| | | data = [] |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | | let _config = fromJS(config).toJS() |
| | | let _data = null |
| | | let _sync = config.setting.sync === 'true' |
| | | |
| | | let BID = '' |
| | |
| | | BID = BData.$BID || '' |
| | | } |
| | | |
| | | if (config.setting.sync === 'true' && data) { |
| | | _data = data[config.dataName] || [] |
| | | if (_sync && data) { |
| | | this.data = data[config.dataName] || [] |
| | | _sync = false |
| | | } else if (config.setting.sync === 'true' && initdata) { |
| | | _data = initdata || [] |
| | | } else if (_sync && initdata) { |
| | | this.data = initdata || [] |
| | | _sync = false |
| | | } |
| | | |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data || [], |
| | | BID: BID || '', |
| | | vFields: vFields, |
| | | vstFields: vstFields, |
| | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true' && _data) { |
| | | this.handleData() |
| | | } |
| | | }) |
| | | |
| | | if (this.data.length > 0) { |
| | | this.handleData() |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 图表数据更新,刷新内容 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { sync, config, data } = this.state |
| | | const { sync, config } = 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}) |
| | | |
| | | if (!is(fromJS(data), fromJS(_data))) { |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({sync: false}) |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | |
| | | if (config.$cache && (config.setting.sync !== 'true' || sync)) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res) return |
| | | if (!res || this.data.length > 0) return |
| | | |
| | | this.setState({data: res}, () => { |
| | | if (!is(fromJS(this.data), fromJS(res))) { |
| | | this.data = res |
| | | this.handleData() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | const { config, arr_field, BID, search } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | | data: [] |
| | | }, () => { |
| | | if (!is(fromJS(this.data), fromJS([]))) { |
| | | this.data = [] |
| | | this.handleData() |
| | | }) |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data || [], |
| | | loading: false |
| | | }) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(result.data || []))) { |
| | | if (!is(fromJS(this.data), fromJS(result.data || []))) { |
| | | this.data = result.data || [] |
| | | this.handleData() |
| | | } |
| | | } else { |
| | |
| | | * 3、柱状图数据补齐 |
| | | */ |
| | | getdata = () => { |
| | | const { data, plot, vFields, config } = this.state |
| | | const { plot, vFields, config } = this.state |
| | | |
| | | if (data.length === 0) { |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | return [] |
| | | } |
| | | |
| | | let _data = [] |
| | | let _cdata = fromJS(data).toJS() |
| | | let _cdata = fromJS(this.data).toJS() |
| | | |
| | | if (plot.repeat === 'average') { |
| | | let _mdata = new Map() |
| | |
| | | * @description 统计数据预处理 |
| | | */ |
| | | getStaticMsg = () => { |
| | | const { plot, vstFields, data } = this.state |
| | | const { plot, vstFields } = this.state |
| | | |
| | | let percent = false |
| | | let decimal = vstFields ? vstFields.decimal : 0 |
| | |
| | | percent = true |
| | | } |
| | | |
| | | if (data.length === 0) { |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | return [] |
| | | } |
| | | |
| | | let _data = [] |
| | | let _cdata = fromJS(data).toJS() |
| | | let _cdata = fromJS(this.data).toJS() |
| | | |
| | | if (plot.repeat === 'average') { |
| | | let _mdata = new Map() |
| | |
| | | chartId: Utils.getuuid(), // 图表Id |
| | | sync: false, // 是否统一请求数据 |
| | | plot: null, // 图表设置 |
| | | data: {}, // 数据 |
| | | chart: null |
| | | } |
| | | |
| | | data = {} |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | | let _config = fromJS(config).toJS() |
| | | |
| | | let _data = null |
| | | let _sync = _config.setting.sync === 'true' |
| | | |
| | | let BID = '' |
| | |
| | | } |
| | | |
| | | if (_sync && data) { |
| | | _data = data[config.dataName] || [] |
| | | this.data = data[config.dataName] || [] |
| | | _sync = false |
| | | } else if (_sync && initdata) { |
| | | _data = initdata || [] |
| | | this.data = initdata || [] |
| | | _sync = false |
| | | } |
| | | |
| | | if (_config.subtype === 'ratioboard') { |
| | | _data = _data || [] |
| | | } else { |
| | | if (_data && Array.isArray(_data)) { |
| | | _data = _data[0] || {} |
| | | } else { |
| | | _data = {} |
| | | if (_config.subtype !== 'ratioboard') { |
| | | if (Array.isArray(this.data)) { |
| | | this.data = this.data[0] || {} |
| | | } |
| | | this.data.value = this.data[config.plot.valueField] || 0 |
| | | } |
| | | |
| | | _config.plot.height = Utils.getHeight(_config.plot.height) |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data, |
| | | BID: BID || '', |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | plot: _config.plot, |
| | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true') { |
| | | this.handleData() |
| | | } |
| | | }) |
| | | |
| | | if (config.setting.sync === 'true' && !_sync) { |
| | | this.handleData() |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { |
| | | let _data = null |
| | | |
| | | if (config.subtype === 'ratioboard') { |
| | | _data = [] |
| | | if (nextProps.data && nextProps.data[config.dataName]) { |
| | | _data = nextProps.data[config.dataName] || [] |
| | | } |
| | | } else { |
| | | _data = {} |
| | | if (nextProps.data && nextProps.data[config.dataName]) { |
| | | _data = nextProps.data[config.dataName] || {} |
| | | } |
| | | if (_data.hasOwnProperty(config.plot.valueField)) { |
| | | _data.value = _data[config.plot.valueField] |
| | | if (nextProps.data && nextProps.data[config.dataName]) { |
| | | _data = nextProps.data[config.dataName] |
| | | if (config.subtype !== 'ratioboard') { |
| | | if (Array.isArray(_data)) { |
| | | _data = _data[0] || {} |
| | | } |
| | | _data.value = _data[config.plot.valueField] || 0 |
| | | } |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data}) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(_data))) { |
| | | if (_data && !is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({sync: false}) |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | if (config.subtype === 'ratioboard') { |
| | | _data = res |
| | | } else { |
| | | _data = {value: res[0][config.plot.valueField]} |
| | | _data = res[0] |
| | | _data.value = _data[config.plot.valueField] || 0 |
| | | } |
| | | |
| | | this.setState({data: _data}, () => { |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | const { config, arr_field, BID } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | | data: {} |
| | | }, () => { |
| | | let _data = null |
| | | if (config.subtype === 'ratioboard') { |
| | | _data = [] |
| | | } else { |
| | | _data = {value: 0} |
| | | } |
| | | |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | }) |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | Api.writeCacheConfig(config.uuid, result.data || '') |
| | | } |
| | | |
| | | let data = null |
| | | let _data = null |
| | | if (config.subtype === 'ratioboard') { |
| | | data = result.data || [] |
| | | _data = result.data || [] |
| | | } else { |
| | | data = {} |
| | | if (result.data && result.data[0] && result.data[0].hasOwnProperty(config.plot.valueField)) { |
| | | data.value = result.data[0][config.plot.valueField] |
| | | } |
| | | _data = result.data && result.data[0] ? result.data && result.data[0] : {} |
| | | _data.value = _data.value[config.plot.valueField] || 0 |
| | | } |
| | | |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({ |
| | | data, |
| | | loading: false |
| | | }) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(data))) { |
| | | this.handleData() |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | |
| | | } |
| | | |
| | | getratiodata = () => { |
| | | const { data, plot } = this.state |
| | | const { plot } = this.state |
| | | |
| | | let colors = {} |
| | | if (plot.colors && plot.colors.length > 0) { |
| | |
| | | }) |
| | | } |
| | | |
| | | return data.map(item => { |
| | | return this.data.map(item => { |
| | | let val = +item[plot.valueField] |
| | | let type = item[plot.labelField] || '' |
| | | if (isNaN(val)) { |
| | |
| | | * @description 仪表盘渲染 |
| | | */ |
| | | dashboardrender = () => { |
| | | const { plot, chartId, data } = this.state |
| | | const { plot, chartId } = this.state |
| | | |
| | | let _data = fromJS(data).toJS() |
| | | let _data = fromJS(this.data).toJS() |
| | | _data.value = +_data.value |
| | | |
| | | if (_data.hasOwnProperty('value')) { |
| | | if (_data.value === '' || _data.value === null) { |
| | | delete _data.value |
| | | } else { |
| | | _data.value = +_data.value |
| | | |
| | | if (isNaN(_data.value)) { |
| | | delete _data.value |
| | | } else if (_data.value > plot.maxValue) { |
| | | _data.value = plot.maxValue |
| | | } |
| | | } |
| | | if (isNaN(_data.value)) { |
| | | _data.value = 0 |
| | | } else if (_data.value > plot.maxValue) { |
| | | _data.value = plot.maxValue |
| | | } |
| | | |
| | | const chart = new Chart({ |
| | |
| | | }) |
| | | } |
| | | |
| | | if (data.hasOwnProperty('value')) { |
| | | let val = data.value |
| | | let val = +this.data.value |
| | | |
| | | if (!isNaN(val)) { |
| | | if (plot.percent !== 'false' && plot.maxValue) { |
| | | val = +(val / plot.maxValue * 100).toFixed(2) + ' %' |
| | | } |
| | |
| | | title: '', // 组件标题 |
| | | sync: false, // 是否统一请求数据 |
| | | plot: null, // 图表设置 |
| | | data: [], // 数据 |
| | | search: null, // 搜索条件 |
| | | chart: null |
| | | } |
| | | |
| | | data = [] |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | | let _config = fromJS(config).toJS() |
| | | |
| | | let _data = null |
| | | let _sync = config.setting.sync === 'true' |
| | | |
| | | let BID = '' |
| | |
| | | BID = BData.$BID || '' |
| | | } |
| | | |
| | | if (config.setting.sync === 'true' && data) { |
| | | _data = data[config.dataName] || [] |
| | | if (_sync && data) { |
| | | this.data = data[config.dataName] || [] |
| | | _sync = false |
| | | } else if (config.setting.sync === 'true' && initdata) { |
| | | _data = initdata || [] |
| | | } else if (_sync && initdata) { |
| | | this.data = initdata || [] |
| | | _sync = false |
| | | } |
| | | |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data || [], |
| | | BID: BID || '', |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | plot: _config.plot, |
| | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true' && _data) { |
| | | this.handleData() |
| | | } |
| | | }) |
| | | |
| | | if (this.data.length > 0) { |
| | | this.handleData() |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | _data = nextProps.data[config.dataName] || [] |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data}) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(_data))) { |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({sync: false}) |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | |
| | | if (config.$cache && (config.setting.sync !== 'true' || sync)) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res) return |
| | | if (!res || this.data.length > 0) return |
| | | |
| | | this.setState({data: res}, () => { |
| | | if (!is(fromJS(this.data), fromJS(res))) { |
| | | this.data = res |
| | | this.handleData() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | const { config, arr_field, search, BID } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | | data: [] |
| | | }, () => { |
| | | if (!is(fromJS(this.data), fromJS([]))) { |
| | | this.data = [] |
| | | this.handleData() |
| | | }) |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data || [], |
| | | loading: false |
| | | }) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(result.data || []))) { |
| | | if (!is(fromJS(this.data), fromJS(result.data || []))) { |
| | | this.data = result.data || [] |
| | | this.handleData() |
| | | } |
| | | } else { |
| | |
| | | * 3、柱状图数据补齐 |
| | | */ |
| | | getdata = () => { |
| | | const { data, plot } = this.state |
| | | const { plot } = this.state |
| | | |
| | | if (!data) { |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | return [] |
| | | } |
| | | |
| | | let _data = [] |
| | | let _cdata = fromJS(data).toJS() |
| | | let _cdata = fromJS(this.data).toJS() |
| | | |
| | | if (plot.repeat === 'average') { |
| | | let _mdata = new Map() |
| | |
| | | } |
| | | |
| | | getnestdata = () => { |
| | | const { data, plot } = this.state |
| | | const { plot } = this.state |
| | | |
| | | if (!data) { |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | return [] |
| | | } |
| | | |
| | | let _data = [] |
| | | let _cdata = fromJS(data).toJS() |
| | | let _cdata = fromJS(this.data).toJS() |
| | | |
| | | if (plot.repeat === 'average') { |
| | | let _mdata = new Map() |
| | |
| | | chartId: Utils.getuuid(), // 图表Id |
| | | sync: false, // 是否统一请求数据 |
| | | plot: null, // 图表设置 |
| | | data: [], // 数据 |
| | | search: null, // 搜索条件 |
| | | chart: null |
| | | } |
| | | |
| | | data = [] |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | | let _config = fromJS(config).toJS() |
| | | let _data = null |
| | | let _sync = config.setting.sync === 'true' |
| | | |
| | | let BID = '' |
| | |
| | | BID = BData.$BID || '' |
| | | } |
| | | |
| | | if (config.setting.sync === 'true' && data) { |
| | | _data = data[config.dataName] || [] |
| | | if (_sync && data) { |
| | | this.data = data[config.dataName] || [] |
| | | _sync = false |
| | | } else if (config.setting.sync === 'true' && initdata) { |
| | | _data = initdata || [] |
| | | } else if (_sync && initdata) { |
| | | this.data = initdata || [] |
| | | _sync = false |
| | | } |
| | | |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data || [], |
| | | BID: BID || '', |
| | | empty: !_data, |
| | | empty: this.data.length === 0, |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | plot: _config.plot, |
| | | sync: _sync, |
| | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true' && _data) { |
| | | this.handleData() |
| | | } |
| | | }) |
| | | |
| | | if (this.data.length > 0) { |
| | | this.handleData() |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | _data = nextProps.data[config.dataName] || [] |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data, empty: false}) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(_data))) { |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({sync: false, empty: _data.length === 0}) |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | |
| | | if (config.$cache && (config.setting.sync !== 'true' || sync)) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res) return |
| | | if (!res || this.data.length > 0) return |
| | | |
| | | this.setState({data: res, empty: false}, () => { |
| | | if (!is(fromJS(this.data), fromJS(res))) { |
| | | this.data = res |
| | | this.handleData() |
| | | }) |
| | | } |
| | | |
| | | this.setState({empty: false}) |
| | | }) |
| | | } |
| | | } |
| | |
| | | const { config, arr_field, BID, search } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | | data: [], |
| | | empty: false, |
| | | }, () => { |
| | | this.setState({ empty: true }) |
| | | |
| | | if (!is(fromJS(this.data), fromJS([]))) { |
| | | this.data = [] |
| | | this.handleData() |
| | | }) |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data || [], |
| | | empty: false, |
| | | empty: !result.data || result.data.length === 0, |
| | | loading: false |
| | | }) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(result.data || []))) { |
| | | if (!is(fromJS(this.data), fromJS(result.data || []))) { |
| | | this.data = result.data || [] |
| | | this.handleData() |
| | | } |
| | | } else { |
| | |
| | | * @description 散点图渲染 |
| | | */ |
| | | scatterrender = () => { |
| | | const { plot, data, chartId } = this.state |
| | | const { plot, chartId } = this.state |
| | | const chart = new Chart({ |
| | | container: chartId, |
| | | autoFit: true, |
| | | height: plot.height |
| | | }) |
| | | |
| | | chart.data(data); |
| | | chart.data(this.data); |
| | | chart.scale({ |
| | | [plot.Xaxis]: { nice: true }, |
| | | [plot.Yaxis]: { nice: true }, |
| | |
| | | loading: false, // 数据加载状态 |
| | | sync: false, // 是否统一请求数据 |
| | | plot: null, // 图表设置 |
| | | data: [], // 数据 |
| | | search: null, // 搜索条件 |
| | | } |
| | | |
| | | data = [] |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | | let _config = fromJS(config).toJS() |
| | | let _data = null |
| | | let _sync = config.setting.sync === 'true' |
| | | |
| | | let BID = '' |
| | |
| | | BID = BData.$BID || '' |
| | | } |
| | | |
| | | if (config.setting.sync === 'true' && data) { |
| | | _data = data[config.dataName] || [] |
| | | if (_sync && data) { |
| | | this.data = data[config.dataName] || [] |
| | | _sync = false |
| | | } else if (config.setting.sync === 'true' && initdata) { |
| | | _data = initdata || [] |
| | | } else if (_sync && initdata) { |
| | | this.data = initdata || [] |
| | | _sync = false |
| | | } |
| | | |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | data: _data || [], |
| | | empty: !_data || _data.length === 0, |
| | | empty: this.data.length === 0, |
| | | BID: BID || '', |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | plot: _config.plot, |
| | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } else if (config.setting.sync === 'true' && _data) { |
| | | this.handleData() |
| | | } |
| | | }) |
| | | |
| | | if (this.data.length > 0) { |
| | | this.handleData() |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | _data = nextProps.data[config.dataName] || [] |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data, empty: _data.length === 0}) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(_data))) { |
| | | if (!is(fromJS(this.data), fromJS(_data))) { |
| | | this.data = _data |
| | | this.handleData() |
| | | } |
| | | |
| | | this.setState({sync: false, empty: _data.length === 0}) |
| | | } else if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | |
| | | |
| | | if (config.$cache && (config.setting.sync !== 'true' || sync)) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res) return |
| | | if (!res || this.data.length > 0) return |
| | | |
| | | this.setState({data: res, empty: false}, () => { |
| | | if (!is(fromJS(this.data), fromJS(res))) { |
| | | this.data = res |
| | | this.handleData() |
| | | }) |
| | | } |
| | | this.setState({empty: false}) |
| | | }) |
| | | } |
| | | } |
| | |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | | data: [] |
| | | }, () => { |
| | | this.handleData() |
| | | empty: true |
| | | }) |
| | | |
| | | if (!is(fromJS(this.data), fromJS([]))) { |
| | | this.data = [] |
| | | this.handleData() |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | data: result.data, |
| | | loading: false, |
| | | empty: result.data.length === 0 |
| | | empty: !result.data || result.data.length === 0 |
| | | }) |
| | | |
| | | if (!is(fromJS(this.state.data), fromJS(result.data || []))) { |
| | | if (!is(fromJS(this.data), fromJS(result.data || []))) { |
| | | this.data = result.data || [] |
| | | this.handleData() |
| | | } |
| | | } else { |
| | |
| | | * @description 图表渲染分组 |
| | | */ |
| | | viewrender = () => { |
| | | const { config, data } = this.state |
| | | const { config } = this.state |
| | | |
| | | if (!config.plot.script) return |
| | | |
| | |
| | | try { |
| | | // eslint-disable-next-line |
| | | let func = new Function('Chart', 'DataSet', 'wrap', 'data', 'config', config.plot.script) |
| | | func(Chart, DataSet, this.wrap, data, config) |
| | | func(Chart, DataSet, this.wrap, this.data, config) |
| | | } catch (e) { |
| | | console.warn(e) |
| | | |
| | |
| | | try { |
| | | // eslint-disable-next-line |
| | | let func = new Function('echarts', 'DataSet', 'wrap', 'data', 'config', config.plot.script) |
| | | func(echarts, DataSet, this.wrap, data, config) |
| | | func(echarts, DataSet, this.wrap, this.data, config) |
| | | } catch (e) { |
| | | console.warn(e) |
| | | |
| | |
| | | <Spin /> |
| | | </div> : null |
| | | } |
| | | <NormalHeader config={config} BID={BID} refresh={this.refreshSearch} /> |
| | | <NormalHeader config={config} BID={BID} refresh={this.refreshSearch}/> |
| | | <div className="canvas-wrap" style={{height: (config.plot.height + 30) + 'px'}}> |
| | | <div className={'canvas' + (empty ? ' empty' : '')} style={{height: config.plot.height + 'px'}} ref={ref => this.wrap = ref}></div> |
| | | </div> |