477 lines
13 KiB
Plaintext
477 lines
13 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
|
|
|
|
|
<html:html lang="true">
|
|
<head>
|
|
|
|
|
|
<title></title>
|
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
<meta http-equiv="expires" content="0">
|
|
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/CSS/xtree.css"/>
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/CSS/comm2.css"/>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/xtree.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/com/comm.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/calendardt.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/jquery-1.4.2.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts.js" charset="utf-8"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(function(){
|
|
|
|
var jsonArray2=${jsonArray2};//二级预案
|
|
var jsonArray3=${jsonArray3};//三级预案
|
|
var titleName ='${titleName}';//标题
|
|
|
|
var nodeArr = [];
|
|
nodeArr.push({
|
|
name: '启动',
|
|
x: ${x},
|
|
y: 100,
|
|
value: [],
|
|
symbol:'circle', //让节点为矩形显示
|
|
symbolSize: [60, 60],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#90EE90',
|
|
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
},
|
|
});
|
|
nodeArr.push({
|
|
name: 'Ⅱ级还是Ⅲ级',
|
|
x: ${x},
|
|
y: ${center_y},
|
|
value: [],
|
|
symbol:'diamond', //让节点为矩形显示
|
|
symbolSize: [70, 60],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#9F79EE',
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
},
|
|
});
|
|
nodeArr.push({
|
|
name: 'Ⅱ级',
|
|
x: ${x},
|
|
y: 0,
|
|
value: [],
|
|
symbol:'roundRect', //让节点为矩形显示
|
|
symbolSize: [0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFA07A',
|
|
}
|
|
},
|
|
});
|
|
nodeArr.push({
|
|
name: 'Ⅲ级',
|
|
x: ${x},
|
|
y: 0,
|
|
value: [],
|
|
symbol:'roundRect', //让节点为矩形显示
|
|
symbolSize: [0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFA07A',
|
|
}
|
|
}
|
|
});
|
|
var nodeLine = [];
|
|
|
|
//三级
|
|
for(var i = 0, len = jsonArray3.length; i < len; i++) {
|
|
var jsonArray3L = jsonArray3.length;
|
|
var end_y = ${end_y};
|
|
var y3 = (end_y-100)/(jsonArray3L+1);
|
|
|
|
nodeArr.push({
|
|
name: jsonArray3[i].name,
|
|
id: jsonArray3[i].id,
|
|
x: ${x3},
|
|
y: 100+(i+1)*y3,
|
|
value: jsonArray3[i].ename,
|
|
symbol:'rect', //让节点为矩形显示
|
|
symbolSize: [115, 50],
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#399'
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
}
|
|
});
|
|
|
|
/*nodeLine.push({
|
|
source: 2,
|
|
target: i+5+jsonArray2.length,
|
|
});*/
|
|
}
|
|
|
|
//二级
|
|
for(var i = 0, len = jsonArray2.length; i < len; i++) {
|
|
var jsonArray2L = jsonArray2.length;
|
|
var end_y = ${end_y};
|
|
var y2 = (end_y-100)/(jsonArray2L+1);
|
|
|
|
//添加节点
|
|
nodeArr.push({
|
|
name: jsonArray2[i].name,
|
|
id: jsonArray2[i].id,
|
|
x: ${x2},
|
|
y: 100+(i+1)*y2,
|
|
value: jsonArray2[i].ename,
|
|
symbol:'rect', //让节点为矩形显示
|
|
url: "http://www.baidu.com",
|
|
symbolSize: [115, 50],
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#399'
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
}
|
|
});
|
|
|
|
//线路显示
|
|
/*nodeLine.push({
|
|
source: 2,
|
|
target: i+5,
|
|
});*/
|
|
}
|
|
|
|
var jsonArrayL = jsonArray2.length+jsonArray3.length;
|
|
|
|
nodeLine.push({//Ⅱ级最后一个框到编写备案左边
|
|
source: jsonArrayL+4,
|
|
target: jsonArrayL+5,
|
|
});
|
|
nodeLine.push({//编写备案左边到编写备案
|
|
source: jsonArrayL+5,
|
|
target: jsonArrayL+6,
|
|
});
|
|
|
|
nodeLine.push({//启动到 Ⅱ级还是Ⅲ级
|
|
source: 1,
|
|
target: 2,
|
|
});
|
|
|
|
nodeLine.push({// Ⅱ级还是Ⅲ级左边小箭头
|
|
source: 2,
|
|
target: jsonArrayL+8,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: 'Ⅲ级',
|
|
fontSize: 20
|
|
}
|
|
},
|
|
});
|
|
|
|
nodeLine.push({// Ⅱ级还是Ⅲ级右边小箭头
|
|
source: 2,
|
|
target: jsonArrayL+9,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: 'Ⅱ级'
|
|
}
|
|
},
|
|
});
|
|
|
|
nodeLine.push({//Ⅲ级最后一个到结束右边隐藏点
|
|
source: jsonArray3.length+4,
|
|
target: jsonArrayL+7,
|
|
});
|
|
|
|
nodeLine.push({//结束右边隐藏点到结束
|
|
source: jsonArrayL+7,
|
|
target: jsonArrayL+10,
|
|
});
|
|
|
|
nodeLine.push({//编写备案到结束
|
|
source: jsonArrayL+6,
|
|
target: jsonArrayL+10,
|
|
});
|
|
|
|
/*nodeLine.push({
|
|
source: 2,
|
|
target: jsonArrayL+6,
|
|
});*/
|
|
|
|
/*for(var i = 3, len = jsonArrayL+3; i < len; i=i+1) {
|
|
nodeLine.push({
|
|
source: 2,
|
|
target: i,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: '111'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: { curveness: 0.2 }
|
|
}
|
|
});
|
|
}*/
|
|
|
|
nodeArr.push({// 编写异常备案并上报主管部门 左边的隐藏框
|
|
name: '',
|
|
id: 222,
|
|
x: ${x2},
|
|
y: ${end_y},
|
|
value: [],
|
|
symbol:'rect', //让节点为矩形显示
|
|
url: "http://www.baidu.com",
|
|
symbolSize: [0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#399'
|
|
}
|
|
}
|
|
});
|
|
nodeArr.push({
|
|
name: '编写异常备案并上报主管部门',
|
|
x: ${x},
|
|
y: ${end_y},
|
|
value: [],
|
|
symbol:'rect', //让节点为矩形显示
|
|
symbolSize: [150, 50],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFA07A',
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
},
|
|
});
|
|
nodeArr.push({// 结束 右边的隐藏框
|
|
name: ' ',
|
|
id: 333,
|
|
x: ${x3},
|
|
y: ${end_y}+200,
|
|
value: [],
|
|
symbol:'rect', //让节点为矩形显示
|
|
url: "http://www.baidu.com",
|
|
symbolSize: [0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color:'#399'
|
|
}
|
|
}
|
|
});
|
|
nodeArr.push({//二级
|
|
name: '1',
|
|
id: 1111,
|
|
x: 800,
|
|
y: ${center_y},
|
|
value: [],
|
|
symbol:'diamond', //让节点为矩形显示
|
|
symbolSize: [0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#9F79EE',
|
|
}
|
|
}
|
|
});
|
|
nodeArr.push({//三级
|
|
name: '2',
|
|
id: 2222,
|
|
x: 200,
|
|
y: ${center_y},
|
|
value: [],
|
|
symbol:'diamond', //让节点为矩形显示
|
|
symbolSize: [0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#9F79EE',
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
var res = {
|
|
"start": {
|
|
name: '准备',
|
|
x: ${x},
|
|
y: -100,
|
|
value: [],
|
|
symbol:'circle', //让节点为矩形显示
|
|
symbolSize: [100, 50],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#B0E2FF',
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
}
|
|
},
|
|
"nodes": nodeArr,
|
|
"end": {
|
|
name: '结束',
|
|
x: ${x},
|
|
y: ${end_y}+200,
|
|
value: [],
|
|
symbol:'circle', //让节点为矩形显示
|
|
symbolSize: [60, 60],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#CD3333',
|
|
}
|
|
},
|
|
label: {
|
|
color: '#333333'
|
|
}
|
|
}
|
|
}
|
|
|
|
var resLine = {
|
|
"start": {
|
|
source: 0,
|
|
target: 1,
|
|
},
|
|
"nodes": nodeLine,
|
|
}
|
|
//流程框解析
|
|
function processGenerator(res) {
|
|
var processArr = [];
|
|
processArr[0] = res.start;
|
|
for(var i = 0, len = res.nodes.length; i < len; i++) {
|
|
processArr.push(res.nodes[i]);
|
|
}
|
|
processArr[res.nodes.length + 1] = res.end;
|
|
return processArr;
|
|
}
|
|
//线条解析
|
|
function processLinks(resLine) {
|
|
var processArr = [];
|
|
processArr[0] = resLine.start;
|
|
for(var i = 0, len = resLine.nodes.length; i < len; i++) {
|
|
processArr.push(resLine.nodes[i]);
|
|
}
|
|
//processArr[resLine.nodes.length + 1] = resLine.end;
|
|
return processArr;
|
|
}
|
|
|
|
var mychart1 = echarts.init(document.getElementById('forceChart'));
|
|
//echarts
|
|
var forceOption = {
|
|
title: {
|
|
text: titleName+' 总流程',
|
|
x:'center',
|
|
y:'0',
|
|
textStyle:{
|
|
fontWeight:'normal',
|
|
}
|
|
},
|
|
tooltip: {},
|
|
animationDurationUpdate: 1500,
|
|
animationEasingUpdate: 'quinticInOut',
|
|
/*textStyle: {
|
|
color:'#000'
|
|
},*/
|
|
series : [
|
|
{
|
|
type: 'graph',
|
|
tooltip: {
|
|
backgroundColor:'skyblue',
|
|
formatter:'{b}<br/>{c}'
|
|
},
|
|
layout: 'none',
|
|
symbolSize: 50,
|
|
roam: false,//禁止用鼠标滚轮缩小放大效果
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
edgeSymbol: ['none', 'none'],
|
|
edgeSymbolSize: [4, 10],
|
|
edgeLabel: {
|
|
normal: {
|
|
textStyle: {
|
|
fontSize: 20
|
|
}
|
|
}
|
|
},
|
|
data: processGenerator(res),
|
|
links: processLinks(resLine),
|
|
|
|
lineStyle: {
|
|
normal: {
|
|
opacity: 0.9,
|
|
//symbolSize: [0, 0],//箭头大小
|
|
width: 1,
|
|
curveness: 0
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
mychart1.setOption(forceOption);
|
|
|
|
mychart1.on('click', function (param){
|
|
//console.log('param---->', param); // 打印出param, 可以看到里边有很多参数可以使用
|
|
//获取节点点击的数组序号
|
|
var arrayIndex = param.dataIndex;
|
|
var ip = $('#ip').val();
|
|
var port = $('#port').val();
|
|
//console.log('arrayIndex---->', arrayIndex);
|
|
//console.log('name---->', param.name);
|
|
if (param.dataType == 'node') {
|
|
var id = nodeArr[arrayIndex-1].id;//根据下标获得数组中对应的id
|
|
if(id != undefined){
|
|
window.open('http://'+ip+':'+port+'/BKYWQ/command/importantConfigure/doprocess.do?id='+id+'&category=3',window,'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-60)+ ',top=0,left=0,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no',true);
|
|
}
|
|
}else {
|
|
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.showechart{ margin:1 auto; width:98%; height:95%;}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<input id="ip" name="ip" type="hidden" value="${ip}"/>
|
|
<input id="port" name="port" type="hidden" value="${port}"/>
|
|
|
|
<div id="forceChart" class="showechart" ></div>
|
|
|
|
|
|
</body>
|
|
</html:html>
|
|
<c:if test="${not empty msg}">
|
|
<script type="text/javascript">
|
|
alert("${msg}");
|
|
</script>
|
|
</c:if>
|