From daf065f5894352e5b739c66fb6fa12d8d028d5c3 Mon Sep 17 00:00:00 2001
From: admin <qiutairan163@163.com>
Date: 星期二, 11 十一月 2025 11:20:03 +0800
Subject: [PATCH] 首页库存和仓库
---
HTML/views/home/console2.html | 682 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 412 insertions(+), 270 deletions(-)
diff --git a/HTML/views/home/console2.html b/HTML/views/home/console2.html
index ccfb7ba..c71b123 100644
--- a/HTML/views/home/console2.html
+++ b/HTML/views/home/console2.html
@@ -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');
--
Gitblit v1.8.0