7 changed files with 314 additions and 1251 deletions
@ -1,621 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html xmlns:th="http://www.w3.org/1999/xhtml"> |
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<title>首页三</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"> |
|
||||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|
||||
<style> |
|
||||
.top-panel { |
|
||||
border: 1px solid #eceff9; |
|
||||
border-radius: 5px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.top-panel > .layui-card-body { |
|
||||
height: 60px; |
|
||||
} |
|
||||
|
|
||||
.top-panel-number { |
|
||||
line-height: 60px; |
|
||||
font-size: 30px; |
|
||||
border-right: 1px solid #eceff9; |
|
||||
} |
|
||||
|
|
||||
.top-panel-tips { |
|
||||
line-height: 30px; |
|
||||
font-size: 12px |
|
||||
} |
|
||||
</style> |
|
||||
</head> |
|
||||
<body> |
|
||||
<!--<div class="layuimini-container">--> |
|
||||
<div class="layuimini-main"> |
|
||||
|
|
||||
|
|
||||
<div class="layui-row layui-col-space15"> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">转出物料数量</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${allOutCount}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">转出物料金额</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${allOutPrice}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">出售物料数量</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${OutCount}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">出库物料金额</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${OutPrice}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div class="layui-row layui-col-space15"> |
|
||||
<div class="layui-col-xs12 layui-col-md9"> |
|
||||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|
||||
 本周  |
|
||||
</button> |
|
||||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|
||||
 上周  |
|
||||
</button> |
|
||||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
<div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
<div class="layui-row layui-col-space15"> |
|
||||
<div class="layui-col-xs12 layui-col-md6"> |
|
||||
<div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md6"> |
|
||||
<div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
<!--</div>--> |
|
||||
|
|
||||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|
||||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|
||||
<script> |
|
||||
layui.use(['layer'], function () { |
|
||||
var $ = layui.jquery, |
|
||||
layer = layui.layer, |
|
||||
form = layui.form; |
|
||||
/** |
|
||||
* 折线图 |
|
||||
*/ |
|
||||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|
||||
|
|
||||
var optionRecords = { |
|
||||
title: { |
|
||||
text: '仓库总量-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: [] |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: [] |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '北京仓库', |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
label: { |
|
||||
normal: { |
|
||||
show: true, |
|
||||
position: 'top' |
|
||||
} |
|
||||
}, |
|
||||
areaStyle: {}, |
|
||||
data: [] |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 玫瑰图表 |
|
||||
*/ |
|
||||
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); |
|
||||
var optionPies = { |
|
||||
title: { |
|
||||
text: '仓库分布图', |
|
||||
left: 'center' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'item', |
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
||||
}, |
|
||||
legend: { |
|
||||
orient: 'vertical', |
|
||||
left: 'left', |
|
||||
data: ['外芯仓库', '义乌仓库', '宁波仓库', '杭州仓库', '北京仓库'] |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '昨日占比', |
|
||||
type: 'pie', |
|
||||
radius: '55%', |
|
||||
center: ['50%', '60%'], |
|
||||
roseType: 'radius', |
|
||||
data: [ |
|
||||
{value: 335, name: '外芯仓库'}, |
|
||||
{value: 310, name: '义乌仓库'}, |
|
||||
{value: 234, name: '宁波仓库'}, |
|
||||
{value: 135, name: '杭州仓库'}, |
|
||||
{value: 368, name: '北京仓库'} |
|
||||
], |
|
||||
emphasis: { |
|
||||
itemStyle: { |
|
||||
shadowBlur: 10, |
|
||||
shadowOffsetX: 0, |
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 柱状图 |
|
||||
*/ |
|
||||
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|
||||
var optionDataset = { |
|
||||
legend: {}, |
|
||||
tooltip: {}, |
|
||||
dataset: { |
|
||||
dimensions: [], |
|
||||
source: [] |
|
||||
}, |
|
||||
xAxis: {type: 'category'}, |
|
||||
yAxis: {}, |
|
||||
series: [ |
|
||||
{type: 'bar'}, |
|
||||
{type: 'bar'}, |
|
||||
{type: 'bar'} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 中国地图 |
|
||||
*/ |
|
||||
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|
||||
var optionMap = { |
|
||||
legend: {}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
showContent: false |
|
||||
}, |
|
||||
dataset: { |
|
||||
source: [] |
|
||||
}, |
|
||||
xAxis: {type: 'category'}, |
|
||||
yAxis: {gridIndex: 0}, |
|
||||
grid: {top: '55%'}, |
|
||||
series: [ |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
//动态加载相关数据 |
|
||||
$.ajax({ |
|
||||
url: '/repository/layui/echart_back?type=2', |
|
||||
type: 'get', |
|
||||
async: true, |
|
||||
dataType: "json", |
|
||||
complete: function (XHR, TS) { |
|
||||
if (XHR.status !== 200) { |
|
||||
layer.alert("系统繁忙，稍后重试"); |
|
||||
} |
|
||||
}, |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
if (result.code === 0) { |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
echartsPies.setOption(optionPies); |
|
||||
echartsDataset.setOption(optionDataset); |
|
||||
echartsMap.setOption(optionMap); |
|
||||
|
|
||||
// 折线图 |
|
||||
var optionRecordsSeries = []; |
|
||||
// 饼状图 |
|
||||
var optionPiesSeries = { |
|
||||
name: '昨日占比', |
|
||||
type: 'pie', |
|
||||
radius: '55%', |
|
||||
center: ['50%', '60%'], |
|
||||
roseType: 'radius', |
|
||||
emphasis: { |
|
||||
itemStyle: { |
|
||||
shadowBlur: 10, |
|
||||
shadowOffsetX: 0, |
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
||||
} |
|
||||
}, |
|
||||
data: [] |
|
||||
} |
|
||||
// 柱状图 |
|
||||
optionDataset = { |
|
||||
legend: {}, |
|
||||
tooltip: {}, |
|
||||
dataset: { |
|
||||
dimensions: [], |
|
||||
source: [] |
|
||||
}, |
|
||||
series: [] |
|
||||
}; |
|
||||
for (let i = 0; i < result.data.depository_name.length; i++) { |
|
||||
optionRecordsSeries.push({ |
|
||||
name: result.data.depository_name[i], |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
data: result.data.depository_data.data[result.data.depository_name[i]], |
|
||||
areaStyle: {} |
|
||||
}); |
|
||||
optionPiesSeries.data.push({ |
|
||||
value: result.data.depository_data.yesterdayData[result.data.depository_name[i]], |
|
||||
name: result.data.depository_name[i] |
|
||||
}) |
|
||||
} |
|
||||
var dimensions = result.data.depository_data.sourceList[result.data.depository_data.sourceList.length - 1]; |
|
||||
optionDataset.dataset.dimensions = dimensions; |
|
||||
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { |
|
||||
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) |
|
||||
} |
|
||||
for (let i = 0; i < dimensions.length - 1; i++) { |
|
||||
optionDataset.series.push({type: 'bar'}) |
|
||||
} |
|
||||
for (let i = 0; i < result.data.depository_data.mapData.mapDataList.length; i++) { |
|
||||
optionMap.dataset.source.push(result.data.depository_data.mapData.mapDataList[i]); |
|
||||
if(i < result.data.depository_data.mapData.mapDataList.length - 1) { |
|
||||
optionMap.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'}); |
|
||||
} |
|
||||
} |
|
||||
var month = new Date().getMonth() + 1; |
|
||||
optionMap.series.push( |
|
||||
{ |
|
||||
type: 'pie', |
|
||||
// id: 'pie', |
|
||||
radius: '30%', |
|
||||
center: ['50%', '25%'], |
|
||||
label: { |
|
||||
formatter: '{b}: {@'+month+'月} ({d}%)' |
|
||||
}, |
|
||||
encode: { |
|
||||
itemName: 'product', |
|
||||
value: month+'月', |
|
||||
tooltip: month+'月' |
|
||||
} |
|
||||
} |
|
||||
); |
|
||||
optionRecords = { |
|
||||
title: { |
|
||||
text: '出库仓库-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: result.data.depository_name |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: result.data.depository_data.week |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: optionRecordsSeries |
|
||||
}; |
|
||||
optionPies = { |
|
||||
title: { |
|
||||
text: '仓库分布图', |
|
||||
left: 'center' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'item', |
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
||||
}, |
|
||||
legend: { |
|
||||
orient: 'vertical', |
|
||||
left: 'left', |
|
||||
data: result.data.depository_name |
|
||||
}, |
|
||||
series: optionPiesSeries |
|
||||
}; |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
echartsPies.setOption(optionPies); |
|
||||
echartsDataset.setOption(optionDataset); |
|
||||
echartsMap.setOption(optionMap); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
// echarts 窗口缩放自适应 |
|
||||
window.onresize = function () { |
|
||||
echartsRecords.resize(); |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
// 获取本周 |
|
||||
form.on('submit(thisWeek)', function () { |
|
||||
$.ajax({ |
|
||||
url: '/repository/layui/echart_back_thisWeek?type=2', |
|
||||
type: 'get', |
|
||||
async: true, |
|
||||
dataType: "json", |
|
||||
complete: function (XHR, TS) { |
|
||||
if (XHR.status != 200) { |
|
||||
layer.alert("系统繁忙，稍后重试"); |
|
||||
} |
|
||||
}, |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
// 折线图 |
|
||||
var optionRecordsSeries = []; |
|
||||
for (let i = 0; i < result.depository_name.length; i++) { |
|
||||
optionRecordsSeries.push({ |
|
||||
name: result.depository_name[i], |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
data: result.data[result.depository_name[i]], |
|
||||
areaStyle: {} |
|
||||
}); |
|
||||
} |
|
||||
optionRecords = { |
|
||||
title: { |
|
||||
text: '出库仓库-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: result.depository_name |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: result.week |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: optionRecordsSeries |
|
||||
}; |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
// 获取上周 |
|
||||
form.on('submit(lastWeek)', function () { |
|
||||
$.ajax({ |
|
||||
url: '/repository/layui/echart_back_lastWeek?type=2', |
|
||||
type: 'get', |
|
||||
async: true, |
|
||||
dataType: "json", |
|
||||
complete: function (XHR, TS) { |
|
||||
if (XHR.status != 200) { |
|
||||
layer.alert("系统繁忙，稍后重试"); |
|
||||
} |
|
||||
}, |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
// 折线图 |
|
||||
var optionRecordsSeries = []; |
|
||||
for (let i = 0; i < result.depository_name.length; i++) { |
|
||||
optionRecordsSeries.push({ |
|
||||
name: result.depository_name[i], |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
data: result.data[result.depository_name[i]], |
|
||||
areaStyle: {} |
|
||||
}); |
|
||||
} |
|
||||
optionRecords = { |
|
||||
title: { |
|
||||
text: '出库仓库-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: result.depository_name |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: result.week |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: optionRecordsSeries |
|
||||
}; |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
$('body').on('click', '[data-refresh]', function () { |
|
||||
location.reload(); |
|
||||
}) |
|
||||
|
|
||||
}); |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -0,0 +1,300 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>首页三</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"> |
||||
|
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
||||
|
|
||||
|
<style> |
||||
|
.top-panel { |
||||
|
border: 1px solid #eceff9; |
||||
|
border-radius: 5px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.top-panel-number { |
||||
|
line-height: 60px; |
||||
|
font-size: 30px; |
||||
|
border-right: 1px solid #eceff9; |
||||
|
} |
||||
|
|
||||
|
.top-panel-tips { |
||||
|
line-height: 30px; |
||||
|
font-size: 12px |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!--<div class="layuimini-container">--> |
||||
|
<div class="layuimini-main"> |
||||
|
|
||||
|
|
||||
|
<div class="layui-row layui-col-space15"> |
||||
|
<div class="layui-col-xs12 layui-col-md3"> |
||||
|
|
||||
|
<div class="layui-card top-panel"> |
||||
|
<div class="layui-card-header">出库物料</div> |
||||
|
<div class="layui-card-body"> |
||||
|
<div class="layui-row layui-col-space5"> |
||||
|
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
||||
|
<div class="layui-card-header">数量</div> |
||||
|
<span th:text="${allOutCount}"></span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="layui-col-xs6 layui-col-md6 top-panel-number" th:style="'display:'+${display}"> |
||||
|
<div class="layui-card-header">金额</div> |
||||
|
<span th:text="${allOutPrice}"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="layui-col-xs12 layui-col-md3"> |
||||
|
|
||||
|
<div class="layui-card top-panel"> |
||||
|
<div class="layui-card-header">实际物料出库</div> |
||||
|
<div class="layui-card-body"> |
||||
|
<div class="layui-row layui-col-space5"> |
||||
|
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
||||
|
<div class="layui-card-header">数量</div> |
||||
|
<span th:text="${OutCount}"></span> |
||||
|
</div> |
||||
|
<div class="layui-col-xs6 layui-col-md6 top-panel-number" th:style="'display:'+${display}"> |
||||
|
<div class="layui-card-header">金额</div> |
||||
|
<span th:text="${OutPrice}"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="layui-collapse" lay-accordion> |
||||
|
|
||||
|
<div class="layui-colla-item"> |
||||
|
<h2 class="layui-colla-title">面积图</h2> |
||||
|
<div class="layui-colla-content layui-show"> |
||||
|
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
||||
|
 本周  |
||||
|
</button> |
||||
|
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
||||
|
 上周  |
||||
|
</button> |
||||
|
<select id="selectDepositoryForChart" class="form-control"> |
||||
|
|
||||
|
</select> |
||||
|
<div id="echarts-line" style="background-color:#ffffff;padding: 10px;height: 400px"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="layui-colla-item"> |
||||
|
<h2 class="layui-colla-title">旭日图</h2> |
||||
|
<div class="layui-colla-content layui-show"> |
||||
|
<div id="echarts-sunburst-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<!--</div>--> |
||||
|
|
||||
|
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
||||
|
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
||||
|
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script> |
||||
|
<script> |
||||
|
layui.use(['layer', 'element'], function () { |
||||
|
var $ = layui.jquery, |
||||
|
layer = layui.layer, |
||||
|
element = layui.element, |
||||
|
form = layui.form; |
||||
|
|
||||
|
// 旭日图 |
||||
|
var echartSunburstChart = echarts.init(document.getElementById('echarts-sunburst-chart')); |
||||
|
var optionSunburstChart = { |
||||
|
title: { |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
align: 'center' |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
align: 'center' |
||||
|
}, |
||||
|
}, |
||||
|
series: { |
||||
|
type: 'sunburst', |
||||
|
data: [], |
||||
|
radius: [0, '95%'], |
||||
|
sort: undefined, |
||||
|
emphasis: { |
||||
|
focus: 'ancestor' |
||||
|
}, |
||||
|
levels: [ |
||||
|
{}, |
||||
|
{ |
||||
|
r0: '15%', |
||||
|
r: '35%', |
||||
|
itemStyle: { |
||||
|
borderWidth: 2 |
||||
|
}, |
||||
|
label: { |
||||
|
rotate: 'tangential' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
r0: '35%', |
||||
|
r: '70%', |
||||
|
label: { |
||||
|
align: 'right' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
r0: '70%', |
||||
|
r: '72%', |
||||
|
label: { |
||||
|
position: 'outside', |
||||
|
padding: 3, |
||||
|
silent: false |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
borderWidth: 3 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
let LineChartData = {}; |
||||
|
|
||||
|
// 柱状图 |
||||
|
var echartLineChart = echarts.init(document.getElementById('echarts-line')); |
||||
|
var optionLineChart = { |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [] |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
//动态加载相关数据 |
||||
|
$.ajax({ |
||||
|
url: '/repository/layui/echart_back?type=2', |
||||
|
type: 'get', |
||||
|
async: true, |
||||
|
dataType: "json", |
||||
|
complete: function (XHR, TS) { |
||||
|
if (XHR.status !== 200) { |
||||
|
layer.alert("系统繁忙，稍后重试"); |
||||
|
} |
||||
|
}, |
||||
|
beforeSend: function () { |
||||
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
||||
|
}, |
||||
|
success: function (result) { |
||||
|
layer.close(this.layerIndex); |
||||
|
|
||||
|
if (result.code === 0) { |
||||
|
let data = result.data; |
||||
|
|
||||
|
let depositoryItem = data.depository; |
||||
|
let keys = Object.keys(depositoryItem); |
||||
|
for (let i = 0; i < keys.length; i++) { |
||||
|
let key = keys[i]; |
||||
|
$("#selectDepositoryForChart").append(new Option(key,depositoryItem[key])); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
optionSunburstChart.series.data =data.depository_data.sunburstChartData; |
||||
|
echartSunburstChart.setOption(optionSunburstChart); |
||||
|
|
||||
|
|
||||
|
LineChartData = data.depository_data.lineChartData; |
||||
|
optionLineChart.series = LineChartData[depositoryItem[keys[0]]]; |
||||
|
optionLineChart.xAxis.data = data.depository_data.week; |
||||
|
echartLineChart.setOption(optionLineChart); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
form.on('submit(thisWeek)', function () { |
||||
|
$.ajax({ |
||||
|
url: '/repository/layui/echart_back_thisWeek?type=2', |
||||
|
type: 'get', |
||||
|
async: true, |
||||
|
dataType: "json", |
||||
|
complete: function (XHR, TS) { |
||||
|
if (XHR.status !== 200) { |
||||
|
layer.alert("系统繁忙，稍后重试"); |
||||
|
} |
||||
|
}, |
||||
|
beforeSend: function () { |
||||
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
||||
|
}, |
||||
|
success: function (result) { |
||||
|
layer.close(this.layerIndex); |
||||
|
LineChartData = result.data; |
||||
|
let value = $("#selectDepositoryForChart").val(); |
||||
|
optionLineChart.series = LineChartData[value]; |
||||
|
echartLineChart.setOption(optionLineChart); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
form.on('submit(lastWeek)', function () { |
||||
|
$.ajax({ |
||||
|
url: '/repository/layui/echart_back_lastWeek?type=2', |
||||
|
type: 'get', |
||||
|
async: true, |
||||
|
dataType: "json", |
||||
|
complete: function (XHR, TS) { |
||||
|
if (XHR.status !== 200) { |
||||
|
layer.alert("系统繁忙，稍后重试"); |
||||
|
} |
||||
|
}, |
||||
|
beforeSend: function () { |
||||
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
||||
|
}, |
||||
|
success: function (result) { |
||||
|
layer.close(this.layerIndex); |
||||
|
LineChartData = result.data; |
||||
|
let value = $("#selectDepositoryForChart").val(); |
||||
|
optionLineChart.series = LineChartData[value]; |
||||
|
echartLineChart.setOption(optionLineChart); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
$('#selectDepositoryForChart').on('change', function (obj) { |
||||
|
let value = obj.target.value; |
||||
|
optionLineChart.series = LineChartData[value]; |
||||
|
echartLineChart.setOption(optionLineChart); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -1,621 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html xmlns:th="http://www.w3.org/1999/xhtml"> |
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<title>首页三</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"> |
|
||||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|
||||
<style> |
|
||||
.top-panel { |
|
||||
border: 1px solid #eceff9; |
|
||||
border-radius: 5px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.top-panel > .layui-card-body { |
|
||||
height: 60px; |
|
||||
} |
|
||||
|
|
||||
.top-panel-number { |
|
||||
line-height: 60px; |
|
||||
font-size: 30px; |
|
||||
border-right: 1px solid #eceff9; |
|
||||
} |
|
||||
|
|
||||
.top-panel-tips { |
|
||||
line-height: 30px; |
|
||||
font-size: 12px |
|
||||
} |
|
||||
</style> |
|
||||
</head> |
|
||||
<body> |
|
||||
<!--<div class="layuimini-container">--> |
|
||||
<div class="layuimini-main"> |
|
||||
|
|
||||
|
|
||||
<div class="layui-row layui-col-space15"> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">转出物料数量</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${allOutCount}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">转出物料金额</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${allOutPrice}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">出售物料数量</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${OutCount}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
|
|
||||
<div class="layui-card top-panel"> |
|
||||
<div class="layui-card-header">出库物料金额</div> |
|
||||
<div class="layui-card-body"> |
|
||||
<div class="layui-row layui-col-space5"> |
|
||||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|
||||
<span th:text="${OutPrice}"></span> |
|
||||
</div> |
|
||||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|
||||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|
||||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div class="layui-row layui-col-space15"> |
|
||||
<div class="layui-col-xs12 layui-col-md9"> |
|
||||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|
||||
 本周  |
|
||||
</button> |
|
||||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|
||||
 上周  |
|
||||
</button> |
|
||||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md3"> |
|
||||
<div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
<div class="layui-row layui-col-space15"> |
|
||||
<div class="layui-col-xs12 layui-col-md6"> |
|
||||
<div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|
||||
</div> |
|
||||
<div class="layui-col-xs12 layui-col-md6"> |
|
||||
<div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
<!--</div>--> |
|
||||
|
|
||||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|
||||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|
||||
<script> |
|
||||
layui.use(['layer'], function () { |
|
||||
var $ = layui.jquery, |
|
||||
layer = layui.layer, |
|
||||
form = layui.form; |
|
||||
/** |
|
||||
* 折线图 |
|
||||
*/ |
|
||||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|
||||
|
|
||||
var optionRecords = { |
|
||||
title: { |
|
||||
text: '仓库总量-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: [] |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: [] |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '北京仓库', |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
label: { |
|
||||
normal: { |
|
||||
show: true, |
|
||||
position: 'top' |
|
||||
} |
|
||||
}, |
|
||||
areaStyle: {}, |
|
||||
data: [] |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 玫瑰图表 |
|
||||
*/ |
|
||||
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); |
|
||||
var optionPies = { |
|
||||
title: { |
|
||||
text: '仓库分布图', |
|
||||
left: 'center' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'item', |
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
||||
}, |
|
||||
legend: { |
|
||||
orient: 'vertical', |
|
||||
left: 'left', |
|
||||
data: ['外芯仓库', '义乌仓库', '宁波仓库', '杭州仓库', '北京仓库'] |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '昨日占比', |
|
||||
type: 'pie', |
|
||||
radius: '55%', |
|
||||
center: ['50%', '60%'], |
|
||||
roseType: 'radius', |
|
||||
data: [ |
|
||||
{value: 335, name: '外芯仓库'}, |
|
||||
{value: 310, name: '义乌仓库'}, |
|
||||
{value: 234, name: '宁波仓库'}, |
|
||||
{value: 135, name: '杭州仓库'}, |
|
||||
{value: 368, name: '北京仓库'} |
|
||||
], |
|
||||
emphasis: { |
|
||||
itemStyle: { |
|
||||
shadowBlur: 10, |
|
||||
shadowOffsetX: 0, |
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 柱状图 |
|
||||
*/ |
|
||||
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|
||||
var optionDataset = { |
|
||||
legend: {}, |
|
||||
tooltip: {}, |
|
||||
dataset: { |
|
||||
dimensions: [], |
|
||||
source: [] |
|
||||
}, |
|
||||
xAxis: {type: 'category'}, |
|
||||
yAxis: {}, |
|
||||
series: [ |
|
||||
{type: 'bar'}, |
|
||||
{type: 'bar'}, |
|
||||
{type: 'bar'} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 中国地图 |
|
||||
*/ |
|
||||
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|
||||
var optionMap = { |
|
||||
legend: {}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
showContent: false |
|
||||
}, |
|
||||
dataset: { |
|
||||
source: [] |
|
||||
}, |
|
||||
xAxis: {type: 'category'}, |
|
||||
yAxis: {gridIndex: 0}, |
|
||||
grid: {top: '55%'}, |
|
||||
series: [ |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
//动态加载相关数据 |
|
||||
$.ajax({ |
|
||||
url: '/repository/layui/echart_back?type=2', |
|
||||
type: 'get', |
|
||||
async: true, |
|
||||
dataType: "json", |
|
||||
complete: function (XHR, TS) { |
|
||||
if (XHR.status !== 200) { |
|
||||
layer.alert("系统繁忙，稍后重试"); |
|
||||
} |
|
||||
}, |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
if (result.code === 0) { |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
echartsPies.setOption(optionPies); |
|
||||
echartsDataset.setOption(optionDataset); |
|
||||
echartsMap.setOption(optionMap); |
|
||||
|
|
||||
// 折线图 |
|
||||
var optionRecordsSeries = []; |
|
||||
// 饼状图 |
|
||||
var optionPiesSeries = { |
|
||||
name: '昨日占比', |
|
||||
type: 'pie', |
|
||||
radius: '55%', |
|
||||
center: ['50%', '60%'], |
|
||||
roseType: 'radius', |
|
||||
emphasis: { |
|
||||
itemStyle: { |
|
||||
shadowBlur: 10, |
|
||||
shadowOffsetX: 0, |
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
||||
} |
|
||||
}, |
|
||||
data: [] |
|
||||
} |
|
||||
// 柱状图 |
|
||||
optionDataset = { |
|
||||
legend: {}, |
|
||||
tooltip: {}, |
|
||||
dataset: { |
|
||||
dimensions: [], |
|
||||
source: [] |
|
||||
}, |
|
||||
series: [] |
|
||||
}; |
|
||||
for (let i = 0; i < result.data.depository_name.length; i++) { |
|
||||
optionRecordsSeries.push({ |
|
||||
name: result.data.depository_name[i], |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
data: result.data.depository_data.data[result.data.depository_name[i]], |
|
||||
areaStyle: {} |
|
||||
}); |
|
||||
optionPiesSeries.data.push({ |
|
||||
value: result.data.depository_data.yesterdayData[result.data.depository_name[i]], |
|
||||
name: result.data.depository_name[i] |
|
||||
}) |
|
||||
} |
|
||||
var dimensions = result.data.depository_data.sourceList[result.data.depository_data.sourceList.length - 1]; |
|
||||
optionDataset.dataset.dimensions = dimensions; |
|
||||
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { |
|
||||
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) |
|
||||
} |
|
||||
for (let i = 0; i < dimensions.length - 1; i++) { |
|
||||
optionDataset.series.push({type: 'bar'}) |
|
||||
} |
|
||||
for (let i = 0; i < result.data.depository_data.mapData.mapDataList.length; i++) { |
|
||||
optionMap.dataset.source.push(result.data.depository_data.mapData.mapDataList[i]); |
|
||||
if(i < result.data.depository_data.mapData.mapDataList.length - 1) { |
|
||||
optionMap.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'}); |
|
||||
} |
|
||||
} |
|
||||
var month = new Date().getMonth() + 1; |
|
||||
optionMap.series.push( |
|
||||
{ |
|
||||
type: 'pie', |
|
||||
// id: 'pie', |
|
||||
radius: '30%', |
|
||||
center: ['50%', '25%'], |
|
||||
label: { |
|
||||
formatter: '{b}: {@'+month+'月} ({d}%)' |
|
||||
}, |
|
||||
encode: { |
|
||||
itemName: 'product', |
|
||||
value: month+'月', |
|
||||
tooltip: month+'月' |
|
||||
} |
|
||||
} |
|
||||
); |
|
||||
optionRecords = { |
|
||||
title: { |
|
||||
text: '出库仓库-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: result.data.depository_name |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: result.data.depository_data.week |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: optionRecordsSeries |
|
||||
}; |
|
||||
optionPies = { |
|
||||
title: { |
|
||||
text: '仓库分布图', |
|
||||
left: 'center' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'item', |
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
||||
}, |
|
||||
legend: { |
|
||||
orient: 'vertical', |
|
||||
left: 'left', |
|
||||
data: result.data.depository_name |
|
||||
}, |
|
||||
series: optionPiesSeries |
|
||||
}; |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
echartsPies.setOption(optionPies); |
|
||||
echartsDataset.setOption(optionDataset); |
|
||||
echartsMap.setOption(optionMap); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
// echarts 窗口缩放自适应 |
|
||||
window.onresize = function () { |
|
||||
echartsRecords.resize(); |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
// 获取本周 |
|
||||
form.on('submit(thisWeek)', function () { |
|
||||
$.ajax({ |
|
||||
url: '/repository/layui/echart_back_thisWeek?type=2', |
|
||||
type: 'get', |
|
||||
async: true, |
|
||||
dataType: "json", |
|
||||
complete: function (XHR, TS) { |
|
||||
if (XHR.status != 200) { |
|
||||
layer.alert("系统繁忙，稍后重试"); |
|
||||
} |
|
||||
}, |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
// 折线图 |
|
||||
var optionRecordsSeries = []; |
|
||||
for (let i = 0; i < result.depository_name.length; i++) { |
|
||||
optionRecordsSeries.push({ |
|
||||
name: result.depository_name[i], |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
data: result.data[result.depository_name[i]], |
|
||||
areaStyle: {} |
|
||||
}); |
|
||||
} |
|
||||
optionRecords = { |
|
||||
title: { |
|
||||
text: '出库仓库-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: result.depository_name |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: result.week |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: optionRecordsSeries |
|
||||
}; |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
// 获取上周 |
|
||||
form.on('submit(lastWeek)', function () { |
|
||||
$.ajax({ |
|
||||
url: '/repository/layui/echart_back_lastWeek?type=2', |
|
||||
type: 'get', |
|
||||
async: true, |
|
||||
dataType: "json", |
|
||||
complete: function (XHR, TS) { |
|
||||
if (XHR.status != 200) { |
|
||||
layer.alert("系统繁忙，稍后重试"); |
|
||||
} |
|
||||
}, |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (result) { |
|
||||
layer.close(this.layerIndex); |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
// 折线图 |
|
||||
var optionRecordsSeries = []; |
|
||||
for (let i = 0; i < result.depository_name.length; i++) { |
|
||||
optionRecordsSeries.push({ |
|
||||
name: result.depository_name[i], |
|
||||
type: 'line', |
|
||||
stack: '金额', |
|
||||
data: result.data[result.depository_name[i]], |
|
||||
areaStyle: {} |
|
||||
}); |
|
||||
} |
|
||||
optionRecords = { |
|
||||
title: { |
|
||||
text: '出库仓库-报表图' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: result.depository_name |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '4%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: result.week |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value' |
|
||||
} |
|
||||
], |
|
||||
series: optionRecordsSeries |
|
||||
}; |
|
||||
echartsRecords.setOption(optionRecords); |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
$('body').on('click', '[data-refresh]', function () { |
|
||||
location.reload(); |
|
||||
}) |
|
||||
|
|
||||
}); |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
Loading…
Reference in new issue