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