导出pdf功能开发

package.json

@@ -49,8 +49,10 @@
     "event-source-polyfill": "^1.0.31",
     "flag-icon-css": "^4.1.7",
     "highlight.js": "^11.9.0",
+    "html2canvas": "^1.4.1",
     "intro.js": "^7.2.0",
     "jquery": "^3.7.1",
+    "jspdf": "^2.5.2",
     "lodash-es": "^4.17.21",
     "lodash.get": "^4.4.2",
     "lodash.pick": "4.4.0",

src/views/adweb/data/enquiryAnalysis.vue

@@ -175,7 +175,7 @@ const getFlowIndexNumber = async () => {
       return;
     }
 
-    enquiryIndexNumber.value.unRead = res.result.totalUsers;
+    enquiryIndexNumber.value.unRead = res.result.unreadEnquires;
     enquiryIndexNumber.value.conversionRate = res.result.enquiryConversionRate;
     enquiryIndexNumber.value.enquiry = res.result.enquires;
     const r = res.result.dailyStats;

src/views/adweb/seo/Pdf.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="wrap container">
+  <div class="wrap container" id="pdf-content">
     <!-- 页头 -->
     <div class="top row">
       <p id="companyName">{{ customerName }} - SEO月度报告</p>
       <p class="time" style="color: #fff!important;">日期：<span id="startTime"
-                                                                style="color: #fff!important;">{{ monthFirstDayStr
-        }}</span>-<span id="endTime" style="color: #fff!important;">{{ monthEndDayStr }}</span></p>
+                                                                style="color: #fff!important;">{{ dayjs(monthStr).startOf("month").format("YYYY-MM-DD")
+        }}</span>-<span id="endTime" style="color: #fff!important;">{{ dayjs(monthStr).endOf("month").format("YYYY-MM-DD") }}</span></p>
     </div>
     <!-- 数据模块 -->
     <section style="padding: 0 30px">
@@ -28,7 +28,7 @@
           在过去的1个月里，我们致力于为您的网站进行全面的SEO优化工作。通过对关键词排名、网站结构、内容优化以及用户体验等方面的深入分析和优化，以下是我们的SEO优化总结：
         </div>
         <div class="content" id="dangyue">
-          <div>{{ fromEdit.monthSummary }}</div>
+          <div>{{ detailInfo.thisMonth }}</div>
         </div>
       </section>
 
@@ -43,7 +43,7 @@
           感谢您对我们的SEO优化工作的信任。在下个月，我们计划继续改进和优化您的网站，以进一步提升其在搜索引擎中的表现。以下是我们的下月优化计划：
         </div>
         <div class="content" id="xiayue">
-          <div>{{ fromEdit.nextMonthPlan }}</div>
+          <div>{{ detailInfo.nextMonth }}</div>
         </div>
         <div class="tip" style="margin-top: 10px;">
           我们将按照以上优化计划，不断努力提升您的网站在搜索引擎中的表现。如果您有任何疑问或需要进一步讨论，请随时与我们联系。感谢您的合作，我们期待着实现更大的SEO成功！
@@ -64,51 +64,49 @@
           <p class="tip">
             以下是一些关键的流量指标和相应的数据展示：
           </p>
-          <div id="seoliuliang" style="height: 440px;width: 1140px;"></div>
-          <div class="loader loader1" style="display: none;">
-            <p class="empty">暂无数据</p>
-          </div>
+          <a-row class="r5-1">
+              <a-col :span="24">
+                <area-chart v-if="coreDataChart.x.length > 0"
+                            :dataSource="coreDataChart"></area-chart>
+                <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
+              </a-col>
+            </a-row>
         </div>
       </section>
       <section class="row r2">
         <div class="item impressionsNum" style="border-color: #E3EDFE">
-          <img src="@/assets/pdfExport/img/uvicon.svg" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">1000</span></p>
+                                  style="color: #4385F4!important;">{{ statistics.uv }}</span></p>
             <p class="title"> 访客数(UV)</p>
           </div>
         </div>
         <div class="item" style="border-color: #C6DAFB">
-          <img src="@/assets/pdfExport/img/pvicon.svg" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">2000</span></p>
+                                  style="color: #4385F4!important;">{{ statistics.pv }}</span></p>
             <p class="title"> 浏览量(PV)</p>
           </div>
         </div>
         <div class="item" style="border-color: #AAC8FA">
-          <img src="@/assets/pdfExport/img/unReadEnquiryNum.svg" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">123123</span></p>
+                                  style="color: #4385F4!important;">{{ statistics.averageVisit }}</span></p>
             <p class="title"> 日均访问量</p>
           </div>
         </div>
         <div class="item" style="border-color: #98BCF9">
-          <img src="@/assets/pdfExport/img/pingjun.svg" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">123</span>
+                                  style="color: #4385F4!important;">{{ statistics.averageVisitDuration }}</span>
             </p>
             <p class="title"> 平均访问时长</p>
           </div>
         </div>
         <div class="item" style="border: none">
-          <img src="@/assets/pdfExport/img/conversionRate.svg" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">234234</span>
+                                  style="color: #4385F4!important;">{{ statistics.averageVisitPage }}</span>
             </p>
             <p class="title"> 平均访问页面数</p>
           </div>
@@ -122,23 +120,37 @@
         <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
       </section>
       <section class="row table-row">
-        <table class="table">
-          <thead>
-          <th>来源</th>
-          <th>浏览量(PV)</th>
-          <th>浏览量占比</th>
-          </thead>
-          <tbody id="tableBody1">
-          <tr>
-            <td> 123</td>
-            <td> 333</td>
-            <td> 312</td>
-          </tr>
-          </tbody>
-        </table>
-        <div class="loader loader1">
-          <p class="empty">暂无数据</p>
-        </div>
+        <a-row>
+              <a-col :span="24">
+                <a-table
+                  :columns="mostAccessColumns"
+                  :data-source="mostAccessDatasource"
+                  size="middle"
+                  :pagination="false">
+                  <template #bodyCell="{ column, text }">
+                    <template v-if="column.key ==='pagePathSlot' ">
+                      <a-popover>
+                        <template slot="content">
+                          {{ text }}
+                        </template>
+                        <a :href="text" target="_blank">
+                          <div
+                            style="width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                            {{ text }}
+                          </div>
+                        </a>
+                      </a-popover>
+                    </template>
+                    <template v-if="column.key ==='centerSlot' ">
+                      <span style="margin-left: 20px;">{{ text }}</span>
+                    </template>
+                    <template v-if="column.key ==='avgTimeOnPageSlot' ">
+                      <span style="margin-left: 30px;">{{ text }} s</span>
+                    </template>
+                  </template>
+                </a-table>
+              </a-col>
+            </a-row>
       </section>
       <!--网站排名-->
       <div class="bg-advich">
@@ -151,82 +163,119 @@
           <div class="col-sm-12">
             <p class="tip">
               在本月的SEO月报中，我们向您展示关于您网站排名的部分数据。因关键词排名数据量较大且实时变化，这边仅展示前50个关键词排名细节，您可登录后台查看全部数据。以下是一些的排名指标和相应的数据展示：</p>
-          </div>
-          <div class="col-sm-12">
-            <div class="loader loader1">
-              <p class="empty">暂无数据</p>
-            </div>
-          </div>
-          <div class="col-sm-12 flex-row">
-            <div class="item1">
-              <div class="item">
-                <img src="@/assets/pdfExport/img/zhidingci.svg" />
-                <p>指定词</p>
-                <p class="fb theme-color font-size-24"
-                   style="color: #4385F4!important;">1111</p>
-              </div>
-            </div>
-            <div class="item2">
-              <div class="wrap">
-                <p class="t1">指定词排名</p>
-                <div class="content">
-                  <div class="d1"><img src="@/assets/pdfExport/img/NO1.svg" />1-10位
-                  </div>
-                  <div class="d2 fb theme-color font-size-24"
-                       style="color: #4385F4!important;">2 个
-                  </div>
+              <a-row
+              v-if="appointKeywordNum == null && longTailKeywordNum == null">
+              <a-col>
+                <a-empty style="padding-top: 50px" />
+              </a-col>
+            </a-row>
+            <a-row type="flex">
+              <a-col :span="3" v-if="appointKeywordNum">
+                <div class="item">
+                  <img src="@/assets/pdfExport/zhidingci.svg" />
+                  <p>指定词</p>
+                  <p>{{ appointKeywordNum }}</p>
                 </div>
-                <div class="content">
-                  <div class="d1"><img src="@/assets/pdfExport/img/NO2.svg" />11-30位
+              </a-col>
+              <a-col :span="longTailKeywordNum ? 9 : 21"
+                     v-if="appointKeywordNum">
+                <div class="wrap">
+                  <p class="t1">指定词排名</p>
+                  <div class="content">
+                    <div class="d1"><img src="@/assets/pdfExport/NO1.svg" />1-10位</div>
+                    <div class="d2">{{ rankInfo.appointKeyword.firstNum }}个
+                    </div>
                   </div>
-                  <div class="d2 fb theme-color font-size-24"
-                       style="color: #4385F4!important;">3 个
+                  <div class="content">
+                    <div class="d1"><img src="@/assets/pdfExport/NO2.svg" />11-30位</div>
+                    <div class="d2">{{ rankInfo.appointKeyword.secondNum }}个
+                    </div>
                   </div>
-                </div>
-                <div class="content">
-                  <div class="d1"><img src="@/assets/pdfExport/img/NO3.svg" />31-100位
-                  </div>
-                  <div class="d2 fb theme-color font-size-24"
-                       style="color: #4385F4!important;">10个
+                  <div class="content">
+                    <div class="d1"><img src="@/assets/pdfExport/NO3.svg" />31-100位</div>
+                    <div class="d2">{{ rankInfo.appointKeyword.thirdType }}个
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div class="item1">
-              <div class="item">
-                <img src="@/assets/pdfExport/img/changweici.svg" />
-                <p>关键词</p>
-                <p class="fb theme-color font-size-24"
-                   style="color: #4385F4!important;">22</p>
-              </div>
-            </div>
-            <div class="item2">
-              <div class="wrap">
-                <p class="t1">关键词排名</p>
-                <div class="content">
-                  <div class="d1"><img src="@/assets/pdfExport/img/NO1.svg" />1-10位
-                  </div>
-                  <div class="d2 fb theme-color font-size-24"
-                       style="color: #4385F4!important;">3 个
-                  </div>
+              </a-col>
+              <a-col :span="3" v-if="longTailKeywordNum">
+                <div class="item">
+                  <img src="@/assets/pdfExport/changweici.svg" />
+                  <p>关键词</p>
+                  <p>{{ longTailKeywordNum }}</p>
                 </div>
-                <div class="content">
-                  <div class="d1"><img src="@/assets/pdfExport/img/NO2.svg" />11-30位
+              </a-col>
+              <a-col :span="appointKeywordNum ? 9 : 21" v-if="longTailKeywordNum">
+                <div class="wrap">
+                  <p class="t1">关键词排名</p>
+                  <div class="content">
+                    <div class="d1"><img src="../../../assets/seo/NO1.svg" />1-10位</div>
+                    <div class="d2">{{ rankInfo.longTailKeyword.firstNum }}个
+                    </div>
                   </div>
-                  <div class="d2 fb theme-color font-size-24"
-                       style="color: #4385F4!important;">40 个
-                  </div>
-                </div>
-                <div class="content">
-                  <div class="d1"><img src="@/assets/pdfExport/img/NO3.svg" />31-100位
+                  <div class="content">
+                    <div class="d1"><img src="@/assets/pdfExport/NO2.svg" />11-30位</div>
+                    <div class="d2">{{ rankInfo.longTailKeyword.secondNum }}个
+                    </div>
                   </div>
-                  <div class="d2 fb theme-color font-size-24"
-                       style="color: #4385F4!important;">20 个
+                  <div class="content">
+                    <div class="d1"><img src="@/assets/pdfExport/NO3.svg" />31-100位</div>
+                    <div class="d2">{{ rankInfo.longTailKeyword.thirdType }}个
+                    </div>
                   </div>
                 </div>
-              </div>
+              </a-col>
+              <a-col :span="24" v-if="appointKeywordsList.length > 0">
+                <h2 class="title mb">指定词排名列表</h2>
+                <a-table
+                  ref="table"
+                  size="middle"
+                  :scroll="{x:true}"
+                  :columns="appointKeywordPageListColumns"
+                  :pagination="ipagination"
+                  :dataSource="appointKeywordsList"
+                >
+                  <template #bodyCell="{ column, record, index, text }">
+                    <template v-if="column.key === 'rowIndex'">
+                      {{ index + 1 }}
+                    </template>
+
+                    <template class="tag" v-if="column.key === 'lastRank'">
+                      {{ record.lastRank }}
+                    </template>
+
+                    <template v-if="column.key === 'positionUrl'">
+                      <a :href="text" target="_blank">{{ text }}</a>
+                    </template>
+                  </template>
+                </a-table>
+              </a-col>
+              <a-col :span="24" v-if="longTailKeywordsList.length > 0">
+                <h2 class="title mb">关键词排名列表</h2>
+                <a-table
+                  ref="table"
+                  size="middle"
+                  :scroll="{x:true}"
+                  :columns="longTailPageListColumns"
+                  :pagination="ipagination"
+                  :dataSource="longTailKeywordsList"
+                >
+                  <template #bodyCell="{ column, record, index, text }">
+                    <template v-if="column.key ==='rowIndex'">
+                      {{ index + 1 }}
+                    </template>
+                    <template class="tag" v-if="column.key ==='lastRank'">
+                      {{ record.lastRank }}
+                    </template>
+                    <template v-if="column.key ==='positionUrl'">
+                      <a :href="text" target="_blank">{{ text }}</a>
+                    </template>
+                  </template>
+                </a-table>
+              </a-col>
+
+            </a-row>
             </div>
-          </div>
         </section>
       </div>
     </section>
@@ -237,20 +286,28 @@
       <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
     </section>
     <section class="row table-row">
-      <table class="table">
-        <thead>
-        <th style="min-width: 80px;text-align: center">序号</th>
-        <th>关键词</th>
-        <th style="min-width: 120px">排名</th>
-        </thead>
-        <tbody id="tableBody2">
-        <tr>
-          <td style="text-align: center">1</td>
-          <td style="text-align: left"><a href="www">www</a></td>
-          <td style="text-align: center">1</td>
-        </tr>
-        </tbody>
-      </table>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{x:true}"
+        :columns="appointKeywordPageListColumns"
+        :pagination="ipagination"
+        :dataSource="appointKeywordsList"
+      >
+        <template #bodyCell="{ column, record, index, text }">
+          <template v-if="column.key === 'rowIndex'">
+            {{ index + 1 }}
+          </template>
+
+          <template class="tag" v-if="column.key === 'lastRank'">
+            {{ record.lastRank }}
+          </template>
+
+          <template v-if="column.key === 'positionUrl'">
+            <a :href="text" target="_blank">{{ text }}</a>
+          </template>
+        </template>
+      </a-table>
     </section>
 
     <section class="row title-row">
@@ -259,20 +316,26 @@
       <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
     </section>
     <section class="row table-row">
-      <table class="table">
-        <thead>
-        <th style="min-width: 80px;text-align: center">序号</th>
-        <th>关键词</th>
-        <th style="min-width: 120px">排名</th>
-        </thead>
-        <tbody id="tableBody3">
-        <tr>
-          <td style="text-align: center">1</td>
-          <td style="text-align: left"><a href="www">www</a></td>
-          <td style="text-align: center">1</td>
-        </tr>
-        </tbody>
-      </table>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{x:true}"
+        :columns="longTailPageListColumns"
+        :pagination="ipagination"
+        :dataSource="longTailKeywordsList"
+      >
+        <template #bodyCell="{ column, record, index, text }">
+          <template v-if="column.key ==='rowIndex'">
+            {{ index + 1 }}
+          </template>
+          <template class="tag" v-if="column.key ==='lastRank'">
+            {{ record.lastRank }}
+          </template>
+          <template v-if="column.key ==='positionUrl'">
+            <a :href="text" target="_blank">{{ text }}</a>
+          </template>
+        </template>
+      </a-table>
     </section>
     <!--网站外链-->
     <div class="bg-advich">
@@ -377,42 +440,140 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
 import "@/assets/pdfExport/style/index.less";
 import "@/assets/pdfExport/style/reset.less";
+import html2Canvas from 'html2canvas';
+import JsPDF from 'jspdf';
+import dayjs from 'dayjs';
+import AreaChart from "@/views/adweb/data/chart/areaChart.vue";
 
-export default {
-  data() {
-    return {
-      customerName: "",
-      monthStr: "",
-      monthFirstDayStr: "",
-      monthEndDayStr: "",
-      fromEdit: {},
-      fromGA: {}
-    };
+// 最多访问TOP10列表
+const mostAccessColumns = ref([
+  {
+    title: "来源",
+    dataIndex: "pagePath",
+    scopedSlots: {
+      customRender: "pagePathSlot"
+    }
   },
-  mounted() {
-    // 在这里获取数据并赋值给组件的data属性
-    // 例如，可以通过API请求获取数据
-    // 然后使用this.$set来更新数据
-    this.customerName = "Your Customer Name";
-    this.monthStr = "Month Year";
-    this.monthFirstDayStr = "Start Date";
-    this.monthEndDayStr = "End Date";
-    this.fromEdit = {
-      monthSummary: "Monthly Summary Content",
-      nextMonthPlan: "Next Month Plan Content"
-    };
-    this.fromGA = {
-      accessData: {
-        uv: "1000",
-        pv: "5000",
-        unReadEnquiryNum: "10"
+  {
+    title: "浏览量（PV）",
+    dataIndex: "pageViews",
+    defaultSortOrder: "descend",
+    sorter: (a, b) => a.pageViews - b.pageViews,
+    width: 160,
+    scopedSlots: {
+      customRender: "centerSlot"
+    }
+  },
+  {
+    title: "浏览量占比",
+    dataIndex: "pvProportion",
+    width: 160,
+    scopedSlots: {
+      customRender: "centerSlot"
+    }
+  }
+]);
+// 响应式数据
+const customerName = ref("");
+const monthStr = ref("");
+const detailInfo = ref({});
+const rankInfo = ref({});
+const appointKeywordsList = ref([]);
+const longTailKeywordsList = ref([]);
+const appointKeywordNum = ref();
+const longTailKeywordNum = ref();
+const coreDataChart = ref({
+  x: [],
+  pv: [],
+  uv: [],
+  enquiry: []
+});
+const statistics = ref({
+  uv: 0,
+  pv: 0,
+  averageVisit: 0,
+  averageVisitDuration: 0,
+  averageVisitPage: 0,
+  bounceRate: "0%",
+  conversionRate: "0%"
+});
+const mostAccessDatasource = ref([]);
+
+// 处理从 SeoPdfExport 接收的数据
+const handleSeoPdfExportData = (data) => {  
+  console.log(data);
+  customerName.value = data.customerName;
+  monthStr.value = data.monthStr;
+  detailInfo.value = data.detailInfo;
+  rankInfo.value = data.rankInfo;
+  appointKeywordsList.value = data.appointKeywordsList;
+  longTailKeywordsList.value = data.longTailKeywordsList;
+  appointKeywordNum.value = data.appointKeywordNum;
+  longTailKeywordNum.value = data.longTailKeywordNum;
+  coreDataChart.value = data.coreDataChart;
+  statistics.value = data.statistics;
+  mostAccessDatasource.value = data.mostAccessDatasource;
+};
+
+// 导出 PDF
+const exportPdf = async () => {
+  const element = document.querySelector('#pdf-content');
+  const canvas = await html2Canvas(element, {
+    useCORS: true,
+    allowTaint: true,
+    scale: 2
+  });
+  
+  const contentWidth = canvas.width;
+  const contentHeight = canvas.height;
+  
+  const pageHeight = (contentWidth / 592.28) * 841.89;
+  let leftHeight = contentHeight;
+  let position = 0;
+  const imgWidth = 592.28;
+  const imgHeight = (592.28 / contentWidth) * contentHeight;
+
+  const PDF = new JsPDF('p', 'pt', 'a4');
+  
+  if (leftHeight < pageHeight) {
+    PDF.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, imgWidth, imgHeight);
+  } else {
+    while (leftHeight > 0) {
+      PDF.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, imgWidth, imgHeight);
+      leftHeight -= pageHeight;
+      position -= 841.89;
+      if (leftHeight > 0) {
+        PDF.addPage();
       }
-    };
+    }
   }
+
+  PDF.save(`${customerName.value}-SEO月度报告.pdf`);
 };
+
+// 生命周期钩子
+onMounted(async () => {
+  const pdfData = JSON.parse(localStorage.getItem('pdfExportData'));
+  console.log(pdfData);
+  if (pdfData) {
+    handleSeoPdfExportData(pdfData);
+    // Wait for the next tick to ensure all data is rendered
+    await nextTick();
+    // Add a small delay to ensure images are loaded
+    setTimeout(() => {
+      exportPdf();
+    }, 1000);
+  }
+});
+
+// 如果使用 mitt，需要在组件卸载时移除事件监听
+// onUnmounted(() => {
+//   emitter.off('SeoPdfExportData', handleSeoPdfExportData);
+// });
 </script>
 
 <style scoped lang="less">

src/views/adweb/seo/SeoPdfExport.vue

@@ -57,7 +57,7 @@
               <a-button type="default" @click="handleEdit" preIcon="ant-design:edit-outlined"
                         class="btn6">修改话术
               </a-button>
-              <a-button type="primary" preIcon="ant-design:file-pdf" @click="exportPDF"
+              <a-button type="primary" preIcon="ant-design:file-pdf" @click="handleExportPdf"
                         class="btn1">导出pdf
               </a-button>
               <a-button type="default" preIcon="ant-design:reload" @click="goBack" class="btn2">
@@ -65,8 +65,8 @@
               </a-button>
             </h1>
             <p style='margin-top: 15px'>
-              生成周期：{{ moment(formState.range.format("YYYY-MM")).startOf("month").format("YYYY-MM-DD")
-              }}至{{ moment(formState.range.format("YYYY-MM")).endOf("month").format("YYYY-MM-DD")
+              生成周期：{{ dayjs(formState.range).startOf("month").format("YYYY-MM-DD")
+              }}至{{ dayjs(formState.range).endOf("month").format("YYYY-MM-DD")
               }}</p>
           </section>
           <section class="s1">
@@ -74,7 +74,7 @@
               尊敬的【{{ formState.siteName.label
               }}】：</p>
             <p class="p1" style="text-indent: 28px">
-              我非常高兴向您呈上{{ moment(formState.range).format("YYYY-MM")
+              我非常高兴向您呈上{{ dayjs(formState.range).format("YYYY-MM")
               }}月的SEO月报，为您提供网站在SEO中的详尽数据和分析。作为您的SEO团队，一直努力追求卓越的结果，以确保您的在线业务能够获得更大的曝光度和持续增长.</p>
             <p class="p1" style="text-indent: 28px">
               在过去的一个月里，我们积极地致力于提升您的网站的可见性和排名，并进行了一系列优化策略的实施。具体细节请参考以下报告细节。</p>
@@ -112,11 +112,6 @@
             <p class="tips">以下是一些关键的流量指标和相应的数据展示：</p>
             <a-row class="r5-1">
               <a-col :span="24">
-                <div class="fr" v-if="coreDataChart.x.length > 0">
-                  <span><i style="background: #544BEB;"></i>访客数（UV）</span>
-                  <span><i style="background: #F0B358;"></i>浏览量（PV）</span>
-                  <span><i style="background: #58CCA8;"></i>询盘数</span>
-                </div>
                 <area-chart v-if="coreDataChart.x.length > 0"
                             :dataSource="coreDataChart"></area-chart>
                 <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
@@ -223,7 +218,7 @@
                   <p>{{ longTailKeywordNum }}</p>
                 </div>
               </a-col>
-              <a-col :span="appointKeywordNum ? 9 : 21" v-if="rankInfo.longTailKeyword">
+              <a-col :span="appointKeywordNum ? 9 : 21" v-if="longTailKeywordNum">
                 <div class="wrap">
                   <p class="t1">关键词排名</p>
                   <div class="content">
@@ -388,7 +383,7 @@
 
 import { onMounted, reactive, ref } from "vue";
 import { getAction, postAction } from "/@/api/manage/manage";
-import moment from "moment";
+import dayjs from "dayjs";
 import SeoPdfExportModal from "@/views/adweb/seo/components/SeoPdfExportModal.vue";
 import { useModal } from "@/components/Modal";
 //注册model
@@ -519,7 +514,7 @@ const getSiteOption = () => {
   });
 };
 const disabledDate = (current) => {
-  return current > moment().subtract(1, "months");
+  return current > dayjs().subtract(1, "months");
 };
 const onSubmit = () => {
   formRef.value.validate().then(() => {
@@ -558,8 +553,8 @@ const ipagination = ref({
 const getInfo = () => {
   let queryParam = {
     siteCode: formState.siteName.value,
-    start: moment(formState.range.format("YYYY-MM")).startOf("month").format("YYYY-MM-DD"),
-    end: moment(formState.range.format("YYYY-MM")).endOf("month").format("YYYY-MM-DD")
+    start: dayjs(formState.range).startOf("month").format("YYYY-MM-DD"),
+    end: dayjs(formState.range).endOf("month").format("YYYY-MM-DD")
   };
   infoLoading.value = true;
   try {
@@ -647,8 +642,8 @@ const getMostAccessList = async () => {
     let queryParam = {
       siteCode: formState.siteName.value,
       limit: 10,
-      start: moment(formState.range.format("YYYY-MM")).startOf("month").format("YYYY-MM-DD"),
-      end: moment(formState.range.format("YYYY-MM")).endOf("month").format("YYYY-MM-DD")
+      start: dayjs(formState.range).startOf("month").format("YYYY-MM-DD"),
+      end: dayjs(formState.range).endOf("month").format("YYYY-MM-DD")
     };
     const res = await getAction("/dmp-data/page-path/stats", queryParam);
     if (res.code == 200) {
@@ -717,15 +712,36 @@ const getSeoMonthPlanContent = () => {
   });
 };
 
-function exportPDF() {
-  // 假设你有一个生成 PDF 的 URL
-  const pdfUrl = "/pdf";
+function handleExportPdf() {
+  const data = {
+    customerName: formState.customerName,
+    monthStr: dayjs(formState.range).format('YYYY-MM'),
+    detailInfo: detailInfo.value,
+    rankInfo: rankInfo.value,
+    appointKeywordNum: appointKeywordNum.value,
+    longTailKeywordNum: longTailKeywordNum.value,
+    appointKeywordsList: appointKeywordsList.value,
+    longTailKeywordsList: longTailKeywordsList.value,
+    coreDataChart: coreDataChart.value,
+    statistics: statistics.value,
+    mostAccessDatasource: mostAccessDatasource.value
+  };
+
+  // Store data in localStorage
+  localStorage.setItem('pdfExportData', JSON.stringify(data));
+
+  // Open the Pdf page in a new tab
+  const url = router.resolve({
+    name: 'Pdf'
+  }).href;
 
-  // 使用 window.open 打开新窗口
-  window.open(pdfUrl, '_blank');
+  window.open(url, '_blank');
 }
 
 function goBack() {
+  // Clear localStorage data
+  localStorage.removeItem('pdfExportData');
+  
   flag.value = true;
   coreDataChart.value.x = [];
   coreDataChart.value.pv = [];
@@ -743,7 +759,7 @@ function goBack() {
   formState.customerName = '';
   appointKeywordsList.value = [];
   longTailKeywordsList.value = [];
-  formState.range = moment().subtract(1, "months");
+  formState.range = dayjs().subtract(1, "months");
 }
 
 const resetForm = () => {