|
|
|
|
@ -5,21 +5,9 @@
|
|
|
|
|
<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>
|
|
|
|
|
</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 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 = () => {
|
|
|
|
|
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: [
|
|
|
|
|
{
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '开机率(%)',
|
|
|
|
|
max: 100,
|
|
|
|
|
name: '产能完成数',
|
|
|
|
|
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 }
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
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 = () => {
|
|
|
|
|
|