You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
16 KiB
412 lines
16 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<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.8.6/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 > .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-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="selectDepositoryForLineChart" 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 class="layui-colla-item">
|
|
<h2 class="layui-colla-title">出入库对比</h2>
|
|
<div class="layui-colla-content layui-show">
|
|
<select id="selectDepositoryForBarChart" class="form-control">
|
|
|
|
</select>
|
|
<div id="echarts-bar-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!--</div>-->
|
|
|
|
<script src="/static/lib/layui-v2.8.6/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
|
|
}
|
|
}
|
|
]
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
myFull: {
|
|
show: true,
|
|
title: '全屏查看',
|
|
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
|
onclick: function (e){
|
|
var opts = e.getOption();
|
|
opts.toolbox[0].feature.myFull.show=false;
|
|
//window.top表示最顶层iframe 如果在当页面全屏打开 删去window.top即可
|
|
window.top.layer.open({
|
|
title:false,
|
|
type:1,
|
|
area :["100%","100%"],
|
|
content:'<div id="fullChart" style="width: 100%;height: 100%;padding:30px 0px"></div>',
|
|
success:function(){
|
|
var fullchart = echarts.init(window.top.document.getElementById('fullChart'));
|
|
fullchart.setOption(optionLineChartIn)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
saveAsImage:{},
|
|
dataZoom: {
|
|
yAxisIndex: 'none'
|
|
},
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
let LineChartData = {};
|
|
let inBarChartData = {};
|
|
let outBarChartData = {};
|
|
|
|
// 面积图
|
|
var echartLineChart = echarts.init(document.getElementById('echarts-line'));
|
|
var optionLineChart = {
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
tooltip:{
|
|
trigger:"axis",
|
|
},
|
|
series: [],
|
|
toolbox: {
|
|
feature: {
|
|
myFull: {
|
|
show: true,
|
|
title: '全屏查看',
|
|
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
|
onclick: function (e){
|
|
var opts = e.getOption();
|
|
opts.toolbox[0].feature.myFull.show=false;
|
|
//window.top表示最顶层iframe 如果在当页面全屏打开 删去window.top即可
|
|
window.top.layer.open({
|
|
title:false,
|
|
type:1,
|
|
area :["100%","100%"],
|
|
content:'<div id="fullChart" style="width: 100%;height: 100%;padding:30px 0px"></div>',
|
|
success:function(){
|
|
var fullchart = echarts.init(window.top.document.getElementById('fullChart'));
|
|
fullchart.setOption(optionLineChartIn)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
saveAsImage:{},
|
|
dataZoom: {
|
|
yAxisIndex: 'none'
|
|
},
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
// 柱状图
|
|
var echartBarChart = echarts.init(document.getElementById('echarts-bar-chart'));
|
|
var optionBarChart = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: []
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: []
|
|
}
|
|
],
|
|
series: [],
|
|
toolbox: {
|
|
feature: {
|
|
myFull: {
|
|
show: true,
|
|
title: '全屏查看',
|
|
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
|
onclick: function (e){
|
|
var opts = e.getOption();
|
|
opts.toolbox[0].feature.myFull.show=false;
|
|
//window.top表示最顶层iframe 如果在当页面全屏打开 删去window.top即可
|
|
window.top.layer.open({
|
|
title:false,
|
|
type:1,
|
|
area :["100%","100%"],
|
|
content:'<div id="fullChart" style="width: 100%;height: 100%;padding:30px 0px"></div>',
|
|
success:function(){
|
|
var fullchart = echarts.init(window.top.document.getElementById('fullChart'));
|
|
fullchart.setOption(optionLineChartIn)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
saveAsImage:{},
|
|
dataZoom: {
|
|
yAxisIndex: 'none'
|
|
},
|
|
}
|
|
}
|
|
};
|
|
|
|
//动态加载相关数据
|
|
$.ajax({
|
|
url: '/repository/layui/echart_back?type=0',
|
|
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];
|
|
$("#selectDepositoryForLineChart").append(new Option(key, depositoryItem[key]));
|
|
$("#selectDepositoryForBarChart").append(new Option(key, depositoryItem[key]));
|
|
}
|
|
|
|
let depositoryKey = depositoryItem[keys[0]];
|
|
let week = data.depository_data.week;
|
|
|
|
|
|
optionSunburstChart.series.data = data.depository_data.sunburstChartData;
|
|
echartSunburstChart.setOption(optionSunburstChart);
|
|
|
|
|
|
LineChartData = data.depository_data.lineChartData;
|
|
optionLineChart.series = LineChartData[depositoryKey];
|
|
optionLineChart.xAxis.data = week;
|
|
echartLineChart.setOption(optionLineChart);
|
|
|
|
|
|
|
|
optionBarChart.legend.data = ["入库","出库"];
|
|
optionBarChart.yAxis[0].data = week;
|
|
inBarChartData = data.depository_data.barChartData["in"];
|
|
outBarChartData = data.depository_data.barChartData["out"];
|
|
optionBarChart.series=[inBarChartData[depositoryKey],outBarChartData[depositoryKey]];
|
|
echartBarChart.setOption(optionBarChart)
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
form.on('submit(thisWeek)', function () {
|
|
$.ajax({
|
|
url: '/repository/layui/echart_back_thisWeek?type=0',
|
|
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 = $("#selectDepositoryForLineChart").val();
|
|
optionLineChart.series = LineChartData[value];
|
|
echartLineChart.setOption(optionLineChart);
|
|
}
|
|
})
|
|
});
|
|
|
|
form.on('submit(lastWeek)', function () {
|
|
$.ajax({
|
|
url: '/repository/layui/echart_back_lastWeek?type=0',
|
|
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 = $("#selectDepositoryForLineChart").val();
|
|
optionLineChart.series = LineChartData[value];
|
|
echartLineChart.setOption(optionLineChart);
|
|
}
|
|
})
|
|
});
|
|
|
|
$('#selectDepositoryForLineChart').on('change', function (obj) {
|
|
let value = obj.target.value;
|
|
optionLineChart.series = LineChartData[value];
|
|
echartLineChart.setOption(optionLineChart);
|
|
});
|
|
|
|
|
|
$('#selectDepositoryForBarChart').on('change', function (obj) {
|
|
let value = obj.target.value;
|
|
optionBarChart.series=[inBarChartData[value],outBarChartData[value]];
|
|
echartBarChart.setOption(optionBarChart);
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|