79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<script setup>
|
|
import { onMounted, nextTick } from 'vue'
|
|
import { GridStack } from 'gridstack'
|
|
|
|
import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
|
|
import AnalysisCard from "@/components/AnalysisCard.vue";
|
|
import CostOverview from "@/components/CostOverview.vue";
|
|
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
|
|
import GanttChart from './gantt.vue'
|
|
|
|
onMounted(async () => {
|
|
const grid = GridStack.init({
|
|
column: 12,
|
|
cellHeight: '110',
|
|
float: true,
|
|
draggable: { handle: '.grid-stack-item-content' },
|
|
resizable: true,
|
|
maxRow: 20,
|
|
})
|
|
|
|
await nextTick()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid-stack">
|
|
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
|
|
<div class="grid-stack-item-content">
|
|
<GeneratedLeadsCard :progress="32" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
|
|
<div class="grid-stack-item-content">
|
|
<GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
|
|
<div class="grid-stack-item-content">
|
|
<GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
|
|
<div class="grid-stack-item-content">
|
|
<ProjectActivityBarChart />
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
|
|
<div class="grid-stack-item-content">
|
|
<AnalysisCard />
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
|
|
<div class="grid-stack-item-content">
|
|
<GanttChart />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.grid-stack-item-content {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.grid-stack-item-content>* {
|
|
flex: 1;
|
|
margin-bottom: 3.2rem;
|
|
}
|
|
|
|
.grid-stack-item:has(GanttChart) {
|
|
height: 100vh !important;
|
|
}
|
|
|
|
.grid-stack-item:has(GanttChart) .grid-stack-item-content {
|
|
height: 100vh;
|
|
}
|
|
</style> |