Toner chart ok
This commit is contained in:
parent
9918c39260
commit
4424760e35
|
@ -20,7 +20,7 @@
|
|||
/>
|
||||
<printer-img class="pa-2" :model="printer.model" />
|
||||
</v-col>
|
||||
<v-col cols="8" sm="4">
|
||||
<v-col cols="8" sm="4" align-self="center">
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<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>
|
||||
<printer-card class="mb-2" v-if="printer" :printer="printer" />
|
||||
|
||||
{{ printer }}
|
||||
<printer-toner-chart v-if="printer" :status="printer?.status" />
|
||||
</v-container>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
@ -11,10 +11,11 @@ import { Printer } from '@prisma/client'
|
|||
import { useRoute } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
import PrinterCard from '@/components/PrinterCard.vue'
|
||||
import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const printer = ref<Printer>()
|
||||
const printer = ref()
|
||||
|
||||
const serialNumber = route.params.serialNumber as string
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user