599 lines
20 KiB
Plaintext
599 lines
20 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/comm2.css"/>
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/snaker_resource/css/style.css"/>
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/snaker_resource/css/snaker.css"/>
|
||
<link href="<%=request.getContextPath()%>/node_modules/snaker_resource/bootstrap.css" rel="stylesheet"/>
|
||
|
||
<script src="<%=request.getContextPath()%>/node_modules/snaker_resource/js/jquery-1.8.3.min.js" type="text/javascript"></script>
|
||
<script src="<%=request.getContextPath()%>/JS/echarts.js" type="text/javascript" ></script>
|
||
<script src="<%=request.getContextPath()%>/node_modules/snaker_resource/bootstrap/2.2.2/js/bootstrap.min.js" type="text/javascript"></script>
|
||
|
||
|
||
<style type="text/css">
|
||
#left {
|
||
width: 40%;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#right {
|
||
width: 60%;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#topdiv {
|
||
width: 100%;
|
||
height: 50%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#topdiv_top {
|
||
width: 100%;
|
||
height: 20%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#topdiv_under {
|
||
width: 100%;
|
||
height: 80%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#topdiv_left {
|
||
width: 50%;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
border:1px solid #F7F7F7;
|
||
}
|
||
#topdiv_right {
|
||
width: 50%;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
border:1px solid #F7F7F7;
|
||
}
|
||
.topdiv_right_content {
|
||
width: 100%;
|
||
height: 50%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
border:1px solid #F7F7F7;
|
||
}
|
||
#centerdiv {
|
||
width: 100%;
|
||
height: 30%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#underdiv {
|
||
width: 100%;
|
||
height: 20%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#underdiv_back {
|
||
width: 15%;
|
||
height: 30%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#underdiv_center {
|
||
width: 70%;
|
||
height: 30%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
#underdiv_next {
|
||
width: 15%;
|
||
height: 30%;
|
||
background: #FFFFFF;
|
||
float: left;
|
||
align: center;
|
||
}
|
||
.showechart{ margin:1 auto; width:98%; height:100%;}
|
||
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
|
||
var mychart1 = null;
|
||
var nodeArr = [];
|
||
var nodeLine = [];
|
||
|
||
function echartdata(content){
|
||
var jsonArray= ${jsonArray};//任务矩形json
|
||
var titleName ='${titlename}';//标题
|
||
nodeArr = [];
|
||
for(var i = 0, len = jsonArray.length; i < len; i++) {
|
||
if(content==jsonArray[i].contents){
|
||
nodeArr.push({
|
||
name: jsonArray[i].contents,
|
||
id: jsonArray[i].id,
|
||
x: jsonArray[i].contents_x,
|
||
y: jsonArray[i].contents_y,
|
||
value: jsonArray[i].contents,
|
||
symbol:'rect',
|
||
symbolSize: [90, 35],
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#836FFF'//节点背景色
|
||
}
|
||
},
|
||
label: {
|
||
color: '#EEEE00'//字体颜色
|
||
}
|
||
});
|
||
}else{
|
||
nodeArr.push({
|
||
name: jsonArray[i].contents,
|
||
id: jsonArray[i].id,
|
||
x: jsonArray[i].contents_x,
|
||
y: jsonArray[i].contents_y,
|
||
value: jsonArray[i].contents,
|
||
symbol:'rect',
|
||
symbolSize: [90, 35],
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#81c0ed'//节点背景色
|
||
}
|
||
},
|
||
label: {
|
||
color: '#333333'//字体颜色
|
||
}
|
||
});
|
||
}
|
||
}
|
||
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,
|
||
}
|
||
//流程框解析
|
||
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;
|
||
}
|
||
|
||
mychart1 = echarts.init(document.getElementById('forceChart'));
|
||
//echarts
|
||
var forceOption = {
|
||
title: {
|
||
text: '',
|
||
x:'center',
|
||
y:'0',
|
||
textStyle:{
|
||
fontWeight:'normal',
|
||
}
|
||
},
|
||
tooltip: {},
|
||
animationDurationUpdate: 1500,
|
||
animationEasingUpdate: 'quinticInOut',
|
||
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.clear();清楚缓存，重新加载新的 echart
|
||
mychart1.setOption(forceOption);
|
||
}
|
||
|
||
//点击流程图的方法
|
||
function nodeonclick(){
|
||
mychart1.on('click', function (param){
|
||
|
||
//获取节点点击的数组序号
|
||
var arrayIndex = param.dataIndex;
|
||
if (param.dataType == 'node') {
|
||
var id = nodeArr[arrayIndex-1].id;//根据下标获得数组中对应的id
|
||
if(id != undefined){
|
||
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步 ext.contextPath + "/base/downloadFile.do?key="+id+"&tbName="+tbName
|
||
|
||
url:"<%=request.getContextPath()%>/command/importantConfigure/getDrillDataAjaxForTable.do?id="+id,
|
||
type:'post',
|
||
data:{type:'json'},
|
||
success:function(res){
|
||
var arr= JSON.parse(res);
|
||
if(arr.length==0){
|
||
alert('演练结束');
|
||
//刷新流程图
|
||
echartdata('结束');
|
||
}else{
|
||
//console.log(arr.length);
|
||
if(arr.length==1){
|
||
$("#tabletest").empty();//先将下面的td置空
|
||
for(var i=0;i<arr.length;i++){
|
||
var tr;
|
||
tr='<td>'+arr[i].content+'</td>'+'<td>'+arr[i].contentsdetail+'</td>'+'<td>'+arr[i].personliablename+'</td>'
|
||
$("#tabletest").append('<tr>'+tr+'</tr>')
|
||
$("#rank").val(arr[0].rank);
|
||
$("#detailid").val(arr[0].id);
|
||
$("#startupcondition").val(arr[0].startupcondition);
|
||
$("#itemnumber").val(arr[0].itemnumber);
|
||
}
|
||
//刷新流程图
|
||
echartdata(arr[0].content);
|
||
}else{
|
||
console.log('进了弹窗方法');
|
||
selectNodes(res);
|
||
}
|
||
}
|
||
},
|
||
async:true//异步方式
|
||
});
|
||
}
|
||
}else {
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
function dobutton(){
|
||
/*
|
||
上一步按钮
|
||
*/
|
||
$("#back").click(function(){
|
||
var rankInt = $("#rank").val();
|
||
var id = $("#id").val();
|
||
var startupcondition = $("#startupcondition").val();
|
||
$.ajax({
|
||
//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步；rank为配置表中的层级
|
||
url:"<%=request.getContextPath()%>/command/importantConfigure/getDrillDataAjax.do?type=b&rank="+rankInt+"&id="+id+"&startupcondition="+startupcondition,
|
||
type:'post',
|
||
data:{type:'json'},
|
||
success:function(res){
|
||
var arr= JSON.parse(res);
|
||
$("#tabletest").empty();//先将下面的td置空
|
||
|
||
if(arr.length==0){
|
||
alert('演练结束');
|
||
//刷新流程图
|
||
echartdata('启动');
|
||
}else{
|
||
for(var i=0;i<arr.length;i++){
|
||
var tr;
|
||
tr='<td>'+arr[i].content+'</td>'+'<td>'+arr[i].contentsdetail+'</td>'+'<td>'+arr[i].personliablename+'</td>'
|
||
$("#tabletest").append('<tr>'+tr+'</tr>')
|
||
$("#rank").val(arr[0].rank);
|
||
$("#detailid").val(arr[0].id);
|
||
$("#startupcondition").val(arr[0].startupcondition);
|
||
$("#itemnumber").val(arr[0].itemnumber);
|
||
}
|
||
//刷新流程图
|
||
echartdata(arr[0].content);
|
||
}
|
||
},
|
||
async:true
|
||
});
|
||
});
|
||
|
||
/*
|
||
下一步按钮
|
||
*/
|
||
$("#next").click(function(){
|
||
var rankInt = $("#rank").val();
|
||
var itemnumber = $("#itemnumber").val();
|
||
var id = $("#id").val();
|
||
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步
|
||
url:"<%=request.getContextPath()%>/command/importantConfigure/getDrillDataAjax.do?type=n&rank="+rankInt+"&id="+id+"&itemnumber="+itemnumber,
|
||
type:'post',
|
||
data:{type:'json'},
|
||
success:function(res){
|
||
var arr= JSON.parse(res);
|
||
if(arr.length==0){
|
||
alert('演练结束');
|
||
//刷新流程图
|
||
echartdata('结束');
|
||
}else{
|
||
//console.log(arr.length);
|
||
if(arr.length==1){
|
||
$("#tabletest").empty();//先将下面的td置空
|
||
for(var i=0;i<arr.length;i++){
|
||
var tr;
|
||
tr='<td>'+arr[i].content+'</td>'+'<td>'+arr[i].contentsdetail+'</td>'+'<td>'+arr[i].personliablename+'</td>'
|
||
$("#tabletest").append('<tr>'+tr+'</tr>')
|
||
$("#rank").val(arr[0].rank);
|
||
$("#detailid").val(arr[0].id);
|
||
$("#startupcondition").val(arr[0].startupcondition);
|
||
$("#itemnumber").val(arr[0].itemnumber);
|
||
}
|
||
//刷新流程图
|
||
echartdata(arr[0].content);
|
||
}else{
|
||
console.log('进了弹窗方法');
|
||
selectNodes(res);
|
||
//$('#next').popover('destroy');
|
||
}
|
||
}
|
||
},
|
||
async:true
|
||
});
|
||
});
|
||
}
|
||
|
||
//点击节点跳转到该节点
|
||
function getbranch(detailid){
|
||
var rankInt = $("#rank").val();
|
||
var itemnumber = $("#itemnumber").val();
|
||
var id = $("#id").val();//三级菜单的id
|
||
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步
|
||
url:"<%=request.getContextPath()%>/command/importantConfigure/getDrillDataAjaxnext.do?type=n&rank="+rankInt+"&detailid="+detailid+"&itemnumber="+itemnumber,
|
||
type:'post',
|
||
data:{type:'json'},
|
||
success:function(res){
|
||
var arr= JSON.parse(res);
|
||
if(arr.length==0){
|
||
alert('演练结束');
|
||
//刷新流程图
|
||
echartdata('结束');
|
||
}else{
|
||
if(arr.length==1){
|
||
$("#tabletest").empty();//先将下面的td置空
|
||
for(var i=0;i<arr.length;i++){
|
||
var tr;
|
||
tr='<td>'+arr[i].content+'</td>'+'<td>'+arr[i].contentsdetail+'</td>'+'<td>'+arr[i].personliablename+'</td>'
|
||
$("#tabletest").append('<tr>'+tr+'</tr>')
|
||
$("#rank").val(arr[0].rank);
|
||
$("#detailid").val(arr[0].id);
|
||
$("#startupcondition").val(arr[0].startupcondition);
|
||
$("#itemnumber").val(arr[0].itemnumber);
|
||
}
|
||
//刷新流程图
|
||
echartdata(arr[0].content);
|
||
$('#next').popover('hide');
|
||
}else{
|
||
|
||
}
|
||
}
|
||
},
|
||
async:true
|
||
});
|
||
}
|
||
|
||
function selectNodes(res){
|
||
var arr= JSON.parse(res);
|
||
|
||
var ulstring = "<table class=\"table table-bordered\">";
|
||
for(var i=0;i<arr.length;i++){
|
||
var detailid = arr[i].id;
|
||
ulstring +="<tr><td bgcolor=\"#81C0ED\" style=\"cursor:pointer;\" onclick=\"getbranch(\'"+detailid+"\')\">"+arr[i].content+"</td></tr>";
|
||
}
|
||
ulstring +="</table>";
|
||
|
||
$('#next').popover('destroy');//先注销弹窗
|
||
$("#next").popover({
|
||
trigger:'manual',//manual 触发方式
|
||
placement : 'left',
|
||
title:'<div style="text-align:left; color:gray; font-size:12px;">请选择下一步演练的节点</div>',
|
||
html: 'true',
|
||
content : ulstring, //这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；
|
||
animation: false
|
||
}).on("mouseleave", function () {
|
||
var _this = this;
|
||
setTimeout(function () {
|
||
if (!$(".popover:hover").length) {
|
||
$(_this).popover("hide")
|
||
}
|
||
}, 100);
|
||
});
|
||
$("#next").popover('show'); //显示弹窗 不然冲突 弹窗需要点击2下
|
||
};
|
||
|
||
$(function() {
|
||
//获取echart数据
|
||
echartdata();
|
||
//
|
||
nodeonclick();
|
||
//按钮点击
|
||
dobutton();
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<input type="hidden" id="rank" name="rank" value="">
|
||
<input type="hidden" id="id" name="id" value="${param.id}">
|
||
<input type="hidden" id="detailid" name="detailid" value="">
|
||
<input type="hidden" id="startupcondition" name="startupcondition" value="">
|
||
<input type="hidden" id="itemnumber" name="itemnumber" value="">
|
||
<div>
|
||
<!--左边流程图的div-->
|
||
<div id="left">
|
||
<div id="forceChart" class="showechart"></div>
|
||
</div>
|
||
|
||
<!--右边列表的div-->
|
||
<div id="right">
|
||
<!--上方的div 标题-->
|
||
<div id="topdiv" style="text-align:center">
|
||
<div id="topdiv_top">
|
||
<table class="table table-striped table-hover table-condensed" >
|
||
<tr>
|
||
<th width="100%" bgcolor="#E0FFFF">${titlename}-异常事件演练</th>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="topdiv_under">
|
||
<div id="topdiv_left">
|
||
暂无图片
|
||
</div>
|
||
<div id="topdiv_right" style="text-align:left">
|
||
<div class="topdiv_right_content"><strong>操作说明 : </strong>${meno}</div>
|
||
<div class="topdiv_right_content"><strong>总负责人 : </strong>${_firstPerson}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--中间列表div-->
|
||
<div id="centerdiv">
|
||
<table class="table table-striped table-hover table-condensed" >
|
||
<tr>
|
||
<th width="30%" bgcolor="#E0FFFF">操作内容</th>
|
||
<th width="30%" bgcolor="#E0FFFF">操作详情</th>
|
||
<th width="30%" bgcolor="#E0FFFF">负责人</th>
|
||
</tr>
|
||
<tbody id="tabletest">
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!--下方的div 上一步 下一步-->
|
||
<div id="underdiv">
|
||
<div id="underdiv_back">
|
||
<button id="back" type="button" class="btn btn-primary" data-toggle="button">
|
||
上一步
|
||
</button>
|
||
</div>
|
||
<div id="underdiv_center">
|
||
|
||
</div>
|
||
<div id="underdiv_next">
|
||
<button id="next" type="button" class="btn btn-primary" data-toggle="popover" >
|
||
下一步
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html:html>
|
||
<c:if test="${not empty msg}">
|
||
<script type="text/javascript">
|
||
alert("${msg}");
|
||
</script>
|
||
</c:if>
|