75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<section class="card trend-chart-panel" v-loading="loading">
|
||
|
|
<div class="panel-header">
|
||
|
|
<span class="panel-title">趋势图</span>
|
||
|
|
<span class="panel-meta">
|
||
|
|
<template v-if="trendResult">
|
||
|
|
{{ trendResult.bucket || '-' }} / {{ trendResult.displayPointCount || 0 }} 点
|
||
|
|
</template>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="hasSeries" class="chart-body">
|
||
|
|
<LineChart :options="chartOptions" />
|
||
|
|
</div>
|
||
|
|
<el-empty v-else class="chart-empty" description="请选择监测点和指标后查询趋势" />
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import LineChart from '@/components/echarts/line/index.vue'
|
||
|
|
import type { SteadyDataView } from '@/api/steady/steadyDataView/interface'
|
||
|
|
import { buildSteadyTrendChartOptions } from '../utils/trendOptions'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'SteadyTrendChartPanel'
|
||
|
|
})
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
trendResult: SteadyDataView.SteadyTrendQueryResult | null
|
||
|
|
loading: boolean
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const hasSeries = computed(() => Boolean(props.trendResult?.series?.length))
|
||
|
|
const chartOptions = computed(() => buildSteadyTrendChartOptions(props.trendResult?.series || []))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.trend-chart-panel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0;
|
||
|
|
min-height: 0;
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-header {
|
||
|
|
display: flex;
|
||
|
|
flex: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-title {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-meta {
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-body {
|
||
|
|
flex: 1;
|
||
|
|
min-height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-empty {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
</style>
|