Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/command/processEmergencyConfigureDrill.jsp

1609 lines
74 KiB
Plaintext
Raw Permalink Normal View History

2026-01-16 14:13:44 +08:00
<%@ 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" %>
<%@page import="com.sipai.entity.command.EmergencyRecords" %>
<%request.setAttribute("EmergencyRecords_Status_Start", EmergencyRecords.Status_Start);%>
<%request.setAttribute("EmergencyRecords_Status_Finish", EmergencyRecords.Status_Finish);%>
<% request.setAttribute("Status_Issue", com.sipai.entity.timeefficiency.PatrolRecord.Status_Issue); %>
<% request.setAttribute("Status_Start", com.sipai.entity.timeefficiency.PatrolRecord.Status_Start); %>
<% request.setAttribute("Status_Finish", com.sipai.entity.timeefficiency.PatrolRecord.Status_Finish); %>
<% request.setAttribute("Status_PartFinish", com.sipai.entity.timeefficiency.PatrolRecord.Status_PartFinish); %>
<% request.setAttribute("Status_Undo", com.sipai.entity.timeefficiency.PatrolRecord.Status_Undo); %>
<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">
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
charset="utf-8"></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">
.content-header {
padding: 0;
}
.content {
padding: 10px;
}
.box {
margin-bottom: 10px;
}
.breadcrumb {
margin-bottom: 0px;
font-size: 14px;
background-color: transparent;
padding: 0;
}
.breadcrumb > li + li:before {
padding: 0 10px;
color: #add4eb;
content: ">";
font-size: 25px;
vertical-align: middle;
}
.showechart {
margin: 1 auto;
width: 100%;
height: 100%;
}
#left {
width: 30%;
height: 100%;
background: #FFFFFF;
float: left;
align: center;
}
#right {
width: 70%;
height: 100%;
background: #FFFFFF;
float: left;
align: center;
}
#right_top {
width: 100%;
height: 70%;
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: 15%;
float: left;
align: center;
}
/*视频的div*/
#right_top_left_under {
width: 100%;
height: 85%;
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;
}
/* #work_table{
width:791px;
height:75px;
border-radius:2px;
border:1px solid rgba(229,229,229,1);
} */
.buttonDiv {
width: 11%;
height: 30px;
float: left;
margin-right: 15px;
}
/*
根据不同分辨率显示不同px的文字大小
*/
@media (min-width: 400px) and (min-height: 300px) {
/*上面一排按钮div的样式*/
.buttonDiv {
line-height: 16px;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 10px;
margin: 10% 0px 0px 0px;
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 10%;
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 {
line-height: 16px;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 10px;
margin: 10% 0px 0px 0px;
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 10%;
border-bottom: 1px solid #E5E5E5;
font-size: 16px;
font-weight: bold;
padding: 6px 0px 0px 0px;
}
#videoTitle {
font-size: 14px;
font-weight: bold;
}
}
@media (min-width: 992px) and (min-height: 558px) {
/*上面一排按钮div的样式*/
.buttonDiv {
line-height: 16px;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 12px;
margin: 10% 0px 0px 0px;
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 10%;
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 {
line-height: 16px;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 14px;
margin: 8% 0px 0px 0px;
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 10%;
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 {
line-height: 1px;
}
/*上面一排按钮里面文字的样式*/
.buttonFont {
display: inline-block;
font-size: 18px;
margin: 17% 0px 0px 0px;
}
/*事项名称文字样式---颜色框*/
#titleDiv2 {
width: 100%;
height: 10%;
border-bottom: 1px solid #E5E5E5;
font-size: 22px;
font-weight: bold;
padding: 14px 0px 0px 0px;
}
#videoTitle {
font-size: 18px;
font-weight: bold;
}
}
.content_body_text {
}
</style>
<script type="text/javascript">
var mychart1 = null;
var nodeArr = [];
var nodeLine = [];
var jsonArray = ${jsonArray};//任务矩形json
var stepArray = [];//步骤json
<c:if test="${stepArray!=null && stepArray!=''}">
stepArray = ${stepArray};//步骤json
</c:if>
var end_y = ${end_y};
var ids0 = '${ids0}';
var ids1 = '${ids1}';
var ids2 = '${ids2}';
var ids3 = '${ids3}';
function echartdata(ids0, ids1, ids2, ids3) {//content以前是根据content改变状态 现在为status
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 (ids1 != '' && 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: [130, 35],
itemStyle: {
normal: {
color: '#FFCD3E'//节点背景色
}
},
label: {
color: '#FF0000'//字体颜色
}
});
} else if (ids2 != '' && 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: [130, 35],
itemStyle: {
normal: {
color: '#96C9ED'//节点背景色
}
},
label: {
color: '#000000'//字体颜色
}
});
} else if (ids3 != '' && 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: [130, 35],
itemStyle: {
normal: {
color: '#A1A1A1'//节点背景色
}
},
label: {
color: '#000000'//字体颜色
}
});
} 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: [130, 35],
itemStyle: {
normal: {
color: '#E8E8E8'//节点背景色
}
},
label: {
color: '#000000'//字体颜色
}
});
}
}
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: 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;
}
// 基于准备好的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.setOption(forceOption);
}
//点击流程图后获取对应富文本
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) {
editor.txt.html('')
editor.txt.html(res) // 重新设置编辑器内容
},
async: true//异步方式
});
}
//点击流程图的方法
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 {
//console.log(arr.length);
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 + '(节点负责人)');
$("#text-container").html(arr[i].memo);
var content_body = '';
if (arr[i].visualization != null && arr[i].visualization != '') {
//可视化区域
content_body = '<iframe src="' + arr[i].visualization + '" style="width:100%; height:100%;"></iframe>';
} else {
content_body = '<div class="content_body_text">' + arr[i].content + '</div>';
}
$("#content_body").html(content_body);
$("#div1").css("display", "");//子节点介绍
$("#div2").css("display", "none");//总体介绍之类的
//改变 操作内容div 颜色
if (arr[i].status == 0) {//未启动
$("#content_tools").empty();
}
if (arr[i].status == 1) {//启动中
var str = "";
$("#content_tools").html(str);
}
if (arr[i].status == 2) {//已结束
$("#content_tools").empty();
}
}
$("#nodeid").val(arr[0].id);//流程图节点id
//获取点击节点的富文本内容
showCkeditor();
//获取工单table数据
// selectTable();
getWorkOrderList();
//刷新流程图
echartdata(arr[0].ids0, arr[0].ids1, arr[0].ids2, arr[0].ids3);
} else {
selectNodes(res);
}
}
},
async: true//异步方式
});
}
} else {
}
});
//绑定鼠标右键事件
mychart1.on("mousedown", function (param) {
if (param.event.event.button === 2) {//IE中为 1为左键 4为中键 2为右键 其他0为左键 1为中键 2为右键
if ("${emergencyRecords.status}" == "${EmergencyRecords_Status_Start}") {
//获取节点点击的数组序号
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
// alert(param.name);
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": "已取消该节点",
}
]);
}
}
}
}
} else {
alert('演练已结束');
}
}
})
function doHandle(id, st) {
$.ajax({
url: '<%=request.getContextPath()%>/command/emergencyConfigure/doHandle.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);
$("#text-container").html(arr[i].memo);
//改变 操作内容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
//获取工单table数据
// selectTable();
getWorkOrderList();
//刷新流程图
echartdata(arr[0].ids0, arr[0].ids1, arr[0].ids2, arr[0].ids3);
// alert('执行成功');
if (st == 'e') {
window.parent.delTab('tabId_drill');
// window.parent.addTab('222222','','')
}
} 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 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/emergencyConfigure/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].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('', '', '', '');
}
},
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/emergencyConfigure/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].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('', '', '', '');
} else {
console.log('进了弹窗方法');
selectNodes(res);
//$('#next').popover('destroy');
}
}
},
async: true
});
});
}
//点击节点跳转到该节点
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) {
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>";
$('#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 selectDetail(id) {
$.post(ext.contextPath + "/command/emergencyRecords/selectDetails.do", {id: id}, function (data) {
var result = data.result
ids0 = result.ids0;
ids1 = result.ids1;
ids2 = result.ids2;
ids3 = result.ids3;
jsonArray = result.jsonArray;
end_y = result.end_y;
echartdata(ids0, ids1, ids2, ids3);//ids0为未演练的ids ids1为正在演练的ids ids2为已演练的ids ids3为已取消的
nodeonclick();
//按钮点击
dobutton();
//获取工单数据
getWorkOrderList();
}, 'json');
}
$(function () {
var widths = $(window).width() * 0.35;//body的百分之40
var heights = $(window).height() - 130;
$('#forceChart').width($('#forceChart').width(widths));
$('#forceChart').height($('#forceChart').height(heights));
$('#content_body').height(heights * 0.47);
$('#patrolPoint_body').height(heights * 0.3);
if (stepArray != null && stepArray.length > 0) {
var str = '<ol class="breadcrumb">';
for (var i = 0; i < stepArray.length; i++) {
var step = stepArray[i];
if (step.status == 1) {
str += '<li class="active"><a href="#" class="btn btn-primary" onclick="selectDetail(\'' + step.id + '\');">' + step.contents + '</a></li>';
selectDetail(step.id);
} else {
str += '<li><a href="#" class="btn btn-default " onclick="selectDetail(\'' + step.id + '\');">' + step.contents + '</a></li>';
}
}
str += '</ol>';
$("#content-title").html(str);
} else {
$("#content-title").html("预案事项");
selectDetail('${emergencyRecords.id}');
}
//获取echart数据
//echartdata('${ids0}', '${ids1}', '${ids2}', '${ids3}');//ids0为未演练的ids ids1为正在演练的ids ids2为已演练的ids ids3为已取消的
//
//nodeonclick();
//按钮点击
//dobutton();
//获取table数据
// selectTable();
//getWorkOrderList();
var widths = $(window).width();//body的百分之40
var heights = $(window).height();
$("#zdiv").width(widths).height(heights);//设置外面总div的宽高
//InitOcx();//初始化视频
//CloseOcx();//关闭视频
//获取工单数据
//getWorkOrderList();
var div3 = document.getElementById('wangView_div');
$("#text-container").height(div3.clientHeight - 120);
$("#text-container").html($("#memo").html()); // 重新设置编辑器内容
});
$(document).ready(function () {
$(window).resize(function () {
mychart1.dispose();//销毁echart实例 重新创建
//获取echart数据
echartdata(ids0, ids1, ids2, ids3);//ids0为未演练的ids ids1为正在演练的ids ids2为已演练的ids ids3为已取消的
nodeonclick();
//获取table数据
// selectTable();
getWorkOrderList();
var widths = $(window).width();
var heights = $(window).height();
$("#zdiv").width(widths).height(heights);//设置外面总div的宽高
});
});
function fileView(id) {
var tbName = 'tb_teacher_file'; //数据表
$.post(ext.contextPath + '/teacher/teacherfile/doview.do', {
id: id,
masterId: id,
tbName: tbName
}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
});
// window.open('<%=request.getContextPath()%>/command/emergencyConfigure/showvideo.do?videopath='+videopath,window,'width='+(window.screen.availWidth-0)+',height='+(window.screen.availHeight-0)+ ',top=0,left=0,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no',true);
}
function buttonjs() {
alert('暂未关联运行异常监视');
}
function buttonfx() {
alert('暂未关联运行异常分析');
}
function buttoncx() {
alert('暂未关联应急资源查询');
}
// function buttongd(divId){
// var id = $('#id').val();
// var detailId = $('#detailId').val();
// $.post('<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/donew.do',{id:id,detailId:detailId},function(data){
// $('#'+divId).html(data);
// });
// var index = layer.open({
// type: 1,
// title: false,
// closeBtn: 0,
// area: '80%',
// fixed: false,
// skin: 'bgfff', //没有背景色
// shadeClose: true,
// content: $('#'+divId),
// end:function(){
// $('#'+divId).hide();
// },
// });
// }
//divId为弹出层的div Id ; viewType区分新增和查看界面;id为工单实际id
function buttongd(divId, viewType, id) {
stopBubbleDefaultEvent();
//由于iframe层级较高 遮挡住layer的弹出层 所以先隐藏摄像头div关闭弹窗的时候再显示出来
// document.getElementById("cameraDiv").style.display = "none";//隐藏摄像头div
var recordid = $('#id').val();//当前整个应急预案演练的id
var nodeid = $('#nodeid').val();//子节点id
var bizid = $('#bizid').val();//工单id
if (viewType == 'add') {//新增界面
if (nodeid != null && nodeid != '') {
$.post("<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/donew.do", {
recordid: recordid,
nodeid: nodeid,
id: id,
bizid: bizid
}, function (data) {
$('#' + divId).html(data);
openModal('powerModal')
});
} else {
alert('请先点击流程节点再下发工单!');
return;
}
}
if (viewType == 'view') {//查看界面
$.post("<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/doviewlayer.do", {
recordid: recordid,
nodeid: nodeid,
id: id
}, function (data) {
$('#' + divId).html(data);
openModal('powerviewModal')
});
}
if (viewType == 'list') {//查看界面
$.post("<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/dolistlayer.do", {recordid: recordid}, function (data) {
$('#' + divId).html(data);
});
}
var index = layer.open({
type: 1,
title: false,
closeBtn: 0,
area: '80%',
fixed: false,
skin: 'bgfff', //没有背景色
shadeClose: true,
content: $('#' + divId),
end: function () {
// document.getElementById("cameraDiv").style.display = ""; //显示摄像头div
layer.closeAll();
//$('#'+divId).hide();
},
});
}
/*
弹窗选择摄像头列表
*/
function cameraListLayer(divId) {
parent.addTab('770a45a7f5d24f66924db73eba83afa5', '视频查看', 'work/camera/showVideos.do')
//alert('暂未关联厂区视频');
}
/*
在列表中选择摄像头
*/
/*function chooseCamera(id) {
$.post("cameraction.do?method=chooseCamera", {id: id}, function (data) {
var arr = JSON.parse(data);
$("#videoTitle").html(arr[0].cameraName);
$("#channel").val(arr[0].cameraChannel);
$('#cameraIframe').attr('src', 'cameraction.do?method=camview&id=' + arr[0].cameraId);
//document.getElementById("cameraDiv").style.display=""; //显示摄像头div
layer.closeAll();
})
}*/
/*
切换摄像头
*/
function doSwitch(switchtype) {//switchtype为上一个/下一个的切换类型 channel为信道 根据信道大小顺序切换摄像头
//$("#videoTitle").html("进水口视频");
console.log($('#channel').val());
var bizid = unitId;
var channel = $('#channel').val();
$.post("<%=request.getContextPath()%>/work/camera/camviewSwitch.do", {
bizid: bizid,
switchtype: switchtype,
channel: channel
}, function (data) {
console.log("pass");
if (data == 1) {
alert('没有上一个视频');
} else {
var arr = JSON.parse(data);
$("#videoTitle").html(arr[0].cameraName);
$("#channel").val(arr[0].cameraChannel);
$('#cameraIframe').attr('src', '<%=request.getContextPath()%>/work/camera/cameraview.do?id=' + arr[0].cameraId);
}
})
}
/**
* 原本的add方法
* sj 2021-10-16
*/
var addworkFun = function () {
var id = $('#id').val();
var nodeid = $('#nodeid').val();
$.post('<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/donew.do', {
id: id,
nodeid: nodeid
}, function (data) {
$("#powerDiv").html(data);
openModal('powerModal')
});
};
/**
* 现在的add方法
* sj 2021-10-16
*/
var addworkFun2 = function (workOrderId) {
var id = $('#id').val();
var nodeid = $('#nodeid').val();
$.post('<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/donew2.do', {
id: id,
nodeid: nodeid,
workOrderId: workOrderId,
}, function (data) {
$("#powerDiv").html(data);
openModal('powerModal')
});
};
/**
* 下发
* njp 2022-05-31
*/
var sendFun = function (workOrderId) {
$.post('<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/dosend.do', {
workOrderId: workOrderId,
}, function (data) {
getWorkOrderList();
});
};
// setInterval("selectTable();",10000);//毫秒为单位10秒刷新一次
function downWork(id) {
$.post("<%=request.getContextPath()%>/command/emergencyRecordsWorkOrder/downWork.do", {id: id}, function (data) {
if (data == 0) {
alert('下发成功');
// selectTable();
getWorkOrderList();
} else {
alert('下发失败');
// selectTable();
getWorkOrderList();
}
})
}
function getWorkOrderList() {
var id = $('#id').val();
var nodeid = $('#nodeid').val();
$('#table_patrolPoint').bootstrapTable('destroy');
$("#table_patrolPoint").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/command/emergencyRecordsWorkOrder/getlist.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: false, // 在表格底部显示分页组件默认false
pageList: [5, 20, 50], // 设置页面可以显示的数据条数
pageSize: 5, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'client', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: 5, // 每页要显示的数据条数
page: 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
nodeid: nodeid,
recordid: id
}
},
responseHandler: function (res) {
return res.rows
},
sortName: 'insdt', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
{
field: '_worksenduser', // 返回json数据中的name
title: '发单人', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},
{
field: 'worksenddt', // 返回json数据中的name
title: '发单时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},
{
field: 'workcontent', // 返回json数据中的name
title: '工作内容', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},
{
field: 'workreceiveuser', // 返回json数据中的name
title: '接单人', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},
{
field: 'patrolRecord.actFinishTime', // 返回json数据中的name
title: '完成时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},
{
field: 'status', // 返回json数据中的name
title: '状态', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter: function (value, row, index) {
var str = "";
if (null == value) {
str = '<span style="color:#c12e2a;"><i class="fa fa-times-circle-o" aria-hidden="true"></i> 未下发</span>';
}
if ("${Status_Issue}" == value) {
str = '<span style="color:#c12e2a;"><i class="fa fa-times-circle-o" aria-hidden="true"></i> 已下发</span>';
}
if ("${Status_Start}" == value) {
str = '<span style="color:#c12e2a;"><i class="fa fa-times-circle-o" aria-hidden="true"></i> 进行中</span>';
}
if ("${Status_Finish}" == value) {
str = '<span style="color:#3e8f3e"><i class="fa fa-check-circle-o" aria-hidden="true"></i> 已完成</span>';
}
if ("${Status_PartFinish}" == value) {
str = '<span style="color:#3e8f3e"><i class="fa fa-check-circle-o" aria-hidden="true"></i> 部分完成</span>';
}
if ("${Status_Undo}" == value) {
str = '<span style="color:#c12e2a;"><i class="fa fa-times-circle-o" aria-hidden="true"></i> 不巡检</span>';
}
return str;
}
},
{
title: "操作",
align: 'center',
valign: 'middle',
width: 90, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = "";
if (row.status == "0") {
buts += '<button class="btn btn-default btn-sm" title="修改" onclick="addworkFun2(\'' + row.id + '\')"><i class="fa fa fa-edit"></i><span class="hidden-md hidden-lg">修改</span></button>';
buts += '<button class="btn btn-default btn-sm" title="下发" onclick="sendFun(\'' + row.id + '\')"><i class="fa fa fa-send"></i><span class="hidden-md hidden-lg">下发</span></button>';
}
buts = '<div class="btn-group" >' + buts + '</div>';
return buts;
}
}
],
onLoadSuccess: function () { //加载成功时执行
adjustBootstrapTableView("table_patrolPoint");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
}
</script>
</head>
<body class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="row">
<div class="col-md-5">
<h4 class="inline col-md-5 text-overflow">预案名称:${emergencyRecords.name}</h4>
<h4 class="inline col-md-7"><small
style="margin-right:5px;">预案开始时间:${emergencyRecords.starttime.substring(0,16)}</small>
<small>预案执行情况: <c:if
test="${emergencyRecords.status==EmergencyRecords_Status_Start}">进行中</c:if>
<c:if test="${emergencyRecords.status==EmergencyRecords_Status_Finish}">完成</c:if></small>
</h4>
</div>
<div class="col-md-7">
<h4>
<div class="buttonDiv btn btn-primary" onclick="fileView('${emergencyConfigureID}PDF')">
预案文档
</div>
<div class="buttonDiv btn btn-primary" onclick="fileView('${emergencyConfigureID}VIDEO')">
演练教学
</div>
<div class="buttonDiv btn btn-primary"
onclick="buttongd('listWorkOrder','list','${param.id}')">预案进展
</div>
<div class="buttonDiv btn btn-primary" onclick="cameraListLayer('listCamera');">厂区视频
</div>
</h4>
</div>
</div>
</section>
<!-- Main content -->
<section class="content container-fluid">
<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="nodeid" name="nodeid" value="">
<input type="hidden" id="startupcondition" name="startupcondition" value="">
<input type="hidden" id="itemnumber" name="itemnumber" value="">
<input type="hidden" id="bizid" name="bizid" value="${bizid}">
<!--信道 根据信道排序的-->
<input type="hidden" id="channel" name="channel" value="${channel}">
<div id="subDiv"></div>
<div id="addWorkOrder"></div>
<div id="powerDiv"></div>
<div id="alertDiv"></div>
<div id="user4SelectDiv"></div>
<div class="row">
<div class="col-md-5">
<div class="box box-primary direct-chat direct-chat-primary">
<div class="box-header with-border">
<h4 class="box-title" id="content-title">
</h4>
<div class="box-tools pull-right">
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<!--左边流程图的div-->
<div id="forceChart" class="showechart">
</div>
</div>
<!-- /.box-body -->
</div>
</div>
<!--右边列表的div-->
<div class="col-md-7" id="wangView_div">
<div class="box box-primary direct-chat direct-chat-primary">
<div class="box-header with-border">
<%--<h4 class="box-title" style="height: 35px;line-height: 1.8;">事项名称:<font
id="content"></font></h4>
<div class="box-tools pull-right" id="content_tools">
</div>--%>
<div class="row">
<label class="col-md-2">事项名称:</label>
<div class="col-md-4"><font id="content">-</font></div>
</div>
<div class="row">
<label class="col-md-2">事项负责人:</label>
<div class="col-md-4"><font id="personliable">-</font></div>
<label class="col-md-2">事项说明:</label>
<div class="col-md-4"><font id="contentdetail">-</font></div>
</div>
</div>
<%-- style="position: absolute;z-index: -1;"--%>
<div class="box-body" style="z-index: 0;">
<div id="toolbar-container" class="toolbar"></div>
<div id="text-container" class="text"></div>
</div>
<div class="box-footer" id="content_footer">
<div class="row">
<label class="col-md-2">总负责人:</label>
<div class="col-md-4"><font>${_firstPerson}</font></div>
<%--<label class="col-md-2">事项说明:</label>
<div class="col-md-4"><font></font></div>--%>
</div>
<div class="row">
<label class="col-md-2">总体介绍:</label>
<div class="col-md-10"><font id="memo">${memo}</font></div>
</div>
<div class="row">
<label class="col-md-2">启动条件:</label>
<div class="col-md-10"><font>${startingCondition}</font></div>
</div>
</div>
</div>
<!--右边列表的div-->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">任务工单</h3>
<div class="box-tools pull-right">
<c:if test="${emergencyRecords.status==EmergencyRecords_Status_Start}">
<button type="button" class="btn btn-default btn-sm" onclick="addworkFun2();"><i
class="fa fa-plus"></i>新增
</button>
</c:if>
</div>
</div>
<div class="box-body" id="patrolPoint_body">
<table id="table_patrolPoint" class="table table-condensed"></table>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
</div>
<div id="listWorkOrder" style="display:none;height:500px;"></div>
<div id="listCamera" style="display:none;height:500px;"></div>
</body>
</html:html>