目录
效果
演示地址
代码地址
前端
修改思路
1.首先这个svg是参考display实现的。复制一份display出来变成display-custom.然后自己改源码就行了。
2、改displaymodel.html
<html>
<head>
<!-- build:css ./styles/displaymodel-style.css -->
<script src="../scripts/app-cfg.js"></script>
<script src="../scripts/configuration/url-config.js"></script>
<script src="../libs/jquery_1.11.0/jquery.min.js"></script>
<script src="../libs/jquery-ui-1.10.3.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="./jquery.qtip.min.css" />
<link type="text/css" rel="stylesheet" href="./displaymodel.css" />
<!-- endbuild -->
<!-- build:js ./scripts/displaymodel-logic.js -->
<script type="text/javascript" src="./jquery.qtip.min.js"></script>
<script type="text/javascript" src="./raphael.min.js"></script>
<script type="text/javascript" src="./bpmn-draw.js"></script>
<script type="text/javascript" src="./bpmn-icons.js"></script>
<script type="text/javascript" src="./Polyline.js"></script>
<script type="text/javascript" src="./displaymodel.js"></script>
<!-- endbuild -->
</head>
<body>
<div id="bpmnModel" style="height: 100%; width: 100%;"></div>
</body>
</html>
3、改displaymodel.js
修改的地方（左边新 右边旧）
COMPLETED_COLOR：已完成的颜色的标记
CURRENT_COLOR：当前节点的颜色的标记
HOVER_COLOR： 鼠标放上去的颜色标记
ACTIVITY_STROKE_COLOR：未走过的节点的颜色标记
这个地方是获取url传过来的参数，因为引用的方式是
<iframe
v-if="processInstanceId"
:src="`/workflow/display-custom/displaymodel.html?v=${ts}&processInstanceId=${processInstanceId}&modelType=runtime&processDefinitionId=${definitionId}&historyModelId=${historyModelId}`"
width="100%"
height="100%"
frameborder="0"
scrolling="no"
></iframe>
======================================================================
function _showTip(htmlNode, element) {
console.log(222, element)
var documentation = undefined;
if (element.type === 'UserTask' || element.type === 'StartEvent' || element.type === 'endEvent') {
documentation = "<div style="padding: 5px; ">";
if (element.myname) {
documentation = documentation + "<div style="font-size:14px;height:30px;line-height:30px;border-bottom:1px solid #D3D3D3;white-space:nowrap">" +
"<span style="font-weight:bold">审批人:</span><span style="margin-left:10px">" + element.myname + "</span></div>";
}
if (element.myrole) {
documentation = documentation + "<div style="font-size:14px;height:30px;line-height:30px;border-bottom:1px solid #D3D3D3;white-space:nowrap">" +
"<span style="font-weight:bold">审批角色:</span><span style="margin-left:10px">" + element.myrole + "</span></div>";
}
if (!element.completed) {
element.endTime = '';
}
if (!element.completed && !element.current) {
element.startTime = '';
}
if (element.startTime) {
documentation = documentation +
"<div style="font-size:14px;height:30px;line-height:30px;border-bottom:1px solid #D3D3D3;white-space:nowrap">" +
"<span style="font-weight:bold">开始时间:</span><span style="margin-left:10px">" + element.startTime + "</span></div>"
}
if (element.endTime) {
documentation = documentation +
"<div style="font-size:14px;height:30px;line-height:30px;border-bottom:1px solid #D3D3D3;white-space:nowrap">" +
"<span style="font-weight:bold">结束时间:</span><span style="margin-left:10px">" + element.endTime + "</span></div>";
}
if (element.name) {
documentation = documentation + "<div style="font-size:14px;height:30px;line-height:30px;border-bottom:1px solid #D3D3D3;white-space:nowrap">" +
"<span style="font-weight:bold">节点名称:</span><span style="margin-left:10px">" + element.name + "</span></div>";
}
documentation = documentation + "</div>";
}
这一块就是就是显示鼠标方式去的提示的逻辑。
======================================================================
function getDoneIds(doneIds, doneSequenceFlows, data, currentId) {
let flows = data.flows;
for (let i = 0; i < flows.length; i++) {
if (flows[i].targetRef === currentId && data.completedActivities.includes(flows[i].id)) {
doneIds.push(flows[i].sourceRef);
doneSequenceFlows.push(flows[i].id);
getDoneIds(doneIds, doneSequenceFlows, data, flows[i].sourceRef);
}
}
}
默认返回的数据有问题。这对驳回高亮的需要特殊处理下。否则高亮会乱
======================================================
修改显示的宽度
以上是前端的修改逻辑，下面说下后端的
4、 参照RuntimeDisplayJsonClientResource.java(这个是源码里面的类)改下后台路逻辑（前端请求的地址就是这个控制器的请求），把返回节点的属性的逻辑改下，不然前端的这个属性没来源呀！
前端获取数据就是在这个方法获取的
在这里重写这个类，然后在方法结束的时候改下返回的数据。
主要看这个packingProcessNode方法就行了，逻辑就是在这里实现的。
5、最后iframe引用界面就行了
<iframe
v-if="processInstanceId"
:src="`/workflow/display-custom/displaymodel.html?v=${ts}&processInstanceId=${processInstanceId}&modelType=runtime&processDefinitionId=${definitionId}&historyModelId=${historyModelId}`"
width="100%"
height="100%"
frameborder="0"
scrolling="no"
></iframe>
这里的
ts是时间戳，
processInstanceId是指流程实例ID,
definitionId是流程定义ID，
historyModelId是指历史流程ID(流程结束了才传，没结束可以不传)
补充
发现任务审批的时候，字数超出不会换行如下图所示
修改后的效果
解决方法：
修改 bpmn-draw.js 670行开始（这个bpmn-draw.js正常在display下，假如你按照我的步骤，应该在display-custom下），修改如下
修改前
修改后
let newText = [];
for (let i = 0; i < text.length; i++) {
newText.push(text[i]);
if (i%7==0 =0) {
newText.push("
");
}
}
var removedLineBreaks = newText.join("").split("
")
下一篇：流程驳回