feat:智能制造产线任务总览-产能完成数模块对接

main
黄伟杰 5 days ago
parent d26482d4cb
commit 355624cb56

@ -113,5 +113,8 @@ export const PlanApi = {
},
getLastDaysRate: async (params?: any) => {
return await request.get({ url: `/mes/plan/getLastDaysRate`, params })
},
getLastSevenDaysCompletedCount: async (params?: any) => {
return await request.get({ url: `/mes/plan/getLastSevenDaysCompletedCount`, params })
}
}

@ -5,23 +5,11 @@
<span class="card-title-icon">
<Icon icon="fa-solid:wave-square" />
</span>
<span>开机率/稼动率趋势</span>
<span>产能完成数</span>
</div>
<div class="ops-header-right">
<div class="tabs">
<button
v-for="line in opsLines"
:key="line.name"
type="button"
class="tab-btn"
:class="{ active: currentLine === line.name }"
@click="updateOps(line.name)"
>
{{ line.name }}
</button>
</div>
<span class="tag">{{ summary }}</span>
</div>
<span class="tag">{{ summary }}</span>
</div>
</div>
<div class="card-body">
<div ref="chartRef" class="chart"></div>
@ -31,23 +19,16 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { colors, style } from '../utils'
import { PlanApi } from '@/api/mes/plan'
const opsDays: string[] = []
for (let i = 7; i > 0; i--) {
const d = new Date()
d.setDate(d.getDate() - i)
opsDays.push(`${d.getMonth() + 1}-${d.getDate()}`)
}
const route = useRoute()
const opsLines = [
{ name: '产线A', run: [85, 87, 84, 89, 88, 86, 85], avail: [78, 82, 80, 84, 83, 81, 79] },
{ name: '产线B', run: [83, 84, 82, 86, 85, 84, 83], avail: [76, 78, 77, 80, 79, 78, 77] },
{ name: '产线C', run: [88, 90, 89, 91, 92, 90, 89], avail: [82, 84, 83, 86, 87, 85, 84] },
{ name: '产线D', run: [80, 82, 81, 83, 84, 82, 81], avail: [72, 74, 73, 76, 77, 75, 74] },
{ name: '产线E', run: [86, 87, 86, 88, 89, 87, 86], avail: [79, 81, 80, 82, 83, 81, 80] },
{ name: '产线F', run: [90, 92, 91, 93, 94, 92, 91], avail: [84, 86, 85, 87, 88, 86, 85] }
const opsDays: string[] = []
const opsLines: { name: string; value: number[] }[] = [
{ name: '全部产线', value: [] }
]
const currentLine = ref(opsLines[0].name)
@ -62,16 +43,48 @@ const avg = (arr: number[]) => {
const updateOps = (lineName: string) => {
currentLine.value = lineName
const item = opsLines.find((x) => x.name === lineName) || opsLines[0]
summary.value = `${item.name} · 开机率均值 ${avg(item.run)}% · 稼动率均值 ${avg(item.avail)}%`
summary.value = `${item.name} · 日均完成 ${avg(item.value)}`
if (!chart) return
chart.setOption({
xAxis: { data: opsDays },
series: [{ data: item.run }, { data: item.avail }]
series: [{ data: item.value }]
})
}
const initChart = () => {
const loadOpsData = async () => {
try {
const orgId = route.query.orgId
const res = await PlanApi.getLastSevenDaysCompletedCount({ orgId })
const raw = res && typeof res === 'object' && 'data' in (res as any) ? (res as any).data : res
const list = Array.isArray(raw) ? raw : []
const days: string[] = []
const values: number[] = []
list.forEach((item: any) => {
const src = item.day || item.date || item.time || item.hour || item.key || item.name || ''
let label = src
if (typeof label === 'string' && label.includes(' ')) {
label = label.split(' ')[0]
}
days.push(label)
const raw = item.totalWangong ?? item.count ?? 0
const n = Number(raw)
values.push(Number.isFinite(n) ? n : 0)
})
opsDays.length = 0
opsDays.push(...days)
opsLines.length = 0
opsLines.push({ name: '全部产线', value: values })
if (opsLines[0]) {
currentLine.value = opsLines[0].name
updateOps(currentLine.value)
}
} catch (e) {
console.error('Failed to load ops trend:', e)
}
}
const initChart = async () => {
if (!chartRef.value) return
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
chart.setOption({
@ -80,48 +93,26 @@ const initChart = () => {
legend: { top: 0, right: 0, textStyle: style.legendText },
grid: { top: '22%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
xAxis: { type: 'category', data: opsDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
yAxis: [
{
type: 'value',
name: '开机率(%)',
max: 100,
nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
axisLabel: style.axisLabel,
splitLine: style.splitLine
},
{
type: 'value',
name: '稼动率(%)',
max: 100,
nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
axisLabel: style.axisLabel,
splitLine: { show: false }
}
],
yAxis: {
type: 'value',
name: '产能完成数',
nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
axisLabel: style.axisLabel,
splitLine: style.splitLine
},
series: [
{
name: '开机率',
name: '产能完成数',
type: 'line',
smooth: true,
showSymbol: false,
yAxisIndex: 0,
lineStyle: { width: 2, color: colors.blue },
itemStyle: { color: colors.blue },
data: []
},
{
name: '稼动率',
type: 'line',
smooth: true,
showSymbol: false,
yAxisIndex: 1,
lineStyle: { width: 2, color: colors.green },
itemStyle: { color: colors.green },
data: []
}
]
})
updateOps(currentLine.value)
await loadOpsData()
}
const resizeHandler = () => {
@ -129,7 +120,7 @@ const resizeHandler = () => {
}
onMounted(() => {
initChart()
initChart()
window.addEventListener('resize', resizeHandler)
})

Loading…
Cancel
Save