🎨 perf<报表管理-数据中心>: 界面调整

src/views/reportManage/TaskManage/index.vue

@@ -125,15 +125,13 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     {field: 'currencyCode', title: '回款币种', editRender: {}, slots: {edit: 'currency_edit'}},
     {field: 'currencyCodePlatform', title: '回款/余额币种', editRender: {}, slots: {edit: 'currencyCodePlatform_edit'}},
     //{field: 'child_user_number', title: '录入人员数', slots: {edit: 'quantity_edit'}},
-    {title: '操作', width: 300, slots: {default: 'operate'}},
+    {title: '操作', width: 120, slots: {default: 'operate'}},
   ],
   data: [],
 });
 
 const operationList = ref([]);
-// const quantityList = ref([]);
 
-// 分页
 const gridEvents: VxeGridListeners<RowVO> = {
   pageChange({currentPage, pageSize}) {
     // console.log(currentPage, pageSize)
@@ -172,11 +170,6 @@ function filteredDataChange(newList) {
   }
 }
 
-/**
- * 判断当前编辑行
- * @param {RowVO} row 当前行
- * @return {boolean}
- */
 const hasActiveEditRow = (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -185,7 +178,6 @@ const hasActiveEditRow = (row: RowVO) => {
   return false;
 };
 
-// 进入编辑状态
 const editRowEvent = (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -201,7 +193,6 @@ const editRowEvent = (row: RowVO) => {
   }
 };
 
-//清除编辑状态
 const clearRowEvent = (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -240,7 +231,6 @@ async function deleteTask() {
   }
 }
 
-// 删除选中行
 const removeEvent = async () => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -257,7 +247,6 @@ const removeEvent = async () => {
   }
 };
 
-// 更新数据校验
 const requiredFields = [
   { field: 'platformNumber', title: '平台编号' },
   { field: 'platformName', title: '平台名称' },
@@ -308,7 +297,6 @@ async function updateRow(row) {
   }
 }
 
-// 保存表格行数据
 const saveRowEvent = async (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -343,7 +331,6 @@ async function createTask() {
   }
 }
 
-// 新建任务
 const submitEvent = async () => {
   // 创建一个新的行对象，用于保存表单数据
   const newRow: RowVO = {
@@ -372,7 +359,6 @@ const submitEvent = async () => {
   }
 };
 
-// 提交表单
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
@@ -412,17 +398,18 @@ onMounted(() => {
     <div style="position: relative">
       <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
         <template #toolbar_buttons>
-          <vxe-button icon="vxe-icon-add" plain @click="dialogFormVisible = true"> 添加任务</vxe-button>
+          <vxe-button status="primary" icon="vxe-icon-add" plain @click="dialogFormVisible = true"> 添加任务</vxe-button>
           <vxe-button icon="vxe-icon-delete" @click="removeEvent">删除</vxe-button>
           <!--<vxe-button icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>-->
         </template>
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
-            <vxe-button content="取消" @click="clearRowEvent(row)"></vxe-button>
-            <vxe-button status="primary" content="保存" @click="saveRowEvent(row)"></vxe-button>
+            <vxe-button type="text" content="取消" @click="clearRowEvent(row)"></vxe-button>
+            <vxe-button type="text" status="success" content="保存" @click="saveRowEvent(row)"></vxe-button>
           </template>
           <template v-else>
-            <vxe-button content="编辑" @click="editRowEvent(row)"></vxe-button>
+            <!--<el-button type="text" icon="Edit" />-->
+            <el-button type="text" icon="Edit"  @click="editRowEvent(row)"></el-button>
           </template>
         </template>
         <template #number_edit="{ row }">

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

@@ -216,28 +216,6 @@ async function handleExport() {
     console.error('导出数据失败:', error);
   }
 }
-
-// 初始化日期值
-// function initializeDateValues() {
-//   if (props.dayDate) {
-//     const [startDate, endDate] = props.dayDate;
-//     dayStartDate.value = startDate;
-//     dayEndDate.value = endDate;
-//   }
-//   if (props.weekDate) {
-//     const [startDate] = props.weekDate;
-//     weekStartDate.value = startDate;
-//   }
-//   if (props.monthDate) {
-//     const [startDate] = props.monthDate;
-//     monthStartDate.value = startDate;
-//   }
-// }
-
-onMounted(async () => {
-  // initializeDateValues();
-  // await loadData();
-});
 </script>
 
 <template>

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

@@ -25,28 +25,10 @@ import DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/compone
 const selectorRef = ref(null);
 const taskIds = ref({});
 
-//日周月
-// const dateDimension = ref('day');
-// provide('dateDimension', dateDimension);
-
 const dayDate = ref(null);
 const weekDate = ref(null);
 const monthDate = ref(null);
 
-// const currentDate = computed(() => {
-//   if (dateDimension.value === 'day') {
-//     return dayDate.value;
-//   } else if (dateDimension.value === 'week') {
-//     return weekDate.value;
-//   } else if (dateDimension.value === 'month') {
-//     return monthDate.value;
-//   }
-// });
-
-// watch(currentDate, (val) => {
-//   // console.log('currentDate', val);
-// });
-
 const monthCurrentDate = ref({});
 
 const processingDateChange = (date) => {
@@ -56,12 +38,6 @@ const processingDateChange = (date) => {
   monthDate.value = date.monthDate;
 };
 
-// provide('currentDate', currentDate);
-// const mainQueryParams = ref({
-//   currentDate,
-//   taskIds,
-// });
-
 const monthQueryParams = ref({
   taskIds,
   monthCurrentDate,
@@ -92,27 +68,6 @@ function handleButtonClick(tableName) {
   showTable.value = tableName;
 }
 
-// function getLastSevenDays() {
-//   const endDate = new Date();
-//   const startDate = new Date();
-//   startDate.setDate(endDate.getDate() - 6);
-//   return [startDate.toISOString().substring(0, 10), endDate.toISOString().substring(0, 10)];
-// }
-
-// emitter.on('DateTendency-dateChange', (value: string) => {
-//   dateDimension.value = value;
-// });
-
-// const currentMetricEnum = computed(() => {
-//   if (dateDimension.value === 'day') {
-//     return dayMetricsEnum;
-//   } else if (dateDimension.value === 'week') {
-//     return weekMetricsEnum;
-//   } else if (dateDimension.value === 'month') {
-//     return monthMetricsEnum;
-//   }
-// });
-
 </script>
 
 <template>
@@ -127,19 +82,7 @@ function handleButtonClick(tableName) {
         <DataPicker style="display: flex; align-items: center;" @changeDate="processingDateChange" />
       </div>
     </el-card>
-    <!--<el-card v-if="showTable === 'mainData'" class="mb-1.5">-->
-    <!--  <DateTendency-->
-    <!--      :fetch-line-month="getLineForMonth"-->
-    <!--      :fetch-line-week="getLineForWeek"-->
-    <!--      :fetchCard="getCardDayData"-->
-    <!--      :fetchCardMonth="getCardMonthData"-->
-    <!--      :fetchCardWeek="getCardWeekData"-->
-    <!--      :fetchLine="getLineForDay"-->
-    <!--      :metricEnum="currentMetricEnum"-->
-    <!--      :query="mainQueryParams"-->
-    <!--  >-->
-    <!--  </DateTendency>-->
-    <!--</el-card>-->
+
     <el-card v-if="showTable === 'monthlyComparativeData'" class="mb-1.5">
       <chartDateTendency
           :fetch-line-month="getLineForMonth"

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

@@ -174,27 +174,26 @@ watch(dateType, () => {
 <template>
   <div>
     <div v-if="dateType === 'day'" class="demo-date-picker">
-      <div class="block" style="display: flex; align-items: center;">
-        <span class="demonstration" style="margin-right: 8px;">日数据时间:</span>
-        <DateRangePicker v-model="dateRange" style="flex-grow: 1;" @change="dateChange"></DateRangePicker>
+      <div class="block">
+        <span class="demonstration">日数据时间:</span>
+        <DateRangePicker v-model="dateRange" class="date-picker" @change="dateChange"></DateRangePicker>
       </div>
     </div>
     <div v-if="dateType === 'week'" class="demo-date-picker">
-      <div class="block">
+      <div class="week-block">
         <span class="demonstration">周数据时间:</span>
         <el-config-provider :locale="enLocale">
           <el-date-picker
               v-model="startWeek"
               :clearable="false"
               :disabled-date="disabledDate"
+              class="date-picker"
               format="YYYY 第 WW 周"
               placeholder="选择开始周"
               type="week"
               @change="handleStartWeekChange"
           />
         </el-config-provider>
-      </div>
-      <div class="block">
         <span class="demonstration">至</span>
         <el-config-provider :locale="enLocale">
           <el-date-picker
@@ -202,6 +201,7 @@ watch(dateType, () => {
               :clearable="false"
               :disabled="!startWeek"
               :disabled-date="weekDisabledDate"
+              class="date-picker"
               format="YYYY 第 WW 周"
               placeholder="选择结束周"
               type="week"
@@ -223,6 +223,7 @@ watch(dateType, () => {
             type="monthrange"
             unlink-panels
             @change="handleMonthChange"
+            class="date-picker"
         />
       </div>
     </div>
@@ -232,18 +233,34 @@ watch(dateType, () => {
 <style scoped>
 .demo-date-picker {
   display: flex;
-  width: 100%;
+  align-items: center;
   padding: 0;
-  flex-wrap: wrap;
+  overflow: hidden;
+  width: 100%;
 }
 
-.demo-date-picker .block:last-child {
-  border-right: none;
+.block,
+.week-block {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  width: 100%;
+}
+
+.week-block .demonstration {
+  margin-right: 8px;
 }
 
-.demo-date-picker .demonstration {
+.demonstration {
   color: var(--el-text-color-secondary);
   font-size: 14px;
-  margin: 10px;
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.date-picker {
+  flex-grow: 1;
+  min-width: 0;
 }
 </style>

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

@@ -99,20 +99,32 @@ defineExpose({fetchFilteredData, filteredData, updateData});
 </script>
 
 <template>
-  <div class="flex gap-2">
-    <el-input v-model="platformNumberList" @change="emitChange" placeholder="平台编号" style="width: 160px"></el-input>
-    <el-input v-model="platformNameList" @change="emitChange" placeholder="平台名称" style="width: 160px"></el-input>
-    <el-select v-model="operationList" multiple collapse-tags collapse-tags-tooltip placeholder="运营" style="width: 160px">
+  <div class="flex-container">
+    <el-input v-model="platformNumberList" @change="emitChange" placeholder="平台编号" class="flex-item"></el-input>
+    <el-input v-model="platformNameList" @change="emitChange" placeholder="平台名称" class="flex-item"></el-input>
+    <el-select v-model="operationList" multiple collapse-tags collapse-tags-tooltip placeholder="运营" class="flex-item">
       <el-option v-for="item in operationOptions" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
-    <el-select v-model="countryList" multiple collapse-tags collapse-tags-tooltip placeholder="国家" style="width: 160px">
+    <el-select v-model="countryList" multiple collapse-tags collapse-tags-tooltip placeholder="国家" class="flex-item">
       <el-option v-for="item in countryOptions" :key="item" :label="item" :value="item" />
     </el-select>
-    <el-select v-model="brandNameList" multiple collapse-tags collapse-tags-tooltip placeholder="品牌" style="width: 160px">
+    <el-select v-model="brandNameList" multiple collapse-tags collapse-tags-tooltip placeholder="品牌" class="flex-item">
       <el-option v-for="item in brandNameOptions" :key="item" :label="item" :value="item" />
     </el-select>
   </div>
 </template>
 
 <style scoped>
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 10px; /* 控制间距 */
+}
+
+.flex-item {
+  flex: 1 1 160px; /* 自适应大小并设定最小宽度 */
+  min-width: 100px;
+  max-width: 186px;
+  height: 30px;
+}
 </style>

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

@@ -694,12 +694,12 @@ const filteredDayColumns = computed(() => {
 
 const filteredWeekColumns = computed(() => {
   const flat = flatWeekColumns.value;
-  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '当月累计销售额', 'Other回款金额', 'Amazon回款金额','回款币种','回款/余额币种'].includes(item.title));
+  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '当月累计销售额', 'Other回款金额', 'Amazon回款金额', '回款币种', '回款/余额币种'].includes(item.title));
 });
 
 const filteredMonthColumns = computed(() => {
   const flat = flatMonthColumns.value;
-  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费','回款币种'].includes(item.title));
+  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '回款币种'].includes(item.title));
 });
 
 onMounted(() => {
@@ -710,7 +710,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <el-card class="custom-card-style justify-between my-1.5 mx-2">
+    <el-card class=" my-1.5 mx-2">
       <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">
@@ -724,16 +724,6 @@ onMounted(() => {
                 @change="handleDayChange"
             />
           </div>
-          <!--<div class="block">-->
-          <!--  <span class="demonstration">日录入数据时间:</span>-->
-          <!--  <el-date-picker-->
-          <!--      v-model="dailyEntryTime"-->
-          <!--      :disabled-date="disabledDate"-->
-          <!--      :shortcuts="shortcuts"-->
-          <!--      type="Date"-->
-          <!--      @change="handleDayChange"-->
-          <!--  />-->
-          <!--</div>-->
         </div>
         <div v-if="dateType === 'week'" class="demo-date-picker">
           <el-config-provider :locale="enLocale">
@@ -747,16 +737,6 @@ onMounted(() => {
                   type="week"
               />
             </div>
-            <!--<div class="block">-->
-            <!--  <span class="demonstration">周销售数据时间:</span>-->
-            <!--  <el-date-picker-->
-            <!--      v-model="weeklySalesTime"-->
-            <!--      :format="salesFormat"-->
-            <!--      disabled-->
-            <!--      placeholder="选择一周"-->
-            <!--      type="week"-->
-            <!--  />-->
-            <!--</div>-->
             <div class="block">
               <span class="demonstration">周销售数据时间:</span>
               <el-date-picker
@@ -885,9 +865,9 @@ onMounted(() => {
 <style lang="scss" scoped>
 .demo-date-picker {
   display: flex;
-  width: 100%;
+  width: 50%;
   padding: 0;
-  flex-wrap: wrap;
+  white-space: nowrap;
   flex-direction: row-reverse;
 }
 
@@ -895,10 +875,18 @@ onMounted(() => {
   border-right: none;
 }
 
+.block {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
 .demo-date-picker .demonstration {
   color: var(--el-text-color-secondary);
   font-size: 14px;
-  margin: 10px;
+  white-space: nowrap;
+  margin-right: 8px;
 }
 
 .vxe-grid {

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dayMetricsEnum, monthMetricsEnum, weekMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
 import {
   getCardDayData,
@@ -67,20 +67,22 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <div class="custom-card-style flex gap-1.5 justify-between items-center my-1.5 mx-2">
-      <Selector ref="selectorRef" @update:updateData="updateDataChange" />
-      <DataPicker @dateChange="handelDateChange" style="display: flex; align-items: center;" />
-    </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">
+        <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
-          :metricEnum="currentMetricEnum"
-          :query="queryParams"
+          :fetch-line-month="getLineForMonth"
+          :fetch-line-week="getLineForWeek"
           :fetchCard="getCardDayData"
-          :fetchCardWeek="getCardWeekData"
           :fetchCardMonth="getCardMonthData"
+          :fetchCardWeek="getCardWeekData"
           :fetchLine="getLineForDay"
-          :fetch-line-week="getLineForWeek"
-          :fetch-line-month="getLineForMonth"
+          :metricEnum="currentMetricEnum"
+          :query="queryParams"
       >
       </DateTendency>
     </el-card>
@@ -96,4 +98,8 @@ onBeforeUnmount(() => {
   /*position: sticky;*/
   top: 0;
 }
+
+/* .flex-item { */
+/*   min-width: 160px; !* 设置最小宽度，确保在小屏幕上有足够的可见区域 *! */
+/* } */
 </style>

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

@@ -20,7 +20,7 @@ export const dayColumns = ref([
       {field: 'ad_cost', title: '广告花费',align: 'center'},
       {field: 'ad_cost_original', title: '广告花费(本币)', editRender: {}, slots: {edit: 'ad_cost_original_edit'}, width: 138, align: 'center'},
     ]},
-  {title: '操作', width: 220, slots: {default: 'operate'}},
+  {title: '操作', width: 120, slots: {default: 'operate'},align: 'center'},
 ]);
 
 export const weekColumns = ref([