| | |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>首页</title> |
|---|
| | | <title data-i18n="首页">首页</title> |
|---|
| | | <meta name="renderer" content="webkit"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|---|
| | |
|---|
| | | <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/echarts/highcharts.js"></script> |
|---|
| | | <script src="../../static/js/i18n/i18n-helper.js"></script> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | background-color: #f1f1f1; |
|---|
| | |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | /*表格工具栏*/ |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!--表格数据--> |
|---|
| | | <div class="home-elem loc-retention"> |
|---|
| | | <div class="layui-form"> |
|---|
| | | <div id="form-header">库存滞留时间统计表</div> |
|---|
| | | <table class="layui-hide" id="stayTime" lay-filter="stayTime"></table> |
|---|
| | | <!--表格数据--> |
|---|
| | | <div class="home-elem loc-retention"> |
|---|
| | | <div class="layui-form"> |
|---|
| | | <div id="form-header" data-i18n="库存滞留时间统计表">库存滞留时间统计表</div> |
|---|
| | | <table class="layui-hide" id="stayTime" lay-filter="stayTime"></table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | pieCharts(); |
|---|
| | | lineCharts(); |
|---|
| | | $(document).on('i18n:ready', function() { |
|---|
| | | pieCharts(); |
|---|
| | | lineCharts(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 饼图 |
|---|
| | | function pieCharts(){ |
|---|
| | | $.ajax({ |
|---|
| | |
|---|
| | | success:function(res){ |
|---|
| | | var data = res.data; |
|---|
| | | var dataPie=eval(data.rows); |
|---|
| | | if (dataPie && typeof I18n !== 'undefined') { |
|---|
| | | for(var i=0; i<dataPie.length; i++) { |
|---|
| | | if(dataPie[i].name) { |
|---|
| | | dataPie[i].name = I18n.t(dataPie[i].name); |
|---|
| | | } else if (Array.isArray(dataPie[i]) && dataPie[i].length > 0) { |
|---|
| | | dataPie[i][0] = I18n.t(dataPie[i][0]); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var chart = { |
|---|
| | | plotBackgroundColor: null, |
|---|
| | | plotBorderWidth: null, |
|---|
| | | plotShadow: false |
|---|
| | | }; |
|---|
| | | var title = { |
|---|
| | | text: '库位使用比例', |
|---|
| | | text: typeof I18n !== 'undefined' ? I18n.t('库位使用比例') : '库位使用比例', |
|---|
| | | margin:1, |
|---|
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
|---|
| | | y: 20 |
|---|
| | | y: 5 |
|---|
| | | }; |
|---|
| | | var tooltip = { |
|---|
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
|---|
| | |
|---|
| | | }; |
|---|
| | | var series= [{ |
|---|
| | | type: 'pie', |
|---|
| | | name: '库位占比', |
|---|
| | | name: typeof I18n !== 'undefined' ? I18n.t('库位占比') : '库位占比', |
|---|
| | | 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); |
|---|
| | | |
|---|
| | |
|---|
| | | success: function (res) { |
|---|
| | | var data = res.data; |
|---|
| | | var dataPie = eval(data.rows); |
|---|
| | | if (dataPie && typeof I18n !== 'undefined') { |
|---|
| | | for(var i=0; i<dataPie.length; i++) { |
|---|
| | | if(dataPie[i].name) { |
|---|
| | | dataPie[i].name = I18n.t(dataPie[i].name); |
|---|
| | | } else if (Array.isArray(dataPie[i]) && dataPie[i].length > 0) { |
|---|
| | | dataPie[i][0] = I18n.t(dataPie[i][0]); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var title = { |
|---|
| | | text: '日入出库数量', |
|---|
| | | text: typeof I18n !== 'undefined' ? I18n.t('日入出库数量') : '日入出库数量', |
|---|
| | | 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), |
|---|
| | |
|---|
| | | }; |
|---|
| | | var yAxis = { |
|---|
| | | title: { |
|---|
| | | text: '入/出库数量' |
|---|
| | | text: typeof I18n !== 'undefined' ? I18n.t('入_出库数量') : '入/出库数量' |
|---|
| | | }, |
|---|
| | | plotLines: [{ |
|---|
| | | value: 0, |
|---|
| | |
|---|
| | | verticalAlign: 'middle', |
|---|
| | | borderWidth: 0 |
|---|
| | | }; |
|---|
| | | var loading = { |
|---|
| | | hideDuration: 3, |
|---|
| | | showDuration: 3 |
|---|
| | | } |
|---|
| | | var series = dataPie; |
|---|
| | | var json = {}; |
|---|
| | | json.title = title; |
|---|
| | |
|---|
| | | json.yAxis = yAxis; |
|---|
| | | json.tooltip = tooltip; |
|---|
| | | json.legend = legend; |
|---|
| | | json.loading = loading; |
|---|
| | | json.series = series; |
|---|
| | | json.credits = {enabled: false}; |
|---|
| | | $('#line').highcharts(json); |
|---|
| | |
|---|
| | | |
|---|
| | | // 表格 |
|---|
| | | var pageCurr; |
|---|
| | | var tableIns; |
|---|
| | | function getCol() { |
|---|
| | | var cols = [ |
|---|
| | | {field: 'appeTime$', title: typeof I18n !== 'undefined' ? I18n.t('入库时间') : '入库时间', align: 'center', width: 200} |
|---|
| | | ,{field: 'stay_time', align: 'center',title: typeof I18n !== 'undefined' ? I18n.t('滞留天数') : '滞留天数'} |
|---|
| | | ,{field: 'loc_no', align: 'center',title: typeof I18n !== 'undefined' ? I18n.t('库位号') : '库位号'} |
|---|
| | | ]; |
|---|
| | | cols.push.apply(cols, getDetlCols()); |
|---|
| | | return cols; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 监听语言切换事件 |
|---|
| | | $(document).on('i18n:languageChanged', function() { |
|---|
| | | pieCharts(); |
|---|
| | | lineCharts(); |
|---|
| | | if (tableIns) { |
|---|
| | | tableIns.reload({ |
|---|
| | | cols: [getCol()], |
|---|
| | | text: { none: typeof I18n !== 'undefined' ? I18n.t('no_data') : 'No Data' } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | layui.use(['table','laydate', 'form'], function() { |
|---|
| | | var table = layui.table; |
|---|
| | | var $ = layui.jquery; |
|---|
| | | var layer = layui.layer; |
|---|
| | | |
|---|
| | | // 数据渲染 |
|---|
| | | tableIns = table.render({ |
|---|
| | | elem: '#stayTime', |
|---|
| | | headers: {token: localStorage.getItem('token')}, |
|---|
| | | url: baseUrl+'/report/viewStayTimeList.action', |
|---|
| | | page: true, |
|---|
| | | limit: 10, |
|---|
| | | toolbar: '#toolbar', |
|---|
| | | 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'} |
|---|
| | | ]], |
|---|
| | | request: { |
|---|
| | | pageName: 'curr', |
|---|
| | | pageSize: 'limit' |
|---|
| | | }, |
|---|
| | | parseData: function (res) { |
|---|
| | | return { |
|---|
| | | 'code': res.code, |
|---|
| | | 'msg': res.msg, |
|---|
| | | 'count': res.data.total, |
|---|
| | | 'data': res.data.records |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | response: { |
|---|
| | | statusCode: 200 |
|---|
| | | }, |
|---|
| | | done: function(res, curr, count) { |
|---|
| | | if (res.code === 403) { |
|---|
| | | top.location.href = baseUrl+"/"; |
|---|
| | | } |
|---|
| | | pageCurr=curr; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 监听排序事件 |
|---|
| | | table.on('sort(stayTime)', function (obj) { |
|---|
| | | var searchData = {}; |
|---|
| | | $.each($('#search-box [name]').serializeArray(), function() { |
|---|
| | | searchData[this.name] = this.value; |
|---|
| | | }); |
|---|
| | | searchData['orderByField'] = obj.field; |
|---|
| | | searchData['orderByType'] = obj.type; |
|---|
| | | tableIns.reload({ |
|---|
| | | where: searchData, |
|---|
| | | page: { |
|---|
| | | curr: 1 |
|---|
| | | function initTable() { |
|---|
| | | // 数据渲染 |
|---|
| | | tableIns = table.render({ |
|---|
| | | elem: '#stayTime', |
|---|
| | | headers: {token: localStorage.getItem('token')}, |
|---|
| | | url: baseUrl+'/report/viewStayTimeList.action', |
|---|
| | | page: true, |
|---|
| | | limit: 10, |
|---|
| | | toolbar: '#toolbar', |
|---|
| | | even: true, |
|---|
| | | cellMinWidth: 50, |
|---|
| | | crossDomain: true, |
|---|
| | | cols: [getCol()], |
|---|
| | | text: { none: typeof I18n !== 'undefined' ? I18n.t('no_data') : 'No Data' }, |
|---|
| | | request: { |
|---|
| | | pageName: 'curr', |
|---|
| | | pageSize: 'limit' |
|---|
| | | }, |
|---|
| | | done: function (res, curr, count) { |
|---|
| | | parseData: function (res) { |
|---|
| | | return { |
|---|
| | | 'code': res.code, |
|---|
| | | 'msg': res.msg, |
|---|
| | | 'count': res.data.total, |
|---|
| | | 'data': res.data.records |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | response: { |
|---|
| | | statusCode: 200 |
|---|
| | | }, |
|---|
| | | done: function(res, curr, count) { |
|---|
| | | if (res.code === 403) { |
|---|
| | | top.location.href = baseUrl+"/"; |
|---|
| | | } |
|---|
| | | pageCurr=curr; |
|---|
| | | if (typeof I18n !== 'undefined') { |
|---|
| | | I18n.updateLayuiPagination(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 监听排序事件 |
|---|
| | | table.on('sort(stayTime)', function (obj) { |
|---|
| | | var searchData = {}; |
|---|
| | | $.each($('#search-box [name]').serializeArray(), function() { |
|---|
| | | searchData[this.name] = this.value; |
|---|
| | | }); |
|---|
| | | searchData['orderByField'] = obj.field; |
|---|
| | | searchData['orderByType'] = obj.type; |
|---|
| | | tableIns.reload({ |
|---|
| | | where: searchData, |
|---|
| | | page: { |
|---|
| | | curr: 1 |
|---|
| | | }, |
|---|
| | | done: function (res, curr, count) { |
|---|
| | | if (res.code === 403) { |
|---|
| | | top.location.href = baseUrl+"/"; |
|---|
| | | } |
|---|
| | | pageCurr=curr; |
|---|
| | | if (typeof I18n !== 'undefined') { |
|---|
| | | I18n.updateLayuiPagination(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (typeof I18n !== 'undefined' && I18n.isReady()) { |
|---|
| | | initTable(); |
|---|
| | | } else { |
|---|
| | | $(document).on('i18n:ready', function() { |
|---|
| | | initTable(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | |
|---|
| | | return fmt; |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| | | </html> |
|---|
