Toner chart ok
This commit is contained in:
parent
9918c39260
commit
4424760e35
|
@ -20,7 +20,7 @@
|
||||||
/>
|
/>
|
||||||
<printer-img class="pa-2" :model="printer.model" />
|
<printer-img class="pa-2" :model="printer.model" />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8" sm="4">
|
<v-col cols="8" sm="4" align-self="center">
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title v-if="printer.friendlyName">
|
<v-list-item-title v-if="printer.friendlyName">
|
||||||
|
|
|
@ -1,53 +0,0 @@
|
||||||
<template>
|
|
||||||
<apexchart
|
|
||||||
type="line"
|
|
||||||
:options="chartOptions"
|
|
||||||
:series="chartSeries"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const chartOptions = ref({
|
|
||||||
chart: {
|
|
||||||
// id: 'chart',
|
|
||||||
type: 'line',
|
|
||||||
|
|
||||||
toolbar: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
curve: 'smooth'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
row: {
|
|
||||||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
|
||||||
opacity: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const chartSeries = ref([
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
data: [
|
|
||||||
{ x: 'test1', y: 32 },
|
|
||||||
{ x: 'test2', y: 35 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
data: [
|
|
||||||
{ x: 'test1', y: 11 },
|
|
||||||
{ x: 'test2', y: 15 }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
])
|
|
||||||
</script>
|
|
97
web/src/components/PrinterTonerChart.vue
Normal file
97
web/src/components/PrinterTonerChart.vue
Normal file
|
@ -0,0 +1,97 @@
|
||||||
|
<template>
|
||||||
|
<v-card>
|
||||||
|
<apexchart
|
||||||
|
type="line"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="chartSeries"
|
||||||
|
width="100%"
|
||||||
|
height="300px"
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
status: {
|
||||||
|
timestamp: Date
|
||||||
|
tonerBlackLevel: number
|
||||||
|
tonerCyanLevel: number
|
||||||
|
tonerMagentaLevel: number
|
||||||
|
tonerYellowLevel: number
|
||||||
|
counter: number
|
||||||
|
}[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const chartOptions = ref({
|
||||||
|
chart: {
|
||||||
|
animations: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
// id: 'chart',
|
||||||
|
type: 'line',
|
||||||
|
|
||||||
|
title: 'Toner',
|
||||||
|
|
||||||
|
toolbar: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
colors: ['#000000', '#00BCD4', '#E91E63', '#FDD835'],
|
||||||
|
|
||||||
|
stroke: {
|
||||||
|
curve: 'stepline',
|
||||||
|
width: 4
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
row: {
|
||||||
|
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
type: 'datetime'
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Nível de toner'
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
tickAmount: 4
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const chartSeries = ref([
|
||||||
|
{
|
||||||
|
name: 'Preto',
|
||||||
|
data: props.status.map(s => ({
|
||||||
|
x: new Date(s.timestamp).getTime(),
|
||||||
|
y: s.tonerBlackLevel
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ciano',
|
||||||
|
data: props.status.map(s => ({
|
||||||
|
x: new Date(s.timestamp).getTime(),
|
||||||
|
y: s.tonerCyanLevel
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Magenta',
|
||||||
|
data: props.status.map(s => ({
|
||||||
|
x: new Date(s.timestamp).getTime(),
|
||||||
|
y: s.tonerMagentaLevel
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Amarelo',
|
||||||
|
data: props.status.map(s => ({
|
||||||
|
x: new Date(s.timestamp).getTime(),
|
||||||
|
y: s.tonerYellowLevel
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
])
|
||||||
|
</script>
|
|
@ -2,7 +2,7 @@
|
||||||
<v-container>
|
<v-container>
|
||||||
<printer-card class="mb-2" v-if="printer" :printer="printer" />
|
<printer-card class="mb-2" v-if="printer" :printer="printer" />
|
||||||
|
|
||||||
{{ printer }}
|
<printer-toner-chart v-if="printer" :status="printer?.status" />
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -11,10 +11,11 @@ import { Printer } from '@prisma/client'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import PrinterCard from '@/components/PrinterCard.vue'
|
import PrinterCard from '@/components/PrinterCard.vue'
|
||||||
|
import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const printer = ref<Printer>()
|
const printer = ref()
|
||||||
|
|
||||||
const serialNumber = route.params.serialNumber as string
|
const serialNumber = route.params.serialNumber as string
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user