249 lines
6.5 KiB
Plaintext
249 lines
6.5 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 contentDetail(res) {
|
||
|
|
var processArr = [];
|
||
|
|
var str = 111111111111111<br/>111111111111111111111111111111111111;
|
||
|
|
return processArr;
|
||
|
|
}*/
|
||
|
|
|
||
|
|
|
||
|
|
$(function(){
|
||
|
|
|
||
|
|
var jsonArray=${jsonArray};//任务矩形json
|
||
|
|
var titleName ='${titleName}';//标题
|
||
|
|
var nodeArr = [];
|
||
|
|
for(var i = 0, len = jsonArray.length; i < len; i++) {
|
||
|
|
|
||
|
|
nodeArr.push({
|
||
|
|
name: jsonArray[i].contents,
|
||
|
|
//id: 'b'+i,
|
||
|
|
x: jsonArray[i].contents_x,
|
||
|
|
y: jsonArray[i].contents_y,
|
||
|
|
value: jsonArray[i].contents,
|
||
|
|
//symbol:'roundRect', //让节点为矩形显示
|
||
|
|
symbol:'rect',
|
||
|
|
symbolSize: [120, 50],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color:'#81c0ed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
color: '#333333'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// nodeArr.push({
|
||
|
|
// name: '是否完成',
|
||
|
|
// id: 'd'+i,
|
||
|
|
// x: 500,
|
||
|
|
// y: jsonArray[i].status_y,
|
||
|
|
// value: [],
|
||
|
|
// //symbol:'diamond', //节点形状
|
||
|
|
// symbol:'diamond', //节点形状
|
||
|
|
// symbolSize: [70, 50],
|
||
|
|
// itemStyle: {
|
||
|
|
// normal: {
|
||
|
|
// color:'#ffb980'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// label: {
|
||
|
|
// color: '#333333'
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
}
|
||
|
|
var nodeLine = [];
|
||
|
|
|
||
|
|
for(var i = 0, len = jsonArray.length; i < len; i=i+1) {
|
||
|
|
nodeLine.push({
|
||
|
|
source: jsonArray[i].startLine+'',
|
||
|
|
target: jsonArray[i].endLine+''
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
nodeLine.push({
|
||
|
|
source: jsonArray.length,
|
||
|
|
target: jsonArray.length+1
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var res = {
|
||
|
|
"start": {
|
||
|
|
name: '启动',
|
||
|
|
x: 500,
|
||
|
|
y: 100,
|
||
|
|
value: [],
|
||
|
|
symbol:'circle', //让节点为矩形显示
|
||
|
|
symbolSize: [50, 50],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#22c3aa',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
color: '#333333'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"nodes": nodeArr,
|
||
|
|
"end": {
|
||
|
|
name: '结束',
|
||
|
|
x: 500,
|
||
|
|
y: ${end_y},
|
||
|
|
value: [],
|
||
|
|
symbol:'circle', //让节点为矩形显示
|
||
|
|
symbolSize: [50, 50],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#CD3333',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
color: '#333333'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var resLine = {
|
||
|
|
"start": {
|
||
|
|
source: 0,
|
||
|
|
target: 1
|
||
|
|
},
|
||
|
|
"nodes": nodeLine,
|
||
|
|
/*"end": {
|
||
|
|
source: jsonArray.length*4-1,
|
||
|
|
target: jsonArray.length*4+1
|
||
|
|
}, */
|
||
|
|
}
|
||
|
|
//流程框解析
|
||
|
|
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);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.showechart{ margin:1 auto; width:98%; height:200%;}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- <input type="hidden" name="personLiable" id="personLiable" value="${personLiable}">
|
||
|
|
<input type="hidden" name="contentLiable" id="contentLiable" value="${contentLiable}"> -->
|
||
|
|
|
||
|
|
<div id="forceChart" class="showechart"></div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html:html>
|
||
|
|
<c:if test="${not empty msg}">
|
||
|
|
<script type="text/javascript">
|
||
|
|
alert("${msg}");
|
||
|
|
</script>
|
||
|
|
</c:if>
|