Added alert icon
This commit is contained in:
parent
438c08bcc6
commit
f858ece3b6
|
@ -2,6 +2,13 @@
|
||||||
<v-card variant="outlined" class="printer-card">
|
<v-card variant="outlined" class="printer-card">
|
||||||
<div class="d-flex align-center">
|
<div class="d-flex align-center">
|
||||||
<div class="flex-shrink-1 fill-height" style="width: 128px">
|
<div class="flex-shrink-1 fill-height" style="width: 128px">
|
||||||
|
<v-icon
|
||||||
|
v-if="printerAlert"
|
||||||
|
class="ma-1 alert"
|
||||||
|
color="warning"
|
||||||
|
icon="mdi-alert"
|
||||||
|
size="large"
|
||||||
|
/>
|
||||||
<printer-img class="pa-2" :model="printer.model" />
|
<printer-img class="pa-2" :model="printer.model" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -161,14 +168,33 @@
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import PrinterImg from '@/components/PrinterImg.vue'
|
import PrinterImg from '@/components/PrinterImg.vue'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
defineProps<{
|
const props = defineProps<{
|
||||||
printer: any
|
printer: any
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const printerAlert = computed(() => {
|
||||||
|
return (
|
||||||
|
props.printer.status[0].tonerBlackLevel < 10 ||
|
||||||
|
(props.printer.cyanTonerModel &&
|
||||||
|
props.printer.status[0].tonerCyanLevel < 10) ||
|
||||||
|
(props.printer.magentaTonerModel &&
|
||||||
|
props.printer.status[0].tonerMagentaLevel < 10) ||
|
||||||
|
(props.printer.yellowTonerModel &&
|
||||||
|
props.printer.status[0].tonerYellowLevel < 10)
|
||||||
|
)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.printer-card {
|
.printer-card {
|
||||||
border-color: #efefef;
|
border-color: #efefef;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
<v-col
|
<v-col
|
||||||
cols="12"
|
cols="12"
|
||||||
lg="6"
|
lg="6"
|
||||||
|
xxl="4"
|
||||||
v-for="printer in appStore.filteredPrinters"
|
v-for="printer in appStore.filteredPrinters"
|
||||||
:key="printer.id"
|
:key="printer.id"
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user