91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
vessel: Object,
|
|
tabs: Array,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="card bg-slate-200 text-accent-content rounded-md w-[22rem]">
|
|
<div class="card-body p-3">
|
|
<h2 class="card-title">{{ vessel.name }}</h2>
|
|
<div
|
|
role="tablist"
|
|
class="tabs tabs-boxed tabs-sm bg-opacity-50 shadow-inner shadow-slate-600"
|
|
>
|
|
<a
|
|
v-for="tab in tabs"
|
|
:key="tab.label"
|
|
role="tab"
|
|
class="tab"
|
|
:class="{
|
|
'tab-active !bg-green-500 !text-white shadow-sm shadow-slate-800':
|
|
vessel.activeTab.value === tab.label,
|
|
}"
|
|
@click.prevent="vessel.activeTab.value = tab.label"
|
|
>
|
|
{{ tab.label }}
|
|
</a>
|
|
</div>
|
|
<div class="p-0">
|
|
<div v-if="vessel.activeTab.value === '生產資訊'">
|
|
<ul class="leading-7 tracking-wider text-slate-700 px-2">
|
|
<li><b>品名:</b> {{ vessel.product }}</li>
|
|
<li><b>鍋次:</b> 第{{ vessel.batch }}鍋</li>
|
|
<li><b>狀態:</b> {{ vessel.status }}</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else-if="vessel.activeTab.value === '投料進度'">
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr class="border-0 bg-slate-300 text-slate-800">
|
|
<th>順序</th>
|
|
<th>動作</th>
|
|
<th>原料</th>
|
|
<th>狀態</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(feed, index) in vessel.feedProgress"
|
|
:key="index"
|
|
class="border-0"
|
|
>
|
|
<th>{{ feed.order }}</th>
|
|
<td>{{ feed.action }}</td>
|
|
<td>{{ feed.material }}</td>
|
|
<td>{{ feed.state }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="vessel.activeTab.value === '流量計'">
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr class="border-0 bg-slate-300 text-slate-800">
|
|
<th></th>
|
|
<th>當前使用量</th>
|
|
<th>今日累積量</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(flow, index) in vessel.flowMeterData"
|
|
:key="index"
|
|
class="border-0"
|
|
>
|
|
<th>{{ flow.material }}</th>
|
|
<td>{{ flow.current }}</td>
|
|
<td>{{ flow.total }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|