<!DOCTYPE html>
|
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<title>智慧粮库管理系统-首页</title>
|
<link rel="stylesheet" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/>
|
<style>
|
/** 统计快捷方式样式 */
|
.console-link-block {
|
font-size: 16px;
|
padding: 20px 20px;
|
border-radius: 4px;
|
background-color: #40D4B0;
|
color: #FFFFFF !important;
|
box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
|
position: relative;
|
overflow: hidden;
|
display: block;
|
}
|
|
.console-link-block .console-link-block-num {
|
font-size: 40px;
|
margin-bottom: 5px;
|
opacity: .9;
|
}
|
|
.console-link-block .console-link-block-text {
|
opacity: .8;
|
}
|
|
.console-link-block .console-link-block-icon {
|
position: absolute;
|
top: 50%;
|
right: 20px;
|
width: 50px;
|
height: 50px;
|
font-size: 50px;
|
line-height: 50px;
|
margin-top: -25px;
|
color: #FFFFFF;
|
opacity: .8;
|
}
|
|
.console-link-block .console-link-block-band {
|
color: #fff;
|
width: 100px;
|
font-size: 12px;
|
padding: 2px 0 3px 0;
|
background-color: #E32A16;
|
line-height: inherit;
|
text-align: center;
|
position: absolute;
|
top: 8px;
|
right: -30px;
|
transform-origin: center;
|
transform: rotate(45deg) scale(.8);
|
opacity: .95;
|
z-index: 2;
|
}
|
|
/** //统计快捷方式样式 */
|
|
/** 设置每个快捷块的颜色 */
|
.layui-row > div:nth-child(2) .console-link-block {
|
background-color: #55A5EA;
|
}
|
|
.layui-row > div:nth-child(3) .console-link-block {
|
background-color: #9DAFFF;
|
}
|
|
.layui-row > div:nth-child(4) .console-link-block {
|
background-color: #F591A2;
|
}
|
|
.layui-row > div:nth-child(5) .console-link-block {
|
background-color: #FEAA4F;
|
}
|
|
.layui-row > div:last-child .console-link-block {
|
background-color: #9BC539;
|
}
|
.p-top{
|
padding-top: 15px;
|
}
|
</style>
|
</head>
|
<body>
|
<!-- 正文开始 -->
|
<div class="layui-fluid ew-console-wrapper">
|
<!-- 快捷方式 -->
|
<div class="layui-row layui-col-space15 p-top">
|
<div class="layui-col-sm3 layui-col-xs6">
|
<div class="console-link-block">
|
<div class="console-link-block-num" th:text="${mainData.orderNum}">2</div>
|
<div class="console-link-block-text">待办工单</div>
|
<i class="console-link-block-icon layui-icon layui-icon-survey"></i>
|
<div class="console-link-block-band">待处理</div>
|
</div>
|
</div>
|
<div class="layui-col-sm3 layui-col-xs6">
|
<div class="console-link-block">
|
<div class="console-link-block-num" th:text="${mainData.inSum}">0</div>
|
<div class="console-link-block-text">今日入库（吨）</div>
|
<i class="console-link-block-icon layui-icon layui-icon-form"></i>
|
<div class="console-link-block-band">去查看</div>
|
</div>
|
</div>
|
<div class="layui-col-sm3 layui-col-xs6">
|
<div class="console-link-block">
|
<div class="console-link-block-num" th:text="${mainData.outSum}">0</div>
|
<div class="console-link-block-text">今日出库（吨）</div>
|
<i class="console-link-block-icon layui-icon layui-icon-form"></i>
|
<div class="console-link-block-band">去查看</div>
|
</div>
|
</div>
|
<div class="layui-col-sm3 layui-col-xs6">
|
<div class="console-link-block">
|
<div class="console-link-block-num" th:text="${mainData.aiNum}">0</div>
|
<div class="console-link-block-text">AI事件（近7天）</div>
|
<i class="console-link-block-icon layui-icon layui-icon-chart"></i>
|
<div class="console-link-block-band">去查看</div>
|
</div>
|
</div>
|
</div>
|
|
|
<!-- 统计图表 -->
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-md4 layui-col-sm6">
|
<div class="layui-card" style="overflow: hidden;">
|
<div class="layui-card-header">日出入库统计</div>
|
<div class="layui-card-body">
|
<div id="consoleChartsDay" style="height: 300px;"></div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-col-md4 layui-col-sm6">
|
<div class="layui-card" style="overflow: hidden;">
|
<div class="layui-card-header">近7天出入库统计</div>
|
<div class="layui-card-body">
|
<div id="consoleChartsWeek" style="height: 300px;"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md4 layui-col-sm6">
|
<div class="layui-card" style="overflow: hidden;">
|
<div class="layui-card-header">近30天出入库统计</div>
|
<div class="layui-card-body">
|
<div id="consoleChartsMonth" style="height: 300px;"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header">近7天AI事件统计</div>
|
<div class="layui-card-body">
|
<div id="aiChartsWeek" style="height: 300px;"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header">近7天抓拍统计</div>
|
<div class="layui-card-body">
|
<div id="snapChartsWeek" style="height: 300px;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- js部分 -->
|
<script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script>
|
<script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
|
<script th:src="@{/ajax/libs/echarts/china.js}"></script>
|
<script th:src="@{/ajax/libs/echarts/echarts-wordcloud.min.js}"></script>
|
<script th:inline="javascript">
|
var mainData = [[${mainData}]];
|
layui.use(['layer'], function () {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
|
/** 渲染日统计图表 */
|
var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
|
var options1 = {
|
title: {
|
text: '入库车次/出库车次', x: 'center', y: '32%',
|
textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'},
|
subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
|
},
|
color: ['#10B4E8', '#FFA800'],
|
tooltip: {trigger: 'item'},
|
legend: {
|
orient: 'vertical', right: '0px', top: '0px',
|
data: ['入库车次', '出库车次'], textStyle: {color: '#595959'}
|
},
|
series: [{name: '数量', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}]
|
};
|
myCharts1.setOption(options1);
|
// 赋值
|
myCharts1.setOption({
|
title: {subtext: mainData.inNumDay + "/" + mainData.outNumDay}, series: [{data: [{name: '入库车次', value: mainData.inNumDay}, {name: '出库车次', value: mainData.outNumDay}]}]
|
});
|
|
/** 渲染周统计图表 */
|
var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek'));
|
var options2 = {
|
tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
|
color: ['#10B4E8', '#FFA800'],
|
legend: {
|
orient: 'vertical', right: '0px', top: '0px',
|
data: ['入库车次', '出库车次'], textStyle: {color: '#595959'}
|
},
|
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
xAxis: {
|
name: '日期',
|
nameTextStyle: {color: '#595959'},
|
type: 'category',
|
data: mainData.weekDateList,
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
axisTick: {alignWithLabel: true}
|
},
|
yAxis: {
|
name: '数量',
|
nameTextStyle: {color: '#595959'},
|
type: 'value',
|
boundaryGap: ['0', '20%'],
|
axisTick: {show: false},
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
splitLine: {show: false},
|
splitArea: {show: false},
|
minInterval: 1
|
},
|
series: [{
|
name: '入库车次', type: 'bar', stack: 'one', barMaxWidth: '30px',
|
label: {normal: {show: true, position: 'inside'}}
|
}, {
|
name: '出库车次', type: 'bar', stack: 'one', barMaxWidth: '30px',
|
label: {normal: {show: true, position: 'inside'}}
|
}]
|
};
|
myCharts2.setOption(options2);
|
// 赋值
|
myCharts2.setOption({series: [{data: mainData.weekInNumList}, {data: mainData.weekOutNumList}]});
|
|
/** 渲染月统计图表 */
|
var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
|
var options3 = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {lineStyle: {color: '#E0E0E0'}},
|
formatter: '{b}号<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#10B4E8;"></span>{a0}: {c0}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA800;"></span>{a1}: {c1}'
|
},
|
color: ['#10B4E8', '#FFA800'],
|
legend: {
|
orient: 'vertical', right: '0px', top: '0px',
|
data: ['入库车次', '出库车次'], textStyle: {color: '#595959'}
|
},
|
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
xAxis: {
|
name: '日期',
|
nameTextStyle: {color: '#595959'},
|
type: 'category',
|
data: mainData.monthDateList,
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {
|
color: '#8c8c8c', interval: function (index, value) {
|
return index === 0 || ((index + 1) % 5 === 0);
|
}
|
},
|
axisTick: {alignWithLabel: true}
|
},
|
yAxis: {
|
name: '数量',
|
nameTextStyle: {color: '#595959'},
|
type: 'value',
|
boundaryGap: ['0', '20%'],
|
axisTick: {show: false},
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
splitLine: {show: false},
|
splitArea: {show: false},
|
minInterval: 1
|
},
|
series: [
|
{name: '入库车次', type: 'line', smooth: false},
|
{name: '出库车次', type: 'line', smooth: false}
|
]
|
};
|
myCharts3.setOption(options3);
|
// 赋值
|
myCharts3.setOption({
|
series: [
|
{data: mainData.monthInNumList},
|
{data: mainData.monthOutNumList}
|
]
|
});
|
|
/** 渲染周统计图表 */
|
var myCharts4 = echarts.init(document.getElementById('aiChartsWeek'));
|
var options4 = {
|
tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
|
color: ['#10B4E8'],
|
legend: {
|
orient: 'vertical', right: '0px', top: '0px',
|
data: ['AI事件数'], textStyle: {color: '#595959'}
|
},
|
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
xAxis: {
|
name: '日期',
|
nameTextStyle: {color: '#595959'},
|
type: 'category',
|
data: mainData.weekAiDateList,
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
axisTick: {alignWithLabel: true}
|
},
|
yAxis: {
|
name: '数量',
|
nameTextStyle: {color: '#595959'},
|
type: 'value',
|
boundaryGap: ['0', '20%'],
|
axisTick: {show: false},
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
splitLine: {show: false},
|
splitArea: {show: false},
|
minInterval: 1
|
},
|
series: [{
|
name: 'AI事件', type: 'bar', stack: 'one', barMaxWidth: '30px',
|
label: {normal: {show: true, position: 'inside'}}
|
}]
|
};
|
myCharts4.setOption(options4);
|
// 赋值
|
myCharts4.setOption({series: [{data: mainData.weekAiNumList}]});
|
|
/** 渲染周统计图表 */
|
var myCharts5 = echarts.init(document.getElementById('snapChartsWeek'));
|
var options5 = {
|
tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
|
color: ['#FFA800'],
|
legend: {
|
orient: 'vertical', right: '0px', top: '0px',
|
data: ['抓拍数'], textStyle: {color: '#595959'}
|
},
|
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
xAxis: {
|
name: '日期',
|
nameTextStyle: {color: '#595959'},
|
type: 'category',
|
data: mainData.weekSnapDateList,
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
axisTick: {alignWithLabel: true}
|
},
|
yAxis: {
|
name: '数量',
|
nameTextStyle: {color: '#595959'},
|
type: 'value',
|
boundaryGap: ['0', '20%'],
|
axisTick: {show: false},
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
axisLabel: {color: '#8c8c8c'},
|
splitLine: {show: false},
|
splitArea: {show: false},
|
minInterval: 1
|
},
|
series: [{
|
name: '抓拍信息', type: 'bar', stack: 'one', barMaxWidth: '30px',
|
label: {normal: {show: true, position: 'inside'}}
|
}]
|
};
|
myCharts5.setOption(options5);
|
// 赋值
|
myCharts5.setOption({series: [{data: mainData.weekSnapNumList}]});
|
|
/** 窗口大小改变事件 */
|
window.onresize = function () {
|
myCharts1.resize();
|
myCharts2.resize();
|
myCharts3.resize();
|
myCharts4.resize();
|
myCharts5.resize();
|
};
|
|
});
|
|
</script>
|
</body>
|
</html>
|
