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部分代码
<RelationGraph
v-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>
<div
class="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/graph
layouts: [
{
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) => {}
);
},
上面的代码就可以实现了。如果要i
原文地址：https://blog.csdn.net/yehaocheng520/article/details/142814209
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！