🐛 fix<数据中心>: 合并展示调用问题

src/views/reportManage/dataCenter/combinedDisplay/components/chartDateTendency/index.vue

@@ -39,11 +39,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const metrics = ref(props.initMetric);
-
-// const metricsItems: Ref<MetricData[]> = ref([])
+const dataSet = ref([]);
 let chartObj: any;
 const chartRef = ref();
-// const statDim = ref('day')
 const option: any = {
   dataset: {
     source: [],
@@ -152,8 +150,7 @@ onBeforeUnmount(() => {
 
 const initLine = async () => {
   chartObj = echarts.init(chartRef.value);
-  const items = await getDataset();
-  option.dataset.source = items;
+  option.dataset.source = dataSet.value;
 
   XEUtils.arrayEach(option.series, (info: any, index) => {
     const color = metrics.value[index].color;
@@ -181,7 +178,7 @@ const initLine = async () => {
 
 const getDataset = async () => {
   const resp = await props.fetchLine(queryParams.value);
-  return resp.data;
+  dataSet.value = resp.data;
 };
 
 const emit = defineEmits(['changeStatDim']);
@@ -192,12 +189,13 @@ watch(props.query, async () => {
     initialized = true;
     return;
   }
-  // emitter.emit('chartDateTendency-changeStatDim') // 触发DataTable的loading
   loading.value = true;
-  const items = await getDataset();
-  // emit('changeStatDim', items) // 向父组件传递数据后再传递给DataTable
-  const opt = {dataset: {source: items}};
-  chartObj.setOption(opt);
+  //const items = await getDataset();
+  //const opt = {dataset: {source: items}};
+  //chartObj.setOption(opt);
+  chartObj.setOption(option, true);
+  await getDataset()
+  await initLine();
   loading.value = false;
 });
 

src/views/reportManage/dataCenter/combinedDisplay/components/tableData/mainData.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineProps, inject, onMounted, reactive, Ref, ref, watch } from 'vue';
+import { defineProps, onMounted, reactive, ref } from 'vue';
 import {
   exportData,
   getDayTotalData,
@@ -9,6 +9,8 @@ import {
 } from '/@/views/reportManage/dataCenter/api';
 import { universal } from '../../../utils/columns';
 import { ElMessage } from 'element-plus';
+import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
+import DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue';
 
 const props = defineProps({
   taskIds: Object,
@@ -21,6 +23,7 @@ const taskIds = ref(null);
 const tableColumns = ref([]);
 const tableData = ref([]);
 const totalRow = ref([]);// 汇总数据
+const selectorRef = ref(null);
 
 const dayStartDate = ref(null);
 const dayEndDate = ref(null);
@@ -101,7 +104,6 @@ const loadSortState = () => {
 };
 
 
-
 // 分页
 const gridEvents = {
   pageChange({ currentPage, pageSize }) {
@@ -313,46 +315,24 @@ async function handleExport() {
   }
 }
 
-const taskIdsAvailable = ref(false);
-
-// 监测 taskIds 变化
-watch(() => props.taskIds, (newTaskIds) => {
-  sortStatus.value = false;
-
-  taskIdsAvailable.value = true;
-  fetchMainData(newTaskIds, true);
-});
-
-watch(() => props.dayDate, (newDayDate) => {
-  sortStatus.value = false;
-
-  if (newDayDate) {
-    const { dailyStartDate, dailyTime } = newDayDate;
-    dayStartDate.value = dailyStartDate;
-    dayEndDate.value = dailyTime;
+const processingDateChange = (date) => {
+  dayStartDate.value = date.dayDate.dailyStartDate;
+  dayEndDate.value = date.dayDate.dailyTime;
+  weekStart.value = date.weekDate.weekStartDate;
+  weekEnd.value = date.weekDate.weekEndDate;
+  monthStartDate.value = date.monthDate.startDate.value;
+  monthEndDate.value = date.monthDate.endDate.value;
+  if (taskIds.value) {
+    fetchMainData(taskIds.value, true);
   }
-});
-
-watch(() => props.weekDate, (newWeekDate) => {
-  sortStatus.value = false;
-
-  if (newWeekDate) {
-    const { weekStartDate, weekEndDate } = newWeekDate;
-    weekStart.value = weekStartDate;
-    weekEnd.value = weekEndDate;
-  }
-});
-
-watch(() => props.monthDate, (newMonthDate) => {
-  sortStatus.value = false;
+};
 
-  if (newMonthDate) {
-    const { startDate, endDate } = newMonthDate;
-    monthStartDate.value = startDate;
-    monthEndDate.value = endDate;
+function updateDataChange(newId) {
+  if (selectorRef.value) {
+    taskIds.value = newId.value;
+    fetchMainData(newId.value, true);
   }
-  fetchMainData(props.taskIds, true);
-});
+}
 
 //以下是表格样式
 const cellStyle = ({ columnIndex }) => {
@@ -404,23 +384,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <vxe-grid :cell-style="cellStyle" :header-cell-style="cellStyleHandler" v-bind="gridOptions"
-            v-on="gridEvents" @sort-change="handleSortChange">
-    <template #toolbar_buttons>
-      <div class="mx-3.5">
-        <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
+  <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" />
       </div>
-    </template>
-    <template #platformNumber_default="{ row }">
-      <div class="font-semibold">{{ row.platformNumber }}</div>
-    </template>
-    <template #platformName_default="{ row }">
-      <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
-    </template>
-    <template #brandName_default="{ row }">
-      {{ row.brandName }}
-    </template>
-  </vxe-grid>
+      <div>
+        <DataPicker style="display: flex; align-items: center; gap: 16px" @changeDate="processingDateChange" />
+      </div>
+    </el-card>
+    <el-card class="mt-3">
+      <slot name="table-header"></slot>
+      <vxe-grid :cell-style="cellStyle" :header-cell-style="cellStyleHandler" v-bind="gridOptions"
+                v-on="gridEvents" @sort-change="handleSortChange">
+        <template #toolbar_buttons>
+          <div class="mx-3.5">
+            <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
+          </div>
+        </template>
+        <template #platformNumber_default="{ row }">
+          <div class="font-semibold">{{ row.platformNumber }}</div>
+        </template>
+        <template #platformName_default="{ row }">
+          <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
+        </template>
+        <template #brandName_default="{ row }">
+          {{ row.brandName }}
+        </template>
+      </vxe-grid>
+    </el-card>
+  </div>
+
+
 </template>
 
 <style scoped>
@@ -435,4 +431,11 @@ onMounted(() => {
   padding-right: 4px !important;
   padding-left: 0 !important;
 }
+
+.el-card {
+  border: none;
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
+}
 </style>

src/views/reportManage/dataCenter/combinedDisplay/components/tableData/monthlyComparativeData.vue

@@ -1,20 +1,28 @@
 <script lang="ts" setup>
-import { defineProps, onMounted, reactive, ref, watch, inject, Ref } from 'vue';
-import { getMainData, getMonthlyData } from '/@/views/reportManage/dataCenter/api';
+import { reactive, ref } from 'vue';
+import { getMonthlyData } from '/@/views/reportManage/dataCenter/api';
+import { getLineData, getLineForMonth, getLineForWeek, } from '/src/views/reportManage/dataCenter/api';
 import { universal } from '../../../utils/columns';
-
-const props = defineProps({
-  taskIds: Object,
-  monthCurrentDate: Object,
+import MonthlyDatePicker from '/src/views/reportManage/dataCenter/combinedDisplay/components/monthDatePicker/index.vue';
+import { monthCompareMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
+import chartDateTendency
+  from '/src/views/reportManage/dataCenter/combinedDisplay/components/chartDateTendency/index.vue';
+import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
+
+const selectorRef = ref(null);
+const taskIds = ref({});
+const monthCurrentDate = ref({});
+
+const monthQueryParams = ref({
+  taskIds,
+  monthCurrentDate,
 });
 
 const tableColumns = ref([]);
 const tableData = ref([]);
 
-// const taskIds = ref(props.taskIds);
 const monthStartDate = ref(null);
 const monthEndDate = ref(null);
-const taskIdsAvailable = ref(false);
 
 const gridOptions = reactive({
   border: 'inner',
@@ -25,7 +33,7 @@ const gridOptions = reactive({
   id: 'monthlyCustomStorage',
   customConfig: {
     storage: {
-      visible:true,
+      visible: true,
     }
   },
   columnConfig: {
@@ -54,7 +62,7 @@ const gridOptions = reactive({
 
 // 分页
 const gridEvents = {
-  pageChange({currentPage, pageSize}) {
+  pageChange({ currentPage, pageSize }) {
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = currentPage;
       gridOptions.pagerConfig.pageSize = pageSize;
@@ -113,25 +121,23 @@ async function fetchMonthlyData(taskIds, resetPage = false) {
   }
 }
 
-watch(() => props.monthCurrentDate, (newMonthDate) => {
-  if (newMonthDate) {
-    monthStartDate.value = newMonthDate.startDate;
-    monthEndDate.value = newMonthDate.endDate;
-    fetchMonthlyData(props.taskIds);
+const handelDateChange = (date) => {
+  monthCurrentDate.value = date;
+  monthStartDate.value = date.startDate;
+  monthEndDate.value = date.endDate;
+  if (taskIds.value && Object.keys(taskIds.value).length > 0) {
+    fetchMonthlyData(taskIds.value, true);
   }
-});
+};
 
-watch(() => props.taskIds, (newTaskIds) => {
-  if (newTaskIds) {
-    taskIdsAvailable.value = true;
+function updateDataChange(newId) {
+  if (selectorRef.value) {
+    taskIds.value = newId.value;
+    fetchMonthlyData(newId.value, true);
   }
-  if (taskIdsAvailable.value && newTaskIds) {
-    fetchMonthlyData(newTaskIds, true);
-    taskIdsAvailable.value = false; // 调用后重置标记
-  }
-});
+}
 
-function formatEmptyCell({cellValue}) {
+function formatEmptyCell({ cellValue }) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
   }
@@ -161,17 +167,40 @@ const headerCellStyle = () => {
 </script>
 
 <template>
-  <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions" v-on="gridEvents">
-    <template #platformNumber_default="{ row }">
-      <div class="font-semibold">{{ row.platformNumber }}</div>
-    </template>
-    <template #platformName_default="{ row }">
-      <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
-    </template>
-    <template #brandName_default="{ row }">
-      {{ row.brandName }}
-    </template>
-  </vxe-grid>
+  <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 @monthDateChange="handelDateChange"></MonthlyDatePicker>
+      </div>
+    </el-card>
+    <el-card>
+      <chartDateTendency
+          :fetch-line-month="getLineForMonth"
+          :fetch-line-week="getLineForWeek"
+          :fetchLine="getLineData"
+          :metricEnum="monthCompareMetricsEnum"
+          :query="monthQueryParams"
+      >
+      </chartDateTendency>
+    </el-card>
+    <el-card class="mt-3">
+      <slot name="table-header"></slot>
+      <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions" v-on="gridEvents">
+        <template #platformNumber_default="{ row }">
+          <div class="font-semibold">{{ row.platformNumber }}</div>
+        </template>
+        <template #platformName_default="{ row }">
+          <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
+        </template>
+        <template #brandName_default="{ row }">
+          {{ row.brandName }}
+        </template>
+      </vxe-grid>
+    </el-card>
+  </div>
+
 </template>
 
 <style scoped>
@@ -180,4 +209,11 @@ const headerCellStyle = () => {
   padding-left: 5px !important;
   padding-right: 0 !important;
 }
+
+.el-card {
+  border: none;
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
+}
 </style>

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

@@ -1,15 +1,8 @@
 <script lang="ts" setup>
-import { monthCompareMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
-import { getLineData, getLineForMonth, getLineForWeek, } from '/src/views/reportManage/dataCenter/api';
-import chartDateTendency
-  from '/src/views/reportManage/dataCenter/combinedDisplay/components/chartDateTendency/index.vue';
-import { onBeforeUnmount, ref, watch } from '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 { ref } from '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 DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue';
 // 筛选查询
 const selectorRef = ref(null);
 const taskIds = ref({});
@@ -60,32 +53,15 @@ function handleButtonClick(tableName) {
 
 <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">
+    <component :is="currentTable[showTable]"
+               ref="mainDataComponent"
+               :dayDate="dayDate"
+               :monthCurrentDate="monthCurrentDate"
+               :monthDate="monthDate"
+               :taskIds="taskIds"
+               :weekDate="weekDate"
+    >
+      <template #table-header>
         <div class="custom-button my">
           <el-button
               v-for="pane in panes"
@@ -95,17 +71,10 @@ function handleButtonClick(tableName) {
             {{ pane.label }}
           </el-button>
         </div>
-        <component :is="currentTable[showTable]"
-                   ref="mainDataComponent"
-                   :dayDate="dayDate"
-                   :weekDate="weekDate"
-                   :monthDate="monthDate"
-                   :taskIds="taskIds"
-                   :monthCurrentDate="monthCurrentDate"
-                   >
-        </component>
-      </el-card>
-    </div>
+      </template>
+    </component>
+
+
   </div>
 </template>
 
@@ -132,12 +101,4 @@ function handleButtonClick(tableName) {
   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>

src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue

@@ -164,7 +164,6 @@ async function fetchCurrentTotalData(taskIds) {
   }else if (dateType.value === 'month') {
     await fetchMonthTotal(taskIds);
   }
-  console.log("totalRow.value", totalRow.value); // 确保在此处打印totalRow
 }
 
 
@@ -181,9 +180,7 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
       sort: sortOrder.value,
       order_date: order_date.value,
     });
-    console.log('Start fetching data');
     gridOptions[dateType.value].data = [totalRow.value, ...resp.data];
-    console.log("gridOptions[dateType.value].data", gridOptions[dateType.value].data);
     gridOptions.pagerConfig.total = resp.total;
     if (sortStatus.value) {
       if (resp.data.length > 0) {
@@ -306,7 +303,7 @@ function handleSortChange({ field, order }) {
   gridOptions.sortConfig.defaultSort.order = order;
   gridOptions.sortConfig.defaultSort.field = field;
   sortStatus.value = false;
-  fetchCurrentTotalData(props.taskIds);
+  fetchCurrentData(props.taskIds, true)
 }
 
 const handleImport = () => {