tall3-pc-keti/src/views/month-data.vue

<template>
  <DataSearchBar @search="onSearch" />
  <IntegralElectric ref="child1" class="mt-4" />
  <TotalCorrosion ref="child2" class="mt-4" />
  <MoistTime ref="child3" class="mt-4" />
</template>

<script setup>
import DataSearchBar from 'components/data-search-bar.vue';
import IntegralElectric from 'components/integral-electric.vue';
import TotalCorrosion from 'components/total-corrosion.vue';
import MoistTime from 'components/moist-time.vue';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

const child1 = ref(null);
const child2 = ref(null);
const child3 = ref(null);

const search = ref({});
const page = ref({ page: 2, size: 10 });
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const electricData = computed(() => store.state.statistics.electricData);
const corrosionData = computed(() => store.state.statistics.corrosionData);
const moistTimeData = computed(() => store.state.statistics.moistTimeData);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id

/**
 * 获取月累计数据
 * @param {*} deviceId // 站点 设备id
 * @param {*} date // 年月时间段
 * @param {*} sort // 1 -> 按时间正序 -1->按时间倒序
 */
const getDate = async () => {
  try {
    if (token) {
      const options = { ...search.value };
      const date = options && options.date ? options.date : [];
      const params = {
        search: { deviceId: currentDeviceId.value, date },
        page: { page: page.value.page, size: page.value.size },
      };

      await store.dispatch('statistics/getMonthsDate', params);
      timer && clearTimeout(timer);
      timer = null;
      // 渲染图表
      child1.value.setDate(electricData.value);
      child2.value.setDate(corrosionData.value);
      child3.value.setDate(moistTimeData.value);
    } else {
      timer = setTimeout(() => {
        getDate();
      });
    }
  } catch (error) {
    console.log('error: ', error);
  }
};

getDate();

/**
 * 监听search信息
 * @param {object} payload search组件emit的数据
 */
const onSearch = payload => {
  search.value = { ...payload };
  getDate();
};
</script>