96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<script setup>
|
||
import useActiveBtn from "@/hooks/useActiveBtn";
|
||
import { ref, onMounted } from "vue";
|
||
import DashboardProductCompleteModal from "./DashboardProductCompleteModal.vue";
|
||
|
||
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
||
|
||
// 假資料
|
||
const progress_data = [
|
||
{
|
||
data: [
|
||
{ pac: "130g", value: 80, target: 100, percentage: 80 },
|
||
{ pac: "150g", value: 70, target: 100, percentage: 70 },
|
||
{ pac: "1kg", value: 75, target: 100, percentage: 75 },
|
||
],
|
||
},
|
||
{
|
||
data: [
|
||
{ pac: "500g", value: 70, target: 100, percentage: 70 },
|
||
{ pac: "1kg", value: 60, target: 100, percentage: 60 },
|
||
{ pac: "2kg", value: 50, target: 100, percentage: 50 },
|
||
],
|
||
},
|
||
{
|
||
data: [
|
||
{ pac: "300g", value: 90, target: 100, percentage: 90 },
|
||
{ pac: "500g", value: 96, target: 100, percentage: 96 },
|
||
{ pac: "1kg", value: 84, target: 100, percentage: 84 },
|
||
],
|
||
},
|
||
];
|
||
const openModal = () => {
|
||
dashboard_product.showModal();
|
||
};
|
||
|
||
onMounted(() => {
|
||
// 初始化按鈕
|
||
setItems([
|
||
{ title: "產品 A", key: 1, active: true },
|
||
{ title: "產品 B", key: 2, active: false },
|
||
{ title: "產品 C", key: 3, active: false },
|
||
]);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<DashboardProductCompleteModal/>
|
||
<div class="mb-3 relative">
|
||
<h3 class="text-info text-xl text-center">今日生產完成率 ％</h3>
|
||
<button
|
||
type="button"
|
||
class="btn btn-xs btn-success absolute top-0 right-0"
|
||
@click.stop="openModal"
|
||
>
|
||
設定
|
||
</button>
|
||
</div>
|
||
<div className="my-3 w-full flex justify-center relative">
|
||
<ButtonConnectedGroup
|
||
:items="items"
|
||
:onclick="
|
||
(e, item) => {
|
||
changeActiveBtn(item);
|
||
}
|
||
"
|
||
/>
|
||
</div>
|
||
<template
|
||
v-if="progress_data && selectedBtn && progress_data[selectedBtn.key - 1]"
|
||
>
|
||
<div
|
||
class="grid grid-cols-6 gap-3 justify-items-end items-center"
|
||
v-for="{ pac, value, target, percentage } in progress_data[
|
||
selectedBtn.key - 1
|
||
].data"
|
||
:key="pac"
|
||
>
|
||
<span class="col-span-1 text-lg">{{ pac }}</span>
|
||
<progress
|
||
v-if="target !== 0"
|
||
class="progress progress-info col-span-4"
|
||
:value="value"
|
||
:max="target"
|
||
></progress>
|
||
<span class="col-span-1 text-lg justify-self-start"
|
||
>{{ percentage }} %</span
|
||
>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<p class="text-center mt-8 text-lg">尚未設定目標值</p>
|
||
</template>
|
||
</template>
|
||
|
||
<style lang="css" scoped></style>
|