|
@@ -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 === 1 || columnIndex === 2) {
|
|
|
+ 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 />
|
|
@@ -341,24 +359,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 +429,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 +446,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;
|