Skip to content

davehandong / cflowchart

Go to a project
Commit d5e06524 by HanDongdong
Options

temp finished.

parent 7f389121
Inline Side-by-side
Showing with 420 additions and 14 deletions
src/main/config/spring-database.xml
......@@ -84,7 +84,7 @@
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="annotationClass" value="org.springframework.stereotype.Repository" />
<property name="basePackage" value="com.sinosoft.cbic.*.mapper" />
<property name="basePackage" value="com.sinosoft.cflowchart.mapper" />
<property name="sqlSessionFactory" ref="sqlSessionFactory" />
</bean>
......
src/main/java/com/sinosoft/cflowchart/controller/ProcessorController.java
package com.sinosoft.cflowchart.controller;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.sinosoft.cflowchart.model.TestModel;
import com.sinosoft.cflowchart.service.FlowChartService;
import com.sinosoft.cflowchart.model.FlowChart;
@Controller
public class ProcessorController {
@RequestMapping("/workflow/{flowId}")
public @ResponseBody TestModel getFlowById(@PathVariable String flowId) {
TestModel ret = new TestModel();
ret.setId("33ef05861acedd");
ret.setName("测试数据");
ret.setRemark("测试SpringMVC返回测试数据,flowId: " + flowId);
return ret;
@Autowired
FlowChartService flowchartService;
@RequestMapping("/workflow/{flowId}/{recordId}")
public @ResponseBody Map<String, FlowChart> getFlowById(@PathVariable String flowId, @PathVariable String recordId) {
Map<String, FlowChart> map = flowchartService.getFlowChart(flowId, recordId);
return map;
}
}
src/main/java/com/sinosoft/cflowchart/mapper/FlowChartMapper.java 0 → 100644
package com.sinosoft.cflowchart.mapper;
import java.util.List;
import org.springframework.stereotype.Repository;
import com.sinosoft.cflowchart.model.FlowChart;
@Repository
public interface FlowChartMapper {
public List<FlowChart> getFlowChart(String flowId, String recordId);
}
src/main/java/com/sinosoft/cflowchart/mapper/FlowChartMapper.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sinosoft.cflowchart.mapper.FlowChartMapper">
<resultMap type="com.sinosoft.cflowchart.model.FlowChart" id="flowChartMapper">
<id column="id" property="id"/>
<result column="type" property="type"/>
<result column="positionX" property="positionX"/>
<result column="positionY" property="positionY"/>
<result column="text" property="text"/>
<result column="prevId" property="prevId"/>
<result column="nextId" property="nextId"/>
<result column="color" property="color"/>
</resultMap>
<select id="getFlowChart" parameterType="String" resultMap="flowChartMapper">
SELECT
t.*,
CASE t.type
WHEN 'picture' THEN DECODE(color_table.color,NULL,'red',color_table.color)
ELSE ''
END
AS color
FROM
(
SELECT
pic.wfleveid AS id,
'picture' AS type,
pic.vbnodex AS position_x,
pic.vbnodey AS position_y,
pic.wflevename AS text,
'' AS prev_id,
'' AS next_id,
pic.workflowid
FROM
flow_wfleve pic
UNION ALL
SELECT
line.wfoperateid AS id,
'line' AS type,
'' AS position_x,
'' AS position_y,
'' AS text,
line.wfleveid AS prev_id,
line.nextwfleveid AS next_id,
line.workflowid
FROM
flow_wfoperate line
) t
LEFT JOIN (
SELECT DISTINCT
lg.wflevelid AS m_id,
'green' AS color
FROM
flow_wflog lg
WHERE
1 = 1
AND NOT EXISTS (
SELECT
1
FROM
flow_write rt
INNER JOIN flow_wflog lg2 ON lg2.logid = rt.logid
WHERE
lg2.wflevelid = lg.wflevelid
AND rt.workflowid = #{0}
AND rt.recordid = #{1}
)
AND lg.workflowid = #{0}
AND lg.recordid = #{1}
UNION ALL
SELECT DISTINCT
lg.wflevelid AS m_id,
'blue' AS color
FROM
flow_write rt
INNER JOIN flow_wflog lg ON lg.logid = rt.logid
AND rt.workflowid = #{0}
AND rt.recordid = #{1}
) color_table ON color_table.m_id = t.id
WHERE
1 = 1
AND t.workflowid = #{0}
</select>
</mapper>
src/main/java/com/sinosoft/cflowchart/model/FlowChart.java 0 → 100644
package com.sinosoft.cflowchart.model;
public class FlowChart {
private String id;
private String type;
private String positionX;
private String positionY;
private String text;
private String prevId;
private String nextId;
private String color;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getPositionX() {
return positionX;
}
public void setPositionX(String positionX) {
this.positionX = positionX;
}
public String getPositionY() {
return positionY;
}
public void setPositionY(String positionY) {
this.positionY = positionY;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getPrevId() {
return prevId;
}
public void setPrevId(String prevId) {
this.prevId = prevId;
}
public String getNextId() {
return nextId;
}
public void setNextId(String nextId) {
this.nextId = nextId;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
src/main/java/com/sinosoft/cflowchart/service/FlowChartService.java 0 → 100644
package com.sinosoft.cflowchart.service;
import java.util.Map;
import com.sinosoft.cflowchart.model.FlowChart;
public interface FlowChartService {
public Map<String, FlowChart> getFlowChart(String flowId, String recordId);
}
src/main/java/com/sinosoft/cflowchart/service/FlowChartServiceImpl.java 0 → 100644
package com.sinosoft.cflowchart.service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.sinosoft.cflowchart.mapper.FlowChartMapper;
import com.sinosoft.cflowchart.model.FlowChart;
@Service
public class FlowChartServiceImpl implements FlowChartService {
@Autowired
FlowChartMapper flowchartMapper;
@Override
public Map<String, FlowChart> getFlowChart(String flowId, String recordId) {
List<FlowChart> list = flowchartMapper.getFlowChart(flowId, recordId);
Map<String, FlowChart> ret = new HashMap<String, FlowChart>();
for(FlowChart flowchart : list) {
ret.put(flowchart.getId(), flowchart);
}
return ret;
}
}
src/main/webapp/assets/js/flowchart.js 0 → 100644
var cfchart = {
c: null,
ctx: null,
data: null,
node_width: 129,
node_height: 46,
init: function(arg){
this.c = document.getElementById(arg);
this.ctx = this.c.getContext('2d');
this.ctx.font = '15px 宋体';
},
draw: function(arg){
this.data = arg;
for(var curId in this.data){
var item = this.data[curId]; //current picture object
try {
this.drawGraphics(item);
}catch(err){
// console.log(err);
}
}
},
drawGraphics: function(obj){
if(obj.type == 'picture'){ // draw the node
var img = new Image();
img.onload = function(){
this.ctx.drawImage(img,obj.positionX,obj.positionY);
var text_posx = parseFloat(obj.positionX) + (this.node_width-obj.text.length*15)/2;
var text_posy = parseFloat(obj.positionY) + 29;
ctx.strokeText(obj.text, text_posx, text_posy);
}
if(obj.COLOR == 'red')
img.src = 'node_u.gif';
else if(obj.COLOR == 'green')
img.src = 'node_f.gif';
else if(obj.COLOR == 'blue')
img.src = 'node_c.gif';
}else{ //draw the line
this.drawHandle(obj.ID);
}
},
drawHandle: function(lineId){
var lineObj = this.data[lineId];
var pic1 = this.data[lineObj.prevId];
var pic2 = this.data[lineObj.nextId];
var gap_x = Math.abs(pic1.positionX - pic2.positionX);
var gap_y = Math.abs(pic1.positionY - pic2.positionY);
if(gap_x == 0 && gap_y == 0){ //self loop
var img = new Image();
img.onload = function(){
ctx.drawImage(img,parseFloat(pic1.positionX)+55,parseFloat(pic1.positionY)+30);
}
img.src = 'loop.gif';
}else{
var xDistance = (this.node_height/2)*gap_x/gap_y;
var yDistance = (this.node_width/2)*gap_y/gap_x;
var startX=0, startY=0;
var len = 0;
if(xDistance <= this.node_width/2 && gap_y != 0){ // the point of intersection on the X-axis
var line1 = Math.abs(parseFloat(pic1.positionX) - parseFloat(pic2.positionX));
var line2 = Math.abs(parseFloat(pic1.positionY) - parseFloat(pic2.positionY));
var angle = this.getAngle(line1, line2);
if(parseFloat(pic1.positionY) < parseFloat(pic2.positionY)){
startY = parseFloat(pic1.positionY) + this.node_height + 3;
if(parseFloat(pic1.positionX) < parseFloat(pic2.positionX)){
angle = Math.PI/2 - angle;
startX = parseFloat(pic1.positionX) + this.node_width/2 + xDistance - 5;
}else{
angle = Math.PI/2 + angle;
startX = parseFloat(pic1.positionX) + this.node_width/2 - xDistance + 5;
}
}else if(parseFloat(pic2.positionY) < parseFloat(pic1.positionY)){
startY = parseFloat(pic1.positionY) - 3;
if(parseFloat(pic1.positionX) < parseFloat(pic2.positionX)){
angle = -Math.PI/2 + angle;
startX = parseFloat(pic1.positionX) + this.node_width/2 + xDistance - 5;
}else{
angle = -Math.PI/2 - angle;
if(gap_x != 0){
startX = parseFloat(pic1.positionX) + this.node_width/2 - xDistance + 5;
}else{
startX = parseFloat(pic1.positionX) + this.node_width/2 - xDistance - 5;
}
}
}
len = getLineLength(line1,line2,'x');
if(isNaN(len)){
len = gap_y - this.node_height;
}
len = len - 21;
}else if(gap_y != 0){ // the point of intersection on the Y-axis
var line1 = Math.abs(parseFloat(pic1.positionY) - parseFloat(pic2.positionY));
var line2 = Math.abs(parseFloat(pic1.positionX) - parseFloat(pic2.positionX));
var angle = this.getAngle(line1, line2);
if(parseFloat(pic1.positionY) < parseFloat(pic2.positionY)){
startY = parseFloat(pic1.positionY) + this.node_height/2 + yDistance;
if(parseFloat(pic1.positionX) < parseFloat(pic2.positionX)){
startX = parseFloat(pic1.positionX) + this.node_width + 3;
startY = startY + 5;
}else{
angle = Math.PI - angle;
startX = parseFloat(pic1.positionX) - 3;
startY = startY - 5;
}
}else{
startY = parseFloat(pic1.positionY) + this.node_height/2 - yDistance;
if(parseFloat(pic1.positionX) < parseFloat(pic2.positionX)){
angle = -angle;
startX = parseFloat(pic1.positionX) + this.node_width + 3;
startY = startY + 5;
}else{
angle = -Math.PI + angle;
startX = parseFloat(pic1.positionX) - this.node_width - 3;
startY = startY - 5;
}
}
len = getLineLength(line1, line2, 'y');
if(isNaN(len)){
len = gap_x - this.node_width;
}
len = len - 21;
}else{
if(parseFloat(pic1.positionX) < parseFloat(pic2.positionX)){
startY = parseFloat(pic1.positionY) + this.node_height/2 + 3;
startX = parseFloat(pic1.positionX) + this.node_width + 3;
angle = 0;
}else{
startY = parseFloat(pic2.positionY) + this.node_height/2 - 3;
startX = parseFloat(pic1.positionX) - 3;
angle = Math.PI;
}
len = Math.abs(parseFloat(pic1.positionX)-parseFloat(pic2.positionX));
len = len - this.node_width - 21;
}
console.log(pic2.COLOR);
var arrow = 'line_u.gif';
if(pic2.COLOR != 'red' && pic1.COLOR != 'red')
arrow = 'line_c.gif';
drawLine(angle, len, startX, startY, arrow);
}
},
getAngle: function(line1, line2){
var angle = Math.atan(line1/line2);
return angle;
},
getLineLength: function(line1, line2, point){
var len = 0;
var angle = getAngle(line1, line2);
if(point == 'x'){
var hypotenuse = line1/Math.sin(angle);
var _hypotenuse = node_height/2/line2*hypotenuse;
len = hypotenuse - _hypotenuse * 2;
}else{
var hypotenuse = line1/Math.sin(angle);
var _hypotenuse = node_width/2/line2*hypotenuse;
len = hypotenuse - _hypotenuse * 2;
}
return len;
},
drawLine: function(angle,length,offsetx,offsety,arrow){
var arch = new Image();
arch.onload = function(){
ctx.save();
ctx.translate(offsetx,offsety);
ctx.rotate(angle);
ctx.drawImage(arch,31,0,15,17,length,-8,15,17);
ctx.lineWidth=4;
if(arrow =='line_c.gif'){
ctx.strokeStyle='rgb(255,50,50)';
}else{
ctx.strokeStyle='rgb(70,70,70)';
}
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(length,0);
ctx.stroke();
ctx.restore();
}
arch.src = arrow;
}
}
\ No newline at end of file
src/main/webapp/index.jsp
<!doctype HTML>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
......@@ -11,18 +12,39 @@
height: 40rem;
border: 1px solid red;
}
.conditions-container { margin: 1.2rem; }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/jquery/jquery-3.2.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/flowchart.js"></script>
<script type="text/javascript">
var c, ctx;
$(document).ready(function(){
var c = document.getElementById('flowCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#ff0000';
ctx.fillRect(0,0,150,75);
cfchart.init('flowCanvas');
});
function search(){
var flowId = document.getElementById('flowId').value;
var recordId = document.getElementById('recordId').value;
var url = '${pageContext.request.contextPath}/workflow/'+flowId+'/'+recordId;
$.ajax({
url: url,
dataType: 'json',
type: 'POST',
data: {flowId:'', recordId:''},
success:function(t){
cfchart.draw(t);
}
});
}
</script>
</head>
<body>
<div class="conditions-container">
<label for="flowId">flowId:</label>
<input type="text" name="flowId" id="flowId" value="1708030927158080192168801420000">
<label for="recordId">recordId:</label>
<input type="text" name="recordId" id="recordId" value="4028d1c96163b75b016168dc95270001">
<button onclick="search()">查询</button>
</div>
<canvas id="flowCanvas" class="flowCanvas"></canvas>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment