Merge branch 'refs/heads/wang' into test

src/views/searchTerm/topSearchTermRank/column-chart.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @Name: column-chart.vue
- * @Description:
+ * @Description: 表格内的折线图
  * @Author: Cheney
  */
 
@@ -10,14 +10,14 @@ import * as echarts from 'echarts';
 
 const props = defineProps({
   rowData: {
-    type: Array as PropType<{ [key: string]: number }[]>,
+    type: Object,
     required: true,
   },
 });
 
 const chartRef = ref<HTMLElement | null>(null);
 let chart: echarts.ECharts | null = null;
-let resizeObserver: ResizeObserver | null = null
+let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
   initChart();
@@ -26,28 +26,29 @@ onMounted(() => {
 onUnmounted(() => {
   // 清理 ResizeObserver
   if (resizeObserver) {
-    resizeObserver.disconnect()
+    resizeObserver.disconnect();
   }
   if (chart) {
-    chart.dispose()
-    chart = null
+    chart.dispose();
+    chart = null;
   }
-})
+});
 
 watch(
-    () => props.rowData,
-    () => {
-      updateChart();
-    },
-    { immediate: true, deep: true }
+  () => props.rowData,
+  () => {
+    updateChart();
+  },
+  { immediate: true, deep: true }
 );
 
 function updateChart() {
-  if (!chart || !props.rowData || props.rowData.length === 0) return;
+  if (!chart || !props.rowData) return;
 
-  const data = props.rowData[0];
-  const dates = Object.keys(data);
-  const values = Object.values(data);
+  const dates = Object.keys(props.rowData.searchFrequencyRank[0]);
+  const searchFrequencyValues = Object.values(props.rowData.searchFrequencyRank[0]);
+  const clickShareValues = Object.values(props.rowData.clickShare[0]);
+  const conversionShareValues = Object.values(props.rowData.conversionShare[0]);
 
   const option: echarts.EChartsOption = {
     xAxis: {
@@ -58,17 +59,85 @@ function updateChart() {
         interval: 0,
       },
     },
-    yAxis: {
-      type: 'value',
-    },
+    yAxis: [
+      {
+        id: 0,
+        type: 'value',
+        name: 'Search Frequency Rank',
+        nameTextStyle: {
+          fontWeight: 'bold',
+          fontSize: 14,
+          color: '#333'
+        },
+        splitLine: {
+          show: true, // 设置显示分割线
+        },
+      },
+      {
+        id: 1,
+        type: 'value',
+        name: 'Share Rate',
+        nameTextStyle: {
+          fontWeight: 'bold',
+          fontSize: 14,
+          color: '#333'
+        },
+        position: 'right',
+        splitLine: {
+          show: false, // 设置显示分割线
+        },
+        axisLabel: {
+          formatter: '{value}%',
+        },
+        // axisLine: {
+        //   show: true,
+        // },
+        // show: true,
+      },
+    ],
     series: [
       {
-        data: values,
+        name: 'Search Frequency Rank',
+        data: searchFrequencyValues,
+        type: 'bar',
+        barWidth: '18px',
+        itemStyle: {
+          color: '',
+          borderRadius: [4, 4, 4, 4],
+        },
+        yAxisIndex: 0,
+      },
+      {
+        name: 'Click Share',
+        data: clickShareValues,
         type: 'line',
+        yAxisIndex: 1,
+      },
+      {
+        name: 'Conversion Share',
+        data: conversionShareValues,
+        type: 'line',
+        yAxisIndex: 1,
       },
     ],
     tooltip: {
       trigger: 'axis',
+      formatter: function(params) {
+        let result = params[0].axisValueLabel + '<br/>';
+        params.forEach(param => {
+          let value = param.value;
+          if (param.seriesName === 'Click Share' || param.seriesName === 'Conversion Share') {
+            value = value + '%';
+          } else if (param.seriesName === 'Search Frequency Rank') {
+            value = value.toLocaleString(); // 使用逗号分隔
+          }
+          result += param.marker + ' ' + param.seriesName + ': ' + value + '<br/>';
+        });
+        return result;
+      }
+    },
+    legend: {
+      data: ['Search Frequency Rank', 'Click Share', 'Conversion Share'],
     },
   };
   chart.setOption(option);
@@ -81,11 +150,11 @@ function initChart() {
 
     // 创建 ResizeObserver
     resizeObserver = new ResizeObserver(() => {
-      chart?.resize()
-    })
+      chart?.resize();
+    });
 
     // 观察 chartRef 元素
-    resizeObserver.observe(chartRef.value)
+    resizeObserver.observe(chartRef.value);
   }
 }
 </script>

src/views/searchTerm/topSearchTermRank/index.vue

@@ -210,7 +210,7 @@ function handleJump() {
               <span>Tendency</span>
             </template>
             <template #default="{ row }">
-              <ColumnChart :rowData="row.rank" />
+              <ColumnChart :rowData="row" />
             </template>
           </el-table-column>
         </el-table>

src/views/searchTerm/topSearchTermTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
+import { nextTick, onBeforeMount, ref, watch } from 'vue';
 import { usePagination } from '/@/utils/usePagination';
 import { getTopSearchTermTable, postDownload } from './api';
 import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
@@ -18,7 +18,6 @@ import enLocale from 'element-plus/es/locale/lang/en';
 const router = useRouter();
 
 const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
-
 const marketplaceSelect = ref(marketplaceIdEnum[0].value); // 当前只有美国区 默认第一个为美国
 const marketplaceOptions = marketplaceIdEnum;
 const reportTypeSelect = ref('weekly');
@@ -29,8 +28,8 @@ const downloadLoading = ref(false);
 const date = ref(calculateLastWeek()); // 设置默认日期为上周的周日到周六
 const dateDimension = ref(date.value[0]);
 
-
 onBeforeMount(() => {
+  pageSize.value = 21; // 将usePagination中的pageSize默认修改每页显示21条
   fetchTableData();
 });
 
@@ -40,6 +39,9 @@ watch(dateDimension, () => {
   fetchTableData();
 });
 
+/**
+ * 判断当前时间维度 并 计算起始和结束日期
+ */
 function calculateDate() {
   if (reportTypeSelect.value === 'weekly') {
     date.value[0] = dateDimension.value;
@@ -61,13 +63,17 @@ function calculateLastWeek() {
   return [lastSunday.format('YYYY-MM-DD'), lastSaturday.format('YYYY-MM-DD')];
 }
 
+/**
+ * 计算结束日期
+ * @param startDate el-date-picker组件的value
+ */
 function calculateEndDate(startDate: string) {
   return dayjs(startDate).add(6, 'day').format('YYYY-MM-DD');
 }
 
 async function refreshTable() {
   currentPage.value = 1;
-  pageSize.value = 10;
+  pageSize.value = 21;
   asinInp.value = '';
   searchTermInp.value = '';
   reportTypeSelect.value = 'weekly';
@@ -203,6 +209,18 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
       return { backgroundColor: '#e0e0e0', color: '#000', border: '1px solid #e0e0e0' };
   }
 }
+
+function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+  // 每三个合并为一个单元格
+  if (columnIndex >= 0 && columnIndex <= 4) {
+    if (rowIndex % 3 === 0) {
+      return [3, 1]; // 跨越三行
+    } else {
+      return [0, 0]; // 被合并的单元格
+    }
+  }
+  return [1, 1];
+}
 </script>
 
 <template>
@@ -282,9 +300,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
               :popper-options="{ placement: 'bottom-end' }"
               :disabled-date="(time: Date) => time > new Date()"
               :clearable="false">
-              <template #default>
-                123
-              </template>
+              <template #default> 123</template>
             </el-date-picker>
           </el-config-provider>
         </div>
@@ -307,8 +323,10 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
     <!-- table -->
     <el-card shadow="never" class="mt-5">
       <div style="height: 795px; overflow: auto">
-        <el-table :data="tableData" height="795" stripe style="width: 100%">
-          <el-table-column fixed prop="searchTerm" label="搜索词" width="260">
+        <el-table :data="tableData" :span-method="arraySpanMethod" height="795" stripe style="width: 100%">
+          <!-- 保持索引是1, 2, 3的顺序 不会收到合并单元格的影响 -->
+          <el-table-column fixed type="index" width="50" :index="(index) => Math.floor(index / 3) + 1" />
+          <el-table-column prop="searchTerm" label="搜索词" width="260">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
                 <Key />
@@ -332,6 +350,30 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
               <span class="font-medium">{{ row.searchFrequencyRank }}</span>
             </template>
           </el-table-column>
+
+          <el-table-column prop="clickShareSummary" label="点击分享率(SUM)" align="center" width="150">
+            <template #header>
+              <el-icon style="top: 2px; margin-right: 4px">
+                <Star />
+              </el-icon>
+              <span>点击分享率汇总</span>
+            </template>
+            <template #default="{ row }">
+              <span class="font-medium">{{ row.clickShareSummary }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="conversionShareSummary" label="转化分享率(SUM)" align="center" width="150">
+            <template #header>
+              <el-icon style="top: 2px; margin-right: 4px">
+                <Star />
+              </el-icon>
+              <span>转化分享率汇总</span>
+            </template>
+            <template #default="{ row }">
+              <span class="font-medium">{{ row.conversionShareSummary }}</span>
+            </template>
+          </el-table-column>
+
           <el-table-column prop="clickedAsin" label="Asin" align="center">
             <template #header>
               <el-icon style="top: 2px; margin-right: 5px">
@@ -341,24 +383,34 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
             </template>
             <template #default="{ row }">
               <div class="font-medium" style="color: black">{{ row.clickedAsin }}</div>
+              <!--<div class="text-sm text-left">-->
+              <!--  <el-tooltip class="box-item" effect="dark" :content="row.clickedItemName" placement="top-start" :show-after="500">-->
+              <!--    <div class="tooltip-text">-->
+              <!--      <span class="font-medium mr-1">Title:</span>-->
+              <!--      {{ row.clickedItemName }}-->
+              <!--    </div>-->
+              <!--  </el-tooltip>-->
+              <!--</div>-->
+            </template>
+          </el-table-column>
+          <el-table-column prop="clickedItemName" label="标题">
+            <template #header>
+              <el-icon style="top: 2px; margin-right: 5px">
+                <Reading />
+              </el-icon>
+              <span>标题</span>
+            </template>
+            <template #default="{ row }">
               <div class="text-sm text-left">
-                <el-tooltip class="box-item" effect="dark" :content="row.clickedItemName" placement="top-start">
+                <el-tooltip class="box-item" effect="dark" :content="row.clickedItemName" placement="top" :show-after="500">
                   <div class="tooltip-text">
-                    <span class="font-medium mr-1">Title:</span>
+                    <!--<span class="font-medium mr-1">Title:</span>-->
                     {{ row.clickedItemName }}
                   </div>
                 </el-tooltip>
               </div>
             </template>
           </el-table-column>
-          <!--<el-table-column prop="clickedItemName" label="标题">-->
-          <!--  <template #header>-->
-          <!--    <el-icon style="top: 2px; margin-right: 5px">-->
-          <!--      <Reading />-->
-          <!--    </el-icon>-->
-          <!--    <span>标题</span>-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
           <el-table-column prop="clickShareRank" label="点击分享率排名" align="center" width="150">
             <template #header>
               <el-icon style="top: 2px; margin-right: 4px">
@@ -401,7 +453,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
         <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 30, 50, 100, 200]"
+          :page-sizes="[21, 42, 72, 102, 132, 162]"
           layout="sizes, prev, pager, next"
           :total="total"
           @change="handlePageChange" />
@@ -418,7 +470,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
 .tooltip-text {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;