Merge branch 'wang' into test

.env.development

@@ -4,8 +4,8 @@ ENV = 'development'
 
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
- VITE_API_URL = 'http://192.168.1.225/'
-# VITE_API_URL = 'http://192.168.1.11:8080/'
+# VITE_API_URL = 'http://192.168.1.225/'
+ VITE_API_URL = 'http://192.168.1.22:8080/'
 # VITE_API_URL = 'http://amzads.zositechc.cn'
 
 # 是否启用按钮权限

.prettierrc.js

@@ -2,7 +2,7 @@ module.exports = {
   singleAttributePerLine: false,
   htmlWhitespaceSensitivity: 'ignore',
   // 一行最多多少个字符
-  printWidth: 130,
+  printWidth: 155,
   // 指定每个缩进级别的空格数
   tabWidth: 2,
   // 使用制表符而不是空格缩进行

src/utils/useElTableData.ts

@@ -0,0 +1,26 @@
+import { nextTick, Ref } from 'vue';
+
+
+/**
+ * 获取 El-Table的数据并处理total和loading
+ * @param apiFunction 请求的接口函数
+ * @param query 请求参数
+ * @param tableData El-Table的数据
+ * @param total El-Table数据的总条数
+ * @param loading El-Table的loading状态
+ */
+export async function useElTableData(apiFunction: Function, query: any, tableData: Ref, total: Ref, loading: Ref) {
+  loading.value = true;
+  try {
+    const response = await apiFunction(query);
+    total.value = response.total;
+    tableData.value = response.data;
+  } catch (error) {
+    console.log('error=>', error);
+  } finally {
+    loading.value = false;
+    await nextTick();
+    // 触发窗口 resize 事件
+    window.dispatchEvent(new Event('resize'));
+  }
+}

src/utils/usePagination.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 /**
  * 分页改变获取数据
- * @param getData 获取数据的方法, 在外面完成getData方法的实现
+ * @param getData 获取数据的方法, 在调用的文件处完成getData方法的实现后传入
  */
 export function usePagination(getData: Function) {
   const tableData = ref([]);

src/views/featureWord/queryPage/WeightTable.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+/**
+ * @Name: weightTable.vue
+ * @Description: 权重表格
+ * @Author: Cheney
+ */
+
+import { inject, onBeforeUnmount, Ref, ref } from 'vue';
+import { usePagination } from '/@/utils/usePagination';
+import { useElTableData } from '/@/utils/useElTableData';
+import * as api from './api';
+import emitter from '/@/utils/emitter';
+
+
+const { tableData, total, currentPage, pageSize, handlePageChange } = usePagination(fetchTableData);
+const filter = inject<Ref>('filter');
+const loading = ref(false);
+
+emitter.on('QueryPage-query', () => {
+  fetchTableData();
+});
+
+onBeforeUnmount(() => {
+  emitter.all.clear();
+});
+
+function fetchTableData() {
+  const query = {
+    search_term: filter.value.searchTerm,
+    marketplace_Ids: filter.value.marketIds,
+    report_type: filter.value.reportType,
+    date_start: filter.value.reportDate[0],
+    date_end: filter.value.reportDate[1],
+    page: currentPage.value,
+    limit: pageSize.value
+  };
+  useElTableData(api.getTableData, query, tableData, total, loading);
+}
+</script>
+
+<template>
+  <el-card shadow="hover" style="border: none; margin-bottom: 10px">
+    <el-table v-loading="loading" :data="tableData" height="600" stripe style="width: 100%"></el-table>
+    <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]"
+          :total="total"
+          layout="sizes, prev, pager, next"
+          @change="handlePageChange"/>
+    </div>
+  </el-card>
+</template>
+
+<style scoped></style>

src/views/featureWord/queryPage/api.ts

@@ -0,0 +1,12 @@
+import { request } from '/@/utils/service';
+
+const apiPrefix = '/api/searchterm/';
+
+
+export function getTableData(query: any) {
+  return request({
+    url: apiPrefix + 'featureword/',
+    method: 'GET',
+    params: query,
+  });
+}

src/views/featureWord/queryPage/index.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+/**
+ * @Name: index.vue
+ * @Description: 特征词查询页
+ * @Author: Cheney
+ */
+
+import { Download, Search } from '@element-plus/icons-vue';
+import WeightTable from './WeightTable.vue';
+import emitter from '/@/utils/emitter';
+import { onMounted, provide, ref, watch } from 'vue';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import enLocale from 'element-plus/es/locale/lang/en';
+
+const date = ref(calculateLastMonthFirstWeek());
+const dateRange = ref(date.value[0]);
+
+const filter = ref({
+  searchTerm: '',
+  marketIds: '',
+  reportType: 'WEEKLY',
+  reportDate: date
+});
+
+provide('filter', filter);
+
+onMounted(() => {
+  handleQuery();
+});
+
+/**
+ * 计算上个月第一周的日期
+ */
+function calculateLastMonthFirstWeek() {
+  const lastMonth = dayjs().subtract(1, 'month');
+  const firstDayOfLastMonth = lastMonth.startOf('month');
+  const firstSundayOfLastMonth = firstDayOfLastMonth.day(0); // 获取上个月第一个星期日
+  const firstSaturdayOfLastMonth = firstSundayOfLastMonth.add(6, 'day'); // 获取对应的星期六
+
+  return [
+    firstSundayOfLastMonth.format('YYYY-MM-DD'),
+    firstSaturdayOfLastMonth.format('YYYY-MM-DD')
+  ];
+}
+
+/**
+ * 判断当前日期类型 并 计算起始和结束日期
+ */
+function calculateDate() {
+  if (filter.value.reportType === 'WEEKLY') {
+    console.log('dateRange.value=> ', dateRange.value);
+    date.value[0] = dateRange.value;
+    date.value[1] = dayjs(dateRange.value).add(6, 'day').format('YYYY-MM-DD');
+  } else if (filter.value.reportType === 'MONTHLY') {
+    const selectedMonth = dayjs(dateRange.value);
+    date.value[0] = selectedMonth.startOf('month').format('YYYY-MM-DD');
+    date.value[1] = selectedMonth.endOf('month').format('YYYY-MM-DD');
+  }
+}
+
+const throttledEmit = _.throttle(() => {
+  emitter.emit('QueryPage-query');
+}, 3000);
+
+function handleQuery() {
+  throttledEmit();
+}
+
+function handleDownload() {
+  // Implement download logic here
+}
+
+
+</script>
+
+<template>
+  <div class="py-2 px-2.5">
+    <el-card body-class="flex justify-between gap-3.5" shadow="hover" style="border: none; margin-bottom: 10px">
+      <div class="flex flex-wrap gap-7">
+        <div>
+          <span class="font-bold mr-2" style="color: #303133">关键词:</span>
+          <el-input v-model="filter.searchTerm" style="width: 180px"></el-input>
+        </div>
+        <div>
+          <span class="font-bold mr-2" style="color: #303133">市场ID:</span>
+          <el-input v-model="filter.marketIds" style="width: 180px"></el-input>
+        </div>
+        <div>
+          <span class="font-bold mr-2" style="color: #303133">报告类型:</span>
+          <el-select v-model="filter.reportType" @change="calculateDate" style="width: 100px">
+            <el-option label="月度" value="MONTHLY"></el-option>
+            <el-option label="周度" value="WEEKLY"></el-option>
+          </el-select>
+        </div>
+        <div>
+          <span class="font-bold mr-2" style="color: #303133">报告日期:</span>
+          <el-config-provider v-if="filter.reportType === 'WEEKLY'" :locale="enLocale">
+            <el-date-picker
+                v-model="dateRange"
+                :format="`${date[0]} To ${date[1]}`"
+                type="week"
+                value-format="YYYY-MM-DD"
+                :disabled-date="(time: Date) => time > new Date()"
+                :clearable="false"
+                @change="calculateDate"
+            />
+          </el-config-provider>
+          <el-date-picker
+              v-else
+              v-model="dateRange"
+              type="month"
+              :format="`${date[0]} To ${date[1]}`"
+              value-format="YYYY-MM-DD"
+              :disabled-date="(time: Date) => time > new Date()"
+              :clearable="false"
+              @change="calculateDate"
+          />
+          <!--<MonthRangePicker v-if="filter.reportType === 'MONTHLY'" v-model="monthDate"/>-->
+          <!--<WeekRangePicker v-else v-model="weekDate"/>-->
+        </div>
+      </div>
+      <div class="flex gap-3.5">
+        <el-button :icon="Search" plain type="primary" @click="handleQuery">查询</el-button>
+        <el-button :icon="Download" plain round type="success" @click="handleDownload">下载管理</el-button>
+      </div>
+    </el-card>
+    <WeightTable/>
+  </div>
+</template>
+
+<style scoped></style>

src/views/searchTerm/analysisPage/QueryCondition.vue

@@ -1,61 +1,68 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: QueryCondition.vue
  * @Description:  搜索词-分析页-条件筛选栏
  * @Author: Cheney
  */
 import { RefreshLeft, Search } from '@element-plus/icons-vue';
-import { onBeforeMount, onMounted, ref, watch, inject, Ref } from 'vue';
+import { inject, onBeforeMount, onMounted, ref, Ref, watch } from 'vue';
 import emitter from '/@/utils/emitter';
 import WeekRangePicker from '/@/components/WeekRangePicker/index.vue';
 import MonthRangePicker from '/@/components/MonthRangePicker/index.vue';
-import dayjs from 'dayjs'
+import dayjs from 'dayjs';
+import _ from 'lodash';
+
 
 const weekDate = ref([
   dayjs().subtract(2, 'week').day(0).format('YYYY-MM-DD'),
-  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'week').day(6).format('YYYY-MM-DD')
 ]);
 const monthDate = ref([
   dayjs().subtract(2, 'month').startOf('month').format('YYYY-MM-DD'),
-  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD'),
+  dayjs().subtract(0, 'month').startOf('month').format('YYYY-MM-DD')
 ]);
 const defaultLabel = ref('ASIN');
 const filter = inject<Ref>('filter');
 
 onBeforeMount(() => {
   handleDateChange();
-})
+});
+
 onMounted(() => {
   handleQuery();
 });
 
-watch([weekDate, monthDate], () => {
+watch([ weekDate, monthDate ], () => {
   handleDateChange();
-})
+});
 
 watch(
-  () => filter.value.layerType,
-  (newValue) => {
-    if (newValue === 'asin_view') {
-      defaultLabel.value = 'ASIN';
-    } else if (newValue === 'brand_view') {
-      defaultLabel.value = 'Brand';
-    } else {
-      defaultLabel.value = 'ASIN';
-      filter.value.variable = '';
+    () => filter.value.layerType,
+    (newValue) => {
+      if (newValue === 'asin_view') {
+        defaultLabel.value = 'ASIN';
+      } else if (newValue === 'brand_view') {
+        defaultLabel.value = 'Brand';
+      } else {
+        defaultLabel.value = 'ASIN';
+        filter.value.variable = '';
+      }
     }
-  }
 );
 
-function handleQuery() {
+const throttledEmit = _.throttle(() => {
   emitter.emit('QueryCondition-sendRequest');
+}, 3000);
+
+function handleQuery() {
+  throttledEmit();
 }
 
 function resetCondition() {
-  filter.value.layerType = '';
+  filter.value.layerType = 'asin_view';
   filter.value.searchTerm = '';
-  filter.value.reportType = '';
-  filter.value.reportDate = '';
+  filter.value.reportType = 'MONTHLY';
+  // filter.value.reportDate = '';
   filter.value.variable = '';
 }
 
@@ -82,7 +89,7 @@ function handleDateChange() {
       </div>
       <div>
         <span class="font-bold mr-2" style="color: #303133">报告类型:</span>
-        <el-select v-model="filter.reportType" @change="handleDateChange" style="width: 100px">
+        <el-select v-model="filter.reportType" style="width: 100px" @change="handleDateChange">
           <el-option label="月度" value="MONTHLY"></el-option>
           <el-option label="周度" value="WEEKLY"></el-option>
         </el-select>
@@ -97,13 +104,13 @@ function handleDateChange() {
       </div>
       <div>
         <span class="font-bold mr-2" style="color: #303133">报告日期:</span>
-        <MonthRangePicker v-model="monthDate" v-if="filter.reportType === 'MONTHLY'" />
-        <WeekRangePicker v-model="weekDate" v-else />
+        <MonthRangePicker v-if="filter.reportType === 'MONTHLY'" v-model="monthDate"/>
+        <WeekRangePicker v-else v-model="weekDate"/>
       </div>
     </div>
     <div class="flex gap-3.5">
-      <el-button type="primary" plain :icon="Search" @click="handleQuery">查询</el-button>
-      <el-button type="warning" plain round :icon="RefreshLeft" color="#0891b2" @click="resetCondition">重置</el-button>
+      <el-button :icon="Search" plain type="primary" @click="handleQuery">查询</el-button>
+      <el-button :icon="RefreshLeft" color="#0891b2" plain round type="warning" @click="resetCondition">重置</el-button>
     </div>
   </el-card>
 </template>

src/views/searchTerm/analysisPage/api.ts

@@ -33,6 +33,7 @@ export function getWordCloudData(query: any) {
     params: query,
   });
 }
+
 export function getTableData(query: any) {
   return request({
     url: apiPrefix + 'rootmetric/',