|
|
@@ -0,0 +1,428 @@
|
|
|
+<script setup lang="ts">
|
|
|
+/**
|
|
|
+ * @Name: index.vue
|
|
|
+ * @Description: 搜索词-TopSearchTerm Table
|
|
|
+ * @Author: Cheney
|
|
|
+ */
|
|
|
+
|
|
|
+import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
|
|
|
+import { usePagination } from '/@/utils/usePagination';
|
|
|
+import { getTopSearchTermTable, postDownload } from './api';
|
|
|
+import { marketplaceIdEnum } from '/@/utils/marketplaceIdEnum';
|
|
|
+import { Download, Goods, Key, Medal, Pointer, Rank, Refresh, Search, Switch, TopRight } from '@element-plus/icons-vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+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');
|
|
|
+const searchTermInp = ref('');
|
|
|
+const asinInp = ref('');
|
|
|
+const tableLoading = ref(false);
|
|
|
+const downloadLoading = ref(false);
|
|
|
+const date = ref(calculateLastWeek()); // 设置默认日期为上周的周日到周六
|
|
|
+const dateDimension = ref(date.value[0]);
|
|
|
+
|
|
|
+
|
|
|
+onBeforeMount(() => {
|
|
|
+ fetchTableData();
|
|
|
+});
|
|
|
+
|
|
|
+watch(dateDimension, () => {
|
|
|
+ calculateDate();
|
|
|
+ // console.log('==Date==', date.value[0], date.value[1]);
|
|
|
+ fetchTableData();
|
|
|
+});
|
|
|
+
|
|
|
+function calculateDate() {
|
|
|
+ if (reportTypeSelect.value === 'weekly') {
|
|
|
+ date.value[0] = dateDimension.value;
|
|
|
+ date.value[1] = calculateEndDate(dateDimension.value);
|
|
|
+ } else if (reportTypeSelect.value === 'monthly') {
|
|
|
+ const selectedMonth = dayjs(dateDimension.value);
|
|
|
+ date.value[0] = selectedMonth.startOf('month').format('YYYY-MM-DD');
|
|
|
+ date.value[1] = selectedMonth.endOf('month').format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 计算上周的周日到周六的日期范围
|
|
|
+ */
|
|
|
+function calculateLastWeek() {
|
|
|
+ const today = dayjs();
|
|
|
+ const lastSaturday = today.subtract(today.day() + 1, 'day'); // 上周六
|
|
|
+ const lastSunday = lastSaturday.subtract(6, 'day'); // 上周日
|
|
|
+ return [lastSunday.format('YYYY-MM-DD'), lastSaturday.format('YYYY-MM-DD')];
|
|
|
+}
|
|
|
+
|
|
|
+function calculateEndDate(startDate: string) {
|
|
|
+ return dayjs(startDate).add(6, 'day').format('YYYY-MM-DD');
|
|
|
+}
|
|
|
+
|
|
|
+async function refreshTable() {
|
|
|
+ currentPage.value = 1;
|
|
|
+ pageSize.value = 10;
|
|
|
+ asinInp.value = '';
|
|
|
+ searchTermInp.value = '';
|
|
|
+ reportTypeSelect.value = 'weekly';
|
|
|
+ marketplaceSelect.value = marketplaceIdEnum[0].value;
|
|
|
+ await fetchTableData();
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchTableData() {
|
|
|
+ tableLoading.value = true;
|
|
|
+ const query = {
|
|
|
+ page: currentPage.value,
|
|
|
+ limit: pageSize.value,
|
|
|
+ asin: asinInp.value,
|
|
|
+ search_term: searchTermInp.value,
|
|
|
+ report_type: reportTypeSelect.value,
|
|
|
+ marketplace_Ids: marketplaceSelect.value,
|
|
|
+ date_start: date.value[0],
|
|
|
+ date_end: date.value[1],
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ const response = await getTopSearchTermTable(query);
|
|
|
+ total.value = response.total;
|
|
|
+ tableData.value = response.data;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('==Error==:', error);
|
|
|
+ } finally {
|
|
|
+ tableLoading.value = false;
|
|
|
+ await nextTick();
|
|
|
+ // 触发窗口 resize 事件
|
|
|
+ window.dispatchEvent(new Event('resize'));
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function handleSelectChange() {
|
|
|
+ calculateDate();
|
|
|
+ await fetchTableData();
|
|
|
+}
|
|
|
+
|
|
|
+async function handleQueryChange() {
|
|
|
+ if (!validateSearchTermInput(searchTermInp.value)) {
|
|
|
+ if (searchTermInp.value.length == 0) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ ElMessage.warning({ message: '搜索词只能输入数字和英文字母', plain: true });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (asinInp.value.length > 0 && !validateAsinInput(asinInp.value)) {
|
|
|
+ ElMessage.warning({ message: '不符合匹配规范', plain: true });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await fetchTableData();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 校验SearchTerm输入是否合法
|
|
|
+ * @param input 输入的字符串
|
|
|
+ */
|
|
|
+function validateSearchTermInput(input: string) {
|
|
|
+ const regex = /^[a-zA-Z0-9\s]*$/;
|
|
|
+ return regex.test(input);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 校验Asin输入是否合法
|
|
|
+ * @param input 输入的字符串
|
|
|
+ */
|
|
|
+function validateAsinInput(input: string) {
|
|
|
+ const regex = /^[Bb]0[A-Za-z0-9\s]*$/i;
|
|
|
+ return regex.test(input);
|
|
|
+}
|
|
|
+
|
|
|
+function handleJump() {
|
|
|
+ // console.log('All defined routes:', router.getRoutes());
|
|
|
+ router.push({ path: '/searchTerm/rootWordManage' });
|
|
|
+}
|
|
|
+
|
|
|
+async function handleDownload() {
|
|
|
+ downloadLoading.value = true;
|
|
|
+ try {
|
|
|
+ const body = {
|
|
|
+ asin: asinInp.value,
|
|
|
+ date_start: date.value[0],
|
|
|
+ date_end: date.value[1],
|
|
|
+ search_term: searchTermInp.value,
|
|
|
+ marketplace_Ids: marketplaceSelect.value,
|
|
|
+ report_type: reportTypeSelect.value,
|
|
|
+ };
|
|
|
+
|
|
|
+ const response = await postDownload(body);
|
|
|
+
|
|
|
+ const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|
|
+
|
|
|
+ // 创建一个临时 URL
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+
|
|
|
+ // 创建一个临时的 <a> 元素并触发下载
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+
|
|
|
+ // 设置文件名
|
|
|
+ const currentTime = dayjs().format('YYYY-MM-DD_HH_mm_ss');
|
|
|
+ const filename = `TopSearchTerm_${currentTime}.xlsx`;
|
|
|
+
|
|
|
+ link.setAttribute('download', filename);
|
|
|
+
|
|
|
+ // 添加到 body, 触发点击, 然后移除
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+
|
|
|
+ // 释放 URL 对象
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+
|
|
|
+ ElMessage.success('文件下载成功');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('==Error==:', error);
|
|
|
+ ElMessage.error('文件下载失败，请重试');
|
|
|
+ } finally {
|
|
|
+ downloadLoading.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function getTagStyle(clickShareRank: number): Record<string, string> {
|
|
|
+ switch (clickShareRank) {
|
|
|
+ case 1:
|
|
|
+ return { backgroundColor: '#fbbf24', color: '#fff', border: '1px solid #fbbf24' }; // 金色
|
|
|
+ case 2:
|
|
|
+ return { backgroundColor: '#C0C0C0', color: '#fff', border: '1px solid #C0C0C0' }; // 银色
|
|
|
+ case 3:
|
|
|
+ return { backgroundColor: '#CD7F32', color: '#fff', border: '1px solid #CD7F32' }; // 铜色
|
|
|
+ default:
|
|
|
+ return { backgroundColor: '#e0e0e0', color: '#000', border: '1px solid #e0e0e0' };
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="mx-3">
|
|
|
+ <el-divider>
|
|
|
+ <div class="font-bold text-xl">
|
|
|
+ <el-icon style="top: 3px">
|
|
|
+ <DataAnalysis />
|
|
|
+ </el-icon>
|
|
|
+ Top Search Term - Table
|
|
|
+ </div>
|
|
|
+ </el-divider>
|
|
|
+ </div>
|
|
|
+ <el-card class="mx-3" v-loading="tableLoading" style="border: none">
|
|
|
+ <!-- table筛选栏 -->
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="flex gap-5 flex-wrap">
|
|
|
+ <div>
|
|
|
+ <span class="font-medium mr-0.5">市场 </span>
|
|
|
+ <el-select v-model="marketplaceSelect" @change="handleSelectChange" style="width: 90px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in marketplaceOptions"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font-medium mr-0.5">报告类型 </span>
|
|
|
+ <el-select v-model="reportTypeSelect" @change="handleSelectChange" style="width: 90px">
|
|
|
+ <el-option label="周度" value="weekly" />
|
|
|
+ <el-option label="月度" value="monthly" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font-medium mr-0.5">搜索词 </span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchTermInp"
|
|
|
+ @keyup.enter="handleQueryChange"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ placeholder="输入后回车查询"
|
|
|
+ clearable
|
|
|
+ @clear="handleSelectChange"
|
|
|
+ style="width: 240px" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font-medium mr-0.5">ASIN </span>
|
|
|
+ <el-input
|
|
|
+ v-model="asinInp"
|
|
|
+ @keyup.enter="handleQueryChange"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ placeholder="输入后回车查询"
|
|
|
+ clearable
|
|
|
+ @clear="handleSelectChange"
|
|
|
+ style="width: 180px" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font-medium mr-0.5">报告日期 </span>
|
|
|
+
|
|
|
+ <el-config-provider :locale="enLocale">
|
|
|
+ <el-date-picker
|
|
|
+ v-if="reportTypeSelect === 'weekly'"
|
|
|
+ v-model="dateDimension"
|
|
|
+ type="week"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ :format="`${date[0]} To ${date[1]}`"
|
|
|
+ :popper-options="{ placement: 'bottom-end' }"
|
|
|
+ :disabled-date="(time: Date) => time > new Date()"
|
|
|
+ :clearable="false" />
|
|
|
+ <el-date-picker
|
|
|
+ v-else
|
|
|
+ v-model="dateDimension"
|
|
|
+ type="month"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ :format="`${date[0]} To ${date[1]}`"
|
|
|
+ :popper-options="{ placement: 'bottom-end' }"
|
|
|
+ :disabled-date="(time: Date) => time > new Date()"
|
|
|
+ :clearable="false">
|
|
|
+ <template #default>
|
|
|
+ 123
|
|
|
+ </template>
|
|
|
+ </el-date-picker>
|
|
|
+ </el-config-provider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <el-button type="primary" plain @click="handleJump" :icon="TopRight">搜索词管理</el-button>
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ @click="handleDownload"
|
|
|
+ :icon="Download"
|
|
|
+ round
|
|
|
+ :loading="downloadLoading"
|
|
|
+ :disabled="!tableData.length"
|
|
|
+ >下载表格
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="refreshTable" :icon="Refresh" circle></el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 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">
|
|
|
+ <template #header>
|
|
|
+ <el-icon style="top: 2px; margin-right: 3px">
|
|
|
+ <Key />
|
|
|
+ </el-icon>
|
|
|
+ <span>搜索词</span>
|
|
|
+ </template>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-link :underline="false" href="https://www.bilibili.com/" target="_blank" style="color: #0b3289"
|
|
|
+ >{{ row.searchTerm }}
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="searchFrequencyRank" label="搜索词搜索排名" align="center" width="150">
|
|
|
+ <template #header>
|
|
|
+ <el-icon style="top: 2px; margin-right: 4px">
|
|
|
+ <Rank />
|
|
|
+ </el-icon>
|
|
|
+ <span>搜索词搜索排名</span>
|
|
|
+ </template>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span class="font-medium">{{ row.searchFrequencyRank }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="clickedAsin" label="Asin" align="center">
|
|
|
+ <template #header>
|
|
|
+ <el-icon style="top: 2px; margin-right: 5px">
|
|
|
+ <Goods />
|
|
|
+ </el-icon>
|
|
|
+ <span>Asin</span>
|
|
|
+ </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">
|
|
|
+ <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>-->
|
|
|
+ <!--</el-table-column>-->
|
|
|
+ <el-table-column prop="clickShareRank" label="点击分享率排名" align="center" width="150">
|
|
|
+ <template #header>
|
|
|
+ <el-icon style="top: 2px; margin-right: 4px">
|
|
|
+ <Medal />
|
|
|
+ </el-icon>
|
|
|
+ <span>点击分享率排名</span>
|
|
|
+ </template>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <!--<span class="font-semibold">{{ row.clickShareRank }}</span>-->
|
|
|
+ <el-tag :style="getTagStyle(row.clickShareRank)">
|
|
|
+ {{ row.clickShareRank }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="clickShare" align="center" label="点击分享率">
|
|
|
+ <template #header>
|
|
|
+ <el-icon style="top: 2px; margin-right: 4px">
|
|
|
+ <Pointer />
|
|
|
+ </el-icon>
|
|
|
+ <span>点击分享率</span>
|
|
|
+ </template>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span class="font-semibold">{{ row.clickShare }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="conversionShare" align="center" label="转化分享率">
|
|
|
+ <template #header>
|
|
|
+ <el-icon style="top: 2px; margin-right: 5px">
|
|
|
+ <Switch />
|
|
|
+ </el-icon>
|
|
|
+ <span>转化分享率</span>
|
|
|
+ </template>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span class="font-semibold">{{ row.conversionShare }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="mt-3.5 flex justify-end">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ :page-sizes="[10, 20, 30, 50, 100, 200]"
|
|
|
+ layout="sizes, prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ @change="handlePageChange" />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+:deep(.el-divider__text.is-center.el-divider__text) {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+
|
|
|
+.tooltip-text {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: normal;
|
|
|
+ line-height: 1.2em;
|
|
|
+ max-height: 2.4em;
|
|
|
+}
|
|
|
+</style>
|
