97 lines
3.4 KiB
Vue
97 lines
3.4 KiB
Vue
|
<script setup>
|
||
|
|
import { onMounted, nextTick } from 'vue'
|
||
|
|
import { GridStack } from 'gridstack'
|
||
|
|
|
||
|
|
import EcommerceCongratulationsJohn from '@/views/dashboards/ecommerce/EcommerceCongratulationsJohn.vue'
|
||
|
|
import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'
|
||
|
|
import EcommerceExpensesRadialBarCharts from '@/views/dashboards/ecommerce/EcommerceExpensesRadialBarCharts.vue'
|
||
|
|
import EcommerceGeneratedLeads from '@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue'
|
||
|
|
import EcommerceInvoiceTable from '@/views/dashboards/ecommerce/EcommerceInvoiceTable.vue'
|
||
|
|
import EcommerceOrder from '@/views/dashboards/ecommerce/EcommerceOrder.vue'
|
||
|
|
import EcommercePopularProducts from '@/views/dashboards/ecommerce/EcommercePopularProducts.vue'
|
||
|
|
import EcommerceRevenueReport from '@/views/dashboards/ecommerce/EcommerceRevenueReport.vue'
|
||
|
|
import EcommerceStatistics from '@/views/dashboards/ecommerce/EcommerceStatistics.vue'
|
||
|
|
import EcommerceTotalProfitLineCharts from '@/views/dashboards/ecommerce/EcommerceTotalProfitLineCharts.vue'
|
||
|
|
import EcommerceTransactions from '@/views/dashboards/ecommerce/EcommerceTransactions.vue'
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
const grid = GridStack.init({
|
||
|
|
column: 12,
|
||
|
|
cellHeight: 50,
|
||
|
|
float: true,
|
||
|
|
draggable: { handle: '.grid-stack-item-content' },
|
||
|
|
resizable: true
|
||
|
|
})
|
||
|
|
|
||
|
|
await nextTick()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="grid-stack">
|
||
|
|
<div class="grid-stack-item" gs-w="8" gs-h="4" gs-max-h="4" gs-x="0" gs-y="0">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceCongratulationsJohn />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="0">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceStatistics />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="7" gs-h="3" gs-max-h="3" gs-x="0" gs-y="4">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceTotalProfitLineCharts />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="5" gs-h="3" gs-max-h="3" gs-x="7" gs-y="4">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceExpensesRadialBarCharts />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="3" gs-h="5" gs-max-h="5" gs-x="0" gs-y="7">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceGeneratedLeads />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="6" gs-h="5" gs-max-h="5" gs-x="3" gs-y="7">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceRevenueReport />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="3" gs-h="3" gs-max-h="3" gs-x="9" gs-y="7">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceOrder />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="0" gs-y="12">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceEarningReports />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="4" gs-y="12">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommercePopularProducts />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="12">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceTransactions />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6" gs-x="0" gs-y="16">
|
||
|
|
<div class="grid-stack-item-content">
|
||
|
|
<EcommerceInvoiceTable />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|