🎨 feat<数据中心>: 固定汇总在首行，修改样式

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

@@ -17,14 +17,13 @@ const dateType = inject<Ref>('dateDimension');
 
 const dateRange = ref([
   dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
-  dayjs().endOf('day').format('YYYY-MM-DD')
+  dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
 ]);
 
 const startWeek = ref(null);
 const endWeek = ref(null);
-const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD'));
-const weekEndDate = ref<string | null>(dayjs().locale('en').endOf('week').format('YYYY-MM-DD'));
-
+const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(5, 'week').startOf('week').format('YYYY-MM-DD'));
+const weekEndDate = ref<string | null>(dayjs().locale('en').subtract(1, 'week').endOf('week').format('YYYY-MM-DD'));
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const monthlyDataTime = ref([
@@ -134,12 +133,12 @@ const weekDisabledDate = (time: Date) => {
 function setDefaultDate() {
   dateRange.value = [
     dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
-    dayjs().endOf('day').format('YYYY-MM-DD')
+    dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
   ];
-  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(new Date().getFullYear(), new Date().getMonth() + 1, 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
+  startWeek.value = dayjs().locale('en').subtract(5, 'week').startOf('week').format('YYYY-MM-DD');
+  endWeek.value = dayjs().locale('en').subtract(1, 'week').endOf('week').format('YYYY-MM-DD');
+  const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 5, 1);
+  const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 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/tableData/mainData.vue

@@ -49,7 +49,7 @@ const gridOptions = reactive({
   id: 'mainDataCustomStorage',
   columnConfig: {
     resizable: true,
-    //isCurrent: true,
+    isCurrent: true,
   },
   rowConfig: {
     isHover: true,
@@ -335,13 +335,15 @@ function updateDataChange(newId) {
 }
 
 //以下是表格样式
-const cellStyle = ({ columnIndex }) => {
-  if (columnIndex < 6) {
+const cellStyle = (row) => {
+  if (row.$rowIndex === 0 && row.$columnIndex < 5) {
     return {
+      position: 'sticky',
+      top: 0,
+      zIndex: 30,
       fontSize: '12px',
-      fontWeight: '500',
-    };
-  }
+      fontWeight: '600',
+    }}
   return {
     fontSize: '12px',
     fontWeight: '500',
@@ -365,6 +367,17 @@ const cellStyleHandler = ({ column }) => {
   return { fontSize: '12px' };
 };
 
+const rowStyle = (row) => {
+  if (row.$rowIndex === 0) {
+    return{
+      background: '#ffffff',
+      position:'sticky',
+      top: 0,
+      zIndex: 1,
+    }
+  }
+}
+
 function formatEmptyCell({ cellValue }) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
@@ -396,7 +409,7 @@ onMounted(() => {
     </el-card>
     <el-card class="mt-3">
       <slot name="table-header"></slot>
-      <vxe-grid :cell-style="cellStyle" :header-cell-style="cellStyleHandler" v-bind="gridOptions"
+      <vxe-grid :cell-style="cellStyle" :header-cell-style="cellStyleHandler" :row-style="rowStyle" v-bind="gridOptions"
                 v-on="gridEvents" @sort-change="handleSortChange">
         <template #toolbar_buttons>
           <div class="mx-3.5">

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

@@ -37,6 +37,7 @@ const gridOptions = reactive({
     }
   },
   columnConfig: {
+    isCurrent: true,
     resizable: true,
   },
   rowConfig: {

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

@@ -18,13 +18,13 @@ const dateType = inject<Ref>('dateDimension');
 
 const dateRange = ref( [
   dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
-  dayjs().endOf('day').format('YYYY-MM-DD')
+  dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
 ]);
 
 const startWeek = ref(null);
 const endWeek = ref(null);
-const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(2, 'week').startOf('week').format('YYYY-MM-DD'));
-const weekEndDate = ref<string | null>(dayjs().locale('en').endOf('week').format('YYYY-MM-DD'));
+const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(5, 'week').startOf('week').format('YYYY-MM-DD'));
+const weekEndDate = ref<string | null>(dayjs().locale('en').subtract(1, 'week').endOf('week').format('YYYY-MM-DD'));
 
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
@@ -139,19 +139,18 @@ function setDefaultDate() {
     case 'day':
       dateRange.value = [
         dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
-        dayjs().endOf('day').format('YYYY-MM-DD')
+        dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
       ];
       dateChange();
-       //console.log(dateRange.value);
       break;
     case 'week':
-      startWeek.value = dayjs().locale('en').subtract(2, 'week').startOf('week').format('YYYY-MM-DD');
-      endWeek.value = dayjs().locale('en').endOf('week').format('YYYY-MM-DD');
+      startWeek.value = dayjs().locale('en').subtract(5, 'week').startOf('week').format('YYYY-MM-DD');
+      endWeek.value = dayjs().locale('en').subtract(1, 'week').endOf('week').format('YYYY-MM-DD');
       dateChange();
       break;
     case 'month':
-      const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
-      const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
+      const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 5, 1);
+      const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 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

@@ -51,6 +51,7 @@ const gridOptions = reactive({
     }
   },
   columnConfig: {
+    isCurrent: true,
     resizable: true,
   },
   rowConfig: {
@@ -328,7 +329,15 @@ function formatEmptyCell({ cellValue }) {
   return cellValue;
 }
 
-const cellStyle = () => {
+const cellStyle = (row) => {
+  if (row.$rowIndex === 0 && row.$columnIndex < 5) {
+    return {
+      position: 'sticky',
+      top: 0,
+      zIndex: 30,
+      fontSize: '12px',
+      fontWeight: '600',
+    }}
   return {
     fontSize: '12px',
     fontWeight: '600',
@@ -341,6 +350,17 @@ const headerCellStyle = () => {
   };
 };
 
+const rowStyle = (row) => {
+  if (row.$rowIndex === 0) {
+    return{
+      background: '#def6fe',
+      position:'sticky',
+      top: 0,
+      zIndex: 1,
+    }
+  }
+}
+
 watch([() => props.taskIds, currentDate], async ([newTaskIds, newCurrentDate]) => {
   sortStatus.value = true;
 
@@ -372,7 +392,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle"
+    <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" :row-style="rowStyle"
               stripe
               v-bind="currentGridOptions" v-on="gridEvents" @sort-change="handleSortChange">
       <template #toolbar_buttons>