37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<template>
|
|
<tr>
|
|
<th>{{ name }}</th>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
|
|
v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
|
|
{{ getPercent() }}%
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="rightCell">
|
|
{{ Math.round((total - used) / 1024) }}
|
|
KByte
|
|
</td>
|
|
<td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
|
|
<td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
name: String,
|
|
total: { type: Number, required: true },
|
|
used: { type: Number, required: true },
|
|
},
|
|
methods: {
|
|
getPercent() {
|
|
return Math.round((this.used / this.total) * 100);
|
|
},
|
|
},
|
|
});
|
|
</script>
|