1442 lines
61 KiB
Plaintext
1442 lines
61 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<html:html lang="true">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title></title>
|
|||
|
|
<!-- 引用页头及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>
|