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

621 lines
32 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" %>
<%@page import="com.sipai.entity.process.DataVisualContent" %>
<%request.setAttribute("Type_PieChart", DataVisualContent.Type_PieChart); %>
<%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 () {
$('#titleColorContainer').colorpicker({format: null});
$('#subtitleColorContainer').colorpicker({format: null});
$('#backgroundContainer').colorpicker({format: null});
$('#lableColorContainer').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);
}
$('#switchBtnLableShow').bootstrapSwitch({
onText: '是',
offText: '否',
size: "small",
});
if ('${dataVisualPieChart.lableShow}' == 'false') {
$('#switchBtnLableShow').bootstrapSwitch('state', false, true);
} else if ('${dataVisualPieChart.lableShow}' == 'true') {
$('#switchBtnLableShow').bootstrapSwitch('state', true, true);
} else {
$('#switchBtnLableShow').bootstrapSwitch('state', false, true);
}
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'});//选中元素上下居中
var datalegendPosition = JSON.parse("[{\"id\":\"false\",\"text\":\"不显示\"},{\"id\":\"center\",\"text\":\"居中\"},{\"id\":\"left\",\"text\":\"靠左\"},{\"id\":\"right\",\"text\":\"靠右\"}]");
var selectlegendPosition = $("#legendPosition").select2({
data: datalegendPosition,
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;
} // 函数用于呈现当前的选择
});
selectlegendPosition.val('${dataVisualPieChart.legendPosition}').trigger("change");//设置选中
var datalablePosition = JSON.parse("[{\"id\":\"outside\",\"text\":\"外侧\"},{\"id\":\"inside\",\"text\":\"内部\"}]");
var selectlablePosition = $("#lablePosition").select2({
data: datalablePosition,
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;
} // 函数用于呈现当前的选择
});
selectlablePosition.val('${dataVisualPieChart.lablePosition}').trigger("change");//设置选中
initFun();
});
function doPieChartsave() {
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 lableShowStatus = $('#switchBtnLableShow').bootstrapSwitch('state');
if (lableShowStatus) {
baseform = baseform + "&lableShow=true";
} else {
baseform = baseform + "&lableShow=false";
}
$.post(ext.contextPath + "/process/dataVisualPieChart/doupdate.do", baseform, function (data) {
if (data.code == 1) {
closeModal('pieChartSubModal');
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 doPieChartDel() {
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: '${dataVisualPieChart.id}',
type: '${Type_PieChart}'
}, function (data) {
var datajson = JSON.parse(data);
if (datajson.code == 1) {
closeModal('pieChartSubModal');
$('#${dataVisualContent.id}').remove();
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
});
}
});
}
function addSeriesFun() {
$.post(ext.contextPath + "/process/dataVisualPieChartSeries/dosave.do", {pid: '${dataVisualPieChart.id}'}, function (data) {
if (data.code == 1) {
$("#seriesTable").bootstrapTable('refresh');
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
function initFun() {
$("#seriesTable").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/process/dataVisualPieChartSeries/getList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 50, // 页面数据条数
pageNumber: 1, // 首页页码
paginationDetailHAlign: ' hidden',//去除分页的显示
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
pid: '${dataVisualPieChart.id}'
}
},
// onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
// },
sortName: 'morder', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
field: 'name', // 返回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" type="button" title="编辑" onclick="editSeriesFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts += '<button class="btn btn-default btn-sm" type="button" title="删除" onclick="deleteSeriesFun(\'' + 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("seriesTable");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
},
onReorderRow: function (newData) {
//这里的newData是整个表格数据数组形式
// console.log("data",newData); //调试用代码
$.post(ext.contextPath + '/process/dataVisualPieChartSeries/dosort.do', {jsondata: JSON.stringify(newData)},//将整张表数据 不能分页
function (data) {
if (data == 1) {
//$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '数据错误', 'mainAlertdiv');
}
});
}
});
$("#seriesTable").tableDnD();
}
function editSeriesFun(id) {
stopBubbleDefaultEvent();
$.post(ext.contextPath + '/process/dataVisualPieChartSeries/doedit.do', {id: id}, function (data) {
$("#chartDDiv").html(data);
openModal('pieChartSeriesSubModal');
});
}
function deleteSeriesFun(id) {
stopBubbleDefaultEvent();
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/dataVisualPieChartSeries/dodelete.do', {id: id}, function (data) {
if (data.code == "1") {
$("#seriesTable").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
}, 'json');
}
});
}
</script>
<div class="modal fade" id="pieChartSubModal">
<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-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="${dataVisualPieChart.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="titleText" name="titleText"
placeholder="标题文本"
value="${dataVisualPieChart.titleText}">
</div>
<label class="col-sm-2 control-label">标题颜色</label>
<div class="col-sm-4">
<div class="input-group" id="titleColorContainer">
<input name="titleColor" id="titleColor" type="text" class="form-control"
placeholder="标题颜色"
value="${dataVisualPieChart.titleColor}">
<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="titleFontSize" name="titleFontSize"
placeholder="标题大小"
value="${dataVisualPieChart.titleFontSize}">
</div>
<label class="col-sm-2 control-label">标题粗细</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="titleFontWeight" name="titleFontWeight"
placeholder="标题粗细"
value="${dataVisualPieChart.titleFontWeight}">
</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="titlePositionX" name="titlePositionX"
placeholder="标题左侧"
value="${dataVisualPieChart.titlePositionX}">
</div>
<label class="col-sm-2 control-label">标题上侧</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="titlePositionY" name="titlePositionY"
placeholder="标题上侧"
value="${dataVisualPieChart.titlePositionY}">
</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="subtitleText" name="subtitleText"
placeholder="副标题文本"
value="${dataVisualPieChart.subtitleText}">
</div>
<label class="col-sm-2 control-label">副标题颜色</label>
<div class="col-sm-4">
<div class="input-group" id="subtitleColorContainer">
<input name="subtitleColor" id="subtitleColor" type="text" class="form-control"
placeholder="副标题颜色"
value="${dataVisualPieChart.subtitleColor}">
<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="subtitleFontSize"
name="subtitleFontSize"
placeholder="副标题大小"
value="${dataVisualPieChart.subtitleFontSize}">
</div>
<label class="col-sm-2 control-label">副标题粗细</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="subtitleFontWeight"
name="subtitleFontWeight"
placeholder="副标题粗细"
value="${dataVisualPieChart.subtitleFontWeight}">
</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="switchBtnLableShow" type="checkbox"/>
</div>
</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="lablePosition" name="lablePosition"
style="width: 170px;"></select>
</div>
<label class="col-sm-2 control-label">文本颜色</label>
<div class="col-sm-4">
<div class="input-group" id="lableColorContainer">
<input name="lableColor" id="lableColor" type="text" class="form-control"
placeholder="文本颜色"
value="${dataVisualPieChart.lableColor}">
<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="lableFontsize"
name="lableFontsize"
placeholder="文本大小"
value="${dataVisualPieChart.lableFontsize}">
</div>
<label class="col-sm-2 control-label">文本粗细</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="lableFontweight"
name="lableFontweight"
placeholder="文本粗细"
value="${dataVisualPieChart.lableFontweight}">
</div>
</div>
<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="${dataVisualPieChart.background}">
<div class="input-group-addon">
<i></i>
</div>
</div>
</div>
<label class="col-sm-2 control-label">图例</label>
<div class="col-sm-4">
<select class="form-control select2 " id="legendPosition" name="legendPosition"
style="width: 170px;"></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="radius" name="radius"
placeholder="图形大小"
value="${dataVisualPieChart.radius}">
</div>
<label class="col-sm-2 control-label">边框半径</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="borderradius" name="borderradius"
placeholder="边框半径"
value="${dataVisualPieChart.borderradius}">
</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="colors" name="colors" placeholder="颜色组"
value="${dataVisualPieChart.colors}">
</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="addSeriesFun();"><i
class="fa fa-plus"></i> 添加数据
</button>
</div>
<table id="seriesTable" data-use-row-attr-func="true" data-reorderable-rows="true"></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="doPieChartDel();">删除</button>
<button type="button" class="btn btn-primary" onclick="doPieChartsave()">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>