106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
|
<div class="table-report-product">
|
|
<div class="fixed-grid has-2-cols has-5-cols-desktop">
|
|
<div class="grid summary-metrics">
|
|
<div class="cell metric-item">
|
|
<p class="metric-label">Tổng sản phẩm</p>
|
|
<span class="metric-value">{{ props.data.totalProduct }}</span>
|
|
</div>
|
|
<div class="cell metric-item">
|
|
<p class="metric-label">Tổng giá trị</p>
|
|
<span class="metric-value">{{ formatVND(props.data.totalValue) }}</span>
|
|
</div>
|
|
<div class="cell metric-item">
|
|
<p class="metric-label">Tổng diện tích đất</p>
|
|
<span class="metric-value">{{ props.data.totalLandArea }} m²</span>
|
|
</div>
|
|
<div class="cell metric-item">
|
|
<p class="metric-label">Tổng diện tích xây dựng</p>
|
|
<span class="metric-value"> {{ props.data.totalBuildingArea }} m² </span>
|
|
</div>
|
|
<div class="cell metric-item">
|
|
<p class="metric-label">Tổng diện tích sàn</p>
|
|
<span class="metric-value">{{ props.data.totalFloorArea }} m²</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DataView v-bind="configurationDataView" v-if="configurationDataView && props.data.listProduct.length > 0" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
data: Object,
|
|
});
|
|
|
|
function formatVND(amount, maxDecimals = 2) {
|
|
if (!Number.isFinite(amount)) return "0 đ";
|
|
|
|
const format = (value) => {
|
|
return Number.isInteger(value) ? value.toString() : value.toFixed(maxDecimals).replace(/\.?0+$/, "");
|
|
};
|
|
|
|
if (amount >= 1_000_000_000) return `${format(amount / 1_000_000_000)} tỷ`;
|
|
|
|
if (amount >= 1_000_000) return `${format(amount / 1_000_000)} triệu`;
|
|
|
|
return `${amount.toLocaleString("vi-VN")} đ`;
|
|
}
|
|
|
|
const configurationDataView = ref({
|
|
data: props.data.listProduct,
|
|
setting: "product-list-report",
|
|
pagename: "productListReport",
|
|
});
|
|
</script>
|
|
<style>
|
|
.table-report-product {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-report-product .summary-metrics {
|
|
padding: 16px 20px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.table-report-product .summary-metrics .metric-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.table-report-product .summary-metrics .metric-label {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table-report-product .summary-metrics .metric-value {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
}
|
|
|
|
.table-report-product .table-container {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table-report-product .table-container .table {
|
|
position: relative;
|
|
}
|
|
|
|
.table-report-product .table-container .table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
</style>
|