Initial commit
This commit is contained in:
Your Name
@@ -0,0 +1,585 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0048)http://127.0.0.1:8000/chart/Correlation_Box.html -->
|
||||
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>Correlation Box</title>
|
||||
<link rel="stylesheet" href="/static/css/layui.css">
|
||||
<link rel="stylesheet" href="/static/css/mycss.css">
|
||||
|
||||
<link id="layuicss-laydate" rel="stylesheet" href="/static/css/modules/laydate/default/laydate.css" media="all"><link id="layuicss-layer" rel="stylesheet" href="./Correlation Box_files/layer.css" media="all"><link id="layuicss-skincodecss" rel="stylesheet" href="./Correlation Box_files/code.css" media="all"></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="http://127.0.0.1:8000/">Home</a>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a href="http://127.0.0.1:8000/chart/tools.html">Tools</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a href="http://127.0.0.1:8000/chart/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>
|
||||
|
||||
|
||||
<span class="layui-nav-bar"></span></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="upload" 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><input class="layui-upload-file" type="file" accept="" name="file">
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:">Basic settings<i class="layui-icon layui-icon-down layui-nav-more"></i></a>
|
||||
<dl class="layui-nav-child">
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label style="" class="label_meg"><b>lable </b></label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">X Name </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="text" id="x_name" lay-verify="required" value="X Name" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Y Name </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="text" id="y_name" lay-verify="required" value="Y Name" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">X Size </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="x_font_size" lay-verify="required" value="18" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Y Size </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="y_font_size" lay-verify="required" value="18" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">X Scale Size </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="x_scale_font_size" lay-verify="required" value="12" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">y scale size </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="y_scale_font_size" lay-verify="required" value="12" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">X Scale Angle </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="x_scale_font_angle" lay-verify="required" value="0" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Y Scale Angle </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="y_scale_font_angle" lay-verify="required" value="0" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label style="" class="label_meg"><b>title </b></label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Title </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="text" id="title" lay-verify="required" value="Title" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Subtitle </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="text" id="subtitle" lay-verify="required" value="subtitle" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Caption </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="text" id="caption" lay-verify="required" value="caption" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Title Size </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<input type="number" id="title_font_size" lay-verify="required" value="18" autocomplete="off" class="layui-input" min="0" max="999" style="height: 25px; width:80px;margin-top: 6px">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label style="" class="label_meg"><b>legend </b></label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Legend </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<select id="legend" lay-verify="required" value="F" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
<option value="TRUE">YES</option>
|
||||
<option value="FALSE">NO</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label style="" class="label_meg"><b>models </b></label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Model1 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<select id="model1" lay-verify="required" value="TRUE" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
<option value="TRUE">YES</option>
|
||||
<option value="FALSE">NO</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a href="javascript:">Advanced setting<i class="layui-icon layui-icon-down layui-nav-more"></i></a>
|
||||
<dl class="layui-nav-child">
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label style="" class="label_meg"><b>color </b></label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">X Color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<!--取色板代码-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Y Color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<!--取色板代码-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">X Scale Color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<!--取色板代码-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">y Scale Color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<!--取色板代码-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Title Color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<!--取色板代码-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Background Color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<!--取色板代码-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label style="" class="label_meg"><b>models </b></label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Model2 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<select id="model2" lay-verify="required" value="FALSE" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
<option value="TRUE">YES</option>
|
||||
<option value="FALSE">NO</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Model3 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<select id="model3" lay-verify="required" value="FALSE" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
<option value="TRUE">YES</option>
|
||||
<option value="FALSE">NO</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Model4 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<select id="model4" lay-verify="required" value="FALSE" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
<option value="TRUE">YES</option>
|
||||
<option value="FALSE">NO</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">Model5 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
|
||||
<select id="model5" lay-verify="required" value="FALSE" autocomplete="off" class="layui-input" style="height: 25px; width:80px;margin-top: 6px">
|
||||
<option value="TRUE">YES</option>
|
||||
<option value="FALSE">NO</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:">downlode<i class="layui-icon layui-icon-down layui-nav-more"></i></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 NO "><a href="http://127.0.0.1:8000/chart/down?name=Correlation_Box.csv">downlode eg file</a></li>
|
||||
|
||||
<span class="layui-nav-bar"></span></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="./Correlation Box_files/Correlation_Box.png" alt="show_img">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<remove-web-limits-iqxin id="rwl-iqxin" class="rwl-exempt" style="position: fixed; top: 96px; left: 0px;"><qxinbutton type="qxinbutton" id="rwl-setbtn"> set </qxinbutton> <lalala style="cursor:move; font-size:12px;">限制解除</lalala> <input type="checkbox" name="" id="black_node"><style type="text/css">#rwl-iqxin{position:fixed;transform:translate(-95px,0);width:85px;height:25px;font-size:12px;font-weight: 500;font-family:Verdana, Arial, '宋体';color:#fff;background:#333;z-index:2147483647;margin: 0;opacity:0.05;transition:0.3s;overflow:hidden;user-select:none;text-align:center;white-space:nowrap;line-height:25px;padding:0 16px;border:1px solid #ccc;border-width:1px 1px 1px 0;border-bottom-right-radius:5px;box-sizing: content-box;}#rwl-iqxin input{margin: 0;padding: 0;vertical-align:middle;-webkit-appearance:checkbox;-moz-appearance:checkbox;position: static;clip: auto;opacity: 1;cursor: pointer;}#rwl-iqxin.rwl-active-iqxin{left: 0px;transform:translate(0,0);opacity: 0.9;height: 32px;line-height: 32px}#rwl-iqxin label{margin:0;padding:0;font-weight:500;}#rwl-iqxin #rwl-setbtn{margin: 0 4px 0 0;padding: 0 0 0 4px;border: none;border-radius: 2px;cursor: pointer;background: #fff;color: #000;} </style></remove-web-limits-iqxin><script src="./Correlation Box_files/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 = 1; // 判断是否有文件加载
|
||||
var flag = '0'; // 返回工作id
|
||||
var $ = layui.jquery; // 加载jqury模块
|
||||
var k = 0; // 作业次数编号
|
||||
var url_ip = 'http://127.0.0.1:8000'; // 服务器的ip
|
||||
|
||||
|
||||
// 加载框
|
||||
function lodeing() {
|
||||
layer.load(1);
|
||||
setTimeout(function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 处理文件 文件上传 返回分类列表
|
||||
layui.use('upload', function () {
|
||||
|
||||
var upload = layui.upload;
|
||||
|
||||
var uploadInst = upload.render({
|
||||
elem: '#up_file' //绑定元素
|
||||
, url: url_ip + '/chart/up_file/' // 上传的路径
|
||||
, accept: 'file' // 类型 可以控制上传文件的类型
|
||||
// 支持附带上传参数
|
||||
, data: {
|
||||
csrfmiddlewaretoken: 'wVWy0w07uu8dcQfbwbHKkIgz4QvWcqqJBtwxNzSxFkESKUNOw7ndX3ui3HZA6UN0' // 用于处理跨域访问
|
||||
},
|
||||
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 = url_ip + "/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: url_ip + "/chart/Correlation_Box_run",
|
||||
cache: false,
|
||||
data: {
|
||||
file_id: flag,
|
||||
k: k,
|
||||
x_name: (document.getElementById("x_name").value),
|
||||
y_name: (document.getElementById("y_name").value),
|
||||
x_font_size: (document.getElementById("x_font_size").value),
|
||||
y_font_size: (document.getElementById("y_font_size").value),
|
||||
x_scale_font_size: (document.getElementById("x_scale_font_size").value),
|
||||
y_scale_font_size: (document.getElementById("y_scale_font_size").value),
|
||||
x_scale_font_angle: (document.getElementById("x_scale_font_angle").value),
|
||||
y_scale_font_angle: (document.getElementById("y_scale_font_angle").value),
|
||||
title: (document.getElementById("title").value),
|
||||
subtitle: (document.getElementById("subtitle").value),
|
||||
caption: (document.getElementById("caption").value),
|
||||
title_font_size: (document.getElementById("title_font_size").value),
|
||||
legend: (document.getElementById("legend").value),
|
||||
model1: (document.getElementById("model1").value),
|
||||
x_font_color: (document.getElementById("x_font_color").value),
|
||||
y_font_color: (document.getElementById("y_font_color").value),
|
||||
x_scale_font_color: (document.getElementById("x_scale_font_color").value),
|
||||
y_scale_font_color: (document.getElementById("y_scale_font_color").value),
|
||||
title_font_color: (document.getElementById("title_font_color").value),
|
||||
background_color: (document.getElementById("background_color").value),
|
||||
model2: (document.getElementById("model2").value),
|
||||
model3: (document.getElementById("model3").value),
|
||||
model4: (document.getElementById("model4").value),
|
||||
model5: (document.getElementById("model5").value),
|
||||
|
||||
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,256 @@
|
||||
{% 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>{{ title }}</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:">Basic settings</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{ Basics }}
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:">Advanced setting</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{ Senior }}
|
||||
</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 NO "><a href="{{ ex_file_url }}">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 = ''; // 返回工作id
|
||||
var $ = layui.jquery; // 加载jqury模块
|
||||
var k = 0; // 作业次数编号
|
||||
var url_ip = {{ url }}; // 服务器的ip
|
||||
|
||||
|
||||
// 加载框
|
||||
function lodeing() {
|
||||
layer.load(1);
|
||||
setTimeout(function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 处理文件 文件上传 返回分类列表
|
||||
layui.use('upload', function () {
|
||||
|
||||
var upload = layui.upload;
|
||||
|
||||
var uploadInst = upload.render({
|
||||
elem: '#up_file' //绑定元素
|
||||
, url: url_ip + '/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 = url_ip + "/chart/down?file_id=" + flag + "&file_downlode_type=" + document.getElementById("file_downlode_type").value;
|
||||
} else {
|
||||
alert("There is no input file yet！");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 上传数据 绘图与返回图片处理
|
||||
{{ js }}
|
||||
|
||||
function run() {
|
||||
|
||||
if (f === 1) {
|
||||
lodeing();
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:8000/chart/{{ name }}",
|
||||
cache: false,
|
||||
data: {
|
||||
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,
|
||||
color: (document.getElementById("color").value),
|
||||
size: (document.getElementById("size").value),
|
||||
weight: (document.getElementById("weight").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>
|
||||
@@ -0,0 +1,259 @@
|
||||
{% 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>{{ title }}</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="{{ url }}">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="upload" 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:">Basic settings</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{ Basics }}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:">Advanced setting</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{ Senior }}
|
||||
</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 NO "><a href={{ url }}/chart/down?name={{ example_file }}.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="{{ show_img }}" alt="show_img">
|
||||
|
||||
|
||||
</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 = 1; // 判断是否有文件加载
|
||||
var flag = '0'; // 返回工作id
|
||||
var $ = layui.jquery; // 加载jqury模块
|
||||
var k = 0; // 作业次数编号
|
||||
var url_ip = '{{ url }}'; // 服务器的ip
|
||||
|
||||
|
||||
// 加载框
|
||||
function lodeing() {
|
||||
layer.load(1);
|
||||
setTimeout(function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 处理文件 文件上传 返回分类列表
|
||||
layui.use('upload', function () {
|
||||
|
||||
var upload = layui.upload;
|
||||
|
||||
var uploadInst = upload.render({
|
||||
elem: '#up_file' //绑定元素
|
||||
, url: url_ip + '/chart/up_file/' // 上传的路径
|
||||
, accept: 'file' // 类型 可以控制上传文件的类型
|
||||
// 支持附带上传参数
|
||||
, data: {
|
||||
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 = url_ip + "/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: url_ip + "/chart/{{ name }}_run",
|
||||
cache: false,
|
||||
data: {
|
||||
file_id: flag,
|
||||
k: k,
|
||||
{{ js }}
|
||||
|
||||
},
|
||||
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！")
|
||||
}
|
||||
}
|
||||
|
||||
{{ color }}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
{% 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>{{ title }}</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:">Basic settings</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{ Basics }}
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:">Advanced setting</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{ Senior }}
|
||||
</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 NO "><a href="{{ ex_file_url }}">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 = ''; // 返回工作id
|
||||
var $ = layui.jquery; // 加载jqury模块
|
||||
var k = 0; // 作业次数编号
|
||||
var url_ip = {{ url }}; // 服务器的ip
|
||||
|
||||
|
||||
// 加载框
|
||||
function lodeing() {
|
||||
layer.load(1);
|
||||
setTimeout(function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 处理文件 文件上传 返回分类列表
|
||||
layui.use('upload', function () {
|
||||
|
||||
var upload = layui.upload;
|
||||
|
||||
var uploadInst = upload.render({
|
||||
elem: '#up_file' //绑定元素
|
||||
, url: url_ip + '/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 = url_ip + "/chart/down?file_id=" + flag + "&file_downlode_type=" + document.getElementById("file_downlode_type").value;
|
||||
} else {
|
||||
alert("There is no input file yet！");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 上传数据 绘图与返回图片处理
|
||||
{{ js }}
|
||||
|
||||
function run() {
|
||||
|
||||
if (f === 1) {
|
||||
lodeing();
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:8000/chart/{{ name }}",
|
||||
cache: false,
|
||||
data: {
|
||||
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,
|
||||
color: (document.getElementById("color").value),
|
||||
size: (document.getElementById("size").value),
|
||||
weight: (document.getElementById("weight").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>
|
||||
@@ -0,0 +1,356 @@
|
||||
{% 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>Diverging Bars</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="#fce7c5"
|
||||
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 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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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),
|
||||
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>
|
||||
@@ -0,0 +1,356 @@
|
||||
{% 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>Diverging Bars vertical</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 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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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),
|
||||
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>
|
||||
@@ -0,0 +1,433 @@
|
||||
{% 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>Dot Plot</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">mark color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<div style="margin-left: 30px;">
|
||||
|
||||
<div id="test2" style="margin-left: 30px; display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">dot color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<div style="margin-left: 30px;">
|
||||
|
||||
<div id="test1" style="margin-left: 30px; display: inline-block"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</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！");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var color_list = ["#2ec770",'#2ec770'] // 保存颜色
|
||||
|
||||
|
||||
// 上传数据
|
||||
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),
|
||||
color1: (document.getElementById("color1").value),
|
||||
color2: (document.getElementById("color2").value),
|
||||
k: k,
|
||||
color: (color_list.join("-"))
|
||||
},
|
||||
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！")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var $ = layui.$
|
||||
, colorpicker = layui.colorpicker;
|
||||
|
||||
|
||||
//初始色值
|
||||
colorpicker.render({
|
||||
elem: '#color2'
|
||||
, color: '#2ec770' //设置默认色
|
||||
, size: "xs" // 大小
|
||||
, done: function (color) {
|
||||
// 选择颜色后的操作
|
||||
color_list[0] = color
|
||||
layer.tips('选择了：' + color, this.elem);
|
||||
}
|
||||
});
|
||||
|
||||
colorpicker.render({
|
||||
elem: '#test1'
|
||||
, color: '#2ec770' //设置默认色
|
||||
, size: "xs"
|
||||
, done: function (color) {
|
||||
color_list[1] = color
|
||||
layer.tips('选择了：' + color, this.elem);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,326 @@
|
||||
{% 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>Dumbbell Plot</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:">axis</a>
|
||||
<dl class="layui-nav-child">
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">col 1 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="col1" lay-verify="required" value="pct_2014"
|
||||
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">col 2 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="col2" lay-verify="required" value="pct_2013"
|
||||
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="x_name"
|
||||
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 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,
|
||||
col1: (document.getElementById("col1").value),
|
||||
col2: (document.getElementById("col2").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>
|
||||
@@ -0,0 +1,382 @@
|
||||
{% 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>Each regression line in its own column</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="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 label </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="xlabel" lay-verify="required" value="100"
|
||||
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="hwy"
|
||||
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">range_column </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="range_column" lay-verify="required" value="cyl"
|
||||
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">range_data </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="range_data" 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=scatter_plot.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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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/Each_regression_line_in_its_own_column",
|
||||
cache: false,
|
||||
data: {
|
||||
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,
|
||||
range_column: (document.getElementById("range_column").value),
|
||||
range_data: (document.getElementById("range_data").value),
|
||||
x_col: (document.getElementById("x_col").value),
|
||||
y_col: (document.getElementById("y_col").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>
|
||||
@@ -0,0 +1,355 @@
|
||||
{% 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>Jittering with stripplot</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="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 label </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="xlabel" lay-verify="required" value="100"
|
||||
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="hwy"
|
||||
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 NO "><a href="http://127.0.0.1:8000/chart/down?name=Jittering_with_stripplot.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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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/Jittering_with_stripplot",
|
||||
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),
|
||||
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>
|
||||
@@ -0,0 +1,370 @@
|
||||
{% 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>Lollipop 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>
|
||||
@@ -0,0 +1,356 @@
|
||||
{% 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>Marginal Boxplot</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 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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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),
|
||||
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>
|
||||
@@ -0,0 +1,383 @@
|
||||
{% 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>Marginal Histogram</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">x_color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="x_color" lay-verify="required" value="#098154"
|
||||
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_color </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="y_color" lay-verify="required" value="#098154"
|
||||
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=scatter_plot.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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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_color: (document.getElementById("x_color").value),
|
||||
y_color: (document.getElementById("y_color").value),
|
||||
x_col: (document.getElementById("x_col").value),
|
||||
y_col: (document.getElementById("y_col").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>
|
||||
@@ -0,0 +1,370 @@
|
||||
{% 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>
|
||||
@@ -0,0 +1,289 @@
|
||||
{% 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>Pairwise Plot</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:">Other</a>
|
||||
<dl class="layui-nav-child">
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">features </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="features" 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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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_size: (document.getElementById("title_size").value),
|
||||
title:(document.getElementById("title").value),
|
||||
features: (document.getElementById("features").value),
|
||||
file_id: flag,
|
||||
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>
|
||||
@@ -0,0 +1,383 @@
|
||||
{% 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>Scatter plot with linear regression line_of best fit</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="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 label </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="xlabel" lay-verify="required" value="100"
|
||||
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="hwy"
|
||||
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">range_column </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="range_column" lay-verify="required" value="cyl"
|
||||
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">range_data </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="range_data" 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=scatter_plot.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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
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/Scatter_plot_with_linear_regression_line_of_best_fit",
|
||||
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,
|
||||
range_column: (document.getElementById("range_column").value),
|
||||
range_data: (document.getElementById("range_data").value),
|
||||
x_col: (document.getElementById("x_col").value),
|
||||
y_col: (document.getElementById("y_col").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>
|
||||
@@ -0,0 +1,338 @@
|
||||
{% 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>Slope 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:">axis</a>
|
||||
<dl class="layui-nav-child">
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">group </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="col1" lay-verify="required" value="continent"
|
||||
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">after_col </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="col2" lay-verify="required" value="1957"
|
||||
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">beform </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="col3" lay-verify="required" value="1952"
|
||||
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="x_name"
|
||||
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 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,
|
||||
col1: (document.getElementById("col1").value),
|
||||
col2: (document.getElementById("col2").value),
|
||||
col3: (document.getElementById("col3").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>
|
||||
@@ -0,0 +1,355 @@
|
||||
{% 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>Stacked_Histogram_for_Continuous_Variable</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">groupby 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 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),
|
||||
color1: (document.getElementById("color1").value),
|
||||
color2: (document.getElementById("color2").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>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layout 管理系统大布局 - Layui</title>
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header">
|
||||
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
|
||||
<!-- 头部区域（可配合layui 已有的水平导航） -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<!-- 移动端显示 -->
|
||||
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
|
||||
<i class="layui-icon layui-icon-spread-left"></i>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">nav groups</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="">menu 11</a></dd>
|
||||
<dd><a href="">menu 22</a></dd>
|
||||
<dd><a href="">menu 33</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
|
||||
<a href="javascript:;">
|
||||
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
|
||||
class="layui-nav-img">
|
||||
tester
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="">Your Profile</a></dd>
|
||||
<dd><a href="">Settings</a></dd>
|
||||
<dd><a href="">Sign out</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
|
||||
<a href="javascript:;">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a class="" href="javascript:;">menu group 1</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">menu 1</a></dd>
|
||||
<dd><a href="javascript:;">menu 2</a></dd>
|
||||
<dd><a href="javascript:;">menu 3</a></dd>
|
||||
<dd><a href="">the links</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">menu group 2</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">list 1</a></dd>
|
||||
<dd><a href="javascript:;">list 2</a></dd>
|
||||
<dd><a href="">超链接</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
|
||||
<li class="layui-nav-item"><a href="">the links</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-body">
|
||||
<!-- 内容主体区域 -->
|
||||
<div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
//JS
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,489 @@
|
||||
{% 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>Scatter plot</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:">颜色</a>
|
||||
<dl class="layui-nav-child" id="color_list">
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd0">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="0"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color0" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd1">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="1"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color1" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd2">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="2"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color2" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd3">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="3"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color3" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd4">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="4"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color4" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd5">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="5"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color5" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd6">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="6"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color6" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd class="hide" style="height: 50px" id="dd7">
|
||||
<div class="color" style="margin-left: 20px; margin-right: 20px"><h4 id="7"
|
||||
style="display: inline-block;"></h4>
|
||||
<div id="color7" style="display: inline-block; float: right"></div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:">文字</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 label </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="xlabel" lay-verify="required" value="100"
|
||||
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="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">y label </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="ylabel" lay-verify="required" value="100"
|
||||
autocomplete="off" class="layui-input"
|
||||
style="height: 25px; width:100px;margin-top: 6px">
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="layui-nav-item">
|
||||
|
||||
</li>
|
||||
<li class="NO layui-nav-item layui-nav-child" style="background-color:#393d49;"><a href="http://127.0.0.1:8000/chart/down?name=scatter_plot.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 src="/static/img_eg/example_chart/scatter_plot.png" alt="aa" style="height: 90%">
|
||||
|
||||
|
||||
</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 color_name_list = []; // 保存所有的颜色
|
||||
var col_name = []
|
||||
var color_str = "" // 颜色的文本框
|
||||
var person = {}; // 存放
|
||||
var k = 0;
|
||||
var name = "";
|
||||
|
||||
// 参数上传 颜色回调
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color0' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[0] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color1' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[1] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color2' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[2] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color3' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[3] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color4' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[4] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color5' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[5] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color6' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[6] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use('colorpicker', function () {
|
||||
var colorpicker = layui.colorpicker;
|
||||
colorpicker.render({
|
||||
elem: '#color7' //绑定元素
|
||||
, change: function (color) {
|
||||
color_name_list[7] = color;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 加载框
|
||||
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: 'color',
|
||||
csrfmiddlewaretoken: '{{ csrf_token }}' // 用于处理跨域访问
|
||||
},
|
||||
before: function (obj) {
|
||||
lodeing() //上传 loading
|
||||
}
|
||||
, done: function (res) {
|
||||
f = 1;
|
||||
layer.closeAll('loading'); // 关闭加载
|
||||
flag = res.flag; //确认编号
|
||||
|
||||
// 执行回调函数 处理循环
|
||||
layui.each(res.data, function (index, item) {
|
||||
col_name[index] = item.name;
|
||||
document.getElementById("dd" + index).className = "show_out";
|
||||
$("#" + index).prepend(item.title);
|
||||
});
|
||||
|
||||
}
|
||||
, error: function () {
|
||||
layer.closeAll('loading');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function down_file() {
|
||||
if (f===1) {
|
||||
window.location.href = "http://127.0.0.1:8000/chart/downlode?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/scatter_plot",
|
||||
cache: false,
|
||||
data: {
|
||||
color_list: color_str,
|
||||
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,
|
||||
col_name: (col_name.join(',')),
|
||||
color_name_list: (color_name_list.join(',')),
|
||||
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>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,288 @@
|
||||
{% 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>Simple Drawing</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" style="margin-left: 200px"><a href="{{ url }}">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 layui-this" 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">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item layui-hide-xs" onclick="select_1()" id="brief_introduction"><a>brief
|
||||
introduction</a>
|
||||
</li>
|
||||
<hr class="layui-border-black">
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs" onclick="select_2()" id="Leaving_a_message"><a>Leaving
|
||||
a message</a>
|
||||
</li>
|
||||
<hr class="layui-border-black">
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs" onclick="select_3()" id="Declare"><a>Declare</a>
|
||||
</li>
|
||||
<hr class="layui-border-black">
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs" onclick="select_4()" id="Timeline"><a>Timeline</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-body" style="background-color: rgb(242, 242, 242);">
|
||||
|
||||
|
||||
{# // 介绍#}
|
||||
<div class="BriefIntroduction_box" id="BriefIntroduction_box">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{# // 留言#}
|
||||
<div class="LeavingAessage_box" id="LeavingAessage_box">
|
||||
<div class="input_text">
|
||||
<textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="message"></textarea>
|
||||
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="send()">立即提交</button>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="message_box" id="message_box" style="overflow:auto;height: 55%;">
|
||||
<div id="message_text">
|
||||
<hr>
|
||||
<br>
|
||||
<div id="icon">
|
||||
<i class="layui-icon layui-icon-form"></i> 
|
||||
</div>
|
||||
|
||||
<div id="text">This is a message to celebrate the completion of the front page
|
||||
</div>
|
||||
<br>
|
||||
<h4>2020-06-27</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{# 时间线#}
|
||||
<div class="timeline_box" id='timeline_box'>
|
||||
<div class="line_box">
|
||||
|
||||
<ul class="layui-timeline">
|
||||
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">2021-6-28</h3>
|
||||
<p>
|
||||
前端页面制作完成
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">2021-5</h3>
|
||||
<p> 确定项目开始设计制作
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">2020-10</h3>
|
||||
<p>
|
||||
产生想法开始搜集学习相关内容
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">过去</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{# // 开源协议#}
|
||||
<div class="declare_box" id="declare_box">
|
||||
<blockquote class="layui-elem-quote" style="margin: 40px 50px 0 50px">
|
||||
1. <a href="https://gitee.com/sentsin/layui">使用layUI组件</a>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="{% static 'layui.js' %}"></script>
|
||||
|
||||
|
||||
<script>
|
||||
var $ = layui.jquery;
|
||||
|
||||
// 加载框
|
||||
function lodeing() {
|
||||
layer.load(1);
|
||||
setTimeout(function () {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 留言发送与获取
|
||||
function send() {
|
||||
var data = document.getElementById("message").value
|
||||
lodeing()
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:8000/message",
|
||||
data: {
|
||||
"message": data
|
||||
},
|
||||
success: function (res) {
|
||||
layer.closeAll('loading'); // 关闭加载
|
||||
|
||||
var L = '<div id="message_text"><hr><br><div id="icon"><i class="layui-icon ' + res.icon + '"></i> </div><div id="text">' + res.data + '</div><br><h4>' + res.time + '</h4></div>';
|
||||
$("#message_box").prepend(L);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:8000/message",
|
||||
data: {
|
||||
get_break: 1
|
||||
},
|
||||
success: function (res) {
|
||||
|
||||
layui.each(res.data, function (index, item) {
|
||||
var L = '<div id="message_text"><hr><br><div id="icon"><i class="layui-icon ' + item.icon + '"></i> </div><div id="text">' + item.data + '</div><br><h4>' + item.time + '</h4></div>';
|
||||
$("#message_box").prepend(L);
|
||||
});
|
||||
|
||||
}
|
||||
})
|
||||
;
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function select_1() {
|
||||
|
||||
document.getElementById("BriefIntroduction_box").className = "BriefIntroduction_box";
|
||||
document.getElementById("LeavingAessage_box").className = "hide";
|
||||
document.getElementById("declare_box").className = "hide";
|
||||
document.getElementById("timeline_box").className = "hide";
|
||||
|
||||
|
||||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs ";
|
||||
document.getElementById("brief_introduction").className = "layui-nav-item layui-hide-xs layui-this";
|
||||
document.getElementById("Declare").className = "layui-nav-item layui-hide-xs";
|
||||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs";
|
||||
|
||||
|
||||
}
|
||||
|
||||
function select_2() {
|
||||
document.getElementById("BriefIntroduction_box").className = "hide";
|
||||
document.getElementById("LeavingAessage_box").className = "LeavingAessage_box";
|
||||
document.getElementById("declare_box").className = "hide";
|
||||
document.getElementById("timeline_box").className = "hide";
|
||||
|
||||
document.getElementById("brief_introduction").className = "layui-nav-item layui-hide-xs ";
|
||||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs layui-this";
|
||||
document.getElementById("Declare").className = "layui-nav-item layui-hide-xs";
|
||||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs";
|
||||
}
|
||||
|
||||
function select_3() {
|
||||
document.getElementById("BriefIntroduction_box").className = "hide";
|
||||
document.getElementById("LeavingAessage_box").className = "hide";
|
||||
document.getElementById("declare_box").className = "declare_box";
|
||||
document.getElementById("timeline_box").className = "hide";
|
||||
|
||||
document.getElementById("declare").className = "layui-nav-item layui-hide-xs layui-this";
|
||||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs";
|
||||
document.getElementById("Drief_introduction").className = "layui-nav-item layui-hide-xs";
|
||||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs";
|
||||
}
|
||||
|
||||
function select_4() {
|
||||
document.getElementById("BriefIntroduction_box").className = "hide";
|
||||
document.getElementById("LeavingAessage_box").className = "hide";
|
||||
document.getElementById("declare_box").className = "hide";
|
||||
document.getElementById("timeline_box").className = "timeline_box";
|
||||
|
||||
document.getElementById("declare").className = "layui-nav-item layui-hide-xs ";
|
||||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs";
|
||||
document.getElementById("Drief_introduction").className = "layui-nav-item layui-hide-xs";
|
||||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs layui-this";
|
||||
}
|
||||
|
||||
|
||||
select_1()
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
{% 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>Simple Drawing</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>
|
||||
|
||||
<!-- 头部区域（可配合layui 已有的水平导航） -->
|
||||
|
||||
<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: 150px"><i class="layui-icon layui-icon-search"></i></li>
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 10px">
|
||||
|
||||
<input type="text" placeholder="Search" name="search" onkeydown="entersearch()" data-toggle="search"
|
||||
id="search" class="layui-input"/>
|
||||
</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 NO "><a onclick=ALL()>ALL</a></li>
|
||||
<li class="layui-nav-item NO "><a onclick=Scatter()>Scatter plot</a></li>
|
||||
<li class="layui-nav-item NO "><a href="">Line chart</a></li>
|
||||
<li class="layui-nav-item NO "><a href="">Pie chart</a></li>
|
||||
<li class="layui-nav-item NO "><a href="">Histogram</a></li>
|
||||
<li class="layui-nav-item NO "><a href="">Heat map</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-body">
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row" id="LAY_demo1">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
</div>
|
||||
</div>
|
||||
<script src="{% static 'layui.js' %}"></script>
|
||||
<script>
|
||||
//JS
|
||||
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 a = "all";
|
||||
var $ = layui.jquery;
|
||||
layui.use('flow', function () {
|
||||
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
|
||||
var flow = layui.flow;
|
||||
flow.load({
|
||||
elem: '#LAY_demo1' //指定列表容器
|
||||
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
|
||||
var lis = [];
|
||||
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
|
||||
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
|
||||
//假设你的列表返回在data集合中
|
||||
layui.each(res.data, function (index, item) {
|
||||
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
|
||||
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
|
||||
});
|
||||
|
||||
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next(lis.join(''), page < res.pages);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function Scatter() {
|
||||
$("#LAY_demo1").empty();
|
||||
a = "Scatter";
|
||||
layui.use('flow', function () {
|
||||
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
|
||||
var flow = layui.flow;
|
||||
flow.load({
|
||||
elem: '#LAY_demo1' //指定列表容器
|
||||
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
|
||||
var lis = [];
|
||||
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
|
||||
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
|
||||
//假设你的列表返回在data集合中
|
||||
layui.each(res.data, function (index, item) {
|
||||
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
|
||||
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
|
||||
});
|
||||
|
||||
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next(lis.join(''), page < res.pages);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function ALL() {
|
||||
$("#LAY_demo1").empty();
|
||||
a = "all";
|
||||
layui.use('flow', function () {
|
||||
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
|
||||
var flow = layui.flow;
|
||||
flow.load({
|
||||
elem: '#LAY_demo1' //指定列表容器
|
||||
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
|
||||
var lis = [];
|
||||
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
|
||||
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
|
||||
//假设你的列表返回在data集合中
|
||||
layui.each(res.data, function (index, item) {
|
||||
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
|
||||
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center; display: block; padding:30px">' + item.name + '</h3></a></div></div></div>');
|
||||
});
|
||||
|
||||
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next(lis.join(''), page < res.pages);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function search() {
|
||||
$keyword = $("#keyword").val();
|
||||
window.location.href = "/list-0-0-0-0-" + $keyword + "-0-0-1.html";
|
||||
}
|
||||
|
||||
|
||||
function entersearch() {
|
||||
//alert(dd);
|
||||
var event = window.event || arguments.callee.caller.arguments[0];
|
||||
if (event.keyCode == 13) {
|
||||
alert("ffff")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
{#'<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br><a href="' + item.url + '"><h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>'#}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
{% load static %}
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="{% static '/css/layui.css' %}">
|
||||
<link rel="stylesheet" href="{% static '/css/mycss.css' %}">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input oninput = "value=value.replace(/[^\d]/g,'').slice(0,3)">
|
||||
<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" style="font-size: 20px">title </label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg" style="font-size: 20px">a </label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">3 </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="3" lay-verify="required" value="3"
|
||||
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">fsafa </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="fsafa" lay-verify="required" value="fafa"
|
||||
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" style="font-size: 20px">4 </label>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
|
||||
<dd style="overflow: hidden">
|
||||
<div class="color">
|
||||
<label class="label_meg">fsafa </label>
|
||||
<div class="layui-input-inline" style="float: right">
|
||||
<input type="text" id="fsafa" lay-verify="required" value="fafa"
|
||||
autocomplete="off" class="layui-input"
|
||||
style="height: 25px; width:100px;margin-top: 6px">
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
|
||||
进程已结束，退出代码为 0
|
||||
|
||||
|
||||
<dd style="overflow: hidden;">
|
||||
<div class="color">
|
||||
<div class="layui-input-inline" style="width: 90px; height: 20px">
|
||||
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
|
||||
</div>
|
||||
<div class="layui-inline ">
|
||||
<div id="test-form"></div>
|
||||
</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 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 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 NO "><a href="http://127.0.0.1:8000/chart/down?name={{ name }}.csv">downlode
|
||||
eg
|
||||
file</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
<script src="{% static 'layui.js' %}"></script>
|
||||
|
||||
<script>
|
||||
layui.use('colorpicker', function () {
|
||||
var $ = layui.$
|
||||
, colorpicker = layui.colorpicker;
|
||||
|
||||
colorpicker.render({
|
||||
elem: '#test-form'
|
||||
, color: '#1c97f5'
|
||||
, size: 'xs'
|
||||
, done: function (color) {
|
||||
$('#test-form-input').val(color);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>upload模块快速使用</title>
|
||||
<link rel="stylesheet" href="/static/css/layui.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button type="button" class="layui-btn" id="test1">
|
||||
<i class="layui-icon"></i>上传文件
|
||||
</button>
|
||||
|
||||
|
||||
<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">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:90px;margin-top: 6px">
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
|
||||
<script src="/static/layui.js"></script>
|
||||
<script>
|
||||
layui.use('upload', function () {
|
||||
var upload = layui.upload;
|
||||
|
||||
//执行实例
|
||||
var uploadInst = upload.render({
|
||||
elem: '#test1' //绑定元素
|
||||
, url: '/upload/' //上传接口,accept: 'file'
|
||||
, accept: 'file'
|
||||
, data: {}
|
||||
|
||||
, done: function (res) {
|
||||
|
||||
//上传完毕回调
|
||||
}
|
||||
, error: function () {
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,292 @@
|
||||
{% 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>Simple Drawing</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>
|
||||
<!-- 头部区域（可配合layui 已有的水平导航） -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a href="{{ url }}">Home</a></li>
|
||||
<li class="layui-nav-item layui-hide-xs layui-this" 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-search"></i></li>
|
||||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 10px">
|
||||
|
||||
<input type="text" placeholder="Search " name="search" onkeydown="entersearch()" data-toggle="search"
|
||||
id="search" class="layui-input"/>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item">
|
||||
<a class="" href="javascript:;">Basics</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a onclick=blast()>blast</a></dd>
|
||||
<dd><a onclick=genbank_to_fasta()>genbank to fasta</a></dd>
|
||||
<dd><a onclick=gff_to_gtf()>gff to gtf</a></dd>
|
||||
<dd><a onclick=orf()>orf</a></dd>
|
||||
<dd><a onclick=Basics()>序列基础</a></dd>
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">Gene Family</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a onclick=pfam()>pfam</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">Omics</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;" onclick=Differential_expression_analysis()>Differential expression
|
||||
analysis</a></dd>
|
||||
<dd><a href="javascript:;" onclick=GO()>GO 富集</a></dd>
|
||||
<dd><a href="javascript:;" onclick=kegg()>kegg富集</a></dd>
|
||||
<dd><a href="javascript:;" onclick=fastqc()>fastqc</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-body" style="background-color: rgb(242, 242, 242);">
|
||||
|
||||
<div class="declare_box" id="main_show">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
底部固定区域
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="{% static 'layui.js' %}"></script>
|
||||
<script>
|
||||
//JS
|
||||
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 $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
var url_up = 'http://127.0.0.1:8000/'
|
||||
|
||||
|
||||
// 页面跳转加载函数
|
||||
|
||||
function blast() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/blast.html' %}`)
|
||||
up_file_blast()
|
||||
form.render();
|
||||
}
|
||||
|
||||
function genbank_to_fasta() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/genbank_to_fasta.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
function gff_to_gtf() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/gff_to_gtf.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
function orf() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/orf.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
function Basics() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/Basics.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
// 基因家族功能
|
||||
function pfam() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/pfam.html' %}`)
|
||||
form.render();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 组学
|
||||
function Differential_expression_analysis() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/Differential_expression_analysis.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
function GO() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/GO.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
function kegg() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/kegg.html' %}`)
|
||||
form.render();
|
||||
}
|
||||
|
||||
function fastqc() {
|
||||
temp = $('#main_show')
|
||||
temp.empty()
|
||||
temp.append(String.raw`{% include 'tools/fastqc.html' %}`)
|
||||
up_file("select_file", {})
|
||||
form.render();
|
||||
}
|
||||
|
||||
// 加载等待动画
|
||||
function lodeing() {
|
||||
layer.load(1);
|
||||
setTimeout(function () {
|
||||
});
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
function up_file(tools_type, in_data) {
|
||||
layui.use(['upload'], function () {
|
||||
var $ = layui.jquery
|
||||
, upload = layui.upload
|
||||
, element = layui.element
|
||||
, layer = layui.layer;
|
||||
//选完文件后不自动上传["select_file1","select_file1","blast"], {}
|
||||
upload.render({
|
||||
elem: '#select_file1'
|
||||
, url: url_up + 'tools/' + tools_type
|
||||
, auto: false
|
||||
, accept: 'file'
|
||||
, field: "file1"
|
||||
, data: {
|
||||
csrfmiddlewaretoken: '{{ csrf_token }}'
|
||||
, file_type: 1
|
||||
}
|
||||
, bindAction: '#run'
|
||||
, done: function (res) {
|
||||
layer.msg('上传成功');
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// 两文件上传
|
||||
|
||||
function up_file_blast(tools_type, in_data) {
|
||||
layui.use(['upload'], function () {
|
||||
var $ = layui.jquery
|
||||
, upload = layui.upload
|
||||
, element = layui.element
|
||||
, layer = layui.layer;
|
||||
//选完文件后不自动上传
|
||||
upload.render({
|
||||
elem: '#select_file2'
|
||||
, url: url_up + 'tools/blast'
|
||||
, auto: false
|
||||
, accept: 'file'
|
||||
, field: "file2"
|
||||
, data: {
|
||||
csrfmiddlewaretoken: '{{ csrf_token }}'
|
||||
, file_type: 2
|
||||
, type : $("#quiz1").val()
|
||||
, e : $("#e").val()
|
||||
}
|
||||
, bindAction: '#run'
|
||||
, done: function (res) {
|
||||
layer.msg('上传成功');
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
layui.use(['upload'], function () {
|
||||
var $ = layui.jquery
|
||||
, upload = layui.upload
|
||||
, element = layui.element
|
||||
, layer = layui.layer;
|
||||
//选完文件后不自动上传
|
||||
upload.render({
|
||||
elem: '#select_file1'
|
||||
, url: url_up + 'tools/tools'
|
||||
, auto: false
|
||||
, accept: 'file'
|
||||
, field: "file1"
|
||||
, data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
|
||||
, bindAction: '#id_transform_run'
|
||||
, done: function (res) {
|
||||
layer.msg('上传成功');
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">Basics</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin: 80px;margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
<div class="layui-input-block layui-form" style="margin: 10px">
|
||||
<input type="checkbox" name="" title="序列清洗">
|
||||
<input type="checkbox" name="" title="序列长度">
|
||||
<input type="checkbox" name="" title="GC含量">
|
||||
<input type="checkbox" name="" title="序列翻转">
|
||||
<input type="checkbox" name="" title="反向互补">
|
||||
<input type="checkbox" name="" title="密码子偏好性">
|
||||
<input type="checkbox" name="" title="密码子频率">
|
||||
<input type="checkbox" name="" title="开放阅读框">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px;margin-top: 20px">
|
||||
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>运行</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md9'>
|
||||
<h1 style="font-size: 50px">Differential expression analysis</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>counts文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>分组文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>对比文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,67 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md9'>
|
||||
<h1 style="font-size: 50px">GO 富集</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>数据库文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>差异表达文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>参数</legend>
|
||||
</fieldset>
|
||||
<div class="layui-form-item layui-form layui-form-pane" pane>
|
||||
<label class="layui-form-label">logFC阈值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="logFC" id="logFC" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">FDR阈值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="FDR" id="FDR" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">GO分类</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="GO_s">
|
||||
<option value="BP" selected>BP</option>
|
||||
<option value="CC">CC</option>
|
||||
<option value="MF" selected>MF</option>
|
||||
<option value="ALL">ALL</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">Blast</h1>
|
||||
</div>
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>建库文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file1">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px">
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>对比文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file2">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>参数</legend>
|
||||
</fieldset>
|
||||
<div class="layui-form-item layui-form layui-form-pane" pane>
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz1">
|
||||
<option value="blastp" selected>blastp</option>
|
||||
<option value="blastn">blastn</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">e value</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" id = "e" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md9'>
|
||||
<h1 style="font-size: 50px">fastqc</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>检测的文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>参数</legend>
|
||||
</fieldset>
|
||||
<div class="layui-form-item layui-form layui-form-pane" pane>
|
||||
<label class="layui-form-label">最小长度</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="logFC" id="logFC" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">genbank to fasta</h1>
|
||||
</div>
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>fasta 文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||||
<legend>运行</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">gff to gtf</h1>
|
||||
</div>
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>gff 文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||||
<legend>运行</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">Id Transform</h1>
|
||||
</div>
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin: 80px;margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
<div class="layui-form-item layui-form layui-form-pane" pane>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>模式</legend>
|
||||
</fieldset>
|
||||
<label class="layui-form-label">From</label>
|
||||
<div class="layui-input-inline" id="yuan">
|
||||
<select id="from">
|
||||
<option value="EnsembleID" selected>EnsembleID</option>
|
||||
<option value="ENTREZID">ENTREZID</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">To</label>
|
||||
<div class="layui-input-inline" id="yuan">
|
||||
<select id="to">
|
||||
|
||||
<option value="EnsembleID" selected="">EnsembleID</option>
|
||||
<option value="ENTREZID">ENTREZID</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='layui-row' style="margin-left: 80px;margin-top: 20px">
|
||||
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>运行</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="id_transform_file">选择文件</button>
|
||||
<button type="button" class="layui-btn" id="id_transform_run">RUN</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md9'>
|
||||
<h1 style="font-size: 50px">KEGG 富集</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>数据库文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left: 80px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>差异表达文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>参数</legend>
|
||||
</fieldset>
|
||||
<div class="layui-form-item layui-form layui-form-pane" pane>
|
||||
<label class="layui-form-label">logFC阈值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="logFC" id="logFC" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">FDR阈值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="FDR" id="FDR" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">orf</h1>
|
||||
</div>
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>gff 文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||||
<legend>运行</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class='layui-row' style="margin: 50px">
|
||||
<div class='layui-col-md3'>
|
||||
<h1 style="font-size: 50px">Pfam</h1>
|
||||
</div>
|
||||
<div class='layui-col-md9'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class='layui-row' style="margin-top: 80px; margin-left: 80px">
|
||||
|
||||
<div class='layui-col-md9 layui-form-pane'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend>fasta文件</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container" style="display: inline-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="select_file">选择文件</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='layui-row' style="margin-left:80px; margin-top: 20px">
|
||||
<div class='layui-col-md9'>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||||
<legend>运行</legend>
|
||||
</fieldset>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" id="run">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user