xxay/Simple_Drawing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Your Name
2021-09-07 23:12:03 +08:00
commit 0f5e5327d8
354 changed files with 35438 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
templates/chart/Dot_Plot.html Normal file
View File

@@ -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">&#xe67c;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</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>