diff --git a/.gitignore b/.gitignore index e23340f..b1f148e 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,4 @@ mvnw* /src/main/resources/ftl/crpm/code/frontend-generate/ /src/main/resources/ftl/crpm/code/generate/ -db/ \ No newline at end of file +/db/** \ No newline at end of file diff --git a/gcsbyxjkglxt/src/main/resources/static/route/pages/index.html b/gcsbyxjkglxt/src/main/resources/static/route/pages/index.html index 8426bc5..d08ca77 100644 --- a/gcsbyxjkglxt/src/main/resources/static/route/pages/index.html +++ b/gcsbyxjkglxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,431 @@ +
@@ -72,26 +497,462 @@
-
-
-
-
-
-
-
-
-
-
+ +
+ +
+
+ + +
+
+ + +
+
-
-
-
-
-
-
-
- -
+ +
+ +
+
+
在线设备
+
+ +
+
+
128
+
+ 5.3% 相比昨日 +
+
+ + +
+
+
设备故障率
+
+ +
+
+
2.7%
+
+ 0.5% 相比上周 +
+
+ + +
+
+
今日能耗总量
+
+ +
+
+
12,540kWh
+
+ 3.2% 相比昨日 +
+
+ + +
+
+
备件库存
+
+ +
+
+
328
+
+ 8 相比上周 +
+
+
+ + +
+ +
+
+ 设备状态分布 +
+ + +
+
+
+
+ + +
+
+ 能耗趋势分析 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 设备温度监控 +
+ + +
+
+
+
+ + +
+
+ 设备故障类型 +
+ + +
+
+
+
+
+ + +
+
+ 设备实时状态 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
设备名称设备编号状态运行时间(小时)温度(°C)电流(A)电压(V)功率(kW)故障次数操作
生产线A-主电机SB-001运行中18.55842.538025.60
生产线B-主电机SB-002运行中16.26245.838028.11
生产线C-主电机SB-003警告14.87852.337831.52
冷却系统-泵1SB-004运行中20.04518.738011.20
冷却系统-泵2SB-005已停止0250003
+
+
+ + +
+ +
+
+ 设备状态监控 +
+ + + +
+
+
+
+
+
+
+
生产线A-主电机
+
SB-001
+
+
+
+
运行中
+
温度: 58°C | 功率: 25.6kW
+
+
+ +
+
+
+
+
生产线B-主电机
+
SB-002
+
+
+
+
运行中
+
温度: 62°C | 功率: 28.1kW
+
+
+ +
+
+
+
+
生产线C-主电机
+
SB-003
+
+
+
+
警告
+
温度: 78°C | 功率: 31.5kW
+
+
+ +
+
+
+
+
冷却系统-泵1
+
SB-004
+
+
+
+
运行中
+
温度: 45°C | 功率: 11.2kW
+
+
+ +
+
+
+
+
冷却系统-泵2
+
SB-005
+
+
+
+
已停止
+
温度: 25°C | 功率: 0kW
+
+
+
+
+ + +
+
+ 备件库存监控 +
+ + + +
+
+
+
+
+
电机轴承 6208
+
BJ-001
+
+
+
库存: 35
+
+
+
+
+
+ +
+
+
皮带 1000L
+
BJ-002
+
+
+
库存: 18
+
+
+
+
+
+ +
+
+
接触器 CJX2-6511
+
BJ-003
+
+
+
库存: 27
+
+
+
+
+
+ +
+
+
熔断器 RT18-32
+
BJ-004
+
+
+
库存: 7
+
+
+
+
+
+ +
+
+
PLC模块 EM231
+
BJ-005
+
+
+
库存: 12
+
+
+
+
+
+
+
+
+ + +
+
+ 预测维护计划 +
+ + + +
+
+
+
+
+
生产线A-主电机
+
预计维护时间: 2023-06-20
+
+
+
计划维护
+
维护内容: 定期检查和润滑
+
+
+ +
+
+
生产线C-主电机
+
预计维护时间: 2023-06-18
+
+
+
紧急维护
+
维护内容: 温度过高检查
+
+
+ +
+
+
冷却系统-泵2
+
预计维护时间: 2023-06-17
+
+
+
故障维修
+
维护内容: 电机故障修复
+
+
+ +
+
+
生产线B-主电机
+
预计维护时间: 2023-06-25
+
+
+
计划维护
+
维护内容: 定期检查和清洁
+
+
+
+
+ +
+ +
@@ -127,297 +988,346 @@ 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 deviceStatusChart = echarts.init(document.getElementById('device-status-chart')); + deviceStatusChart.setOption({ title: { - //text: '业务核心数据',// - left: 'left', // Center align the title horizontally + 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: 128, name: '运行中'}, + {value: 18, name: '警告'}, + {value: 12, name: '已停止'}, + {value: 6, name: '维护中'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 能耗趋势图表 + const energyTrendChart = echarts.init(document.getElementById('energy-trend-chart')); + energyTrendChart.setOption({ + title: { + text: '近30天能耗趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['总能耗(kWh)', '平均功率(kW)'], + 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: '能耗(kWh)', + min: 0, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: '功率(kW)', + min: 0, + axisLabel: { + formatter: '{value}' + } + } + ], + series: [ + { + name: '总能耗(kWh)', + type: 'line', + data: Array.from({length: 30}, () => Math.floor(Math.random() * 5000) + 10000) + }, + { + name: '平均功率(kW)', + type: 'line', + yAxisIndex: 1, + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 40) + } + ] + }); - // 自动触发选中状态并每隔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 temperatureChart = echarts.init(document.getElementById('temperature-chart')); + temperatureChart.setOption({ title: { - //text: '订单占比系统',// - left: 'left' + text: '主要设备温度监控', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'axis' }, - 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' + data: ['生产线A-主电机', '生产线B-主电机', '生产线C-主电机', '冷却系统-泵1', '冷却系统-泵2'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] + type: 'category', + data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] }, - 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: '温度(°C)', + min: 0, + max: 100 }, - 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: '生产线A-主电机', + type: 'line', + data: [45, 48, 55, 58, 56, 50] + }, + { + name: '生产线B-主电机', + type: 'line', + data: [47, 50, 59, 62, 60, 53] + }, + { + name: '生产线C-主电机', + type: 'line', + data: [50, 55, 70, 78, 75, 65] + }, + { + name: '冷却系统-泵1', + type: 'line', + data: [38, 40, 42, 45, 43, 39] + }, + { + name: '冷却系统-泵2', + type: 'line', + data: [25, 25, 25, 25, 25, 25] + } + ] + }); + + // 设备故障类型图表 + const faultTypeChart = echarts.init(document.getElementById('fault-type-chart')); + faultTypeChart.setOption({ + title: { + text: '设备故障类型分布', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'value', + min: 0 + }, + yAxis: { + type: 'category', + data: ['电气故障', '机械故障', '传感器故障', '控制系统故障', '其他故障'] + }, + series: [ + { + name: '故障次数', + type: 'bar', + data: [28, 22, 15, 10, 5] + } + ] + }); + + // 监听窗口大小变化，调整图表 + window.addEventListener('resize', function() { + deviceStatusChart.resize(); + energyTrendChart.resize(); + temperatureChart.resize(); + faultTypeChart.resize(); + }); + + // 刷新按钮事件 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新设备状态分布图表 + deviceStatusChart.setOption({ + series: [ + { + data: [ + {value: Math.floor(Math.random() * 20) + 120, name: '运行中'}, + {value: Math.floor(Math.random() * 10) + 10, name: '警告'}, + {value: Math.floor(Math.random() * 5) + 5, name: '已停止'}, + {value: Math.floor(Math.random() * 5) + 3, name: '维护中'} + ] + } + ] + }); + + // 更新能耗趋势图表 + energyTrendChart.setOption({ + series: [ + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 5000) + 10000) + }, + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 40) + } + ] + }); + + // 更新温度监控图表 + temperatureChart.setOption({ + series: [ + { + data: [ + Math.floor(Math.random() * 10) + 40, + Math.floor(Math.random() * 10) + 45, + Math.floor(Math.random() * 10) + 50, + Math.floor(Math.random() * 10) + 55, + Math.floor(Math.random() * 10) + 50, + Math.floor(Math.random() * 10) + 45 + ] + }, + { + data: [ + Math.floor(Math.random() * 10) + 45, + Math.floor(Math.random() * 10) + 50, + Math.floor(Math.random() * 10) + 55, + Math.floor(Math.random() * 10) + 60, + Math.floor(Math.random() * 10) + 55, + Math.floor(Math.random() * 10) + 50 + ] + }, + { + data: [ + Math.floor(Math.random() * 15) + 50, + Math.floor(Math.random() * 15) + 55, + Math.floor(Math.random() * 15) + 65, + Math.floor(Math.random() * 15) + 75, + Math.floor(Math.random() * 15) + 70, + Math.floor(Math.random() * 15) + 60 + ] + }, + { + data: [ + Math.floor(Math.random() * 8) + 35, + Math.floor(Math.random() * 8) + 38, + Math.floor(Math.random() * 8) + 40, + Math.floor(Math.random() * 8) + 45, + Math.floor(Math.random() * 8) + 42, + Math.floor(Math.random() * 8) + 38 + ] + }, + { + data: [25, 25, 25, 25, 25, 25] + } + ] + }); + + // 更新故障类型图表 + faultTypeChart.setOption({ + series: [ + { + data: [ + Math.floor(Math.random() * 10) + 20, + Math.floor(Math.random() * 10) + 15, + Math.floor(Math.random() * 8) + 10, + Math.floor(Math.random() * 5) + 5, + Math.floor(Math.random() * 3) + 2 + ] + } + ] + }); + + // 恢复按钮状态 + 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); + }); + }); diff --git a/gcscsbsjcjyjkxt/src/main/resources/static/route/pages/index.html b/gcscsbsjcjyjkxt/src/main/resources/static/route/pages/index.html index b771c6a..b4299a4 100644 --- a/gcscsbsjcjyjkxt/src/main/resources/static/route/pages/index.html +++ b/gcscsbsjcjyjkxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,473 @@ +
@@ -69,15 +536,637 @@
欢迎使用工厂生产设备数据采集与监控系统
-
-
-
-
-
-
-
-
-
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
在线设备
+
+ +
+
+
128
+
+ 5.3% 相比昨日 +
+
+ + +
+
+
设备故障率
+
+ +
+
+
2.7%
+
+ 0.5% 相比上周 +
+
+ + +
+
+
今日能耗总量
+
+ +
+
+
12,540kWh
+
+ 3.2% 相比昨日 +
+
+ + +
+
+
生产完成率
+
+ +
+
+
86.7%
+
+ 2.1% 相比昨日 +
+
+
+ + +
+ +
+
+ 设备状态分布 +
+ + +
+
+
+
+ + +
+
+ 能耗趋势分析 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 设备温度监控 +
+ + +
+
+
+
+ + +
+
+ 生产完成率 +
+ + +
+
+
+
+
+ + +
+
+ 设备实时状态 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
设备名称设备编号状态运行时间(小时)温度(°C)电流(A)电压(V)功率(kW)故障次数操作
生产线A-主电机SB-001运行中18.55842.538025.60
生产线B-主电机SB-002运行中16.26245.838028.11
生产线C-主电机SB-003警告14.87852.337831.52
冷却系统-泵1SB-004运行中20.04518.738011.20
冷却系统-泵2SB-005已停止0250003
+
+
+ + +
+ +
+
+ 设备状态监控 +
+ + + +
+
+
+
+
+
+
+
生产线A-主电机
+
SB-001
+
+
+
+
运行中
+
温度: 58°C | 功率: 25.6kW
+
+
+ +
+
+
+
+
生产线B-主电机
+
SB-002
+
+
+
+
运行中
+
温度: 62°C | 功率: 28.1kW
+
+
+ +
+
+
+
+
生产线C-主电机
+
SB-003
+
+
+
+
警告
+
温度: 78°C | 功率: 31.5kW
+
+
+ +
+
+
+
+
冷却系统-泵1
+
SB-004
+
+
+
+
运行中
+
温度: 45°C | 功率: 11.2kW
+
+
+ +
+
+
+
+
冷却系统-泵2
+
SB-005
+
+
+
+
已停止
+
温度: 25°C | 功率: 0kW
+
+
+
+
+ + +
+
+ 生产订单进度 +
+ + + +
+
+
+
+
+
订单 #ORD-20230601
+
产品: 智能控制器
+
+
+
生产中
+
+
+
+
+
85%
+
+
+
+ +
+
+
订单 #ORD-20230602
+
产品: 工业传感器
+
+
+
生产中
+
+
+
+
+
62%
+
+
+
+ +
+
+
订单 #ORD-20230603
+
产品: 电源模块
+
+
+
计划中
+
+
+
+
+
15%
+
+
+
+ +
+
+
订单 #ORD-20230604
+
产品: 控制面板
+
+
+
生产中
+
+
+
+
+
93%
+
+
+
+ +
+
+
订单 #ORD-20230605
+
产品: 驱动器
+
+
+
已暂停
+
+
+
+
+
45%
+
+
+
+
+
+ + +
+
+ 操作员效率排行 +
+ + + +
+
+
+
+
+
+
+
张三
+
生产线A
+
+
+
+
效率: 98%
+
+
+
+
+
+
+
+ +
+
+
+
+
李四
+
生产线B
+
+
+
+
效率: 95%
+
+
+
+
+
+
+
+ +
+
+
+
+
王五
+
生产线C
+
+
+
+
效率: 92%
+
+
+
+
+
+
+
+ +
+
+
+
+
赵六
+
冷却系统
+
+
+
+
效率: 87%
+
+
+
+
+
+
+
+ +
+
+
+
+
钱七
+
检测线
+
+
+
+
效率: 76%
+
+
+
+
+
+
+
+
+
+
+ + +
+ +
+
+ 近期设备故障 +
+ + + +
+
+
+
+
+
生产线C-主电机
+
故障时间: 2023-06-16 14:30
+
+
+
温度过高
+
负责人: 技术部-张工
+
+
+ +
+
+
冷却系统-泵2
+
故障时间: 2023-06-15 09:15
+
+
+
电机故障
+
负责人: 维修部-李工
+
+
+ +
+
+
生产线B-传感器
+
故障时间: 2023-06-14 16:45
+
+
+
信号异常
+
负责人: 技术部-王工
+
+
+ +
+
+
检测线-控制器
+
故障时间: 2023-06-13 11:20
+
+
+
通讯故障
+
负责人: 技术部-赵工
+
+
+
+
+ + +
+
+ 预测维护计划 +
+ + + +
+
+
+
+
+
生产线A-主电机
+
预计维护时间: 2023-06-20
+
+
+
计划维护
+
维护内容: 定期检查和润滑
+
+
+ +
+
+
生产线C-主电机
+
预计维护时间: 2023-06-18
+
+
+
紧急维护
+
维护内容: 温度过高检查
+
+
+ +
+
+
冷却系统-泵2
+
预计维护时间: 2023-06-17
+
+
+
故障维修
+
维护内容: 电机故障修复
+
+
+ +
+
+
生产线B-主电机
+
预计维护时间: 2023-06-25
+
+
+
计划维护
+
维护内容: 定期检查和清洁
+
+
+
+
+
+
@@ -115,136 +1204,336 @@ homepage.style.display = 'none'; }); }); - //折线图 - var lineChart = echarts.init(document.getElementById('lineChart')); - var optionLine = { - animation: false, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 设备状态分布图表 + const deviceStatusChart = echarts.init(document.getElementById('device-status-chart')); + deviceStatusChart.setOption({ title: { - //text: '销售时间统计',// - left: 'left', // Center align the title horizontally + 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: 128, name: '运行中'}, + {value: 18, name: '警告'}, + {value: 12, name: '已停止'}, + {value: 6, name: '维护中'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 能耗趋势图表 + const energyTrendChart = echarts.init(document.getElementById('energy-trend-chart')); + energyTrendChart.setOption({ + title: { + text: '近30天能耗趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['总能耗(kWh)', '平均功率(kW)'], + 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: '能耗(kWh)', + min: 0, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: '功率(kW)', + min: 0, + axisLabel: { + formatter: '{value}' + } + } + ], + series: [ + { + name: '总能耗(kWh)', + type: 'line', + data: Array.from({length: 30}, () => Math.floor(Math.random() * 5000) + 10000) + }, + { + name: '平均功率(kW)', + type: 'line', + yAxisIndex: 1, + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 40) + } + ] + }); - // 自动触发选中状态并每隔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 temperatureChart = echarts.init(document.getElementById('temperature-chart')); + temperatureChart.setOption({ title: { - //text: '订单占比系统',// - left: 'left' + text: '主要设备温度监控', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'axis' }, - 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' + data: ['生产线A-主电机', '生产线B-主电机', '生产线C-主电机', '冷却系统-泵1', '冷却系统-泵2'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] + type: 'category', + data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] }, - 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: '温度(°C)', + min: 0, + max: 100 + }, + series: [ + { + name: '生产线A-主电机', + type: 'line', + data: [45, 48, 55, 58, 56, 50] + }, + { + name: '生产线B-主电机', + type: 'line', + data: [47, 50, 59, 62, 60, 53] + }, + { + name: '生产线C-主电机', + type: 'line', + data: [50, 55, 70, 78, 75, 65] + }, + { + name: '冷却系统-泵1', + type: 'line', + data: [38, 40, 42, 45, 43, 39] + }, + { + name: '冷却系统-泵2', + type: 'line', + data: [35, 36, 38, 40, 37, 34] + } + ] + }); + + // 生产完成率图表 + const productionChart = echarts.init(document.getElementById('production-chart')); + productionChart.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', '检测线', '包装线'] + }, + yAxis: [ + { + type: 'value', + name: '数量', + min: 0 + }, + { + type: 'value', + name: '完成率(%)', + min: 0, + max: 100, + axisLabel: { + formatter: '{value}%' + } + } + ], + series: [ + { + name: '计划产量', + type: 'bar', + data: [1200, 1500, 1800, 2000, 1600] + }, + { + name: '实际产量', + type: 'bar', + data: [1100, 1450, 1500, 1900, 1400] + }, + { + name: '完成率', + type: 'line', + yAxisIndex: 1, + data: [91.7, 96.7, 83.3, 95, 87.5], + label: { + show: true, + position: 'top', + formatter: '{c}%' + } + } + ] + }); + + // 窗口大小改变时重绘图表 + window.addEventListener('resize', function() { + deviceStatusChart.resize(); + energyTrendChart.resize(); + temperatureChart.resize(); + productionChart.resize(); + }); + + // 刷新按钮功能 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新设备状态分布数据 + deviceStatusChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 20) + 120, name: '运行中'}, + {value: Math.floor(Math.random() * 5) + 15, name: '警告'}, + {value: Math.floor(Math.random() * 5) + 10, name: '已停止'}, + {value: Math.floor(Math.random() * 3) + 5, name: '维护中'} + ] + }] + }); + + // 更新能耗趋势数据 + energyTrendChart.setOption({ + series: [ + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 5000) + 10000) + }, + { + data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 40) + } + ] + }); + + // 更新温度监控数据 + temperatureChart.setOption({ + series: [ + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 10) + 45)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 10) + 50)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 15) + 50)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 8) + 38)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 8) + 35)} + ] + }); + + // 更新生产完成率数据 + productionChart.setOption({ + series: [ + {data: [1200, 1500, 1800, 2000, 1600]}, + {data: Array.from({length: 5}, () => Math.floor(Math.random() * 300) + 1200)}, + { + data: Array.from({length: 5}, () => Math.floor(Math.random() * 15) + 80), + label: {formatter: '{c}%'} + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + alert('数据刷新成功！'); + }, 1000); + }); + + // 设置当前日期 + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + document.getElementById('date-selector').value = `${year}-${month}-${day}`; + }); diff --git a/gcxxfbglxt/src/main/resources/static/assets/crpm/index/index2/index2.css b/gcxxfbglxt/src/main/resources/static/assets/crpm/index/index2/index2.css index cec94c4..47eec87 100644 --- a/gcxxfbglxt/src/main/resources/static/assets/crpm/index/index2/index2.css +++ b/gcxxfbglxt/src/main/resources/static/assets/crpm/index/index2/index2.css @@ -295,11 +295,9 @@ .homepage{ background:#f5f4f9; height: calc(100vh - 100px); - padding-left:10px; - padding-right:10px; - padding-bottom:10px; + padding: 10px; box-sizing:border-box; - + overflow: auto; } .homepage-top{ padding-top:10px; diff --git a/gcxxfbglxt/src/main/resources/static/route/pages/index.html b/gcxxfbglxt/src/main/resources/static/route/pages/index.html index 1ea0dba..06fb1ff 100644 --- a/gcxxfbglxt/src/main/resources/static/route/pages/index.html +++ b/gcxxfbglxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,497 @@ +
@@ -71,16 +562,618 @@
-
-
-
-
+ +
+ +
+
+ + +
+
+ + +
-
-
-
+ + +
+ +
+
+
在线设备
+
+ +
+
+
128
+
+ 5.3% 相比昨日 +
+
+ + +
+
+
文档总数
+
+ +
+
+
245
+
+ 8.2% 相比上周 +
+
+ + +
+
+
活跃用户
+
+ +
+
+
32
+
+ 2.1% 相比昨日 +
+
+ + +
+
+
生产完成率
+
+ +
+
+
86.7%
+
+ 2.1% 相比昨日 +
+
-
+ + +
+ +
+
+ 设备状态分布 +
+ + +
+
+
+
+ + +
+
+ 文档类型分布 +
+ + +
+
+
+
+ + +
+
+ 用户角色分布 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 设备温度监控 +
+ + + +
+
+
+
+ + +
+
+ 生产订单进度 +
+ + + +
+
+
+
+
+ + +
+ +
+
+ 设备状态监控 +
+ + + +
+
+
+
+
+
+
+
生产线A-主电机
+
SB-001
+
+
+
+
运行中
+
温度: 58°C | 功率: 25.6kW
+
+
+ +
+
+
+
+
生产线B-主电机
+
SB-002
+
+
+
+
运行中
+
温度: 62°C | 功率: 28.1kW
+
+
+ +
+
+
+
+
生产线C-主电机
+
SB-003
+
+
+
+
警告
+
温度: 78°C | 功率: 31.5kW
+
+
+ +
+
+
+
+
冷却系统-泵1
+
SB-004
+
+
+
+
运行中
+
温度: 45°C | 功率: 11.2kW
+
+
+ +
+
+
+
+
冷却系统-泵2
+
SB-005
+
+
+
+
已停止
+
温度: 25°C | 功率: 0kW
+
+
+
+
+ + +
+
+ 最新文档 +
+ + + +
+
+
+
+
+
+
+
设备维护手册 V2.0
+
PDF文档
+
+
+
+
创建人: 技术部
+
2023-06-16
+
+
+ +
+
+
+
+
月度生产报表
+
Excel文档
+
+
+
+
创建人: 生产部
+
2023-06-15
+
+
+ +
+
+
+
+
新产品研发计划
+
PPT文档
+
+
+
+
创建人: 研发部
+
2023-06-14
+
+
+ +
+
+
+
+
安全操作规范
+
PDF文档
+
+
+
+
创建人: 安全部
+
2023-06-12
+
+
+ +
+
+
+
+
质量检测标准
+
Word文档
+
+
+
+
创建人: 质检部
+
2023-06-10
+
+
+
+
+ + +
+
+ 近期生产订单 +
+ + + +
+
+
+
+
+
订单 #ORD-20230601
+
产品: 智能控制器
+
+
+
生产中
+
+
+
+
+
85%
+
+
+
+ +
+
+
订单 #ORD-20230602
+
产品: 工业传感器
+
+
+
生产中
+
+
+
+
+
62%
+
+
+
+ +
+
+
订单 #ORD-20230603
+
产品: 电源模块
+
+
+
计划中
+
+
+
+
+
15%
+
+
+
+ +
+
+
订单 #ORD-20230604
+
产品: 控制面板
+
+
+
生产中
+
+
+
+
+
93%
+
+
+
+ +
+
+
订单 #ORD-20230605
+
产品: 驱动器
+
+
+
已暂停
+
+
+
+
+
45%
+
+
+
+
+
+
+ + +
+ +
+
+ 最近报表 +
+ + + +
+
+
+
+
+
设备运行周报
+
PDF格式
+
+
+
2023-06-16
+
已发布
+
+
+ +
+
+
能耗分析月报
+
Excel格式
+
+
+
2023-06-15
+
已发布
+
+
+ +
+
+
生产效率分析
+
PPT格式
+
+
+
2023-06-12
+
已发布
+
+
+ +
+
+
质量检测报告
+
Word格式
+
+
+
2023-06-10
+
草稿
+
+
+ +
+
+
安全检查报告
+
PDF格式
+
+
+
2023-06-08
+
已发布
+
+
+
+
+ + +
+
+ 系统公告 +
+ + + +
+
+
+
+
+
关于系统升级的通知
+
2023-06-16
+
+
+ 已发布 +
+
+ +
+
+
设备预防性维护计划
+
2023-06-15
+
+
+ 已发布 +
+
+ +
+
+
安全生产月活动安排
+
2023-06-12
+
+
+ 已发布 +
+
+ +
+
+
新产品上线通知
+
2023-06-10
+
+
+ 已发布 +
+
+ +
+
+
端午节放假安排
+
2023-06-08
+
+
+ 已发布 +
+
+
+
+ + +
+
+ 系统用户 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用户名姓名角色状态最后登录
admin管理员系统管理员在线2023-06-16 15:30
tech_zhang张三技术工程师在线2023-06-16 15:20
prod_li李四生产主管在线2023-06-16 15:15
maintain_wang王五维修工程师离线2023-06-16 12:30
quality_zhou赵六质量检测员在线2023-06-16 15:00
+
+
+
+
@@ -118,161 +1211,376 @@ homepage.style.display = 'none'; }); }); - //柱状图1 - var barChartOne = echarts.init(document.getElementById('barChartOne')); - var optionBarOne = { - animation: false, - title: { - //text: '业务核心数据'// - }, - tooltip: {}, - legend: { - 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 deviceStatusChart = echarts.init(document.getElementById('device-status-chart')); + deviceStatusChart.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: ['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: { + orient: 'vertical', + left: 'left', + data: ['运行中', '警告', '已停止', '维护中'] }, - 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); - //柱状图3 - var barChartThree = echarts.init(document.getElementById('barChartThree')); - var optionBarThree = { - animation: false, - title: { - //text: '业务核心数据'// + series: [ + { + name: '设备状态', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + {value: 128, name: '运行中'}, + {value: 18, name: '警告'}, + {value: 12, name: '已停止'}, + {value: 6, name: '维护中'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 文档类型分布图表 + const documentTypeChart = echarts.init(document.getElementById('document-type-chart')); + documentTypeChart.setOption({ + title: { + text: '文档类型分布', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, - 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); + 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: 85, name: '技术文档'}, + {value: 60, name: '操作手册'}, + {value: 45, name: '质量报告'}, + {value: 30, name: '生产计划'}, + {value: 25, name: '安全规范'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 用户角色分布图表 + const userRoleChart = echarts.init(document.getElementById('user-role-chart')); + userRoleChart.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: 5, name: '系统管理员'}, + {value: 12, name: '技术工程师'}, + {value: 8, name: '生产主管'}, + {value: 10, name: '维修工程师'}, + {value: 7, name: '质量检测员'}, + {value: 40, name: '操作员'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 设备温度监控图表 + const temperatureChart = echarts.init(document.getElementById('temperature-chart')); + temperatureChart.setOption({ + title: { + text: '设备温度监控', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['生产线A', '生产线B', '生产线C', '冷却系统-泵1', '冷却系统-泵2'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] + }, + yAxis: { + type: 'value', + name: '温度 (°C)', + min: 0, + max: 100, + axisLabel: { + formatter: '{value} °C' + } + }, + series: [ + { + name: '生产线A', + type: 'line', + data: [52, 53, 55, 58, 56, 53] + }, + { + name: '生产线B', + type: 'line', + data: [55, 56, 59, 62, 60, 57] + }, + { + name: '生产线C', + type: 'line', + data: [60, 62, 68, 75, 78, 72] + }, + { + name: '冷却系统-泵1', + type: 'line', + data: [42, 43, 45, 47, 46, 44] + }, + { + name: '冷却系统-泵2', + type: 'line', + data: [38, 39, 41, 43, 42, 40] + } + ] + }); + + // 生产订单进度图表 + const productionOrderChart = echarts.init(document.getElementById('production-order-chart')); + productionOrderChart.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: ['订单1', '订单2', '订单3', '订单4', '订单5'] + }, + yAxis: [ + { + type: 'value', + name: '数量', + min: 0 + }, + { + type: 'value', + name: '完成率(%)', + min: 0, + max: 100, + axisLabel: { + formatter: '{value}%' + } + } + ], + series: [ + { + name: '计划产量', + type: 'bar', + data: [1200, 1500, 1800, 2000, 1600] + }, + { + name: '实际产量', + type: 'bar', + data: [1020, 1425, 1440, 1900, 1360] + }, + { + name: '完成率', + type: 'line', + yAxisIndex: 1, + data: [85, 95, 80, 95, 85], + label: { + show: true, + position: 'top', + formatter: '{c}%' + } + } + ] + }); + + // 窗口大小改变时重绘图表 + window.addEventListener('resize', function() { + deviceStatusChart.resize(); + documentTypeChart.resize(); + userRoleChart.resize(); + temperatureChart.resize(); + productionOrderChart.resize(); + }); + + // 刷新按钮功能 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新设备状态分布数据 + deviceStatusChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 20) + 120, name: '运行中'}, + {value: Math.floor(Math.random() * 5) + 15, name: '警告'}, + {value: Math.floor(Math.random() * 5) + 10, name: '已停止'}, + {value: Math.floor(Math.random() * 3) + 5, name: '维护中'} + ] + }] + }); + + // 更新文档类型分布数据 + documentTypeChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 20) + 80, name: '技术文档'}, + {value: Math.floor(Math.random() * 15) + 55, name: '操作手册'}, + {value: Math.floor(Math.random() * 10) + 40, name: '质量报告'}, + {value: Math.floor(Math.random() * 8) + 25, name: '生产计划'}, + {value: Math.floor(Math.random() * 7) + 20, name: '安全规范'} + ] + }] + }); + + // 更新用户角色分布数据 + userRoleChart.setOption({ + series: [{ + data: [ + {value: 5, name: '系统管理员'}, + {value: Math.floor(Math.random() * 5) + 10, name: '技术工程师'}, + {value: Math.floor(Math.random() * 3) + 6, name: '生产主管'}, + {value: Math.floor(Math.random() * 4) + 8, name: '维修工程师'}, + {value: Math.floor(Math.random() * 3) + 5, name: '质量检测员'}, + {value: Math.floor(Math.random() * 10) + 35, name: '操作员'} + ] + }] + }); + + // 更新设备温度监控数据 + temperatureChart.setOption({ + series: [ + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 10) + 50)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 10) + 55)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 15) + 60)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 8) + 40)}, + {data: Array.from({length: 6}, () => Math.floor(Math.random() * 8) + 35)} + ] + }); + + // 更新生产订单进度数据 + productionOrderChart.setOption({ + series: [ + {data: [1200, 1500, 1800, 2000, 1600]}, + {data: Array.from({length: 5}, () => Math.floor(Math.random() * 300) + 1200)}, + { + data: Array.from({length: 5}, () => Math.floor(Math.random() * 15) + 80), + label: {formatter: '{c}%'} + } + ] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + alert('数据刷新成功！'); + }, 1000); + }); + + // 设置当前日期 + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + document.getElementById('date-selector').value = `${year}-${month}-${day}`; + }); diff --git a/hlwdxyjrpt/src/main/resources/static/route/pages/index.html b/hlwdxyjrpt/src/main/resources/static/route/pages/index.html index eecc08e..0c083d6 100644 --- a/hlwdxyjrpt/src/main/resources/static/route/pages/index.html +++ b/hlwdxyjrpt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,314 @@ +
@@ -83,15 +391,438 @@
欢迎使用互联网短信云接入平台
-
-
-
-
-
-
-
-
-
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
短信发送总量
+
+ +
+
+
12,854
+
+ 7.2% 相比上周 +
+
+ + +
+
+
发送成功
+
+ +
+
+
11,562
+
+ 8.5% 相比上周 +
+
+ + +
+
+
发送失败
+
+ +
+
+
1,292
+
+ 3.1% 相比上周 +
+
+ + +
+
+
黑名单数量
+
+ +
+
+
156
+
+ 5.4% 相比上周 +
+
+
+ + +
+ +
+
+ 短信发送状态分布 +
+ + +
+
+
+
+ + +
+
+ 短信模板使用频率 +
+ + +
+
+
+
+ + +
+
+ 短信发送时段分布 +
+ + +
+
+
+
+
+ + +
+ +
+
+ 每日短信发送量趋势 +
+ + + +
+
+
+
+ + +
+
+ 错误码分布 +
+ + + +
+
+
+
+
+ + +
+ +
+
+ 最近短信发送记录 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
接收号码短信模板发送时间状态操作
138****1234验证码通知2023-06-16 15:30:25成功
139****5678订单通知2023-06-16 15:28:45成功
137****9012营销推广2023-06-16 15:25:10失败
136****3456服务提醒2023-06-16 15:20:30成功
135****7890验证码通知2023-06-16 15:18:55处理中
+
+
+ + +
+
+ 黑名单列表 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
手机号码加入时间原因操作
131****11112023-06-15多次拒收
132****22222023-06-14投诉垃圾短信
133****33332023-06-13号码无效
134****44442023-06-12运营商限制
135****55552023-06-10多次拒收
+
+
+
+ + +
+ +
+
+ 短信模板列表 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
模板ID模板名称模板内容状态操作
MB-001验证码通知您的验证码是{code}，有效期{time}分钟已启用 + + +
MB-002订单通知您的订单{orderNo}已{status}，感谢您的购买已启用 + + +
MB-003营销推广限时优惠！{product}仅售{price}元，点击{url}抢购已启用 + + +
MB-004服务提醒您的服务{service}将于{date}到期，请及时续费已停用 + + +
MB-005支付通知您已成功支付{amount}元，订单号{orderNo}已启用 + + +
+
+
+ + +
+
+ 接口配置列表 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
接口名称接口URL请求方法状态操作
短信发送接口https://api.example.com/sendPOST正常 + + +
模板查询接口https://api.example.com/templateGET正常 + + +
状态查询接口https://api.example.com/statusGET正常 + + +
签名管理接口https://api.example.com/signaturePOST异常 + + +
余额查询接口https://api.example.com/balanceGET正常 + + +
+
+
+
+
@@ -129,134 +860,329 @@ homepage.style.display = 'none'; }); }); - //折线图 - var lineChart = echarts.init(document.getElementById('lineChart')); - var optionLine = { - animation: false, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 短信发送状态分布图表 + const smsStatusChart = echarts.init(document.getElementById('sms-status-chart')); + smsStatusChart.setOption({ title: { - //text: '销售时间统计',// - left: 'left', // Center align the title horizontally + 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: 11562, name: '成功'}, + {value: 1292, name: '失败'}, + {value: 342, name: '处理中'}, + {value: 58, name: '已取消'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 短信模板使用频率图表 + const templateUsageChart = echarts.init(document.getElementById('template-usage-chart')); + templateUsageChart.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: 4500, name: '验证码通知'}, + {value: 3200, name: '订单通知'}, + {value: 2500, name: '营销推广'}, + {value: 1200, name: '服务提醒'}, + {value: 900, name: '支付通知'}, + {value: 554, name: '其他'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 短信发送时段分布图表 + const sendTimeChart = echarts.init(document.getElementById('send-time-chart')); + sendTimeChart.setOption({ + title: { + text: '短信发送时段分布', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } }, xAxis: { type: 'category', - boundaryGap: false, - data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7'] + data: ['00:00-04:00', '04:00-08:00', '08:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00'] }, 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; // 定时器变量 + series: [ + { + name: '短信数量', + type: 'bar', + data: [560, 890, 3200, 2800, 3500, 1904] + } + ] + }); - // 自动触发选中状态并每隔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 dailySendTrendChart = echarts.init(document.getElementById('daily-send-trend-chart')); + dailySendTrendChart.setOption({ title: { - //text: '订单占比系统',// - left: 'left' + text: '每日短信发送量趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'axis' }, - 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' + data: ['发送总量', '成功数量', '失败数量'], + top: '10%', + left: 'center' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, xAxis: { - data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',] + type: 'category', + boundaryGap: false, + data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7', '6/8', '6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16'] }, - 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: '短信数量' + }, + series: [ + { + name: '发送总量', + type: 'line', + data: [850, 920, 1050, 1100, 1250, 1320, 1400, 1350, 1420, 1500, 1480, 1550, 1600, 1580, 1650, 1680] + }, + { + name: '成功数量', + type: 'line', + data: [780, 850, 950, 1000, 1150, 1200, 1280, 1230, 1300, 1380, 1350, 1420, 1480, 1450, 1520, 1550] + }, + { + name: '失败数量', + type: 'line', + data: [70, 70, 100, 100, 100, 120, 120, 120, 120, 120, 130, 130, 120, 130, 130, 130] + } + ] + }); + + // 错误码分布图表 + const errorCodeChart = echarts.init(document.getElementById('error-code-chart')); + errorCodeChart.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: 450, name: '号码无效'}, + {value: 320, name: '运营商限制'}, + {value: 200, name: '内容违规'}, + {value: 150, name: '频率超限'}, + {value: 120, name: '系统错误'}, + {value: 52, name: '其他'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 窗口大小改变时重绘图表 + window.addEventListener('resize', function() { + smsStatusChart.resize(); + templateUsageChart.resize(); + sendTimeChart.resize(); + dailySendTrendChart.resize(); + errorCodeChart.resize(); + }); + + // 刷新按钮功能 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新短信发送状态分布数据 + smsStatusChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 500) + 11500, name: '成功'}, + {value: Math.floor(Math.random() * 100) + 1200, name: '失败'}, + {value: Math.floor(Math.random() * 50) + 300, name: '处理中'}, + {value: Math.floor(Math.random() * 20) + 50, name: '已取消'} + ] + }] + }); + + // 更新短信模板使用频率数据 + templateUsageChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 300) + 4200, name: '验证码通知'}, + {value: Math.floor(Math.random() * 200) + 3000, name: '订单通知'}, + {value: Math.floor(Math.random() * 200) + 2300, name: '营销推广'}, + {value: Math.floor(Math.random() * 100) + 1100, name: '服务提醒'}, + {value: Math.floor(Math.random() * 100) + 800, name: '支付通知'}, + {value: Math.floor(Math.random() * 50) + 500, name: '其他'} + ] + }] + }); + + // 更新短信发送时段分布数据 + sendTimeChart.setOption({ + series: [{ + data: [ + Math.floor(Math.random() * 200) + 500, + Math.floor(Math.random() * 200) + 800, + Math.floor(Math.random() * 300) + 3000, + Math.floor(Math.random() * 300) + 2500, + Math.floor(Math.random() * 300) + 3200, + Math.floor(Math.random() * 200) + 1800 + ] + }] + }); + + // 更新每日短信发送量趋势数据 + dailySendTrendChart.setOption({ + series: [ + { + data: Array.from({length: 16}, () => Math.floor(Math.random() * 300) + 1300) + }, + { + data: Array.from({length: 16}, (_, i) => Math.floor(dailySendTrendChart.getOption().series[0].data[i] * 0.9)) + }, + { + data: Array.from({length: 16}, (_, i) => dailySendTrendChart.getOption().series[0].data[i] - dailySendTrendChart.getOption().series[1].data[i]) + } + ] + }); + + // 更新错误码分布数据 + errorCodeChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 100) + 400, name: '号码无效'}, + {value: Math.floor(Math.random() * 80) + 280, name: '运营商限制'}, + {value: Math.floor(Math.random() * 50) + 180, name: '内容违规'}, + {value: Math.floor(Math.random() * 40) + 120, name: '频率超限'}, + {value: Math.floor(Math.random() * 30) + 100, name: '系统错误'}, + {value: Math.floor(Math.random() * 20) + 40, name: '其他'} + ] + }] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + alert('数据刷新成功！'); + }, 1000); + }); + + // 设置当前日期 + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + document.getElementById('date-selector').value = `${year}-${month}-${day}`; + }); diff --git a/jyrycljcspglxt/src/main/resources/static/assets/crpm/index/index4/index4.css b/jyrycljcspglxt/src/main/resources/static/assets/crpm/index/index4/index4.css index d44d529..4eb2f73 100644 --- a/jyrycljcspglxt/src/main/resources/static/assets/crpm/index/index4/index4.css +++ b/jyrycljcspglxt/src/main/resources/static/assets/crpm/index/index4/index4.css @@ -287,8 +287,8 @@ padding-right:10px; padding-bottom:10px; box-sizing:border-box; - border-radius:20px - + border-radius:20px; + overflow: auto; } .homepage-top{ padding-top:10px; diff --git a/jyrycljcspglxt/src/main/resources/static/route/pages/index.html b/jyrycljcspglxt/src/main/resources/static/route/pages/index.html index 71cf9e8..ba69423 100644 --- a/jyrycljcspglxt/src/main/resources/static/route/pages/index.html +++ b/jyrycljcspglxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,340 @@ +
@@ -75,24 +409,427 @@
-
-
-
-
- - + +
+ +
+
+ +
-
-
-
+
+ + +
+
+ +
+ +
+
+
今日进出总量
+
+ +
+
+
1,285
+
+ 8.7% 相比昨日 +
-
-
+ + +
+
+
今日审批通过
+
+ +
+
+
1,156
+
+ 9.2% 相比昨日 +
-
- - + + +
+
+
今日审批拒绝
+
+ +
+
+
129
+
+ 4.3% 相比昨日 +
+
+ + +
+
+
黑名单车辆
+
+ +
+
+
156
+
+ 2.1% 相比昨日 +
+
+
+ + +
+ +
+
+ 车辆进出类型分布 +
+ + +
+
+
+
+ + +
+
+ 车辆类型分布 +
+ + +
+
+
+
+ + +
+
+ 每日进出量趋势 +
+ + + +
+
+
+
+
+ + +
+ +
+
+ 进出时间分布 +
+ + + +
+
+
+
+ + +
+
+ 报警类型分布 +
+ + + +
+
+
+
+
+ + +
+ +
+
+ 最近车辆进出记录 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
车牌号车辆类型驾驶员进出时间审批状态
京A·12345轿车张三2023-06-16 15:30:25已通过
京B·67890货车李四2023-06-16 15:28:45已通过
京C·54321客车王五2023-06-16 15:25:10已拒绝
京D·09876轿车赵六2023-06-16 15:20:30已通过
京E·13579货车孙七2023-06-16 15:18:55待审批
+
+
+ + +
+
+ 黑名单车辆列表 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
车牌号车主姓名列入时间黑名单原因操作
京A·11111钱八2023-06-15多次违规
京B·22222周九2023-06-14未缴费
京C·33333吴十2023-06-13证件不全
京D·44444郑十一2023-06-12安全隐患
京E·55555王十二2023-06-10违规操作
+
+
+
+ + +
+ +
+
+ 待审批申请 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
申请人车牌号进出时间紧急程度操作
张三京A·666662023-06-16 16:00:00高 + +
李四京B·777772023-06-16 16:30:00中 + +
王五京C·888882023-06-16 17:00:00中 + +
赵六京D·999992023-06-16 17:30:00低 + +
孙七京E·000002023-06-16 18:00:00低 + +
+
+
+ + +
+
+ 系统报警列表 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
报警类型报警时间报警位置处理状态操作
黑名单车辆2023-06-16 15:25:10东门已处理
超时未出2023-06-16 15:15:30西门处理中
异常停留2023-06-16 15:10:45停车场A处理中
未授权进入2023-06-16 15:05:20南门已处理
系统异常2023-06-16 14:55:10服务器机房已处理
+
+
+
+
+ +
@@ -127,141 +864,357 @@ homepage.style.display = 'none'; }); }); - //折线图1 - var lineChartOne = echarts.init(document.getElementById('lineChartOne')); - var optionLineOne = { - 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: {} - }] - }; - lineChartOne.setOption(optionLineOne); - // 饼状图 - var pieChart = echarts.init(document.getElementById('pieChart')); - var optionPie = { - 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'} - ] - }] - }; - pieChart.setOption(optionPie); - //折线图2 - var lineChartTwo = echarts.init(document.getElementById('lineChartTwo')); - var optionLineTwo = { - 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','2024-8','2024-9','2024-10'] - }, - yAxis: { - type: 'value' - }, - tooltip: { - trigger: 'axis' // 设置触发类型为坐标轴触发 - }, - series: [{ - data: [820, 200, 1500, 300, 500, 1600, 1320,200,500,1500], - type: 'line', - }] - }; - lineChartTwo.setOption(optionLineTwo); - //柱状图3 - var barChartThree = echarts.init(document.getElementById('barChartThree')); - var optionBarThree = { - animation: false, - title: { - //text: '业务核心数据'// - }, + // 初始化图表 + document.addEventListener('DOMContentLoaded', function() { + // 车辆进出类型分布图表 + const vehicleTypeChart = echarts.init(document.getElementById('vehicle-type-chart')); + vehicleTypeChart.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: 625, name: '进入'}, + {value: 580, name: '离开'}, + {value: 50, name: '临时停车'}, + {value: 25, name: '长期停放'}, + {value: 5, name: '其他'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 车辆类型分布图表 + const vehicleCategoryChart = echarts.init(document.getElementById('vehicle-category-chart')); + vehicleCategoryChart.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: 720, name: '轿车'}, + {value: 350, name: '货车'}, + {value: 150, name: '客车'}, + {value: 60, name: '摩托车'}, + {value: 5, name: '其他'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 每日进出量趋势图表 + const dailyTrafficChart = echarts.init(document.getElementById('daily-traffic-chart')); + dailyTrafficChart.setOption({ + title: { + text: '每日进出量趋势', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, 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); - //折线图3 - var lineChartThree = echarts.init(document.getElementById('lineChartThree')); - var optionLineThree = { - animation: false, - title: { - //text: '业务核心数据',// - left: 'left', // Center align the title horizontally - }, - xAxis: { - type: 'category', - data: ['1', '2', '3', '4', '5', '6', '7','8','9','10'] - }, - yAxis: { - type: 'value' - }, - tooltip: { - trigger: 'axis' // 设置触发类型为坐标轴触发 - }, - series: [ - { - data: [820, 900, 1200, 700, 850, 1100, 900,800,1000,1200], - type: 'line', - areaStyle: {} - }, - { - data: [720, 500, 800, 500, 650, 900, 800,700,600,1100], - type: 'line', - areaStyle: {} - }, - ] - }; - lineChartThree.setOption(optionLineThree); + type: 'category', + boundaryGap: false, + data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7', '6/8', '6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16'] + }, + yAxis: { + type: 'value', + name: '车辆数量' + }, + series: [ + { + name: '总进出量', + type: 'line', + data: [950, 1020, 1100, 1080, 1150, 1220, 1280, 1250, 1300, 1350, 1320, 1380, 1420, 1450, 1480, 1500] + } + ] + }); + + // 进出时间分布图表 + const timeDistributionChart = echarts.init(document.getElementById('time-distribution-chart')); + timeDistributionChart.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: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: '进入', + type: 'bar', + data: [30, 120, 180, 100, 80, 90, 70, 60, 70, 80, 100, 120, 150, 100, 60, 30] + }, + { + name: '离开', + type: 'bar', + data: [20, 80, 120, 150, 90, 80, 70, 60, 70, 90, 110, 130, 180, 120, 80, 40] + } + ] + }); + + // 报警类型分布图表 + const alertTypeChart = echarts.init(document.getElementById('alert-type-chart')); + alertTypeChart.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: 25, name: '超时未出'}, + {value: 20, name: '异常停留'}, + {value: 15, name: '未授权进入'}, + {value: 10, name: '系统异常'}, + {value: 5, name: '其他'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 窗口大小改变时重绘图表 + window.addEventListener('resize', function() { + vehicleTypeChart.resize(); + vehicleCategoryChart.resize(); + dailyTrafficChart.resize(); + timeDistributionChart.resize(); + alertTypeChart.resize(); + }); + + // 刷新按钮功能 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新车辆进出类型分布数据 + vehicleTypeChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 100) + 600, name: '进入'}, + {value: Math.floor(Math.random() * 100) + 550, name: '离开'}, + {value: Math.floor(Math.random() * 20) + 40, name: '临时停车'}, + {value: Math.floor(Math.random() * 10) + 20, name: '长期停放'}, + {value: Math.floor(Math.random() * 5) + 1, name: '其他'} + ] + }] + }); + + // 更新车辆类型分布数据 + vehicleCategoryChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 100) + 700, name: '轿车'}, + {value: Math.floor(Math.random() * 50) + 300, name: '货车'}, + {value: Math.floor(Math.random() * 30) + 120, name: '客车'}, + {value: Math.floor(Math.random() * 10) + 50, name: '摩托车'}, + {value: Math.floor(Math.random() * 5) + 1, name: '其他'} + ] + }] + }); + + // 更新每日进出量趋势数据 + dailyTrafficChart.setOption({ + series: [{ + data: Array.from({length: 16}, () => Math.floor(Math.random() * 300) + 1200) + }] + }); + + // 更新进出时间分布数据 + timeDistributionChart.setOption({ + series: [ + { + data: [ + Math.floor(Math.random() * 20) + 20, + Math.floor(Math.random() * 40) + 80, + Math.floor(Math.random() * 40) + 140, + Math.floor(Math.random() * 40) + 80, + Math.floor(Math.random() * 40) + 60, + Math.floor(Math.random() * 40) + 70, + Math.floor(Math.random() * 30) + 50, + Math.floor(Math.random() * 30) + 40, + Math.floor(Math.random() * 30) + 50, + Math.floor(Math.random() * 40) + 60, + Math.floor(Math.random() * 40) + 80, + Math.floor(Math.random() * 40) + 100, + Math.floor(Math.random() * 40) + 140, + Math.floor(Math.random() * 40) + 100, + Math.floor(Math.random() * 40) + 60, + Math.floor(Math.random() * 20) + 20 + ] + }, + { + data: [ + Math.floor(Math.random() * 20) + 10, + Math.floor(Math.random() * 40) + 60, + Math.floor(Math.random() * 40) + 100, + Math.floor(Math.random() * 40) + 120, + Math.floor(Math.random() * 40) + 70, + Math.floor(Math.random() * 40) + 60, + Math.floor(Math.random() * 30) + 50, + Math.floor(Math.random() * 30) + 40, + Math.floor(Math.random() * 30) + 50, + Math.floor(Math.random() * 40) + 70, + Math.floor(Math.random() * 40) + 90, + Math.floor(Math.random() * 40) + 110, + Math.floor(Math.random() * 40) + 160, + Math.floor(Math.random() * 40) + 100, + Math.floor(Math.random() * 40) + 60, + Math.floor(Math.random() * 20) + 10 + ] + } + ] + }); + + // 更新报警类型分布数据 + alertTypeChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 10) + 30, name: '黑名单车辆'}, + {value: Math.floor(Math.random() * 10) + 20, name: '超时未出'}, + {value: Math.floor(Math.random() * 10) + 15, name: '异常停留'}, + {value: Math.floor(Math.random() * 5) + 10, name: '未授权进入'}, + {value: Math.floor(Math.random() * 5) + 5, name: '系统异常'}, + {value: Math.floor(Math.random() * 3) + 1, name: '其他'} + ] + }] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + alert('数据刷新成功！'); + }, 1000); + }); + + // 设置当前日期 + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + document.getElementById('date-selector').value = `${year}-${month}-${day}`; + }); diff --git a/qysczyjhxt/src/main/resources/static/route/pages/index.html b/qysczyjhxt/src/main/resources/static/route/pages/index.html index 5fc6694..f04b0d4 100644 --- a/qysczyjhxt/src/main/resources/static/route/pages/index.html +++ b/qysczyjhxt/src/main/resources/static/route/pages/index.html @@ -9,6 +9,340 @@ +
@@ -71,20 +405,469 @@
-
-
-
-
+ +
+ +
+
+ +
-
-
-
+
+ +
-
-
-
- + + +
+ +
+
+
今日生产总量
+
+ +
+
+
12,580
+
+ 3.2% 相比昨日 +
+
+ + +
+
+
订单完成率
+
+ +
+
+
92.5%
+
+ 1.8% 相比昨日 +
+
+ + +
+
+
库存预警数
+
+ +
+
+
8
+
+ 2.3% 相比昨日 +
+
+ + +
+
+
设备故障率
+
+ +
+
+
1.2%
+
+ 0.3% 相比昨日 +
+
+
+ + +
+ +
+
+ 生产进度追踪 +
+ + + +
+
+
+
+ + +
+
+ 库存水平分布 +
+ + + +
+
+
+
+
+ + +
+ +
+
+ 订单交付率 +
+ + + +
+
+
+
+ + +
+
+ 质量合格率 +
+ + + +
+
+
+
+ + +
+
+ 设备状态分布 +
+ + + +
+
+
+
+
+ + +
+ +
+
+ 最近生产订单 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
订单编号产品名称数量开始时间状态进度
ORD-20230616001产品A5,0002023-06-16进行中 +
+
+
+ 75% +
ORD-20230615002产品B3,2002023-06-15已完成 +
+
+
+ 100% +
ORD-20230615003产品C2,8002023-06-15进行中 +
+
+
+ 45% +
ORD-20230614004产品D4,5002023-06-14已完成 +
+
+
+ 100% +
ORD-20230614005产品E1,8002023-06-14已完成 +
+
+
+ 100% +
+
+
+ + +
+
+ 库存预警列表 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
物料编码物料名称当前库存安全库存预警级别操作
MAT-001原材料A250500紧急
MAT-002原材料B8001000中等
MAT-003零部件C120200紧急
MAT-004零部件D450500中等
MAT-005包装材料E18002000中等
+
+
+
+ + +
+ +
+
+ 设备维护计划 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
设备编号设备名称维护周期上次维护下次维护状态
EQU-001生产线A30天2023-06-012023-07-01正常
EQU-002包装机B15天2023-06-102023-06-25正常
EQU-003注塑机C7天2023-06-122023-06-19待维护
EQU-004切割机D30天2023-05-202023-06-20待维护
EQU-005检测设备E90天2023-03-152023-06-15已逾期
+
+
+ + +
+
+ 最近质量检测记录 +
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
检测项目批次号检测日期负责人结果操作
外观检测BAT-202306160012023-06-16李工合格
功能检测BAT-202306160012023-06-16王工合格
性能检测BAT-202306150022023-06-15张工不合格
可靠性检测BAT-202306150022023-06-15刘工合格
包装检测BAT-202306140032023-06-14赵工合格
+
+
+
+
+
+ +
@@ -118,161 +901,317 @@ homepage.style.display = 'none'; }); }); - //柱状图1 - var barChartOne = echarts.init(document.getElementById('barChartOne')); - var optionBarOne = { - animation: false, - title: { - //text: '业务核心数据'// - }, - tooltip: {}, - legend: { - 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 productionProgressChart = echarts.init(document.getElementById('production-progress-chart')); + productionProgressChart.setOption({ title: { - //text: '业务核心数据',// - left: 'left' + text: '生产进度追踪', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } }, tooltip: { - trigger: 'item' + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } }, - 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'} - ] - }] - }; - pieChart.setOption(optionPie); - //柱状图2 - var barChartTwo = echarts.init(document.getElementById('barChartTwo')); - var optionBarTwo = { - animation: false, - title: { - //text: '业务核心数据'// + legend: { + data: ['计划产量', '实际产量'], + top: '10%', + left: 'center' }, - 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); - //柱状图3 - var barChartThree = echarts.init(document.getElementById('barChartThree')); - var optionBarThree = { - animation: false, - title: { - //text: '业务核心数据'// + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true }, - 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); + xAxis: { + type: 'category', + data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7', '6/8', '6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: '计划产量', + type: 'line', + data: [800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550] + }, + { + name: '实际产量', + type: 'line', + data: [820, 870, 920, 980, 1030, 1090, 1120, 1180, 1230, 1280, 1320, 1370, 1420, 1470, 1530, 1580] + } + ] + }); + + // 库存水平图表 + const inventoryLevelChart = echarts.init(document.getElementById('inventory-level-chart')); + inventoryLevelChart.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: 65, name: '安全库存'}, + {value: 15, name: '低库存'}, + {value: 12, name: '高库存'}, + {value: 8, name: '缺货'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 订单交付率图表 + const deliveryRateChart = echarts.init(document.getElementById('delivery-rate-chart')); + deliveryRateChart.setOption({ + title: { + text: '订单交付率', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['1月', '2月', '3月', '4月', '5月', '6月'] + }, + yAxis: { + type: 'value', + min: 80, + max: 100 + }, + series: [ + { + name: '交付率(%)', + type: 'line', + data: [85, 87, 89, 91, 93, 92.5] + } + ] + }); + + // 质量合格率图表 + const qualityRateChart = echarts.init(document.getElementById('quality-rate-chart')); + qualityRateChart.setOption({ + title: { + text: '质量合格率', + left: 'center', + textStyle: { + color: '#333', + fontSize: 14 + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: ['1月', '2月', '3月', '4月', '5月', '6月'] + }, + yAxis: { + type: 'value', + min: 90, + max: 100 + }, + series: [ + { + name: '合格率(%)', + type: 'line', + data: [94, 95, 96, 97, 98, 98.5] + } + ] + }); + + // 设备状态图表 + const equipmentStatusChart = echarts.init(document.getElementById('equipment-status-chart')); + equipmentStatusChart.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: 65, name: '正常运行'}, + {value: 15, name: '维护中'}, + {value: 10, name: '故障'}, + {value: 10, name: '闲置'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }); + + // 窗口大小改变时重绘图表 + window.addEventListener('resize', function() { + productionProgressChart.resize(); + inventoryLevelChart.resize(); + deliveryRateChart.resize(); + qualityRateChart.resize(); + equipmentStatusChart.resize(); + }); + + // 刷新按钮功能 + document.getElementById('refresh-btn').addEventListener('click', function() { + // 显示加载状态 + this.innerHTML = ' 刷新中...'; + this.disabled = true; + + // 模拟数据刷新 + setTimeout(() => { + // 更新生产进度数据 + productionProgressChart.setOption({ + series: [ + { + data: [800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550] + }, + { + data: [820, 870, 920, 980, 1030, 1090, 1120, 1180, 1230, 1280, 1320, 1370, 1420, 1470, 1530, 1580 + Math.floor(Math.random() * 50)] + } + ] + }); + + // 更新库存水平数据 + inventoryLevelChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 10) + 60, name: '安全库存'}, + {value: Math.floor(Math.random() * 5) + 12, name: '低库存'}, + {value: Math.floor(Math.random() * 5) + 10, name: '高库存'}, + {value: Math.floor(Math.random() * 5) + 5, name: '缺货'} + ] + }] + }); + + // 更新订单交付率数据 + deliveryRateChart.setOption({ + series: [{ + data: [85, 87, 89, 91, 93, 92.5 + Math.random() * 1] + }] + }); + + // 更新质量合格率数据 + qualityRateChart.setOption({ + series: [{ + data: [94, 95, 96, 97, 98, 98.5 + Math.random() * 0.5] + }] + }); + + // 更新设备状态数据 + equipmentStatusChart.setOption({ + series: [{ + data: [ + {value: Math.floor(Math.random() * 10) + 60, name: '正常运行'}, + {value: Math.floor(Math.random() * 5) + 12, name: '维护中'}, + {value: Math.floor(Math.random() * 5) + 8, name: '故障'}, + {value: Math.floor(Math.random() * 5) + 8, name: '闲置'} + ] + }] + }); + + // 恢复按钮状态 + this.innerHTML = ' 刷新数据'; + this.disabled = false; + + // 显示刷新成功提示 + alert('数据刷新成功！'); + }, 1000); + }); + + // 设置当前日期 + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + document.getElementById('date-selector').value = `${year}-${month}-${day}`; + });