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

1609 lines
74 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" %>
<%@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>