smartchart/templates/echart/template_editor.html
JohnYan 135c5d24bb - 增加模板有变更未保存提示
- 增加数据集未保存高亮提示
- 增加数据集选择执行部分脚本
- 修复智能数据集转化BUG
- 优化保存模板重复提交的问题
2021-11-10 15:58:13 +08:00

123 lines
5.9 KiB
HTML

{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Template设计</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link rel="icon" type="image.png" href="/static/images/favicon.ico">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/editor/editor.css">
</head>
<body>
<div class="container_fluid">
<div class="row_fluid">
<div class="col-xs-12 col-md-7" style="padding:0.5% 0.5%;">
<div class="NightTheme">
<div id="main_container">
<div id="core" class="core core_margin1">
<div class="editorSet clearfix">
<div>
<div class="editor">
<span class="label" id="idtitle"></span>
<span class="devhead"><span class="glyphicon glyphicon-adjust" style="color: rgb(255, 140, 60);"></span>
<select id="ace-theme">
</select></span><a class="glyphicon glyphicon-import" href="#" onclick="insert_span()"
style="color: rgb(255, 140, 60);">图形</a><a class="glyphicon glyphicon-pencil" href="#" onclick="open_select('ds')"
style="color: rgb(122, 210, 60);">数据集</a><a class="glyphicon glyphicon-pencil" href="#" onclick="open_select('chart')"
style="color: rgb(122, 210, 60);">图形</a><a class="glyphicon glyphicon-pencil" href="#" onclick="open_select('div')"
style="color: rgb(122, 210, 60);">布局</a><a class="glyphicon glyphicon-refresh" href="#" onclick="window.opener.location.reload()"
style="color: rgb(98, 98, 198);">刷新</a><a class="submit-btn" id="submit">保存Template</a><span id="printlog" style="color:red"></span>
<a class="glyphicon glyphicon-question-sign" title="帮助" href="#"
style="color: rgb(155, 205, 60);float:right" onclick="load_help('help_template')"></a>
<a class="glyphicon glyphicon-certificate" title="开启实时调试" id="id_autohtml" href="#"
style="color: gray;float:right" onclick="auto_html()"></a>
<a class="glyphicon glyphicon-th" title="可视化布局" href="https://www.smartchart.cn/echart/layout/?id={{name}}"
style="color: green;float:right" target="_blank"></a>
<pre id="editor1" class="edit-area"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-5" style="padding:0.1% 0.1%;" id="preview">点击上方太阳标识可开启实时调试</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div class="modal fade" id="modal_iframe" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_name"
aria-hidden="true">
<iframe id="iframepage" class="iframechart" frameborder="0" scrolling="auto" width="100%"></iframe>
</div>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="/static/ace/ace.js"></script>
<script type="text/javascript" src="/static/ace/ext-language_tools.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/editor/common.js"></script>
<script type="text/javascript">
editor1=init_editor('html');
get_template_editor();
let autoshow = false;
let mflag = false;
let insubmit = false;
$('#submit').click(function () {
let e = editor1.getValue();
console.log(e);
if(insubmit){alert('已提交处理中,不要重复点击');return}
insubmit = true;
$.ajax({
type: "POST",
url: "/echart/save_template/",
data: {dashid: GetQueryString('dashid'), div: e},
success: function (data) {
console.log(data);
$('#printlog').html(data['msg']);
mflag=false;
insubmit = false;
if (GetQueryString('r')) {
try {
window.opener.location.reload();
// window.opener=null;window.close();
} catch (e) {
console.log('no opener');
}
}
}
});
});
editor1.getSession().on('change', function (e) {
if(autoshow){$("#preview").html(editor1.getValue());}
$("#printlog").html('');
mflag=true;
});
function auto_html() {
autoshow = !autoshow;
if(autoshow){$('#id_autohtml').css('color', 'red')}else{$('#id_autohtml').css('color', 'gray')}
}
function get_template_editor() {
$.ajax({
type: "GET",
url: "/echart/get_template_editor/?dashid=" + GetQueryString('dashid'),
async:false,
success: function (data) {
editor1.setValue(data['div_str'])
$('#idtitle').html(data['name']);
}
});
}
window.onbeforeunload= function(event) {if(mflag){return '你有修改'}}
</script>
</body>
</html>