|
@@ -32,7 +32,7 @@
|
|
|
<script>
|
|
|
import { ElDropdownMenu } from 'element-ui';
|
|
|
import { myGraph } from '../common/graph';
|
|
|
-import { baseNode , textTool } from '../common/config';
|
|
|
+import { baseNode , baseNode2 , textTool } from '../common/config';
|
|
|
import FrameToolBar from './frameToolBar.vue';
|
|
|
export default {
|
|
|
components:{ElDropdownMenu,FrameToolBar},
|
|
@@ -95,7 +95,7 @@ export default {
|
|
|
//如果有内容,初始化画布内容
|
|
|
this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
|
|
|
//如果有内容,将画布内容居中
|
|
|
- this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
|
|
|
+ this.FrameworkContent.length&&this.graph.scrollToContent(/* { animation: { duration: 600 }} */)
|
|
|
//如果有内容,遍历每个节点,赋值chartNum
|
|
|
this.FrameworkContent.length&&this.setNodeInfo()
|
|
|
//如果是非编辑页,加载完成画布内容后冻结画布
|
|
@@ -113,48 +113,83 @@ export default {
|
|
|
const currentNode = nodes.find(item=>item.id===node.NodeId)
|
|
|
if(currentNode){
|
|
|
currentNode.removeTools()
|
|
|
+ if(!currentNode.data.id) return
|
|
|
const toolOption = this.getToolOption({chartNum:node.ChartNum||0,color:currentNode.attrs.label.fill})
|
|
|
currentNode.addTools(toolOption)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//添加/编辑节点
|
|
|
- editNode(node){
|
|
|
+ editNode({nodeLink={},nodeName='',nodeId}){
|
|
|
//获取视口范围
|
|
|
const position = this.graph.getContentArea()
|
|
|
const nodes = this.graph.getNodes()
|
|
|
- const currentNode = nodes.find(item=>item.id===node.nodeId)
|
|
|
+ const currentNode = nodes.find(item=>item.id===nodeId)
|
|
|
+ let tempNode = currentNode
|
|
|
if(currentNode){
|
|
|
- currentNode.data.id=node.nodeLink.MyChartClassifyId
|
|
|
- currentNode.label=node.nodeName
|
|
|
- currentNode.data.nodeLink = node.nodeLink
|
|
|
+ const oldId = currentNode.data.id
|
|
|
+ const newId = nodeLink.MyChartClassifyId||0
|
|
|
+ const isSetStyle = (oldId===0&&newId!==0)||(oldId!==0&&newId===0)
|
|
|
+ isSetStyle&&this.setNodeStyle(newId,tempNode)
|
|
|
+
|
|
|
+ tempNode.data.id=nodeLink.MyChartClassifyId||0
|
|
|
+ tempNode.label=nodeName
|
|
|
+ tempNode.data.nodeLink = nodeLink
|
|
|
+ /* currentNode.data.id=nodeLink.MyChartClassifyId||0
|
|
|
+ currentNode.label=nodeName
|
|
|
+ currentNode.data.nodeLink = nodeLink
|
|
|
currentNode.removeTools()
|
|
|
- const toolOption = this.getToolOption({chartNum:node.nodeLink.ChartNum,color:currentNode.attrs.label.fill})
|
|
|
- currentNode.addTools(toolOption)
|
|
|
+ const newId = currentNode.data.id
|
|
|
+ const isSetStyle = (oldId===0&&newId!==0)||(oldId!==0&&newId===0)
|
|
|
+ isSetStyle&&this.setNodeStyle(newId,currentNode)
|
|
|
+ if(!currentNode.data.id) return
|
|
|
+ const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:currentNode.attrs.label.fill})
|
|
|
+ currentNode.addTools(toolOption) */
|
|
|
}else{
|
|
|
//在视口范围内添加节点
|
|
|
- this.graph.addNode({
|
|
|
- ...baseNode,
|
|
|
+ const nodeStyle = nodeLink.MyChartClassifyId?baseNode:baseNode2
|
|
|
+ tempNode = this.graph.addNode({
|
|
|
+ ...nodeStyle,
|
|
|
...{
|
|
|
x:position.x+position.width/2+20,
|
|
|
y:position.y+position.height/2+20,
|
|
|
width:120,
|
|
|
height:50,
|
|
|
data:{
|
|
|
- id:node.nodeLink.MyChartClassifyId,//存储节点对应的myETA分类id
|
|
|
- nodeLink:node.nodeLink,
|
|
|
+ id:nodeLink.MyChartClassifyId||0,//存储节点对应的myETA分类id
|
|
|
+ nodeLink:nodeLink,
|
|
|
},
|
|
|
- label:node.nodeName||'',
|
|
|
- tools:[this.getToolOption({chartNum:node.nodeLink.ChartNum,color:baseNode.attrs.label.fill})]
|
|
|
+ label:nodeName,
|
|
|
}})
|
|
|
}
|
|
|
+ tempNode.removeTools()
|
|
|
+ if(!tempNode.data.id) return
|
|
|
+ const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:tempNode.attrs.label.fill})
|
|
|
+ tempNode.addTools(toolOption)
|
|
|
},
|
|
|
+ //设置节点图分类的数量
|
|
|
getToolOption({chartNum,color}){
|
|
|
const options = _.cloneDeep(textTool)
|
|
|
options.args.markup[0].textContent = chartNum +''
|
|
|
options.args.markup[0].attrs.fill = color
|
|
|
return options
|
|
|
},
|
|
|
+ //设置有无图分类节点的样式
|
|
|
+ //type: 0 无图分类 非0 有图分类
|
|
|
+ //非0 表示节点从无图分类转换成有图分类,节点样式重置为baseNode
|
|
|
+ //0 表示节点从有图分类转换成无图分类,节点样式重置为baseNode2
|
|
|
+ setNodeStyle(type,node){
|
|
|
+ const {attrs={}} = type?baseNode:baseNode2
|
|
|
+ const {body,label} = attrs
|
|
|
+ const styleMap = {
|
|
|
+ 'label/fill':label.fill,
|
|
|
+ 'body/fill':body.fill,
|
|
|
+ 'body/stroke':body.stroke
|
|
|
+ }
|
|
|
+ for(let k in styleMap){
|
|
|
+ node.attr(k,styleMap[k])
|
|
|
+ }
|
|
|
+ },
|
|
|
//点击右键菜单事件
|
|
|
handleContext(key){
|
|
|
const select_cell = this.graph.getSelectedCells()
|