72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<script setup>
|
|
defineProps({ data: Array });
|
|
import { twMerge } from "tailwind-merge";
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-col gap-3">
|
|
<div
|
|
v-for="(item, index) in data"
|
|
:key="index"
|
|
class="stats shadow bg-slate-200"
|
|
>
|
|
<div class="w-24 stat p-2">
|
|
<div class="bg-green-600 rounded-lg p-2 shadow-lg shadow-slate-400">
|
|
<div class="text-sm text-slate-100">第{{ item.batch || "__" }}鍋</div>
|
|
<div class="text-sm font-bold text-slate-100">
|
|
{{ item.product || " " }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-26 stat items-center p-2">
|
|
<div class="text-base font-bold text-slate-800">{{ item.name }}</div>
|
|
<div class="text-sm text-slate-800">{{ item.status }}</div>
|
|
</div>
|
|
<div class="w-15 stat items-center text-center p-2">
|
|
<FontAwesomeIcon
|
|
class="text-2xl text-slate-800 mx-auto"
|
|
:icon="['fas', 'temperature-high']"
|
|
/>
|
|
<div class="text-sm text-slate-800">{{ item.temperature }}</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'w-15 stat items-center text-center p-2',
|
|
item.sterilization == '殺菌完成'
|
|
? 'text-green-700'
|
|
: 'text-slate-800',
|
|
]"
|
|
>
|
|
<FontAwesomeIcon :icon="['far', 'clock']" class="text-2xl mx-auto" />
|
|
<div class="text-sm">
|
|
{{ item.sterilization }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'w-15 stat items-center text-center p-2',
|
|
typeof item.sugar !== 'number' ? 'text-red-700' : 'text-slate-800',
|
|
]"
|
|
>
|
|
<FontAwesomeIcon class="text-2xl mx-auto" :icon="['fas', 'tint']" />
|
|
<div class="text-sm">
|
|
{{ item.sugar }}
|
|
</div>
|
|
</div>
|
|
<div class="w-15 stat items-center text-center p-2">
|
|
<div>
|
|
<FontAwesomeIcon
|
|
:icon="['fas', 'circle']"
|
|
:class="
|
|
twMerge(
|
|
'text-2xl border-2 border-slate-400 rounded-full',
|
|
item.qcResult ? item.qcResult.trim() : 'text-slate-400'
|
|
)
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="text-sm text-slate-800">{{ item.qcName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|