| | |
| | | } |
| | | |
| | | data = [] |
| | | mkgraph = null |
| | | selectedId = '' |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, data, initdata } = this.props |
| | |
| | | |
| | | _options.push(_item) |
| | | }) |
| | | |
| | | root = this.getTree(root, _options) |
| | | |
| | | root.nodeNumber = 0 |
| | | root = this.getTree(root, _options, root) |
| | | root.children = root.children || [] |
| | | |
| | | if (root.selectedItem) { |
| | | let option = {...root.selectedItem} |
| | | setTimeout(() => { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, option.id, option) |
| | | }, 20) |
| | | delete root.selectedItem |
| | | } else { |
| | | this.selectedId = '' |
| | | } |
| | | |
| | | if (plot.subtype === 'mindmap') { |
| | | root.type = 'dice-mind-map-root' |
| | |
| | | return root |
| | | } |
| | | |
| | | getTree = (parent, options) => { |
| | | getTree = (parent, options, root) => { |
| | | parent.children = [] |
| | | // 添加菜单的子元素 |
| | | options = options.filter(option => { |
| | | if (option.$parentId === parent.id) { |
| | | delete option.$parentId |
| | | |
| | | if (this.selectedId && option.id === this.selectedId) { |
| | | root.selectedItem = {...option} |
| | | option.selected = true |
| | | } |
| | | |
| | | parent.children.push(option) |
| | | |
| | | root.nodeNumber++ |
| | | |
| | | return false |
| | | } |
| | | return true |
| | |
| | | parent.children = null |
| | | } else { |
| | | parent.children = parent.children.map(item => { |
| | | item = this.getTree(item, options) |
| | | item = this.getTree(item, options, root) |
| | | |
| | | return item |
| | | }) |
| | |
| | | } |
| | | |
| | | handleData = () => { |
| | | let _element = document.getElementById(this.state.chartId) |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | } |
| | | const { config } = this.state |
| | | |
| | | setTimeout(() => { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | |
| | | if (this.mkgraph) { |
| | | this.mkgraph.clear() |
| | | this.resetrender() |
| | | } else { |
| | | this.viewrender() |
| | | }, 100) |
| | | } |
| | | } |
| | | |
| | | viewrender = () => { |
| | | const { plot } = this.state |
| | | |
| | | this.selectedId = '' |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | } else { |
| | | this.setState({empty: false}) |
| | | |
| | | if (plot.subtype === 'mindmap') { |
| | | this.ponitrender() |
| | | this.mindrender() |
| | | } else if (plot.subtype === 'indentTree') { |
| | | this.indentrender() |
| | | } else if (plot.subtype === 'kapmap') { |
| | | this.kapmaprender() |
| | | } |
| | | } |
| | | } |
| | | |
| | | resetrender = () => { |
| | | const { plot } = this.state |
| | | |
| | | if (this.data.length === 0) { |
| | | this.setState({empty: true}) |
| | | this.selectedId = '' |
| | | } else { |
| | | this.setState({empty: false}) |
| | | |
| | | const data = this.getdata() |
| | | if (plot.subtype === 'mindmap') { |
| | | this.mkgraph.data(data) |
| | | |
| | | this.mkgraph.render() |
| | | |
| | | const width = this.wrap.scrollWidth - 30 |
| | | |
| | | if (plot.collapsed === 'true' && plot.dirField) { |
| | | this.mkgraph.zoomTo(1, { x: width / 2, y: plot.height / 2 }) |
| | | } else if (plot.collapsed === 'true' || data.nodeNumber < 5) { |
| | | this.mkgraph.zoomTo(1, { x: 0, y: plot.height / 2 }) |
| | | } |
| | | } else if (plot.subtype === 'indentTree') { |
| | | this.mkgraph.data(dataIndTransform(data)) |
| | | |
| | | this.mkgraph.render() |
| | | } else if (plot.subtype === 'kapmap') { |
| | | this.mkgraph.data(data) |
| | | this.mkgraph.render() |
| | | this.mkgraph.fitView() |
| | | |
| | | if (plot.collapsed === 'true' || data.nodeNumber < 5) { |
| | | this.mkgraph.zoomTo(1, { x: 0, y: plot.height / 2 }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | graph.render() |
| | | graph.fitView() |
| | | |
| | | if (plot.collapsed === 'true') { |
| | | if (plot.collapsed === 'true' || data.nodeNumber < 5) { |
| | | graph.zoomTo(1, { x: 0, y: plot.height / 2 }) |
| | | } |
| | | |
| | | this.mkgraph = graph |
| | | } |
| | | |
| | | indentrender = () => { |
| | |
| | | tree.data(dataIndTransform(data)) |
| | | |
| | | tree.render() |
| | | |
| | | this.mkgraph = tree |
| | | } |
| | | |
| | | /** |
| | | * @description 散点图 |
| | | * @description 思维导图 |
| | | */ |
| | | ponitrender = () => { |
| | | mindrender = () => { |
| | | const { config, plot, chartId } = this.state |
| | | const data = this.getdata() |
| | | const width = this.wrap.scrollWidth - 30 |
| | |
| | | |
| | | if (plot.collapsed === 'true' && plot.dirField) { |
| | | tree.zoomTo(1, { x: width / 2, y: plot.height / 2 }) |
| | | } else if (plot.collapsed === 'true') { |
| | | } else if (plot.collapsed === 'true' || data.nodeNumber < 5) { |
| | | tree.zoomTo(1, { x: 0, y: plot.height / 2 }) |
| | | } |
| | | |
| | | this.mkgraph = tree |
| | | } |
| | | |
| | | handleClick = (data = null) => { |
| | |
| | | |
| | | MKEmitter.emit('modifyTabs', newtab, true) |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), data) |
| | | if (data) { |
| | | this.selectedId = data.$$uuid || '' |
| | | MKEmitter.emit('resetSelectLine', config.uuid, data.$$uuid || '', data) |
| | | } else { |
| | | this.selectedId = '' |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | } |
| | | } |
| | | } |
| | | |