新余建设网站,海口网站建设搜q479185700,甘肃兰州邮编,制作网站 公司简介直接上图#xff1a; 从上图中可以看到整个工单的进度是从【开始】指向【PCB判责】【完善客诉】【PCBA列表】#xff0c;同时【完善客诉】又可以同时指向【PCB判责】【PCBA列表】#xff0c;后续各自指向自己的进度。
直接上代码#xff1a;
1.安装
1.1 Npm 方式
npm …直接上图 从上图中可以看到整个工单的进度是从【开始】指向【PCB判责】【完善客诉】【PCBA列表】同时【完善客诉】又可以同时指向【PCB判责】【PCBA列表】后续各自指向自己的进度。
直接上代码
1.安装
1.1 Npm 方式
npm i relation-graph
1.2 Yarn方式
yarn add relation-graph
2.使用
2.1 html部分代码 RelationGraphv-ifvisiblerefseeksRelationGraphstyleheight: 300px;width: 80%;margin: 0 auto;border: 1px solid #666;:optionsgraphOptionstemplate #node{ node }div classmy-nodediv classmy-node-text{{ node.text }}/divdivclassmy-node-detailv-ifnode.data node.data.creatorNamediv dblclickhandleCopy(node.data){{ node.data.taskOwnerName }}({{ node.data.taskOwner }}){{(node.data.completedTime || node.data.creationTime) | moment}}/div/div/div/template/RelationGraph2.2 script部分代码 scriptimport RelationGraph from relation-graph;//引入插件export default {name: Demo,components: { RelationGraph },//注册插件data() {return {//设置插件的参数graphOptions: {allowSwitchLineShape: true,allowSwitchJunctionPoint: true,// 这里可以参考Graph 图谱中的参数进行设置:http://relation-graph.com/#/docs/graphlayouts: [{label: 中心,layoutName: tree, //布局方式tree树状布局/center中心布局/force自动布局// layoutClassName: seeks-layout-center, //当使用这个布局时会将此样式添加到图谱上// centerOffset_y: 130, //根节点y坐标偏移量针对项目配置单位为pxmin_per_width: 150, //节点距离限制:节点之间横向距离最小值min_per_height: 180, //节点距离限制:节点之间纵向距离最小值from: left,},],defaultLineMarker: {markerWidth: 40,markerHeight: 40,refX: 6,refY: 6,data: M2,2 L10,6 L2,10 L6,6 L2,2,},defaultNodeShape: 0, //默认的节点形状0:圆形1:矩形// defaultExpandHolderPosition: right, //节点展开关闭的按钮位置defaultLineShape: 1, //默认的线条样式1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6defaultJunctionPoint: border, //默认的连线与节点接触的方式border:边缘/ltrb:上下左右/tb:上下/lr:左右当布局为树状布局时应使用tb或者lr这样才会好看// defaultNodeBorderWidth: 0.2, //节点边框粗细// defaultcolor: rgba(0, 186, 189, 1), //默认的线条颜色// defaultNodeColor: rgba(0, 206, 209, 1), //默认的节点背景颜色// defaultFocusRootNode: false, //默认为根节点添加一个被选中的样式// moveToCenterWhenResize: true, //当图谱的大小发生变化时是否重新让图谱的内容看起来居中// 这里可以参考Graph 图谱中的参数进行设置moveToCenterWhenRefresh: false,// graphOffset_x: -500,// graphOffset_y: -100,},}},}/script接口返回的数据结构是这样的 上图中的connections是线的关系nodes是节点。
需要对上面的数据结构进行处理后才能实现上面的效果
this.taskRecords {nodes: [{taskName: 完善客诉,taskNodeName: WanShanKeSu},{taskName: PCB判责,taskNodeName: PCBPanZe},{taskName: PCBA判责,taskNodeName: PCBAPanZe},{taskName: 客服处理,taskNodeName: KeFuChuLi},{taskName: OA审批,taskNodeName: OAShenPi}],connections: [{from: ,to: WanShanKeSu,depth: null},{from: ,to: PCBPanZe,depth: null},{from: ,to: PCBAPanZe,depth: null},{from: WanShanKeSu,to: PCBPanZe,depth: null},{from: WanShanKeSu,to: PCBAPanZe,depth: null},{from: PCBPanZe,to: KeFuChuLi,depth: null},{from: PCBAPanZe,to: KeFuChuLi,depth: null},{from: KeFuChuLi,to: OAShenPi,depth: null},{from: OAShenPi,to: KeFuChuLi,depth: null}]
}showSeeksGraph() {let nodeArr [];let endArr [];let nodeObj {start: [],end: [],};this.taskRecords.connections.forEach((item) {if (!item.from) {item.from start;}endArr.push(item.from);});this.taskRecords.nodes this.taskRecords.nodes.forEach((item) {nodeArr.push(item.taskNodeName);nodeObj[item.taskNodeName] [];});this.taskRecords.connections this.taskRecords.connections.forEach((item) {nodeObj[item.from].push(item.to);});console.log(222, this.taskRecords.connections);for (let key in nodeObj) {if (nodeObj[key].length) {nodeObj[key].forEach((item) {if (nodeObj[item].length 1) {let arr nodeObj[item].filter((n) nodeObj[key].indexOf(n) -1);let len Math.floor(arr.length / 2);let centerIndex this.taskRecords.connections.findIndex((no) no.from key no.to item);let currentObj this.taskRecords.connections[centerIndex];this.taskRecords.connections.splice(centerIndex, 1);this.taskRecords.connections.splice(len, 0, currentObj);}});}}nodeArr nodeArr.forEach((item) {if (endArr.indexOf(item) -1) {this.taskRecords.connections.push({from: item,to: end,});}});let nodes [{text: 开始,id: start,},];this.taskRecords.nodes this.taskRecords.nodes.forEach((item) {nodes.push({id: item.taskNodeName,text: item.taskName,color: item.color,...item,});});nodes.push({text: 结束,id: end,});console.log(this.taskRecords.connections,nodes,this.taskRecords.connections);//需要指定 节点参数和连接线的参数this.graph_json_data {rootId: start,nodes: nodes,lines: this.taskRecords.connections,};this.$refs.seeksRelationGraph.setJsonData(this.graph_json_data,(seeksRGGraph) {});},上面的代码就可以实现了。如果要i
