✨ perf<报表管理>: 界面优化

src/views/reportManage/TaskManage/index.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
 import { ref, reactive, onMounted, nextTick, watch } from 'vue';
 import { VXETable, VxeGridInstance, VxeGridProps, VxeGridListeners } from 'vxe-table';
@@ -10,7 +10,7 @@ import {
   postDeleteTask
 } from '/src/views/reportManage/TaskManage/api.ts';
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
-
+import { Plus, Delete } from '@element-plus/icons-vue';
 
 //表单
 interface taskRuleForm {
@@ -66,7 +66,7 @@ const xGrid = ref<VxeGridInstance<RowVO>>();
 const originalDataMap = new Map();
 
 const gridOptions = reactive<VxeGridProps<RowVO>>({
-  border: false,
+  border: 'inner',
   keepSource: true,
   showOverflow: true,
   height: 850,
@@ -150,15 +150,15 @@ async function getTaskList(filters = {}) {
       page: gridOptions.pagerConfig.currentPage,
       limit: gridOptions.pagerConfig.pageSize,
       ...filters,
-  });
+    });
     gridOptions.data = response.data;
     gridOptions.pagerConfig.total = response.total;
-  }catch (error) {
-      console.error('Error fetching task data:', error);
-    } finally {
-      gridOptions.loading = false;
-    }
+  } catch (error) {
+    console.error('Error fetching task data:', error);
+  } finally {
+    gridOptions.loading = false;
   }
+}
 
 const selectorRef = ref(null);
 
@@ -182,7 +182,7 @@ const editRowEvent = (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
     // 在进入编辑状态前保存原始数据
-    originalDataMap.set(row.id, { ...row });
+    originalDataMap.set(row.id, {...row});
     // 初始化 row.user 确保其与 row.user_name 同步
     if (!row.user || row.user.length === 0) {
       row.user = operationList.value
@@ -248,17 +248,17 @@ const removeEvent = async () => {
 };
 
 const requiredFields = [
-  { field: 'platformNumber', title: '平台编号' },
-  { field: 'platformName', title: '平台名称' },
-  { field: 'country', title: '国家' },
-  { field: 'brandName', title: '品牌' },
-  { field: 'user', title: '运营' },
-  { field: 'currencyCode', title: '回款币种' },
-  { field: 'currencyCodePlatform', title: '回款/余额币种' }
+  {field: 'platformNumber', title: '平台编号'},
+  {field: 'platformName', title: '平台名称'},
+  {field: 'country', title: '国家'},
+  {field: 'brandName', title: '品牌'},
+  {field: 'user', title: '运营'},
+  {field: 'currencyCode', title: '回款币种'},
+  {field: 'currencyCodePlatform', title: '回款/余额币种'}
 ];
 
 const validateRow = (row) => {
-  for (const { field, title } of requiredFields) {
+  for (const {field, title} of requiredFields) {
     if (!row[field] || (Array.isArray(row[field]) && row[field].length === 0)) {
       ElMessage.error(`${title}不能为空`);
       return;
@@ -391,25 +391,25 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
+  <el-card class="custom-card-style flex gap-1.5 justify-between mx-8">
     <Selector ref="selectorRef" @update:filteredData="filteredDataChange" />
   </el-card>
-  <el-card class="mx-2">
+  <el-card class="mx-8 my-3">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
+      <vxe-grid ref="xGrid" stripe v-bind="gridOptions" v-on="gridEvents">
         <template #toolbar_buttons>
-          <vxe-button status="primary" icon="vxe-icon-add" plain @click="dialogFormVisible = true"> 添加任务</vxe-button>
-          <vxe-button icon="vxe-icon-delete" @click="removeEvent">删除</vxe-button>
+          <el-button :icon="Plus" plain type="primary" @click="dialogFormVisible = true"> 添加任务</el-button>
+          <el-button :icon="Delete" type="danger" plain @click="removeEvent">删除</el-button>
           <!--<vxe-button icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>-->
         </template>
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
-            <vxe-button type="text" content="取消" @click="clearRowEvent(row)"></vxe-button>
-            <vxe-button type="text" status="success" content="保存" @click="saveRowEvent(row)"></vxe-button>
+            <vxe-button content="取消" type="text" @click="clearRowEvent(row)"></vxe-button>
+            <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
           </template>
           <template v-else>
             <!--<el-button type="text" icon="Edit" />-->
-            <el-button type="text" icon="Edit"  @click="editRowEvent(row)"></el-button>
+            <el-button icon="Edit" type="text" @click="editRowEvent(row)"></el-button>
           </template>
         </template>
         <template #number_edit="{ row }">
@@ -426,7 +426,8 @@ onMounted(() => {
         </template>
         <template #operation_edit="{ row }">
           <vxe-select v-model="row.user" multiple>
-            <vxe-option v-for="item in operationList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
+            <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"
+                        :value="item.value"></vxe-option>
           </vxe-select>
         </template>
         <template #currency_edit="{ row }">
@@ -463,7 +464,8 @@ onMounted(() => {
         <el-input v-model="taskRuleForm.brand" placeholder="请输入品牌" />
       </el-form-item>
       <el-form-item label="录入人员" prop="operation">
-        <el-select v-model="taskRuleForm.operation" multiple collapse-tags collapse-tags-tooltip placeholder="请选择录入人员">
+        <el-select v-model="taskRuleForm.operation" collapse-tags collapse-tags-tooltip multiple
+                   placeholder="请选择录入人员">
           <el-option v-for="item in operationList" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
         </el-select>
@@ -488,6 +490,19 @@ onMounted(() => {
 .custom-card-style {
   z-index: 999;
   position: sticky;
-  top: 0;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+
+.el-card {
+  border: none;
+  box-shadow: none;
+}
+
+.el-card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-color: #eee;
+  transition: all 0.2s ease-in-out;
 }
 </style>

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

@@ -6,14 +6,19 @@ import DateRangePicker from '/src/components/DateRangePicker/index.vue';
 
 dayjs.extend(isoWeek);
 import enLocale from 'element-plus/es/locale/lang/en';
-import { storeToRefs } from 'pinia';
-import { usePublicData } from '/src/stores/publicData';
+//import { storeToRefs } from 'pinia';
+//import { usePublicData } from '/src/stores/publicData';
 
 const dateType = inject<Ref>('dateDimension');
 
 //公共数据
-const publicData = usePublicData();
-const {dateRange} = storeToRefs(publicData);
+//const publicData = usePublicData();
+//const {dateRange} = storeToRefs(publicData);
+
+const dateRange = ref( [
+  dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
+  dayjs().endOf('day').format('YYYY-MM-DD')
+]);
 
 const startWeek = ref(null);
 const endWeek = ref(null);
@@ -134,7 +139,7 @@ function setDefaultDate() {
   startWeek.value = dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD');
   endWeek.value = dayjs().locale('en').endOf('week').format('YYYY-MM-DD');
   const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
-  const endOfMonth = new Date();
+  const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
   monthlyDataTime.value = [startOfMonth, endOfMonth];
   const formattedStartDate = dayjs(startOfMonth).format('YYYY-MM-DD');
   const formattedEndDate = dayjs(endOfMonth).format('YYYY-MM-DD');

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

@@ -1,30 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import dayjs from 'dayjs';
 
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const monthlyDataTime = ref([
   new Date(currentYear, 0, 1),
-  new Date(currentYear, currentMonth + 1, 0),
+  new Date(new Date().getFullYear(), currentMonth, 0),
 ]);
 
 const startDate = ref(null);
 const endDate = ref(null);
 
-const formatDate = (date) => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-};
-
 const initializeDates = () => {
-  if (monthlyDataTime.value[0]) {
-    startDate.value = formatDate(monthlyDataTime.value[0]);
-  }
-  if (monthlyDataTime.value[1]) {
-    endDate.value = formatDate(monthlyDataTime.value[1]);
-  }
+  const startOfMonth = new Date(new Date().getFullYear(), 0, 1);
+  const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
+  monthlyDataTime.value = [startOfMonth, endOfMonth];
+  const formattedStartDate = dayjs(startOfMonth).format('YYYY-MM-DD');
+  const formattedEndDate = dayjs(endOfMonth).format('YYYY-MM-DD');
+  startDate.value = formattedStartDate;
+  endDate.value = formattedEndDate;
   monthDateChange()
 };
 
@@ -66,15 +61,20 @@ const monthDateChange = async () => {
 
 const handleMonthChange = (value) => {
   if (value) {
-    if (value[0]) {
-      const start = new Date(value[0]);
-      startDate.value = formatDate(start);
-    }
-    if (value[1]) {
-      const end = new Date(value[1]);
-      endDate.value = formatDate(end);
+    if (monthlyDataTime.value[0]) {
+      const start = new Date(monthlyDataTime.value[0]);
+      const year = start.getFullYear();
+      const month = start.getMonth();
+      startDate.value = `${year}-${String(month + 1).padStart(2, '0')}-01`;
+      if (monthlyDataTime.value[1]) {
+        const end = new Date(monthlyDataTime.value[1]);
+        const year = end.getFullYear();
+        const month = end.getMonth() + 1;
+        const lastDay = new Date(year, month, 0).getDate();
+        endDate.value = `${year}-${String(month).padStart(2, '0')}-${lastDay}`;
+      }
+      monthDateChange();
     }
-    monthDateChange();
   }
 };
 

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

@@ -9,8 +9,6 @@ const props = defineProps({
   monthDate: Object,
   taskIds: Object,
 });
-// const dateType = inject<Ref>('dateDimension');
-// const currentDate = inject<Ref>('currentDate')
 
 const tableColumns = ref([]);
 const tableData = ref([]);
@@ -23,7 +21,7 @@ const monthStartDate = ref(null);
 const monthEndDate = ref(null);
 
 const gridOptions = reactive({
-  border: false,
+  border: 'inner',
   height: 900,
   align: null,
   round: true,
@@ -31,6 +29,9 @@ const gridOptions = reactive({
   columnConfig: {
     resizable: true,
   },
+  rowConfig: {
+    isHover: true,
+  },
   pagerConfig: {
     enabled: true,
     total: 20,
@@ -63,12 +64,6 @@ const gridEvents = {
   },
 };
 
-// watch(currentDate,(newValue)=>{
-//   if (newValue){
-//     console.log(newValue);
-//   }
-// })
-
 // 获取数据
 async function fetchMainData(taskIds) {
   try {
@@ -130,22 +125,6 @@ watch(() => props.monthDate, (newMonthDate) => {
   }
 });
 
-// 获取列名数据
-//async function fetchColumnNames(data) {
-//  const firstItem = data[0];
-//  if (firstItem) {
-//    const excludedColumns = ['任务ID', '可录人数', '_X_ROW_KEY'];
-//    tableColumns.value = Object.keys(firstItem)
-//        .filter(key => !excludedColumns.includes(key))
-//        .map((key, index) => ({
-//          field: key,
-//          title: key, // 使用字段名作为列标题
-//          width: key.includes('~') ? 120 : (index < 5 ? 90 : 87),
-//          fixed: index < 5 ? 'left' : undefined // 前五列固定
-//        }));
-//  }
-//}
-
 const fetchColumnNames = (data) => {
   const firstItem = data[0];
   if (firstItem) {
@@ -157,7 +136,8 @@ const fetchColumnNames = (data) => {
           title: key, // 使用字段名作为列标题
           minWidth: key.includes('~') ? 120 : index < 5 ? 90 : /\d{4}-\d{2}-\d{2}/.test(key)? 113 :105,
           fixed: index < 6? 'left' : undefined,
-          align: 'center',
+          align: index > 5?'center':undefined,
+          formatter: formatEmptyCell,
         }));
   }
 };
@@ -196,8 +176,10 @@ async function handleExport() {
       task_ids: props.taskIds,
       day_start_date: dayStartDate.value,
       day_end_date: dayEndDate.value,
-      week_start_date: weekDate.value,
+      week_start_date: weekStart.value,
+      week_end_date: weekEnd.value,
       month_start_date: monthStartDate.value,
+      month_end_date: monthEndDate.value,
     };
     // 调用后端导出数据接口
     const response = await exportData(params);
@@ -216,13 +198,16 @@ async function handleExport() {
     console.error('导出数据失败:', error);
   }
 }
+
+function formatEmptyCell({ cellValue }) {
+  return cellValue === null || cellValue === undefined || cellValue === '' ? '--' : cellValue;
+}
 </script>
 
 <template>
   <vxe-grid :header-cell-style="cellStyleHandler" v-bind="gridOptions"
-            v-on="gridEvents">
+            v-on="gridEvents" >
     <template #toolbar_buttons>
-      <!--<vxe-button circle icon="vxe-icon-refresh" @click="fetchMainData"></vxe-button>-->
       <div class="mx-3.5">
         <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
       </div>

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

@@ -16,7 +16,7 @@ const monthStartDate = ref(null);
 const monthEndDate = ref(null);
 
 const gridOptions = reactive({
-  border: false,
+  border: 'inner',
   height: 900,
   align: null,
   round: true,

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

@@ -72,7 +72,7 @@ function handleButtonClick(tableName) {
 
 <template>
   <div>
-    <el-card class="mb-3">
+    <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" />
@@ -137,4 +137,16 @@ function handleButtonClick(tableName) {
   margin: 0.8rem 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>

src/views/reportManage/dataCenter/index.vue

@@ -10,13 +10,13 @@ const activeName = ref('NormalDisplay');
 const tabsComponents: any = {
   NormalDisplay,
   CombinedDisplay,
-  // CompareData,
+  //CompareData,
   // DataExport,
 };
 const panes = [
   {label: '普通展示', name: 'NormalDisplay'},
   {label: '合并展示', name: 'CombinedDisplay'},
-  // { label: '对比数据', name: 'CompareData' },
+   //{ label: '对比数据', name: 'CompareData' },
   // { label: '数据导出', name: 'DataExport' },
 ];
 
@@ -31,12 +31,25 @@ function handleTabClick(tab: TabsPaneContext, event: Event) {
 </script>
 
 <template>
-  <div class="pr-2">
-    <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleTabClick">
-      <el-tab-pane v-for="pane in panes" :key="pane.name" :label="pane.label" :name="pane.name"></el-tab-pane>
+  <div class="pr-2 mt-2">
+    <el-card body-style="padding-top: 10px;">
+      <!--<el-tabs v-model="activeName" class="demo-tabs"  @tab-click="handleTabClick">-->
+      <!--  <el-tab-pane v-for="pane in panes" :key="pane.name" :label="pane.label" :name="pane.name"></el-tab-pane>-->
+      <!--  <component :is="tabsComponents[activeName]"></component>-->
+      <!--</el-tabs>-->
+      <div class="asj-tabs">
+        <div
+            v-for="pane of panes"
+            :key="pane.name"
+            :class="['asj-tab', { active: activeName === pane.name }]"
+            @click="activeName = pane.name">
+          {{ pane.label }}
+        </div>
+      </div>
       <component :is="tabsComponents[activeName]"></component>
-    </el-tabs>
+    </el-card>
   </div>
+
 </template>
 
 <style scoped>
@@ -46,4 +59,17 @@ function handleTabClick(tab: TabsPaneContext, event: Event) {
   font-size: 32px;
   font-weight: 600;
 }
+.asj-tabs {
+  background-color: #fff;
+  top: 0px;
+  z-index: 9;
+  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
+
+  padding: 0 12px;
+  display: flex;
+  height: 40px;
+  gap: 24px;
+  border-radius: 8px;
+  overflow: hidden;
+}
 </style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <el-form :model="form" :rules="rules" ref="formRef">
+      <el-form-item prop="bid">
+        <el-input
+            v-model.number="form.bid"
+            @input="handleInputChange"
+            placeholder="请输入数字"
+            style="width: 150px"
+            clearable
+        ></el-input>
+      </el-form-item>
+      <el-button type="primary" @click="submitForm">提交</el-button>
+    </el-form>
+    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus'; // 确保已安装并导入Element Plus的消息组件
+
+const formRef = ref(null);
+const errorMessage = ref('');
+const rules = {
+  bid: [
+    { required: true, message: '此项为必填项', trigger: 'blur' },
+    { type: 'number', message: '必须输入数字', trigger: 'blur' }
+  ]
+};
+
+const form = reactive({
+  bid: 1.00
+});
+
+const handleInputChange = (event) => {
+  const value = event.target.value;
+  event.target.value = value === '' ? '' : (value === '0' ? '0.00' : value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, ''));
+  form.bid = parseFloat(value); // 直接赋值，无需检查空字符串，因为验证规则会处理
+};
+
+const submitForm = () => {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      // 提交逻辑
+      console.log("Form submitted!");
+    } else {
+      // 显示错误提示
+      ElMessage.error('请确保所有必填项已正确填写');
+    }
+  });
+};
+</script>
+
+<style scoped>
+.error-message {
+  color: red;
+}
+</style>

src/views/reportManage/dataCenter/normalDisplay/components/DatePicker/index.vue

@@ -151,7 +151,7 @@ function setDefaultDate() {
       break;
     case 'month':
       const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
-      const endOfMonth = new Date();
+      const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
       monthlyDataTime.value = [startOfMonth, endOfMonth];
       const formattedStartDate = dayjs(startOfMonth).format('YYYY-MM-DD');
       const formattedEndDate = dayjs(endOfMonth).format('YYYY-MM-DD');

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

@@ -25,7 +25,7 @@ const weekData = [];
 const monthData = [];
 
 const gridOptions = reactive({
-  border: false,
+  border: 'inner',
   height: 900,
   align: null,
   round: true,
@@ -185,10 +185,13 @@ onMounted(() => {
 
 <template>
   <div>
-    <vxe-grid v-bind="currentGridOptions" v-on="gridEvents">
+    <vxe-grid v-bind="currentGridOptions" v-on="gridEvents" stripe>
       <template #toolbar_buttons>
         <vxe-button icon="vxe-icon-add" status="primary" @click="handleImport">数据录入</vxe-button>
       </template>
+      <template #platformName_default="{ row }">
+        <div class="font-bold">{{ row.platformName}}</div>
+      </template>
     </vxe-grid>
   </div>
 </template>

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

@@ -224,7 +224,7 @@ const xGrid = ref<VxeGridInstance<RowVO>>();
 const originalDataMap = new Map();
 
 const gridOptions = reactive({
-  border: false,
+  border: 'inner',
   height: 800,
   align: null,
   round: true,
@@ -703,7 +703,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <el-card class=" my-1.5 mx-2">
+    <el-card class=" my-3 mx-8">
       <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
         <Selector ref="selectorRef" @update:updateData="updateDataChange" />
         <div v-if="dateType === 'day'" class="demo-date-picker">
@@ -763,9 +763,9 @@ onMounted(() => {
       </div>
     </el-card>
   </div>
-  <el-card class="mx-2">
+  <el-card class="mx-8">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" v-bind="currentGridOptions" v-on="gridEvents">
+      <vxe-grid ref="xGrid" v-bind="currentGridOptions" v-on="gridEvents" stripe>
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
             <el-button link size="small" @click="clearRowEvent(row)">取消</el-button>
@@ -890,4 +890,16 @@ onMounted(() => {
   border-radius: 10px;
   margin-bottom: 10px;
 }
+
+.el-card {
+  border: none;
+  box-shadow: none;
+}
+
+.el-card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-color: #eee;
+  transition: all 0.2s ease-in-out;
+}
 </style>

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

@@ -67,13 +67,12 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <el-card class="mb-1.5">
-      <div class="custom-card-style flex gap-1.5 justify-between items-center my-1.5 mx-2">
+    <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>
-    </el-card>
-    <el-card class="mb-1.5">
+
       <DateTendency
           :fetch-line-month="getLineForMonth"
           :fetch-line-week="getLineForWeek"
@@ -95,11 +94,19 @@ onBeforeUnmount(() => {
 <style scoped>
 .custom-card-style {
   z-index: 999;
-  /*position: sticky;*/
+  border-radius: 8px;
   top: 0;
 }
 
-/* .flex-item { */
-/*   min-width: 160px; !* 设置最小宽度，确保在小屏幕上有足够的可见区域 *! */
-/* } */
+.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>

src/views/reportManage/dataCenter/utils/columns.ts

@@ -138,14 +138,18 @@ export const monthColumns = ref([
   {title: '操作', width: 120, slots: {default: 'operate'}, fixed: 'right'},
 ]);
 
+const universal = [
+  {field: 'platformNumber', title: '平台编号', fixed: 'left',minWidth: 90},
+  {field: 'platformName', title: '平台名称', fixed: 'left', minWidth: 160,slots: {default: 'platformName_default'},align: 'center',titlePrefix: {icon: 'vxe-icon-goods-fill'},},
+  {field: 'user_name', title: '运营', fixed: 'left', minWidth: 90,align: 'center',titlePrefix: {icon: 'vxe-icon-user' }},
+  {field: 'country', title: '国家', fixed: 'left', minWidth: 90,titlePrefix: {icon: 'vxe-icon-location' },align: 'center'},
+  {field: 'brandName', title: '品牌', fixed: 'left', minWidth: 90,align: 'center',titlePrefix: {icon: 'vxe-icon-brand'},},
+  {field: 'currencyCode', title: '回款币种', fixed: 'left', minWidth: 90,align: 'center'},
+]
+
 // 表格展示
 export const dayDataColumns = ref([
-  {field: '平台编号', title: '平台编号', fixed: 'left',minWidth: 90},
-  {field: '平台名称', title: '平台名称', fixed: 'left', minWidth: 90},
-  {field: '运营', title: '运营', fixed: 'left', minWidth: 90},
-  {field: '国家', title: '国家', fixed: 'left', minWidth: 90},
-  {field: '品牌名称', title: '品牌', fixed: 'left', minWidth: 90},
-  {field: '回款币种', title: '回款币种', fixed: 'left', minWidth: 90},
+    ...universal
   //{field: 'currencyCodePlatform', title: '回款/余额币种', fixed: 'left', minWidth: 112},
   //{field: 'sales_original', title: '销售额(本币)', width: 104,},
   //{field: 'ad_sales_original', title: '广告销售额(本币)', width: 132,},
@@ -160,12 +164,7 @@ export const dayDataColumns = ref([
   // {field: 'roas', title: '广告ROAS'},
 ]);
 export const weekDataColumns = ref([
-  {field: 'platformNumber', title: '平台编号', fixed: 'left', minWidth: 90},
-  {field: 'platformName', title: '平台名称', fixed: 'left', minWidth: 90},
-  {field: 'user_name', title: '运营', fixed: 'left', minWidth: 90},
-  {field: 'country', title: '国家', fixed: 'left', minWidth: 90},
-  {field: 'brandName', title: '品牌', fixed: 'left', minWidth: 90},
-  {field: 'currencyCode', title: '回款币种', fixed: 'left', minWidth: 90},
+  ...universal
 
   //{field: 'sales_original', title: '销售额(本币)', width: 104,},
   //{field: 'ad_sales_original', title: '广告销售额(本币)', width: 132,},
@@ -206,12 +205,7 @@ export const weekDataColumns = ref([
   //{field: 'refundRate', title: '最近90天平台退货率', width: 120},
 ]);
 export const monthDataColumns = ref([
-  {field: 'platformNumber', title: '平台编号', fixed: 'left', minWidth: 90},
-  {field: 'platformName', title: '平台名称', fixed: 'left', minWidth: 90},
-  {field: 'user_name', title: '运营', fixed: 'left', minWidth: 90},
-  {field: 'country', title: '国家', fixed: 'left', minWidth: 90},
-  {field: 'brandName', title: '品牌', fixed: 'left', minWidth: 90},
-  {field: 'currencyCode', title: '回款币种', fixed: 'left', minWidth: 90},
+  ...universal
   //{field: 'currencyCodePlatform', title: '回款/余额币种', fixed: 'left', minWidth: 112},
   //{field: 'sales', title: '销售额'},
   //{field: 'ad_cost', title: '广告花费'},