65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="!data || data[0].date === undefined"
|
|
class="flex h-5/6 items-center justify-center"
|
|
>
|
|
<div class="text-base text-gray-700">无数据</div>
|
|
</div>
|
|
<div v-else class="mx-4 mt-8" v-for="type in uptimeTypes" :key="type.key">
|
|
<div class="flex h-10 justify-between">
|
|
<div
|
|
v-for="d in data"
|
|
:key="d.date"
|
|
class="w-1.5 rounded"
|
|
:class="[
|
|
d[type.key] === undefined
|
|
? 'bg-white'
|
|
: d[type.key] === 1
|
|
? 'bg-green-500'
|
|
: d[type.key] === 0
|
|
? 'bg-red-500'
|
|
: 'bg-yellow-500'
|
|
]"
|
|
:title="
|
|
d[type.key]
|
|
? `${formatDate(d.date)} | 正常运行时间: ${(d.value * 100).toFixed(2)}%`
|
|
: ''
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { DateTime } from 'luxon';
|
|
export default {
|
|
name: 'SiteUptime',
|
|
props: ['data', 'loading'],
|
|
computed: {
|
|
uptimeTypes() {
|
|
return [{ key: 'value', label: 'Web' }];
|
|
},
|
|
subtitle() {
|
|
if (!this.data) return '';
|
|
|
|
let total = 0;
|
|
let i = 0;
|
|
for (; i < this.data.length; i++) {
|
|
// there could be empty objects at the end of the array
|
|
// so we don't have to count them
|
|
if (typeof this.data[i].value !== 'number') break;
|
|
|
|
total += this.data[i].value;
|
|
}
|
|
const average = ((total / i) * 100).toFixed(2);
|
|
|
|
return !isNaN(average) ? `平均值: ${average}%` : '';
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
return DateTime.fromSQL(date).toLocaleString(DateTime.DATETIME_FULL);
|
|
}
|
|
}
|
|
};
|
|
</script> |