smarthome/src/views/index/compontents/tvoc.vue

<script lang="ts" name="Tvoc" setup>
import Echarts from '@/components/Echarts/index.vue';
import {dashboardTvoc} from "@/api/system/dashboard";
import {ref, computed} from 'vue';

const list = [
  {label: '24小时', value: 24},
  {label: '7天', value: 7},
  {label: '30天', value: 30},
];
const activeDay = ref(24);
const loading = ref(false);

const dayEnum = {
  "24": '24h',
  '7': '7d',
  '30': '30d'
}
const points = ref<any[]>([])

const options = computed(() => {
  const xData = points.value.map(item => item.time)
  const yData = points.value.map(item => item.value)
  return {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '12%',
      bottom: '18%',
    },
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value',
      name: 'TVOC'
    },
    series: [
      {
        data: yData,
        type: 'line',
        smooth: true,
      }
    ]
  }
})

function changeActive(val: number) {
  activeDay.value = val;
  init()
}

function init() {
  loading.value = true
  dashboardTvoc(dayEnum[activeDay.value])
    .then(res => {
      points.value = res.data.points.map(item => {
        if (activeDay.value === 24) {
          const yearMonthDay = item.time.split(' ')[0]
          const [_, month, day] = yearMonthDay.split('-')
          return {
            ...item,
            value: item.value || 0,
            time: `${month}-${day} ${item.label}`
          }
        } else {
          return {
            ...item,
            value: item.value || 0,
            time: item.label
          }
        }
      })
    })
    .catch(err => {
      console.error('TVOC接口请求失败：', err)
    })
    .finally(() => {
      loading.value = false
    })
}

init()
</script>

<template>
  <div class="TvocBox">
    <div class="TvocNavBox">
      <span>平均TVOC原始值</span>
      <div class="actions">
        <div
          v-for="(item,index) in list"
          :key="index"
          :class="{ active: activeDay === item.value }"
          class="actionItem"
          @click="changeActive(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="TvocChartBox">
      <Echarts :options="options"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.TvocBox {
  padding: 25px;
  height: 372px;
  border-radius: 16px;
  border: 1px solid rgba(238, 240, 243, 1);

  .TvocNavBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;

    span {
      height: 22px;
      line-height: 22px;
      color: rgba(17, 24, 39, 1);
      font-size: 16px;
    }

    .actions {
      width: 175px;
      height: 36px;
      border-radius: 8px;
      background-color: rgba(243, 245, 248, 1);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 4px;

      .actionItem {
        max-width: 64px;
        height: 28px;
        padding: 7px 12px;
        color: rgba(107, 114, 128, 1);
        font-size: 12px;
        cursor: pointer;

        &.active {
          color: rgba(37, 99, 235, 1);
          border-radius: 6px;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  .TvocChartBox {
    height: 330px;
  }
}
</style>