141 lines
5.7 KiB
Vue
141 lines
5.7 KiB
Vue
<style>
|
|
.heater-row .vertical_align_center {
|
|
margin: auto 0;
|
|
}
|
|
|
|
#line-chart {
|
|
height: 250px;
|
|
}
|
|
|
|
.colHeaterIcons {
|
|
width: 68px;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<v-card>
|
|
<v-toolbar flat dense>
|
|
<v-toolbar-title>
|
|
<span class="subheading"><v-icon left>mdi-thermometer-lines</v-icon>Temperatures</span>
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text class="px-0 py-2 content">
|
|
<v-row align="center">
|
|
<v-col class="py-0 font-weight-bold" style="padding-left: 68px;">Name</v-col>
|
|
<v-col class="py-0 text-center font-weight-bold d-none d-sm-block">Status</v-col>
|
|
<v-col class="py-0 text-center font-weight-bold">Current</v-col>
|
|
<v-col class="text-center py-0 pr-8 font-weight-bold">Target</v-col>
|
|
</v-row>
|
|
<div v-for="(heater, index) in heaters" v-bind:key="index" >
|
|
<v-divider class="my-2"></v-divider>
|
|
<v-row align="center">
|
|
<v-col class="flex-grow-0 py-0 pl-8 pr-0 colHeaterIcons">
|
|
<v-icon :color="heater.color">mdi-{{ heater.icon }}</v-icon>
|
|
</v-col>
|
|
<v-col class="py-0 font-weight-bold">{{ heater.name }}</v-col>
|
|
<v-col class="py-0 text-center d-none d-sm-block"><small>{{ heater.target > 0 ? "active" : "off" }}</small></v-col>
|
|
<v-col class="py-0 text-center">{{ heater.temperature ? heater.temperature.toFixed(1) : 0 }}°C</v-col>
|
|
<v-col class="text-center py-0 pr-8 pr-0 vertical_align_center">
|
|
<toolInput :name="heater.name" :target="heater.target" :min_temp="heater.min_temp" :max_temp="heater.max_temp" command="SET_HEATER_TEMPERATURE" attribute-name="HEATER" ></toolInput>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div v-for="(fan, index) in this['printer/getTemperatureFans']" v-bind:key="index+99" >
|
|
<v-divider class="my-2"></v-divider>
|
|
<v-row align="center">
|
|
<v-col class="flex-grow-0 py-0 pl-8 pr-0 colHeaterIcons">
|
|
<v-icon :color="(fan.target ? 'grey lighten-5' : 'grey darken-2')" :class="(fan.speed ? ' icon-rotate' : '')">mdi-fan</v-icon>
|
|
</v-col>
|
|
<v-col class="py-0 font-weight-bold">{{ fan.name }}</v-col>
|
|
<v-col class="py-0 text-center d-none d-sm-block"><small>{{ fan.target > 0 && fan.speed > 0 ? (fan.speed * 100).toFixed(0)+"%" : (fan.target > 0 ? "standby" : "off") }}</small></v-col>
|
|
<v-col class="py-0 text-center">{{ fan.temperature ? fan.temperature.toFixed(1) : 0}}°C</v-col>
|
|
<v-col class="text-center py-0 pr-8 pr-0 vertical_align_center">
|
|
<toolInput :name="fan.name" :target="fan.target" command="SET_TEMPERATURE_FAN_TARGET" attribute-name="temperature_fan" ></toolInput>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div v-for="(sensor,index) in this['printer/getTemperatureSensors']" v-bind:key="index+999">
|
|
<v-divider class="my-2"></v-divider>
|
|
<v-row align="center">
|
|
<v-col class="flex-grow-0 py-0 pl-8 pr-0 colHeaterIcons">
|
|
<v-icon color="grey darken-2" :title="'min: '+sensor.min_temp+'° / max: '+sensor.max_temp+'°'">{{ sensor.icon }}</v-icon>
|
|
</v-col>
|
|
<v-col class="py-0 font-weight-bold">{{ sensor.name }}</v-col>
|
|
<v-col class="py-0 d-none d-sm-block"><span> </span></v-col>
|
|
<v-col class="py-0 text-center">
|
|
<span style="cursor: default;" :title="'min: '+(sensor.measured_min_temp ? sensor.measured_min_temp.toFixed(1) : 0)+'° / max: '+(sensor.measured_max_temp ? sensor.measured_max_temp.toFixed(1) : 0)+'°'">{{ sensor.temperature ? sensor.temperature.toFixed(1) : 0 }}°C</span>
|
|
</v-col>
|
|
<v-col class="text-center py-0 pr-8 vertical_align_center"><span> </span></v-col>
|
|
</v-row>
|
|
</div>
|
|
<v-divider class="my-2" v-if="boolTempchart"></v-divider>
|
|
<v-row v-if="boolTempchart">
|
|
<v-col class="px-8">
|
|
<temp-chart ></temp-chart>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapState } from 'vuex'
|
|
import toolInput from '../../inputs/ToolInput'
|
|
import TempChart from '@/components/charts/TempChart'
|
|
|
|
export default {
|
|
components: {
|
|
toolInput,
|
|
TempChart,
|
|
},
|
|
data: function() {
|
|
return {
|
|
extruderTemps: [250,215,195,0],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
datasets: state => state.printer.tempHistory.datasets,
|
|
boolTempchart: state => state.gui.dashboard.boolTempchart,
|
|
}),
|
|
...mapGetters([
|
|
'printer/getTemperatureFans',
|
|
'printer/getTemperatureSensors',
|
|
]),
|
|
heaters: {
|
|
get () {
|
|
return this.$store.getters["printer/getHeaters"]
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
mounted () {
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.equal-width {
|
|
flex-basis: 0;
|
|
}
|
|
|
|
.category-header {
|
|
flex: 0 0 100px;
|
|
}
|
|
a:not(:hover) {
|
|
color: inherit;
|
|
}
|
|
|
|
.content span,
|
|
.content strong {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style> |