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

<script lang="ts" setup>
import { monthCompareMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
import {
  getCardDayData,
  getCardMonthData,
  getCardWeekData,
  getLineForDay,
  getLineForMonth,
  getLineForWeek,
  getLineData,
} from '/src/views/reportManage/dataCenter/api';
import chartDateTendency
  from '/src/views/reportManage/dataCenter/combinedDisplay/components/chartDateTendency/index.vue';
import DateTendency from '/src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue';
import { computed, provide, ref, watch } from 'vue';
import DateRangePicker from '/src/components/DateRangePicker/index.vue';
import MonthlyDatePicker from '/src/views/reportManage/dataCenter/combinedDisplay/components/monthDatePicker/index.vue';
import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
import mainData from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/mainData.vue';
import monthlyComparativeData
  from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/monthlyComparativeData.vue';
import emitter from '/@/utils/emitter';
import DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue';
// 筛选查询
const selectorRef = ref(null);
const taskIds = ref({});

const dayDate = ref(null);
const weekDate = ref(null);
const monthDate = ref(null);

const monthCurrentDate = ref({});

const processingDateChange = (date) => {
  // currentDate.value = date;
  dayDate.value = date.dayDate;
  weekDate.value = date.weekDate;
  monthDate.value = date.monthDate;
};

const monthQueryParams = ref({
  taskIds,
  monthCurrentDate,
});

// 表格
const showTable = ref('mainData'); // 初始显示表格
const currentTable: any = {
  mainData,
  monthlyComparativeData,
};
const panes = [
  {label: '主数据', name: 'mainData'},
  {label: '月度对比数据', name: 'monthlyComparativeData'},
];

function updateDataChange(newId) {
  if (selectorRef.value) {
    taskIds.value = newId.value;
  }
}

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

function handleButtonClick(tableName) {
  showTable.value = tableName;
}

</script>

<template>
  <div>
    <div class="px-3.5">
      <el-card body-style="padding: 10px" class="mb-3.5 mt-3.5">
        <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2"
             style="display: flex; align-items: center;">
          <Selector ref="selectorRef" @update:updateData="updateDataChange" />
          <MonthlyDatePicker v-if="showTable === 'monthlyComparativeData'"
                             @monthDateChange="handelDateChange"></MonthlyDatePicker>
        </div>
        <div v-if="showTable === 'mainData'">
          <DataPicker style="display: flex; align-items: center; gap: 16px" @changeDate="processingDateChange" />
        </div>
      </el-card>

      <el-card v-if="showTable === 'monthlyComparativeData'" class="mb-1.5">
        <chartDateTendency
            :fetch-line-month="getLineForMonth"
            :fetch-line-week="getLineForWeek"
            :fetchLine="getLineData"
            :metricEnum="monthCompareMetricsEnum"
            :query="monthQueryParams"
        >
        </chartDateTendency>
      </el-card>
    </div>
    <div class="px-3.5">
      <el-card class="mt-3">
        <div class="custom-button my">
          <el-button
              v-for="pane in panes"
              :key="pane.name"
              :type="showTable === pane.name ? 'primary' : 'default'"
              @click="handleButtonClick(pane.name)">
            {{ pane.label }}
          </el-button>
        </div>
        <component :is="currentTable[showTable]"
                   :dayDate="dayDate"
                   :monthCurrentDate="monthCurrentDate"
                   :monthDate="monthDate"
                   :taskIds="taskIds"
                   :weekDate="weekDate">
        </component>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.custom-card-style {
  z-index: 999;
  position: sticky;
  top: 0;
}

.demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin: 10px;
}

.custom-button {
  z-index: 1000;
  position: absolute;
  color: #3a83f7 !important;
}

.my {
  margin: 0.8rem 0;

}

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

</style>