1839811/ifms-printer-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout improvements

Browse Source
This commit is contained in:
Douglas Barone 2023-07-12 13:08:06 -04:00
parent 3d9f3f0135
commit b034452378
3 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/PrinterCounterChart.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<v-card> <v-card title="Contador" prepend-icon="mdi-counter">
<apexchart <apexchart
type="line" type="line"
:options="chartOptions" :options="chartOptions"
:series="chartSeries" :series="chartSeries"
width="100%" width="100%"
height="300px" height="250px"
/> />
</v-card> </v-card>
</template> </template>

4
web/src/components/PrinterTonerChart.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<v-card> <v-card title="Toner" prepend-icon="mdi-liquid-spot">
<apexchart <apexchart
type="line" type="line"
:options="chartOptions" :options="chartOptions"
:series="chartSeries" :series="chartSeries"
width="100%" width="100%"
height="300px" height="250px"
/> />
</v-card> </v-card>
</template> </template>

43
web/src/views/Printer.vue
View File

@ -6,30 +6,37 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col> <v-col v-if="printer?.avgMonthPrint" cols="12" lg="4">
<printer-toner-chart v-if="printer" :status="printer?.status" /> <v-card
</v-col> class="fill-height"
<v-col> title="Média mensal de impressões"
<printer-counter-chart v-if="printer" :status="printer?.status" /> prepend-icon="mdi-file-document-multiple-outline"
</v-col> >
</v-row> <v-card-text class="text-center align-stretch">
<v-row v-if="printer?.avgMonthPrint"> <div class="text-h2 my-6">
<v-col>
<v-card>
<v-card-title class="font-weight-regular">
Média mensal de impressões
</v-card-title>
<v-card-text>
<span class="text-h3">
{{ {{
new Intl.NumberFormat('pt-BR').format(printer?.avgMonthPrint) new Intl.NumberFormat('pt-BR').format(printer?.avgMonthPrint)
}} }}
</span> </div>
<div>Baseado nos dados dos últimos 180 dias</div>
<small>Baseado nos dados dos últimos 180 dias</small>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" md="6" lg="4">
<printer-toner-chart
v-if="printer"
:status="printer?.status"
class="fill-height"
/>
</v-col>
<v-col cols="12" md="6" lg="4">
<printer-counter-chart
v-if="printer"
:status="printer?.status"
class="fill-height"
/>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>