From 2d03c3f24a6efdaf0e632afa3c0cb29664cd72d5 Mon Sep 17 00:00:00 2001 From: TS-QD1 Date: Wed, 2 Jul 2025 18:26:11 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/static/route/pages/index.html | 5 +- .../resources/static/route/pages/index.html | 5 +- .../assets/crpm/index/index7/index7.css | 2 +- .../resources/static/route/pages/index.html | 1297 +++++++++++++---- .../resources/static/route/pages/index.html | 1224 +++++++++++++--- 5 files changed, 2016 insertions(+), 517 deletions(-) diff --git a/cjscdsjkbpt/src/main/resources/static/route/pages/index.html b/cjscdsjkbpt/src/main/resources/static/route/pages/index.html index 6d514cc..5e56093 100644 --- a/cjscdsjkbpt/src/main/resources/static/route/pages/index.html +++ b/cjscdsjkbpt/src/main/resources/static/route/pages/index.html @@ -425,7 +425,7 @@
-
+
@@ -772,6 +772,9 @@
+
+ +
diff --git a/cxywztglxt/src/main/resources/static/route/pages/index.html b/cxywztglxt/src/main/resources/static/route/pages/index.html index 26391fc..4f61a51 100644 --- a/cxywztglxt/src/main/resources/static/route/pages/index.html +++ b/cxywztglxt/src/main/resources/static/route/pages/index.html @@ -425,7 +425,7 @@
-
+
@@ -721,6 +721,9 @@
+
+ +
diff --git a/gcckglxt/src/main/resources/static/assets/crpm/index/index7/index7.css b/gcckglxt/src/main/resources/static/assets/crpm/index/index7/index7.css index 47f7564..f94f783 100644 --- a/gcckglxt/src/main/resources/static/assets/crpm/index/index7/index7.css +++ b/gcckglxt/src/main/resources/static/assets/crpm/index/index7/index7.css @@ -191,7 +191,7 @@ width: 100%; height: 100%; /* padding: 10px; */ - background-color: #fff; + overflow: auto; } .page-iframe{ width: 100%; diff --git a/gcckglxt/src/main/resources/static/route/pages/index.html b/gcckglxt/src/main/resources/static/route/pages/index.html index e630651..cc8c5f2 100644 --- a/gcckglxt/src/main/resources/static/route/pages/index.html +++ b/gcckglxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,366 @@ +
@@ -68,33 +428,324 @@
-
欢迎使用工厂仓库管理系统
-
-
-
-
-
-
-
-
-
-
+ +
+ +
+
+ + +
+
+ + +
+
-
-
-
-
-
-
-
- -
+ +
+ +
+
+
今日采购金额
+
+ +
+
+
¥286,540
+
+ 8.2% 相比昨日 +
+
+ + +
+
+
生产完成率
+
+ +
+
+
92.7%
+
+ 3.2% 相比昨日 +
+
+ + +
+
+
库存周转率
+
+ +
+
+
3.8次/月
+
+ 0.5 相比上月 +
+
+ + +
+
+
准时交付率
+
+ +
+
+
95.6%
+
+ 1.8% 相比上月 +
+
+
+ + +
+ +
+
+ 采购趋势分析 +
+ + +
+
+
+
+ + +
+
+ 库存状态分布 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 生产进度跟踪 +
+ + +
+
+
+
+ + +
+
+ 供应商评分 +
+ + +
+
+
+
+
+ + +
+
+ 最近采购订单 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
订单号供应商商品名称数量单价总金额采购人日期状态
PO20230601电子元件有限公司CPU-A123500¥350.00¥175,000.00张三2023-06-15已完成
PO20230602塑料模具厂外壳-B4561000¥45.00¥45,000.00李四2023-06-15已完成
PO20230603电路板科技公司PCB-C789800¥85.00¥68,000.00王五2023-06-14进行中
PO20230604显示屏供应商屏幕-D234300¥120.00¥36,000.00赵六2023-06-14进行中
PO20230605电池供应商电池-E5671200¥22.00¥26,400.00钱七2023-06-13待付款
+
+
+ + +
+
+ 库存状态监控 +
+ + + +
+
+
+
+
+
+
+
CPU-A123
+
ID: SP-001
+
+
+
+
充足
+
当前库存: 1250 / 安全库存: 500
+
+
+ +
+
+
+
+
外壳-B456
+
ID: SP-002
+
+
+
+
低库存
+
当前库存: 320 / 安全库存: 500
+
+
+ +
+
+
+
+
PCB-C789
+
ID: SP-003
+
+
+
+
紧急补货
+
当前库存: 180 / 安全库存: 400
+
+
+ +
+
+
+
+
屏幕-D234
+
ID: SP-004
+
+
+
+
充足
+
当前库存: 850 / 安全库存: 300
+
+
+ +
+
+
+
+
电池-E567
+
ID: SP-005
+
+
+
+
低库存
+
当前库存: 420 / 安全库存: 500
+
+
+
+
+ +
+ +
@@ -130,297 +781,353 @@ homepage.style.display = 'none'; }); }); - // 饼状图1 - var pieChartOne = echarts.init(document.getElementById('pieChartOne')); - var optionPieOne = { - animation: false, - tooltip: { - trigger: 'item' - }, - - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['0%', '70%'], - data: [ - {value: 150, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 310, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChartOne.setOption(optionPieOne); - // 饼状图2 - var pieChartTwo = echarts.init(document.getElementById('pieChartTwo')); - var optionPieTwo = { - animation: false, - tooltip: { - trigger: 'item' - }, - - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['0%', '70%'], - data: [ - {value: 200, name: 'data1'}, - {value: 300, name: 'data2'}, - {value: 500, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChartTwo.setOption(optionPieTwo); - // 饼状图3 - var pieChartThree = echarts.init(document.getElementById('pieChartThree')); - var optionPieThree = { - animation: false, - tooltip: { - trigger: 'item' - }, - - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['0%', '70%'], - data: [ - {value: 100, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 310, name: 'data3'}, - {value: 600, name: 'data4'}, - {value: 100, name: 'data5'} - ] - }] - }; - pieChartThree.setOption(optionPieThree); - // 饼状图4 - var pieChartFour = echarts.init(document.getElementById('pieChartFour')); - var optionPieFour = { - animation: false, - tooltip: { - trigger: 'item' - }, - - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['0%', '70%'], - data: [ - {value: 150, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 500, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChartFour.setOption(optionPieFour); - //折线图 - var lineChart = echarts.init(document.getElementById('lineChart')); - var optionLine = { - animation: false, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 采购趋势图表 + const purchaseChart = echarts.init(document.getElementById('purchase-trend')); + purchaseChart.setOption({ title: { - //text: '业务核心数据',// - left: 'left', // Center align the title horizontally + text: '近30天采购金额趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['采购金额', '订单数量'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, xAxis: { type: 'category', boundaryGap: false, - data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7'] + data: Array.from({length: 30}, (_, i) => `${i+1}日`) }, - yAxis: { - type: 'value' - }, - tooltip: { - trigger: 'axis' // 设置触发类型为坐标轴触发 - }, - series: [{ - data: [820, 733, 901, 600, 1290, 500, 1320], - type: 'line', - smooth: true, - areaStyle: {} - }] - }; - lineChart.setOption(optionLine); - - var currentIndex = -1; - var interval = 1000; // 切换间隔时间，单位是毫秒 - var timer; // 定时器变量 + yAxis: [ + { + type: 'value', + name: '金额(元)', + min: 0, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: '订单数', + min: 0, + axisLabel: { + formatter: '{value}' + } + } + ], + series: [ + { + name: '采购金额', + type: 'line', + data: Array.from({length: 30}, () => Math.floor(Math.random() * 100000) + 50000) + }, + { + name: '订单数量', + type: 'line', + yAxisIndex: 1, + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 10) + } + ] + }); - // 自动触发选中状态并每隔1秒自动向下一个触发 - function startAutoPlay() { - timer = setInterval(function() { - var dataLen = optionLine.series[0].data.length; - // 取消之前高亮的图形 - lineChart.dispatchAction({ - type: 'downplay', - seriesIndex: 0, - dataIndex: currentIndex - }); - currentIndex = (currentIndex + 1) % dataLen; - // 高亮当前图形 - lineChart.dispatchAction({ - type: 'highlight', - seriesIndex: 0, - dataIndex: currentIndex - }); - // 显示 tooltip - lineChart.dispatchAction({ - type: 'showTip', - seriesIndex: 0, - dataIndex: currentIndex - }); - }, interval); - } - - // 开始自动播放 - startAutoPlay(); - - // 鼠标悬停在图表上时暂停自动播放 - lineChart.on('mouseover', function() { - clearInterval(timer); - }); - - // 鼠标离开图表区域时恢复自动播放 - lineChart.on('mouseout', function() { - startAutoPlay(); - }); - // 饼状图 - var pieChart = echarts.init(document.getElementById('pieChart')); - var optionPie = { - animation: false, + // 库存状态饼图 + const inventoryChart = echarts.init(document.getElementById('inventory-status')); + inventoryChart.setOption({ title: { - //text: '订单占比系统',// - left: 'left' + text: '库存状态分布', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' }, - legend: { - orient: 'vertical', - left: 'right' - }, - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['60%', '70%'], - data: [ - {value: 150, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 310, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChart.setOption(optionPie); - //柱状图1 - var barChartOne = echarts.init(document.getElementById('barChartOne')); - var optionBarOne = { - animation: false, - title: { - //text: '业务核心数据'// - }, - tooltip: {}, legend: { - data: ['data1', 'data2'] , - left: 'right' + orient: 'vertical', + left: 'left', + data: ['充足', '低库存', '紧急补货', '超量库存'] + }, + series: [ + { + name: '库存状态', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + {value: 45, name: '充足'}, + {value: 30, name: '低库存'}, + {value: 15, name: '紧急补货'}, + {value: 10, name: '超量库存'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 生产进度图表 + const productionChart = echarts.init(document.getElementById('production-progress')); + productionChart.setOption({ + title: { + text: '生产进度跟踪', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['计划产量', '实际产量'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] + type: 'category', + data: ['生产线A', '生产线B', '生产线C', '生产线D', '生产线E'] }, - yAxis: {}, - series: [{ - name: 'data1', - type: 'bar', - data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据 - }, { - name: 'data2', - type: 'bar', - data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据 - }] - }; - barChartOne.setOption(optionBarOne); - //柱状图2 - var barChartTwo = echarts.init(document.getElementById('barChartTwo')); - var optionBarTwo = { - animation: false, - title: { - //text: '业务核心数据'// + yAxis: { + type: 'value', + name: '数量', + min: 0 }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - legend: { - data: ['Profit', 'Expenses', 'Income'] - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'value' - } - ], - yAxis: [ - { - type: 'category', - axisTick: { - show: false - }, - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - } - ], - series: [ - { - name: 'Profit', - type: 'bar', - label: { - show: true, - position: 'inside' - }, - emphasis: { - focus: 'series' - }, - data: [200, 170, 240, 244, 200, 220, 210] - }, - { - name: 'Income', - type: 'bar', - stack: 'Total', - label: { - show: true - }, - emphasis: { - focus: 'series' - }, - data: [320, 302, 341, 374, 390, 450, 420] - }, - { - name: 'Expenses', - type: 'bar', - stack: 'Total', - label: { - show: true, - position: 'left' - }, - emphasis: { - focus: 'series' - }, - data: [-120, -132, -101, -134, -190, -230, -210] - } - ] - }; - barChartTwo.setOption(optionBarTwo); + series: [ + { + name: '计划产量', + type: 'bar', + data: [1200, 1500, 800, 1000, 900] + }, + { + name: '实际产量', + type: 'bar', + data: [1150, 1420, 780, 980, 850] + } + ] + }); + + // 供应商评分图表 + const supplierChart = echarts.init(document.getElementById('supplier-rating')); + supplierChart.setOption({ + title: { + text: '供应商评分', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'value', + min: 0, + max: 10, + interval: 1 + }, + yAxis: { + type: 'category', + data: ['电子元件有限公司', '塑料模具厂', '电路板科技公司', '显示屏供应商', '电池供应商'] + }, + series: [ + { + name: '质量评分', + type: 'bar', + data: [9.2, 8.7, 8.5, 9.0, 8.3] + }, + { + name: '交货准时率', + type: 'bar', + data: [9.5, 8.9, 8.2, 8.8, 8.6] + }, + { + name: '价格竞争力', + type: 'bar', + data: [8.7, 9.1, 8.9, 8.5, 9.0] + } + ] + }); + + // 监听窗口大小变化，调整图表 + window.addEventListener('resize', function() { + purchaseChart.resize(); + inventoryChart.resize(); + productionChart.resize(); + supplierChart.resize(); + }); + + // 刷新按钮事件 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新采购趋势图 + purchaseChart.setOption({ + series: [ + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 100000) + 50000) + }, + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 10) + } + ] + }); + + // 更新库存状态饼图 + inventoryChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 20) + 40, name: '充足'}, + {value: Math.floor(Math.random() * 20) + 25, name: '低库存'}, + {value: Math.floor(Math.random() * 15) + 10, name: '紧急补货'}, + {value: Math.floor(Math.random() * 15) + 5, name: '超量库存'} + ] + } + ] + }); + + // 更新生产进度图 + productionChart.setOption({ + series: [ + { + data: [ + Math.floor(Math.random() * 300) + 1000, + Math.floor(Math.random() * 300) + 1300, + Math.floor(Math.random() * 300) + 700, + Math.floor(Math.random() * 300) + 900, + Math.floor(Math.random() * 300) + 800 + ] + }, + { + data: [ + Math.floor(Math.random() * 200) + 900, + Math.floor(Math.random() * 200) + 1200, + Math.floor(Math.random() * 200) + 600, + Math.floor(Math.random() * 200) + 800, + Math.floor(Math.random() * 200) + 700 + ] + } + ] + }); + + // 更新供应商评分图 + supplierChart.setOption({ + series: [ + { + data: [ + Math.random() * 1.0 + 8.5, + Math.random() * 1.0 + 8.0, + Math.random() * 1.0 + 8.0, + Math.random() * 1.0 + 8.5, + Math.random() * 1.0 + 7.5 + ] + }, + { + data: [ + Math.random() * 1.0 + 8.5, + Math.random() * 1.0 + 8.0, + Math.random() * 1.0 + 7.5, + Math.random() * 1.0 + 8.0, + Math.random() * 1.0 + 8.0 + ] + }, + { + data: [ + Math.random() * 1.0 + 8.0, + Math.random() * 1.0 + 8.5, + Math.random() * 1.0 + 8.0, + Math.random() * 1.0 + 7.5, + Math.random() * 1.0 + 8.5 + ] + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + const notification = document.createElement('div'); + notification.className = 'notification'; + notification.style.cssText = 'position: fixed; top: 70px; right: 20px; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1000;'; + notification.innerHTML = ' 数据刷新成功'; + document.body.appendChild(notification); + + // 3秒后自动消失 + setTimeout(() => { + notification.style.opacity = '0'; + setTimeout(() => { + document.body.removeChild(notification); + }, 300); + }, 3000); + }, 1000); + }); + + // 日期选择器事件 + document.getElementById('date-selector').valueAsDate = new Date(); + document.getElementById('date-selector').addEventListener('change', function() { + // 这里可以添加日期筛选逻辑 + console.log('Selected date:', this.value); + }); + + // 时间范围选择器事件 + document.getElementById('time-range').addEventListener('change', function() { + // 这里可以添加时间范围筛选逻辑 + console.log('Selected time range:', this.value); + }); + }); diff --git a/gcjhypcxt/src/main/resources/static/route/pages/index.html b/gcjhypcxt/src/main/resources/static/route/pages/index.html index e74b552..9e001e2 100644 --- a/gcjhypcxt/src/main/resources/static/route/pages/index.html +++ b/gcjhypcxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,366 @@ +
@@ -66,26 +426,322 @@
-
欢迎使用工厂计划与排程系统
- -
-
-
-
-
- - -
-
-
-
-
-
+
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
今日采购金额
+
+ +
+
+
¥286,540
+
+ 8.2% 相比昨日 +
+
+ + +
+
+
生产完成率
+
+ +
+
+
92.7%
+
+ 3.2% 相比昨日 +
+
+ + +
+
+
库存周转率
+
+ +
+
+
3.8次/月
+
+ 0.5 相比上月 +
+
+ + +
+
+
准时交付率
+
+ +
+
+
95.6%
+
+ 1.8% 相比上月 +
+
+
+ + +
+ +
+
+ 采购趋势分析 +
+ + +
+
+
+
+ + +
+
+ 库存状态分布 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 生产进度跟踪 +
+ + +
+
+
+
+ + +
+
+ 供应商评分 +
+ + +
+
+
+
+
+ + +
+
+ 最近采购订单 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
订单号供应商商品名称数量单价总金额采购人日期状态
PO20230601电子元件有限公司CPU-A123500¥350.00¥175,000.00张三2023-06-15已完成
PO20230602塑料模具厂外壳-B4561000¥45.00¥45,000.00李四2023-06-15已完成
PO20230603电路板科技公司PCB-C789800¥85.00¥68,000.00王五2023-06-14进行中
PO20230604显示屏供应商屏幕-D234300¥120.00¥36,000.00赵六2023-06-14进行中
PO20230605电池供应商电池-E5671200¥22.00¥26,400.00钱七2023-06-13待付款
+
+
+ + +
+
+ 库存状态监控 +
+ + + +
+
+
+
+
+
+
+
CPU-A123
+
ID: SP-001
+
+
+
+
充足
+
当前库存: 1250 / 安全库存: 500
+
+
+ +
+
+
+
+
外壳-B456
+
ID: SP-002
+
+
+
+
低库存
+
当前库存: 320 / 安全库存: 500
+
+
+ +
+
+
+
+
PCB-C789
+
ID: SP-003
+
+
+
+
紧急补货
+
当前库存: 180 / 安全库存: 400
+
+
+ +
+
+
+
+
屏幕-D234
+
ID: SP-004
+
+
+
+
充足
+
当前库存: 850 / 安全库存: 300
+
+
+ +
+
+
+
+
电池-E567
+
ID: SP-005
+
+
+
+
低库存
+
当前库存: 420 / 安全库存: 500
+
+
+
+
+
+
-
+
@@ -119,211 +775,341 @@ homepage.style.display = 'none'; }); }); - //折线图 - var lineChart = echarts.init(document.getElementById('lineChart')); - var optionLine = { - animation: false, - title: { - //text: '业务核心数据',// - left: 'left', // Center align the title horizontally - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7'] - }, - yAxis: { - type: 'value' - }, - tooltip: { - trigger: 'axis' // 设置触发类型为坐标轴触发 - }, - series: [{ - data: [820, 733, 901, 600, 1290, 500, 1320], - type: 'line', - smooth: true, - areaStyle: {} - }] - }; - lineChart.setOption(optionLine); - - var currentIndex = -1; - var interval = 1000; // 切换间隔时间，单位是毫秒 - var timer; // 定时器变量 - - // 自动触发选中状态并每隔1秒自动向下一个触发 - function startAutoPlay() { - timer = setInterval(function() { - var dataLen = optionLine.series[0].data.length; - // 取消之前高亮的图形 - lineChart.dispatchAction({ - type: 'downplay', - seriesIndex: 0, - dataIndex: currentIndex - }); - currentIndex = (currentIndex + 1) % dataLen; - // 高亮当前图形 - lineChart.dispatchAction({ - type: 'highlight', - seriesIndex: 0, - dataIndex: currentIndex - }); - // 显示 tooltip - lineChart.dispatchAction({ - type: 'showTip', - seriesIndex: 0, - dataIndex: currentIndex - }); - }, interval); - } - - // 开始自动播放 - startAutoPlay(); - - // 鼠标悬停在图表上时暂停自动播放 - lineChart.on('mouseover', function() { - clearInterval(timer); - }); - - // 鼠标离开图表区域时恢复自动播放 - lineChart.on('mouseout', function() { - startAutoPlay(); - }); - // 饼状图1 - var pieChartOne = echarts.init(document.getElementById('pieChartOne')); - var optionPieOne = { - animation: false, - title: { - //text: '业务核心数据',// - left: 'left' - }, - tooltip: { - trigger: 'item' - }, - legend: { - orient: 'vertical', - left: 'right' - }, - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['50%', '70%'], - data: [ - {value: 150, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 310, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChartOne.setOption(optionPieOne); - //柱状图2 - var barChartTwo = echarts.init(document.getElementById('barChartTwo')); - var optionBarTwo = { - animation: false, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 采购趋势图表 + const purchaseChart = echarts.init(document.getElementById('purchase-trend')); + purchaseChart.setOption({ title: { - //text: '业务核心数据'// - }, + text: '近30天采购金额趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - legend: { - data: ['Profit', 'Expenses', 'Income'] - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'value' - } - ], - yAxis: [ - { - type: 'category', - axisTick: { - show: false - }, - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - } - ], - series: [ - { - name: 'Profit', - type: 'bar', - label: { - show: true, - position: 'inside' - }, - emphasis: { - focus: 'series' - }, - data: [200, 170, 240, 244, 200, 220, 210] - }, - { - name: 'Income', - type: 'bar', - stack: 'Total', - label: { - show: true - }, - emphasis: { - focus: 'series' - }, - data: [320, 302, 341, 374, 390, 450, 420] - }, - { - name: 'Expenses', - type: 'bar', - stack: 'Total', - label: { - show: true, - position: 'left' - }, - emphasis: { - focus: 'series' - }, - data: [-120, -132, -101, -134, -190, -230, -210] - } - ] - }; - barChartTwo.setOption(optionBarTwo); - // 饼状图2 - var pieChartTwo = echarts.init(document.getElementById('pieChartTwo')); - var optionPieTwo = { - animation: false, - title: { - //text: '业务核心数据',// - left: 'left' - }, - tooltip: { - trigger: 'item' - }, - legend: { - orient: 'vertical', - left: 'right' - }, - series: [{ - //name: '嘻嘻',// - type: 'pie', - radius: ['0%', '70%'], - data: [ - {value: 150, name: 'data1'}, - {value: 274, name: 'data2'}, - {value: 310, name: 'data3'}, - {value: 335, name: 'data4'}, - {value: 400, name: 'data5'} - ] - }] - }; - pieChartTwo.setOption(optionPieTwo); + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['采购金额', '订单数量'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: Array.from({length: 30}, (_, i) => `${i+1}日`) + }, + yAxis: [ + { + type: 'value', + name: '金额(元)', + min: 0, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: '订单数', + min: 0, + axisLabel: { + formatter: '{value}' + } + } + ], + series: [ + { + name: '采购金额', + type: 'line', + data: Array.from({length: 30}, () => Math.floor(Math.random() * 100000) + 50000) + }, + { + name: '订单数量', + type: 'line', + yAxisIndex: 1, + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 10) + } + ] + }); + + // 库存状态饼图 + const inventoryChart = echarts.init(document.getElementById('inventory-status')); + inventoryChart.setOption({ + title: { + text: '库存状态分布', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: ['充足', '低库存', '紧急补货', '超量库存'] + }, + series: [ + { + name: '库存状态', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + {value: 45, name: '充足'}, + {value: 30, name: '低库存'}, + {value: 15, name: '紧急补货'}, + {value: 10, name: '超量库存'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 生产进度图表 + const productionChart = echarts.init(document.getElementById('production-progress')); + productionChart.setOption({ + title: { + text: '生产进度跟踪', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['计划产量', '实际产量'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['生产线A', '生产线B', '生产线C', '生产线D', '生产线E'] + }, + yAxis: { + type: 'value', + name: '数量', + min: 0 + }, + series: [ + { + name: '计划产量', + type: 'bar', + data: [1200, 1500, 800, 1000, 900] + }, + { + name: '实际产量', + type: 'bar', + data: [1150, 1420, 780, 980, 850] + } + ] + }); + + // 供应商评分图表 + const supplierChart = echarts.init(document.getElementById('supplier-rating')); + supplierChart.setOption({ + title: { + text: '供应商评分', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'value', + min: 0, + max: 10, + interval: 1 + }, + yAxis: { + type: 'category', + data: ['电子元件有限公司', '塑料模具厂', '电路板科技公司', '显示屏供应商', '电池供应商'] + }, + series: [ + { + name: '质量评分', + type: 'bar', + data: [9.2, 8.7, 8.5, 9.0, 8.3] + }, + { + name: '交货准时率', + type: 'bar', + data: [9.5, 8.9, 8.2, 8.8, 8.6] + }, + { + name: '价格竞争力', + type: 'bar', + data: [8.7, 9.1, 8.9, 8.5, 9.0] + } + ] + }); + + // 监听窗口大小变化，调整图表 + window.addEventListener('resize', function() { + purchaseChart.resize(); + inventoryChart.resize(); + productionChart.resize(); + supplierChart.resize(); + }); + + // 刷新按钮事件 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新采购趋势图 + purchaseChart.setOption({ + series: [ + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 100000) + 50000) + }, + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 10) + } + ] + }); + + // 更新库存状态饼图 + inventoryChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 20) + 40, name: '充足'}, + {value: Math.floor(Math.random() * 20) + 25, name: '低库存'}, + {value: Math.floor(Math.random() * 15) + 10, name: '紧急补货'}, + {value: Math.floor(Math.random() * 15) + 5, name: '超量库存'} + ] + } + ] + }); + + // 更新生产进度图 + productionChart.setOption({ + series: [ + { + data: [ + Math.floor(Math.random() * 300) + 1000, + Math.floor(Math.random() * 300) + 1300, + Math.floor(Math.random() * 300) + 700, + Math.floor(Math.random() * 300) + 900, + Math.floor(Math.random() * 300) + 800 + ] + }, + { + data: [ + Math.floor(Math.random() * 300) + 900, + Math.floor(Math.random() * 300) + 1200, + Math.floor(Math.random() * 300) + 600, + Math.floor(Math.random() * 300) + 800, + Math.floor(Math.random() * 300) + 700 + ] + } + ] + }); + + // 更新供应商评分图 + supplierChart.setOption({ + series: [ + { + data: [ + (Math.random() * 0.5 + 8.5).toFixed(1), + (Math.random() * 0.5 + 8.2).toFixed(1), + (Math.random() * 0.5 + 8.0).toFixed(1), + (Math.random() * 0.5 + 8.5).toFixed(1), + (Math.random() * 0.5 + 8.0).toFixed(1) + ] + }, + { + data: [ + (Math.random() * 0.5 + 9.0).toFixed(1), + (Math.random() * 0.5 + 8.5).toFixed(1), + (Math.random() * 0.5 + 7.7).toFixed(1), + (Math.random() * 0.5 + 8.3).toFixed(1), + (Math.random() * 0.5 + 8.1).toFixed(1) + ] + }, + { + data: [ + (Math.random() * 0.5 + 8.2).toFixed(1), + (Math.random() * 0.5 + 8.6).toFixed(1), + (Math.random() * 0.5 + 8.4).toFixed(1), + (Math.random() * 0.5 + 8.0).toFixed(1), + (Math.random() * 0.5 + 8.5).toFixed(1) + ] + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + const notification = document.createElement('div'); + notification.className = 'notification'; + notification.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000;'; + notification.innerHTML = ' 数据刷新成功'; + document.body.appendChild(notification); + + // 3秒后移除提示 + setTimeout(() => { + notification.style.opacity = '0'; + notification.style.transition = 'opacity 0.5s'; + setTimeout(() => { + document.body.removeChild(notification); + }, 500); + }, 3000); + }, 1000); + }); + });