activity流程图

蓝天bluesky 发布于 02/22 17:59
阅读 668
收藏 0

activity的流程图显示很简单,就是一张图片,最多加高亮显示, 有没有可以交互的展示方式, 比如点击某个流程节点可以查看流程相关信息。

加载中
0
O
OSC_lBuqvm

bpmn了解一下?

蓝天bluesky
蓝天bluesky
了改一下.
0
tcxu
tcxu

业务流程建模与标注 (Business Process Modeling Notation).

BPMN软件:ProcessOn流程图设计器是一个面向垂直专业领域的作图工具和社交网络,成立于20116月并于2012年启动。支持绘制思维导图、流程图、UML、网络拓扑图、组织结构图、原型图、时间轴等等。

如果想要更灵活交互展示的流程图,可否试试 Echarts, 或 自己动手 通过 HTML5 + js 画布 canvas 上创作 Activity 流程图?

参考:

1.    用 echarts 制作的动画流程图

2.     Highcharts导出服务器概述

3.    用highcharts 再 画一个流程图

 

0
tcxu
tcxu

流程图交互展示案例 1 

观光流程图案例说明:

有贵宾团拟于今年(2021年)春节过后,乘高铁出发,在北京西站下车,之后参观北京两个公园,再从北京东站上车去长城。选派牛年(2021)的牛牛为北京接待员。
接待单位事先将这份设计好的观光流程图, 发给贵宾团通报参观计划。流程图代码如下(复制粘贴代码,即可在本地电脑运行):

<html>
<head>
    <meta charset="utf-8">
    <style>
	#map{
		position:absolute;
		left:0px;
		top:50px;
		z-index:1;
		width:1000px;
		
	}
	#main{
		position:absolute;
		left:0px;
		top:0px;
		z-index:2;
	}
	</style>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<img id="map" src="https://oscimg.oschina.net/oscnet/up-0a284156798df6d303aca581a4664665551.png">
<div id="main" style="width: 900px; height:600px;"></div>
</body>
<script>

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

myChart.on('click', function(params) {
	if (params.data.name=='北京西站') openVideo('http://zhy-media.meldingcloud.com/video/720p/79e7727dfee7477e86de205d0d3766d2/transcode_1534406970207/b624a1f2-b7f4-42fc-9032-e3a91ba4ef5d.mp4') ;
	else
    window.open(params.data.url, "Newwindow", "height=1000, width=1000, top=100,left=100, scrollbars=yes, resizable=no");
});

function openVideo(src) {
        var page = window.open();
            var s = "<body style='background: black'>" ;
                s += "<div style='width: 80%;margin: auto'>";
                s += "<video controls width='100%' autoplay src='" + src+ "'></video>";
                        "</div></body>";
        page.document.write(s);	
}    

option = {
    title: {
        text: '访问北京流程图'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                fontSize: 20
            },
            data: [{
                name: '北京西站',
                x: 68,
                y: 260				
            }, {
                name: '北海公园',
                x: 358,
                y: 72,
				"url": "https://baike.so.com/doc/9550-9872.html"
            }, {
                name: '天坛公园',
                x: 430,
                y: 316,
				"url": "https://baike.so.com/doc/5036426-5263027.html?from=212510&sid=5263027&redirect=search"
            }, {
                name: '北京东站',
                x: 723,
                y: 226,
				"url": "https://baike.so.com/doc/6456275-6669962.html"
            }],

            links: [{
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                    show: false
                },
                
            }, {
                source: 1,
                target: 2,
                label: {
                    show: false
                },
                
            }, {
                source: 2,
                target: 3
            }],
            lineStyle: {
                opacity: 0.9,
                width: 5,

            }
        }
    ]
};

option && myChart.setOption(option);

</script>
</html>


观光流程图制作过程:
1.    创建一份北京地图影像文档, 用作背景 (z-index:1)。


2.    运行下列html代码,将鼠标分别移动到给定的4个地点(北京西站、北海公园、天坛公园,和 北京东站),以便获得文本框中所显示的读数 [x,y],以此作为关系图上4个节点在画布上的大致坐标。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />)
<title>CoordinateSheet</title>
<script>

document.onmousemove = getMouseXY;
function getMouseXY(e) {
	tempX = event.clientX  
    tempY = event.clientY
	document.Show.X.value = tempX
  	document.Show.Y.value = tempY
}

function draw(){
var g2d = document.getElementById("coordinate").getContext("2d");

for (var i=0;i<=90;i++){
g2d.beginPath();
g2d.moveTo(i*10,  0);
g2d.lineTo(i*10,600);
if (i%10==0) g2d.strokeStyle="red"; else g2d.strokeStyle="black";
g2d.stroke();
}
for (var i=0;i<=60;i++){
g2d.beginPath();
g2d.moveTo(0   ,i*10);
g2d.lineTo(900 ,i*10);
if (i%10==0) g2d.strokeStyle="red"; else g2d.strokeStyle="black";
g2d.stroke();
}

g2d.font="15px ARIAL";
g2d.fillStyle="green";
for (var i=1; i<=6; i++) {
g2d.fillText(i + "00",900,i*100+5);
}
for (var i=1; i<=8; i++) {
g2d.fillText(i + "00",i*100-12,610);
}
}

function preparation(){
	draw();
}
</script>
<style>
#myCanvas{
	z-index:3;
	position:absolute;
	left:0px;
	top:0px;
}
#coordinate{
	z-index:2;
	position:absolute;
	left:0px;
	top:0px;
}
#img1{
	z-index:1;
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
}
#show{
	z-index:1;
	position:absolute;
	left:950px;
	top:0px;
}
</style>
</head>

<body onLoad="preparation()">
<canvas id="myCanvas" width="1000" height="700" >  
   <p>Your browserdoes not support the canvas element!</p>  
</canvas> 
<canvas id="coordinate" width="1000" height="700" >  
   <p>Your browserdoes not support the canvas element!</p>  
</canvas> 
<img id = "img1" src="https://oscimg.oschina.net/oscnet/up-0a284156798df6d303aca581a4664665551.png" />
<form id="show" name="Show"><table><tr><td>当前鼠标坐标 </td></tr>
<tr><td>X:&nbsp;<input type="text" name="X" value="0" size="4"> </td></tr>
<tr><td>Y:&nbsp;<input type="text" name="Y" value="0" size="4"> </td></tr>
</table>
</form>
</body>
</html>

3.    依照上述坐标数据,写出关系图代码 (echarts 的关系图画布 id='main', 其 z-index:2)。
4.    鉴于疫情尚未解除,特别设计用户点击节点可分别打开新窗口, 展示的内容分别是:

  •         北京西站:   去年(2020) 春节刚过的该站视频。
  •         北海/天坛公园,以及北京东站:百度介绍。

5.  最后调整一下北京地图的大小和位置,即可使用。

0
TimeGIS
TimeGIS

免费流程图软件

可以看看我开发的免费流程图软件

TimeGIS
TimeGIS
回复 @tcxu : 现在个人网站无法提供下载,请加Q82735589
tcxu
tcxu
请出示有关软件网址,我对你的软件感兴趣,想查看(测试)一下你开发的免费流程图软件行吗?
0
tcxu
tcxu

流程图交互展示案例 2 :如何往流程图添加鼠标事件

  1. 将现有的"施工工序流程图",作为网页的背景。
  2. 分别在 1.测量放线、2.架设定位型钢、3.架立模板, 和 4.拆模养护 4 个节点之上创建 4 个透明的按钮。
  3. 依次将鼠标移至各个节点的左上角,以便从文本框中获得每个按钮的位置,分别移到各个节点的右下角,以便计算出给定按钮的宽和高。
  4. 根据移动鼠标得到的数据,分别在测量放线、架设定位型钢、架立模板, 和 拆模养护 4 个节点之上创建 4 个透明的按钮。
  5. 通过 html+js 建立鼠标事件(单击节点1、2、3,打开新窗口及新网页,单击 节点 4,打开新窗口及播放视频。
  6. 最后,删除 与最终保留的鼠标事件无关的 代码,如 form、show 元素,js中的一些方法(函数), 等等。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />)
<title>流程图的交互展示</title>
<script>
document.onmousemove = getMouseXY;
function getMouseXY(e) {
	tempX = event.clientX  
    tempY = event.clientY
	document.Show.X.value = tempX
  	document.Show.Y.value = tempY
}
address=["https://wenda.so.com/q/1398957256067799","http://image.fenlei265.com/1129403/20191128170608712.jpg", //网页、视频 地址
	"http://www.gaoyuemuban.com/Item/list.asp?id=1686","http://chinaplus.cri.cn/media/2017/d16df955-e6b9-0bc4-2637-602b6795ba72.mp4"];

function a(index){ //用户单击鼠标的反应
	if (index==3)
	openVideo(address[index]); //播放视频
	else //打开新窗口
	window.open(address[index], "Newwindow", "height=400, width=600, top=100,left=100, scrollbars=yes, resizable=no");
}

function openVideo(src) { //新页面播放视频
        var page = window.open();
            var s = "<body style='background: black'>" ;
                s += "<div style='width: 80%;margin: auto'>";
                s += "<video controls width='100%' autoplay src='" + src+ "'></video>";
                        "</div></body>";
        page.document.write(s);	
    }    
</script>
<style>
#img1{
	z-index:1;
	position:absolute;
	left:0px;
	top:0px;
}
#show{
	z-index:1;
	position:absolute;
	left:700px;
	top:0px;
}
#a1{
	position:absolute;
	left:358px;
	top:23px;
	width:185px;
	height:65px;
	border:#F00 thick solid;
	background-color:#F00;
	z-index:5;
	opacity:0.3;
}
#a2{
	position:absolute;
	left:358px;
	top:248px;
	width:185px;
	height:65px;
	border:#F00 thick solid;
	background-color:#F00;
	z-index:5;
	opacity:0.3;
}
#a3{
	position:absolute;
	left:358px;
	top:472px;
	width:185px;
	height:65px;
	border:#F00 thick solid;
	background-color:#F00;
	z-index:5;
	opacity:0.3;
}
#a4{
	position:absolute;
	left:335px;
	top:697px;
	width:233px;
	height:65px;
	border:#F00 thick solid;
	background-color:#F00;
	z-index:5;
	opacity:0.3;
}
</style>
</head>
<body>
<input type="button" id="a1" onClick="a(0)">
<input type="button" id="a2" onClick="a(1)">
<input type="button" id="a3" onClick="a(2)">
<input type="button" id="a4" onClick="a(3)">
<img id = "img1" src="http://www.civilcn.com/d/file/zhishi/sgjs/2017-08-02/34a3242cc0d7d96b9ebc4756ebc4218f.jpg" />
<form id="show" name="Show"><table><tr><td>当前鼠标坐标 </td></tr>
<tr><td>X:&nbsp;<input type="text" name="X" value="0" size="4"> </td></tr>
<tr><td>Y:&nbsp;<input type="text" name="Y" value="0" size="4"> </td></tr>
</table>
</form>
</body>
</html>

注:在 Google Chrome、UC Browser、IE、360急速浏览器、360安全浏览器 测试过。在 IE、360急速浏览器 按钮的红色半透明未显示。运行正常。

0
tcxu
tcxu

用 CSS+js (html + canvas) 创建具有交互功能的流程图(Activity Diagram)
这里的交互功能是,若单击以下节点: "起床"、"早餐"、"打包早餐"和 "锁门",就会分别打开一个新窗口来显示影像或视频。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Activity Diagram</title>
	<style>
		input{
			z-index:3;
			background-color:#FC3;
			border:solid #000;
			font-size:20px;
			font-weight:bold;
}			
		#wakeUp{
			position:absolute;
			top:28px;
			left:258px;
			width: 100px;
			height: 40px;
		
		}	
		
		#eating{
			position:absolute;
			top:300px;
			left:56px;
			width: 100px;
			height: 40px;
		}		
		#packaging{
			position:absolute;
			top:300px;
			left:456px;
			width: 100px;
			height: 40px;	
		}
		#closeDoor{
			position:absolute;
			top:420px;
			left:255px;
			width: 100px;
			height: 40px;	
		}		
		#circle{
			position:absolute;
			top:509px;
			left:272px;
			height: 70px;
			width: 70px;
			border-radius: 35px;
		}
		#circle1{
			position:absolute;
			top:516px;
			left:279px;
			height: 50px;
			width: 50px;
			border-radius: 30px;
			border:solid #00F;
			z-index:3;
		}
		p{
			font-size:26px;
			font-weight:bold;	
		}
		#p1{
			position:absolute;
			top:110px;
			left:140px;
		}
		#p2{
			position:absolute;
			top:110px;
			left:400px;
		}				
	</style>
</head>
<body>

	<input type="button" value='起床' id = "wakeUp" onClick="openImage(0)" >
    <input type="button" value='早餐' id = "eating" onClick="openVideo(0)">
	<input type="button" value="早餐打包" id = "packaging" onClick="openVideo(1)" >
	<input type="button" value="锁门" id = "closeDoor" onClick="openVideo(2)" >
	<input type="button" value="结束" id = "circle">
    <div id="circle1"></div>
    <p id='p1'>[饿]</p>
    <p id='p2'>[不饿]</p>
	<canvas id="myCanvas" width="600" height="600" >  
   	<p>Your browserdoes not support the canvas element!</p>  
	</canvas> 
</body>
<script>
addressImage=["http://5b0988e595225.cdn.sohucs.com/images/20180920/82b587d5d699499cb210286dcd1c6ddf.gif"];

addressVideo=["https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/7252ad8b379286859862253569/v.f30.mp4?source=1&h265=v.f1022_h265.mp4","https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/4dd5ed7b257867660208431105/v.f30.mp4?source=1&h265=v.f1022_h265.mp4",
"https://jvod.300hu.com/vod/product/4533e413-e46b-4c7c-8eb3-2b11d67edf2a/253b72685a1549c19a0b8b21b6e4aa94.mp4?source=2&h265=h265/18799/4911714522914221beb0840bcff7acda.mp4",
];

function openVideo(n) {
        var page = window.open();
            var s = "<body style='background: black'>" ;
                s += "<div style='width:500px;margin: auto'>";
                s += "<video controls width='100%' autoplay src='" + addressVideo[n] + "'></video>";
                        "</div></body>";
        page.document.write(s);	
    } 
	
	function openImage(index) {
        var page = window.open();
            var s = "<body style='background: black'>" ;
              //  s += "<div style='width: 80%;margin: auto'>";
                s += "<img width='500px' src='" + addressImage[index]+ "'>";
                     "</body>";
        page.document.write(s);	
    }       
	
function arrow( g, x, y, d, color, delta) {
	g.save();
	g.fillStyle=color;
	g.translate(x,y);
	g.rotate(delta*Math.PI/180);
	g.beginPath();
	g.moveTo( -5*d, -5*d);
	g.lineTo( 5*d, -5*d);
	g.lineTo( 0, 10*d);
	g.closePath();
	g.fill();
	g.restore();
}
g=document.getElementById('myCanvas').getContext('2d');
g.lineWidth=4;
g.beginPath();
g.moveTo(300,60);
g.lineTo(300,130);
g.stroke();

g.beginPath();
g.moveTo(300,370);
g.lineTo(300,490);
g.stroke();

g.beginPath();
g.rect(100,170,400,200);
g.stroke();
arrow(g,300,130,2,  'black',0);
arrow(g,100,279,2,'black',0);
arrow(g,500,279,2,'black',0);
arrow(g,300,399,2,'black',0);
arrow(g,300,485,2,'black',0);

g.fillStyle='#FC3'; //菱形
g.beginPath();
g.moveTo(236,169);
g.lineTo(300,145);
g.lineTo(370,169);
g.lineTo(300,197);
g.closePath();
g.fill();  //菱形
g.stroke();//菱形
</script>
</html>

 

0
tcxu
tcxu

标注时间限制框的软件开发流程图
    甘特图(Gantt chart,又叫横道图),是以图示的方式通过活动(activity)列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。这种表现形式, 在作业排序的基础上,将活动(流程)图(Activity diagram)与时间(time)联系起来。
    根据网上 Highcharts Gantt With Subtasks 的案例,进一步添加了楼主要求的互动功能(点击某个流程节点可以查看流程相关信息, 即单击节点,弹出新窗口,显示不同信息或视频)。用这里的 html 代码,可以直接在本地电脑的浏览器测试。

<html>
<head>
<meta charset="UTF-8" />
<title>Gantt 图</title>
<style>
#container {
	max-width: 800px;
	margin: 1em auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/gantt/highcharts-gantt.js"></script>
<script language="JavaScript">

function video(src) {
        var page = window.open();
            var s = "<body style='background: black'>" ;
                s += "<div style='width: 80%;margin: auto'>";
                s += "<video controls width='100%' autoplay src='" + src + "'></video>";
                        "</div></body>";
        page.document.write(s);	
    }    

var today = new Date(),
	day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);

Highcharts.ganttChart('container', {
	plotOptions: {
		series: {
			cursor: 'pointer',
			events: {
				click: function (event) {
					nodes = this.nodes;
					for(var p in nodes){
						if(nodes[p].selected){
							nodes[p].select();
							break;
						}
					}
					
					var str = event.point.url;
					if (str.substring(str.length-4)==='.mp4')
					video(str);
					else
					window.open(event.point.url, "Newwindow", 
								"height=600, width=1000, top=100,left=100, scrollbars=yes, resizable=no");
				}
			}
		}
	},
	title: {
		text: '带时间框的软件开发流程图'
	},
	xAxis: {
		min: today.getTime() - (2 * day),
		max: today.getTime() + (32 * day)
	},
	series: [{
		name: 'Project 1',
		data: [{
			name: '计划 Planning',
			id: 'planning',
			start: today.getTime(),
			end: today.getTime() + (20 * day),
			url:'https://baike.so.com/doc/5428335-5666559.html'
		}, {
			name: '需求 Requirements',
			id: 'requirements',
			parent: 'planning',
			start: today.getTime(),
			end: today.getTime() + (5 * day),
			url:'https://baike.so.com/doc/239944-253868.html'
		}, {
			name: '设计 Design',
			id: 'design',
			dependency: 'requirements',
			parent: 'planning',
			start: today.getTime() + (3 * day),
			end: today.getTime() + (20 * day),
			url:'https://baike.so.com/doc/5339570-5575012.html'
		}, {
			name: '布局 Layout',
			id: 'layout',
			parent: 'design',
			start: today.getTime() + (3 * day),
			end: today.getTime() + (10 * day),
			url:'https://baike.so.com/doc/5461241-5699630.html'
		}, {
			name: '制图 Graphics',
			parent: 'layout',
			dependency: 'design',
			start: today.getTime() + (10 * day),
			end: today.getTime() + (20 * day),
			url:'https://baike.so.com/doc/5381754-5618091.html'
		}, {
			name: '开发 Develop',
			id: 'develop',
			start: today.getTime() + (5 * day),
			end: today.getTime() + (30 * day),
			url:'http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2021/2/26/HaiWaiChuanBoBuLiuNing_9e216a96dc155a4217de6fdb27e6a84e_ms_c.mp4'
		}, {
			name: '创建单元测试 Create unit tests',
			id: 'unit_tests',
			dependency: 'requirements',
			parent: 'develop',
			start: today.getTime() + (5 * day),
			end: today.getTime() + (8 * day),
			url:'https://baike.so.com/doc/135811-143449.html'
		}, {
			name: '实施 Implement',
			id: 'implement',
			dependency: 'unit_tests',
			parent: 'develop',
			start: today.getTime() + (8 * day),
			end: today.getTime() + (30 * day),
			url:'http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2021/1/20/HaiWaiChuanBoBuYangMu_06b59313480183e0c83d177fa5e12291.mp4'
		}]
	}]
});
</script>
</body>
</html>

 

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部