ln-web/src/views/dashboard/components/AlarmHistoryCard/index.vue

<template>
  <TechCard>
    <template #extra>
      <div class="toggle-group">
        <button :class="{ active: mode === 'day' }" @click="mode = 'day'">按日</button>
        <button :class="{ active: mode === 'month' }" @click="mode = 'month'">按月</button>
      </div>
    </template>

    <div class="card-title">历史告警统计</div>
    <BaseChart :option="chartOption" :height="175" />
  </TechCard>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import TechCard from '../TechCard/index.vue'
import * as echarts from 'echarts'

defineOptions({ name: 'AlarmHistoryCard' })

// 切换模式：按日 / 按月
const mode = ref<'day' | 'month'>('day')

// 模拟接口数据结构
const rawData = ref({
  dayStatInfo: [
    { date: '2024-07-01', fallingCount: 10 },
    { date: '2024-07-02', fallingCount: 15 },
    { date: '2024-07-03', fallingCount: 20 },
    { date: '2024-07-04', fallingCount: 12 },
    { date: '2024-07-05', fallingCount: 8 },
  ],
  monthStatInfo: [
    { month: '2024-06', fallingCount: 50 },
    { month: '2024-07', fallingCount: 65 },
  ],
})

// 根据模式转换图表数据
const alarmHistoryData = computed(() => {
  const source = mode.value === 'day' ? rawData.value.dayStatInfo : rawData.value.monthStatInfo
  const dates = source.map((item) => ('date' in item ? item.date : item.month))
  const values = source.map((item) => item.fallingCount ?? 0)
  return { dates, values }
})

// 图表配置项
const chartOption = computed(() => ({
  grid: { top: 10, right: 20, bottom: 30, left: 30 },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  xAxis: {
    type: 'category',
    data: alarmHistoryData.value.dates,
    axisLine: { lineStyle: { color: '#2a3b5a' } },
    axisLabel: { color: '#9cc5e0', fontSize: 12 },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#2a3b5a' } },
    axisLabel: { color: '#9cc5e0', fontSize: 12 },
    splitLine: { lineStyle: { color: 'rgba(42, 59, 90, 0.3)' } },
  },
  series: [
    {
      name: '告警次数',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      data: alarmHistoryData.value.values,
      itemStyle: { color: '#f39c12' },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#f39c12' },
          { offset: 1, color: '#e74c3c' },
        ]),
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(243, 156, 18, 0.3)' },
          { offset: 1, color: 'rgba(243, 156, 18, 0.1)' },
        ]),
      },
    },
  ],
}))
</script>

<style scoped lang="less">
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #f39c12;
  margin-bottom: 12px;
  text-align: center;
}

.toggle-group {
  display: flex;
  gap: 8px;
  justify-content: flex-end;

  button {
    background: none;
    border: 1px solid #f39c12;
    color: #f39c12;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;

    &.active {
      background-color: #f39c12;
      color: #fff;
    }
  }
}
</style>