<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<title>layuiAdmin 控制台主页一</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
|
<style type="text/css">
|
html,
|
body {
|
height: 100%;
|
}
|
|
.ceshi {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.acls {
|
display: inline-block;
|
width: 125px;
|
height: 60px;
|
}
|
|
.water-ball {
|
position: relative;
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
background-color: #e0f7fa;
|
overflow: hidden;
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
}
|
|
.wave {
|
position: absolute;
|
bottom: 0;
|
left: -50%; /* 调整波浪的起始位置 */
|
width: 200%;
|
height: 200%;
|
background: #00bcd4;
|
border-radius: 50%;
|
}
|
|
.text-container {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.label {
|
font-size: 12px;
|
color: #00796b;
|
font-weight: bold;
|
margin-bottom: 5px; /* 调整文字和百分数之间的间距 */
|
}
|
|
.percentage {
|
font-size: 18px;
|
color: #00796b;
|
font-weight: bold;
|
}
|
|
.gradient-line {
|
margin-top: 30px;
|
width: 80%;
|
height: 2px; /* 线条的高度 */
|
background: linear-gradient(to right,
|
#74f2e57f, /* 左边浅色 */
|
#03d5c0, /* 中间深色 */
|
#74f2e57f); /* 右边浅色 */
|
opacity: 0.5;
|
}
|
|
|
|
.cuboid_group{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100px;
|
width: 115px;
|
margin: 0;
|
perspective: 1000px;
|
}
|
|
.cuboid {
|
width: 200px; /* 长方体的宽度 */
|
height: 100px; /* 长方体的高度 */
|
position: relative;
|
transform-style: preserve-3d;
|
transform: rotateX(-25deg) rotateY(45deg); /* 初始旋转角度 */
|
}
|
|
.cuboid .face {
|
position: absolute;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 20px;
|
color: white;
|
background-color: rgba(0, 123, 255, 0.8);
|
border: 2px solid #007bff;
|
box-sizing: border-box;
|
overflow: hidden; /* 隐藏超出部分 */
|
opacity: 0.6;
|
}
|
|
/* 前面 */
|
.cuboid .front {
|
width: 100px;
|
height: 50px;
|
transform: translateZ(25px); /* 向前移动 */
|
border-radius: 5px; /* 圆角 */
|
}
|
|
/* 后面 */
|
.cuboid .back {
|
width: 100px;
|
height: 50px;
|
transform: rotateY(180deg) translateZ(25px); /* 向后移动 */
|
border-radius: 5px; /* 圆角 */
|
}
|
|
/* 右面 */
|
.cuboid .right {
|
width: 50px;
|
height: 50px;
|
transform: rotateY(90deg) translateZ(75px); /* 向右移动 */
|
border-radius: 5px; /* 圆角 */
|
}
|
|
/* 左面 */
|
.cuboid .left {
|
width: 50px;
|
height: 50px;
|
transform: rotateY(-90deg) translateZ(25px); /* 向左移动 */
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
align-content: space-around;
|
background-color: rgba(0, 123, 255, 0.8);
|
border-radius: 5px; /* 圆角 */
|
}
|
|
/* 窗户样式 */
|
.cuboid .left .window {
|
width: 16px; /* 窗户宽度 */
|
height: 16px; /* 窗户高度 */
|
background-color: yellow;
|
}
|
|
/* 顶面 */
|
.cuboid .top {
|
width: 100px;
|
height: 50px;
|
transform: rotateX(90deg) translateZ(25px); /* 向上移动 */
|
border-radius: 5px; /* 圆角 */
|
|
}
|
|
/* 底面 */
|
.cuboid .bottom {
|
width: 100px;
|
height: 50px;
|
transform: rotateX(-90deg) translateZ(25px); /* 向下移动 */
|
border-radius: 5px; /* 圆角 */
|
}
|
|
/* 去掉表格的边框线 */
|
.layui-table {
|
border: none;
|
}
|
.layui-table th, .layui-table td {
|
border: none;
|
}
|
/* 去掉表头的下边框 */
|
.layui-table thead tr {
|
border-bottom: none;
|
}
|
/* 去掉表格行的下边框 */
|
.layui-table tbody tr {
|
border-bottom: none;
|
}
|
</style>
|
</head>
|
|
<body>
|
<!-- background: radial-gradient(circle,#bce2aa, #6ce6da); -->
|
<div class="layui-fluid" style="padding: 10px;height: 97%;">
|
<div class="layui-row layui-col-space15" style="height: 100%;">
|
<!-- 左 -->
|
<div class="layui-col-md4" style="height: 100%;margin-top: 10px;">
|
<div class="layui-card" style="height: 100%;border-radius: 15px;box-shadow: 0px 0px 10px 1px #a4a3a3;">
|
<div style="width: 100%;height: 23.33%;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
系统监控
|
</div>
|
<div class="layui-card-body" style="padding-top: 0px; height: 90%;display: flex; justify-content: space-between; ">
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<img src="../../img/console/zaixianyonghu.png" style="width: 30px;">
|
<label style="height: 35px;line-height: 35px;">在线用户数</label>
|
<label style="font-size: 32px;color: #009688;">108</label>
|
</div>
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<img src="../../img/console/PDA.png" style="width: 30px;">
|
<label style="height: 35px;line-height: 35px;">接入PDA数</label>
|
<label style="font-size: 32px;color: #009688;">108</label>
|
</div>
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<img src="../../img/console/pc.png" style="width: 30px;">
|
<label style="height: 35px;line-height: 35px;">接入PC数</label>
|
<label style="font-size: 32px;color: #009688;">108</label>
|
</div>
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<img src="../../img/console/dayinji.png" style="width: 30px;">
|
<label style="height: 35px;line-height: 35px;">接入打印机数</label>
|
<label style="font-size: 32px;color: #009688;">108</label>
|
</div>
|
</div>
|
</div>
|
<div style="width: 100%;height: 38.33%;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
库存物料类型分布
|
</div>
|
<div class="layui-card-body" style="padding: 0;height: 100%;">
|
<div id="zhuOrder" style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;">
|
</div>
|
</div>
|
</div>
|
<div style="width: 100%;height: 38.33%;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
库存质量状态分布
|
</div>
|
<div class="layui-card-body" style="padding: 0;height: 90%;">
|
<div id="yuanOrder" style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 中 -->
|
<div class="layui-col-md4" style="height: 100%;margin-top: 10px;">
|
<div style="width: 100%;height: 15%;">
|
<div class="layui-card-body" style="padding-top: 0px; height: 100%;display: flex; justify-content: space-between;">
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<label style="height: 50px;line-height: 50px;font-size: 36px;color: #009688;font-weight: 600;">5</label>
|
<label style="font-size: 20px;">库区总数</label>
|
</div>
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<label style="height: 50px;line-height: 50px;font-size: 32px;color: #009688;font-weight: 600;">2270</label>
|
<label style="font-size: 20px;">库位总数</label>
|
</div>
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px;width: 100px;">
|
<label style="height: 50px;line-height: 50px;font-size: 32px;color: #009688;font-weight: 600;">108</label>
|
<label style="font-size: 20px;">已使用库位</label>
|
</div>
|
<div class="mokuan"style="display: flex;justify-content: center;align-items: center;height: 100px;margin: 0;">
|
<div class="water-ball">
|
<div class="wave"></div>
|
<div class="text-container">
|
<div class="label">总利用率</div>
|
<div class="percentage">50%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="width: 100%;height: 85%;display: flex; align-items: center;flex-direction: column;">
|
|
<div class="gradient-line"></div>
|
|
<div style="width: 300px;height: 120px;box-shadow: 0px 0px 10px 1px #009688; border-radius:15px;margin-top: 30px;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
原辅料仓库,常温库区
|
</div>
|
<div class="layui-card-body" style="padding-top: 0px; height: 90%;display: flex; justify-content: space-between; ">
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60px;width: 100px;">
|
<label style="height: 50px;line-height: 50px;font-size: 28px;color: #009688;font-weight: 600;">1008</label>
|
<label style="font-size: 18px;">库位总数</label>
|
</div>
|
<div class="mokuan"style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60px;width: 100px;">
|
<label style="height: 50px;line-height: 50px;font-size: 28px;color: #009688;font-weight: 600;">270</label>
|
<label style="font-size: 18px;">已使用</label>
|
</div>
|
|
</div>
|
</div>
|
|
<!-- <div style="width: auto;height: 220px;display: grid;align-items: center; justify-content: center; grid-template-columns: repeat(3, 1fr); gap: 10px;margin-top: 30px;">
|
<div class="cuboid_group">
|
<div class="cuboid">
|
<div class="face front"></div>
|
<div class="face back"></div>
|
<div class="face right"></div>
|
<div class="face left">
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
</div>
|
<div class="face top"></div>
|
<div class="face bottom"></div>
|
</div>
|
</div>
|
<div class="cuboid_group">
|
<div class="cuboid">
|
<div class="face front"></div>
|
<div class="face back"></div>
|
<div class="face right"></div>
|
<div class="face left">
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
</div>
|
<div class="face top"></div>
|
<div class="face bottom"></div>
|
</div>
|
</div>
|
<div class="cuboid_group">
|
<div class="cuboid">
|
<div class="face front"></div>
|
<div class="face back"></div>
|
<div class="face right"></div>
|
<div class="face left">
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
</div>
|
<div class="face top"></div>
|
<div class="face bottom"></div>
|
</div>
|
</div>
|
<div class="cuboid_group">
|
<div class="cuboid">
|
<div class="face front"></div>
|
<div class="face back"></div>
|
<div class="face right"></div>
|
<div class="face left">
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
</div>
|
<div class="face top"></div>
|
<div class="face bottom"></div>
|
</div>
|
</div>
|
<div class="cuboid_group">
|
<div class="cuboid">
|
<div class="face front"></div>
|
<div class="face back"></div>
|
<div class="face right"></div>
|
<div class="face left">
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
<div class="window"></div>
|
</div>
|
<div class="face top"></div>
|
<div class="face bottom"></div>
|
</div>
|
</div>
|
|
</div> -->
|
</div>
|
</div>
|
<!-- 右 -->
|
<div class="layui-col-md4" style="height: 100%;margin-top: 10px;">
|
<div class="layui-card" style="height: 100%;border-radius: 15px;box-shadow: 0px 0px 10px 1px #a4a3a3;">
|
<div style="width: 100%;height: 33.33%;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
近一月热度物料
|
</div>
|
<div class="layui-card-body" style="padding: 0;height: 90%;width: 90%;margin-left: 5%;">
|
<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"border="0" cellpadding="0" cellspacing="0"></table>
|
</div>
|
</div>
|
<div style="width: 100%;height: 33.33%;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
安全库存预警
|
</div>
|
<div class="layui-card-body" style="padding: 0;height: 90%;width: 90%;margin-left: 5%;">
|
<table id="LAY-app-content-list2" lay-filter="LAY-app-content-list2"></table>
|
</div>
|
</div>
|
<div style="width: 100%;height: 33.33%;">
|
<div class="layui-card-header">
|
<img src="../../img/console/xiexian.png" style="height: 20px;">
|
月度出入库趋势
|
</div>
|
<div class="layui-card-body" style="padding: 0;height: 90%;">
|
<div id="xianOrder" style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script src="../../layuiadmin/layui/layui.js?t=1"></script>
|
<script src="../../layuiadmin/layui/layui.js?t=1"></script>
|
<script src="../../js/jquery-3.5.1.min.js"></script>
|
<script src="../../js/jquery.cookie.js"></script>
|
<script src="../../js/public.js"></script>
|
<script src="../../layuiadmin/echarts/echarts.min.js"></script>
|
<script>
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
|
index: 'lib/index', //主入口模块
|
|
});
|
// 直接使用全局的 echarts
|
var echarts = window.echarts;
|
|
layui.use(['index', 'console', 'table', 'laypage', 'layer'], function () {
|
var table = layui.table,
|
form = layui.form,
|
laypage = layui.laypage,
|
layer = layui.layer
|
|
//库存物料类型分布(柱状)
|
this.chartLine = echarts.init(document.getElementById("zhuOrder"));
|
option = {
|
xAxis: {
|
type: 'category',
|
data: ['成品', '原料', '外包材', '内包材', '中间品', '耗材'],
|
axisLine: { show: false }, // 隐藏 x 轴线
|
axisTick: { show: false }, // 隐藏 x 轴刻度线
|
},
|
yAxis: {
|
type: 'value'
|
},
|
grid: {
|
top:'5%',
|
containLabel: true
|
},
|
series: [
|
{
|
data: [
|
{
|
value: 120,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#37A2FF' },
|
{ offset: 1, color: '#9EE7FF' }
|
]),
|
borderRadius: [15, 15, 0, 0]
|
}
|
},
|
{
|
value: 200,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#FF9F7F' },
|
{ offset: 1, color: '#FFD97F' }
|
]),
|
borderRadius: [15, 15, 0, 0]
|
}
|
},
|
{
|
value: 150,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#73F0A0' },
|
{ offset: 1, color: '#B8F7D4' }
|
]),
|
borderRadius: [15, 15, 0, 0]
|
}
|
},
|
{
|
value: 80,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#FF6B6B' },
|
{ offset: 1, color: '#FFA8A8' }
|
]),
|
borderRadius: [15, 15, 0, 0]
|
}
|
},
|
{
|
value: 70,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#A28DFF' },
|
{ offset: 1, color: '#D5C7FF' }
|
]),
|
borderRadius: [15, 15, 0, 0]
|
}
|
},
|
{
|
value: 110,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#FFD700' },
|
{ offset: 1, color: '#FFFACD' }
|
]),
|
borderRadius: [15, 15, 0, 0]
|
}
|
}
|
],
|
type: 'bar',
|
barWidth: '30%',
|
showBackground: true,
|
backgroundStyle: {
|
color: 'rgba(180, 180, 180, 0.2)',
|
borderRadius: [25, 25, 0, 0]
|
}
|
}
|
]
|
};
|
this.chartLine.setOption(option);
|
|
|
//库存质量状态分布(饼状)
|
this.chartYuan = echarts.init(document.getElementById("yuanOrder"));
|
var option2;
|
|
option2 = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: '数量',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
show: true, // 显示标签
|
position: 'outside', // 标签位置在饼图外部
|
formatter: '{b}: {c} ({d}%)' // 标签格式，显示名称、值和百分比
|
},
|
labelLine: {
|
show: true, // 显示引导线
|
length: 20, // 第一段引导线的长度
|
length2: 30 // 第二段引导线的长度
|
},
|
data: [
|
{ value: 1048, name: '合格' },
|
{ value: 735, name: '不合格' },
|
{ value: 580, name: '待验证' }
|
]
|
}]
|
};
|
this.chartYuan.setOption(option2);
|
|
//获取月度出入库趋势（折线）
|
this.chartXian = echarts.init(document.getElementById("xianOrder"));
|
var option3;
|
|
option3 = {
|
title: {
|
text: ''
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['入库', '出库']
|
},
|
grid: {
|
top: '15%',
|
left:'5%',
|
bottom:'15%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
//saveAsImage: {}//保存图片
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
axisLine: { show: false }, // 隐藏 x 轴线
|
axisTick: { show: false }, // 隐藏 x 轴刻度线
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
name: '入库',
|
type: 'line',
|
stack: 'Total',
|
data: [120, 132, 101, 134, 90, 230, 210]
|
},
|
{
|
name: '出库',
|
type: 'line',
|
stack: 'Total',
|
data: [220, 182, 191, 234, 290, 330, 310]
|
}
|
]
|
};
|
this.chartXian.setOption(option3);
|
|
//近一月热度物料
|
refreshTable();
|
function refreshTable() {
|
infoOptions = {
|
elem: '#LAY-app-content-list',
|
height: 'full-600',
|
id: 'LAY-app-content-list',
|
page: false,
|
limit: pageCnt,
|
limits: pageLimits,
|
cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
even: true,
|
cols: [[
|
{ field: '', title: '序号', type: 'numbers' },
|
{ field: 'SkuName', title: '物料名称', align: 'center' },
|
{ field: 'RQty', title: '入库数量', align: 'center' },
|
{ field: 'CQty', title: '出库数量', align: 'center' },
|
]]
|
};
|
|
var param = {
|
|
};
|
sendData(IP + "/Statistical/GetTotalRecord", param, 'get', function (res) {
|
if (res.code == 0) { //成功
|
var list = res.data;
|
$.extend(infoOptions, {
|
data: list
|
});
|
// infoOptions.page = {
|
// curr: 1
|
// }
|
tableIns = table.render(infoOptions);
|
}
|
else { //不成功
|
layer.msg('获取总量列表信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
|
|
//安全库存预警
|
refreshTable2();
|
function refreshTable2() {
|
infoOptions2 = {
|
elem: '#LAY-app-content-list2',
|
height: 'full-600',
|
id: 'LAY-app-content-list2',
|
page: false,
|
limit: pageCnt,
|
limits: pageLimits,
|
cellMinWidth: 60, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
even: true,
|
cols:[[
|
{field: '',title: '序号',type:'numbers',fixed: 'left', "disabled": true},
|
{field: 'SkuNo', title: '物料编码', align: 'center'},
|
{field: 'SkuName', title: '物料名称', align: 'center'},
|
{title: '批次', field: 'LotNo', align: 'center'},
|
{field: 'ResidueQty', title: '剩余数量', align: 'center'},
|
]]
|
};
|
|
var param = {
|
};
|
|
sendData(IP + "/Statistical/GetInventoryWarning", param, 'get', function(res) {
|
if (res.code == 0) { //成功
|
var list = res.data;
|
$.extend(infoOptions2, {
|
data: list
|
});
|
// infoOptions2.page = {
|
// curr: 1
|
// }
|
tableIns = table.render(infoOptions2);
|
} else { //不成功
|
layer.msg('获取低库存物料信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function() {});
|
}
|
});
|
}
|
|
// 设置初始百分比
|
setPercentage(50);
|
function setPercentage(percent) {
|
const wave = $('.wave');
|
const percentageText = $('.percentage');
|
const waterBallHeight = $('.water-ball').height();
|
|
// 计算波浪的高度（百分比越高，波浪越低）
|
const waveHeight =(100 - percent) / 100 * waterBallHeight;
|
|
// 设置波浪的高度
|
wave.css('top', waveHeight + 'px');
|
|
// 更新显示的百分比
|
percentageText.text(percent + '%');
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
