feat: 完善下载报告功能

xinkeaboard-promotion-portal/src/components/competitor/RankTable.vue

@@ -33,28 +33,37 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useMainStore } from '@/store';
 
-const tableData = ref([
-  {
-    searchVolume: 5400,
-    cpc: 0.16,
-    monthly: 50,
-    keyword: 'popmart.com',
-    quarterly: 50,
-    dp: 92,
-    yearly: 10471
-  },
-  {
-    searchVolume: 70,
-    cpc: 0.96,
-    monthly: 27,
-    keyword: 'pop art usa',
-    quarterly: 27,
-    dp: 6,
-    yearly: 600
-  }
-]);
+const props = defineProps<{
+  tableData: any[];
+}>();
+
+const mainStore = useMainStore();
+
+const expanded = computed(() => mainStore.getExpanded);
+const tableData = expanded.value ? props.tableData : props.tableData.slice(0, 10);
+// const tableData = ref([
+//   {
+//     searchVolume: 5400,
+//     cpc: 0.16,
+//     monthly: 50,
+//     keyword: 'popmart.com',
+//     quarterly: 50,
+//     dp: 92,
+//     yearly: 10471
+//   },
+//   {
+//     searchVolume: 70,
+//     cpc: 0.96,
+//     monthly: 27,
+//     keyword: 'pop art usa',
+//     quarterly: 27,
+//     dp: 6,
+//     yearly: 600
+//   }
+// ]);
 </script>
 
 <style lang="scss" scoped>

xinkeaboard-promotion-portal/src/components/competitor/RecommendTable.vue

@@ -22,20 +22,30 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useMainStore } from '@/store';
 
-const tableData = ref([
-  {
-    searchVolume: 1500000,
-    keywords: 'pop mart',
-    price: 0.11
-  },
-  {
-    searchVolume: 480,
-    keywords: 'popmart global',
-    price: 0.57
-  }
-]);
+const props = defineProps<{
+  tableData: any[];
+}>();
+
+const mainStore = useMainStore();
+
+const expanded = computed(() => mainStore.getExpanded);
+const tableData = expanded.value ? props.tableData : props.tableData.slice(0, 10);
+
+// const tableData = ref([
+//   {
+//     searchVolume: 1500000,
+//     keywords: 'pop mart',
+//     price: 0.11
+//   },
+//   {
+//     searchVolume: 480,
+//     keywords: 'popmart global',
+//     price: 0.57
+//   }
+// ]);
 </script>
 
 <style lang="scss" scoped>

xinkeaboard-promotion-portal/src/components/competitor/item.vue

@@ -18,10 +18,10 @@
       </div>
       <div class="competitor-item-show__line"></div>
       <div class="competitor-item-show__sort">
-        <RankTable></RankTable>
+        <RankTable :tableData="rankBOList"></RankTable>
       </div>
       <div class="competitor-item-suggestion">
-        <RecommendTable></RecommendTable>
+        <RecommendTable  :tableData="rankBOList"></RecommendTable>
       </div>
       <div class="competitor-item-show__bottom">立即下载报告，查看更多</div>
     </div>
@@ -43,6 +43,8 @@ const props = defineProps<{
 }>();
 
 const trafficBOData = reactive<TrafficBO>({} as TrafficBO);
+const rankBOList = ref<any[]>([]);
+const recommendationBOList = ref<any[]>([]);
 const loading = ref<boolean>(false);
 const autoFinish = ref<boolean>(false);
 const fail = ref<boolean>(false);
@@ -60,6 +62,8 @@ const getRivalData = () => {
         trafficBOData.organic.push(item.organic);
         trafficBOData.paids.push(item.paid);
       });
+      rankBOList.value = res.competitorBOS.rankBOList;
+      recommendationBOList.value = res.competitorBOS.recommendationBOList;
       autoFinish.value = true;
       setTimeout(() => {
         loading.value = false;

xinkeaboard-promotion-portal/src/components/keyword/table.vue

@@ -6,7 +6,7 @@
       :text="fail ? '生成失败' : 'AI数据生成中...'"
       v-if="loading"
     ></Empty>
-    <el-table :data="tableData" v-else>
+    <el-table :data="renderTableData" v-else>
       <el-table-column prop="keyword" align="right">
         <template #header>
           <img :src="Help" />
@@ -37,10 +37,14 @@ import Empty from '@/components/CommonEmpty.vue';
 
 const mainStore = useMainStore();
 
+const expanded = computed(() => mainStore.getExpanded);
+
 const tableData = computed(() => mainStore.suggestionsInfo.data);
 const loading = computed(() => mainStore.suggestionsInfo.loading);
 const autoFinish = computed(() => mainStore.suggestionsInfo.autoFinish);
 const fail = computed(() => mainStore.suggestionsInfo.fail);
+
+const renderTableData = computed(() => expanded.value ? tableData.value : tableData.value.slice(0, 5));
 </script>
 
 <style lang="scss" scoped>

xinkeaboard-promotion-portal/src/views/Home.vue

@@ -35,8 +35,9 @@ const Tab1 = computed(() => {
     return Record3;
   }
 });
-console.log(Tab1, 'Tab1');
-onMounted(() => {});
+onMounted(() => {
+  sessionStorage.removeItem('formData')
+});
 
 onUnmounted(() => {});
 </script>