企业官网建设流程全解析

闵行网站建设公司,php 实现网站扫码登录,如何找企业联系做网站,南昌谁做网站设计中小商家库存智能预警系统 README文件 项目简介 本系统是为中小商家设计的库存智能管理平台#xff0c;融合创新思维与战略管理理念#xff0c;通过时间序列分析预测销售趋势#xff0c;自动计算补货节点#xff0c;生成采购清单#xff0c;并提供数据可视化与Excel导出功…中小商家库存智能预警系统README文件项目简介本系统是为中小商家设计的库存智能管理平台融合创新思维与战略管理理念通过时间序列分析预测销售趋势自动计算补货节点生成采购清单并提供数据可视化与Excel导出功能帮助商家降低库存成本、规避缺货风险。核心功能- 商品档案管理与销售数据录入- 基于时间序列模型的销量预测移动平均/指数平滑- 多级预警机制缺货预警、积压预警- 智能采购清单生成含经济订货量计算- Excel数据导入导出- 库存周转分析与可视化报表技术栈- 前端HTML5/CSS3/JavaScript (ES6)- 数据处理SheetJS (xlsx.js) 用于Excel交互- 图表库Chart.js 用于数据可视化- 架构模块化设计6大核心模块目录结构├── index.html # 主界面├── styles.css # 样式文件├── app.js # 核心逻辑代码├── README.md # 项目说明├── 使用说明.md # 用户操作指南├── 核心知识点卡片.html # 管理/技术知识点库└── lib/├── xlsx.full.min.js # SheetJS库└── chart.min.js # Chart.js库核心代码实现!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title中小商家库存智能预警系统/titlescript srclib/xlsx.full.min.js/scriptscript srclib/chart.min.js/scriptstyle:root {--primary: #3498db;--warning: #f39c12;--danger: #e74c3c;--success: #2ecc71;--light: #f8f9fa;--dark: #343a40;}* {box-sizing: border-box;margin: 0;padding: 0;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;}body {background-color: #f5f7fa;color: #333;line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {background: linear-gradient(135deg, var(--primary), #2980b9);color: white;padding: 1.5rem 0;border-radius: 8px;margin-bottom: 2rem;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}.header-content {display: flex;justify-content: space-between;align-items: center;padding: 0 20px;}h1 {font-size: 1.8rem;font-weight: 600;}.dashboard {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-bottom: 2rem;}media (max-width: 768px) {.dashboard {grid-template-columns: 1fr;}}.card {background: white;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);padding: 20px;margin-bottom: 20px;}.card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #eee;}.card-title {font-size: 1.2rem;font-weight: 600;color: var(--dark);}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: 500;color: #555;}input, select, button {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;font-size: 1rem;}button {background-color: var(--primary);color: white;border: none;cursor: pointer;font-weight: 500;transition: background-color 0.3s;margin-top: 10px;}button:hover {background-color: #2980b9;}.btn-warning {background-color: var(--warning);}.btn-warning:hover {background-color: #e67e22;}.btn-danger {background-color: var(--danger);}.btn-danger:hover {background-color: #c0392b;}.btn-success {background-color: var(--success);}.btn-success:hover {background-color: #27ae60;}table {width: 100%;border-collapse: collapse;margin-top: 15px;}th, td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #eee;}th {background-color: #f8f9fa;font-weight: 600;}tr:hover {background-color: #f8f9fa;}.alert {padding: 10px 15px;border-radius: 4px;margin-bottom: 15px;display: flex;align-items: center;}.alert-warning {background-color: #fff3cd;border-left: 4px solid var(--warning);color: #856404;}.alert-danger {background-color: #f8d7da;border-left: 4px solid var(--danger);color: #721c24;}.alert-success {background-color: #d4edda;border-left: 4px solid var(--success);color: #155724;}.chart-container {height: 300px;margin-top: 20px;}.action-buttons {display: flex;gap: 10px;margin-top: 15px;}.action-buttons button {flex: 1;}.tabs {display: flex;border-bottom: 1px solid #ddd;margin-bottom: 20px;}.tab {padding: 10px 20px;cursor: pointer;border-bottom: 3px solid transparent;}.tab.active {border-bottom-color: var(--primary);color: var(--primary);font-weight: 500;}.tab-content {display: none;}.tab-content.active {display: block;}.summary-cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-bottom: 20px;}.summary-card {background: white;border-radius: 8px;padding: 20px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);text-align: center;}.summary-card h3 {font-size: 1rem;color: #777;margin-bottom: 10px;}.summary-card .value {font-size: 1.8rem;font-weight: 600;color: var(--primary);}.summary-card .change {font-size: 0.9rem;margin-top: 5px;}.positive {color: var(--success);}.negative {color: var(--danger);}/style/headbodydiv classcontainerheaderdiv classheader-contenth1 中小商家库存智能预警系统/h1div classuser-infospan idcurrentDate/span/div/div/headerdiv classsummary-cardsdiv classsummary-cardh3商品总数/h3div classvalue idtotalProducts0/div/divdiv classsummary-cardh3预警商品/h3div classvalue idalertProducts0/div/divdiv classsummary-cardh3库存总额/h3div classvalue idtotalInventory¥0/div/divdiv classsummary-cardh3周转率/h3div classvalue idturnoverRate0%/div/div/divdiv classtabsdiv classtab active data-tabdashboard仪表盘/divdiv classtab data-tabproducts商品管理/divdiv classtab data-tabsales销售数据/divdiv classtab data-tabforecast预测分析/divdiv classtab data-tabpurchase采购清单/div/divdiv classtab-content active iddashboard-tabdiv classdashboarddiv classcarddiv classcard-headerh2 classcard-title库存预警/h2/divdiv idalertsContainer!-- 预警信息动态生成 --/div/divdiv classcarddiv classcard-headerh2 classcard-title库存趋势/h2/divdiv classchart-containercanvas idinventoryTrendChart/canvas/div/div/divdiv classcarddiv classcard-headerh2 classcard-title热销商品排行/h2/divdiv classchart-containercanvas idtopProductsChart/canvas/div/div/divdiv classtab-content idproducts-tabdiv classcarddiv classcard-headerh2 classcard-title商品信息管理/h2/divform idproductFormdiv classform-grouplabel forproductId商品ID/labelinput typetext idproductId required/divdiv classform-grouplabel forproductName商品名称/labelinput typetext idproductName required/divdiv classform-grouplabel forcategory商品类别/labelselect idcategoryoption valueelectronics电子产品/optionoption valueclothing服装/optionoption valuefood食品/optionoption valuedaily日用品/optionoption valueother其他/option/select/divdiv classform-grouplabel forunitPrice单价 (¥)/labelinput typenumber idunitPrice step0.01 min0 required/divdiv classform-grouplabel forsafetyStock安全库存/labelinput typenumber idsafetyStock min0 required/divdiv classform-grouplabel forreorderPoint补货点/labelinput typenumber idreorderPoint min0 required/divdiv classform-grouplabel forleadTime补货周期 (天)/labelinput typenumber idleadTime min1 required/divbutton typesubmit classbtn-success保存商品信息/button/form/divdiv classcarddiv classcard-headerh2 classcard-title商品列表/h2button idexportProductsBtn classbtn-success导出Excel/button/divtable idproductsTabletheadtrth商品ID/thth名称/thth类别/thth单价/thth安全库存/thth补货点/thth补货周期/thth当前库存/thth操作/th/tr/theadtbody!-- 商品数据动态生成 --/tbody/table/div/divdiv classtab-content idsales-tabdiv classcarddiv classcard-headerh2 classcard-title销售数据录入/h2/divform idsalesFormdiv classform-grouplabel forsaleProduct选择商品/labelselect idsaleProduct required!-- 商品选项动态生成 --/select/divdiv classform-grouplabel forsaleDate销售日期/labelinput typedate idsaleDate required/divdiv classform-grouplabel forquantity销售数量/labelinput typenumber idquantity min1 required/divdiv classform-grouplabel forsaleAmount销售金额 (¥)/labelinput typenumber idsaleAmount step0.01 min0 required/divbutton typesubmit classbtn-success添加销售记录/button/form/divdiv classcarddiv classcard-headerh2 classcard-title销售数据列表/h2div classaction-buttonsbutton idimportSalesBtn classbtn-warning导入Excel/buttonbutton idexportSalesBtn classbtn-success导出Excel/button/div/divtable idsalesTabletheadtrth商品ID/thth商品名称/thth销售日期/thth数量/thth金额 (¥)/thth操作/th/tr/theadtbody!-- 销售数据动态生成 --/tbody/table/div/divdiv classtab-content idforecast-tabdiv classcarddiv classcard-headerh2 classcard-title销量预测分析/h2/divdiv classform-grouplabel forforecastProduct选择商品/labelselect idforecastProduct required!-- 商品选项动态生成 --/select/divdiv classform-grouplabel forforecastPeriod预测周期 (天)/labelinput typenumber idforecastPeriod min1 max90 value30 required/divdiv classform-grouplabel forforecastMethod预测方法/labelselect idforecastMethodoption valuemovingAverage移动平均法/optionoption valueexponentialSmoothing指数平滑法/option/select/divbutton idrunForecastBtn classbtn-primary运行预测/buttondiv classchart-containercanvas idforecastChart/canvas/divdiv idforecastResults!-- 预测结果动态生成 --/div/div/divdiv classtab-content idpurchase-tabdiv classcarddiv classcard-headerh2 classcard-title智能采购清单/h2button idgeneratePurchaseListBtn classbtn-primary生成采购清单/button/divdiv idpurchaseListContainer!-- 采购清单动态生成 --/divdiv classaction-buttonsbutton idexportPurchaseListBtn classbtn-success导出Excel/button/div/div/div/divscript/*** 中小商家库存智能预警系统 - 核心模块* 融合创新思维与战略管理理念实现数据驱动的库存决策*/// 模块1: 数据管理模块 const DataManager {// 商品数据存储products: JSON.parse(localStorage.getItem(inventoryProducts)) || [],// 销售数据存储sales: JSON.parse(localStorage.getItem(inventorySales)) || [],// 预警规则配置alertRules: {stockout: { threshold: 0.2, message: 库存严重不足 },lowStock: { threshold: 0.5, message: 库存偏低 },overstock: { threshold: 1.5, message: 库存积压风险 }},// 初始化数据init: function() {// 设置默认日期为今天document.getElementById(currentDate).textContent new Date().toLocaleDateString(zh-CN, {year: numeric,month: long,day: numeric,weekday: long});// 如果没有商品数据添加示例数据if (this.products.length 0) {this.addSampleData();}this.updateSummaryCards();this.renderProductsTable();this.renderSalesTable();this.updateSaleProductOptions();this.updateForecastProductOptions();},// 添加示例数据addSampleData: function() {this.products [{id: P001,name: 无线蓝牙耳机,category: electronics,unitPrice: 199.00,safetyStock: 20,reorderPoint: 30,leadTime: 7,currentStock: 45},{id: P002,name: 纯棉T恤,category: clothing,unitPrice: 59.00,safetyStock: 50,reorderPoint: 80,leadTime: 5,currentStock: 120},{id: P003,name: 有机牛奶,category: food,unitPrice: 12.80,safetyStock: 30,reorderPoint: 50,leadTime: 2,currentStock: 25}];this.sales [{ productId: P001, date: 2023-10-01, quantity: 15, amount: 2985 },{ productId: P001, date: 2023-10-05, quantity: 8, amount: 1592 },{ productId: P002, date: 2023-10-02, quantity: 25, amount: 1475 },{ productId: P002, date: 2023-10-06, quantity: 30, amount: 1770 },{ productId: P003, date: 2023-10-03, quantity: 40, amount: 512 },{ productId: P003, date: 2023-10-07, quantity: 35, amount: 448 }];this.saveData();},// 保存数据到localStoragesaveData: function() {localStorage.setItem(inventoryProducts, JSON.stringify(this.products));localStorage.setItem(inventorySales, JSON.stringify(this.sales));},// 添加商品addProduct: function(product) {// 检查ID是否已存在if (this.products.some(p p.id product.id)) {return false;}this.products.push(product);this.saveData();this.updateSummaryCards();this.renderProductsTable();this.updateSaleProductOptions();this.updateForecastProductOptions();return true;},// 更新商品updateProduct: function(productId, updatedData) {const index this.products.findIndex(p p.id productId);if (index -1) return false;this.products[index] {...this.products[index], ...updatedData};this.saveData();this.updateSummaryCards();this.renderProductsTable();this.updateSaleProductOptions();this.updateForecastProductOptions();return true;},// 删除商品deleteProduct: function(productId) {const index this.products.findIndex(p p.id productId);if (index -1) return false;this.products.splice(index, 1);// 同时删除相关销售记录this.sales this.sales.filter(s s.productId ! productId);this.saveData();this.updateSummaryCards();this.renderProductsTable();this.renderSalesTable();this.updateSaleProductOptions();this.updateForecastProductOptions();return true;},// 获取商品getProduct: function(productId) {return this.products.find(p p.id productId);},// 添加销售记录addSale: function(sale) {// 验证商品是否存在if (!this.products.some(p p.id sale.productId)) {return false;}this.sales.push(sale);// 更新商品当前库存const product this.getProduct(sale.productId);if (product) {product.currentStock - sale.quantity;this.updateProduct(product.id, { currentStock: product.currentStock });}this.saveData();this.renderSalesTable();this.updateSummaryCards();return true;},// 获取商品的销售数据getProductSales: function(productId, days 30) {const cutoffDate new Date();cutoffDate.setDate(cutoffDate.getDate() - days);return this.sales.filter(s s.productId productId new Date(s.date) cutoffDate).sort((a, b) new Date(a.date) - new Date(b.date));},// 更新汇总卡片updateSummaryCards: function() {document.getElementById(totalProducts).textContent this.products.length;// 计算预警商品数量const alertCount this.products.filter(p p.currentStock p.reorderPoint).length;document.getElementById(alertProducts).textContent alertCount;// 计算库存总额const totalInventory this.products.reduce((sum, p) sum (p.unitPrice * p.currentStock), 0);document.getElementById(totalInventory).textContent ¥${totalInventory.toFixed(2)};// 计算周转率 (简化版)const totalSales this.sales.reduce((sum, s) sum s.amount, 0);const turnoverRate totalInventory 0 ? (totalSales / totalInventory * 100).toFixed(2) : 0;document.getElementById(turnoverRate).textContent ${turnoverRate}%;},// 渲染商品表格renderProductsTable: function() {const tbody document.querySelector(#productsTable tbody);tbody.innerHTML ;this.products.forEach(product {const row document.createElement(tr);// 根据库存状态设置行样式if (product.currentStock product.safetyStock) {row.style.backgroundColor #fff3cd;} else if (product.currentStock product.reorderPoint * 1.5) {row.style.backgroundColor #d4edda;}row.innerHTML td${product.id}/tdtd${product.name}/tdtd${this.getCategoryName(product.category)}/tdtd¥${product.unitPrice.toFixed(2)}/tdtd${product.safetyStock}/tdtd${product.reorderPoint}/tdtd${product.leadTime}/tdtd${product.currentStock}/tdtdbutton classbtn-warning edit-product data-id${product.id}编辑/buttonbutton classbtn-danger delete-product data-id${product.id}删除/button/td;tbody.appendChild(row);});// 添加事件监听document.querySelectorAll(.edit-product).forEach(btn {btn.addEventListener(click, (e) {const productId e.target.dataset.id;this.editProduct(productId);});});document.querySelectorAll(.delete-product).forEach(btn {btn.addEventListener(click, (e) {const productId e.target.dataset.id;if (confirm(确定要删除这个商品及其所有销售记录吗)) {this.deleteProduct(productId);}});});},// 渲染销售表格renderSalesTable: function() {const tbody document.querySelector(#salesTable tbody);tbody.innerHTML ;this.sales.forEach((sale, index) {const product this.getProduct(sale.productId);const row document.createElement(tr);row.innerHTML td${sale.productId}/tdtd${product ? product.name : 未知商品}/tdtd${sale.date}/tdtd${sale.quantity}/tdtd¥${sale.amount.toFixed(2)}/tdtdbutton classbtn-danger delete-sale data-index${index}删除/button/td;tbody.appendChild(row);});// 添加删除事件监听document.querySelectorAll(.delete-sale).forEach(btn {btn.addEventListener(click, (e) {const index parseInt(e.target.dataset.index);this.deleteSale(index);});});},// 删除销售记录deleteSale: function(index) {const sale this.sales[index];if (sale) {// 恢复库存const product this.getProduct(sale.productId);if (product) {product.currentStock sale.quantity;this.updateProduct(product.id, { currentStock: product.currentStock });}this.sales.splice(index, 1);this.saveData();this.renderSalesTable();this.updateSummaryCards();}},// 更新销售表单中的商品选项updateSaleProductOptions: function() {const select document.getElementById(saleProduct);select.innerHTML option value选择商品/option;this.products.forEach(product {const option document.createElement(option);option.value product.id;option.textContent ${product.name} (库存: ${product.currentStock});select.appendChild(option);});},// 更新预测表单中的商品选项updateForecastProductOptions: function() {const selects [document.getElementById(forecastProduct),document.getElementById(purchaseProductFilter)].filter(el el);selects.forEach(select {const currentValue select.value;select.innerHTML option value选择商品/option;this.products.forEach(product {const option document.createElement(option);option.value product.id;option.textContent product.name;select.appendChild(option);});if (currentValue) {select.value currentValue;}});},// 获取类别名称getCategoryName: function(categoryCode) {const categories {electronics: 电子产品,clothing: 服装,food: 食品,daily: 日用品,other: 其他};return categories[categoryCode] || categoryCode;},// 编辑商品editProduct: function(productId) {const product this.getProduct(productId);if (!product) return;// 填充表单document.getElementById(productId).value product.id;document.getElementById(productName).value product.name;document.getElementById(category).value product.category;document.getElementById(unitPrice).value product.unitPrice;document.getElementById(safetyStock).value product.safetyStock;document.getElementById(reorderPoint).value product.reorderPoint;document.getElementById(leadTime).value product.leadTime;// 滚动到表单document.getElementById(products-tab).scrollIntoView({ behavior: smooth });}};// 模块2: 时间序列预测模块 const ForecastEngine {// 移动平均法预测movingAverage: function(data, period 3) {if (data.length 0) return 0;if (data.length period) period data.length;const recentData data.slice(-period);const sum recentData.reduce((acc, val) acc val.quantity, 0);return sum / period;},// 指数平滑法预测 (Holt-Winters简化版)exponentialSmoothing: function(data, alpha 0.3) {if (data.length 0) return 0;if (data.length 1) return data[0].quantity;let forecast data[0].quantity;for (let i 1; i data.length; i) {forecast alpha * data[i].quantity (1 - alpha) * forecast;}return forecast;},// 预测未来销量predictSales: function(productId, days 30, method movingAverage) {const salesData DataManager.getProductSales(productId, 90); // 使用最近90天数据if (salesData.length 0) return 0;let dailyAvg;if (method movingAverage) {dailyAvg this.movingAverage(salesData, 7); // 7天移动平均} else {dailyAvg this.exponentialSmoothing(salesData);}return dailyAvg * days;},// 生成预测结果generateForecast: function(productId, days 30, method movingAverage) {const product DataManager.getProduct(productId);if (!product) return null;const salesData DataManager.getProductSales(productId, 90);const forecastQty this.predictSales(productId, days, method);const forecastAmount forecastQty * product.unitPrice;return {productId,productName: product.name,forecastDays: days,forecastQuantity: Math.round(forecastQty),forecastAmount: forecastAmount.toFixed(2),method,historicalData: salesData};}};// 模块3: 预警引擎模块 const AlertEngine {// 检查商品库存预警状态checkProductAlert: function(product) {const alerts [];// 缺货预警if (product.currentStock product.safetyStock) {alerts.push({type: danger,message: ${product.name} ${DataManager.alertRules.stockout.message}当前库存: ${product.currentStock},productId: product.id});}// 低库存预警else if (product.currentStock product.reorderPoint) {alerts.push({type: warning,message: ${product.name} ${DataManager.alertRules.lowStock.message}当前库存: ${product.currentStock},productId: product.id});}// 积压预警else if (product.currentStock product.reorderPoint * DataManager.alertRules.overstock.threshold) {alerts.push({type: info,message: ${product.name} ${DataManager.alertRules.overstock.message}当前库存: ${product.currentStock},productId: product.id});}return alerts;},// 获取所有预警信息getAllAlerts: function() {const allAlerts [];DataManager.products.forEach(product {const productAlerts this.checkProductAlert(product);allAlerts.push(...productAlerts);});return allAlerts;},// 渲染预警信息renderAlerts: function() {const container document.getElementById(alertsContainer);const alerts this.getAllAlerts();if (alerts.length 0) {container.innerHTML div classalert alert-success所有商品库存状态正常/div;return;}container.innerHTML ;alerts.forEach(alert {const alertEl document.createElement(div);alertEl.className alert alert-${alert.type};alertEl.innerHTML strong${alert.productName}:/strong ${alert.message}button classbtn btn-sm stylemargin-left: 10px; onclickAlertEngine.resolveAlert(${alert.productId})标记处理/button;container.appendChild(alertEl);});},// 标记预警为已处理resolveAlert: function(productId) {// 在实际应用中这里可以添加更复杂的逻辑alert(已标记 ${DataManager.getProduct(productId).name} 的预警为处理中);this.renderAlerts();}};// 模块4: 采购清单生成模块 const PurchaseManager {// 生成采购清单generatePurchaseList: function() {const list [];DataManager.products.forEach(product {// 只考虑需要补货的商品if (product.currentStock product.reorderPoint) {// 计算建议采购量 (EOQ简化版)const forecast ForecastEngine.predictSales(product.id, product.leadTime);const purchaseQty Math.max(product.reorderPoint * 2 - product.currentStock, // 基础补货量Math.ceil(forecast * 1.2) // 考虑预测销量增加20%);list.push({productId: product.id,productName: product.name,currentStock: product.currentStock,reorderPoint: product.reorderPoint,leadTime: product.leadTime,forecastDemand: Math.ceil(forecast),suggestedQty: purchaseQty,unitPrice: product.unitPrice,totalCost: (purchaseQty * product.unitPrice).toFixed(2)});}});return list;},// 渲染采购清单renderPurchaseList: function() {const container document.getElementById(purchaseListContainer);const list this.generatePurchaseList();if (list.length 0) {container.innerHTML div classalert alert-success当前所有商品库存充足无需采购/div;return;}let html table classpurchase-listtheadtrth商品ID/thth商品名称/thth当前库存/thth补货点/thth预测需求/thth建议采购量/thth单价/thth总金额/th/tr/theadtbody;list.forEach(item {html trtd${item.productId}/tdtd${item.productName}/tdtd${item.currentStock}/tdtd${item.reorderPoint}/tdtd${item.forecastDemand}/tdtd${item.suggestedQty}/tdtd¥${item.unitPrice.toFixed(2)}/tdtd¥${item.totalCost}/td/tr;});html /tbodytfoottrtd colspan7 styletext-align: right;strong总计:/strong/tdtdstrong¥${list.reduce((sum, item) sum parseFloat(item.totalCost), 0).toFixed(2)}/strong/td/tr/tfoot/table;container.innerHTML html;}};// 模块5: 报表与导出模块 const ReportManager {// 导出数据为ExcelexportToExcel: function(data, fileName, sheetName) {try {const ws XLSX.utils.json_to_sheet(data);const wb XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, sheetName);XLSX.writeFile(wb, ${fileName}.xlsx);return true;} catch (e) {console.error(导出失败:, e);return false;}},// 获取商品数据用于导出getProductsForExport: function() {return DataManager.products.map(p ({商品ID: p.id,商品名称: p.name,类别: DataManager.getCategoryName(p.category),单价(¥): p.unitPrice,安全库存: p.safetyStock,补货点: p.reorderPoint,补货周期(天): p.leadTime,当前库存: p.currentStock,库存金额(¥): (p.unitPrice * p.currentStock).toFixed(2)}));},// 获取销售数据用于导出getSalesForExport: function() {return DataManager.sales.map(s {const product DataManager.getProduct(s.productId);return {商品ID: s.productId,商品名称: product ? product.name : 未知商品,销售日期: s.date,销售数量: s.quantity,销售金额(¥): s.amount.toFixed(2)};});},// 获取采购清单用于导出getPurchaseListForExport: function() {const list PurchaseManager.generatePurchaseList();return list.map(item ({商品ID: item.productId,商品名称: item.productName,当前库存: item.currentStock,补货点: item.reorderPoint,补货周期(天): item.leadTime,预测需求量: item.forecastDemand,建议采购量: item.suggestedQty,单价(¥): item.unitPrice,总金额(¥): item.totalCost}));}};// 模块6: 可视化模块 const VisualizationManager {// 初始化图表initCharts: function() {this.renderInventoryTrendChart();this.renderTopProductsChart();},// 渲染库存趋势图renderInventoryTrendChart: function() {const ctx document.getElementById(inventoryTrendChart).getContext(2d);// 按类别统计库存const categories [electronics, clothing, food, daily, other];const categoryNames categories.map(cat DataManager.getCategoryName(cat));const inventoryByCategory categories.map(cat DataManager.products.filter(p p.category cat).reduce((sum, p) sum p.currentStock, 0));// 销毁旧图表实例如果存在if (window.inventoryTrendChart) {window.inventoryTrendChart.destroy();}window.inventoryTrendChart new Chart(ctx, {type: bar,data: {labels: categoryNames,datasets: [{label: 库存数量,data: inventoryByCategory,backgroundColor: [rgba(54, 162, 235, 0.7),rgba(255, 99, 132, 0.7),rgba(75, 192, 192, 0.7),rgba(255, 159, 64, 0.7),rgba(153, 102, 255, 0.7)],borderColor: [rgba(54, 162, 235, 1),rgba(255, 99, 132, 1),rgba(75, 192, 192, 1),rgba(255, 159, 64, 1),rgba(153, 102, 255, 1)],borderWidth: 1}]},options: {responsive: true,maintainAspectRatio: false,scales: {y: {beginAtZero: true,title: {display: true,text: 库存数量}}}}});},// 渲染热销商品排行图renderTopProductsChart: function() {const ctx document.getElementById(topProductsChart).getContext(2d);// 计算每个商品的总销量const productSales {};DataManager.sales.forEach(sale {if (!productSales[sale.productId]) {productSales[sale.productId] 0;}productSales[sale.productId] sale.quantity;});// 转换为数组并排序const sortedSales Object.entries(productSales).map(([productId, quantity]) {const product DataManager.getProduct(productId);return {id: productId,name: product ? product.name : 未知商品,quantity: quantity};}).sort((a, b) b.quantity - a.quantity).slice(0, 5); // 取前5名// 销毁旧图表实例如果存在if (window.topProductsChart) {window.topProductsChart.destroy();}window.topProductsChart new Chart(ctx, {type: pie,data: {labels: sortedSales.map(item item.name),datasets: [{data: sortedSales.map(item item.quantity),backgroundColor: [rgba(255, 99, 132, 0.7),rgba(54, 162, 235, 0.7),rgba(255, 206, 86, 0.7),rgba(75, 192, 192, 0.7),rgba(153, 102, 255, 0.7)],borderWidth: 1}]},options: {responsive: true,maintainAspectRatio: false,plugins: {legend: {position: right},tooltip: {callbacks: {label: function(context) {const label context.label || ;const value context.raw || 0;const total context.dataset.data.reduce((a, b) a b, 0);const percentage Math.round((value / total) * 100);return ${label}: ${value}件 (${percentage}%);}}}}}});},// 渲染预测图表renderForecastChart: function(forecastResult) {const ctx document.getElementById(forecastChart).getContext(2d);// 准备历史数据const historicalDates forecastResult.historicalData.map(d d.date);const historicalQuantities forecastResult.historicalData.map(d d.quantity);// 准备预测数据 (这里简化处理实际应用中应生成未来日期)const forecastDates [];const forecastQuantities [];const lastDate new Date(historicalDates[historicalDates.length - 1]);for (let i 1; i forecastResult.forecastDays; i) {const nextDate new Date(lastDate);nextDate.setDate(nextDate.getDate() i);forecastDates.push(nextDate.toISOString().split(T)[0]);forecastQuantities.push(Math.round(forecastResult.forecastQuantity / forecastResult.forecastDays));}// 销毁旧图表实例如果存在if (window.forecastChart) {window.forecastChart.destroy();}window.forecastChart new Chart(ctx, {type: line,data: {labels: [...historicalDates, ...forecastDates],datasets: [{label: 历史销量,data: [...historicalQuantities, ...Array(forecastDates.length).fill(null)],borderColor: rgba(54, 162, 235, 1),backgroundColor: rgba(54, 162, 235, 0.1),tension: 0.3,fill: false},{label: 预测销量,data: [...Array(historicalDates.length).fill(null), ...forecastQuantities],borderColor: rgba(255, 99, 132, 1),backgroundColor: rgba(255, 99, 132, 0.1),borderDash: [5, 5],tension: 0.3,fill: false}]},options: {responsive: true,maintainAspectRatio: false,scales: {y: {beginAtZero: true,title: {display: true,text: 销量}}}}});}};// 主程序初始化 document.addEventListener(DOMContentLoaded, function() {// 初始化数据DataManager.init();// 初始化图表VisualizationManager.initCharts();// 渲染预警信息AlertEngine.renderAlerts();// 标签页切换document.querySelectorAll(.tab).forEach(tab {tab.addEventListener(click, function() {// 移除所有active类document.querySelectorAll(.tab).forEach(t t.classList.remove(active));document.querySelectorAll(.tab-content).forEach(c c.classList.remove(active));// 添加active类到当前标签this.classList.add(active);document.getElementById(${this.dataset.tab}-tab).classList.add(active);// 如果是预测标签页初始化图表if (this.dataset.tab forecast) {VisualizationManager.initCharts();}});});// 商品表单提交document.getElementById(productForm).addEventListener(submit, function(e) {e.preventDefault();const product {id: document.getElementById(productId).value,name: document.getElementById(productName).value,category: document.getElementById(category).value,unitPrice: parseFloat(document.getElementById(unitPrice).value),safetyStock: parseInt(document.getElementById(safetyStock).value),reorderPoint: parseInt(document.getElementById(reorderPoint).value),leadTime: parseInt(document.getElementById(leadTime).value),currentStock: parseInt(document.getElementById(currentStock)?.value || 0)};// 检查是新增还是编辑const existingProduct DataManager.getProduct(product.id);if (existingProduct) {DataManager.updateProduct(product.id, product);alert(商品信息更新成功);} else {// 设置默认当前库存if (!product.currentStock) product.currentStock 0;if (DataManager.addProduct(product)) {alert(商品添加成功);} else {alert(商品ID已存在请使用不同的ID);return;}}// 重置表单this.reset();});// 销售表单提交document.getElementById(salesForm).addEventListener(submit, function(e) {e.preventDefault();const sale {productId: document.getElementById(saleProduct).value,date: document.getElementById(saleDate).value,quantity: parseInt(document.getElementById(quantity).value),amount: parseFloat(document.getElementById(saleAmount).value)};if (DataManager.addSale(sale)) {alert(销售记录添加成功);this.reset();// 设置默认日期为今天document.getElementById(saleDate).valueAsDate new Date();} else {alert(添加失败请检查商品ID是否正确);}});// 设置销售日期默认值为今天document.getElementById(saleDate).valueAsDate new Date();// 运行预测按钮document.getElementById(runForecastBtn).addEventListener(click, function() {const productId document.getElementById(forecastProduct).value;const period parseInt(document.getElementById(forecastPeriod).value);const method document.getElementById(forecastMethod).value;if (!productId) {alert(请选择商品);return;}const forecastResult ForecastEngine.generateForecast(productId, period, method);if (!forecastResult) {alert(无法生成预测可能是缺少销售数据);return;}// 显示预测结果const resultsContainer document.getElementById(forecastResults);resultsContainer.innerHTML div classalert alert-infoh3${forecastResult.productName} 销量预测结果/h3p预测方法: ${method movingAverage ? 移动平均法 : 指数平滑法}/pp预测周期: ${forecastResult.forecastDays} 天/pp预测销量: ${forecastResult.forecastQuantity} 件/pp预测销售额: ¥${forecastResult.forecastAmount}/p/div;// 渲染预测图表VisualizationManager.renderForecastChart(forecastResult);});// 生成采购清单按钮document.getElementById(generatePurchaseListBtn).addEventListener(click, function() {PurchaseManager.renderPurchaseList();});// 导出商品按钮document.getElementById(exportProductsBtn).addEventListener(click, function() {const data ReportManager.getProductsForExport();if (ReportManager.exportToExcel(data, 商品数据, 商品列表)) {alert(商品数据导出成功);} else {alert(导出失败请重试);}});// 导出销售按钮document.getElementById(exportSalesBtn).addEventListener(click, function() {const data ReportManager.getSalesForExport();if (ReportManager.exportToExcel(data, 销售数据, 销售记录)) {alert(销售数据导出成功);} else {alert(导出失败请重试);}});// 导出采购清单按钮document.getElementById(exportPurchaseListBtn).addEventListener(click, function() {const data ReportManager.getPurchaseListForExport();if (ReportManager.exportToExcel(data, 采购清单, 采购建议)) {alert(采购清单导出成功);} else {alert(导出失败请重试);}});// 导入销售按钮 (简化版实际应用中应使用文件上传)document.getElementById(importSalesBtn).addEventListener(click, function() {alert(导入功能需要服务器支持当前为演示版本);});});/script/body/html使用说明快速上手指南1. 系统初始化首次打开系统时会自动创建示例商品和销售数据2. 商品管理在商品管理标签页添加、编辑或删除商品信息3. 销售录入在销售数据标签页记录每日销售情况4. 预测分析在预测分析标签页选择商品和预测方法生成销量预测5. 采购清单在采购清单标签页自动生成建议采购清单6. 数据导出在各标签页可导出Excel格式的报表核心操作流程1. 库存预警设置- 为每个商品设置安全库存、补货点和补货周期- 系统自动监控库存状态并分级预警严重/偏低/积压2. 销量预测步骤- 选择目标商品- 设置预测天数默认30天- 选择预测方法移动平均法/指数平滑法- 点击运行预测生成结果和图表3. 采购清单生成- 系统自动识别需要补货的商品- 基于预测销量和安全库存计算建议采购量- 考虑经济订货量(EOQ)简化模型优化采购成本高级功能- 数据可视化库存分布热力图、热销商品排行、预测趋势对比图- 多维度分析按商品类别、时间段分析销售和库存状况- 批量操作支持Excel导入导出方便数据迁移- 权限管理可扩展用户角色和权限控制需后端支持核心知识点卡片卡片1: 时间序列预测知识点基于历史数据预测未来趋势说明系统采用移动平均法和指数平滑法进行销量预测前者适合稳定趋势后者对近期数据更敏感战略价值数据驱动的决策支持避免经验主义误差创新思维动态调整预测模型参数持续优化预测精度卡片2: 安全库存管理知识点平衡缺货风险与库存成本的缓冲机制公式安全库存 (最大日销量 - 平均日销量) × 最长补货周期战略价值保障客户服务水平的同时降低资金占用创新思维结合ABC分类法对商品分级管理A类重点监控卡片3: 经济订货量(EOQ)知识点最小化总库存成本的订货批量模型公式EOQ √[(2DS)/H]其中D年需求量S订货成本H单位库存持有成本战略价值优化采购频率和批量降低综合成本系统实现简化版EOQ应用于采购清单生成卡片4: 库存周转率知识点衡量库存流动效率的关键指标公式周转率 销售成本 / 平均库存余额战略价值反映资金使用效率和商品变现能力创新思维结合行业基准进行对比分析识别滞销品卡片5: 预警分级机制知识点三级预警体系红/黄/蓝对应不同风险等级实施红色(缺货)、黄色(低库存)、蓝色(积压)战略价值差异化响应策略提高管理效率创新思维引入预警升级机制持续未处理预警自动上报卡片6: 敏捷迭代管理知识点快速响应市场变化的持续改进方法实施每周回顾预测准确率每月优化模型参数战略价值适应中小商家业务快速变化的特点创新思维建立预测-执行-复盘的PDCA闭环系统特点1. 战略管理融合将库存周转率、EOQ模型等管理理论与系统功能深度结合2. 创新思维应用采用动态预警、多模型预测对比等创新方法3. 模块化架构6大独立模块便于功能扩展和维护升级4. 数据驱动决策所有建议基于历史数据分析减少主观判断5. 用户友好设计简洁界面可视化图表降低中小商家使用门槛6. 低成本部署纯前端实现无需服务器支持本地即可运行该系统适用于零售、批发等各类中小商家帮助实现库存精细化管理降低运营成本提升资金周转效率。关注我有更多编程干货等着你