From a546b70a863e44c2e8735b3cfc9da45a781b735f Mon Sep 17 00:00:00 2001
From: zjj <3272660260@qq.com>
Date: 星期五, 03 十一月 2023 10:10:33 +0800
Subject: [PATCH] #托盘码下架
---
src/main/webapp/views/home/console.html | 393 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 372 insertions(+), 21 deletions(-)
diff --git a/src/main/webapp/views/home/console.html b/src/main/webapp/views/home/console.html
index 6e3e343..a3e4bb8 100644
--- a/src/main/webapp/views/home/console.html
+++ b/src/main/webapp/views/home/console.html
@@ -31,11 +31,15 @@
display: inline-block;
width: 49%;
}
+ .chart-elem div {
+ padding-top: 15px;
+ padding-bottom: 5px;
+ }
.chart-elem:first-child {
padding: 0 50px;
}
.chart-elem:last-child {
- padding-left: 20px;
+ padding: 0 50px;
border-left: 1px solid rgba(0,0,0,.1);
}
/*琛ㄦ牸宸ュ叿鏍�*/
@@ -88,7 +92,25 @@
<!--鎶ヨ〃鏁版嵁-->
<div class="home-elem charts-contain">
<div class="chart-elem">
- <div id="pie"></div>
+ <div class="layui-tab layui-tab-card" style="width: 100%">
+ <ul class="layui-tab-title">
+ <li class="layui-this">鎬昏</li>
+ <li>A鍖�</li>
+ <li>B鍖�</li>
+ <li>C鍖�</li>
+ <li>D鍖�</li>
+ <li>E鍖�</li>
+ </ul>
+ <div class="layui-tab-content">
+ <div class="layui-tab-item layui-show" id="pie" style="width: 95%"></div>
+ <div class="layui-tab-item" id="pie2" style="width: 95%"></div>
+ <div class="layui-tab-item" id="pie3" style="width: 95%"></div>
+ <div class="layui-tab-item" id="pie4" style="width: 95%"></div>
+ <div class="layui-tab-item" id="pie5" style="width: 95%"></div>
+ <div class="layui-tab-item" id="pie6" style="width: 95%"></div>
+ </div>
+ </div>
+<!-- <div id="pie"></div>-->
</div>
<div class="chart-elem">
<div id="line"></div>
@@ -105,7 +127,20 @@
</body>
<script>
pieCharts();
+ pieACharts();
+ pieBCharts();
+ pieCCharts();
+ pieDCharts();
+ pieECharts();
lineCharts();
+ layui.use('element', function(){
+ var element = layui.element;
+
+ //涓�浜涗簨浠惰Е鍙�
+ element.on('tab(demo)', function(data){
+ console.log(data);
+ });
+ });
// 楗煎浘
function pieCharts(){
$.ajax({
@@ -127,7 +162,7 @@
text: '搴撲綅浣跨敤姣斾緥',
margin:1,
style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
- y: 20
+ y: 5
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
@@ -150,13 +185,17 @@
name: '搴撲綅鍗犳瘮',
data: dataPie
}];
-
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ };
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
+ json.loading = loading;
json.credits = {enabled: false};
$('#pie').highcharts(json);
@@ -165,6 +204,318 @@
}
});
}
+
+ function pieACharts(){
+ $.ajax({
+ url:baseUrl+'/console/loc/pieA/charts',
+ headers: {'token': localStorage.getItem('token')},
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ crossDomain: true,
+ method: 'POST',
+ success:function(res){
+ var data = res.data;
+ var dataPie=eval(data.rows);
+ var chart = {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false
+ };
+ var title = {
+ text: '搴撲綅浣跨敤姣斾緥',
+ margin:1,
+ style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
+ y: 5
+ };
+ var tooltip = {
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+ };
+ var plotOptions = {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+ style: {
+ color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+ }
+ }
+ }
+ };
+ var series= [{
+ type: 'pie',
+ name: '搴撲綅鍗犳瘮',
+ data: dataPie
+ }];
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ };
+ var json = {};
+ json.chart = chart;
+ json.title = title;
+ json.tooltip = tooltip;
+ json.series = series;
+ json.plotOptions = plotOptions;
+ json.loading = loading;
+ json.credits = {enabled: false};
+ $('#pie2').highcharts(json);
+
+ },
+ error:function(){
+ }
+ });
+ }
+ function pieBCharts(){
+ $.ajax({
+ url:baseUrl+'/console/loc/pieB/charts',
+ headers: {'token': localStorage.getItem('token')},
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ crossDomain: true,
+ method: 'POST',
+ success:function(res){
+ var data = res.data;
+ var dataPie=eval(data.rows);
+ var chart = {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false
+ };
+ var title = {
+ text: '搴撲綅浣跨敤姣斾緥',
+ margin:1,
+ style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
+ y: 5
+ };
+ var tooltip = {
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+ };
+ var plotOptions = {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+ style: {
+ color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+ }
+ }
+ }
+ };
+ var series= [{
+ type: 'pie',
+ name: '搴撲綅鍗犳瘮',
+ data: dataPie
+ }];
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ };
+ var json = {};
+ json.chart = chart;
+ json.title = title;
+ json.tooltip = tooltip;
+ json.series = series;
+ json.plotOptions = plotOptions;
+ json.loading = loading;
+ json.credits = {enabled: false};
+ $('#pie3').highcharts(json);
+
+ },
+ error:function(){
+ }
+ });
+ }
+ function pieCCharts(){
+ $.ajax({
+ url:baseUrl+'/console/loc/pieC/charts',
+ headers: {'token': localStorage.getItem('token')},
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ crossDomain: true,
+ method: 'POST',
+ success:function(res){
+ var data = res.data;
+ var dataPie=eval(data.rows);
+ var chart = {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false
+ };
+ var title = {
+ text: '搴撲綅浣跨敤姣斾緥',
+ margin:1,
+ style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
+ y: 5
+ };
+ var tooltip = {
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+ };
+ var plotOptions = {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+ style: {
+ color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+ }
+ }
+ }
+ };
+ var series= [{
+ type: 'pie',
+ name: '搴撲綅鍗犳瘮',
+ data: dataPie
+ }];
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ };
+ var json = {};
+ json.chart = chart;
+ json.title = title;
+ json.tooltip = tooltip;
+ json.series = series;
+ json.plotOptions = plotOptions;
+ json.loading = loading;
+ json.credits = {enabled: false};
+ $('#pie4').highcharts(json);
+
+ },
+ error:function(){
+ }
+ });
+ }
+ function pieDCharts(){
+ $.ajax({
+ url:baseUrl+'/console/loc/pieD/charts',
+ headers: {'token': localStorage.getItem('token')},
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ crossDomain: true,
+ method: 'POST',
+ success:function(res){
+ var data = res.data;
+ var dataPie=eval(data.rows);
+ var chart = {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false
+ };
+ var title = {
+ text: '搴撲綅浣跨敤姣斾緥',
+ margin:1,
+ style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
+ y: 5
+ };
+ var tooltip = {
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+ };
+ var plotOptions = {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+ style: {
+ color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+ }
+ }
+ }
+ };
+ var series= [{
+ type: 'pie',
+ name: '搴撲綅鍗犳瘮',
+ data: dataPie
+ }];
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ };
+ var json = {};
+ json.chart = chart;
+ json.title = title;
+ json.tooltip = tooltip;
+ json.series = series;
+ json.plotOptions = plotOptions;
+ json.loading = loading;
+ json.credits = {enabled: false};
+ $('#pie5').highcharts(json);
+
+ },
+ error:function(){
+ }
+ });
+ }
+ function pieECharts(){
+ $.ajax({
+ url:baseUrl+'/console/loc/pieE/charts',
+ headers: {'token': localStorage.getItem('token')},
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ crossDomain: true,
+ method: 'POST',
+ success:function(res){
+ var data = res.data;
+ var dataPie=eval(data.rows);
+ var chart = {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false
+ };
+ var title = {
+ text: '搴撲綅浣跨敤姣斾緥',
+ margin:1,
+ style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
+ y: 5
+ };
+ var tooltip = {
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+ };
+ var plotOptions = {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+ style: {
+ color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+ }
+ }
+ }
+ };
+ var series= [{
+ type: 'pie',
+ name: '搴撲綅鍗犳瘮',
+ data: dataPie
+ }];
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ };
+ var json = {};
+ json.chart = chart;
+ json.title = title;
+ json.tooltip = tooltip;
+ json.series = series;
+ json.plotOptions = plotOptions;
+ json.loading = loading;
+ json.credits = {enabled: false};
+ $('#pie6').highcharts(json);
+
+ },
+ error:function(){
+ }
+ });
+ }
+
// 鎶樼嚎鍥�
function lineCharts() {
@@ -181,7 +532,7 @@
text: '鏃ュ叆鍑哄簱鏁伴噺',
margin: 1,
style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
- y: 20
+ y: 5
};
var xAxis = {
categories: [getDate(-11), getDate(-10), getDate(-9), getDate(-8), getDate(-7), getDate(-6),
@@ -204,6 +555,10 @@
verticalAlign: 'middle',
borderWidth: 0
};
+ var loading = {
+ hideDuration: 3,
+ showDuration: 3
+ }
var series = dataPie;
var json = {};
json.title = title;
@@ -211,6 +566,7 @@
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
+ json.loading = loading;
json.series = series;
json.credits = {enabled: false};
$('#line').highcharts(json);
@@ -220,6 +576,15 @@
// 琛ㄦ牸
var pageCurr;
+ function getCol() {
+ var cols = [
+ {field: 'appeTime$', title: '鍏ュ簱鏃堕棿', align: 'center', width: 200}
+ ,{field: 'stay_time', align: 'center',title: '婊炵暀澶╂暟'}
+ ,{field: 'loc_no', align: 'center',title: '搴撲綅鍙�'}
+ ];
+ cols.push.apply(cols, detlCols);
+ return cols;
+ }
layui.use(['table','laydate', 'form'], function() {
var table = layui.table;
var $ = layui.jquery;
@@ -236,21 +601,7 @@
even: true,
cellMinWidth: 50,
crossDomain: true,
- cols: [[
- {field: 'appe_time', title: '鍏ュ簱鏃堕棿', align: 'center', width: 200}
- ,{field: 'stay_time', align: 'center',title: '婊炵暀澶╂暟'}
- ,{field: 'loc_no', align: 'center',title: '搴撲綅鍙�'}
- ,{field: 'matnr', align: 'center',title: '鐗╂枡'}
- ,{field: 'maktx', align: 'center',title: '鐗╂枡鎻忚堪'}
- // ,{field: 'lgnum', align: 'center',title: '浠撳簱鍙�'}
- // ,{field: 'tbnum', align: 'center',title: '璇锋眰缂栧彿'}
- // ,{field: 'zmatid', align: 'center',title: '鐗╂枡鏍囩ID'}
- // ,{field: 'werks', align: 'center',title: '宸ュ巶'}
- ,{field: 'anfme', align: 'center',title: '鏁伴噺'}
- ,{field: 'altme', align: 'center',title: '鍗曚綅'}
- ,{field: 'zpallet', align: 'center',title: '鎵樼洏鐮�'}
- // ,{field: 'bname', align: 'center',title: '鐢ㄦ埛ID'}
- ]],
+ cols: [getCol()],
request: {
pageName: 'curr',
pageSize: 'limit'
@@ -322,4 +673,4 @@
return fmt;
}
</script>
-</html>
\ No newline at end of file
+</html>
--
Gitblit v1.9.1