skytek_xinliang
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<v-card class="rounded-lg" elevation="2" v-bind="$attrs">
|
|
<v-card-title class="d-flex align-center py-4 px-4">
|
|
<div class="d-flex align-center">
|
|
<v-icon class="mr-2" color="primary" :icon="mdiChartTimelineVariant"></v-icon>
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
<v-spacer></v-spacer>
|
|
<div class="d-flex">
|
|
<v-btn
|
|
v-for="filter in filters"
|
|
:key="filter"
|
|
:color="activeFilter === filter ? 'primary' : 'grey'"
|
|
density="compact"
|
|
variant="text"
|
|
@click="$emit('filter-change', filter)"
|
|
>
|
|
{{ filter }}
|
|
</v-btn>
|
|
</div>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pt-6 pb-2">
|
|
<div class="chart-container" style="height: 300px; position: relative">
|
|
<v-sparkline
|
|
auto-draw
|
|
fill
|
|
:gradient="['#1890ff', '#e6f7ff']"
|
|
gradient-direction="top"
|
|
height="100"
|
|
:line-width="2"
|
|
:model-value="data"
|
|
:padding="8"
|
|
:smooth="10"
|
|
stroke-linecap="round"
|
|
>
|
|
<template #label="item">
|
|
{{ item.value }}
|
|
</template>
|
|
</v-sparkline>
|
|
<slot name="x-axis">
|
|
<div class="d-flex justify-space-between mt-2 px-2 text-caption text-grey">
|
|
<span v-for="i in 12" :key="i">{{ 6 + i }}:00</span>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mdiChartTimelineVariant } from '@mdi/js'
|
|
interface Props {
|
|
title: string
|
|
data: number[]
|
|
filters: string[]
|
|
activeFilter: string
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
defineEmits(['filter-change'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|