<!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;">106</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;">107</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;">109</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 id="wareHouseNum"
|
style="height: 50px;line-height: 50px;font-size: 36px;color: #009688;font-weight: 600;"></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 id="stockTotal"
|
style="height: 50px;line-height: 50px;font-size: 32px;color: #009688;font-weight: 600;"></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 id="useStock"
|
style="height: 50px;line-height: 50px;font-size: 32px;color: #009688;font-weight: 600;"></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" id="allUseRate"></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 id="warehouseInfo"></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
|
|
|
|
//库存物料类型分布(柱状)
|
refreshGoodsTypeFb();
|
function refreshGoodsTypeFb() {
|
var param = {};
|
|
sendData(IP + "/Statistical/GetGoodsTypeFb", param, 'get', function (res) {
|
if (res.code == 0) { //成功
|
this.chartLine = echarts.init(document.getElementById("zhuOrder"));
|
|
var goodsType = [];
|
var seriesData = [];
|
|
// 定义颜色渐变数组
|
var colorGradients = [
|
[
|
{ offset: 0, color: '#37A2FF' },
|
{ offset: 1, color: '#9EE7FF' }
|
],
|
[
|
{ offset: 0, color: '#FF9F7F' },
|
{ offset: 1, color: '#FFD97F' }
|
],
|
[
|
{ offset: 0, color: '#73F0A0' },
|
{ offset: 1, color: '#B8F7D4' }
|
],
|
[
|
{ offset: 0, color: '#A28DFF' },
|
{ offset: 1, color: '#D5C7FF' }
|
],
|
[
|
{ offset: 0, color: '#FFD700' },
|
{ offset: 1, color: '#FFFACD' }
|
]
|
];
|
|
//正确遍历数组并处理数据
|
res.data.forEach(function (item, index) {
|
goodsType.push(item.TypeName);
|
|
//动态创建数据项，避免硬编码
|
var dataItem = {
|
value: item.TypeNum,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
colorGradients[index % colorGradients.length] // 循环使用颜色
|
),
|
borderRadius: [15, 15, 0, 0]
|
}
|
};
|
seriesData.push(dataItem);
|
});
|
|
var option = {
|
title: {
|
//text: '库存物料类型分布',
|
left: 'center',
|
textStyle: {
|
fontSize: 16,
|
fontWeight: 'bold'
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: function (params) {
|
var data = params[0];
|
return data.name + ': ' + data.value;
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: goodsType,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: {
|
interval: 0,
|
rotate: 0 // 如果分类名太长可以设置旋转
|
}
|
},
|
yAxis: {
|
type: 'value',
|
name: '数量'
|
},
|
grid: {
|
top: '15%',
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
series: [
|
{
|
data: seriesData,
|
type: 'bar',
|
barWidth: '30%',
|
showBackground: true,
|
backgroundStyle: {
|
color: 'rgba(180, 180, 180, 0.2)',
|
borderRadius: [25, 25, 0, 0]
|
},
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}'
|
}
|
}
|
]
|
};
|
this.chartLine.setOption(option);
|
|
}
|
else { //不成功
|
layer.msg('获取总量列表信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
};
|
|
|
//库存质量状态分布(饼状)
|
refreshQualityStatusFb();
|
function refreshQualityStatusFb() {
|
var param = {};
|
|
sendData(IP + "/Statistical/GetQualityStatusFb", param, 'get', function (res) {
|
if (res.code == 0) { //成功
|
//库存质量状态分布(饼状)
|
this.chartYuan = echarts.init(document.getElementById("yuanOrder"));
|
var option2 = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [{
|
name: '数量',
|
type: 'pie',
|
radius: ['40%', '75%'],
|
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: res.data.map(function (item) {
|
return {
|
name: item.TypeName,
|
value: item.TypeNum
|
};
|
})
|
}]
|
};
|
this.chartYuan.setOption(option2);
|
}
|
else { //不成功
|
layer.msg('获取总量列表信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
};
|
|
|
//获取月度出入库趋势（折线）
|
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);
|
|
|
//仓库状况总
|
refreshWarehouseState();
|
function refreshWarehouseState() {
|
var param = {
|
|
};
|
sendData(IP + "/Statistical/GetWareHouseState", param, 'get', function (res) {
|
if (res.code == 0) { //成功
|
$("#wareHouseNum").append(res.data.WarehouseNum);
|
$("#stockTotal").append(res.data.StockAllNum);
|
$("#useStock").append(res.data.StockUseNum);
|
$("#allUseRate").append(res.data.StockUseRate);
|
setPercentage(parseFloat(res.data.StockUseRate.replace('%', '')));
|
}
|
else { //不成功
|
layer.msg('获取总量列表信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
|
|
//仓库详情
|
refreshWarehouseInfo();
|
function refreshWarehouseInfo() {
|
var param = {
|
|
};
|
sendData(IP + "/Statistical/GetWareHouseStateInfo", param, 'get', function (res) {
|
if (res.code == 0) { //成功
|
var html = '';
|
res.data.forEach(function (item) {
|
html += `<div style="width: 300px;height: 120px;box-shadow: 0px 0px 10px 1px #009688; border-radius:15px;margin-top: 40px;">
|
<div class="layui-card-header"> <img src="../../img/console/xiexian.png" style="height: 20px;">${item.WarehouseName}</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;">${item.StockAllNum}</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;">${item.StockUseNum}</label>
|
<label style="font-size: 18px;">已使用</label>
|
</div>
|
</div>
|
</div>`;
|
})
|
$('#warehouseInfo').html(html);
|
}
|
else { //不成功
|
layer.msg('获取总量列表信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function () { });
|
}
|
});
|
}
|
|
|
|
|
//近一月热度物料
|
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>
|
