From b8eb90ad486ab59b6492f0f9155a4c5af3ab4c14 Mon Sep 17 00:00:00 2001 From: fy3047957834 <3047957834@qq.com> Date: Wed, 13 Oct 2021 22:54:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E7=B1=BB=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/views.py | 42 ++++++++- static/css/layui.css | 8 +- templates/page/index.html | 177 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 215 insertions(+), 12 deletions(-) diff --git a/pages/views.py b/pages/views.py index a263010..2b6d9f4 100644 --- a/pages/views.py +++ b/pages/views.py @@ -84,10 +84,46 @@ def sort_load(request): return_data = PlottingLibrary.objects.all()[(page - 1) * 12:] if len(return_data) >= 12: return_data = return_data[:12] - elif sort == "Scatter": - a = len(PlottingLibrary.objects.filter(sort="scatter")) + elif sort == "Scatter plot": + a = len(PlottingLibrary.objects.filter(sort="Scatter plot")) 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: return_data = return_data[:12] diff --git a/static/css/layui.css b/static/css/layui.css index 6ab58d3..3d73a90 100644 --- a/static/css/layui.css +++ b/static/css/layui.css @@ -1005,7 +1005,7 @@ a cite { line-height: 60px; text-align: center; color: #009688; - font-size: 16px; + font-size: 32px; // logo字体大小 box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) } @@ -3948,7 +3948,11 @@ body .layui-table-tips .layui-layer-content { } .layui-nav * { - font-size: 14px + font-size: 14px; // 所有字体大小 +} + +.layui-nav-head * { + font-size: 14px; // 所有字体大小 } .layui-nav .layui-nav-item { diff --git a/templates/page/index.html b/templates/page/index.html index f254725..7ba575a 100644 --- a/templates/page/index.html +++ b/templates/page/index.html @@ -40,11 +40,13 @@
@@ -122,9 +124,9 @@ }); - function Scatter() { + function Scatter_plot() { $("#LAY_demo1").empty(); - a = "Scatter"; + a = "Scatter plot"; layui.use('flow', function () { var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。 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('
' + item.title + '
');#} + lis.push('
dd

' + ' ' + '

' + item.name + '

'); + }); + + //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + //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('
' + item.title + '
');#} + lis.push('
dd

' + ' ' + '

' + item.name + '

'); + }); + + //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + //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('
' + item.title + '
');#} + lis.push('
dd

' + ' ' + '

' + item.name + '

'); + }); + + //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + //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('
' + item.title + '
');#} + lis.push('
dd

' + ' ' + '

' + item.name + '

'); + }); + + //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + //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('
' + item.title + '
');#} + lis.push('
dd

' + ' ' + '

' + item.name + '

'); + }); + + //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + //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('
' + item.title + '
');#} + lis.push('
dd

' + ' ' + '

' + item.name + '

'); + }); + + //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 + //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多 + next(lis.join(''), page < res.pages); + }); + } + }); + }); + } function ALL() { $("#LAY_demo1").empty();