Initial commit

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
+288
View File
@@ -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>&emsp;
</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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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>&emsp;</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>&emsp;</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>
+206
View File
@@ -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>'#}
+229
View File
@@ -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">&#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" style="font-size: 20px">title&nbsp;&nbsp;</label>
</div>
</dd>
<dd style="overflow: hidden">
<div class="color">
<label class="label_meg" style="font-size: 20px">a&nbsp;&nbsp;</label>
</div>
</dd>
<dd style="overflow: hidden">
<div class="color">
<label class="label_meg">3&nbsp;&nbsp;</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&nbsp;&nbsp;</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&nbsp;&nbsp;</label>
</div>
</dd>
<dd style="overflow: hidden">
<div class="color">
<label class="label_meg">fsafa&nbsp;&nbsp;</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&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 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 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 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>
+65
View File
@@ -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">&#xe67c;</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&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: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>
+292
View File
@@ -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>