diff --git a/src/api/report/reportAPI.js b/src/api/report/reportAPI.js
index a11cdb1..51a4a4b 100644
--- a/src/api/report/reportAPI.js
+++ b/src/api/report/reportAPI.js
@@ -226,7 +226,7 @@ export function repairHoursStatList(query) {
})
}
-// 设备 OEE 分析报表 (注塑车间计算版本)
+// 注塑车间 OEE 分析报表：页面入口沿用设备 OEE 分析，后端按 A/P/Q 计算完整 OEE。
export function deviceOeeAnalysisList(query) {
return request({
url: '/report/injectionOee/deviceOeeAnalysis',
diff --git a/src/views/report/deviceOeeAnalysis/index.vue b/src/views/report/deviceOeeAnalysis/index.vue
index 38cc8a3..100fa4d 100644
--- a/src/views/report/deviceOeeAnalysis/index.vue
+++ b/src/views/report/deviceOeeAnalysis/index.vue
@@ -35,55 +35,75 @@
- 设备 OEE 对比 (注塑车间班次计算版)
+ 每台设备 OEE 对比
-
-
-
-
-
+
+
+
+
- {{ formatPercent(scope.row.AVAILABILITY) }}
+ {{ formatPercent(scope.row.OEE) }}
-
+
- {{ formatPercent(scope.row.PERFORMANCE) }}
+ {{ formatPercent(scope.row.AVAILABILITY) }}
-
+
+
+ {{ formatPercent(scope.row.PERFORMANCE) }}
+
+
+
{{ formatPercent(scope.row.QUALITY) }}
-
+
- {{ formatPercent(scope.row.OEE) }}
+ {{ formatPercent(scope.row.TOTAL_AVAILABILITY) }}
-
+
- {{ (scope.row.ACTUAL_RUN_SECONDS / 60).toFixed(1) }} 分钟
+ {{ formatPercent(scope.row.WEEK_AVAILABILITY) }}
-
+
- {{ scope.row.PLANNED_TIME_MINUTES }} 分钟
+ {{ formatPercent(scope.row.TODAY_AVAILABILITY) }}
-
-
-
-
+
- {{ scope.row.STANDARD_CYCLE.toFixed(2) }} 秒
+ {{ formatNumber(scope.row.RUN_TIME_MINUTES, 1) }}
+
+
+
+
+
+
+ {{ formatNumber(scope.row.OUTPUT_QTY, 0) }}
+
+
+
+
+ {{ formatNumber(scope.row.STANDARD_CYCLE_SECONDS, 2) }}
+
+
+
+
+
+ {{ scope.row.DOWNGRADE_REASON }}
+
+ -
-
@@ -118,9 +138,23 @@ export default {
mounted() {
this.$nextTick(() => {
this.barChart = echarts.init(this.$refs.barChart)
+ this.initBarChart()
+ window.addEventListener('resize', this.handleResize)
})
},
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleResize)
+ if (this.barChart) {
+ this.barChart.dispose()
+ this.barChart = null
+ }
+ },
methods: {
+ handleResize() {
+ if (this.barChart) {
+ this.barChart.resize()
+ }
+ },
/** 查询报表数据 */
getList() {
this.loading = true
@@ -154,31 +188,36 @@ export default {
/** 初始化柱状图 */
initBarChart() {
if (!this.barChart) return
- // X轴标签包含设备名与班次
- const xData = (this.reportList || []).map(item => {
- const devName = item.DEVICE_NAME || item.DEVICE_CODE
- return `${devName}\n(${item.SHIFT_NAME})`
- })
- const yData = (this.reportList || []).map(item => item.OEE || 0)
+
+ const xData = (this.reportList || []).map(item => item.DEVICE_NAME || item.DEVICE_CODE)
+ const yDataOee = (this.reportList || []).map(item => item.OEE || 0)
+ const yDataA = (this.reportList || []).map(item => item.AVAILABILITY || 0)
+ const yDataP = (this.reportList || []).map(item => item.PERFORMANCE || 0)
+ const yDataQ = (this.reportList || []).map(item => item.QUALITY || 0)
+
const option = {
tooltip: {
trigger: 'axis',
+ axisPointer: { type: 'shadow' },
formatter: params => {
if (!params || !params.length) return ''
- const p = params[0]
- const item = this.reportList[p.dataIndex]
- if (!item) return `${p.name}
OEE：${this.formatPercent(p.data)}`
- return `${item.DEVICE_NAME || item.DEVICE_CODE} (${item.SHIFT_DATE} ${item.SHIFT_NAME})
` +
- `OEE：${this.formatPercent(item.OEE)}
` +
- `└ 利用率(A)：${this.formatPercent(item.AVAILABILITY)}
` +
- `└ 性能(P)：${this.formatPercent(item.PERFORMANCE)} (诊断值: ${this.formatPercent(item.DIAGNOSTIC_PERFORMANCE)})
` +
- `└ 良品率(Q)：${this.formatPercent(item.QUALITY)}`
+ const devName = params[0].name
+ let html = `${devName}
`
+ params.forEach(p => {
+ html += `${p.marker} ${p.seriesName}：${(p.value * 100).toFixed(2)}%
`
+ })
+ return html
}
},
+ legend: {
+ data: ['OEE', 'A 设备利用率', 'P 性能稼动率', 'Q 良品率'],
+ top: '0%'
+ },
grid: {
left: '3%',
right: '4%',
bottom: '10%',
+ top: '15%',
containLabel: true
},
xAxis: {
@@ -191,6 +230,7 @@ export default {
},
yAxis: {
type: 'value',
+ max: 1,
axisLabel: {
formatter: value => `${(value * 100).toFixed(0)}%`
}
@@ -199,11 +239,43 @@ export default {
{
name: 'OEE',
type: 'bar',
- data: yData
+ barGap: '15%',
+ itemStyle: {
+ color: '#2f7ed8',
+ borderRadius: [4, 4, 0, 0]
+ },
+ data: yDataOee
+ },
+ {
+ name: 'A 设备利用率',
+ type: 'bar',
+ itemStyle: {
+ color: '#00a889',
+ borderRadius: [4, 4, 0, 0]
+ },
+ data: yDataA
+ },
+ {
+ name: 'P 性能稼动率',
+ type: 'bar',
+ itemStyle: {
+ color: '#7b4ee6',
+ borderRadius: [4, 4, 0, 0]
+ },
+ data: yDataP
+ },
+ {
+ name: 'Q 良品率',
+ type: 'bar',
+ itemStyle: {
+ color: '#ff9f43',
+ borderRadius: [4, 4, 0, 0]
+ },
+ data: yDataQ
}
]
}
- this.barChart.setOption(option)
+ this.barChart.setOption(option, true)
},
/** 百分比格式化 */
formatPercent(val) {
@@ -211,6 +283,13 @@ export default {
const num = Number(val)
if (isNaN(num)) return '-'
return (num * 100).toFixed(2) + '%'
+ },
+ /** 数值格式化，用于 OEE 业务量字段展示 */
+ formatNumber(val, digits) {
+ if (val == null || val === undefined) return '-'
+ const num = Number(val)
+ if (isNaN(num)) return '-'
+ return num.toFixed(digits)
}
}
}
@@ -230,4 +309,23 @@ export default {
font-size: 16px;
font-weight: bold;
}
+.oee-value {
+ color: #2f7ed8;
+ font-weight: bold;
+}
+.util {
+ font-weight: bold;
+}
+.util-total {
+ color: #00a889;
+}
+.util-week {
+ color: #7b4ee6;
+}
+.util-today {
+ color: #409EFF;
+}
+.notice-tag {
+ max-width: 100%;
+}