RelationGraph实现工单进度图—

RelationGraph实现工单进度图——js技能提升

直接上图：
在这里插入图片描述
从上图中可以看到整个工单的进度是从【开始】指向【PCB判责】+【完善客诉】+【PCBA列表】，同时【完善客诉】又可以同时指向【PCB判责】+【PCBA列表】，后续各自指向自己的进度。

直接上代码：

1.安装

1.1 Npm 方式

npm i relation-graph

1.2 Yarn方式

yarn add relation-graph

2.使用

2.1 html部分代码

 <RelationGraphv-if="visible"ref="seeksRelationGraph"style="height: 300px;width: 80%;margin: 0 auto;border: 1px solid #666;":options="graphOptions"><template #node="{ node }"><div class="my-node"><div class="my-node-text">{{ node.text }}</div><divclass="my-node-detail"v-if="node.data && node.data.creatorName"><div @dblclick="handleCopy(node.data)">{{ node.data.taskOwnerName }}({{ node.data.taskOwner }})：{{(node.data.completedTime || node.data.creationTime) | moment}}</div></div></div></template></RelationGraph>

2.2 script部分代码

 <script>import 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坐标偏移量（针对项目配置单位为px）min_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:样式6）defaultJunctionPoint: '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) => {});},