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

688 lines
24 KiB
Plaintext
Raw Permalink 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"%>
<style type="text/css">
.select2-container .select2-selection--single {
height: 34px;
line-height: 34px;
}
.select2-selection__arrow {
margin-top: 3px;
}
</style>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
<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">
var showPlan4SelectFun = function () {
$.post(ext.contextPath + '/plan/showPlan4Select.do', { formId: "subForm", hiddenId: "pid", textId: "_pname" }, function (data) {
$("#plan4SelectDiv").html(data);
openModal("plan4SelectModal")
});
};
//布局选择
var showLayout4SelectFun = function () {
$.post(ext.contextPath + '/layout/showLayoutForSelect.do', { formId: "subForm", hiddenId: "layoutId", textId: "layoutName", id: "${plan.id}", layoutId: $('#layoutId').val() }, function (data) {
$("#plan4SelectDiv").html(data);
openModal('layout4SelectModal');
});
};
//JSP选择
function showJsp4SelectFun(planLayoutId, jspId) {
$.post(ext.contextPath + '/visualjsp/showJSPForSelect.do', { planLayoutId: planLayoutId, jspId: jspId }, function (data) {
$("#plan4SelectDiv").html(data);
openModal('jsp4SelectModal');
});
};
//数据类型(产线)
function showDataType4SelectFun(planLayoutId, dataTypeId) {
$.post(ext.contextPath + '/datatype/showDataTypeForSelect.do', { planLayoutId: planLayoutId, dataTypeId: dataTypeId }, function (data) {
$("#plan4SelectDiv").html(data);
openModal('dataType4SelectModal');
});
};
//摄像头选择保存
function showCamera4SelectSaveFun(planLayoutId, cameraId) {
$.post(ext.contextPath + '/work/camera/showCamera4SelectSave.do', {
planLayoutId: planLayoutId,
cameraId: cameraId
}, function (data) {
$("#plan4SelectDiv").html(data);
openModal('camera4SelectModal');
});
};
function doAddPlanInteractionFun() {
$.post(ext.contextPath + '/plan/doAddPlanInteraction.do', { planId: "${plan.id}" }, function (data) {
$("#plan4SelectDiv").html(data);
openModal('planInteractionAddModal');
});
};
function doEditPlanInteractionFun(id) {
$.post(ext.contextPath + '/plan/doEditPlanInteraction.do', { id: id }, function (data) {
$("#plan4SelectDiv").html(data);
openModal('planInteractionEditModal');
});
};
function doCollapse() {
if (document.getElementById("planBox").className == "col-md-9") {
doHide();
} else {
doShow();
}
};
//隐藏折叠框
function doHide() {
document.getElementById("collapseIcon").className = "fa fa-arrow-down";//改变图标箭头
$('#treeCollapse').collapse('toggle');//1
setTimeout(function () {
$('#editCollapse').collapse('toggle');//2
}, 300);
setTimeout(function () {
document.getElementById("planBox").className = "col-md-12";//3
}, 600);
setTimeout(function () {
$('#viewCollapse').collapse('toggle');//4
}, 700);
};
//显示折叠框
function doShow() {
document.getElementById("collapseIcon").className = "fa fa-arrow-up";//改变图标箭头
$('#viewCollapse').collapse('toggle');//1
setTimeout(function () {
document.getElementById("planBox").className = "col-md-9";//2
}, 200);
setTimeout(function () {
$('#editCollapse').collapse('toggle');//3
}, 300);
setTimeout(function () {
$('#treeCollapse').collapse('toggle');//4
}, 600);
};
var initLayoutListFun = function () {
$("#table_layout").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/plan/getPlanLayoutList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
//showFooter: true,//添加页脚
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
layoutId: $("#layoutId").val(),
planId: "${plan.id}"
}
},
onClickCell: function (field, value, row, $element) {
if (field == 'jspName' || field == 'jspCode') {
showJsp4SelectFun(row.id, row.jspCode);
} else if (field == 'dataType') {
showDataType4SelectFun(row.id, row.dataType);
} else if (field == 'camera') {
showCamera4SelectSaveFun(row.id, row.cameraId);
} else {
alert(JSON.stringify("显示浏览"));
}
},
sortName: 'morder', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
/* {
checkbox: true, // 显示一个勾选框
}, */{
field: 'name', // 返回json数据中的name
title: '名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return row.layoutDetail.name;
}
}, {
field: 'height', // 返回json数据中的name
title: '高度', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
field: 'width', // 返回json数据中的name
title: '宽度', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'jspName', // 返回json数据中的name
title: 'JSP名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
field: 'jspCode', // 返回json数据中的name
title: 'JSP编码', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
field: 'dataType', // 返回json数据中的name
title: '产线', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.dataType != null) {
return row.dataTypeName;
}
}
}, {
field: 'camera', // 返回json数据中的name
title: '摄像头', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.camera != null) {
return row.camera.name;
}
}
}, {
field: 'rowno', // 返回json数据中的name
title: '行号', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return row.layoutDetail.rowno;
}
}, {
field: 'colspan', // 返回json数据中的name
title: '占列数', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return row.layoutDetail.colspan;
}
}, {
field: 'rowspan', // 返回json数据中的name
title: '占行数', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return row.layoutDetail.rowspan;
}
}
],
onLoadSuccess: function () { //加载成功时执行
adjustBootstrapTableView("table_layout");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
}
var initInteractionFun = function () {
$("#table_interaction").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/plan/getPlanInteractionList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
//showFooter: true,//添加页脚
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
planId: "${plan.id}"
}
},
sortName: 'morder', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
/* {
checkbox: true, // 显示一个勾选框
}, */{
field: 'name', // 返回json数据中的name
title: '名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
field: 'interactionName', // 返回json数据中的name
title: '交互名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.interaction != null && row.interaction != "") {
value = row.interaction.name;
}
return value;
}
}, {
field: 'cameraName', // 返回json数据中的name
title: '摄像头', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.camera != null && row.camera != "") {
value = row.camera.name;
}
return value;
}
}, {
field: 'parameter', // 返回json数据中的name
title: '所需参数', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
},
{
field: 'parameterNames', // 返回json数据中的name
title: '所需参数名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'btnclass', // 返回json数据中的name
title: '按钮Class', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
field: 'btnstyle', // 返回json数据中的name
title: '按钮样式', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
field: 'morder', // 返回json数据中的name
title: '顺序', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = '';
buts += '<button class="btn btn-default btn-sm" onclick="doEditPlanInteractionFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts += '<button class="btn btn-default btn-sm" onclick="doDelPlanInteractionFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除</span></button>';
buts = '<div class = "btn-group">' + buts + '</div>';
return buts;
}
}
],
onLoadSuccess: function () { //加载成功时执行
adjustBootstrapTableView("table_interaction");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
}
function dosave() {
//if ($("#subForm").form('validate')) {
$.post(ext.contextPath + "/plan/updatePlan.do", $("#subForm").serialize(), function (result) {
if (result == 1) {
initTreeView();
showAlert('s', '保存成功');
} else {
showAlert('d', '保存失败');
}
});
//}
}
function doUpdatePlanLayout() {
swal({
text: "此操作会删除原先设定的方案布局,并生成新的方案布局。确定要执行此操作?",
dangerMode: true,
buttons: {
cancel: {
text: "取消",
value: null,
visible: true,
className: "btn btn-default btn-sm",
closeModal: true,
},
confirm: {
text: "确定",
value: true,
visible: true,
className: "btn btn-danger btn-sm",
closeModal: true
}
}
})
.then(function (willUpdate) {
if (willUpdate) {
$.post(ext.contextPath + '/plan/updatePlanLayout.do', $("#subForm").serialize(), function (data) {
if (data == 1) {
showAlert('s', '更新成最新布局请配置JSP', 'alertDiv_layout');
$("#table_layout").bootstrapTable('refresh');//刷新
} else {
showAlert('d', '更新失败', 'alertDiv_layout');
}
}, 'json');
}
});
}
function dodel() {
swal({
text: "您确定要删除此记录?",
dangerMode: true,
buttons: {
cancel: {
text: "取消",
value: null,
visible: true,
className: "btn btn-default btn-sm",
closeModal: true,
},
confirm: {
text: "确定",
value: true,
visible: true,
className: "btn btn-danger btn-sm",
closeModal: true
}
}
})
.then(function (willDelete) {
if (willDelete) {
$.post(ext.contextPath + '/plan/deletePlan.do', $("#subForm").serialize(), function (data) {
if (data.res > 0) {
initTreeView();
} else {
showAlert('d', '删除失败');
}
}, 'json');
}
});
}
function delPowerFun(id) {
swal({
text: "您确定要删除此记录?",
dangerMode: true,
buttons: {
cancel: {
text: "取消",
value: null,
visible: true,
className: "btn btn-default btn-sm",
closeModal: true,
},
confirm: {
text: "确定",
value: true,
visible: true,
className: "btn btn-danger btn-sm",
closeModal: true
}
}
})
.then(function (willDelete) {
if (willDelete) {
$.post(ext.contextPath + '/plan/deletePlan.do', { id: id }, function (data) {
if (data.res > 0) {
$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'alertDiv_power');
}
}, 'json');
}
});
}
function doDelPlanInteractionFun(id) {
swal({
text: "您确定要删除此方案交互?",
dangerMode: true,
buttons: {
cancel: {
text: "取消",
value: null,
visible: true,
className: "btn btn-default btn-sm",
closeModal: true,
},
confirm: {
text: "确定",
value: true,
visible: true,
className: "btn btn-danger btn-sm",
closeModal: true
}
}
})
.then(function (willDelete) {
if (willDelete) {
$.post(ext.contextPath + '/plan/dodeletePlanInteraction.do', { id: id }, function (data) {
if (data > 0) {
$("#table_interaction").bootstrapTable('refresh');
showAlert('s', '方案交互删除成功', 'alertDiv_interaction');
} else {
$("#table_interaction").bootstrapTable('refresh');
showAlert('d', '方案交互删除失败', 'alertDiv_interaction');
}
}, 'json');
}
});
}
$("#subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
name: {
validators: {
notEmpty: {
message: '名称不能为空'
}
}
},
_pname: {
validators: {
notEmpty: {
message: '上级列表不能为空'
}
}
},
layoutName: {
validators: {
notEmpty: {
message: '布局不能为空'
}
}
},
}
});
$(function () {
$('#editCollapse').collapse('show');//显示折叠框
$("#active").select2({ minimumResultsForSearch: 10 }).val("${plan.active }").trigger("change");
$('#colorContainer').colorpicker({ format: null });
initLayoutListFun();//获取布局list
initInteractionFun();//获取交互list
});
</script>
<div id="editCollapse" class="collapse">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">详情</h3>
<div class="box-tools pull-right">
<a onclick="dosave()" class="btn btn-box-tool" data-toggle="tooltip" title="保存"><i
class="glyphicon glyphicon-floppy-disk"></i></a>
<a onclick="dodel()" class="btn btn-box-tool" data-toggle="tooltip" title="删除"><i
class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<!-- /.box-header -->
<div class="box-body ">
<form class="form-horizontal " id="subForm">
<input id="id" name="id" type="hidden" value="${plan.id}" />
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div id="plan4SelectDiv"></div>
<div class="form-group">
<label class="col-sm-2 control-label">*名称</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" name="name" placeholder="名称" value="${plan.name }">
</div>
<label class="col-sm-2 control-label">*上级列表</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="_pname" name="_pname" placeholder="上级列表"
onclick="showPlan4SelectFun();" value="${plan._pname}">
<input id="pid" name="pid" type="hidden" value="${plan.pid}" />
</div>
</div>
<!-- <div class="form-group">
<label class="col-sm-2 control-label">布局</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="地址"
value="${plan.location}">
</div>
</div> -->
<div class="form-group">
<label class="col-sm-2 control-label">顺序</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="morder" name="morder" placeholder="顺序" value="${plan.morder}">
</div>
<label class="col-sm-2 control-label">启用</label>
<div class="col-sm-4">
<select id="active" name="active" class="form-control select2">
<option value="启用">启用</option>
<option value="禁用">禁用</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">背景颜色</label>
<div class="col-sm-4">
<div class="input-group " id="colorContainer">
<input name="backgroundColor" id="backgroundColor" type="text" class="form-control"
value="${plan.backgroundColor}">
<div class="input-group-addon">
<i></i>
</div>
</div>
</div>
<label class="col-sm-2 control-label">背景图路径</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="image" name="image" placeholder="背景图路径" value="${plan.image}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">*布局</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="layoutName" name="layoutName" placeholder="布局选择"
onclick="showLayout4SelectFun();" value="${plan.layoutName}" readonly style="background-color: white">
<input id="layoutId" name="layoutId" type="hidden" value="${plan.layoutId}" />
</div>
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-4">
<select id="type" name="type" class="form-control select2">
<option value="plan">方案</option>
<option value="node">节点</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">宽</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="width" name="width" placeholder="宽" value="${plan.width }">
</div>
<label class="col-sm-2 control-label">高</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="height" name="height" placeholder="高" value="${plan.height }">
</div>
</div>
</form>
</div>
</div>
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">交互</h3>
<div class="box-tools pull-right">
</div>
</div>
<!-- /.box-header -->
<div class="box-body ">
<div>
<div id="alertDiv_interaction"></div>
<div id="selectDiv_interaction"></div>
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
<button type="button" class="btn btn-default" onclick="doAddPlanInteractionFun();"><i class="fa fa-plus"></i>
新增</button>
</div>
<table id="table_interaction"></table>
</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">
</div>
</div>
<!-- /.box-header -->
<div class="box-body ">
<div>
<div id="alertDiv_layout"></div>
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
<button type="button" class="btn btn-default" onclick="doCollapse();"><i id="collapseIcon"
class="fa fa-arrow-up"></i></button>
<button type="button" class="btn btn-default" onclick="doUpdatePlanLayout();"><i class="fa fa-refresh"></i>
更新</button>
</div>
<div>
<span>*点击jsp编码或者jsp名称单元格选择显示模块,点击产线单元格选择产线,点击摄像头单元格选择摄像头(非必选)</span>
</div>
<div id="layoutDiv"></div>
<table id="table_layout"></table>
</div>
</div>
</div>
<div id="viewCollapse" class="collapse">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">浏览</h3>
<div class="box-tools pull-right">
</div>
</div>
<!-- /.box-header -->
<div class="box-body ">
</div>
</div>
</div>