<!--
|
功能描述：后台管理 - 资源管理 - 资源发布 - 业务图层 - 图表设置 - 模板管理 - 新增页面
|
-->
|
<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" layout:decorator="MasterPage/Layout.Empty">
|
<head>
|
<meta charset="UTF-8" />
|
<title>模板管理 - 新增页面</title>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
|
<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} + 'media/js/jquery.form-3.51.0.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/validation/jquery.validate.min.js'}" type="text/javascript"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/validation/messages_zh.js'}" type="text/javascript"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/validation/additional-methods.min.js'}" type="text/javascript"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/yanzhen.js'}" type="text/javascript"></script>
|
<script src="/js/jsformat.js" type="text/javascript"></script>
|
<script src="/js/base.js" type="text/javascript"></script>
|
<style>
|
body {
|
background-color: white;
|
box-sizing: border-box;
|
overflow-x: hidden;
|
}
|
|
.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-8,
|
.col-sm-10,
|
.col-sm-12 {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
.fade {
|
display: none;
|
}
|
|
.in.fade {
|
display: block;
|
}
|
|
.control-group error {
|
border-color: #b94a48;
|
}
|
|
#button {
|
color: #fff !important;
|
background-color: #039cfd !important;
|
border-color: #039cfd !important;
|
}
|
|
img {
|
cursor: pointer;
|
}
|
|
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
|
color: #555;
|
cursor: default;
|
background-color: #fff;
|
border: 1px solid #ddd;
|
border-bottom-color: transparent;
|
}
|
|
.portlet {
|
margin-bottom: 70px !important;
|
}
|
</style>
|
</head>
|
<body layout:fragment="content">
|
<form class="form-horizontal" id="ShuJuYuan" method="post" xmlns:th="http://www.w3.org/1999/xhtml">
|
<input type="hidden" id="uploadRootPath" th:value="${uploadRootPath}"/>
|
<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">
|
<input type="hidden" id="echartsid" name="echartsid" th:value="${EchartsConfing.echartsid}" />
|
<div class="row">
|
<div class="col-sm-8">
|
<div class="control-group">
|
<label class="control-label">图表标题<span style="color: red;">*</span></label>
|
<div class="controls input-icon">
|
<input type="text" id="echartstitle" name="echartstitle" th:value="${EchartsConfing.echartstitle}" class="form-control col-sm-11" required="" maxchar="50" />
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="fa-warning-sign" style="display: none;margin-left:30px;"></i>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-8">
|
<div class="control-group">
|
<label class="control-label">图表图片<span style="color: red;">*</span></label>
|
<div class="controls input-icon">
|
<input id="echartsUrl" name="echartsUrl" class="form-control col-sm-7 date-picker" style="width: 77%;"
|
type="text" readonly="true" value="" required="" th:value="${EchartsConfing.echartsUrl}">
|
<input type="file" id="filepath" name="filepath" style="display: none; " onchange="uploadfile('filepath')"/>
|
<button type="button" class="btn btn-primary" style="vertical-align: top;" onclick="openDialog('filepath')">选择</button>
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="fa-warning-sign" style="display: none;margin-left:30px;"></i>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-8">
|
<div class="control-group">
|
<label class="control-label">图表类型<span style="color: red;">*</span></label>
|
<div class="controls input-icon">
|
<select id="echartstype" name="echartstype" class="form-control col-sm-11" required="" >
|
<option value="饼状图" th:selected="${EchartsConfing.echartstype=='饼状图'}">饼状图</option>
|
<option value="柱状图" th:selected="${EchartsConfing.echartstype=='柱状图'}">柱状图</option>
|
<option value="折线图" th:selected="${EchartsConfing.echartstype=='折线图'}">折线图</option>
|
</select>
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="fa-warning-sign" style="display: none;margin-left:30px;"></i>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-10">
|
<div class="control-group">
|
<label class="control-label">图表代码<span style="color: red;">*</span></label>
|
<div class="controls input-icon">
|
<textarea id="echartsoption" name="echartsoption" th:text="${EchartsConfing.echartsoption}" class="form-control col-sm-11" style="height: 200px;" required=""></textarea>
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="fa-warning-sign" style="display: none;margin-left:30px;"></i>
|
</span>
|
</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" id="addSave" type="button">
|
<i class="fa fa-check"></i> 保存
|
</button>
|
<button class="btn btn-warning" id="close" type="button">
|
<i class="fa fa-remove"></i> 关闭
|
</button>
|
</div>
|
</div>
|
</form>
|
|
<script>
|
$(function () {
|
cheackForm("ShuJuYuan");
|
if ($("#echartsoption").text() != "") {
|
do_js_beautify("echartsoption");
|
}
|
});
|
|
//格式化图表样式代码
|
function do_js_beautify(id) {
|
js_source = document.getElementById(id).value.replace(/^\s+/, '');
|
tabsize = 1;
|
tabchar = '\t';
|
document.getElementById(id).value = js_beautify(js_source, tabsize, tabchar);
|
return false;
|
}
|
|
//压缩图表样式代码，格式化后直接保存会出现换行等符号
|
function pack_js(base64, id) {
|
var input = document.getElementById(id).value.replace(/^\s+|\s+$/g, "");
|
var packer = new Packer;
|
if (base64) {
|
var output = packer.pack(input, 1, 0);
|
} else {
|
var output = packer.pack(input, 0, 0);
|
}
|
$("#" + id).val(output);
|
}
|
|
function openDialog(id){
|
document.getElementById(id).click();
|
}
|
function uploadfile(id){
|
if(document.getElementById(id).value!='') {
|
var formdata = new FormData();
|
var fileName = document.getElementById(id).value;
|
formdata.append("json_filesNameArray", fileName);
|
var files = document.getElementById(id).files;
|
for(var i=0; i< files.length; i++){
|
formdata.append("myFile",files[i]); // 文件对象
|
}
|
$.ajax({
|
url: "/res/common/uploadfile",
|
type: "POST",
|
data: formdata,
|
cache: false,
|
async: false,
|
processData: false, // 告诉jQuery不要去处理发送的数据
|
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
|
success: function (data) {
|
var json=eval('('+data+')');
|
if (json.result == '0') {
|
alert("上传失败");
|
}
|
else if(json.result == '3') {
|
alert("上传失败，此文件名已存在！");
|
}
|
else{
|
var names=json.Path;
|
$("#echartsUrl").val(names);
|
}
|
}
|
});
|
}
|
}
|
|
//保存
|
$('#addSave').on('click', function () {
|
if ($('#ShuJuYuan').valid()) {
|
pack_js(0, "echartsoption");
|
$('#ShuJuYuan').ajaxSubmit({
|
url: "/res/common/saveChartTemplat",
|
type: 'post',
|
dataType: 'text',
|
data: {},
|
success: function (data) {
|
var json = eval('('+data+')');
|
if (json.count == "1") {
|
alert("保存成功！");
|
window.parent.location.reload(); //刷新父页面
|
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
|
parent.layer.close(index);
|
} else {
|
alert("保存失败！");
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
} else {
|
// alert("您输入的信息存在错误，请更正后再提交！");
|
}
|
});
|
|
$("#close").on("click",function () {
|
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
|
parent.layer.close(index);
|
})
|
</script>
|
|
</body>
|
</html>
|
