ads_web/src/views/searchTerm/topSearchTermTable/index.vue

<script setup lang="ts">
/**
 * @Name: index.vue
 * @Description: 搜索词-TopSearchTerm Table
 * @Author: Cheney
 */

import { nextTick, onBeforeMount, 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(() => {
  pageSize.value = 21; // 将usePagination中的pageSize默认修改每页显示21条
  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')];
}

/**
 * 计算结束日期
 * @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 = 21;
  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: '#f0f0f0', 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>
  <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 mb-2.5 h-full" 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: 100%; overflow: auto">
        <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 />
              </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="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">
                <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" :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" :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="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="[21, 42, 72, 102, 132, 162]"
          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: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.2em;
  max-height: 2.4em;
}
</style>