mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-23 00:06:15 -04:00
26 lines
772 B
Vue
26 lines
772 B
Vue
<script setup lang="ts">
|
|
import { computeCost } from './energy-computer.service';
|
|
|
|
const wattage = ref(100);
|
|
const durationHours = ref(2);
|
|
const kWhCost = ref(0.1);
|
|
const totalCost = computed(() => computeCost(wattage.value, durationHours.value, kWhCost.value));
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<n-form-item label="Device Wattage" mb-1>
|
|
<n-input-number v-model:value="wattage" :min="0" />
|
|
</n-form-item>
|
|
<n-form-item label="Usage Duration (hours)" mb-1>
|
|
<n-input-number v-model:value="durationHours" :min="0" />
|
|
</n-form-item>
|
|
<n-form-item label="kWh Cost" mb-1>
|
|
<n-input-number v-model:value="kWhCost" :min="0" />
|
|
</n-form-item>
|
|
|
|
<n-divider />
|
|
|
|
<input-copyable label="Total Cost" :value="totalCost" />
|
|
</div>
|
|
</template>
|