Refactor dashboard layout and update sensor table columns
- Make metric cards and charts more compact and consistent - Change SensorConsumptionTable columns: show Room and Value, remove Current/Total/Average - Update headings and layout for AnalyticsView and HomeView - Improve responsiveness and spacing for cards and sections
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between h-full w-full p-4">
|
||||
<div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between aspect-square p-4">
|
||||
<h6 class="text-sm font-bold text-gray-500">{{ title }}</h6>
|
||||
<div class="flex-grow flex items-center justify-start">
|
||||
<p class="text-gray-900 font-bold text-2xl">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm flex flex-col h-full min-h-[300px]">
|
||||
<div class="p-4 h-full">
|
||||
<h6 class="text-sm font-bold text-gray-500 mb-2">{{ title }}</h6>
|
||||
<v-chart class="h-64 w-full" :option="option" autoresize />
|
||||
<div class="bg-white rounded-2xl shadow-sm flex flex-col p-4">
|
||||
<h6 class="text-sm font-bold text-gray-500 mb-2">{{ title }}</h6>
|
||||
<div class="w-full h-[400px]">
|
||||
<v-chart class="w-full h-full" :option="option" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm p-4">
|
||||
<h6 class="text-sm font-bold text-gray-500 mb-4">Sensor Consumption</h6>
|
||||
|
||||
<h6 class="text-sm font-bold text-gray-500 mb-4">Sensor Readings</h6>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full">
|
||||
<thead>
|
||||
@@ -10,13 +9,10 @@
|
||||
Sensor ID
|
||||
</th>
|
||||
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
|
||||
Current
|
||||
Room
|
||||
</th>
|
||||
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
|
||||
Total
|
||||
</th>
|
||||
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
|
||||
Average
|
||||
Value
|
||||
</th>
|
||||
<th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3">
|
||||
Last Updated
|
||||
@@ -55,9 +51,6 @@
|
||||
sensor.humidity?.unit
|
||||
}}
|
||||
</td>
|
||||
<td class="py-3 text-sm text-gray-600 text-right">
|
||||
{{ sensor.room }}
|
||||
</td>
|
||||
<td class="py-3 text-sm text-gray-500 text-right">
|
||||
{{ formatTime(sensor.timestamp) }}
|
||||
</td>
|
||||
@@ -66,7 +59,6 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Connection Status Indicator -->
|
||||
<div class="mt-4 flex items-center justify-between text-xs text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user