54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<template>
|
|
<v-row>
|
|
|
|
</v-row>
|
|
<div> <!-- Zone pour publier sur MQTT -->
|
|
<!-- Zone pour afficher la console MQTT -->
|
|
</div>
|
|
<v-container>
|
|
<v-row>
|
|
<!-- Colonne gauche avec les deux composants empilés -->
|
|
<v-col cols="6">
|
|
<!-- Composant 1 -->
|
|
<v-row>
|
|
<v-col>
|
|
<PublishMQTTComponent />
|
|
<MQTTColorPublisher />
|
|
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<!-- Colonne droite avec le composant unique -->
|
|
<v-col cols="6">
|
|
<MQTTConsoleComponent />
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
|
|
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT
|
|
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT
|
|
|
|
export default {
|
|
components: {
|
|
PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
|
|
MQTTConsoleComponent, // Composant pour la console MQTT
|
|
MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@media (min-width: 1024px) {
|
|
.card__title.primary { background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
|
}
|
|
.card__title.feedback { background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
|
|
}
|
|
.btn{ border-radius:30px!important; background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
|
}
|
|
}
|
|
</style>
|