75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<template>
|
|
<div class="rounded-md border">
|
|
<div class="flex h-12 items-center justify-between border-b px-5">
|
|
<h2 class="text-lg font-medium text-gray-900">每日使用量</h2>
|
|
<router-link
|
|
class="text-base text-gray-600 hover:text-gray-700"
|
|
:to="{ name: 'Site Analytics' }"
|
|
>
|
|
所有分析 →
|
|
</router-link>
|
|
</div>
|
|
<LineChart
|
|
title="每日使用量"
|
|
type="time"
|
|
:key="dailyUsageData"
|
|
:data="dailyUsageData"
|
|
unit="秒"
|
|
:chartTheme="[$theme.colors.purple[500]]"
|
|
:loading="$resources.requestCounter.loading"
|
|
:error="$resources.requestCounter.error"
|
|
:showCard="false"
|
|
class="h-[15.55rem] p-2 pb-3"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import dayjs from '../utils/dayjs';
|
|
import LineChart from '@/components/charts/LineChart.vue';
|
|
|
|
export default {
|
|
name: 'CPUUsage',
|
|
props: ['site'],
|
|
components: { LineChart },
|
|
resources: {
|
|
requestCounter() {
|
|
let localTimezone = dayjs.tz.guess();
|
|
return {
|
|
url: 'jcloud.api.analytics.daily_usage',
|
|
params: { name: this.site, timezone: localTimezone },
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
dailyUsageData() {
|
|
let dailyUsageData = this.$resources.requestCounter.data?.data;
|
|
if (!dailyUsageData) return;
|
|
let plan_limit = this.$resources.requestCounter.data.plan_limit;
|
|
|
|
return {
|
|
datasets: [
|
|
dailyUsageData.map(d => [+new Date(d.date), d.value / 1000000])
|
|
],
|
|
// daily limit marker
|
|
markLine: {
|
|
data: [
|
|
{
|
|
name: '每日计算限制',
|
|
yAxis: plan_limit,
|
|
label: {
|
|
formatter: '{b}: {c} 秒',
|
|
position: 'middle'
|
|
},
|
|
lineStyle: {
|
|
color: '#f5222d'
|
|
}
|
|
}
|
|
],
|
|
symbol: ['none', 'none']
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script> |