370 lines
15 KiB
HTML
370 lines
15 KiB
HTML
{% load static %}
|
||
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>Ordered Bar Chart</title>
|
||
<link rel="stylesheet" href="{% static '/css/layui.css' %}">
|
||
<link rel="stylesheet" href="{% static '/css/mycss.css' %}">
|
||
|
||
</head>
|
||
<body>
|
||
<div class="layui-layout layui-layout-admin">
|
||
<div class="layui-header">
|
||
<div class="layui-logo layui-hide-xs layui-bg-black">Simple Drawing</div>
|
||
<ul class="layui-nav layui-layout-left">
|
||
|
||
<li class="layui-nav-item layui-hide-xs layui-this" style="margin-left: 200px"><a href="index.html">Home</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a
|
||
href="tools.html">Tools</a></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a href="about.html">About
|
||
us</a></li>
|
||
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart"></i></li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
{# 导航栏 #}
|
||
<div class="layui-side layui-bg-black">
|
||
<div class="layui-side-scroll">
|
||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||
<li class="layui-nav-item">
|
||
<button type="button" class="layui-btn" id="up_file" style="background-color: #393d49;">
|
||
<i class="layui-icon"></i>up_file
|
||
</button>
|
||
<button type="button" class="layui-btn" id="up_file" style="background-color: #393d49;">
|
||
<i class="layui-icon layui-icon-refresh-3" style="font-size: 20px; color: rgba(255,255,255,.7)"
|
||
onclick=run()></i>
|
||
</button>
|
||
</li>
|
||
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:">text</a>
|
||
<dl class="layui-nav-child">
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">title </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" name="title" id="title" lay-verify="required" value="title"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">size </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="title_size" lay-verify="required" value="12"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
</dl>
|
||
</li>
|
||
|
||
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:">downlode</a>
|
||
<dl class="layui-nav-child">
|
||
|
||
<dd>
|
||
<div class="layui-form-item color" style="margin-left: 0">
|
||
<label class="layui-form-label" style="float: left; margin-left: 0">Download
|
||
format</label>
|
||
<div class="layui-input-block">
|
||
<select class="layui-bg-black" id="file_downlode_type" lay-filter="aihao">
|
||
<option value="svg">SVG</option>
|
||
<option value="png">PNG</option>
|
||
<option value="pdf">PDF</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
<dd style="text-align: center">
|
||
<button type="button" class="layui-btn layui-btn-radius">
|
||
<i class="layui-icon layui-icon-download-circle"
|
||
style="width: 100px;font-size: 28px;left: 5px" onclick=down_file()></i>
|
||
</button>
|
||
</dd>
|
||
|
||
</dl>
|
||
</li>
|
||
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:">X-axis</a>
|
||
<dl class="layui-nav-child">
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">x ticks </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="xticks" lay-verify="required" value="100"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">x col </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="x_col" lay-verify="required" value="x_col"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">x label </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="xlabel" lay-verify="required" value="x_name"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
</dl>
|
||
</li>
|
||
|
||
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:">Y-axis</a>
|
||
<dl class="layui-nav-child">
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">y ticks </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="yticks" lay-verify="required" value="15"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">y col </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="y_col" lay-verify="required" value="y_col"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">y label </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="ylabel" lay-verify="required" value="y_name"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
</dl>
|
||
</li>
|
||
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:">Other</a>
|
||
<dl class="layui-nav-child">
|
||
|
||
<dd style="overflow: hidden">
|
||
<div class="color">
|
||
<label class="label_meg">color </label>
|
||
<div class="layui-input-inline" style="float: right">
|
||
<input type="text" id="color" lay-verify="required" value="4-8"
|
||
autocomplete="off" class="layui-input"
|
||
style="height: 25px; width:100px;margin-top: 6px">
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
</dl>
|
||
</li>
|
||
|
||
|
||
<li class="layui-nav-item NO "><a href="http://127.0.0.1:8000/chart/down?name={{ name }}.csv">downlode
|
||
eg
|
||
file</a></li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{# 主体 #}
|
||
<div class="layui-body" style="background-color: rgb(242, 242, 242);">
|
||
<div class="declare_box" id="img_box">
|
||
<img style="margin: 0 auto; height: 90%" src="/static/img_eg/example_chart/{{ img_path }}" alt="aa">
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="layui-footer">
|
||
<!-- 底部固定区域 -->
|
||
底部固定区域
|
||
</div>
|
||
</div>
|
||
|
||
<script src="{% static 'layui.js' %}"></script>
|
||
|
||
<!-- 侧边栏 -->
|
||
<script>
|
||
layui.use(['element', 'layer', 'util'], function () {
|
||
var element = layui.element
|
||
, layer = layui.layer
|
||
, util = layui.util
|
||
, $ = layui.$;
|
||
|
||
|
||
util.event('lay-header-event', {
|
||
|
||
menuLeft: function (othis) {
|
||
layer.msg('展开左侧菜单的操作', {icon: 0});
|
||
}
|
||
, menuRight: function () {
|
||
layer.open({
|
||
type: 1
|
||
, content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
|
||
, area: ['260px', '100%']
|
||
, offset: 'rt'
|
||
, anim: 5
|
||
, shadeClose: true
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
var f = 0;
|
||
var flag = '';
|
||
var $ = layui.jquery;
|
||
var col_name = []
|
||
var person = {}; // 存放
|
||
var k = 0;
|
||
var name = "";
|
||
|
||
|
||
// 加载框
|
||
function lodeing() {
|
||
layer.load(1);
|
||
setTimeout(function () {
|
||
});
|
||
}
|
||
|
||
|
||
// 处理文件 文件上传 返回分类列表
|
||
layui.use('upload', function () {
|
||
|
||
var upload = layui.upload;
|
||
|
||
var uploadInst = upload.render({
|
||
elem: '#up_file' //绑定元素
|
||
, url: 'http://127.0.0.1:8000/chart/up_file/' // 上传的路径
|
||
, accept: 'file' // 类型 可以控制上传文件的类型
|
||
// 支持附带上传参数
|
||
, data: {
|
||
col_name: 'NO',
|
||
csrfmiddlewaretoken: '{{ csrf_token }}' // 用于处理跨域访问
|
||
},
|
||
before: function (obj) {
|
||
lodeing() //上传 loading
|
||
}
|
||
, done: function (res) {
|
||
f = 1;
|
||
layer.closeAll('loading'); // 关闭加载
|
||
flag = res.flag; //确认编号
|
||
|
||
}
|
||
, error: function () {
|
||
layer.closeAll('loading');
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
function down_file() {
|
||
if (f === 1) {
|
||
window.location.href = "http://127.0.0.1:8000/chart/down?file_id=" + flag + "&file_downlode_type=" + document.getElementById("file_downlode_type").value;
|
||
} else {
|
||
alert("There is no input file yet！");
|
||
}
|
||
}
|
||
|
||
|
||
// 上传数据
|
||
function run() {
|
||
|
||
if (f === 1) {
|
||
lodeing();
|
||
$.ajax({
|
||
url: "http://127.0.0.1:8000/chart/{{ name }}",
|
||
cache: false,
|
||
data: {
|
||
title: (document.getElementById("title").value),
|
||
title_size: (document.getElementById("title_size").value),
|
||
xticks: (document.getElementById("xticks").value),
|
||
xlabel: (document.getElementById("xlabel").value),
|
||
yticks: (document.getElementById("yticks").value),
|
||
ylabel: (document.getElementById("ylabel").value),
|
||
file_id: flag,
|
||
x_col: (document.getElementById("x_col").value),
|
||
y_col: (document.getElementById("y_col").value),
|
||
color: (document.getElementById("color").value),
|
||
k: k,
|
||
},
|
||
success: function (res) {
|
||
k = k + 1;
|
||
$("#img_box").empty()
|
||
var L = '<img src="' + res.img + '" alt="aa" style="height: 90%">';
|
||
$("#img_box").prepend(L);
|
||
|
||
layer.closeAll('loading');
|
||
|
||
},
|
||
error: function () {
|
||
layer.closeAll('loading');
|
||
alert("fAIL")
|
||
|
||
}
|
||
})
|
||
|
||
} else {
|
||
|
||
alert("There is no input file yet！")
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |