100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<template>
|
|
<div class="text-[16px] font-[500] pb-[15px]">Meal Details</div>
|
|
<div class="grid grid-cols-4 gap-[15px] rounded-default">
|
|
<div class="p-[15px] bg-white">
|
|
<div class="text-[#2f2f2f]">
|
|
<span v-if="data.schedule.running == 1">Running</span>
|
|
<span v-else>Previous</span>
|
|
Schedule
|
|
</div>
|
|
<div class="text-[24px] text-[#333131]">
|
|
{{ data.schedule.name ? data.schedule.name : "N/A" }}
|
|
</div>
|
|
</div>
|
|
<div class="p-[15px] bg-white">
|
|
<div class="text-[#2f2f2f]">Total Employee</div>
|
|
<div class="text-[24px] text-[#333131]">
|
|
{{ data.total ? data.total : "0" }}
|
|
</div>
|
|
</div>
|
|
<div class="p-[15px] bg-white relative">
|
|
<div class="text-[#2f2f2f]">Scanned Employee</div>
|
|
<div class="text-[24px] text-[#333131]">
|
|
{{ data.scanned ? data.scanned : "0" }}
|
|
</div>
|
|
<div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.scanned) }} % of {{ data.total }})</div>
|
|
<div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
|
|
<v-chart :option="getRadialOption(getPercentage(data.total, data.scanned))" />
|
|
</div>
|
|
</div>
|
|
<div class="p-[15px] bg-white relative">
|
|
<div class="w-fit">
|
|
<div class="text-[#2f2f2f]">Pending Employee</div>
|
|
<div class="text-[24px] text-[#333131]">
|
|
{{ data.pending ? data.pending : "0" }}
|
|
</div>
|
|
<div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.pending) }} % of {{ data.total }})</div>
|
|
</div>
|
|
<div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
|
|
<v-chart :option="getRadialOption(getPercentage(data.total, data.pending))" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import VChart from "vue-echarts";
|
|
import { use } from "echarts/core";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
import { PieChart } from "echarts/charts";
|
|
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
|
|
|
|
use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
|
|
|
|
const data = ref({
|
|
total: 10,
|
|
pending: 200,
|
|
scanned: 100,
|
|
schedule: {
|
|
name: "Testing",
|
|
running: 1,
|
|
},
|
|
});
|
|
|
|
const getRadialOption = (percent: number) => ({
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["80%", "100%"],
|
|
avoidLabelOverlap: false,
|
|
silent: true,
|
|
data: [
|
|
{ value: percent, itemStyle: { color: "#4a8e57" } },
|
|
{ value: 100 - percent, itemStyle: { color: "#e6edf7" } },
|
|
],
|
|
label: {
|
|
show: true,
|
|
position: "center",
|
|
formatter: `${Math.round(percent)}%`,
|
|
fontSize: 12,
|
|
color: "#6b7280", // Tailwind's gray-500
|
|
fontWeight: 500,
|
|
},
|
|
labelLine: { show: false },
|
|
emphasis: { disabled: true },
|
|
hoverAnimation: false,
|
|
},
|
|
],
|
|
tooltip: { show: false },
|
|
legend: { show: false },
|
|
});
|
|
|
|
const getPercentage = (total: number, by: number) => {
|
|
if (!by) {
|
|
return 0;
|
|
}
|
|
return parseFloat(((by / total) * 100).toFixed(2));
|
|
};
|
|
</script>
|