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

添加分类功能。

Browse Source
This commit is contained in:
fy3047957834
2021-10-13 22:54:43 +08:00
parent 5c7fb52a32
commit b8eb90ad48
3 changed files with 215 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/views.py
+39 -3
View File
@@ -84,10 +84,46 @@ def sort_load(request):
return_data = PlottingLibrary.objects.all()[(page - 1) * 12:] return_data = PlottingLibrary.objects.all()[(page - 1) * 12:]
if len(return_data) >= 12: if len(return_data) >= 12:
return_data = return_data[:12] return_data = return_data[:12]
elif sort == "Scatter": elif sort == "Scatter plot":
a = len(PlottingLibrary.objects.filter(sort="scatter")) a = len(PlottingLibrary.objects.filter(sort="Scatter plot"))
pages = tools.return_pages(a) pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="scatter")[(page - 1) * 12:] return_data = PlottingLibrary.objects.filter(sort="Scatter plot")[(page - 1) * 12:]
if len(return_data) >= 12:
return_data = return_data[:12]
elif sort == "Line chart":
a = len(PlottingLibrary.objects.filter(sort="Line chart"))
pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="Line chart")[(page - 1) * 12:]
if len(return_data) >= 12:
return_data = return_data[:12]
elif sort == "Pie chart":
a = len(PlottingLibrary.objects.filter(sort="Pie chart"))
pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="Pie chart")[(page - 1) * 12:]
if len(return_data) >= 12:
return_data = return_data[:12]
elif sort == "Histogram":
a = len(PlottingLibrary.objects.filter(sort="Histogram"))
pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="Histogram")[(page - 1) * 12:]
if len(return_data) >= 12:
return_data = return_data[:12]
elif sort == "Heat map":
a = len(PlottingLibrary.objects.filter(sort="Heat map"))
pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="Heat map")[(page - 1) * 12:]
if len(return_data) >= 12:
return_data = return_data[:12]
elif sort == "Dot plot":
a = len(PlottingLibrary.objects.filter(sort="Dot plot"))
pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="Dot plot")[(page - 1) * 12:]
if len(return_data) >= 12:
return_data = return_data[:12]
elif sort == "Chord Diagram":
a = len(PlottingLibrary.objects.filter(sort="Chord Diagram"))
pages = tools.return_pages(a)
return_data = PlottingLibrary.objects.filter(sort="Chord Diagram")[(page - 1) * 12:]
if len(return_data) >= 12: if len(return_data) >= 12:
return_data = return_data[:12] return_data = return_data[:12]
static/css/layui.css
+6 -2
View File
@@ -1005,7 +1005,7 @@ a cite {
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
color: #009688; color: #009688;
font-size: 16px; font-size: 32px; // logo字体大小
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%)
} }
@@ -3948,7 +3948,11 @@ body .layui-table-tips .layui-layer-content {
} }
.layui-nav * { .layui-nav * {
font-size: 14px font-size: 14px; // 所有字体大小
}
.layui-nav-head * {
font-size: 14px; // 所有字体大小
} }
.layui-nav .layui-nav-item { .layui-nav .layui-nav-item {
templates/page/index.html
+170 -7
View File
@@ -40,11 +40,13 @@
<div class="layui-side-scroll"> <div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test"> <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=ALL()>ALL</a></li>
<li class="layui-nav-item NO "><a onclick=Scatter()>Scatter plot</a></li> <li class="layui-nav-item NO "><a onclick=Scatter_plot()>Scatter plot</a></li>
<li class="layui-nav-item NO "><a href="">Line chart</a></li> <li class="layui-nav-item NO "><a onclick=Line_chart()>Line chart</a></li>
<li class="layui-nav-item NO "><a href="">Pie chart</a></li> <li class="layui-nav-item NO "><a onclick=Pie_chart()>Pie chart</a></li>
<li class="layui-nav-item NO "><a href="">Histogram</a></li> <li class="layui-nav-item NO "><a onclick=Histogram()>Histogram</a></li>
<li class="layui-nav-item NO "><a href="">Heat map</a></li> <li class="layui-nav-item NO "><a onclick=Heat_map()>Heat map</a></li>
<li class="layui-nav-item NO "><a onclick=Dot_plot()>Dot plot</a></li>
<li class="layui-nav-item NO "><a onclick=Chord_Diagram()>Chord Diagram</a></li>
</ul> </ul>
</div> </div>
@@ -122,9 +124,9 @@
}); });
function Scatter() { function Scatter_plot() {
$("#LAY_demo1").empty(); $("#LAY_demo1").empty();
a = "Scatter"; a = "Scatter plot";
layui.use('flow', function () { layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。 var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow; var flow = layui.flow;
@@ -149,6 +151,167 @@
}); });
} }
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() { function ALL() {
$("#LAY_demo1").empty(); $("#LAY_demo1").empty();