first commit
This commit is contained in:
476
WebRoot/jsp/command/processEmergencyConfigure2.jsp
Normal file
476
WebRoot/jsp/command/processEmergencyConfigure2.jsp
Normal file
@ -0,0 +1,476 @@
|
||||
<%@ 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/emergencyConfigure/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>
|
||||
Reference in New Issue
Block a user