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

646 lines
31 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" %>
<%@page import="com.sipai.entity.process.DataVisualContent" %>
<%request.setAttribute("Type_Switch", DataVisualContent.Type_Switch); %>
<%request.setAttribute("Isfull_True", DataVisualContent.Isfull_True); %>
<%request.setAttribute("Isfull_False", DataVisualContent.Isfull_False); %>
<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>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
$('#backgroundContainer').colorpicker({format: null});
$('#ckColorContainer').colorpicker({format: null});
$('#switchBtnIsFull').bootstrapSwitch({
onText: '是',
offText: '否',
size: "small",
});
if ('${dataVisualContent.isfull}' == '${Isfull_False}') {
$('#switchBtnIsFull').bootstrapSwitch('state', false, true);
} else if ('${dataVisualContent.isfull}' == '${Isfull_True}') {
$('#switchBtnIsFull').bootstrapSwitch('state', true, true);
} else {
$('#switchBtnIsFull').bootstrapSwitch('state', false, true);
}
$('#switchBtnIsFixed').bootstrapSwitch({
onText: '是',
offText: '否',
size: "small",
});
if ('${dataVisualContent.isfixed}' == 'false') {
$('#switchBtnIsFixed').bootstrapSwitch('state', false, true);
} else if ('${dataVisualContent.isfixed}' == 'true') {
$('#switchBtnIsFixed').bootstrapSwitch('state', true, true);
} else {
$('#switchBtnIsFixed').bootstrapSwitch('state', false, true);
}
$('#switchBtnOpenst').bootstrapSwitch({
onText: '显示',
offText: '隐藏',
size: "small",
});
if ('${dataVisualSwitch.openst}' == 'false') {
$('#switchBtnOpenst').bootstrapSwitch('state', false, true);
} else if ('${dataVisualSwitch.openst}' == 'true') {
$('#switchBtnOpenst').bootstrapSwitch('state', true, true);
} else {
$('#switchBtnOpenst').bootstrapSwitch('state', false, true);
}
var typeSelectData = JSON.parse("[{\"id\":\"point\",\"text\":\"显示/隐藏点\"},{\"id\":\"url\",\"text\":\"弹出链接地址\"}]");
var typeSelect = $("#type").select2({
data: typeSelectData,
placeholder: '请选择',//默认文字提示
allowClear: false,//允许清空
escapeMarkup: function (markup) {
return markup;
}, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
formatResult: function formatRepo(repo) {
return repo.text;
}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo) {
return repo.text;
} // 函数用于呈现当前的选择
});
typeSelect.val('${dataVisualSwitch.type}').trigger("change");//设置选中
typeSelect.on("change", function (e) {
changeType();
});
changeType();
var urlTypeSelectData = JSON.parse("[{\"id\":\"0\",\"text\":\"模态框\"},{\"id\":\"1\",\"text\":\"jsp\"}]");
var urlTypeSelect = $("#urlType").select2({
data: urlTypeSelectData,
placeholder: '请选择',//默认文字提示
allowClear: false,//允许清空
escapeMarkup: function (markup) {
return markup;
}, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
formatResult: function formatRepo(repo) {
return repo.text;
}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo) {
return repo.text;
} // 函数用于呈现当前的选择
});
urlTypeSelect.val('${dataVisualSwitch.urlType}').trigger("change");//设置选中
urlTypeSelect.on("change", function (e) {
changeurlType();
});
var showStyleSelectData = JSON.parse("[{\"id\":\"switch\",\"text\":\"开关\"},{\"id\":\"check\",\"text\":\"勾选\"}]");
var showStyleSelect = $("#showStyle").select2({
data: showStyleSelectData,
placeholder: '请选择',//默认文字提示
allowClear: false,//允许清空
escapeMarkup: function (markup) {
return markup;
}, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
formatResult: function formatRepo(repo) {
return repo.text;
}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo) {
return repo.text;
} // 函数用于呈现当前的选择
});
showStyleSelect.val('${dataVisualSwitch.showStyle}').trigger("change");//设置选中
showStyleSelect.on("change", function (e) {
changeShowStyle();
});
changeurlType();
changeShowStyle();
initFun();
});
function changeType() {
let typeValue = $('#type').val();
if (typeValue == 'point') {
$('#urlDiv').css('display', 'none');
} else if (typeValue == 'url') {
$('#urlDiv').css('display', 'block');
}
}
function changeShowStyle() {
let typeValue = $('#showStyle').val();
if (typeValue == 'switch') {
$('#showStyleDiv').css('display', 'none');
} else if (typeValue == 'check') {
$('#showStyleDiv').css('display', 'block');
}
}
function changeurlType() {
let urlTypeValue = $('#urlType').val();
if (urlTypeValue == '0') {
$('#urlType0Div').css('display', 'block');
$('#urlType1Div').css('display', 'none');
} else if (urlTypeValue == '1') {
$('#urlType0Div').css('display', 'none');
$('#urlType1Div').css('display', 'block');
}
}
function initFun() {
$("#switchPointTable").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/process/dataVisualSwitchPoint/getList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 50, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
pid: '${dataVisualSwitch.id}'
}
},
// onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
// },
sortName: 'id', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
field: 'contentid', // 返回json数据中的name
title: '名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter: function (value, row, index) {
let html = "<input style='width: 240px;' id=\"" + row.id + "_SwitchPoint\" value=\"" + row.contentid + "\" onchange=\"changeSwitchPointCid('" + row.id + "');\" />";
return html;
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = "";
buts += '<button class="btn btn-default btn-sm" type="button" title="删除" onclick="deleteSwitchPointFun(\'' + row.id + '\')"><i class="fa 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("switchPointTable");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
}
function changeSwitchPointCid(id) {
let contentId = $('#' + id + '_SwitchPoint').val();
$.post(ext.contextPath + "/process/dataVisualSwitchPoint/doupdateForContentId.do", {
id: id,
contentId: contentId
}, function (data) {
if (data.code == 1) {
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
function doSwitchsave() {
let form = $("#contentsubForm").serialize();
const isFullStatus = $('#switchBtnIsFull').bootstrapSwitch('state');
if (isFullStatus) {
form = form + "&isfull=${Isfull_True}";
} else {
form = form + "&isfull=${Isfull_False}";
}
const isFixedStatus = $('#switchBtnIsFixed').bootstrapSwitch('state');
if (isFixedStatus) {
form = form + "&isfixed=true";
} else {
form = form + "&isfixed=false";
}
$.post(ext.contextPath + "/process/dataVisualContent/doupdate.do", form, function (data) {
if (data.code == 1) {
let baseform = $("#baseForm").serialize();
const openstStatus = $('#switchBtnOpenst').bootstrapSwitch('state');
if (openstStatus) {
baseform = baseform + "&openst=true";
} else {
baseform = baseform + "&openst=false";
}
$.post(ext.contextPath + "/process/dataVisualSwitch/doupdate.do", baseform, function (data) {
if (data.code == 1) {
closeModal('switchSubModal');
if ('${dataVisualContent.istab}' == 'true') {
showOneContent('${dataVisualContent.id}', 'tab');
} else {
showOneContent('${dataVisualContent.id}');
}
// showFrame(frameId);
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
function doSwitchDel() {
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 + '/process/dataVisualContent/dodelete.do', {
id: '${dataVisualContent.id}',
did: '${dataVisualSwitch.id}',
type: '${Type_Switch}'
}, function (data) {
var datajson = JSON.parse(data);
if (datajson.code == 1) {
closeModal('switchSubModal');
$('#${dataVisualContent.id}').remove();
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
});
}
});
}
function addSwitchPoint() {
$.post(ext.contextPath + "/process/dataVisualSwitchPoint/dosave.do", {pid: '${dataVisualSwitch.id}'}, function (data) {
if (data.code == 1) {
$("#switchPointTable").bootstrapTable('refresh');
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
function deleteSwitchPointFun(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 + '/process/dataVisualSwitchPoint/dodelete.do', {
id: id
}, function (data) {
var datajson = JSON.parse(data);
if (datajson.code == 1) {
$("#switchPointTable").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
});
}
});
}
function doSwitchCopy() {
$.post(ext.contextPath + '/process/dataVisualSwitch/doSwitchCopy.do', {
contentId: '${dataVisualContent.id}',
id: '${dataVisualSwitch.id}'
}, function (data) {
var datajson = JSON.parse(data);
closeModal('switchSubModal');
if ('${dataVisualContent.istab}' == 'true') {
showOneContent(datajson.id, 'tab');
} else {
showOneContent(datajson.id);
}
});
}
</script>
<div class="modal fade" id="switchSubModal">
<div class="modal-dialog" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">编辑</h4>
</div>
<div id="alertDiv"></div>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#tab1" data-toggle="tab"
index="0" aria-expanded="true">区块配置</a></li>
<li class=""><a href="#tab2" data-toggle="tab" index="1"
aria-expanded="true">基础配置</a></li>
<li class=""><a href="#tab3" data-toggle="tab" index="2"
aria-expanded="true">点配置</a></li>
</ul>
<div class="tab-content no-padding">
<div class="chart tab-pane active" id="tab1"
style="position: relative; padding:5px;">
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="contentsubForm" autocomplete="off">
<!-- 界面提醒div强制id为alertDiv -->
<input type="hidden" name="id" id="id" value="${dataVisualContent.id}"/>
<div class="form-group">
<label class="col-sm-2 control-label">左侧距离</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="postx" name="postx" placeholder="左侧距离"
value="${dataVisualContent.postx}">
</div>
<label class="col-sm-2 control-label">上侧距离</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="posty" name="posty" placeholder="上侧距离"
value="${dataVisualContent.posty}">
</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="${dataVisualContent.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="${dataVisualContent.height}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">自适应</label>
<div class="col-sm-4">
<div class="switch" data-on="primary" data-off="info">
<input id="switchBtnIsFull" type="checkbox"/>
</div>
</div>
<label class="col-sm-2 control-label">固定组件</label>
<div class="col-sm-4">
<div class="switch" data-on="primary" data-off="info">
<input id="switchBtnIsFixed" type="checkbox"/>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">刷新时间</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="refreshtime" name="refreshtime"
placeholder="刷新时间"
value="${dataVisualContent.refreshtime}">
</div>
<div class="col-sm-1">
<div style="line-height: 34px;text-align: center;">min</div>
</div>
<label class="col-sm-2 control-label">图层</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="zIndex" name="zIndex" placeholder="图层"
value="${dataVisualContent.zIndex}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">透明度</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="opacityst" name="opacityst"
placeholder="透明度"
value="${dataVisualContent.opacityst}">
</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="style" name="style" placeholder="样式"
value="${dataVisualContent.style}">
</div>
</div>
</form>
</div>
</div>
<div class=" tab-pane" id="tab2"
style="position: relative; padding:5px;">
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="baseForm" autocomplete="off">
<!-- 界面提醒div强制id为alertDiv -->
<input type="hidden" name="id" id="id" value="${dataVisualSwitch.id}"/>
<div class="form-group">
<label class="col-sm-2 control-label">展现模式</label>
<div class="col-sm-4">
<select class="form-control select2 " id="showStyle" name="showStyle"
style="width: 170px;"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">默认状态</label>
<div class="col-sm-4">
<div class="switch" data-on="primary" data-off="info">
<input id="switchBtnOpenst" type="checkbox"/>
</div>
</div>
<label class="col-sm-2 control-label">点击效果</label>
<div class="col-sm-4">
<select class="form-control select2 " id="type" name="type"
style="width: 170px;"></select>
</div>
</div>
<div id="showStyleDiv" style="display: none;">
<div class="form-group">
<label class="col-sm-2 control-label">背景色</label>
<div class="col-sm-4">
<div class="input-group" id="backgroundContainer">
<input name="background" id="background" type="text" class="form-control"
placeholder="背景色"
value="${dataVisualSwitch.background}">
<div class="input-group-addon">
<i></i>
</div>
</div>
</div>
<label class="col-sm-2 control-label">对勾颜色</label>
<div class="col-sm-4">
<div class="input-group" id="ckColorContainer">
<input name="ckColor" id="ckColor" type="text" class="form-control"
placeholder="对勾颜色"
value="${dataVisualSwitch.ckColor}">
<div class="input-group-addon">
<i></i>
</div>
</div>
</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="ckSize" name="ckSize"
placeholder="对勾大小"
value="${dataVisualSwitch.ckSize}">
</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="ckStyle" name="ckStyle"
placeholder="对勾样式"
value="${dataVisualSwitch.ckStyle}">
</div>
</div>
</div>
<div id="urlDiv" style="display: none;">
<div class="form-group">
<label class="col-sm-2 control-label">url地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="url" name="url"
placeholder="url地址"
value="${dataVisualSwitch.url}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">弹出方式</label>
<div class="col-sm-4">
<select class="form-control select2 " id="urlType" name="urlType"
style="width: 170px;"></select>
</div>
</div>
<div id="urlType0Div" style="display: none;">
<div class="form-group">
<label class="col-sm-2 control-label">模态框名称</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="submodalName"
name="submodalName"
placeholder="模态框名称"
value="${dataVisualSwitch.submodalName}">
</div>
</div>
</div>
<div id="urlType1Div" style="display: none;">
<div class="form-group">
<label class="col-sm-2 control-label">弹出框宽</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="urlWidth" name="urlWidth"
placeholder="弹出框宽"
value="${dataVisualSwitch.urlWidth}">
</div>
<label class="col-sm-2 control-label">弹出框高</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="urlHeight" name="urlHeight"
placeholder="弹出框高"
value="${dataVisualSwitch.urlHeight}">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class=" tab-pane" id="tab3"
style="position: relative; padding:5px;">
<div class="modal-body">
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
<button type="button" class="btn btn-default" onclick="addSwitchPoint();"><i
class="fa fa-plus"></i> 新增点
</button>
</div>
<table id="switchPointTable"></table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
<button type="button" class="btn" onclick="doSwitchDel();">删除</button>
<button type="button" class="btn btn-primary" onclick="doSwitchCopy()">拷贝</button>
<button type="button" class="btn btn-primary" onclick="doSwitchsave()">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>