565 lines
21 KiB
HTML
565 lines
21 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>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 style="font-size: 30px;" href="index.html">Home</a></li>
|
|
<li class="layui-nav-item layui-hide-xs layui-this" style="margin-left: 200px"><a style="font-size: 30px;"
|
|
href="tools.html">Tools</a></li>
|
|
<li class="layui-nav-item layui-hide-xs " style="margin-left: 200px"><a style="font-size: 30px;" 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 style="margin-top: 20px;" class="layui-nav-item">
|
|
<a style="font-size: 25px;" 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 style="margin-top: 10px;" class="layui-nav-item">
|
|
<a style="font-size: 25px;" href="javascript:;">Gene Family</a>
|
|
<dl class="layui-nav-child">
|
|
<dd><a onclick=pfam()>pfam</a></dd>
|
|
</dl>
|
|
</li>
|
|
<li style="margin-top: 10px;" class="layui-nav-item">
|
|
<a style="font-size: 25px;" 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=fastqc()>fastqc</a></dd>
|
|
</dl>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="layui-body" id="main_show" style="background-color: rgb(250, 250, 250);">
|
|
|
|
<!--<div class="declare_box">
|
|
|
|
|
|
</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 = "{{ url }}"
|
|
var upload = layui.upload
|
|
var element = layui.element
|
|
var isss = "{{ id }}"
|
|
|
|
|
|
// 页面跳转加载函数
|
|
|
|
function blast() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/blast.html' %}`)
|
|
blast_run()
|
|
form.render();
|
|
|
|
}
|
|
|
|
function genbank_to_fasta() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/genbank_to_fasta.html' %}`)
|
|
gen_to_fa()
|
|
form.render();
|
|
}
|
|
|
|
function gff_to_gtf() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/gff_to_gtf.html' %}`)
|
|
gff()
|
|
form.render();
|
|
}
|
|
|
|
function orf() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/orf.html' %}`)
|
|
orf_run()
|
|
form.render();
|
|
}
|
|
|
|
function Basics() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/Basics.html' %}`)
|
|
basics_run()
|
|
form.render();
|
|
}
|
|
|
|
// 基因家族功能
|
|
function pfam() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/pfam.html' %}`)
|
|
pfam_run()
|
|
form.render();
|
|
|
|
|
|
}
|
|
|
|
|
|
// 组学
|
|
function Differential_expression_analysis() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/Differential_expression_analysis.html' %}`)
|
|
Differential_expression_analysis_run()
|
|
form.render();
|
|
}
|
|
|
|
|
|
function fastqc() {
|
|
temp = $('#main_show')
|
|
temp.empty()
|
|
temp.append(String.raw`{% include 'tools/fastqc.html' %}`)
|
|
fastqc_run()
|
|
form.render();
|
|
}
|
|
|
|
|
|
// blast
|
|
function blast_run() {
|
|
layui.use('upload', function () {
|
|
var upload = layui.upload;
|
|
//执行实例
|
|
var uploadInst = upload.render({
|
|
elem: '#select_blast_seq' //绑定元素
|
|
, url: url_up + '/tools/' + "blast"
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
fl: 1,
|
|
id: isss,
|
|
}
|
|
, accept: 'file'
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
});
|
|
});
|
|
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_blast_db'
|
|
, url: url_up + '/tools/' + "blast"
|
|
, auto: false
|
|
, accept: 'file'
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
outfmt: document.getElementById("outfmt").value,
|
|
evalue: document.getElementById("evalue").value,
|
|
num_descriptions: document.getElementById("num_descriptions").value,
|
|
type: document.getElementById("type").value,
|
|
id: isss,
|
|
}
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, bindAction: '#blast_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=blast&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
}
|
|
|
|
|
|
// gen to fa
|
|
function gen_to_fa() {
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_gen'
|
|
, url: url_up + '/tools/' + "gen_to_fa"
|
|
, auto: false
|
|
, accept: 'file'
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}'
|
|
}
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, bindAction: '#gen_to_fa_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=fasta&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
}
|
|
|
|
function gff() {
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_gff'
|
|
, url: url_up + '/tools/' + "gff_to_gtf"
|
|
, auto: false
|
|
, accept: 'file'
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}'
|
|
}
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, bindAction: '#gff_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=gtf&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
}
|
|
|
|
|
|
function orf_run() {
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_orf'
|
|
, url: url_up + '/tools/' + "orf"
|
|
, auto: false
|
|
, accept: 'file'
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
begin: document.getElementById("begin").value,
|
|
end: document.getElementById("end").value,
|
|
Cyclotype: document.getElementById("Cyclotype").value,
|
|
Codons: document.getElementById("Codons").value,
|
|
outfmt: document.getElementById("outfmt").value,
|
|
}
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, bindAction: '#orf_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=txt&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
}
|
|
|
|
|
|
function b_data() {
|
|
console.log("wwwwwwwww")
|
|
|
|
|
|
//obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
data_ = form.val('basics_name')
|
|
data_['csrfmiddlewaretoken'] = "{{ csrf_token }}"
|
|
console.log(data_)
|
|
|
|
}
|
|
|
|
var data_ = {}
|
|
|
|
function basics_run() {
|
|
|
|
console.log("dddd")
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_fa'
|
|
, url: url_up + '/tools/' + "basics"
|
|
, auto: false
|
|
, accept: 'file'
|
|
//{
|
|
//csrfmiddlewaretoken:
|
|
//Sequence_cleaning_: document.getElementById("Sequence_cleaning").value,
|
|
//Sequence_length_: document.getElementById("Sequence_length").value,
|
|
//GC_content_: document.getElementById("GC_content").value,
|
|
//Sequence_flip_: document.getElementById("Sequence_flip").value,
|
|
//Reverse_complementarity_: document.getElementById("Reverse_complementarity").value,
|
|
// Codon_preference: document.getElementById("Codon_preference").value,
|
|
// Codon_frequency: document.getElementById("Codon_frequency").value,
|
|
//}
|
|
, before: function (obj) {
|
|
b_data()
|
|
layer.load(1);
|
|
}
|
|
, data: data_
|
|
, bindAction: '#basics_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=txt&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
}
|
|
|
|
|
|
function pfam_run() {
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_pfam'
|
|
, url: url_up + '/tools/' + "pfam"
|
|
, auto: false
|
|
, accept: 'file'
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
b_dom: document.getElementById("b_dom").value,
|
|
b_seq: document.getElementById("b_seq").value,
|
|
e_dom: document.getElementById("e_dom").value,
|
|
e_seq: document.getElementById("e_seq").value,
|
|
align: document.getElementById("align").value,
|
|
clan_overlap: document.getElementById("clan_overlap").value,
|
|
}
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, bindAction: '#pfam_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=txt&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
}
|
|
|
|
|
|
function Differential_expression_analysis_run() {
|
|
|
|
var uploadListIns = upload.render({
|
|
elem: '#testList'
|
|
, elemList: $('#demoList') //列表元素对象
|
|
, url: url_up + '/tools/' + "Differential_expression_analysis" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
|
|
, accept: 'file'
|
|
, multiple: true
|
|
, number: 10
|
|
, auto: false
|
|
, bindAction: '#testListAction'
|
|
, choose: function (obj) {
|
|
var that = this;
|
|
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
|
|
//读取本地文件
|
|
obj.preview(function (index, file, result) {
|
|
var tr = $(['<tr id="upload-' + index + '">'
|
|
, '<td>' + file.name + '</td>'
|
|
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
|
|
, '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
|
|
, '<td>'
|
|
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">Re</button>'
|
|
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">del</button>'
|
|
, '</td>'
|
|
, '</tr>'].join(''));
|
|
|
|
//单个重传
|
|
tr.find('.demo-reload').on('click', function () {
|
|
obj.upload(index, file);
|
|
});
|
|
|
|
//删除
|
|
tr.find('.demo-delete').on('click', function () {
|
|
delete files[index]; //删除对应的文件
|
|
tr.remove();
|
|
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
|
|
});
|
|
|
|
that.elemList.append(tr);
|
|
element.render('progress'); //渲染新加的进度条组件
|
|
});
|
|
}
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
{#b_dom: document.getElementById("b_dom").value,#}
|
|
{#b_seq: document.getElementById("b_seq").value,#}
|
|
{#e_dom: document.getElementById("e_dom").value,#}
|
|
{#e_seq: document.getElementById("e_seq").value,#}
|
|
{#align: document.getElementById("align").value,#}
|
|
{#clan_overlap: document.getElementById("clan_overlap").value,#}
|
|
}
|
|
|
|
, done: function (res, index, upload) { //成功的回调
|
|
var that = this;
|
|
//if(res.code == 0){ //上传成功
|
|
var tr = that.elemList.find('tr#upload-' + index)
|
|
, tds = tr.children();
|
|
tds.eq(3).html(''); //清空操作
|
|
delete this.files[index]; //删除文件队列已经上传成功的文件
|
|
return;
|
|
//}
|
|
this.error(index, upload);
|
|
}
|
|
, allDone: function (obj) { //多文件上传完毕后的状态回调
|
|
console.log(obj)
|
|
}
|
|
, error: function (index, upload) { //错误回调
|
|
var that = this;
|
|
var tr = that.elemList.find('tr#upload-' + index)
|
|
, tds = tr.children();
|
|
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
|
|
}
|
|
, progress: function (n, elem, e, index) {
|
|
element.progress('progress-demo-' + index, n + '%');
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
// fastqc
|
|
function fastqc_run() {
|
|
layui.use(['upload'], function () {
|
|
var $ = layui.jquery
|
|
, layer = layui.layer;
|
|
upload.render({
|
|
elem: '#select_fastqc'
|
|
, url: url_up + '/tools/' + "fastqc"
|
|
, auto: false
|
|
, accept: 'file'
|
|
, data: {
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
|
format: document.getElementById("format").value,
|
|
}
|
|
, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
|
layer.load(1); //上传loading
|
|
}
|
|
, bindAction: '#fastqc_run'
|
|
, done: function (res, index) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
ab = '<a href= "' + url_up + '/chart/down?file_id=' + res.id + "&file_downlode_type=7z&ee=1" + '">' + ' <button type="button" class="layui-btn">downlode</button></a>'
|
|
$("#down").append(ab)
|
|
}
|
|
, error: function (index, upload) {
|
|
layer.closeAll('loading'); //关闭loading
|
|
}
|
|
})
|
|
;
|
|
})
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |