59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup>
|
|
import LiquidfillChart from "@/components/chart/LiquidfillChart.vue";
|
|
import { ref, onMounted, provide, watch, inject } from "vue";
|
|
import { getSettingInventory } from "@/apis/productSetting";
|
|
import DashboardDescriptionCard from "./DashboardDescriptionCard.vue";
|
|
import dayjs from "dayjs";
|
|
|
|
const descriptionCards = ref([]);
|
|
const progress_data = ref([]);
|
|
|
|
const getCompletion = async () => {
|
|
const res = await getSettingInventory();
|
|
descriptionCards.value = res.data.map((item) => ({
|
|
title: item.name,
|
|
percentage: item.percentage,
|
|
current_stock: item.current_stock,
|
|
item_id: item.item_id,
|
|
updateTime: dayjs(item.updated_at).format("YYYY-MM-DD HH:mm:ss"),
|
|
}));
|
|
};
|
|
|
|
provide("dashboard_product_complete", { getCompletion, progress_data });
|
|
|
|
onMounted(() => {
|
|
getCompletion();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-info font-bold text-xl text-center">原醋即時庫存量</h3>
|
|
</div>
|
|
<div class="w-full grid grid-cols-3">
|
|
<div v-for="(card, idx) in descriptionCards.slice(0, 3)" :key="idx">
|
|
<LiquidfillChart
|
|
:id="`dashboard_product_${idx}`"
|
|
:title="card.title || ''"
|
|
:value="card.percentage || 0"
|
|
:color="idx === 0 ? '#facd91' : idx === 1 ? '#7dd7df' : '#8cce30'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- 說明卡片區域 -->
|
|
<div class="grid grid-cols-3 gap-2 -mt-6">
|
|
<DashboardDescriptionCard
|
|
v-for="(card, index) in descriptionCards"
|
|
:key="index"
|
|
:title="card.title"
|
|
:item_id="card.item_id"
|
|
:current_stock="card.current_stock"
|
|
:updateTime="card.updateTime"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|