????
Your IP : 3.149.236.120
<template>
<section id="gpu" class="plugin">
<div class="gpu-name title">
{{ name }}
</div>
<div class="table">
<div class="table-row" v-if="args.meangpu || gpus.length === 1">
<div class="table-cell text-left">proc:</div>
<div class="table-cell" :class="getMeanDecoration('proc')" v-if="mean.proc != null">
{{ $filters.number(mean.proc, 0) }}%
</div>
<div class="table-cell" v-if="mean.proc == null">N/A</div>
</div>
<div class="table-row" v-if="args.meangpu || gpus.length === 1">
<div class="table-cell text-left">mem:</div>
<div class="table-cell" :class="getMeanDecoration('mem')" v-if="mean.mem != null">
{{ $filters.number(mean.mem, 0) }}%
</div>
<div class="table-cell" v-if="mean.mem == null">N/A</div>
</div>
<div class="table-row" v-if="args.meangpu || gpus.length === 1">
<div class="table-cell text-left">temperature::</div>
<div
class="table-cell"
:class="getMeanDecoration('temperature')"
v-if="mean.temperature != null"
>
{{ $filters.number(mean.temperature, 0) }}°
</div>
<div class="table-cell" v-if="mean.temperature == null">N/A</div>
</div>
<template v-if="!args.meangpu && gpus.length > 1">
<div class="table-row" v-for="(gpu, gpuId) in gpus" :key="gpuId">
<div class="table-cell text-left">
{{ gpu.gpu_id }}:
<span :class="getDecoration(gpu.gpu_id, 'proc')" v-if="gpu.proc != null">
{{ $filters.number(gpu.proc, 0) }}%
</span>
<span v-if="gpu.proc == null">N/A</span>
mem:
<span :class="getDecoration(gpu.gpu_id, 'mem')" v-if="gpu.mem != null">
{{ $filters.number(gpu.mem, 0) }}%
</span>
<span v-if="gpu.mem == null">N/A</span>
temp:
<span
:class="getDecoration(gpu.gpu_id, 'temperature')"
v-if="gpu.temperature != null"
>
{{ $filters.number(gpu.temperature, 0) }}C
</span>
<span v-if="gpu.temperature == null">N/A</span>
</div>
</div>
</template>
</div>
</section>
</template>
<script>
import { store } from '../store.js';
export default {
props: {
data: {
type: Object
}
},
data() {
return {
store
};
},
computed: {
args() {
return this.store.args || {};
},
stats() {
return this.data.stats['gpu'];
},
view() {
return this.data.views['gpu'];
},
gpus() {
return this.stats;
},
name() {
let name = 'GPU';
const sameName = true;
const { stats } = this;
if (stats.length === 1) {
name = stats[0].name;
} else if (stats.length && sameName) {
name = `${stats.length} GPU ${stats[0].name}`;
}
return name;
},
mean() {
const mean = {
proc: null,
mem: null,
temperature: null
};
const { stats } = this;
if (!stats.length) {
return mean;
}
for (let gpu of stats) {
mean.proc += gpu.proc;
mean.mem += gpu.mem;
mean.temperature += gpu.temperature;
}
mean.proc = mean.proc / stats.length;
mean.mem = mean.mem / stats.length;
mean.temperature = mean.temperature / stats.length;
return mean;
}
},
methods: {
getDecoration(gpuId, value) {
if (this.view[gpuId][value] === undefined) {
return;
}
return this.view[gpuId][value].decoration.toLowerCase();
},
getMeanDecoration(value) {
return this.getDecoration(0, value);
}
}
};
</script>