JC34WMS.git - Gitblit

			@@ -2,30 +2,30 @@
			<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%;
			}
			<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;
			}
			.ceshi {
			display: flex;
			justify-content: space-around;
			}

			.acls {
			display: inline-block;
			width: 125px;
			height: 60px;
			}
			.acls {
			display: inline-block;
			width: 125px;
			height: 60px;
			}

			.water-ball {
			position: relative;
			@@ -40,7 +40,8 @@
			.wave {
			position: absolute;
			bottom: 0;
			left: -50%; /* 调整波浪的起始位置 */
			left: -50%;
			/* 调整波浪的起始位置 */
			width: 200%;
			height: 200%;
			background: #00bcd4;
			@@ -63,7 +64,8 @@
			font-size: 12px;
			color: #00796b;
			font-weight: bold;
			margin-bottom: 5px; /* 调整文字和百分数之间的间距 */
			margin-bottom: 5px;
			/* 调整文字和百分数之间的间距 */
			}

			.percentage {
			@@ -75,17 +77,21 @@
			.gradient-line {
			margin-top: 30px;
			width: 80%;
			height: 2px; /* 线条的高度 */
			background: linear-gradient(to right,
			#74f2e57f, /* 左边浅色 */
			#03d5c0, /* 中间深色 */
			#74f2e57f); /* 右边浅色 */
			height: 2px;
			/* 线条的高度 */
			background: linear-gradient(to right,
			#74f2e57f,
			/* 左边浅色 */
			#03d5c0,
			/* 中间深色 */
			#74f2e57f);
			/* 右边浅色 */
			opacity: 0.5;
			}



			.cuboid_group{
			.cuboid_group {
			display: flex;
			justify-content: center;
			align-items: center;
			@@ -96,11 +102,14 @@
			}

			.cuboid {
			width: 200px; /* 长方体的宽度 */
			height: 100px; /* 长方体的高度 */
			width: 200px;
			/* 长方体的宽度 */
			height: 100px;
			/* 长方体的高度 */
			position: relative;
			transform-style: preserve-3d;
			transform: rotateX(-25deg) rotateY(45deg); /* 初始旋转角度 */
			transform: rotateX(-25deg) rotateY(45deg);
			/* 初始旋转角度 */
			}

			.cuboid .face {
			@@ -113,7 +122,8 @@
			background-color: rgba(0, 123, 255, 0.8);
			border: 2px solid #007bff;
			box-sizing: border-box;
			overflow: hidden; /* 隐藏超出部分 */
			overflow: hidden;
			/* 隐藏超出部分 */
			opacity: 0.6;
			}

			@@ -121,43 +131,53 @@
			.cuboid .front {
			width: 100px;
			height: 50px;
			transform: translateZ(25px); /* 向前移动 */
			border-radius: 5px; /* 圆角 */
			transform: translateZ(25px);
			/* 向前移动 */
			border-radius: 5px;
			/* 圆角 */
			}

			/* 后面 */
			.cuboid .back {
			width: 100px;
			height: 50px;
			transform: rotateY(180deg) translateZ(25px); /* 向后移动 */
			border-radius: 5px; /* 圆角 */
			transform: rotateY(180deg) translateZ(25px);
			/* 向后移动 */
			border-radius: 5px;
			/* 圆角 */
			}

			/* 右面 */
			.cuboid .right {
			width: 50px;
			height: 50px;
			transform: rotateY(90deg) translateZ(75px); /* 向右移动 */
			border-radius: 5px; /* 圆角 */
			transform: rotateY(90deg) translateZ(75px);
			/* 向右移动 */
			border-radius: 5px;
			/* 圆角 */
			}

			/* 左面 */
			.cuboid .left {
			width: 50px;
			height: 50px;
			transform: rotateY(-90deg) translateZ(25px); /* 向左移动 */
			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; /* 圆角 */
			border-radius: 5px;
			/* 圆角 */
			}

			/* 窗户样式 */
			.cuboid .left .window {
			width: 16px; /* 窗户宽度 */
			height: 16px; /* 窗户高度 */
			width: 16px;
			/* 窗户宽度 */
			height: 16px;
			/* 窗户高度 */
			background-color: yellow;
			}

			@@ -165,71 +185,84 @@
			.cuboid .top {
			width: 100px;
			height: 50px;
			transform: rotateX(90deg) translateZ(25px); /* 向上移动 */
			border-radius: 5px; /* 圆角 */

			transform: rotateX(90deg) translateZ(25px);
			/* 向上移动 */
			border-radius: 5px;
			/* 圆角 */

			}

			/* 底面 */
			.cuboid .bottom {
			width: 100px;
			height: 50px;
			transform: rotateX(-90deg) translateZ(25px); /* 向下移动 */
			border-radius: 5px; /* 圆角 */
			transform: rotateX(-90deg) translateZ(25px);
			/* 向下移动 */
			border-radius: 5px;
			/* 圆角 */
			}

			/* 去掉表格的边框线 */
			.layui-table {
			border: none;
			}
			.layui-table th, .layui-table td {

			.layui-table th,
			.layui-table td {
			border: none;
			}

			/* 去掉表头的下边框 */
			.layui-table thead tr {
			border-bottom: none;
			}

			/* 去掉表格行的下边框 */
			.layui-table tbody tr {
			border-bottom: none;
			}
			</style>
			</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-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 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;">
			<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>
			<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;">
			<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>
			<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;">
			<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>
			<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;">
			<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>
			<label style="font-size: 32px;color: #009688;">109</label>
			</div>
			</div>
			</div>
			</div>
			<div style="width: 100%;height: 38.33%;">
			<div class="layui-card-header">
			@@ -237,70 +270,63 @@
			库存物料类型分布
			</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 id="zhuOrder"
			style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;">
			</div>
			</div>
			</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 id="yuanOrder"
			style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;">
			</div>
			</div>
			</div>
			</div>
			</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 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 style="height: 50px;line-height: 50px;font-size: 32px;color: #009688;font-weight: 600;">2270</label>
			<label style="font-size: 20px;">库位总数</label>
			<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 style="height: 50px;line-height: 50px;font-size: 32px;color: #009688;font-weight: 600;">108</label>
			<label style="font-size: 20px;">已使用库位</label>
			<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="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 class="percentage" id="allUseRate"></div>
			</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 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">
			@@ -380,19 +406,20 @@
			</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-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>
			<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">
			@@ -401,22 +428,23 @@
			</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>
			</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 id="xianOrder"
			style="width: 100%; height: 100%; display: flex; align-items: center;justify-content: center;">
			</div>
			</div>
			</div>
			</div>
			</div>
			</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>
			@@ -430,7 +458,7 @@
			}).extend({

			index: 'lib/index', //主入口模块


			});
			// 直接使用全局的 echarts
			var echarts = window.echarts;
			@@ -441,140 +469,188 @@
			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: '待验证' }
			]
			}]

			//库存物料类型分布(柱状)
			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 () { });
			}
			});
			};
			this.chartYuan.setOption(option2);


			//库存质量状态分布(饼状)
			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"));
			@@ -591,9 +667,9 @@
			data: ['入库', '出库']
			},
			grid: {
			top: '15%',
			left:'5%',
			bottom:'15%',
			top: '15%',
			left: '5%',
			bottom: '15%',
			containLabel: true
			},
			toolbox: {
			@@ -627,11 +703,77 @@
			]
			};
			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 = {
			infoOptions = {
			elem: '#LAY-app-content-list',
			height: 'full-600',
			id: 'LAY-app-content-list',
			@@ -669,7 +811,7 @@
			}, function () { });
			}
			});
			}
			}


			//安全库存预警
			@@ -684,19 +826,19 @@
			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'},
			]]
			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) {
			sendData(IP + "/Statistical/GetInventoryWarning", param, 'get', function (res) {
			if (res.code == 0) { //成功
			var list = res.data;
			$.extend(infoOptions2, {
			@@ -710,20 +852,20 @@
			layer.msg('获取低库存物料信息失败！', {
			icon: 2,
			time: 2000 //2秒关闭（如果不配置，默认是3秒）
			}, function() {});
			}, function () { });
			}
			});
			}
			}

			// 设置初始百分比
			setPercentage(50);
			// setPercentage(50);
			function setPercentage(percent) {
			const wave = $('.wave');
			const percentageText = $('.percentage');
			const waterBallHeight = $('.water-ball').height();

			// 计算波浪的高度（百分比越高，波浪越低）
			const waveHeight =(100 - percent) / 100 * waterBallHeight;
			const waveHeight = (100 - percent) / 100 * waterBallHeight;

			// 设置波浪的高度
			wave.css('top', waveHeight + 'px');