<!--
|
功能描述：后台管理 - 资源管理 - 资源发布 - 业务图层 - 图表设置
|
-->
|
<!DOCTYPE html>
|
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" layout:decorator="MasterPage/Layout.Empty"
|
xmlns:layout="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="UTF-8"/>
|
<title th:text="'图表设置 - ' + ${systemName}"></title>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/assets/css/style.css'}"/>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/expand/css/bootstrap-extract.css'}"/>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/datepicker.css'}"/>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/expand/plugins/portlet/css/portlet.css'}"/>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/expand/plugins/portlet/portlet.js'}"></script>
|
<!-- 表单样式 -->
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/jquery.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/expand/plugins/layer/layer.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/tether.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/bootstrap.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'echarts/echarts.min-3.0.js'}" type="text/javascript"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/jquery.form-3.51.0.js'}"></script>
|
<script th:src="@{${jspwebroot}+'utf8-jsp/ueditor.config.js'}"></script>
|
<script th:src="@{${jspwebroot}+'utf8-jsp/ueditor.all.js'}"></script>
|
<script th:src="@{${jspwebroot}+'utf8-jsp/lang/zh-cn/zh-cn.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/winPro.js'}"></script>
|
<style>
|
.form-control {
|
padding: 0.3rem 0.7rem;
|
height: 34px;
|
display: inline-block;
|
}
|
|
.control-label {
|
padding-top: 0 !important;
|
width: 94px;
|
float: left;
|
line-height: 30px;
|
padding-right: 1.2em;
|
text-align: right;
|
}
|
|
.control-group {
|
margin-bottom: 1em;
|
}
|
|
.controls {
|
margin-left: 94px;
|
}
|
|
.row {
|
margin-left: 0;
|
margin-right: 0;
|
}
|
|
.col-sm-3,
|
.col-sm-6,
|
.col-sm-12 {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
#right_Div {
|
width: 64%;
|
margin-left: 35%;
|
}
|
|
#left_Div {
|
width: 100%;
|
/*float: left;*/
|
/*border-left: 1px solid #E3E3E3;*/
|
position: relative;
|
}
|
|
#bottom_button {
|
position: fixed;
|
bottom: 60px;
|
margin-left: 10px;
|
}
|
|
.addSave {
|
float: right;
|
margin-right: 25px;
|
}
|
|
#tables_t tr {
|
width: 100%;
|
height: 40px;
|
}
|
|
#tables_t tr td, #table_t tr th {
|
width: 33.3%;
|
/*padding: 10px 50px;*/
|
}
|
|
#listTable {
|
width: 98%;
|
margin: 15px auto;
|
border: 1px solid #E3E3E3;
|
}
|
|
#listTable tr {
|
border-bottom: 1px solid #E3E3E3;
|
}
|
|
.list_name {
|
text-align: center;
|
vertical-align: middle;
|
border-right: 1px solid #E3E3E3;
|
}
|
|
.configList {
|
margin: 0;
|
padding: 0;
|
}
|
|
.configList li {
|
list-style: none;
|
padding: 10px 10px;
|
border-bottom: 1px solid #E3E3E3;
|
}
|
|
.deledit {
|
padding: 2px 3px;
|
/*float: right;*/
|
margin-left: 10px;
|
cursor: pointer;
|
color: #039cfd;
|
font-size: 18px;
|
}
|
|
#tables_t {
|
margin: 0 1.5rem;
|
border: 1px solid #E3E3E3;
|
}
|
|
#tables_t thead th,
|
#tables_t tbody td{
|
padding-left: 10px;
|
border-right: 1px solid #E3E3E3;
|
}
|
|
#tables_t tr {
|
border-bottom: 1px solid #E3E3E3;
|
}
|
|
#var_Div, #table_Div, #charts_Div {
|
padding: 20px 0 55px 50px;
|
position: relative;
|
min-height: 508px;
|
}
|
|
#bottom_Div {
|
clear: both;
|
padding: 10px 0 30px 0;
|
}
|
|
.YaoSuJiShu {
|
display: none;
|
}
|
|
.td_table {
|
width: 100%;
|
}
|
|
#listTable .td_table tr {
|
border: none;
|
line-height: 35px;
|
}
|
|
#listTable .td_table tr:not(:last-child) {
|
border-bottom: 1px solid #E3E3E3;
|
}
|
|
.saveBtn {
|
width: 100%;
|
position: absolute;
|
height: 50px;
|
background-color: white;
|
bottom: 0;
|
right: 0;
|
}
|
|
.saveBtn button {
|
margin-left: 25px;
|
}
|
</style>
|
|
<script th:inline="javascript">
|
$(function () {
|
var height = document.documentElement.clientHeight;
|
$("#main_Div").css("min-height", height - 165);
|
});
|
|
//新增（常量、表格、图表）
|
function showConfig(type) {
|
var url = "/res/common/addserviceconfig?resourceid=" + $("#resMainInfoId").val() + "&type=" + type+"&settype=0";
|
// window.location.replace(url);
|
var area = ['800px', '550px'];
|
if (type == "vars") {
|
area = ['800px', '370px'];
|
}else if(type =="charts"){
|
area = ['820px', '610px'];
|
}
|
layer.open({
|
type: 2,
|
title: '添加配置',
|
id: 'tianjia',
|
shadeClose: true,
|
shade: 0.7,
|
maxmin: false, //开启最大化最小化按钮
|
area: area,
|
content: url
|
});
|
}
|
|
//修改（常量、表格、图表）
|
function showEditJson(name) {
|
var url = "/res/common/addserviceconfig?resourceid=" + $("#resMainInfoId").val() + "&name=" + name +"&settype=0";
|
// window.location.replace(url);
|
layer.open({
|
type: 2,
|
title: '修改配置',
|
id: 'tianjia',
|
shadeClose: true,
|
shade: 0.7,
|
maxmin: false, //开启最大化最小化按钮
|
area: ['800px', '550px'],
|
content: url
|
});
|
}
|
|
function checkKey() {
|
var resourceid = $("#resMainInfoId").val();
|
//编辑器内容
|
var content = UE.getEditor('contents').getContent();
|
$.ajax({
|
url: '/res/common/matchKeyNotInHTML',
|
type: 'post',
|
dataType: 'text',
|
data: {
|
resourceid: resourceid,
|
serviceHTML: htmlEncodeByRegExp(content)
|
},
|
success: function (data) {
|
if (data != "") {
|
if(confirm(data +"没添加到图形页面，将不会显示在页面上，是否继续保存当前配置？")) {
|
saveHtml();
|
}
|
}
|
else {
|
saveHtml();
|
}
|
},
|
error: function (e) {
|
saveHtml();
|
}
|
})
|
}
|
|
function saveHtml() {
|
var resourceid = $("#resMainInfoId").val();
|
//编辑器内容
|
var content = UE.getEditor('contents').getContent();
|
$.ajax({
|
url: '/res/common/saveHtmlConfig',
|
type: 'post',
|
dataType: 'text',
|
data: {
|
resourceid: resourceid,
|
serviceHTML: htmlEncodeByRegExp(content)
|
},
|
success: function (data) {
|
if (data == "success") {
|
alert("保存成功！");
|
window.location.replace("/res/common/serviceconfig?resourceid=" + $("#resMainInfoId").val());
|
}
|
else {
|
alert("保存失败！");
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
})
|
}
|
|
function delJson(name) {
|
var resourceid = $("#resMainInfoId").val();
|
$.ajax({
|
url: '/res/common/delserviceconfig',
|
type: 'post',
|
dataType: 'text',
|
data: {name: name, resourceid: resourceid},
|
success: function (data) {
|
if (data == "success") {
|
alert("删除成功！");
|
window.location.replace("/res/common/serviceconfig?resourceid=" + $("#resMainInfoId").val());
|
}
|
else {
|
alert("删除失败！");
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
})
|
}
|
|
</script>
|
|
<script th:inline="javascript">
|
$(function () {
|
var content = [[${serviceHTML}]];
|
if (content == null) content = "";
|
initEditor(content != "" ? htmlDecodeByRegExp(content) : "");
|
})
|
|
//实例化编辑器
|
function initEditor(content) {
|
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
|
UE.Editor.prototype.getActionUrl = function (action) {
|
if (action == 'uploadimage' || action == 'uploadfile') {
|
return "/res/common/uploadueditorfile";
|
} else {
|
return this._bkGetActionUrl.call(this, action);
|
}
|
}
|
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
|
var ue = UE.getEditor('contents', {
|
toolbars: [
|
[
|
'source',
|
'undo', //撤销
|
'redo', //重做
|
'|',
|
'bold', //加粗
|
'italic', //斜体
|
'strikethrough', //删除线
|
'underline', //下划线
|
'|',
|
'forecolor', //字体颜色
|
'backcolor', //背景色
|
'|',
|
'insertorderedlist', //有序列表
|
'insertunorderedlist', //无序列表
|
'|',
|
'fontfamily', //字体
|
'fontsize', //字号
|
'|',
|
'justifyleft', //居左对齐
|
'justifyright', //居右对齐
|
'justifycenter', //居中对齐
|
'justifyjustify', //两端对齐
|
'|',
|
'link', //超链接
|
'unlink', //取消链接
|
'|',
|
'simpleupload' //单图上传
|
]
|
],
|
initialContent: content, //初始化显示内容
|
initialFrameHeight: 300, //初始化高度
|
enableAutoSave: false //是否启用自动保存
|
});
|
}
|
|
//解码
|
function htmlDecodeByRegExp(str) {
|
var s = "";
|
if (str.length == 0) return "";
|
s = str.replace(/&/g, "&");
|
s = s.replace(/</g, "<");
|
s = s.replace(/>/g, ">");
|
// s = s.replace(/ /g, " ");
|
s = s.replace(/'/g, "\'");
|
s = s.replace(/"/g, "\"");
|
return s;
|
}
|
|
//转码
|
function htmlEncodeByRegExp(str) {
|
var s = "";
|
if (str.length == 0) return "";
|
s = str.replace(/&/g, "&");
|
s = s.replace(/</g, "<");
|
s = s.replace(/>/g, ">");
|
// s = s.replace(/ /g, " ");
|
s = s.replace(/\'/g, "'");
|
s = s.replace(/\"/g, """);
|
return s;
|
}
|
|
|
function OpenSheZhi() {
|
var resMainInfoId = $("#resMainInfoId").val();
|
var url = "/res/common/TuXingConfig?resourceid="+resMainInfoId;
|
// winPro.openFullwin(url, "图表测试", "yes");
|
openFullWindow(url, "图表测试");
|
|
}
|
function OpenEcharts() {
|
var url = "/res/common/chartTemplat";
|
layer.open({
|
type: 2,
|
title: '图表',
|
id: 'zhoubian',
|
shadeClose: true,
|
shade: 0.7,
|
maxmin: false, //开启最大化最小化按钮
|
area: ['950px', '630px'],
|
content: url
|
});
|
}
|
|
</script>
|
</head>
|
<body>
|
<div id="rapp" layout:fragment="content" style="background-color: #fff;">
|
<div id="curtain"
|
style="position:fixed!important;z-index:100;width:100%;height:100%;opacity:0.7;bottom:70px;visibility:collapse;color:white;text-align:center;display:table;">
|
<div id="uploading"
|
style="height:100px;width:200px;background-color:black;color:white;margin:auto;text-align:center;font-size:larger;display:table-cell;vertical-align:middle">
|
上传中
|
</div>
|
</div>
|
<div id="div_content" style="width: 100%;">
|
<div class="tabbable tabbable-custom" id="divTabsView">
|
<div class="tab-content" id="divContent">
|
<div class="tab-pane active" id="tabContent" style="overflow-y: auto;">
|
<div class="row-fluid">
|
<div class="span12">
|
<!--BEGIN TABS-->
|
<div class="tabbable tabbable-custom">
|
<ul class="nav nav-tabs" role="tablist">
|
<li class="nav-item">
|
<a class="nav-link active" href="#tab_MainInfo" data-toggle="tab">
|
<div class="top_tabs_li">图表设置</div>
|
</a>
|
</li>
|
</ul>
|
<div class="tab-content" style="border-left: 1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<input type="hidden" id="resMainInfoId" th:value="${resourceid}"/>
|
<input type="hidden" id="jsonname" th:value="${jsonname}"/>
|
<div class="portlet box ltblue">
|
<div class="portlet-title">
|
图表设置信息
|
<div class="caption">
|
<i class="fa fa-reorder"></i>
|
</div>
|
<div class="tools">
|
<a class="collapse" onclick="portlet_body_ShowOrHide(this);"></a>
|
</div>
|
</div>
|
<div class="portlet-body" id="main_Div">
|
<div>
|
<div id="left_Div">
|
<div id="top_list">
|
<table id="listTable">
|
<thead>
|
<tr style="height: 35px;background-color: #ccc;">
|
<th class="list_name" style="width: 15%;">类型</th>
|
<th style="width: 85%;">
|
<table style="width: 100%;">
|
<thead>
|
<tr style="border: none;height: 35px;">
|
<th style="width: 25%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
标识
|
</th>
|
<th style="width: 55%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
说明
|
</th>
|
<th style="width: 20%;text-align: center;">
|
操作
|
</th>
|
</tr>
|
</thead>
|
</table>
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td class="list_name">常量<i class="fa fa-plus deledit" title="添加常量" onclick="showConfig('vars');"></i></td>
|
<td>
|
<table class="td_table">
|
<tbody>
|
<tr th:each="item:${varsList}">
|
<td style="width: 25%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
<span th:text="${item.key}"></span></td>
|
<td style="width: 55%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
<span th:text="${item.explain}"></span>
|
</td>
|
<td style="width: 20%;text-align: center">
|
<i class="fa fa-pencil-square-o deledit"
|
th:onclick="'javascript:showEditJson(\'' + ${item.key} + '\')'"
|
title="编辑"></i>
|
<i class="fa fa-trash-o deledit"
|
th:onclick="'javascript:delJson(\'' + ${item.key} + '\')'"
|
title="删除"></i>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</td>
|
</tr>
|
<tr>
|
<td class="list_name">表格<i class="fa fa-plus deledit" title="添加表格" onclick="showConfig('tables');"></i></td>
|
<td>
|
<table class="td_table">
|
<tbody>
|
<tr th:each="item:${tablesList}">
|
<td style="width: 25%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
<span th:text="${item.key}"></span></td>
|
<td style="width: 55%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
<span th:text="${item.explain}"></span>
|
</td>
|
<td style="width: 20%;text-align: center">
|
<i class="fa fa-pencil-square-o deledit"
|
th:onclick="'javascript:showEditJson(\'' + ${item.key} + '\')'"
|
title="编辑"></i>
|
<i class="fa fa-trash-o deledit"
|
th:onclick="'javascript:delJson(\'' + ${item.key} + '\')'"
|
title="删除"></i>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</td>
|
</tr>
|
<tr>
|
<td class="list_name">图表<i class="fa fa-plus deledit" title="添加图表" onclick="showConfig('charts');"></i></td>
|
<td>
|
<table class="td_table">
|
<tbody>
|
<tr th:each="item:${chartsList}">
|
<td style="width: 25%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
<span th:text="${item.key}"></span></td>
|
<td style="width: 55%;padding-left: 10px;border-right: 1px solid #e3e3e3;">
|
<span th:text="${item.explain}"></span>
|
</td>
|
<td style="width: 20%;text-align: center">
|
<i class="fa fa-pencil-square-o deledit"
|
th:onclick="'javascript:showEditJson(\'' + ${item.key} + '\')'"
|
title="编辑"></i>
|
<i class="fa fa-trash-o deledit"
|
th:onclick="'javascript:delJson(\'' + ${item.key} + '\')'"
|
title="删除"></i>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div id="bottom_Div">
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="control-group">
|
<div style="width: 98%;margin: auto;">
|
<!-- 加载编辑器的容器 -->
|
<script id="contents" name="contents" type="text/plain" class="col-sm-12" style="z-index: 0;"></script>
|
<p style="color:red;text-align: center;margin-top: 15px;">
|
注：可填写字段如下：
|
<span th:each="item:${varsList}"
|
th:text="'{'+${item.key}+'} |'"></span>
|
<span th:each="item:${tablesList}"
|
th:text="'{'+${item.key}+'} |'"></span>
|
<span th:each="item:${chartsList}"
|
th:text="'{'+${item.key}+'} |'"></span>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="form-actions navbar-fixed-bottom" style="z-index: 0;">
|
<div style="float: left;">
|
<button class="btn btn-primary" type="button" onclick="checkKey();">
|
<i class="fa fa-check"> </i> 保存
|
</button>
|
<input type="button" class="btn btn-primary" value="模板管理" onclick="OpenEcharts()" style="margin-left: 1px;"/>
|
<button class="btn btn-primary" type="button" onclick="OpenSheZhi()">
|
<i class="fa fa-check-square"> </i> 预览
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
