Erik
84253f7dcc
feat(overview): Temperprozess rename, order-count badge, amber transit flow, brighter labels - Rename line "Temper-Linie" → "Temperprozess" (tab title + i18n de/en) - Per-press order display: chip row → single colored order-count badge (.ocount) - New 5th flow colour --transit (amber) for "Auf dem Weg"; --way (cyan) reserved for cart/verladen; per-press amber arrows drop to the oven; header "Maschinenhalle" - Brighter --ink-faint labels to match temper_rejects (dark #7f8b9a, light #4b586b) - Grid width tweaks (col floor 96px, wrap max-width 1300px) + hide matrix scrollbar - Rebuilt dist Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> @
65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<!--
|
|
TemperOverviewPage.vue — the whole-line temper board (design #4 "Shop-floor
|
|
Schematic", locked). One connected line: Pressen → (per-press amber ↓ arrows,
|
|
only under presses with a cart on the way) → Ofen → (green ↓) → Fertig. Carts
|
|
hang under their origin press; the oven & finished bands scroll horizontally.
|
|
The time-range picker scopes ONLY the Fertig figures.
|
|
|
|
Data comes from the store (GET …/api/overview, polled). With no backend the
|
|
store falls back to bundled sample data, so `npm run dev` renders the design.
|
|
-->
|
|
<script setup lang="ts">
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useI18n } from 'vue-i18n'
|
|
import OverviewHeader from '@/components/OverviewHeader.vue'
|
|
import FlowLegend from '@/components/FlowLegend.vue'
|
|
import KpiStrip from '@/components/KpiStrip.vue'
|
|
import ProductionLine from '@/components/ProductionLine.vue'
|
|
import { useTemperOverviewStore } from '@/stores/temperOverview'
|
|
|
|
const { t } = useI18n()
|
|
const store = useTemperOverviewStore()
|
|
const { payload, range, loading, hasData, usingSample } = storeToRefs(store)
|
|
|
|
onMounted(async () => {
|
|
await store.hydrate()
|
|
store.startPolling(12000)
|
|
})
|
|
onUnmounted(() => store.stopPolling())
|
|
</script>
|
|
|
|
<template>
|
|
<div class="wrap">
|
|
<template v-if="hasData && payload">
|
|
<OverviewHeader
|
|
:plant="payload.plant"
|
|
:range="range"
|
|
:sample="usingSample"
|
|
@update:range="store.setRange"
|
|
/>
|
|
<FlowLegend />
|
|
<KpiStrip :payload="payload" />
|
|
<ProductionLine :payload="payload" />
|
|
</template>
|
|
|
|
<div v-else-if="loading" class="state">{{ t('app.live') }} …</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrap {
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
padding: 20px 22px 80px;
|
|
}
|
|
.state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 60vh;
|
|
color: var(--ink-dim);
|
|
font-family: var(--mono);
|
|
}
|
|
</style>
|