feat<数据中心>: 图表y轴修改

src/views/reportManage/TaskManage/index.vue

@@ -569,7 +569,6 @@ async function sendMessage(selectedValue: string) {
     date_type: selectedValue,
   };
   try {
-    console.log('body', body);
     const response = await postSendMessage(body);
     if (response.code === 2000) {
       ElMessage.success('发送成功');

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

@@ -1,350 +0,0 @@
-<template>
-  <div v-loading="loading">
-    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
-    <el-radio-group v-model="statDim" class="chart-button-group" @change="changeStatDim">
-      <el-radio-button label="day">日</el-radio-button>
-      <el-radio-button label="week" :disabled="!props.fetchLineWeek">周</el-radio-button>
-      <el-radio-button label="month" :disabled="!props.fetchLineWeek">月</el-radio-button>
-    </el-radio-group>
-    <div style="height: 350px" ref="chartRef"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import * as echarts from 'echarts';
-import { Ref, computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { dayMetricsEnum, weekMetricsEnum, monthMetricsEnum} from '/src/views/reportManage/dataCenter/utils/enum'
-import XEUtils from 'xe-utils';
-import emitter from '/src/utils/emitter';
-import { buildChartOpt, parseQueryParams } from '/src/views/reportManage/dataCenter/utils/tools';
-
-defineOptions({
-  name: 'DataTendencyChart',
-});
-
-interface Props {
-  fetchCard: Function;
-  fetchCardWeek?: Function;
-  fetchCardMonth?: Function;
-  fetchLine: Function;
-  fetchLineMonth?: Function;
-  fetchLineWeek?: Function;
-  query: { [key: string]: any };
-  initMetric?: ShowMetric[];
-  metricEnum?: { [key: string]: string }[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  initMetric: () => [
-    {metric: 'sales', color: '#0085ff', label: '销售额'},
-    {metric: 'ad_cost', color: '#3fd4cf', label: '广告花费'},
-    {metric: 'ad_sales', color: '#ff9500', label: '广告销售额'},
-  ],
-  metricEnum: () => dayMetricsEnum,
-});
-
-const metrics = ref(props.initMetric);
-
-const metricsItems: Ref<MetricData[]> = ref([]);
-let chartObj: any;
-const chartRef = ref();
-const statDim = ref('day');
-const option: any = {
-  dataset: {
-    source: [],
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985',
-      },
-    },
-  },
-  legend: {
-    selected: {}, // 控制显隐
-    show: false,
-  },
-  grid: {
-    top: 50,
-    right: 150,
-    bottom: 30,
-    left: 65,
-  },
-  xAxis: {
-    type: 'category',
-  },
-  yAxis: [
-    {
-      id: 0,
-      type: 'value',
-      name: '',
-      splitLine: {
-        show: true, // 设置显示分割线
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {color: ''},
-      },
-      show: true,
-    },
-    {
-      id: 1,
-      type: 'value',
-      name: '',
-      position: 'right',
-      splitLine: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '',
-        },
-      },
-      show: true,
-    },
-    {
-      id: 2,
-      type: 'value',
-      position: 'right',
-      offset: 90,
-      name: '',
-      splitLine: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '',
-        },
-      },
-      show: true,
-    },
-  ],
-  series: [
-    {
-      id: 0,
-      name: '',
-      type: 'bar',
-      encode: {
-        x: 'data_datetime',
-        y: '',
-      },
-      barWidth: '18px',
-      yAxisIndex: 0,
-      itemStyle: {
-        color: '',
-        borderRadius: 4,
-      },
-    },
-    {
-      id: 1,
-      name: '',
-      type: 'line',
-      encode: {
-        x: 'data_datetime',
-        y: '',
-      },
-      symbolSize: 6,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 1,
-      itemStyle: {
-        // color: '#ff9500',
-        // borderColor: '#ff9500'
-      },
-      areaStyle: {
-        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //   { offset: 0, color: '#3fd4cf53' },
-        //   { offset: 1, color: '#3fd4cf03' },
-        // ]),
-      },
-      emphasis: {
-        focus: 'series',
-      },
-    },
-    {
-      id: 2,
-      name: '',
-      type: 'line',
-      encode: {
-        x: 'data_datetime',
-        y: '',
-      },
-      symbolSize: 6,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 2,
-      itemStyle: {},
-      areaStyle: {},
-      emphasis: {
-        focus: 'series',
-      },
-    },
-  ],
-};
-const loading = ref(true);
-const queryParams = computed(() => parseQueryParams(props.query));
-
-onMounted(() => {
-  getMetricsItems();
-  addResize();
-  // initLine()
-  setTimeout(() => {
-    initLine();
-  }, 0);
-});
-onBeforeUnmount(() => {
-  if (chartObj) {
-    chartObj.dispose();
-    chartObj = null;
-  }
-  removeResize();
-});
-
-//初始化图表
-const initLine = async () => {
-  chartObj = echarts.init(chartRef.value);
-  const items = await getDataset();
-  option.dataset.source = items;
-
-  XEUtils.arrayEach(option.series, (info: any, index) => {
-    const color = metrics.value[index].color;
-    info.name = metrics.value[index].label;
-    info.encode.y = metrics.value[index].metric;
-    if (info.type === 'bar') {
-      info.itemStyle.color = color;
-    } else {
-      info.itemStyle = {color: color, borderColor: color};
-      info.areaStyle = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {offset: 0, color: color + '53'},
-          {offset: 1, color: color + '03'},
-        ]),
-      };
-    }
-  });
-  XEUtils.arrayEach(option.yAxis, (info: any, index) => {
-    info.name = metrics.value[index].label;
-    info.axisLine.lineStyle.color = metrics.value[index].color;
-  });
-
-  XEUtils.arrayEach(props.metricEnum, (info) => {
-    option.legend.selected[info.label] = false;
-  });
-  for (const info of metrics.value) {
-    option.legend.selected[info.label] = true;
-  }
-  // console.log(option)
-  chartObj.setOption(option);
-  loading.value = false;
-};
-
-//条形图数据
-const getDataset = async () => {
-  if (statDim.value === 'week') {
-    if (props.fetchLineWeek) {
-      const resp = await props.fetchLineWeek(queryParams.value);
-      // console.log('week',resp.data);
-      return resp.data;
-    }
-  } else if (statDim.value === 'month') {
-    if (props.fetchLineMonth) {
-      const resp = await props.fetchLineMonth(queryParams.value);
-      // console.log('month',resp.data);
-      return resp.data;
-    }
-  } else {
-    const resp = await props.fetchLine(queryParams.value);
-    return resp.data;
-  }
-};
-
-//卡片数据
-const getMetricsItems = async () => {
-  let resp;
-  if (statDim.value === 'week' && props.fetchCardWeek) {
-    resp = await props.fetchCardWeek(queryParams.value);
-  } else if (statDim.value === 'month' && props.fetchCardMonth) {
-    resp = await props.fetchCardMonth(queryParams.value);
-  } else if (props.fetchCard) {
-    resp = await props.fetchCard(queryParams.value);
-  }
-  const data = resp.data;
-  // console.log('卡片数据', data);
-  metricsItems.value.length = 0;
-  XEUtils.arrayEach(props.metricEnum, (info) => {
-    // console.log('info', info);
-    const tmp: MetricData = {
-      label: info.label,
-      value: info.value,
-      metricVal: data[info.value],
-      gapVal: data[`gap${info.value}`],
-      preVal: data[`prev${info.value}`],
-    };
-    // console.log('122', tmp);
-    metricsItems.value.push(tmp);
-  });
-};
-
-//更新图表的选项
-const changeMetric = () => {
-  const opt = buildChartOpt(option, metrics.value);
-  chartObj.setOption(opt);
-};
-
-//根据日,周,月更新图表
-const emit = defineEmits(['changeStatDim']);
-const changeStatDim = async () => {
-  // emitter.emit('DateTendency-changeStatDim') // 触发DataTable的loading
-  emitter.emit('DateTendency-dateChange', statDim.value);
-  loading.value = true;
-  let source = await getDataset();
-  if (source.length > 0) {
-    chartObj.setOption({dataset: {source: source}});
-  }
-  await getMetricsItems();
-  loading.value = false;
-  emit('changeStatDim', source); // 向父组件传递数据后再传递给DataTable
-};
-
-//监测dataRange的变化
-watch(props.query, async () => {
-  // console.log("------watch-----queryParams", props.query)
-  emitter.emit('DateTendency-changeStatDim'); // 触发DataTable的loading
-  loading.value = true;
-  await getMetricsItems();
-  const items = await getDataset();
-  emit('changeStatDim', items); // 向父组件传递数据后再传递给DataTable
-  const opt = {dataset: {source: items}};
-  chartObj.setOption(opt);
-  loading.value = false;
-});
-
-const resizeChart = () => {
-  chartObj.resize();
-};
-const addResize = () => {
-  window.addEventListener('resize', resizeChart);
-};
-const removeResize = () => {
-  window.removeEventListener('resize', resizeChart);
-};
-</script>
-
-<style scoped>
-.metrics-cards {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-  width: 100%;
-}
-
-.chart-button-group {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 5px;
-}
-</style>

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

@@ -177,10 +177,23 @@ onBeforeUnmount(() => {
   removeResize();
 });
 
+//初始化y轴
+function initYAxis() {
+  option.yAxis = metrics.value.map((metric, index) => ({
+    id: index,
+    name: metric.label,
+    type: 'value',
+    position: index === 0 ? 'left' : 'right',
+    offset: index > 1 ? (index - 1) * 80 : 0,
+    axisLine: { show: true, lineStyle: { color: metric.color } },
+    splitLine: { show: index === 0 },
+    show: true,
+  }));
+}
+
 async function initLine() {
   chartObj = echarts.init(chartRef.value);
   option.dataset.source = await getDataset();
-
   // 初始化系列和 y 轴
   option.series = metrics.value.map((metric, index) => ({
     id: index,
@@ -188,30 +201,17 @@ async function initLine() {
     type: index === 0 ? 'bar' : 'line',
     encode: { x: 'data_datetime', y: metric.metric },
     yAxisIndex: index,
-    itemStyle: { color: option.series.type == 'bar' ? '#0085ff' : metric.color, borderRadius: [6, 6, 6, 6] },
+    itemStyle: { color: index === 0 ? '#0085ff' : metric.color, borderRadius: [6, 6, 6, 6] },
     lineStyle: { color: metric.color },
     barWidth: '16px',
-    areaStyle:
-        index !== 0
-            ? {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: metric.color + '53' },
-                { offset: 1, color: metric.color + '03' },
-              ]),
-            }
-            : undefined,
-  }));
-
-  option.yAxis = metrics.value.map((metric, index) => ({
-    id: index,
-    name: metric.label,
-    type: 'value',
-    position: index === 0 ? 'left' : 'right',
-    offset: index > 1 ? (index - 1) * 80 : 0,
-    axisLine: { show: true, lineStyle: { color: metric.color } },
-    splitLine: { show: index === 0, },
-    show: true,
+    areaStyle: index !== 0 ? {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: metric.color + '53' },
+        { offset: 1, color: metric.color + '03' },
+      ]),
+    } : undefined,
   }));
+  initYAxis();
 
   // 初始化图例
   option.legend.selected = props.metricEnum.reduce((acc: any, metric) => {
@@ -220,6 +220,36 @@ async function initLine() {
   }, {});
 
   chartObj.setOption(option);
+
+  // 获取所有 y 轴的刻度标签
+  if (statDim.value !== 'week') {
+    const salesLabels = ['销售额', '上年销售额', '上月销售额'];
+    let commonMin = Infinity;
+    let commonMax = -Infinity;
+
+    option.yAxis.forEach((yAxis, index) => {
+      if (salesLabels.includes(yAxis.name)) {
+        const yAxisModel = chartObj.getModel().getComponent('yAxis', index);
+        const [min, max] = yAxisModel.axis.scale.getExtent();
+        commonMin = Math.min(commonMin, min);
+        commonMax = Math.max(commonMax, max);
+      }
+    });
+
+    // 确保标题为 "销售额"、"上年销售额" 和 "上月销售额" 的 y 轴使用相同的刻度标签
+    option.yAxis.forEach((yAxis, index) => {
+      if (salesLabels.includes(yAxis.name)) {
+        option.yAxis[index] = {
+          ...yAxis,
+          min: commonMin,
+          max: commonMax,
+          interval: (commonMax - commonMin) / 5,
+        };
+      }
+    });
+    // 重新设置 option 以应用更改
+    chartObj.setOption(option, true);
+  }
   loading.value = false;
 }
 
@@ -317,10 +347,46 @@ function changeMetric() {
   }
 
   chartObj.setOption(option, true); // 使用 true 作为第二个参数，强制完全刷新
+
+  // 获取所有 y 轴的刻度标签
+  console.log('123', statDim.value);
+  if (statDim.value != 'week') {
+    const salesLabels = ['销售额', '上年销售额', '上月销售额'];
+    let commonMin = Infinity;
+    let commonMax = -Infinity;
+
+    option.yAxis.forEach((yAxis, index) => {
+      if (salesLabels.includes(yAxis.name)) {
+        const yAxisModel = chartObj.getModel().getComponent('yAxis', index);
+        const [min, max] = yAxisModel.axis.scale.getExtent();
+        commonMin = Math.min(commonMin, min);
+        commonMax = Math.max(commonMax, max);
+      }
+    });
+
+    // 确保标题为 "销售额"、"上年销售额" 和 "上月销售额" 的 y 轴使用相同的刻度标签
+    option.yAxis.forEach((yAxis, index) => {
+      if (salesLabels.includes(yAxis.name)) {
+        option.yAxis[index] = {
+          ...yAxis,
+          min: commonMin,
+          max: commonMax,
+          interval: (commonMax - commonMin) / 5,
+        };
+      }
+    });
+
+    // 重新设置 option 以应用更改
+    chartObj.setOption(option, true);
+
+  }
+  loading.value = false;
 }
 
 async function changeStatDim() {
   emitter.emit('DateTendency-dateChange', statDim.value);
+  initYAxis();
+  chartObj.setOption(option, true);
 }
 
 let initialized = false;
@@ -331,6 +397,8 @@ watch(props.query, async () => {
   }
   loading.value = true;
   await getMetricsItems();
+  initYAxis();
+  chartObj.setOption(option, true);
   await initLine();
   loading.value = false;
 });
@@ -339,8 +407,6 @@ watch(
     () => props.initMetric,
     (newVal) => {
       metrics.value = newVal;
-      //console.log('newVal', newVal);
-      //changeMetric();
     },
     { immediate: true }
 );

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

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import { reactive, ref, computed, inject, watch, onMounted, nextTick } from 'vue';
-import { VXETable, VxeGridInstance, VxeGridProps, VxeGridEvents } from 'vxe-table';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { VxeGridInstance, VXETable } from 'vxe-table';
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import {
   getDayTaskData,
+  getMonthTaskData,
+  getWeekTaskData,
   postCreateDayData,
+  postCreateMonthData,
   postCreateWeekData,
-  postCreateMonthData, getMonthTaskData, getWeekTaskData, postUpdateDayData, postUpdateWeekData, postUpdateMonthData
+  postUpdateDayData,
+  postUpdateMonthData,
+  postUpdateWeekData
 } from '/src/views/reportManage/dataCenter/api';
-import { dayColumns, weekColumns, monthColumns } from '../../utils/columns';
+import { dayColumns, monthColumns, weekColumns } from '../../utils/columns';
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
 import enLocale from 'element-plus/es/locale/lang/en';
 import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
@@ -89,8 +94,8 @@ const handleMonthChange = (value) => {
     const year = date.getFullYear();
     const month = date.getMonth() + 1; // getMonth() 返回值为 0-11，需要加 1
     const lastDay = new Date(year, month, 0).getDate();
-    startDate.value = `${year}-${String(month).padStart(2, '0')}-01`;
-    endDate.value = `${year}-${String(month).padStart(2, '0')}-${lastDay}`;
+    startDate.value = `${ year }-${ String(month).padStart(2, '0') }-01`;
+    endDate.value = `${ year }-${ String(month).padStart(2, '0') }-${ lastDay }`;
     fetchCurrentTaskData();
   } else {
     startDate.value = null;
@@ -98,9 +103,9 @@ const handleMonthChange = (value) => {
   }
 };
 
-const entryFormat = computed(() => `${entryStartDate.value} to ${entryEndDate.value}`);
-const adFormat = computed(() => `${adStartDate.value} to ${adEndDate.value}`);
-const monthlyEntryFormat = computed(() => `${startDate.value} to ${endDate.value}`);
+const entryFormat = computed(() => `${ entryStartDate.value } to ${ entryEndDate.value }`);
+const adFormat = computed(() => `${ adStartDate.value } to ${ adEndDate.value }`);
+const monthlyEntryFormat = computed(() => `${ startDate.value } to ${ endDate.value }`);
 
 const disabledDate = (time: Date) => {
   return time.getTime() > Date.now();
@@ -169,21 +174,21 @@ const resetForm = (formEl: FormInstance | undefined) => {
   formEl.resetFields();
 };
 const rules = reactive<FormRules>({
-  sales_original: [{required: true, message: '请输入销售额', trigger: 'blur'}],
-  ad_sales_original: [{required: true, message: '请输入广告销售额', trigger: 'blur'}],
-  ad_cost_original: [{required: true, message: '请输入广告花费', trigger: 'blur'}],
-  total_sales_current_monthly_original: [{required: true, message: '请输入当月销售额', trigger: 'blur'}],
-  impression: [{required: true, message: '请输入广告展示量', trigger: 'blur'}],
-  ad_click: [{required: true, message: '请输入广告点击量', trigger: 'blur'}],
-  ad_order: [{required: true, message: '请输入广告订单量', trigger: 'blur'}],
-  money_by_amazon: [{required: true, message: '请输入亚马逊佣金', trigger: 'blur'}],
-  money_by_other: [{required: true, message: '请输入其他佣金', trigger: 'blur'}],
-  session: [{required: true, message: '请输入会话数', trigger: 'blur'}],
-  order: [{required: true, message: '请输入订单', trigger: 'blur'}],
-  availableSalesDay: [{required: true, message: '请输入可用销量天数', trigger: 'blur'}],
-  intransitInventory: [{required: true, message: '请输入在途库存', trigger: 'blur'}],
-  overseasStorage: [{required: true, message: '请输入海外仓库存', trigger: 'blur'}],
-  refundRate: [{required: true, message: '请输入最近90天平台退货率', trigger: 'blur'}],
+  sales_original: [{ required: true, message: '请输入销售额', trigger: 'blur' }],
+  ad_sales_original: [{ required: true, message: '请输入广告销售额', trigger: 'blur' }],
+  ad_cost_original: [{ required: true, message: '请输入广告花费', trigger: 'blur' }],
+  total_sales_current_monthly_original: [{ required: true, message: '请输入当月销售额', trigger: 'blur' }],
+  impression: [{ required: true, message: '请输入广告展示量', trigger: 'blur' }],
+  ad_click: [{ required: true, message: '请输入广告点击量', trigger: 'blur' }],
+  ad_order: [{ required: true, message: '请输入广告订单量', trigger: 'blur' }],
+  money_by_amazon: [{ required: true, message: '请输入亚马逊佣金', trigger: 'blur' }],
+  money_by_other: [{ required: true, message: '请输入其他佣金', trigger: 'blur' }],
+  session: [{ required: true, message: '请输入会话数', trigger: 'blur' }],
+  order: [{ required: true, message: '请输入订单', trigger: 'blur' }],
+  availableSalesDay: [{ required: true, message: '请输入可用销量天数', trigger: 'blur' }],
+  intransitInventory: [{ required: true, message: '请输入在途库存', trigger: 'blur' }],
+  overseasStorage: [{ required: true, message: '请输入海外仓库存', trigger: 'blur' }],
+  refundRate: [{ required: true, message: '请输入最近90天平台退货率', trigger: 'blur' }],
 });
 
 const flatDayColumns = ref(flattenColumns(dayColumns.value));
@@ -221,6 +226,7 @@ interface RowVO {
 
 const xGrid = ref<VxeGridInstance<RowVO>>();
 const originalDataMap = new Map();
+const currentScrollLeft = ref(0);
 
 const gridOptions = reactive({
   border: 'inner',
@@ -248,6 +254,7 @@ const gridOptions = reactive({
     trigger: 'manual',
     mode: 'row',
     showStatus: true,
+
   },
   day: {
     columns: dayColumns,
@@ -264,7 +271,7 @@ const gridOptions = reactive({
 });
 
 const gridEvents = {
-  pageChange({currentPage, pageSize}) {
+  pageChange({ currentPage, pageSize }) {
     if (gridOptions.pagerConfig) {
 
       gridOptions.pagerConfig.currentPage = currentPage;
@@ -297,11 +304,20 @@ const clearRowEvent = (row: RowVO) => {
 const handelEditRow = (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
-    originalDataMap.set(row.id, {...row});
+    // 记录当前滚动条位置
+    const bodyWrapper = $grid.$el.querySelector('.vxe-table--body-wrapper');
+    currentScrollLeft.value = bodyWrapper.scrollLeft;
+    originalDataMap.set(row.id, { ...row });
     $grid.setEditRow(row);
+    // 强制恢复滚动条位置
+    setTimeout(() => {
+      bodyWrapper.scrollLeft = currentScrollLeft.value;
+      console.log('After setTimeout, scrollLeft:', bodyWrapper.scrollLeft);
+    }, 0);
   }
 };
 
+
 function updateDataChange(newId) {
   if (selectorRef.value) {
     if (gridOptions.pagerConfig) {
@@ -387,20 +403,20 @@ const validateNumericFields = (fields: Record<string, any>, fieldsToValidate: st
 
     if (numericFields.includes(field)) {
       if (value === null || value === undefined || value === '') {
-        ElMessage.warning(`${title} 不能为空`);
+        ElMessage.warning(`${ title } 不能为空`);
         return false;
       }
       if (isNaN(Number(value))) {
-        ElMessage.warning(`${title} 必须为数字`);
+        ElMessage.warning(`${ title } 必须为数字`);
         return false;
       }
     } else if (integerFields.includes(field)) {
       if (value === null || value === undefined || value === '') {
-        ElMessage.warning(`${title} 不能为空`);
+        ElMessage.warning(`${ title } 不能为空`);
         return false;
       }
       if (!Number.isInteger(Number(value)) || isNaN(Number(value))) {
-        ElMessage.warning(`${title} 必须为整数`);
+        ElMessage.warning(`${ title } 必须为整数`);
         return false;
       }
     }
@@ -423,15 +439,15 @@ async function createDayData() {
       if (resp.code === 2000) {
         dayFormVisible.value = false;
         await fetchDayTaskData();
-        await VXETable.modal.message({content: '创建成功', status: 'success'});
+        await VXETable.modal.message({ content: '创建成功', status: 'success' });
         taskDataFormRef.value.resetFields();
       }
     } catch (e) {
-      await VXETable.modal.message({content: '创建失败', status: 'error'});
+      await VXETable.modal.message({ content: '创建失败', status: 'error' });
     }
   } else {
     dayFormVisible.value = false;
-    await VXETable.modal.message({content: '此日期对应数据已存在', status: 'error'});
+    await VXETable.modal.message({ content: '此日期对应数据已存在', status: 'error' });
   }
 }
 
@@ -465,15 +481,15 @@ async function createWeekData() {
       if (resp.code === 2000) {
         dayFormVisible.value = false;
         await fetchWeekTaskData();
-        await VXETable.modal.message({content: '创建成功', status: 'success'});
+        await VXETable.modal.message({ content: '创建成功', status: 'success' });
         taskDataFormRef.value.resetFields();
       }
     } catch (e) {
-      await VXETable.modal.message({content: '创建失败', status: 'error'});
+      await VXETable.modal.message({ content: '创建失败', status: 'error' });
     }
   } else {
     dayFormVisible.value = false;
-    await VXETable.modal.message({content: '此日期对应数据已存在', status: 'error'});
+    await VXETable.modal.message({ content: '此日期对应数据已存在', status: 'error' });
   }
 }
 
@@ -496,15 +512,15 @@ async function createMonthData() {
       if (resp.code === 2000) {
         dayFormVisible.value = false;
         await fetchMonthTaskData();
-        await VXETable.modal.message({content: '创建成功', status: 'success'});
+        await VXETable.modal.message({ content: '创建成功', status: 'success' });
         taskDataFormRef.value.resetFields();
       }
     } catch (e) {
-      await VXETable.modal.message({content: '创建失败', status: 'error'});
+      await VXETable.modal.message({ content: '创建失败', status: 'error' });
     }
   } else {
     dayFormVisible.value = false;
-    await VXETable.modal.message({content: '此日期对应数据已存在', status: 'error'});
+    await VXETable.modal.message({ content: '此日期对应数据已存在', status: 'error' });
   }
 }
 
@@ -781,7 +797,8 @@ onMounted(() => {
   </div>
   <el-card class="mx-8">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="currentGridOptions"
+      <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)">
@@ -840,6 +857,14 @@ onMounted(() => {
         <template #refundRate_edit="{ row }">
           <vxe-input v-model="row.refundRate"></vxe-input>
         </template>
+        <template #refundRate_default="{ row }">
+          <span v-if="row.refundRate !== null && row.refundRate !== undefined">
+              {{ row.refundRate }}%
+          </span>
+          <span v-else>
+              {{ row.refundRate }}
+          </span>
+        </template>
       </vxe-grid>
     </div>
   </el-card>

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

@@ -1,20 +1,20 @@
 import { ref } from 'vue';
 //数据录入
 export const dayColumns = ref([
-  {field: 'platformNumber', title: '平台编号', align: 'center'},
-  {field: 'platformName', title: '平台名称', align: 'center'},
-  {field: 'country', title: '国家', align: 'center'},
-  {field: 'brandName', title: '品牌', align: 'center'},
-  {field: 'user_name', title: '运营', align: 'center'},
-  {field: 'currencyCode', title: '回款币种', align: 'center'},
+  { field: 'platformNumber', title: '平台编号', align: 'center', width: 90, },
+  { field: 'platformName', title: '平台名称', align: 'center', width: 142, },
+  { field: 'country', title: '国家', align: 'center', width: 90, },
+  { field: 'brandName', title: '品牌', align: 'center', width: 90, },
+  { field: 'user_name', title: '运营', align: 'center', width: 100 },
+  { field: 'currencyCode', title: '回款币种', align: 'center', width: 100 },
   {
     title: '销售额', align: 'center', children: [
-      {field: 'sales', title: '销售额',},
+      { field: 'sales', title: '销售额', align: 'center', minWidth: 120 },
       {
         field: 'sales_original',
         title: '销售额(本币)',
         editRender: {},
-        slots: {edit: 'sales_original_edit'},
+        slots: { edit: 'sales_original_edit' },
         width: 123,
         align: 'center'
       },
@@ -22,12 +22,12 @@ export const dayColumns = ref([
   },
   {
     title: '广告销售额', align: 'center', children: [
-      {field: 'ad_sales', title: '广告销售额', align: 'center'},
+      { field: 'ad_sales', title: '广告销售额', align: 'center', minWidth: 120 },
       {
         field: 'ad_sales_original',
         title: '广告销售额(本币)',
         editRender: {},
-        slots: {edit: 'ad_sales_original_edit'},
+        slots: { edit: 'ad_sales_original_edit' },
         width: 151,
         align: 'center'
       },
@@ -36,177 +36,222 @@ export const dayColumns = ref([
   //{field: 'sales', title: '销售额', editRender: {}, slots: {edit: 'sales_edit', default: 'sales_default',header: 'sales_header'}},
   {
     title: '广告花费', align: 'center', children: [
-      {field: 'ad_cost', title: '广告花费', align: 'center'},
+      { field: 'ad_cost', title: '广告花费', align: 'center', minWidth: 120 },
       {
         field: 'ad_cost_original',
         title: '广告花费(本币)',
         editRender: {},
-        slots: {edit: 'ad_cost_original_edit'},
+        slots: { edit: 'ad_cost_original_edit' },
         width: 138,
         align: 'center'
       },
     ]
   },
-  {title: '操作', width: 120, slots: {default: 'operate'}, align: 'center'},
+  { title: '操作', width: 120, slots: { default: 'operate' }, align: 'center' },
 ]);
 
 export const weekColumns = ref([
-  {field: 'platformNumber', title: '平台编号', fixed: 'left', width: 81,align: 'center'},
-  {field: 'platformName', title: '平台名称', fixed: 'left', width: 142,align: 'center'},
-  {field: 'country', title: '国家', fixed: 'left', width: 80,align: 'center'},
-  {field: 'brandName', title: '品牌', fixed: 'left', width: 60},
-  {field: 'user_name', title: '运营', fixed: 'left', width: 80,align: 'center'},
-  {field: 'currencyCode', title: '回款币种', fixed: 'left', width: 80,align: 'center'},
+  { field: 'platformNumber', title: '平台编号', fixed: 'left', width: 81, align: 'center' },
+  { field: 'platformName', title: '平台名称', fixed: 'left', width: 142, align: 'center' },
+  { field: 'country', title: '国家', fixed: 'left', width: 80, align: 'center' },
+  { field: 'brandName', title: '品牌', fixed: 'left', width: 60 },
+  { field: 'user_name', title: '运营', fixed: 'left', width: 80, align: 'center' },
+  { field: 'currencyCode', title: '回款币种', fixed: 'left', width: 80, align: 'center' },
 
   {
     title: '销售额', align: 'center', children: [
-      {field: 'sales', title: '销售额', width: 120},
+      { field: 'sales', title: '销售额', width: 120, align: 'center' },
       {
         field: 'sales_original',
         title: '销售额(本币)',
         editRender: {},
-        slots: {edit: 'sales_original_edit'},
+        slots: { edit: 'sales_original_edit' },
         width: 123,
+        align: 'center'
       },
     ]
   },
   {
     title: '广告销售额', align: 'center', children: [
-      {field: 'ad_sales', title: '广告销售额', width: 120},
+      { field: 'ad_sales', title: '广告销售额', width: 120 },
       {
         field: 'ad_sales_original',
         title: '广告销售额(本币)',
         editRender: {},
-        slots: {edit: 'ad_sales_original_edit'},
+        slots: { edit: 'ad_sales_original_edit' },
         width: 151,
+        align: 'center'
       },
     ]
   },
   {
     title: '广告花费', align: 'center', children: [
-      {field: 'ad_cost', title: '广告花费', width: 120},
+      { field: 'ad_cost', title: '广告花费', width: 120, align: 'center' },
       {
         field: 'ad_cost_original',
         title: '广告花费(本币)',
         editRender: {},
-        slots: {edit: 'ad_cost_original_edit'},
+        slots: { edit: 'ad_cost_original_edit' },
         width: 138,
+        align: 'center'
       },
     ]
   },
   {
     title: '当月累计销售额', align: 'center', children: [
-      {field: 'total_sales_current_monthly', title: '当月累计销售额', width: 120},
+      { field: 'total_sales_current_monthly', title: '当月累计销售额', width: 120 },
       {
         field: 'total_sales_current_monthly_original',
         title: '当月累计销售额(本币)',
         editRender: {},
-        slots: {edit: 'total_sales_current_monthly_edit'},
+        slots: { edit: 'total_sales_current_monthly_edit' },
         width: 180,
+        align: 'center'
       },
     ]
   },
 
-  {field: 'impression', title: '广告曝光', editRender: {}, slots: {edit: 'impression_edit'}, width: 120},
-  {field: 'ad_click', title: '广告点击', editRender: {}, slots: {edit: 'ad_click_edit'}, width: 120},
-  {field: 'ad_order', title: '广告订单', editRender: {}, slots: {edit: 'ad_order_edit'}, width: 120},
+  {
+    field: 'impression',
+    title: '广告曝光',
+    editRender: {},
+    slots: { edit: 'impression_edit' },
+    width: 100,
+    align: 'center'
+  },
+  {
+    field: 'ad_click',
+    title: '广告点击',
+    editRender: {},
+    slots: { edit: 'ad_click_edit' },
+    width: 100,
+    align: 'center'
+  },
+  {
+    field: 'ad_order',
+    title: '广告订单',
+    editRender: {},
+    slots: { edit: 'ad_order_edit' },
+    width: 95,
+    align: 'center'
+  },
   {
     field: 'money_by_amazon',
     title: 'Amazon回款金额',
     editRender: {},
-    slots: {edit: 'money_by_amazon_edit'},
-    width: 134
+    slots: { edit: 'money_by_amazon_edit' },
+    width: 134, align: 'center'
   },
-  {field: 'currencyCodePlatform', title: '回款/余额币种', width: 115},
-  {field: 'money_by_other', title: 'Other回款金额', editRender: {}, slots: {edit: 'money_by_other_edit'}, width: 134},
-  {field: 'session', title: '流量', editRender: {}, slots: {edit: 'session_edit'}, width: 120},
-  {field: 'order', title: '订单', editRender: {}, slots: {edit: 'order_edit'}, width: 120},
+  { field: 'currencyCodePlatform', title: '回款/余额币种', width: 115 ,align: 'center'},
+  {
+    field: 'money_by_other',
+    title: 'Other回款金额',
+    editRender: {},
+    slots: { edit: 'money_by_other_edit' },
+    width: 134, align: 'center'
+  },
+  { field: 'session', title: '流量', editRender: {}, slots: { edit: 'session_edit' }, width: 95, align: 'center' },
+  { field: 'order', title: '订单', editRender: {}, slots: { edit: 'order_edit' }, width: 95, align: 'center' },
   {
     field: 'availableSalesDay',
     title: '当前存货可售天',
     editRender: {},
-    slots: {edit: 'availableSalesDay_edit'},
-    width: 120
+    slots: { edit: 'availableSalesDay_edit'},
+    width: 120, align: 'center'
   },
   {
     field: 'intransitInventory',
     title: '当前在途库存',
     editRender: {},
-    slots: {edit: 'intransitInventory_edit'},
-    width: 120
+    slots: { edit: 'intransitInventory_edit' },
+    width: 120, align: 'center'
   },
   {
     field: 'overseasStorage',
     title: '当前海外仓库存',
     editRender: {},
-    slots: {edit: 'overseasStorage_edit'},
-    width: 120
+    slots: { edit: 'overseasStorage_edit' },
+    width: 120, align: 'center'
+  },
+  {
+    field: 'refundRate',
+    title: '最近90天平台退货率',
+    editRender: {},
+    slots: { edit: 'refundRate_edit' ,default: 'refundRate_default'},
+    width: 120,
+    align: 'center'
   },
-  {field: 'refundRate', title: '最近90天平台退货率', editRender: {}, slots: {edit: 'refundRate_edit'}, width: 120},
-  {title: '操作', width: 120, slots: {default: 'operate'}, fixed: 'right'},
+  { title: '操作', width: 120, slots: { default: 'operate' }, fixed: 'right' },
 ]);
 
 export const monthColumns = ref([
-  {field: 'platformNumber', title: '平台编号', width: 90},
-  {field: 'platformName', title: '平台名称', width: 90},
-  {field: 'country', title: '国家', width: 90},
-  {field: 'brandName', title: '品牌', width: 90},
-  {field: 'user_name', title: '运营', width: 90},
-  {field: 'currencyCode', title: '回款币种', width: 111},
+  { field: 'platformNumber', title: '平台编号', fixed: 'left', width: 81, align: 'center' },
+  { field: 'platformName', title: '平台名称', fixed: 'left', width: 142, align: 'center' },
+  { field: 'country', title: '国家', fixed: 'left', width: 80, align: 'center' },
+  { field: 'brandName', title: '品牌', fixed: 'left', width: 60 },
+  { field: 'user_name', title: '运营', fixed: 'left', width: 80, align: 'center' },
+  { field: 'currencyCode', title: '回款币种', fixed: 'left', width: 80, align: 'center' },
 
   {
     title: '销售额', align: 'center', children: [
-      {field: 'sales', title: '销售额', width: 120},
+      { field: 'sales', title: '销售额', width: 120 },
       {
         field: 'sales_original',
         title: '销售额(本币)',
         editRender: {},
-        slots: {edit: 'sales_original_edit'},
+        slots: { edit: 'sales_original_edit' },
         width: 123,
       },
     ]
   },
   {
     title: '广告销售额', align: 'center', children: [
-      {field: 'ad_sales', title: '广告销售额', width: 120},
+      { field: 'ad_sales', title: '广告销售额', width: 120 },
       {
         field: 'ad_sales_original',
         title: '广告销售额(本币)',
         editRender: {},
-        slots: {edit: 'ad_sales_original_edit'},
+        slots: { edit: 'ad_sales_original_edit' },
         width: 151,
       },
     ]
   },
   {
     title: '广告花费', align: 'center', children: [
-      {field: 'ad_cost', title: '广告花费', width: 120},
+      { field: 'ad_cost', title: '广告花费', width: 120 },
       {
         field: 'ad_cost_original',
         title: '广告花费(本币)',
         editRender: {},
-        slots: {edit: 'ad_cost_original_edit'},
+        slots: { edit: 'ad_cost_original_edit' },
         width: 138,
       },
     ]
   },
 
-  {field: 'impression', title: '广告曝光', editRender: {}, slots: {edit: 'impression_edit'}, width: 120},
-  {field: 'ad_click', title: '广告点击', editRender: {}, slots: {edit: 'ad_click_edit'}, width: 120},
-  {field: 'ad_order', title: '广告订单', editRender: {}, slots: {edit: 'ad_order_edit'}, width: 120},
-  {title: '操作', width: 120, slots: {default: 'operate'}, fixed: 'right'},
+  { field: 'impression', title: '广告曝光', editRender: {}, slots: { edit: 'impression_edit' }, width: 120 },
+  { field: 'ad_click', title: '广告点击', editRender: {}, slots: { edit: 'ad_click_edit' }, width: 120 },
+  { field: 'ad_order', title: '广告订单', editRender: {}, slots: { edit: 'ad_order_edit' }, width: 120 },
+  { title: '操作', width: 120, slots: { default: 'operate' }, fixed: 'right' },
 ]);
 
 export const universal = [
-  {field: 'platformNumber', title: '平台编号', fixed: 'left',align: 'center', minWidth: 75, slots: {default: 'platformNumber_default'}},
+  {
+    field: 'platformNumber',
+    title: '平台编号',
+    fixed: 'left',
+    align: 'center',
+    minWidth: 75,
+    slots: { default: 'platformNumber_default' }
+  },
   {
     field: 'platformName',
     title: '平台名称',
     fixed: 'left',
     minWidth: 93,
-    slots: {default: 'platformName_default'},
+    slots: { default: 'platformName_default' },
     align: 'center',
-    titlePrefix: {icon: 'vxe-icon-goods-fill'},
+    titlePrefix: { icon: 'vxe-icon-goods-fill' },
   },
   {
     field: 'user_name',
@@ -214,14 +259,14 @@ export const universal = [
     fixed: 'left',
     minWidth: 75,
     align: 'center',
-    titlePrefix: {icon: 'vxe-icon-user'}
+    titlePrefix: { icon: 'vxe-icon-user' }
   },
   {
     field: 'country',
     title: '国家',
     fixed: 'left',
     minWidth: 75,
-    titlePrefix: {icon: 'vxe-icon-location'},
+    titlePrefix: { icon: 'vxe-icon-location' },
     align: 'center'
   },
   {
@@ -230,7 +275,7 @@ export const universal = [
     fixed: 'left',
     minWidth: 75,
     align: 'center',
-    titlePrefix: {icon: 'vxe-icon-brand'},
+    titlePrefix: { icon: 'vxe-icon-brand' },
   },
   {
     field: 'currencyCode',
@@ -238,7 +283,7 @@ export const universal = [
     fixed: 'left',
     minWidth: 75,
     align: 'center',
-    slots: {default: 'currencyCode_default'}
+    slots: { default: 'currencyCode_default' }
   },
 ];