ads_web/src/views/reportManage/dataCenter/normalDisplay/index.vue

<script lang="ts" setup>
import { dayMetricsEnum, monthMetricsEnum, weekMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
import {
  getCardDayData,
  getCardWeekData,
  getCardMonthData,
  getLineForDay,
  getLineForWeek,
  getLineForMonth
} from '/src/views/reportManage/dataCenter/api';
import DateTendency from '/src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue';
import { onBeforeUnmount, provide, computed, ref, watch } from 'vue';
import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
import TableSelect from '/src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue';
import DataPicker from '/src/views/reportManage/dataCenter/normalDisplay/components/DatePicker/index.vue';
import emitter from '/src/utils/emitter';

//筛选查询
const selectorRef = ref(null);
const taskIds = ref(null);
//日周月选择
const currentDate = ref({});
const dateDimension = ref('day');
provide('dateDimension', dateDimension);

const queryParams = ref({
  currentDate,
  taskIds
});

const handelDateChange = (date) => {
  currentDate.value = date;
};

// watch(currentDate, (value) => {
// });

emitter.on('DateTendency-dateChange', (value: string) => {
  dateDimension.value = value;
  // console.log('dateDimension', dateDimension.value);
});

provide('currentDate', currentDate);

//选择器筛选后数据的任务id
function updateDataChange(newId) {
  if (selectorRef.value) {
    taskIds.value = newId.value;
    // console.log('newId', newId.value);
  }
}

const currentMetricEnum = computed(() => {
  if (dateDimension.value === 'day') {
    return dayMetricsEnum;
  } else if (dateDimension.value === 'week') {
    return weekMetricsEnum;
  } else if (dateDimension.value === 'month') {
    return monthMetricsEnum;
  }
});

onBeforeUnmount(() => {
  emitter.all.clear();
});
</script>

<template>
  <div>
    <el-card body-style="padding: 10px" class="mb-3.5 mt-3.5">
      <div class="custom-card-style flex gap-1.5 justify-between items-center my-1.5 mx-2 mb-5">
        <Selector ref="selectorRef" @update:updateData="updateDataChange" />
        <DataPicker class="flex-item" style="display: flex; align-items: center;" @dateChange="handelDateChange" />
      </div>

      <DateTendency
          :fetch-line-month="getLineForMonth"
          :fetch-line-week="getLineForWeek"
          :fetchCard="getCardDayData"
          :fetchCardMonth="getCardMonthData"
          :fetchCardWeek="getCardWeekData"
          :fetchLine="getLineForDay"
          :metricEnum="currentMetricEnum"
          :query="queryParams"
      >
      </DateTendency>
    </el-card>
  </div>
  <el-card>
    <TableSelect :taskIds="taskIds"></TableSelect>
  </el-card>
</template>

<style scoped>
.custom-card-style {
  z-index: 999;
  border-radius: 8px;
  top: 0;
}

.el-card {
  border: none;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
}

.el-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -2px rgba(234, 122, 167, 0.05);
  transition: all 0.2s ease-in-out;
}
</style>