370 lines
20 KiB
HTML
370 lines
20 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"><img src="/static/logo改_3.png" height="60px"></div>
|
||
|
||
<!-- 头部区域（可配合layui 已有的水平导航） -->
|
||
|
||
<ul class="layui-nav layui-layout-left">
|
||
|
||
<li class="layui-nav-item layui-hide-xs layui-this" style="margin-left: 200px"><a style="font-size: 30px;"
|
||
href="index.html">Home</a></li>
|
||
|
||
<li class="layui-nav-item layui-hide-xs" 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: 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 style="margin-top: 20px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=ALL()>ALL</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Scatter_plot()>Scatter plot</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Line_chart()>Line chart</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Pie_chart()>Pie chart</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Histogram()>Histogram</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Heat_map()>Heat map</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Dot_plot()>Dot plot</a></li>
|
||
<li style="margin-top: 10px;" class="layui-nav-item NO "><a style="font-size: 25px;" onclick=Chord_Diagram()>Chord Diagram</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_plot() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Scatter plot";
|
||
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 Line_chart() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Line chart";
|
||
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 Pie_chart() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Pie chart";
|
||
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 Histogram() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Histogram";
|
||
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 Heat_map() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Heat map";
|
||
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 Dot_plot() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Dot plot";
|
||
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 Chord_Diagram() {
|
||
$("#LAY_demo1").empty();
|
||
a = "Chord Diagram";
|
||
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>'#}
|
||
|
||
|
||
|