Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/command/processEmergencyConfigureDrill4NS.jsp
2026-01-16 14:13:44 +08:00

1442 lines
61 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ 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>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<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"/>
<link rel="stylesheet" href="<%=request.getContextPath()%>/CSS/demo.css"/>
<link rel="stylesheet" href="<%=request.getContextPath()%>/CSS/ptz.css"/>
<script src="<%=request.getContextPath()%>/JS/echarts.js" type="text/javascript"></script>
<!--编辑器-->
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/ckeditor5-build-balloon/ckeditor.js"
charset="utf-8"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/ckeditor5-build-balloon/translations/zh-cn.js"
charset="utf-8"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/wangeditor/wangEditor.min.js"></script>
<style type="text/css">
.showechart {
margin: 1 auto;
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
background: #FFFFFF;
float: left;
align: center;
}
#right {
width: 80%;
height: 100%;
background: #FFFFFF;
float: left;
align: center;
}
#right_top {
width: 100%;
height: 100%;
float: left;
align: center;
}
#right_under {
width: 100%;
height: 30%;
float: left;
background: #F1F4F5;
align: center;
}
#right_top_left {
width: 100%;
height: 100%;
float: left;
align: center;
}
#right_top_right {
width: 0%;
height: 100%;
float: left;
background: #F1F4F5;
align: center;
}
/*聊天窗口*/
#right_top_right_top {
width: 100%;
height: 48%;
float: left;
background: #F1F4F5;
align: center;
}
/*聊天和视频的隔离带*/
#right_top_right_center {
width: 100%;
height: 4%;
float: left;
background: #F1F4F5;
align: center;
}
/*视频窗口*/
#right_top_right_under {
width: 100%;
height: 45%;
float: left;
background: #FFFFFF;
align: center;
}
/*操作内容 操作详情 负责人+4个按钮 div */
#right_top_left_top {
width: 100%;
height: 0%;
float: left;
align: center;
}
/*视频的div*/
#right_top_left_under {
width: 100%;
height: 100%;
float: left;
background: #F1F4F5;
align: center;
}
#right_top_left_top_handle {
width: 70%;
height: 100%;
float: left;
background: #F1F4F5;
position: relative;
align: center;
}
#right_top_left_top_button {
width: 100%;
height: 100%;
float: left;
background: #F1F4F5;
align: center;
}
.tableText{
width:20%;border: 2px solid #d5d5d5;
}
/*
根据不同分辨率显示不同px的文字大小
*/
@media (min-width: 400px) and (min-height: 300px) {
/*上面一排按钮div的样式*/
.buttonDiv {
width: 16%;
height: 100%;
float: left;
border: 2px solid #0EA5FF;
line-height: 16px;
cursor: pointer;
margin: 5px 0px 0px 0px;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 12px;
margin: 0px 0px 0px 0px;
/*color: pink;*/
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 7%;
border-bottom: 1px solid #E5E5E5;
font-size: 16px;
font-weight: bold;
}
#videoTitle {
font-size: 12px;
font-weight: bold;
}
}
@media (min-width: 768px) and (min-height: 432px) {
/*上面一排按钮div的样式*/
.buttonDiv {
width: 16%;
height: 100%;
float: left;
border: 2px solid #0EA5FF;
line-height: 16px;
cursor: pointer;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 14px;
margin: 1% 0px 0px 0px;
/*color: red;*/
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 7%;
border-bottom: 1px solid #E5E5E5;
font-size: 16px;
font-weight: bold;
padding: 7px 0px 0px 0px;
}
#videoTitle {
font-size: 14px;
font-weight: bold;
}
}
@media (min-width: 992px) and (min-height: 558px) {
/*上面一排按钮div的样式*/
.buttonDiv {
width: 16%;
height: 100%;
float: left;
border: 2px solid #0EA5FF;
line-height: 16px;
cursor: pointer;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 14px;
margin: 2% 0px 0px 0px;
/*color: blue;*/
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 7%;
border-bottom: 1px solid #E5E5E5;
font-size: 18px;
font-weight: bold;
padding: 6px 0px 0px 0px;
}
#videoTitle {
font-size: 14px;
font-weight: bold;
}
}
@media (min-width: 1200px) and (min-height: 675px) {
/*上面一排按钮div的样式*/
.buttonDiv {
width: 16%;
height: 100%;
float: left;
border: 2px solid #0EA5FF;
line-height: 16px;
cursor: pointer;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 18px;
margin: 4% 0px 0px 0px;
/*color: yellow;*/
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 7%;
border-bottom: 1px solid #E5E5E5;
font-size: 20px;
font-weight: bold;
padding: 9px 0px 0px 0px;
}
#videoTitle {
font-size: 16px;
font-weight: bold;
}
}
@media (min-width: 1400px) and (min-height: 875px) {
/*上面一排按钮div的样式*/
.buttonDiv {
width: 16%;
height: 100%;
float: left;
border: 2px solid #0EA5FF;
line-height: 16px;
cursor: pointer;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 22px;
margin: 4% 0px 0px 0px;
/*color: green;*/
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 7%;
border-bottom: 1px solid #E5E5E5;
font-size: 22px;
font-weight: bold;
padding: 14px 0px 0px 0px;
}
#videoTitle {
font-size: 18px;
font-weight: bold;
}
}
@media (min-width: 3500px) {
/*上面一排按钮div的样式*/
.buttonDiv {
width: 16%;
height: 100%;
float: left;
border: 2px solid #0EA5FF;
line-height: 16px;
cursor: pointer;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 42px;
margin: 7% 0px 0px 0px;
/*color: red;*/
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 7%;
border-bottom: 1px solid #E5E5E5;
font-size: 22px;
font-weight: bold;
padding: 14px 0px 0px 0px;
}
#videoTitle {
font-size: 18px;
font-weight: bold;
}
#content{
font-size: 40px;
}
/*table文字样式*/
.tableText{
width:20%;border: 4px solid #d5d5d5;font-size: 36px;
}
}
/*富文本工具栏*/
.toolbar {
border: 1px solid red;
height: 1px;
display: none;
}
/*富文本文本框*/
.text {
/*border: 1px solid #ccc;*/
/*height: 300px;*/
}
</style>
<script type="text/javascript">
var mychart1 = null;
var nodeArr = [];
var nodeLine = [];
var jsonArray = '';//任务矩形json
function echartdata() {//content以前是根据content改变状态 现在为status
var id = $('#id').val();
var detailId = $('#detailId').val();
$.ajax({
url: "<%=request.getContextPath()%>/command/emergencyConfigure/getEchart4NS.do?id=" + id + "&detailId=" + detailId,
type: 'post',
data: {type: 'json'},
success: function (res) {
var arr = JSON.parse(res);
jsonArray = arr.jsonArray;
var titleName = '${titleName}';//标题
nodeArr = [];
for (var i = 0, len = jsonArray.length; i < len; i++) {
var namelen = jsonArray[i].contents;
if (namelen.length > 10) {
namelen = namelen.substr(0, 9) + '...';
} else {
namelen = namelen;
}
if (arr.ids1 != '' && arr.ids1.indexOf(jsonArray[i].id) != -1) {//当前节点 黄色
nodeArr.push({
name: namelen,
id: jsonArray[i].id,
x: jsonArray[i].contents_x,
y: jsonArray[i].contents_y,
value: jsonArray[i].contents,
symbol: 'rect',
symbolSize: [260, 70],
itemStyle: {
normal: {
color: '#FFCD3E'//节点背景色
}
},
label: {
color: '#FF0000',//字体颜色
fontSize: '28'
}
});
} else if (arr.ids2 != '' && arr.ids2.indexOf(jsonArray[i].id) != -1) {//已走过的节点 蓝色
nodeArr.push({
name: namelen,
id: jsonArray[i].id,
x: jsonArray[i].contents_x,
y: jsonArray[i].contents_y,
value: jsonArray[i].contents,
symbol: 'rect',
symbolSize: [260, 70],
itemStyle: {
normal: {
color: '#96C9ED'//节点背景色
}
},
label: {
color: '#000000',//字体颜色
fontSize: '28'
}
});
} else if (arr.ids3 != '' && arr.ids3.indexOf(jsonArray[i].id) != -1) {//已取消的节点
nodeArr.push({
name: namelen,
id: jsonArray[i].id,
x: jsonArray[i].contents_x,
y: jsonArray[i].contents_y,
value: jsonArray[i].contents,
symbol: 'rect',
symbolSize: [260, 70],
itemStyle: {
normal: {
color: '#A1A1A1'//节点背景色
}
},
label: {
color: '#000000',//字体颜色
fontSize: '28'
}
});
} else {//未走过的节点灰色
nodeArr.push({
name: namelen,
id: jsonArray[i].id,
x: jsonArray[i].contents_x,
y: jsonArray[i].contents_y,
value: jsonArray[i].contents,
symbol: 'rect',
symbolSize: [260, 70],
itemStyle: {
normal: {
color: '#E8E8E8'//节点背景色
}
},
label: {
color: '#000000',//字体颜色
fontSize: '28'
}
});
}
}
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: 0,
y: 0,
value: [],
symbol: 'circle', //让节点为矩形显示
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#22c3aa',
}
},
label: {
color: '#333333'
}
},
"nodes": nodeArr,
"end": {
name: '结束',
x: 0,
y: arr.end_y,
value: [],
symbol: 'circle', //让节点为矩形显示
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#E8E8E8',
}
},
label: {
color: '#000000'
}
}
}
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 widths = $(window).width() * 0.20;//body的百分之40
var heights = $(window).height() * 0.85;
$('#forceChart').width($('#forceChart').width(widths));
$('#forceChart').height($('#forceChart').height(heights));
// 基于准备好的dom初始化echarts实例
mychart1 = echarts.init(document.getElementById('forceChart'), 'light');
//mychart1 = echarts.init(document.getElementById('forceChart'));
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}'
formatter: '{c}'
},
layout: 'none',
symbolSize: 50,
roam: true,//禁止用鼠标滚轮缩小放大效果
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.resize();
mychart1.setOption(forceOption);
},
async: false//异步方式
});
}
//点击流程图的方法
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/emergencyConfigure/getDrillDataAjaxForTable.do?id=" + id,
type: 'post',
data: {type: 'json'},
success: function (res) {
var arr = JSON.parse(res);
if (arr.length == 0) {
alert('演练结束');
//刷新流程图
echartdata('结束');
} else {
if (arr.length == 1) {
for (var i = 0; i < arr.length; i++) {
//改变操作内容
$("#content").text(arr[i].content);
//改变操作详情
//$("#contentdetail").text(arr[i].contentDetail);
//负责人
//$("#personliable").text(arr[i].personLiablename + '(节点负责人)');
// $("#div1").css("display", "");//子节点介绍
// $("#div2").css("display", "none");//总体介绍之类的
//改变 操作内容div 颜色
if (arr[i].status == 0) {//未启动
$("#titleDiv1").css("background-Color", "#E8E8E8");
$("#titleDiv2").css("background-Color", "#E8E8E8");
}
if (arr[i].status == 1) {//启动中
$("#titleDiv1").css("background-Color", "#FFCD3E");
$("#titleDiv2").css("background-Color", "#FFCD3E");
}
if (arr[i].status == 2) {//已结束
$("#titleDiv1").css("background-Color", "#96C9ED");
$("#titleDiv2").css("background-Color", "#96C9ED");
}
}
$("#nodest").val(arr[0].status);//流程图节点状态
$("#nodeid").val(arr[0].id);//流程图节点id
//获取点击节点的富文本内容
showCkeditor();
//刷新table
getTableData();
//是否显示底部按钮
showButton4bottom();
} else {
selectNodes(res);
}
}
},
async: true//异步方式
});
}
} else {
}
});
//绑定鼠标右键事件
/*mychart1.on("mousedown", function (param) {
if (param.event.event.button === 2) {//IE中为 1为左键 4为中键 2为右键 其他0为左键 1为中键 2为右键
//获取节点点击的数组序号
var arrayIndex = param.dataIndex;
if (param.dataType == 'node') {
if (param.name == '启动') {
var id = nodeArr[0].id;
$.ajax({
url: '
<%=request.getContextPath()%>/command/emergencyConfigure/doStartOrEnd.do?id=' + id + '&st=s',
type: 'post',
data: { type: 'json' },
success: function (res) {
status = res;
},
async: false//同步方式 否则取不到status
});
if (id != undefined) {
showMenu(param, [
{
"name": "启动",
"fn": function () {
if (window.confirm('您是否要启动整个流程?')) {
doHandle(id, 's');
}
}
}
]);
}
} else if (param.name == '结束') {
var id = nodeArr[0].id;
$.ajax({
url: '
<%=request.getContextPath()%>/command/emergencyConfigure/doStartOrEnd.do?id=' + id + '&st=e',
type: 'post',
data: { type: 'json' },
success: function (res) {
status = res;
},
async: false//同步方式 否则取不到status
});
if (id != undefined) {
showMenu(param, [
{
"name": "结束",
"fn": function () {
if (window.confirm('您是否要结束整个流程?')) {
doHandle(id, 'e');
}
}
}
]);
}
} else {
var id = nodeArr[arrayIndex - 1].id;//根据下标获得数组中对应的id
var status = '';
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步
url: '
<%=request.getContextPath()%>/command/emergencyConfigure/getStatusForId.do?id=' + id,
type: 'post',
data: { type: 'json' },
success: function (res) {
status = res;
},
async: false//同步方式 否则取不到status
});
if (id != undefined) {
if (status == 0) {
showMenu(param, [
{
"name": "启动",
"fn": function () {
if (window.confirm('您是否要启动该节点流程?')) {
doHandle(id, '1');
}
}
}
]);
}
if (status == 1) {
showMenu(param, [
{
"name": "完成",
"fn": function () {
if (window.confirm('您是否要完成该节点流程?')) {
doHandle(id, '2');
}
}
},
{
"name": "关闭",
"fn": function () {
if (window.confirm('您是否要关闭该节点流程?')) {
doHandle(id, '3');
}
}
}
]);
}
if (status == 2) {
showMenu(param, [
{
"name": "已完成该节点",
}
]);
}
if (status == 3) {
showMenu(param, [
{
"name": "已取消该节点",
}
]);
}
}
}
}
}
})*/
/*function doHandle(id, st) {
$.ajax({
url: '
<%=request.getContextPath()%>/command/emergencyConfigure/doHandle4NS.do?id=' + id + '&st=' + st,
type: 'post',
data: { type: 'json' },
success: function (res) {
var arr = JSON.parse(res);
if (arr.length == 0) {
alert('演练结束');
//刷新流程图
echartdata('结束');
} else {
if (arr.length == 1) {
for (var i = 0; i < arr.length; i++) {
//改变操作内容
//$("#content").text(arr[i].content);
//改变操作详情
//$("#contentdetail").text(arr[i].contentDetail);
//负责人
//$("#personliable").text(arr[i].personLiablename);
//改变 操作内容div 颜色
if (arr[i].status == 0) {//未启动
$("#titleDiv1").css("background-Color", "#E8E8E8");
$("#titleDiv2").css("background-Color", "#E8E8E8");
}
if (arr[i].status == 1) {//启动中
$("#titleDiv1").css("background-Color", "#FFCD3E");
$("#titleDiv2").css("background-Color", "#FFCD3E");
}
if (arr[i].status == 2) {//已结束
$("#titleDiv1").css("background-Color", "#96C9ED");
$("#titleDiv2").css("background-Color", "#96C9ED");
}
}
$("#nodeid").val(arr[0].id);//流程图节点id
$("#nodest").val(arr[0].status);//流程图节点状态
//刷新流程图
echartdata();
//alert('执行成功');
} else {
selectNodes(res);
}
}
},
async: true//异步方式
});
}*/
/*
下面为右键点击弹窗
*/
/* var style_ul = "padding:0px;margin:0px;border: 1px solid #ccc;background-color:#E0EEE0;position: absolute;left: 0px;top: 0px;z-index: 2;display: none;";
var style_li = "list-style:none;padding: 5px; cursor: pointer; padding: 5px 20px;margin:0px;";
var style_li_hover = style_li + "background-color:#C6E2FF; color: #fff;";
//右键菜单容器
var menubox = $("<div class='echartboxMenu' style='" + style_ul + "'><div style='text-align:center;background:#ccc'></div><ul style='margin:0px;padding:0px;'></ul></div>")
.appendTo($(document.body));
//移除浏览器右键菜单
mychart1.getDom().oncontextmenu = menubox[0].oncontextmenu = function () {
return false;
}
//点击其他位置隐藏菜单
$(document).click(function () {
menubox.hide()
});*/
//显示菜单
/*var showMenu = function (e, menus) {
$("div", menubox).text(e.name);
var menulistbox = $("ul", menubox).empty();
$(menus).each(function (i, item) {
var li = $("<li style='" + style_li + "'>" + item.name + "</li>")
.mouseenter(function () {
$(this).attr("style", style_li_hover);
})
.mouseleave(function () {
$(this).attr("style", style_li);
})
.click(function () {
item["fn"].call(this);
menubox.hide();
});
menulistbox.append(li);
});
menubox.css({//定位当前xy
"left": event.clientX,
"top": event.clientY
}).show();
}*/
}
//点击节点跳转到该节点
function getbranch(nodeid) {
var rankInt = $("#rank").val();
var itemNumber = $("#itemNumber").val();
var id = $("#id").val();//三级菜单的id
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步
url: '<%=request.getContextPath()%>/command/emergencyConfigure/getDrillDataAjax2.do?type=n&rank=' + rankInt + '&nodeid=' + nodeid + '&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].contentDetail + '</td>' + '<td>' + arr[i].personLiablename + '</td>'
$("#tabletest").append('<tr>' + tr + '</tr>')
$("#rank").val(arr[0].rank);
$("#nodeid").val(arr[0].id);
// $("#startupCondition").val(arr[0].startupCondition);
// $("#itemNumber").val(arr[0].itemNumber);
}
//刷新流程图
//echartdata(arr[0].content);
echartdata();
$('#next').popover('hide');
} else {
}
}
},
async: true
});
}
function selectNodes(res) {
alert('123');
var arr = JSON.parse(res);
var ulstring = "<table class=\"table table-bordered\">";
for (var i = 0; i < arr.length; i++) {
var nodeid = arr[i].id;
ulstring += "<tr><td bgcolor=\"#81C0ED\" style=\"cursor:pointer;\" onclick=\"getbranch(\'" + nodeid + "\')\">" + arr[i].content + "</td></tr>";
}
ulstring += "</table>";
};
//启动编辑器 (在用)
const E = window.wangEditor
const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
//预加载
$(function () {
//加载顶部按钮
//getButtons();
//right_top_left_under
var div3 = document.getElementById('right_top_left_under');
$("#text-container").height(div3.clientHeight - 90);
editor.create();
editor.txt.html('${memo}'); // 重新设置编辑器内容
editor.disable(); //禁用编辑器
});
var widths = $(window).width();//body的百分之40
var heights = $(window).height();
$("#zdiv").width(widths).height(heights);//设置外面总div的宽高
$(document).ready(function () {
//mychart1.dispose();//销毁echart实例 重新创建
//获取echart数据
echartdata();//ids0为未演练的ids ids1为正在演练的ids ids2为已演练的ids ids3为已取消的
nodeonclick();
//获取table数据
//selectTable();
var widths = $(window).width();
var heights = $(window).height();
$("#zdiv").width(widths).height(heights);//设置外面总div的宽高
//加载顶部按钮
getButtons();
//显示底部按钮事件
showButton4bottom();
});
$(window).resize(function () {
mychart1.dispose();//销毁echart实例 重新创建
//获取echart数据
echartdata();//ids0为未演练的ids ids1为正在演练的ids ids2为已演练的ids ids3为已取消的
nodeonclick();
//获取table数据
//selectTable();
var widths = $(window).width();
var heights = $(window).height();
$("#zdiv").width(widths).height(heights);//设置外面总div的宽高
//加载顶部按钮
getButtons();
});
//显示顶部按钮事件
function getButtons() {
var id = $('#id').val();
$.post(ext.contextPath + '/command/emergencyConfigure/getButtons.do', {id: id}, function (data) {
var arr = JSON.parse(data);
var divstr = '';
for (var i = 0; i < arr.length; i++) {
//divstr += '<div class="buttonDiv" id="' + arr[i].id + '" onclick="buttonFun(\'' + arr[i].id + '\')"><div class="buttonFont"><font color="#0EA5FF">' + arr[i].name + '</font></div></div>';
divstr += '<div class="buttonDiv" id="' + arr[i].id + '" onclick="buttonFun(\'' + arr[i].id + '\')"><div class="buttonFont"><font>' + arr[i].name + '</font></div></div>';
divstr += '<div style="width:4%;height:100%;float:left;"></div>';
}
$('#buttons').html(divstr);
var detailId = $('#detailId').val();//二级菜单Id
$(".buttonDiv").css("background-color", "#ffffff");
$("#" + detailId).css("background-color", "#ACD6FF");
});
};
//顶部按钮点击事件
function buttonFun(id) {
$('#detailId').val(id);
$(".buttonDiv").css("background-color", "#ffffff");
$("#" + id).css("background-color", "#ACD6FF");
//刷新流程图
echartdata();
//重置底部按钮
showButton4bottom();
}
//点击流程图后获取对应富文本
function showCkeditor() {
var nodeid = $('#nodeid').val();
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步 ext.contextPath + "/base/downloadFile.do?key="+id+"&tbName="+tbName
url: "<%=request.getContextPath()%>/command/emergencyConfigure/getCkeditorContent.do?nodeid=" + nodeid,
type: 'post',
data: {type: 'json'},
success: function (res) {
/*myEditor.setData('');
//将数据转换为文档片段
var viewFragment = myEditor.data.processor.toView(res);
//对转换的数据进行包裹
var modelFragment = myEditor.data.toModel( viewFragment );
//插入到编辑器中
myEditor.model.insertContent( modelFragment );*/
//wangeditor
editor.txt.html('')
editor.txt.html(res) // 重新设置编辑器内容
},
async: true//异步方式
});
}
/*
获取table数据
*/
function getTableData() {
var nodeid = $('#nodeid').val();
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步 ext.contextPath + "/base/downloadFile.do?key="+id+"&tbName="+tbName
url: "<%=request.getContextPath()%>/command/emergencyConfigure/getTableData.do?nodeid=" + nodeid,
type: 'post',
data: {type: 'json'},
success: function (data) {
var arr = JSON.parse(data);
console.log(arr);
$('#sdt').html(arr.sdt);
$('#edt').html(arr.edt);
$('#planTime').html(arr.planTime);
$('#actualTime').html(arr.actualTime);
$('#userName').html(arr.userName);
},
async: true//异步方式
});
}
/*
结束节点 开启下一个节点
*/
function nextFun(st) {
var nodeid = $('#nodeid').val();//三级菜单Id
var detailId = $('#detailId').val();//二级菜单Id
$.ajax({
url: '<%=request.getContextPath()%>/command/emergencyConfigure/doHandle4NS.do?id=' + nodeid + '&detailId=' + detailId + '&st=' + st,
type: 'post',
data: {type: 'json'},
success: function (res) {
var arr = JSON.parse(res);
if (arr.length == 0) {
//alert('演练结束');
//刷新流程图
//echartdata('结束');
} else {
if (arr.length == 1) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].status == 0) {//未启动
$("#titleDiv1").css("background-Color", "#E8E8E8");
$("#titleDiv2").css("background-Color", "#E8E8E8");
}
if (arr[i].status == 1) {//启动中
$("#titleDiv1").css("background-Color", "#FFCD3E");
$("#titleDiv2").css("background-Color", "#FFCD3E");
}
if (arr[i].status == 2) {//已结束
$("#titleDiv1").css("background-Color", "#96C9ED");
$("#titleDiv2").css("background-Color", "#96C9ED");
}
}
//如果nextId不为空 则为提交
if (arr[0].nextId != null && arr[0].nextId != '') {
$("#nodeid").val(arr[0].nextId);//流程图节点id
} else {
$("#nodeid").val(arr[0].id);//流程图节点id
}
if (arr[0].nextButtonId != null && arr[0].nextButtonId != '') {
$("#detailId").val(arr[0].nextButtonId);//流程图节点id
} else {
//
}
$("#nodest").val(arr[0].status);//流程图节点状态
//刷新流程图
echartdata();
//判断底部按钮的显示状态
showButton4bottom();
//alert('执行成功');
} else {
selectNodes(res);
}
}
},
async: false//异步方式
});
//点击结束按钮 结束关闭整个预案
if (st == 'e') {
layer.msg('已结束演练,即将退出!', {
icon: 1,
time: 1500 //1.5秒关闭如果不配置默认是3秒
}, function(){
window.close();
});
// layer.msg('已结束演练,即将退出!', {
// time: 20000, //20s后自动关闭
// btn: ['退出', '返回演练']
// });
} else {
//刷新全局的显示内容 nodeonclick2为自动版 nodeonclick为手动版
nodeonclick2();
//刷新顶部按钮颜色
getButtons();
}
}
function nodeonclick2() {
var id = $('#nodeid').val();
$.ajax({//type为区分上一步、下一步按钮 type=b为上一步 type=n为下一步 ext.contextPath + "/base/downloadFile.do?key="+id+"&tbName="+tbName
url: "<%=request.getContextPath()%>/command/emergencyConfigure/getDrillDataAjaxForTable.do?id=" + id,
type: 'post',
data: {type: 'json'},
success: function (res) {
var arr = JSON.parse(res);
if (arr.length == 0) {
alert('演练结束');
//刷新流程图
echartdata('结束');
} else {
if (arr.length == 1) {
for (var i = 0; i < arr.length; i++) {
//改变操作内容
$("#content").text(arr[i].content);
//改变 操作内容div 颜色
if (arr[i].status == 0) {//未启动
$("#titleDiv1").css("background-Color", "#E8E8E8");
$("#titleDiv2").css("background-Color", "#E8E8E8");
}
if (arr[i].status == 1) {//启动中
$("#titleDiv1").css("background-Color", "#FFCD3E");
$("#titleDiv2").css("background-Color", "#FFCD3E");
}
if (arr[i].status == 2) {//已结束
$("#titleDiv1").css("background-Color", "#96C9ED");
$("#titleDiv2").css("background-Color", "#96C9ED");
}
}
$("#nodest").val(arr[0].status);//流程图节点状态
$("#nodeid").val(arr[0].id);//流程图节点id
//获取点击节点的富文本内容
showCkeditor();
//刷新table
getTableData();
//是否显示底部按钮
showButton4bottom();
} else {
selectNodes(res);
}
}
},
async: true//异步方式
});
}
/*
判断底部按钮的显示状态
*/
function showButton4bottom() {
$("#startButton").attr("style", "display:none;"); //隐藏
$("#nextButton").attr("style", "display:none;"); //隐藏
var nodest = $('#nodest').val();
if (nodest == '0') {
$("#startButton").attr("style", "display:block;margin-left:0px;margin-top:0px;"); //显示
}
if (nodest == '1') {
$("#nextButton").attr("style", "display:block;margin-left:0px;margin-top:0px;"); //显示
}
if (nodest == '2') {
}
}
</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="bizid" name="bizid" value="${bizid}">
<input type="hidden" id="detailId" name="detailId" value="${detailId}">
<input type="hidden" id="nodeid" name="nodeid" value="">
<input type="hidden" id="nodest" name="nodest" value="">
<%--暂时没用--%>
<input type="hidden" id="startupcondition" name="startupcondition" value="">
<input type="hidden" id="itemnumber" name="itemnumber" value="">
<div id="addWorkOrder"></div>
<div id="powerDiv"></div>
<div id="alertDiv"></div>
<div id="zdiv">
<%--左边div--%>
<div id="top" style="width:100%;height:10%;">
<div style="background:#FFFFFF;width:97%;height:80%;" valign="middle" align="center">
<div style="width:5%;height:100%;float:left;"></div>
<div style="width:92%;height:100%;float:left;">
<div style="width:100%;height:20%;float:left;"></div>
<div style="width:100%;height:60%;float:left;">
<div style="width:1%;height:100%;float:left;"></div>
<%--5个按钮--%>
<div id="buttons"></div>
</div>
<div style="width:100%;height:20%;float:left;"></div>
</div>
<div style="width:2%;height:100%;float:left;">
<button type="button" class="btn btn-danger btn-lg" style="margin-right:20px;margin-top:2.5vh;" onclick="nextFun('e');"
id="endButton">结束预案
</button>
</div>
</div>
</div>
<div style="width:100%;height:2%;background-color: #F1F4F5"></div>
<%--右边div--%>
<div id="bottom" style="width:100%;height:88%;">
<!--左边流程图的div-->
<div id="left">
<div id="forceChart" class="showechart">
</div>
</div>
<!--右边列表的div-->
<div id="right">
<!--右边操作内容步骤负责人+聊条窗口+视频 的div-->
<div id="right_top">
<div id="right_top_left">
<!--右边操作内容步骤负责人+4个按钮 的div-->
<div id="right_top_left_top">
<!--6个按钮 的div-->
<div id="right_top_left_top_button" valign="middle" align="center">
</div>
</div>
<!--子流程负责人 的div-->
<div id="right_top_left_under" valign="middle" align="center">
<div style="background:#FFFFFF;width:97%;height:97%;text-align:center;" valign="middle"
align="left">
<div id="titleDiv2">
<div style="float: left;margin-left:30px;">
</div>
<font id="content" style="float:left;padding: 0px 10px;">事项详情</font>
<div style="float: left;">
<div style="float: left;">
<span style="float: left;">[</span>
<span id="planTime" style="float: left;">-</span>
<span style="float: left;">分钟</span>
<span style="float: left;">]</span>
</div>
<div style="float: left;">
<span style="float: left;">[</span>
<span id="edt" style="float: left;">-</span>
<span style="float: left;">]</span>
</div>
<div style="float: left;">
<span style="float: left;">-</span>
</div>
<div style="float: left;">
<span style="float: left;">[</span>
<span id="sdt" style="float: left;">-</span>
<span style="float: left;">]</span>
</div>
<div style="float: left;">
<span style="float: left;">[</span>
<span id="actualTime" style="float: left;">-</span>
<span style="float: left;">分钟</span>
<span style="float: left;">]</span>
</div>
<div style="float: left;">
<span style="float: left;">[</span>
<span id="userName" style="float: left;">-</span>
<span style="float: left;">]</span>
</div>
</div>
<div style="float: right;padding: 0px 5px;">
<button type="button" class="btn btn-primary btn-lg" style="margin-left:0px;margin-top:0px;display:none;"
onclick="nextFun('1');" id="startButton" >启动节点
</button>
<button type="button" class="btn btn-success btn-lg" style="margin-left:0px;margin-top:0px;display:none;"
onclick="nextFun('2');" id="nextButton" >结束节点
</button>
</div>
</div>
<div class="box-body" align="left">
<div id="toolbar-container" class="toolbar"></div>
<div id="text-container" class="text"></div>
</div>
</div>
</div>
</div>
<div id="right_top_right" valign="middle" align="center">
</div>
</div>
<!--工单的div-->
<!-- <div id="right_under" valign="middle" align="center">
<div style="background:#FFFFFF;width:97%;height:70%;" valign="middle" align="center">
<div style="background:#FFFFFF;width:100%;height:20%;float:left;" valign="middle"
align="center">
</div>
<div style="background:#FFFFFF;width:100%;height:80%;float:left;" valign="middle"
align="center">
<table style="width:90%;height:60%;border: 2px solid #a5a5a5; border-collapse: collapse; margin: auto;"
cellspacing="0">
<tr style="font-size: 14px;border-bottom: 1px solid #d5d5d5;">
<td align="center" class="tableText">开始时间</td>
<td align="center" class="tableText">结束时间</td>
<td align="center" class="tableText">预计用时(分钟)</td>
<td align="center" class="tableText">实际用时(分钟)</td>
<td align="center" class="tableText">操作人</td>
</tr>
<tr style="font-size: 14px;border-bottom: 1px solid #d5d5d5;">
<td align="center" class="tableText" id="sdt">-</td>
<td align="center" class="tableText" id="edt">-</td>
<td align="center" class="tableText" id="planTime">-</td>
<td align="center" class="tableText" id="actualTime">-</td>
<td align="center" class="tableText" id="userName">-</td>
</tr>
</table>
</div>
</div>
<div style="background:#FFFFFF;width:97%;height:30%;" valign="middle">
<div style="width:50%;height:100%;float:left;" align="left">
<button type="button" class="btn btn-primary btn-lg" style="margin-left:20px;display:none;"
onclick="nextFun('1');" id="startButton" >启动节点
</button>
<button type="button" class="btn btn-success btn-lg" style="margin-left:20px;display:none;"
onclick="nextFun('2');" id="nextButton" >结束节点
</button>
</div>
<div style="width:50%;height:100%;float:left;" align="right">
<button type="button" class="btn btn-danger btn-lg" style="margin-right:20px;" onclick="nextFun('e');"
id="endButton">结束预案
</button>
</div>
</div>
</div> -->
</div>
</div>
</div>
</body>
</html:html>