|
@@ -32,7 +32,7 @@
|
|
|
<script>
|
|
|
import { ElDropdownMenu } from 'element-ui';
|
|
|
import { myGraph } from '../common/graph';
|
|
|
-import { baseNode } from '../common/config';
|
|
|
+import { baseNode , textTool } from '../common/config';
|
|
|
import FrameToolBar from './frameToolBar.vue';
|
|
|
export default {
|
|
|
components:{ElDropdownMenu,FrameToolBar},
|
|
@@ -40,6 +40,10 @@ export default {
|
|
|
FrameworkContent:{ //框架内容
|
|
|
type:String,
|
|
|
default:''
|
|
|
+ },
|
|
|
+ Nodes:{
|
|
|
+ type:Array,
|
|
|
+ default:[]
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -70,9 +74,6 @@ export default {
|
|
|
this.currentCell = null
|
|
|
}
|
|
|
},
|
|
|
- FrameworkContent(newVal){//当框架内容发生改变时,画布内容也发生改变
|
|
|
- newVal.length&&this.gragh&&this.graph.fromJSON(JSON.parse(newVal))
|
|
|
- }
|
|
|
},
|
|
|
computed:{
|
|
|
contextMenu(){//右键菜单,根据权限配置
|
|
@@ -95,6 +96,8 @@ export default {
|
|
|
this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
|
|
|
//如果有内容,将画布内容居中
|
|
|
this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
|
|
|
+ //如果有内容,遍历每个节点,赋值chartNum
|
|
|
+ this.FrameworkContent.length&&this.setNodeInfo()
|
|
|
//如果是非编辑页,加载完成画布内容后冻结画布
|
|
|
window.location.pathname.startsWith('/chartframe')&&this.graph.freeze()
|
|
|
//如果是编辑页,加载完成后清除历史数据
|
|
@@ -104,6 +107,17 @@ export default {
|
|
|
dispose(){
|
|
|
this.graph&&this.graph.dispose()
|
|
|
},
|
|
|
+ setNodeInfo(){
|
|
|
+ const nodes = this.graph.getNodes()
|
|
|
+ this.Nodes.forEach(node=>{
|
|
|
+ const currentNode = nodes.find(item=>item.id===node.NodeId)
|
|
|
+ if(currentNode){
|
|
|
+ currentNode.removeTools()
|
|
|
+ const toolOption = this.getToolOption(node.ChartNum||0)
|
|
|
+ currentNode.addTools(toolOption)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
//添加/编辑节点
|
|
|
editNode(node){
|
|
|
//获取视口范围
|
|
@@ -114,6 +128,9 @@ export default {
|
|
|
currentNode.data.id=node.nodeLink.MyChartClassifyId
|
|
|
currentNode.label=node.nodeName
|
|
|
currentNode.data.nodeLink = node.nodeLink
|
|
|
+ currentNode.removeTools()
|
|
|
+ const toolOption = this.getToolOption(node.nodeLink.ChartNum)
|
|
|
+ currentNode.addTools(toolOption)
|
|
|
}else{
|
|
|
//在视口范围内添加节点
|
|
|
this.graph.addNode({
|
|
@@ -125,12 +142,19 @@ export default {
|
|
|
height:50,
|
|
|
data:{
|
|
|
id:node.nodeLink.MyChartClassifyId,//存储节点对应的myETA分类id
|
|
|
- nodeLink:node.nodeLink
|
|
|
+ nodeLink:node.nodeLink,
|
|
|
},
|
|
|
- label:node.nodeName||''
|
|
|
+ label:node.nodeName||'',
|
|
|
+ tools:[this.getToolOption(node.nodeLink.ChartNum)]
|
|
|
}})
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
+ getToolOption(chartNum){
|
|
|
+ const options = _.cloneDeep(textTool)
|
|
|
+ options.args.markup[0].textContent = chartNum +''
|
|
|
+ return options
|
|
|
+ },
|
|
|
//点击右键菜单事件
|
|
|
handleContext(key){
|
|
|
const select_cell = this.graph.getSelectedCells()
|
|
@@ -191,6 +215,7 @@ export default {
|
|
|
getContentNodes(){
|
|
|
return this.graph.getNodes().map(node=>{
|
|
|
return {
|
|
|
+ NodeId:node.id,
|
|
|
NodeName:node.label,
|
|
|
MyChartClassifyId:Number(node.data.id)
|
|
|
}
|