From d45a70b89d9f3f09e0e57ba09a7800675b6db3d5 Mon Sep 17 00:00:00 2001 From: TS-QD1 Date: Wed, 2 Jul 2025 16:02:29 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E8=B0=83=E6=95=B4index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/crpm/index/index13/index13.css | 3 +- .../resources/static/route/pages/index.html | 1218 ++++++++++++++--- 2 files changed, 1006 insertions(+), 215 deletions(-) diff --git a/cjscdsjkbpt/src/main/resources/static/assets/crpm/index/index13/index13.css b/cjscdsjkbpt/src/main/resources/static/assets/crpm/index/index13/index13.css index d03e5c4..c31220d 100644 --- a/cjscdsjkbpt/src/main/resources/static/assets/crpm/index/index13/index13.css +++ b/cjscdsjkbpt/src/main/resources/static/assets/crpm/index/index13/index13.css @@ -128,7 +128,8 @@ /* display: flex; */ width: 100%; height: 100%; - padding: 15px; + padding: 15px; + overflow: auto; } .right .bottom .content { diff --git a/cjscdsjkbpt/src/main/resources/static/route/pages/index.html b/cjscdsjkbpt/src/main/resources/static/route/pages/index.html index bf3a6c5..6d514cc 100644 --- a/cjscdsjkbpt/src/main/resources/static/route/pages/index.html +++ b/cjscdsjkbpt/src/main/resources/static/route/pages/index.html @@ -8,7 +8,357 @@ - + +
@@ -18,40 +368,40 @@ 车间生产大数据看板平台
+
  • + 实时生产监控 +
    • +
  • + 产量统计 +
    • +
  • + 设备状态监控 +
    • +
  • + 能耗分析 +
    • +
  • + 人员效率分析 +
    • +
  • + 预测分析 +
    • +
  • + 环境监测 +
    • +
  • + 安全监控 +
    • +
  • + KPI监控 +
    • +
  • + 异常报警 +
    • +
  • + 产量统计 +
    • +
    @@ -74,20 +424,354 @@
    -
    -
    -
    -
    + +
    + +
    +
    + +
    -
    -
    -
    +
    + +
    -
    -
    -
    - + + +
    + +
    +
    +
    生产效率
    +
    + +
    +
    +
    89.2%
    +
    + 4.3% 相比上周 +
    +
    + + +
    +
    +
    产品合格率
    +
    + +
    +
    +
    96.7%
    +
    + 1.2% 相比上周 +
    +
    + + +
    +
    +
    设备利用率
    +
    + +
    +
    +
    78.5%
    +
    + 2.1% 相比上周 +
    +
    + + +
    +
    +
    安全事件
    +
    + +
    +
    +
    3
    +
    + 1 相比上周 +
    +
    +
    + + +
    + +
    +
    + 生产进度跟踪 +
    + + +
    +
    +
    +
    + + +
    +
    + 设备状态分布 +
    + + +
    +
    +
    +
    +
    + + +
    + +
    +
    + 质量趋势分析 +
    + + +
    +
    +
    +
    + + +
    +
    + 产能分析 +
    + + +
    +
    +
    +
    +
    + + +
    +
    + 生产任务列表 +
    + + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    任务编号产品名称计划数量已完成进度状态负责人操作
    T20230601智能手机A50004250 +
    +
    +
    + 85% +     		进行中张三 + +
    T20230602平板电脑B20002000 +
    +
    +
    + 100% +     		已完成李四 + +
    T20230603智能手表C35001800 +
    +
    +
    + 51% +     		进行中王五 + +
    T20230604蓝牙耳机D100006800 +
    +
    +
    + 68% +     		进行中赵六 + +
    T20230605智能音箱E15001500 +
    +
    +
    + 100% +     		已完成钱七 + +
    +
    +
    + + +
    +
    + 主要设备状态 +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    注塑机-01
    +
    ID: M-2023001
    +
    +
    +
    +
    运行中
    +
    使用率: 92%
    +
    +
    + +
    +
    +
    +
    +
    印刷机-03
    +
    ID: P-2023003
    +
    +
    +
    +
    维护中
    +
    预计完成: 2小时
    +
    +
    + +
    +
    +
    +
    +
    贴片机-02
    +
    ID: S-2023002
    +
    +
    +
    +
    空闲中
    +
    待机时间: 30分钟
    +
    +
    + +
    +
    +
    +
    +
    检测设备-01
    +
    ID: T-2023001
    +
    +
    +
    +
    故障中
    +
    已通知维修: 15分钟前
    +
    +
    + +
    +
    +
    +
    +
    包装机-02
    +
    ID: B-2023002
    +
    +
    +
    +
    运行中
    +
    使用率: 87%
    +
    +
    +
    +
    +
    @@ -120,183 +804,289 @@ pageIframe.show(); homepage.style.display = 'none'; }); + + }); - //柱状图1 - var barChartOne = echarts.init(document.getElementById('barChartOne')); - var optionBarOne = { - animation: false, - title: { - //text: '业务核心数据'// - }, - textStyle: { - color: '#FFF' - }, - tooltip: {}, - legend: { - textStyle: { - color: '#FFFFFF' - }, - data: ['data1', 'data2'] , - left: 'right' - }, - xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] - }, - 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); - // 饼状图 - var pieChart = echarts.init(document.getElementById('pieChart')); - var optionPie = { - animation: false, + + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 生产进度图表 + const progressChart = echarts.init(document.getElementById('production-progress')); + progressChart.setOption({ title: { - //text: '业务核心数据',// - left: 'left' - }, - textStyle: { - color: '#FFF' + text: '本周生产进度', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } }, - legend: { - orient: 'vertical', - left: 'right', - textStyle: { - color: '#FFFFFF' - }, - }, - 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'} - ] - }] - }; - pieChart.setOption(optionPie); - //柱状图2 - var barChartTwo = echarts.init(document.getElementById('barChartTwo')); - var optionBarTwo = { - animation: false, - title: { - //text: '业务核心数据'// + legend: { + data: ['计划产量', '实际产量'], + top: '10%', + left: 'center' }, - textStyle: { - color: '#FFF' + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - legend: { - data: ['Profit', 'Expenses', 'Income'], - textStyle: { - color: '#FFFFFF' - }, - }, - 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); - //柱状图3 - var barChartThree = echarts.init(document.getElementById('barChartThree')); - var optionBarThree = { - animation: false, - title: { - //text: '业务核心数据'// + xAxis: { + type: 'category', + boundaryGap: false, + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, - textStyle: { - color: '#FFF' + yAxis: { + type: 'value' }, - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - data: [120, 200, 150, 80, 70, 110, 130], - type: 'bar' - } - ] - }; - barChartThree.setOption(optionBarThree); + series: [ + { + name: '计划产量', + type: 'line', + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: '实际产量', + type: 'line', + data: [150, 135, 110, 130, 140, 220, 220] + } + ] + }); + + // 设备状态饼图 + const statusChart = echarts.init(document.getElementById('equipment-status')); + statusChart.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: 35, name: '运行中'}, + {value: 10, name: '维护中'}, + {value: 15, name: '空闲中'}, + {value: 5, name: '故障中'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 质量趋势图表 + const qualityChart = echarts.init(document.getElementById('quality-trend')); + qualityChart.setOption({ + title: { + text: '近30天质量合格率', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + xAxis: { + type: 'category', + data: Array.from({length: 30}, (_, i) => `${i+1}日`), + axisLabel: { + interval: 5 + } + }, + yAxis: { + type: 'value', + min: 90, + max: 100, + axisLabel: { + formatter: '{value}%' + } + }, + series: [ + { + name: '合格率', + type: 'line', + data: Array.from({length: 30}, () => 95 + Math.random() * 5) + } + ] + }); + + // 产能分析图表 + const capacityChart = echarts.init(document.getElementById('capacity-analysis')); + capacityChart.setOption({ + title: { + text: '各产品线产能分析', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + 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, + max: 6000, + interval: 1000 + }, + { + type: 'value', + name: '利用率(%)', + min: 0, + max: 100, + interval: 20 + } + ], + series: [ + { + name: '计划产能', + type: 'bar', + data: [4000, 3500, 5000, 2500, 3000] + }, + { + name: '实际产能', + type: 'bar', + data: [3800, 3200, 4500, 2300, 2800] + }, + { + name: '产能利用率', + type: 'line', + yAxisIndex: 1, + data: [95, 91, 90, 92, 93] + } + ] + }); + + // 监听窗口大小变化，调整图表 + window.addEventListener('resize', function() { + progressChart.resize(); + statusChart.resize(); + qualityChart.resize(); + capacityChart.resize(); + }); + + // 刷新按钮事件 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新图表数据 + progressChart.setOption({ + series: [ + { + data: progressChart.getOption().series[0].data.map(val => val * (0.95 + Math.random() * 0.1)) + }, + { + data: progressChart.getOption().series[1].data.map(val => val * (0.95 + Math.random() * 0.1)) + } + ] + }); + + statusChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 10 + 30), name: '运行中'}, + {value: Math.floor(Math.random() * 5 + 8), name: '维护中'}, + {value: Math.floor(Math.random() * 5 + 10), name: '空闲中'}, + {value: Math.floor(Math.random() * 3 + 3), name: '故障中'} + ] + } + ] + }); + + qualityChart.setOption({ + series: [ + { + data: Array.from({length: 30}, () => 95 + Math.random() * 5) + } + ] + }); + + capacityChart.setOption({ + series: [ + { + data: capacityChart.getOption().series[0].data.map(val => val * (0.95 + Math.random() * 0.1)) + }, + { + data: capacityChart.getOption().series[1].data.map(val => val * (0.95 + Math.random() * 0.1)) + }, + { + data: capacityChart.getOption().series[2].data.map(val => val * (0.9 + Math.random() * 0.2)) + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + }, 1000); + }); + }); From 85b42e3b3326cd0a566691f01759d7bba30e5a69 Mon Sep 17 00:00:00 2001 From: TS-QD1 Date: Wed, 2 Jul 2025 16:33:04 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E8=B0=83=E6=95=B4index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 + .../resources/static/route/pages/index.html | 1021 ++++++++++++++--- 2 files changed, 895 insertions(+), 128 deletions(-) diff --git a/.gitignore b/.gitignore index 69bb961..e23340f 100644 --- a/.gitignore +++ b/.gitignore @@ -38,3 +38,5 @@ mvnw* .mvn/** /src/main/resources/ftl/crpm/code/frontend-generate/ /src/main/resources/ftl/crpm/code/generate/ + +db/ \ No newline at end of file diff --git a/cxywztglxt/src/main/resources/static/route/pages/index.html b/cxywztglxt/src/main/resources/static/route/pages/index.html index 57a4ea1..26391fc 100644 --- a/cxywztglxt/src/main/resources/static/route/pages/index.html +++ b/cxywztglxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,361 @@ +
    @@ -69,21 +424,303 @@
    -
    - 欢迎使用创新业务中台管理系统 -
    -
    -
    -
    -
    + +
    + +
    +
    + + +
    +
    + + +
    -
    -
    + + +
    + +
    +
    +
    用户总数
    +
    + +
    +
    +
    1,254
    +
    + 12.5% 相比上月 +
    +
    + + +
    +
    +
    在线接口
    +
    + +
    +
    +
    42
    +
    + 5.0% 相比上月 +
    +
    + + +
    +
    +
    运行流程
    +
    + +
    +
    +
    18
    +
    + 2.0% 相比上月 +
    +
    + + +
    +
    +
    系统消息
    +
    + +
    +
    +
    7
    +
    + 3 相比昨日 +
    +
    -
    -
    - -
    + + +
    + +
    +
    + 用户活跃度分析 +
    + + +
    +
    +
    +
    + + +
    +
    + 系统状态分布 +
    + + +
    +
    +
    +
    +
    + + +
    + +
    +
    + 接口响应时间分析 +
    + + +
    +
    +
    +
    + + +
    +
    + 系统集成情况 +
    + + +
    +
    +
    +
    +
    + + +
    +
    + 最近登录用户 +
    + + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    用户名姓名角色登录时间IP地址设备状态
    admin系统管理员管理员2023-06-15 09:32:45192.168.1.101Chrome/114.0在线
    user1张三操作员2023-06-15 08:45:12192.168.1.102Firefox/113.0在线
    user2李四分析师2023-06-15 07:58:33192.168.1.103Chrome/114.0在线
    user3王五审核员2023-06-15 06:30:15192.168.1.104Edge/114.0离线
    user4赵六操作员2023-06-15 05:42:28192.168.1.105Safari/16.4离线
    +
    +
    + + +
    +
    + 系统组件状态 +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    用户管理系统
    +
    ID: UM-2023001
    +
    +
    +
    +
    正常运行
    +
    响应时间: 128ms
    +
    +
    + +
    +
    +
    +
    +
    接口管理系统
    +
    ID: API-2023002
    +
    +
    +
    +
    正常运行
    +
    响应时间: 215ms
    +
    +
    + +
    +
    +
    +
    +
    流程引擎系统
    +
    ID: WF-2023003
    +
    +
    +
    +
    维护中
    +
    预计完成: 1小时30分钟
    +
    +
    + +
    +
    +
    +
    +
    消息通知系统
    +
    ID: MS-2023004
    +
    +
    +
    +
    离线
    +
    已通知运维: 25分钟前
    +
    +
    + +
    +
    +
    +
    +
    报表分析系统
    +
    ID: RS-2023005
    +
    +
    +
    +
    正常运行
    +
    响应时间: 320ms
    +
    +
    +
    +
    +
    @@ -118,136 +755,264 @@ homepage.style.display = 'none'; }); }); - //折线图 - var lineChart = echarts.init(document.getElementById('lineChart')); - var optionLine = { - animation: false, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 用户活跃度图表 + const userActivityChart = echarts.init(document.getElementById('user-activity')); + userActivityChart.setOption({ title: { - //text: '销售时间统计',// - left: 'left', // Center align the title horizontally + 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', boundaryGap: false, - data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7'] + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, - 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, + max: 200, + interval: 40 + }, + { + type: 'value', + name: '小时', + min: 0, + max: 100, + interval: 20 + } + ], + series: [ + { + name: '登录次数', + type: 'line', + data: [65, 78, 52, 91, 85, 102, 95] + }, + { + name: '操作次数', + type: 'line', + data: [128, 145, 110, 165, 170, 135, 120] + }, + { + name: '在线时长(小时)', + type: 'line', + yAxisIndex: 1, + data: [35, 42, 38, 45, 49, 32, 28] + } + ] + }); - // 自动触发选中状态并每隔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 systemStatusChart = echarts.init(document.getElementById('system-status')); + systemStatusChart.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); - //柱状图 - var barChart = echarts.init(document.getElementById('barChart')); - var optionBar = { - animation: false, - title: { - // text: '收支情况'// - }, - tooltip: {}, legend: { - //data: ['收入', '支出'] ,// - data: ['data1', 'data2'] , - left: 'right' + orient: 'vertical', + left: 'left', + data: ['正常运行', '维护中', '离线', '警告'] + }, + series: [ + { + name: '系统状态', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + {value: 65, name: '正常运行'}, + {value: 15, name: '维护中'}, + {value: 10, name: '离线'}, + {value: 10, name: '警告'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 接口响应时间图表 + const apiResponseChart = echarts.init(document.getElementById('api-response')); + apiResponseChart.setOption({ + title: { + text: '接口平均响应时间', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } }, xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] + type: 'category', + data: ['用户管理', '权限验证', '数据查询', '报表生成', '消息推送', '文件上传', '系统配置'] }, - 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] // 第二条柱状图的数据 - }] - }; - barChart.setOption(optionBar); - - + yAxis: { + type: 'value', + name: '毫秒(ms)', + min: 0, + max: 500, + interval: 100 + }, + series: [ + { + name: '平均响应时间', + type: 'bar', + data: [128, 85, 210, 350, 150, 420, 95] + } + ] + }); + + // 系统集成图表 + const integrationChart = echarts.init(document.getElementById('system-integration')); + integrationChart.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: ['40%', '75%'], + data: [ + {value: 35, name: '成功'}, + {value: 5, name: '失败'}, + {value: 10, name: '部分成功'} + ] + } + ] + }); + + // 监听窗口大小变化，调整图表 + window.addEventListener('resize', function() { + userActivityChart.resize(); + systemStatusChart.resize(); + apiResponseChart.resize(); + integrationChart.resize(); + }); + + // 刷新按钮事件 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新图表数据 + userActivityChart.setOption({ + series: [ + { + data: userActivityChart.getOption().series[0].data.map(val => val * (0.9 + Math.random() * 0.2)) + }, + { + data: userActivityChart.getOption().series[1].data.map(val => val * (0.9 + Math.random() * 0.2)) + }, + { + data: userActivityChart.getOption().series[2].data.map(val => val * (0.9 + Math.random() * 0.2)) + } + ] + }); + + systemStatusChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 10 + 60), name: '正常运行'}, + {value: Math.floor(Math.random() * 5 + 10), name: '维护中'}, + {value: Math.floor(Math.random() * 5 + 5), name: '离线'}, + {value: Math.floor(Math.random() * 5 + 5), name: '警告'} + ] + } + ] + }); + + apiResponseChart.setOption({ + series: [ + { + data: apiResponseChart.getOption().series[0].data.map(val => val * (0.8 + Math.random() * 0.4)) + } + ] + }); + + integrationChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 10 + 30), name: '成功'}, + {value: Math.floor(Math.random() * 5 + 2), name: '失败'}, + {value: Math.floor(Math.random() * 5 + 8), name: '部分成功'} + ] + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + }, 1000); + }); + }); From 2d03c3f24a6efdaf0e632afa3c0cb29664cd72d5 Mon Sep 17 00:00:00 2001 From: TS-QD1 Date: Wed, 2 Jul 2025 18:26:11 +0800 Subject: [PATCH 3/3] =?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); + }); + });