mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.6 KiB
Vue
111 lines
2.6 KiB
Vue
|
|
<!--
|
|
* stats.vue
|
|
* Copyright (C) 2023 veypi <i@veypi.com>
|
|
* 2023-10-20 22:56
|
|
* Distributed under terms of the MIT license.
|
|
-->
|
|
<template>
|
|
<div>
|
|
<div class="page-h1">
|
|
服务
|
|
</div>
|
|
<div class="w-40 text-center py-4 start_card">
|
|
<div class="text-3xl"> 已运行 </div>
|
|
<Tsdom class="text-2xl mt-2" query='srv_start'>
|
|
<template #single="{ data }">
|
|
{{ util.timetostr(data[1]) }}
|
|
</template>
|
|
</Tsdom>
|
|
|
|
</div>
|
|
<div class="flex flex-nowrap" style="">
|
|
<!-- <Tschart :item="querys[0]" :time_mode="1"></Tschart> -->
|
|
<Tsdom :sync_delta="1" delta="3m" step="1s" is_range query="srv_cpu" class="w-1/2">
|
|
<template #list="{ data }">
|
|
<Tsgraph title="CPU" :data="data" :data-formatter="data_formatter"></Tsgraph>
|
|
</template>
|
|
</Tsdom>
|
|
<div class="w-1/2">
|
|
<Tschart sync :item="querys[1]" :time_mode="0"></Tschart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onUnmounted, onMounted } from 'vue';
|
|
// import tschart from 'src/components/tschart';
|
|
|
|
const start_time = ref('')
|
|
const timer = ref()
|
|
const data_formatter = (data: any[]) => {
|
|
let res = [] as any[]
|
|
data.forEach(e => {
|
|
res.push({
|
|
data: e.values.map((e: any) =>
|
|
[e[0] * 1000, Number(e[1])]),
|
|
smooth: true,
|
|
symbol: 'none',
|
|
type: 'line',
|
|
valueFormatter: (value: number) => value.toFixed(2) + "%",
|
|
})
|
|
})
|
|
console.log(res)
|
|
return res
|
|
}
|
|
const querys = ref<{
|
|
name: string, query: string[] | string, label?: any,
|
|
valueFormatter?: any
|
|
}[]>([
|
|
{
|
|
name: 'cpu',
|
|
query: `srv_cpu{i='oa'}`,
|
|
label: 'cpu',
|
|
valueFormatter: (value: number) => value.toFixed(2) + "%",
|
|
},
|
|
{
|
|
name: '内存',
|
|
query: `srv_mem{i='oa'} / 1048576`,
|
|
label: '内存',
|
|
valueFormatter: (value: number) => value.toFixed(2) + "MB",
|
|
},
|
|
])
|
|
|
|
onMounted(() => {
|
|
api.tsdb.query('srv_start{i="oa"}').then(e => {
|
|
if (e.data.result.length) {
|
|
let s = Number(e.data.result[0].value[1])
|
|
if (s < 60) {
|
|
start_time.value = s + ' 秒'
|
|
} else if (s < 3600) {
|
|
start_time.value = (s / 60).toFixed(1) + ' 分钟'
|
|
} else if (s < 3600 * 24) {
|
|
start_time.value = (s / 60 / 60).toFixed(1) + ' 小时'
|
|
} else {
|
|
start_time.value = (s / 60 / 60 / 24).toFixed(1) + ' 天'
|
|
}
|
|
}
|
|
})
|
|
})
|
|
onUnmounted(() => {
|
|
if (timer.value) {
|
|
clearInterval(timer.value)
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.start_card {
|
|
border: 1px solid var(--color-primary);
|
|
|
|
:first-child {
|
|
color: var(--color-primary)
|
|
}
|
|
|
|
:nth-child(2) {}
|
|
}
|
|
</style>
|
|
|