-
@@ -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}
-
-
+
+
+
+
+
+
+
-
-
-
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 生产效率
+
+ 89.2%
+
+ 4.3% 相比上周
+
+
+
+
+
+
+
+ 产品合格率
+
+ 96.7%
+
+ 1.2% 相比上周
+
+
+
+
+
+
+
+ 设备利用率
+
+ 78.5%
+
+ 2.1% 相比上周
+
+
+
+
+
+ 安全事件
+
+ 3
+
+ 1 相比上周
+
+
+
+
+
+
+
+
+
+
+
+ 生产进度跟踪
+
+
+
+
+
+
+
+
+
+ 设备状态分布
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 质量趋势分析
+
+
+
+
+
+
+
+
+
+ 产能分析
+
+
+
+
+
+
+
+
+
+
+
+ 生产任务列表
+
+
+
+
+
+
+
+
+
+
+
+ | 任务编号 | +产品名称 | +计划数量 | +已完成 | +进度 | +状态 | +负责人 | +操作 | +
|---|---|---|---|---|---|---|---|
| T20230601 | +智能手机A | +5000 | +4250 | ++ + 85% + | +进行中 | +张三 | ++ + | +
| T20230602 | +平板电脑B | +2000 | +2000 | ++ + 100% + | +已完成 | +李四 | ++ + | +
| T20230603 | +智能手表C | +3500 | +1800 | ++ + 51% + | +进行中 | +王五 | ++ + | +
| T20230604 | +蓝牙耳机D | +10000 | +6800 | ++ + 68% + | +进行中 | +赵六 | ++ + | +
| T20230605 | +智能音箱E | +1500 | +1500 | ++ + 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%
+ {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); + }); + });