🎨 style<报表管理格式修改>:

src/views/reportManage/TaskManage/index.vue

@@ -682,10 +682,10 @@ onMounted(() => {
         <el-input v-model="taskRuleForm.ipaddress" placeholder="请输入IP地址" />
       </el-form-item>
       <el-form-item label="注册公司" prop="company">
-        <el-input v-model="taskRuleForm.company" placeholder="请输入" />
+        <el-input v-model="taskRuleForm.company" placeholder="请输入注册公司" />
       </el-form-item>
       <el-form-item label="平台" prop="platform">
-        <el-input v-model="taskRuleForm.platform" placeholder="请输入" />
+        <el-input v-model="taskRuleForm.platform" placeholder="请输入平台" />
       </el-form-item>
     </el-form>
     <template #footer>

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

@@ -101,7 +101,7 @@ async function fetchMainData(taskIds, resetPage = false) {
       const dynamicColumns = [];
       const regex1 = /\d{2}-\d{2}/;
       const regex2 = /\d{4}-\d{2}-\d{2}/;
-      const regex3 = /\d{4}-\d{2}/
+      const regex3 = /\d{4}-\d{2}/;
       const middleKeywords = ['~', '截止', '近90天平台退货率', '余额'];
 
       const allColumns = new Set();
@@ -125,18 +125,16 @@ async function fetchMainData(taskIds, resetPage = false) {
         const column = {
           field: key,
           title: key, // 使用字段名作为列标题
-          minWidth: key.includes('~') ? 90 : key.includes('截止')? 90 :regex2.test(key) ? 83 : 74,
+          minWidth: key.includes('~') ? 90 : key.includes('截止') ? 90 : regex2.test(key) ? 83 : 74,
           align: 'center',
           formatter: formatEmptyCell,
           sortable: isSortable,
         };
         if (middleKeywords.some(kw => key.includes(kw))) {
           middleColumns.push(column);
-        }
-        else if (regex3.test(key) &&!regex2.test(key)) {
+        } else if (regex3.test(key) && !regex2.test(key)) {
           lastColumns.push(column);
-        }
-        else if (regex1.test(key)) {
+        } else if (regex1.test(key)) {
           firstColumns.push(column);
         }
       });
@@ -157,33 +155,38 @@ async function fetchMainData(taskIds, resetPage = false) {
   }
 }
 
-function handleSortChange({ column, order }) {
+function handleSortChange({column, order}) {
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
   const sortField = column.field;
   if (sortField) {
     const match = sortField.match(/(\d{4}-\d{2}-\d{2})的销售额/);
     const matchRange = sortField.match(/(\d{4}-\d{2}-\d{2})~(\d{4}-\d{2}-\d{2})的销售额/);
     const matchMonth = sortField.match(/(\d{4}-\d{2})的销售额/);
-    if(matchRange){
+    if (matchRange) {
       order_date.value = matchRange[1];
       dateType.value = 'week';
     } else if (match) {
       order_date.value = match[1];
       dateType.value = 'day';
-    }else if (matchMonth) {
+    } else if (matchMonth) {
       order_date.value = `${matchMonth[1]}-01`;
       dateType.value = 'month';
     }
   }
-  fetchMainData(props.taskIds,true);
+  fetchMainData(props.taskIds, true);
 }
 
 // 监测 taskIds 变化
 watch(() => props.taskIds, (newTaskIds) => {
-  fetchMainData(newTaskIds, true)
+  fetchMainData(newTaskIds, true);
 });
 
-// 监测 dayDate 变化
+function clearSorting() {
+  sortOrder.value = '';
+  order_date.value = '';
+  dateType.value = '';
+}
+
 watch(() => props.dayDate, (newDayDate) => {
   if (newDayDate) {
     //console.log('newDayDate',newDayDate);
@@ -191,19 +194,21 @@ watch(() => props.dayDate, (newDayDate) => {
     dayStartDate.value = dailyStartDate;
     dayEndDate.value = dailyTime;
   }
+  clearSorting();
 });
 
-// 监测 weekDate 变化
+
 watch(() => props.weekDate, (newWeekDate) => {
   if (newWeekDate) {
     //console.log('newWeekDate',newWeekDate);
     const {weekStartDate, weekEndDate} = newWeekDate;
     weekStart.value = weekStartDate;
     weekEnd.value = weekEndDate;
-    fetchMainData(props.taskIds)
+    fetchMainData(props.taskIds);
   }
+  clearSorting();
 });
-// 监测 monthDate 变化
+
 watch(() => props.monthDate, (newMonthDate) => {
   if (newMonthDate) {
     //console.log('newMonthDate',newMonthDate);
@@ -211,6 +216,7 @@ watch(() => props.monthDate, (newMonthDate) => {
     monthStartDate.value = startDate;
     monthEndDate.value = endDate;
   }
+  clearSorting();
 });
 
 const cellStyle = () => {
@@ -265,7 +271,7 @@ async function handleExport() {
   }
 }
 
-function formatEmptyCell({ cellValue }) {
+function formatEmptyCell({cellValue}) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
   }
@@ -289,13 +295,13 @@ function formatEmptyCell({ cellValue }) {
       </div>
     </template>
     <template #platformNumber_default="{ row }">
-      <div class="font-semibold">{{ row.platformNumber}}</div>
+      <div class="font-semibold">{{ row.platformNumber }}</div>
     </template>
     <template #platformName_default="{ row }">
-      <div class="font-semibold" style="color: #0097f8">{{ row.platformName}}</div>
+      <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
     </template>
     <template #currencyCode_default="{ row }">
-      <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode}}</el-tag>
+      <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode }}</el-tag>
     </template>
   </vxe-grid>
 </template>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { defineProps, onMounted, reactive, ref, watch, inject, Ref } from 'vue';
 import { getMainData, getMonthlyData } from '/@/views/reportManage/dataCenter/api';
 import { universal } from '../../../utils/columns';
@@ -115,10 +115,10 @@ async function fetchMonthlyData(taskIds, resetPage = false) {
 }
 
 watch(() => props.taskIds, (newTaskIds) => {
-  fetchMonthlyData(newTaskIds,true);
+  fetchMonthlyData(newTaskIds, true);
 });
 
-function formatEmptyCell({ cellValue }) {
+function formatEmptyCell({cellValue}) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
   }
@@ -132,34 +132,31 @@ function formatEmptyCell({ cellValue }) {
   return cellValue;
 }
 
-const cellStyle =() => {
+const cellStyle = () => {
   return {
     fontSize: '12px',
     fontWeight: '500',
   };
-}
+};
 
-const headerCellStyle =() => {
+const headerCellStyle = () => {
   return {
-    fontSize: '12px', // 调整为你想要的字体大小
+    fontSize: '12px',
   };
-}
-
-onMounted(() => {
+};
 
-});
 </script>
 
 <template>
-  <vxe-grid v-bind="gridOptions" v-on="gridEvents" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
+  <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>
+      <div class="font-semibold">{{ row.platformNumber }}</div>
     </template>
     <template #platformName_default="{ row }">
-      <div class="font-semibold" style="color: #0097f8">{{ row.platformName}}</div>
+      <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
     </template>
     <template #currencyCode_default="{ row }">
-      <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode}}</el-tag>
+      <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode }}</el-tag>
     </template>
   </vxe-grid>
 </template>

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

@@ -81,9 +81,9 @@ const currentGridOptions = computed(() => {
   return {
     ...gridOptions,
     ...selectedGridOptions,
-    //columns: dateType.value === 'day' ? dayDataColumns.value : selectedGridOptions.columns
   };
 });
+
 // 分页
 const gridEvents = {
   pageChange({currentPage, pageSize}) {
@@ -190,22 +190,22 @@ function fetchCurrentData(taskIds, resetPage = false) {
   }
 }
 
-function handleSortChange({ column, order }) {
+function handleSortChange({column, order}) {
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
   const sortField = column.field;
   if (sortField) {
     const match = sortField.match(/(\d{4}-\d{2}-\d{2})的销售额/);
     const matchRange = sortField.match(/(\d{4}-\d{2}-\d{2})~(\d{4}-\d{2}-\d{2})的销售额/);
     const matchMonth = sortField.match(/(\d{4}-\d{2})的销售额/);
-    if(matchRange){
+    if (matchRange) {
       order_date.value = matchRange[1];
     } else if (match) {
       order_date.value = match[1];
-    }else if (matchMonth) {
+    } else if (matchMonth) {
       order_date.value = `${matchMonth[1]}-01`;
     }
   }
-  fetchCurrentData(props.taskIds,true);
+  fetchCurrentData(props.taskIds, true);
 }
 
 watch(() => props.taskIds, (newTaskIds) => {
@@ -221,7 +221,7 @@ const handleImport = () => {
   });
 };
 
-function formatEmptyCell({ cellValue }) {
+function formatEmptyCell({cellValue}) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
   }
@@ -240,22 +240,20 @@ const cellStyle = () => {
     fontSize: '12px',
     fontWeight: '500',
   };
-}
+};
 
 const headerCellStyle = () => {
   return {
     fontSize: '12px',
   };
-}
+};
 
-onMounted(() => {
-  // fetchCurrentData(props.taskIds);
-});
 </script>
 
 <template>
   <div>
-    <vxe-grid :header-cell-style="headerCellStyle" :cell-style="cellStyle" v-bind="currentGridOptions" v-on="gridEvents" stripe @sort-change="handleSortChange">
+    <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="currentGridOptions"
+              v-on="gridEvents" @sort-change="handleSortChange">
       <template #toolbar_buttons>
         <vxe-button icon="vxe-icon-add" status="primary" @click="handleImport">数据录入</vxe-button>
       </template>
@@ -263,10 +261,10 @@ onMounted(() => {
         <div class="font-semibold">{{ row.platformNumber }}</div>
       </template>
       <template #platformName_default="{ row }">
-        <div class="font-semibold" style="color: #0097f8">{{ row.platformName}}</div>
+        <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
       </template>
       <template #currencyCode_default="{ row }">
-        <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode}}</el-tag>
+        <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode }}</el-tag>
       </template>
     </vxe-grid>
   </div>
@@ -276,6 +274,7 @@ onMounted(() => {
 .vxe-grid {
   border-radius: 10px;
 }
+
 :deep(.vxe-table--header .vxe-header--row th .vxe-cell,
 .vxe-table--body .vxe-body--row td .vxe-cell) {
   padding-left: 5px !important;

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

@@ -698,18 +698,18 @@ function handleClose(done: Function) {
   done();
 }
 
-const cellStyle =() => {
+const cellStyle = () => {
   return {
     fontSize: '13px',
     fontWeight: '500',
   };
-}
+};
 
-const headerCellStyle =() => {
+const headerCellStyle = () => {
   return {
     fontSize: '13px',
   };
-}
+};
 
 onMounted(() => {
   setDefaultDate();
@@ -781,7 +781,8 @@ onMounted(() => {
   </div>
   <el-card class="mx-8">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" stripe v-bind="currentGridOptions" v-on="gridEvents" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
+      <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="currentGridOptions"
+                v-on="gridEvents">
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
             <el-button link size="small" @click="clearRowEvent(row)">取消</el-button>
@@ -790,7 +791,9 @@ onMounted(() => {
           <template v-else>
             <el-button :disabled="!row.id" link size="small" type="success" @click="handelEditRow(row)">修改</el-button>
           </template>
-          <el-button v-if="!hasActiveEditRow(row)" :disabled="row.id" link size="small" type="primary" @click="editEvent(row)">创建</el-button>
+          <el-button v-if="!hasActiveEditRow(row)" :disabled="row.id" link size="small" type="primary"
+                     @click="editEvent(row)">创建
+          </el-button>
         </template>
         <template #sales_original_edit="{ row }">
           <vxe-input v-model="row.sales_original"></vxe-input>
@@ -840,7 +843,8 @@ onMounted(() => {
       </vxe-grid>
     </div>
   </el-card>
-  <el-dialog v-model="dayFormVisible" style="border-radius: 10px;" title="创建任务" width="600" :before-close="handleClose">
+  <el-dialog v-model="dayFormVisible" :before-close="handleClose" style="border-radius: 10px;" title="创建任务"
+             width="600">
     <el-form
         ref="taskDataFormRef"
         :model="taskDataForm"

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

@@ -87,7 +87,7 @@ onBeforeUnmount(() => {
     </el-card>
   </div>
   <div class="px-3.5">
-    <el-card >
+    <el-card>
       <TableSelect :taskIds="taskIds"></TableSelect>
     </el-card>
   </div>

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

@@ -245,120 +245,10 @@ export const universal = [
 // 表格展示
 export const dayDataColumns = ref([
   ...universal
-  //{field: 'currencyCodePlatform', title: '回款/余额币种', fixed: 'left', minWidth: 112},
-  //{field: 'sales_original', title: '销售额(本币)', width: 104,},
-  //{field: 'ad_sales_original', title: '广告销售额(本币)', width: 132,},
-  //{field: 'ad_cost_original', title: '广告花费(本币)', width: 116,},
-  // {field: 'sales', title: '销售额'},
-  // {field: 'sales_year_on_year', title: '期末同比变化'},
-  // {field: 'sales_monthly_year_on_year', title: '期末环比变化'},
-  // {field: 'ad_cost', title: '广告花费'},
-  // {field: 'ad_sales', title: '广告销售额'},
-  // {field: 'roi', title: '广告ROI'},
-  // {field: 'acos', title: '广告ACOS'},
-  // {field: 'roas', title: '广告ROAS'},
 ]);
 export const weekDataColumns = ref([
   ...universal
-
-  //{field: 'sales_original', title: '销售额(本币)', width: 104,},
-  //{field: 'ad_sales_original', title: '广告销售额(本币)', width: 132,},
-  //{field: 'ad_cost_original', title: '广告花费(本币)', width: 116,},
-  //{
-  //  field: 'money_by_amazon_original',
-  //  title: 'Amazon回款金额(本币)',
-  //  width: 120
-  //},
-  //{
-  //  field: 'money_by_other_original',
-  //  title: 'Other回款金额(本币)',
-  //  width: 120
-  //},
-  //{field: 'sales', title: '销售额', width: 120},
-  //{field: 'ad_cost', title: '广告花费', width: 120},
-  //{field: 'ad_sales', title: '广告销售额', width: 120},
-  //{field: 'roi', title: '广告ROI', width: 120},
-  //{field: 'acos', title: '广告ACOS', width: 120},
-  //{field: 'roas', title: '广告ROAS', width: 120},
-  //{field: 'impression', title: '广告曝光', width: 120},
-  //{field: 'ad_click', title: '广告点击', width: 120},
-  //{field: 'ad_order', title: '广告订单', width: 120},
-  //{field: 'ad_conversion_rate', title: '广告转化率', width: 120},
-  //{field: 'money_by_amazon', title: 'Amazon回款金额', width: 120},
-  //{field: 'money_by_other', title: 'Ebay及其他平台可用余额', width: 120},
-  //{field: 'currencyCode', title: '回款币种', width: 120},
-  //{field: 'total_sales_current_monthly', title: '销售额完成情况', width: 120},
-  //{field: 'sales_weekly_year_on_year', title: '环比上周增长率', width: 120},
-  //{field: 'sales_monthly_year_on_year', title: '环比上月周增长率', width: 120},
-  //{field: 'sales_year_on_year', title: '环比上年周增长率', width: 120},
-  //{field: 'session', title: '流量', width: 120},
-  //{field: 'ad_order', title: '广告订单', width: 120},
-  //{field: 'order', title: '订单', width: 120},
-  //{field: 'availableSalesDay', title: '当前存货可售天', width: 120},
-  //{field: 'intransitInventory', title: '当前在途库存', width: 120},
-  //{field: 'overseasStorage', title: '当前海外仓库存', width: 120},
-  //{field: 'refundRate', title: '最近90天平台退货率', width: 120},
 ]);
 export const monthDataColumns = ref([
   ...universal
-  //{field: 'currencyCodePlatform', title: '回款/余额币种', fixed: 'left', minWidth: 112},
-  //{field: 'sales', title: '销售额'},
-  //{field: 'ad_cost', title: '广告花费'},
-  //{field: 'ad_sales', title: '广告销售额'},
-  //{field: 'roi', title: '广告ROI'},
-  //{field: 'acos', title: '广告ACOS'},
-  //{field: 'roas', title: '广告ROAS'},
-  //{field: 'impression', title: '广告曝光',},
-  //{field: 'ad_click', title: '广告点击',},
-  //{field: 'ad_order', title: '广告订单',},
-  //{field: 'ad_conversion_rate', title: '广告转化率',},
-  //{field: 'total_sales_current_monthly', title: '销售额完成情况',},
 ]);
-
-// export const mainColumns = ref([
-//   {field: 'platformNumber', title: '平台编号',fixed:"left",width: 90},
-//   {field: 'platformName', title: '平台名称',fixed:"left",width: 90},
-//   {field: 'country', title: '国家',fixed:"left",width: 90},
-//   {field: 'user_name', title: '运营'},
-//   {field: 'brandName', title: '品牌',fixed:"left",width: 90},
-//   //需增加日销售额
-//   {field: 'sales_monthly_year_on_year_day', title: '销售额期末月同比'},
-//   {field: 'sales_year_on_year_day', title: '销售额期末年同比'},
-//
-//   {field: 'ad_cost_day', title: '日广告花费'},
-//   {field: 'ad_sales_day', title: '日广告销售额'},
-//   {field: 'roi_day', title: '日广告ROI'},
-//
-//   {field: 'total_sales_current_monthly', title: '月份销售额完成情况'},
-//   {field: 'sales_weekly_year_on_year', title: '环比上周增长率'},
-//   {field: 'sales_monthly_year_on_year_week', title: '环比上月周增长率'},
-//   {field: 'sales_year_on_year', title: '同比上年周增长率'},
-//   {field: 'money_by_amazon', title: 'Amazon平台已回款金额'},
-//   {field: 'currencyCode', title: '回款币种'},
-//   {field: 'money_by_other', title: 'Ebay及其他平台可用余额'},
-//   // // { field: 'session', title: '周流量'},
-//   // {field: 'ad_order', title: '订单'},
-//   {field: 'availableSalesDay', title: '当前存货可售天'},
-//   {field: 'intransitInventory', title: '当前在途库存'},
-//   {field: 'overseasStorage', title: '当前海外仓库存'},
-//   {field: 'refundRate', title: '最近90天平台退货率'},
-//   //需增加周广告花费,销售额等
-//   {field: 'ad_cost_week', title: '周广告花费'},
-//   {field: 'ad_sales_week', title: '周广告销售额'},
-//   {field: 'acos_week', title: '周广告ACOS'},
-//   {field: 'roas_week', title: '周广告ROAS'},
-//   {field: 'roi_week', title: '周广告ROI'},
-//   {field: 'impression_week', title: '周广告曝光'},
-//   {field: 'ad_order_week', title: '周广告订单'},
-//   {field: 'ad_click_week', title: '周广告点击'},
-//   {field: 'ad_click_rate_week', title: '周广告转化率'},
-//   {field: 'ad_cost', title: '月广告费用'},
-//   {field: 'ad_sales', title: '月广告销售额'},
-//   {field: 'acos', title: '月ACOS'},
-//   {field: 'roas', title: '月ROAS'},
-//   {field: 'roi', title: '月广告ROI'},
-//   {field: 'impression_month', title: '月广告曝光'},
-//   {field: '', title: '月广告订单'},
-//   {field: 'ad_click_month', title: '月广告点击'},
-//   {field: 'ad_conversion_rate_month', title: '月广告转化率'},
-// ])

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

@@ -1,40 +1,40 @@
-import dayjs, { Dayjs } from 'dayjs'
-import { unref } from 'vue'
-import XEUtils from 'xe-utils'
+import dayjs, { Dayjs } from 'dayjs';
+import { unref } from 'vue';
+import XEUtils from 'xe-utils';
 
 export function buildChartOpt(option: any, metrics: any[]) {
-  const tmp: any = {}
+  const tmp: any = {};
   const opt: any = {
-    legend: { selected: {} },
+    legend: {selected: {}},
     yAxis: [],
     series: [],
-  }
+  };
   for (const info of metrics) {
-    tmp[info.color] = info
+    tmp[info.color] = info;
   }
   for (const info of option.series) {
-    const color = info.itemStyle.color
-    const metricInfo = tmp[color]
+    const color = info.itemStyle.color;
+    const metricInfo = tmp[color];
     if (metricInfo) {
       opt.series.push({
         id: info.id,
         name: metricInfo.label,
-        encode: { y: metricInfo.metric },
-      })
-      opt.yAxis.push({ id: info.id, name: metricInfo.label, show: true })
+        encode: {y: metricInfo.metric},
+      });
+      opt.yAxis.push({id: info.id, name: metricInfo.label, show: true});
     } else {
-      opt.yAxis.push({ id: info.id, show: false })
+      opt.yAxis.push({id: info.id, show: false});
     }
   }
   for (const label of Object.keys(option.legend.selected)) {
     if (XEUtils.findIndexOf(metrics, (info) => info.label === label) === -1) {
-      opt.legend.selected[label] = false
+      opt.legend.selected[label] = false;
     } else {
-      opt.legend.selected[label] = true
+      opt.legend.selected[label] = true;
     }
   }
   //console.log(opt)
-  return opt
+  return opt;
 }
 
 export function parseQueryParams(body: any) {
@@ -63,18 +63,19 @@ export function parseQueryParams(body: any) {
   }
   return ret;
 }
+
 export function monthlyQueryParams(body: any) {
-  const date: any = {}
+  const date: any = {};
   for (const key in body) {
-    const val = unref(body[key])
+    const val = unref(body[key]);
     if (key === 'monthCurrentDate') {
-        date['month_start_date'] = val.startDate
-        date['month_end_date'] = val.endDate
+      date['month_start_date'] = val.startDate;
+      date['month_end_date'] = val.endDate;
     } else if (key === 'taskIds') {
       date['task_ids'] = val; // 将 task_ids 直接赋给返回对象的属性
-    }else {
-      date[key] = val
+    } else {
+      date[key] = val;
     }
   }
-  return date
+  return date;
 }