adweb3-web/src/views/adweb/seo/SeoKeywordsRankList.vue

<template>
  <div class="seo_keywords_rank_wrap">
    <a-row class="r1 search-form">
      <a-col :span="24" class="search-form-container">
        <div class="choose-site">
          <span class="t1">站点：</span>
          <select-site @set-site-info="changeSite" selectWidth="300px" />
          <span style="margin-left: 16px" class="t1">{{ comprehenInfo.planName ? comprehenInfo.planName : '暂无SEO推广套餐~' }}
            <a-popover placement="bottom"
              v-show="comprehenInfo.planName">
              <template #content>
                <span> 指定关键词数：{{ comprehenInfo.planAppointKeywordNum }}&nbsp; </span>
                <span> 长尾关键词数：{{ comprehenInfo.planLongTailKeywordNum }}&nbsp; </span>
                <span> 外链数：{{ comprehenInfo.planOuterLinkNum }}&nbsp; </span>
                <span> 文章数：{{ comprehenInfo.planArticleNum }} </span>
              </template>
              <img
                src="https://cutomer-static-bucket.s3.cn-northwest-1.amazonaws.com.cn/public/material/220803883dfy/document/changjianwenti_1676606434975.png"
                alt="issue" width="25px" height="25px" />
            </a-popover>
          </span>
        </div>
      </a-col>
    </a-row>
    <a-row class="r2" type="flex" justify="center" align="middle">
      <a-col :span="6">
        <p class="t1"><img src="../../../assets/seo/zhidingci.svg" />指定关键词数</p>
        <p class="t2" v-if="comprehenInfo.appointKeywordNum == null"> - </p>
        <p class="t2" v-else>
          <a @click="changeKeywordType()">{{ comprehenInfo.appointKeywordNum }}</a>
        </p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img src="../../../assets/seo/changweici.svg" />长尾关键词数</p>
        <p class="t2" v-if="comprehenInfo.longTailKeywordNum == null"> - </p>
        <p class="t2" v-else>
          <a @click="longChangeKeywordType()">{{ comprehenInfo.longTailKeywordNum }}</a>
        </p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img src="../../../assets/seo/lianjieshu.svg" />外链数</p>
        <p class="t2" v-if="comprehenInfo.outerLinkNum == null"> - </p>
        <p class="t2">
          <span>{{ comprehenInfo.outerLinkNum }}</span>
        </p>
      </a-col>
      <a-col :span="6">
        <p class="t1"><img src="../../../assets/seo/wenzhangshu.svg" />文章数</p>
        <p class="t2" v-if="comprehenInfo.articleNum == null"> - </p>
        <p class="t2">
          <span>{{ comprehenInfo.articleNum }}</span>
        </p>
      </a-col>
    </a-row>

    <a-row class="r3" type="flex" :gutter="16">
      <a-col :span="8">
        <div class="wrap">
          <p class="t1">指定关键词排名</p>
          <div v-if="serverTimeLoading">
            <a-spin tip="加载中..."></a-spin>
          </div>
          <template v-else>
            <div style="display: none;">
              rankInfo: {{ JSON.stringify(rankInfo) }}
            </div>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/NO1.svg" />1-10位</div>
              <div class="d2">
                <a @click="getTableInfoRank(3, 1)">{{ (rankInfo.appointKeyword && rankInfo.appointKeyword.firstNum) || 0 }}</a>个
              </div>
            </div>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/NO2.svg" />11-30位</div>
              <div class="d2">
                <a @click="getTableInfoRank(7, 1)">{{ (rankInfo.appointKeyword && rankInfo.appointKeyword.secondNum) || 0 }}</a>个
              </div>
            </div>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/NO3.svg" />31-100位</div>
              <div class="d2">
                <a @click="getTableInfoRank(8, 1)">{{ (rankInfo.appointKeyword && rankInfo.appointKeyword.thirdType) || 0 }}</a>个
              </div>
            </div>
          </template>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="wrap">
          <p class="t1">长尾关键词排名</p>
          <div v-if="serverTimeLoading">
            <a-spin tip="加载中..."></a-spin>
          </div>
          <template v-else>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/NO1.svg" />1-10位</div>
              <div class="d2">
                <a @click="longGetTableInfoRank(3)">{{ rankInfo.longTailKeyword && rankInfo.longTailKeyword.firstNum || 0 }}</a>个
              </div>
            </div>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/NO2.svg" />11-30位</div>
              <div class="d2">
                <a @click="longGetTableInfoRank(7)">{{ rankInfo.longTailKeyword && rankInfo.longTailKeyword.secondNum || 0 }}</a>个
              </div>
            </div>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/NO3.svg" />31-100位</div>
              <div class="d2">
                <a @click="longGetTableInfoRank(8)">{{ rankInfo.longTailKeyword && rankInfo.longTailKeyword.thirdType || 0 }}</a>个
              </div>
            </div>
          </template>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="wrap">
          <p class="t1">服务情况</p>
          <div v-if="serverTimeLoading">
            <a-spin tip="加载中..."></a-spin>
          </div>
          <template v-else>
            <div class="content">
              <div class="d1"><img src="../../../assets/seo/dachengshijian.svg"/>达成时间</div>
              <div class="d2 d3"><span>{{
                  rankInfo.serverTime.reachStandardTime != null ? rankInfo.serverTime.reachStandardTime.substring(0,10) : '-'
                }}</span></div>
            </div>
            <template v-if="rankInfo.serverTime && rankInfo.serverTime.planServiceEndStatus === 1">
              <div class="content">
                <div class="d1"><img src="../../../assets/seo/dachengtianshu.svg"/>服务天数</div>
                <div class="d2 d3"><span>{{getServiceDays(rankInfo.serverTime.planStartTime)}}</span>天</div>
              </div>
            </template>
            <template v-else-if="rankInfo.serverTime">
              <div class="content">
                <div class="d1"><img src="../../../assets/seo/dachengtianshu.svg"/>达成天数</div>
                <div class="d2 d3"><span>{{
                    rankInfo.serverTime.reachStandardDays | filtr_null  }}</span>天</div>
              </div>
            </template>
            <div class="content" v-if="rankInfo.serverTime">
              <div class="d1"><img src="../../../assets/seo/shengyufuwutianshu.svg"/>剩余服务天数</div>
              <div class="d2 d3"><span>{{
                  rankInfo.serverTime.remainServerDays | filtr_null}}</span>天</div>
            </div>
          </template>
        </div>
      </a-col>
    </a-row>
    <a-row class="r4">
      <a-card title="指定关键词" :bordered="false" style="width: 100%">
        <a-col :span="24">
          <a-row class="table-tool-wrap" type="flex">
            <a-col :span="8">
              <ul>
                <li :class="{ active: show == 1 }" @click="getTableInfoRank(1)">全部</li>
                <li :class="{ active: show == 3 }" @click="getTableInfoRank(3)">第一页</li>
                <li :class="{ active: show == 4 }" @click="getTableInfoRank(4)">前三页</li>
                <li :class="{ active: show == 5 }" @click="getTableInfoRank(5)">前五页</li>
                <li :class="{ active: show == 6 }" @click="getTableInfoRank(6)">前十页</li>
              </ul>
            </a-col>
            <a-col :span="16" style="text-align: right">
              <a-button type="link" @click="rankingClick" :style="rankingButtonStatus == false ? 'border-style: none;color: black !important;' : 'border-style: none;color: #544BEB !important;'
                ">
                按排名
                <a-icon :type="rankingButtonArrow" v-if="rankingButtonStatus" />
              </a-button>
              <a-button type="link" :style="wordsButtonStatus == false
                  ? 'margin-right: 16px;border-style: none;color: black !important;'
                  : 'margin-right: 16px;border-style: none;color: #544BEB !important;'
                " @click="wordsClick">
                按字数
                <a-icon :type="wordsButtonArrow" v-if="wordsButtonStatus" />
              </a-button>

              <a-input placeholder="请输入关键词" style="width: 200px; margin-right: 8px" v-model:value="keywords" />
              <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-right: 8px" @click="setTable">
                查询
              </a-button>

              <a-button ghost type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"> 重置 </a-button>

              <!--              <a-button ghost type="primary"  @click="handleExportXlsLU('关键词排名',1)" style="margin-left: 8px" :loading="excelLoading">导出Excel</a-button>-->
            </a-col>
          </a-row>
        </a-col>

        <a-col :span="24">
          <a-table ref="table" size="middle" :scroll="{ x: true }" rowKey="id" :columns="columns"
            :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
            @change="handleTableChange">
            <template #bodyCell="{ column, record, index, text }">
              <template v-if="column.key === 'rowIndex'">
                {{ (ipagination.current - 1) * ipagination.pageSize + index + 1 }}
              </template>

              <template class="title" v-if="column.key === 'keywords'">
                <span style="white-space: pre">{{ text }}</span>
                <span v-if="comprehenInfo.specifyKeywordNum != null && comprehenInfo.longTailKeywordNum != null">
                  <a-tag v-if="record.keywordType == 1" color="blue" style="margin-left: 8px">指定</a-tag>
                </span>
              </template>

              <template class="tag" v-if="column.key === 'tag'">
                <a-popover v-if="text != 0" placement="bottom" overlayClassName="self-pop">
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 1 && text <= 10"
                    src="../../../assets/seo/NO1.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 11 && text <= 20"
                    src="../../../assets/seo/NO2.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 21 && text <= 30"
                    src="../../../assets/seo/NO3.svg" />
                  <template #content>
                    <p style="margin-bottom: 0">第{{ parseInt((text - 1) / 10) + 1 }}页，总排名{{ text }}</p>
                  </template>
                  <span style="cursor: default; margin-left: 5px">{{ text }}</span>
                </a-popover>
                <span v-else>
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 1 && text <= 10"
                    src="../../../assets/seo/NO1.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 11 && text <= 20"
                    src="../../../assets/seo/NO2.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 21 && text <= 30"
                    src="../../../assets/seo/NO3.svg" />
                  {{ text }}</span>
              </template>
              <template v-if="column.key === 'action'">
                <a-button size="small" @click="gotoSearch(record.keywords)" type="primary">去查询 </a-button>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-card>
    </a-row>

    <a-row class="r4" style="margin-top: 10px">
      <a-card title="长尾关键词" :bordered="false" style="width: 100%">
        <a-col :span="24">
          <a-row class="table-tool-wrap" type="flex">
            <a-col :span="8">
              <ul>
                <li :class="{ active: longShow == 1 }" @click="longGetTableInfoRank(1)">全部</li>
                <li :class="{ active: longShow == 3 }" @click="longGetTableInfoRank(3)">第一页</li>
                <li :class="{ active: longShow == 4 }" @click="longGetTableInfoRank(4)">前三页</li>
                <li :class="{ active: longShow == 5 }" @click="longGetTableInfoRank(5)">前五页</li>
                <li :class="{ active: longShow == 6 }" @click="longGetTableInfoRank(6)">前十页</li>
              </ul>
            </a-col>
            <a-col :span="16" style="text-align: right">
              <a-button type="link" @click="longRankingClick" :style="longRankingButtonStatus == false ? 'border-style: none;color: black !important;' : 'border-style: none;color: #544BEB !important;'
                ">
                按排名
                <a-icon :type="longRankingButtonArrow" v-if="longRankingButtonStatus" />
              </a-button>
              <a-button type="link" :style="longWordsButtonStatus == false
                  ? 'margin-right: 16px;border-style: none;color: black !important;'
                  : 'margin-right: 16px;border-style: none;color: #544BEB !important;'
                " @click="longWordsClick">
                按字数
                <a-icon :type="longWordsButtonArrow" v-if="longWordsButtonStatus" />
              </a-button>

              <a-input placeholder="请输入关键词" style="width: 200px; margin-right: 8px" v-model:value="longKeywords" />

              <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-right: 8px"
                @click="longSetTable">
                查询 </a-button>

              <a-button ghost type="primary" preIcon="ant-design:reload-outlined" @click="longSearchReset"> 重置
              </a-button>
              <!--              <a-button ghost type="primary"  @click="handleExportXlsLU('关键词排名',2)" style="margin-left: 8px" :loading="longExcelLoading">导出Excel</a-button>-->
            </a-col>
          </a-row>
        </a-col>

        <a-col :span="24">
          <a-table ref="table" size="middle" :scroll="{ x: true }" rowKey="id" :columns="longColumns"
            :dataSource="longDataSource" :pagination="longIpagination" :loading="longLoading"
            class="j-table-force-nowrap" @change="handleLongTableChange">
            <template #bodyCell="{ column, record, index, text }">
              <template v-if="column.key === 'rowIndex'">
                {{ (longIpagination.current - 1) * longIpagination.pageSize + index + 1 }}
              </template>
              <template class="tag" v-if="column.key === 'tag'">
                <a-popover v-if="text != 0" placement="bottom" overlayClassName="self-pop">
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 1 && text <= 10"
                    src="../../../assets/seo/NO1.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 11 && text <= 20"
                    src="../../../assets/seo/NO2.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 21 && text <= 30"
                    src="../../../assets/seo/NO3.svg" />
                  <template #content>
                    <p style="margin-bottom: 0">第{{ parseInt((text - 1) / 10) + 1 }}页，总排名{{ text }}</p>
                  </template>
                  <span style="cursor: default; margin-left: 5px">{{ text }}</span>
                </a-popover>
                <span v-else>
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 1 && text <= 10"
                    src="../../../assets/seo/NO1.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 11 && text <= 20"
                    src="../../../assets/seo/NO2.svg" />
                  <img style="width: 18px; position: relative; top: -2px" v-if="text >= 21 && text <= 30"
                    src="../../../assets/seo/NO3.svg" />
                  {{ text }}</span>
              </template>
              <template slot="action" v-if="column.key === 'action'">
                <a-button size="small" @click="gotoSearch(record.keywords)" type="primary">去查询 </a-button>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-card>
    </a-row>
  </div>
</template>

<script lang="js">
import { getAction, downFile } from '@/api/manage/manage';
import selectSite from '@/components/Adweb/selectSite.vue';
import { filterObj } from '/@/utils/common/compUtils';

export default {
  name: 'SeoKeywordsRankList',
  components: {
    selectSite,
  },
  data() {
    return {
      siteinfo: [],
      subscriptionId: '',
      selectSiteInfo: {},
      siteCode: '',
      planId: '',
      columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '关键词',
          dataIndex: 'keywords',
          key: 'keywords',
          fixed: 'left',
          width: 350,
        },
      ],
      longColumns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '关键词',
          dataIndex: 'keywords',
          key: 'keywords',
          fixed: 'left',
          width: 350,
        },
      ],
      show: 1,
      keywordType: undefined,
      keywords: '',
      url: {
        list: '/seo/seoKeywords/keywordList',
      },
      ipagination: {
        pageSize: 10,
        pageSizeOptions: ['10', '15', '30', '50'],
      },
      disableMixinCreated: true,
      comprehenInfo: {},
      rankInfo: {
        appointKeyword: {
          firstNum: 0,
          secondNum: 0,
          thirdType: 0
        },
        longTailKeyword: {
          firstNum: 0,
          secondNum: 0,
          thirdType: 0
        },
        serverTime: {}
      },
      excelLoading: false,
      queryParam: {
        buttonColmn: 'words',
        buttonSort: 'asc',
      },
      baseInfo: {
        createTime: '',
      },
      routerQuery: {},
      /* 排序参数 */
      isorter: {
        column: 'keywords',
        order: 'desc',
      },
      rankingButtonArrow: 'arrow-up',
      wordsButtonArrow: 'arrow-up',
      rankingButtonStatus: false,
      wordsButtonStatus: true,
      longIpagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '15', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      longQueryParam: {
        buttonColmn: 'words',
        buttonSort: 'asc',
      },
      dataSource: [],
      longDataSource: [],
      longLoading: false,
      longExcelLoading: false,
      longKeywords: '',
      longShow: 1,
      /* 排序参数 */
      longIsorter: {
        column: 'keywords',
        order: 'desc',
      },
      longRankingButtonArrow: 'arrow-up',
      longWordsButtonArrow: 'arrow-up',
      longRankingButtonStatus: false,
      longWordsButtonStatus: true,
      /* 筛选参数 */
      filters: {},
      serverTimeLoading: false,
    };
  },
  watch: {
    '$route.query': {
      handler: function (val) {
        this.routerQuery = val;
      },
      immediate: true, // 初次变化立即查询
    },
  },
  mounted() {
    this.siteCode = localStorage.getItem('siteCode');
    
    // 确保先获取站点信息，再加载其他数据
    if (this.siteCode) {
      this.getSiteInfo().then(() => {
        // 确保站点信息加载完成后再获取其他信息
        this.getAllInfo();
      });
    }
  },

  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    getAllInfo() {
      // 初始化状态
      this.serverTimeLoading = true;
      
      // 使用Promise链确保顺序执行
      this.getComprehenInfo()
        .then(() => {
          return this.getRankInfo();
        })
        .then(() => {
          // 所有数据加载完成后，再加载表格数据
          this.setTableQuery();
          this.longSetTableQuery();
        })
        .catch(err => {
          console.error('Failed to load data:', err);
        });
    },
    resetAllInfo() {
      this.comprehenInfo = {};
      this.rankInfo.appointKeyword = {firstNum: 0, secondNum: 0, thirdType: 0};
      this.rankInfo.longTailKeyword = {firstNum: 0, secondNum: 0, thirdType: 0};
      this.rankInfo.serverTime = {};
      this.dataSource = [];
      this.ipagination.current = 1;
      this.ipagination.total = 0;
      this.longDataSource = [];
      this.longIpagination.current = 1;
      this.longIpagination.total = 0;
    },

    //由于页面的业务关联很多，故将所有的查询条件封装
    setTableQuery() {
      this.queryParam.siteCode = this.siteCode;
      if (this.show == 3) {
        this.queryParam.rankStart = '1';
        this.queryParam.rankEnd = '10';
      } else if (this.show == 4) {
        this.queryParam.rankStart = '1';
        this.queryParam.rankEnd = '30';
      } else if (this.show == 5) {
        this.queryParam.rankStart = '1';
        this.queryParam.rankEnd = '50';
      } else if (this.show == 6) {
        this.queryParam.rankStart = '1';
        this.queryParam.rankEnd = '100';
      } else if (this.show == 7) {
        this.queryParam.rankStart = '11';
        this.queryParam.rankEnd = '30';
      } else if (this.show == 8) {
        this.queryParam.rankStart = '31';
        this.queryParam.rankEnd = '100';
      } else {
        this.queryParam.rankStart = undefined;
        this.queryParam.rankEnd = undefined;
      }
      this.queryParam.keywordType = this.keywordType;
      this.queryParam.keywords = this.keywords;
      this.loadData(1);
    },
    setTable() {
      this.queryParam.reachStandard = undefined;
      this.setTableQuery();
    },

    searchReset() {
      this.show = 1;
      this.queryParam.reachStandard = undefined;
      this.keywords = '';
      this.rankingButtonStatus = false;
      this.rankingButtonArrow = '';
      this.wordsButtonStatus = true;
      this.wordsButtonArrow = 'arrow-up';

      this.queryParam.buttonColmn = 'words';
      this.queryParam.buttonSort = 'desc';
      this.setTableQuery();
    },

    loadData(arg) {
      let that = this;
      let a = [];
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams(); //查询条件
      params.subscriptionId = that.subscriptionId;
      params.keywordType = 1;
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          let alldata = res.result.records;
          if (alldata.length > 0) {
            for (let i in alldata) {
              let rankInfo = alldata[i].rankInfo;
              a.push({
                id: alldata[i].id,
                keywords: alldata[i].keywords,
                keywordType: alldata[i].keywordType,
                keywordsLength: alldata[i].keywordsLength,
                rankInfo: rankInfo,
                ...rankInfo,
              });
            }
            this.dataSource = a;
            this.getTableColums();
            this.ipagination.total = res.result.total;
          } else {
            this.dataSource = a;
            this.ipagination.total = 0;
          }
        }
        if (res.code === 510) {
          // createMessage.warning(res.message)
        }
        this.loading = false;
      });
    },

    //先执行获取site信息，只有在获取到siteCode之后，才能执行以下方法
    getSiteInfo() {
      let that = this;
      let data = {
        siteCode: that.siteCode,
      };
      
      return new Promise((resolve) => {
        getAction('/seo/seoKeywordsRank/getSubscriptionIdBySiteCode', data).then(function (res) {
          if (res.code == 200) {
            that.subscriptionId = res.result[0]?.id || '';
            that.planId = res.result[0]?.planId || '';
          }
          resolve();
        }).catch(() => {
          resolve(); // 即使出错也继续流程
        });
      });
    },

    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0 && sorter.column) {
        this.isorter.column = sorter.field;
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
      } else {
        this.isorter.column = '';
        this.isorter.order = '';
      }
      this.ipagination = pagination;
      this.loadData();
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {};
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams);
        sqp['superQueryMatchType'] = this.superQueryMatchType;
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    getQueryField() {
      //TODO 字段权限控制
      var str = 'id,';
      this.columns.forEach(function (value) {
        str += ',' + value.dataIndex;
      });
      return str;
    },

    //切换站点
    changeSite(selectedSiteInfo) {
      this.selectSiteInfo = selectedSiteInfo;
      this.siteCode = selectedSiteInfo.code;
      this.getSiteInfo();
      this.keywordType = undefined;
      this.queryParam.reachStandard = undefined;
      this.keywords = '';
      this.show = 1;
      localStorage.setItem('siteCode', this.siteCode);
      this.resetAllInfo();
      this.getAllInfo();
    },

    //获取关键词等五个指标
    getComprehenInfo() {
      let that = this;
      let d = {
        siteCode: that.siteCode,
        planId: that.planId ? that.planId : '',
      };
      
      return new Promise((resolve, reject) => {
        getAction('/seo/seoKeywordsRank/comprehensiveInfo', d)
          .then((res) => {
            if (res.code == 200) {
              that.comprehenInfo = res.result;
              resolve(res);
            } else {
              reject(res);
            }
          })
          .catch(err => {
            reject(err);
          });
      });
    },

    //获取三个list的数据
    getRankInfo() {
      let that = this;
      let d = {
        siteCode: that.siteCode,
        subscriptionId: that.subscriptionId ? that.subscriptionId : '',
      };
      
      // 添加专门的加载状态标志
      this.serverTimeLoading = true;
      
      return new Promise((resolve, reject) => {
        getAction('/seo/seoKeywordsRank/getRankInfo', d)
          .then((res) => {
            if (res.code == 200 && res.result) {
              console.log('RankInfo API response:', res.result);
              
              // 先创建一个完整的数据对象，确保所有属性都有初始值
              const newRankInfo = {
                appointKeyword: {
                  firstNum: 0,
                  secondNum: 0,
                  thirdType: 0,
                  ...res.result.appointKeyword
                },
                longTailKeyword: {
                  firstNum: 0,
                  secondNum: 0,
                  thirdType: 0,
                  ...res.result.longTailKeyword
                },
                serverTime: res.result.serverTime || {}
              };
              
              // 完全替换整个对象，而不是单独设置属性
              this.rankInfo = newRankInfo;
              
              // 打印出处理后的数据，检查数据结构
              console.log('Processed rankInfo:', this.rankInfo);
              
              resolve(res);
            } else {
              console.error('RankInfo API error or empty result:', res);
              // 保持默认值
              reject(res);
            }
          })
          .catch(err => {
            console.error('RankInfo API exception:', err);
            reject(err);
          })
          .finally(() => {
            this.serverTimeLoading = false;
          });
      });
    },

    //动态处理表格列
    getTableColums() {
      let that = this;
      that.columns = [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'dataNo' },
        },
        {
          title: '关键词',
          dataIndex: 'keywords',
          key: 'keywords',
          fixed: 'left',
          scopedSlots: { customRender: 'keywords' },
          width: 350,
        },
      ];
      let obj = that.dataSource[0].rankInfo;
      let dateInfo = Object.keys(obj);
      dateInfo.sort().reverse();
      for (let i in dateInfo) {
        that.columns.push({
          title: dateInfo[i],
          dataIndex: dateInfo[i],
          key: dateInfo[i],
          scopedSlots: { customRender: 'tag' },
          align: 'center',
        });
      }
      that.columns.push({
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        align: 'center',
        scopedSlots: { customRender: 'action' },
        fixed: 'right',
        width: 50,
      });
    },

    //点击排名数量事件
    getTableInfoRank(d, keywordType) {
      this.show = d;
      this.queryParam.reachStandard = undefined;
      if (keywordType) {
        this.keywordType = keywordType;
      }
      this.setTableQuery();
    },

    //点击第一行五个指标的种类
    changeKeywordType() {
      this.queryParam.reachStandard = 1;
      this.queryParam.rankStart = undefined;
      this.queryParam.rankEnd = undefined;
      this.show = 1;
      this.setTableQuery();
    },

    //表格内的去查询按钮
    gotoSearch(word) {
      window.open('http://www.google.com/search?q=' + word, '_blank');
    },

    handleExportXlsLU(fileName, keywordType) {
      let that = this;
      let param = {
        siteCode: that.queryParam.siteCode,
        subscriptionId: that.subscriptionId ? that.subscriptionId : '',
        keywordType: keywordType,
      };
      if (param.siteCode === '') {
        // createMessage.warning("请先选择站点！");
        return;
      }
      if (keywordType == 1) {
        this.excelLoading = true;
      } else {
        this.longExcelLoading = true;
      }

      downFile('/seo/seoKeywords/exportExcel', param).then((data) => {
        if (keywordType === 1) {
          this.excelLoading = false;
        } else {
          this.longExcelLoading = false;
        }
        if (!data) {
          console.log(321);
          // createMessage.warning("文件下载失败")
          return;
        }
        if (data.size === 0) {
          console.log(111);
          // createMessage.warning("当前站点未有关键词数据，文件导出失败")
          return;
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx');
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', fileName + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },

    //按排名排序
    rankingClick() {
      let that = this;
      if (that.rankingButtonStatus == false) {
        that.rankingButtonStatus = true;
        that.rankingButtonArrow = 'arrow-up';
        that.wordsButtonStatus = false;
        that.wordsButtonArrow = '';

        that.queryParam.buttonColmn = 'ranking';
        that.queryParam.buttonSort = 'asc';
      } else if (that.rankingButtonStatus == true && that.rankingButtonArrow == 'arrow-up') {
        that.rankingButtonArrow = 'arrow-down';

        that.queryParam.buttonColmn = 'ranking';
        that.queryParam.buttonSort = 'desc';
      } else if (that.rankingButtonArrow == 'arrow-down') {
        that.rankingButtonStatus = false;
        that.queryParam.buttonColmn = '';
        that.queryParam.buttonSort = '';
      }
      that.setTableQuery();
    },

    //按字数排序
    wordsClick() {
      let that = this;
      if (that.wordsButtonStatus == false) {
        that.wordsButtonStatus = true;
        that.wordsButtonArrow = 'arrow-up';
        that.rankingButtonStatus = false;
        that.rankingButtonArrow = '';

        that.queryParam.buttonColmn = 'words';
        that.queryParam.buttonSort = 'asc';
      } else if (that.wordsButtonStatus == true && that.wordsButtonArrow == 'arrow-up') {
        that.wordsButtonArrow = 'arrow-down';

        that.queryParam.buttonColmn = 'words';
        that.queryParam.buttonSort = 'desc';
      } else if (that.wordsButtonArrow == 'arrow-down') {
        that.wordsButtonStatus = false;
        that.queryParam.buttonColmn = '';
        that.queryParam.buttonSort = '';
      }
      that.setTableQuery();
    },

    //-----一下全是长尾词列表功能方法
    longLoadData(arg) {
      let that = this;
      let a = [];
      if (arg === 1) {
        this.longIpagination.current = 1;
      }
      var params = this.getLongQueryParams(); //查询条件
      params.subscriptionId = that.subscriptionId;
      params.keywordType = 2;
      this.longLoading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          let alldata = res.result.records;
          if (alldata.length > 0) {
            for (let i in alldata) {
              let rankInfo = alldata[i].rankInfo;
              a.push({
                id: alldata[i].id,
                keywords: alldata[i].keywords,
                keywordType: alldata[i].keywordType,
                keywordsLength: alldata[i].keywordsLength,
                rankInfo: rankInfo,
                ...rankInfo,
              });
            }
            this.longDataSource = a;
            this.longGetTableColums();
            this.longIpagination.total = res.result.total;
          } else {
            this.longDataSource = a;
            this.longIpagination.total = 0;
          }
        }
        if (res.code === 510) {
          // createMessage.warning(res.message)
        }
        this.longLoading = false;
      });
    },

    //动态处理表格列
    longGetTableColums() {
      let that = this;
      that.longColumns = [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'dataNo' },
        },
        {
          title: '关键词',
          dataIndex: 'keywords',
          key: 'keywords',
          fixed: 'left',
          scopedSlots: { customRender: 'keywords' },
          width: 350,
          // sorter: (a, b) => a.keywords - b.keywords,
          // defaultSortOrder: 'ascend',
        },
        // {
        //   title: '关键词长度',
        //   dataIndex: 'keywordsLength',
        //   key: 'keywordsLength',
        //   fixed: 'left',
        //   width: 40,
        //   scopedSlots: { customRender: 'keywordsLength' },
        // },
      ];
      let obj = that.longDataSource[0].rankInfo;
      let dateInfo = Object.keys(obj);
      dateInfo.sort().reverse();
      for (let i in dateInfo) {
        that.longColumns.push({
          title: dateInfo[i],
          dataIndex: dateInfo[i],
          key: dateInfo[i],
          scopedSlots: { customRender: 'tag' },
          align: 'center',
        });
      }
      that.longColumns.push({
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        align: 'center',
        scopedSlots: { customRender: 'action' },
        fixed: 'right',
        width: 50,
      });
    },

    //由于页面的业务关联很多，故将所有的查询条件封装
    longSetTableQuery() {
      let that = this;
      that.longQueryParam.siteCode = this.siteCode;
      console.log(that.longQueryParam);
      if (that.longShow == 3) {
        that.longQueryParam.rankStart = '1';
        that.longQueryParam.rankEnd = '10';
      } else if (that.longShow == 4) {
        that.longQueryParam.rankStart = '1';
        that.longQueryParam.rankEnd = '30';
      } else if (that.longShow == 5) {
        that.longQueryParam.rankStart = '1';
        that.longQueryParam.rankEnd = '50';
      } else if (that.longShow == 6) {
        that.longQueryParam.rankStart = '1';
        that.longQueryParam.rankEnd = '100';
      } else if (that.longShow == 7) {
        that.longQueryParam.rankStart = '11';
        that.longQueryParam.rankEnd = '30';
      } else if (that.longShow == 8) {
        that.longQueryParam.rankStart = '31';
        that.longQueryParam.rankEnd = '100';
      } else {
        that.longQueryParam.rankStart = undefined;
        that.longQueryParam.rankEnd = undefined;
      }
      that.longQueryParam.keywords = that.longKeywords;
      that.longLoadData(1);
    },

    longSetTable() {
      this.longQueryParam.reachStandard = undefined;
      this.longSetTableQuery();
    },

    longSearchReset() {
      this.longShow = 1;
      this.longQueryParam.reachStandard = undefined;
      this.longKeywords = '';
      this.longRankingButtonStatus = false;
      this.longRankingButtonArrow = '';
      this.longWordsButtonStatus = true;
      this.longWordsButtonArrow = 'arrow-up';
      this.longQueryParam.buttonColmn = 'words';
      this.longQueryParam.buttonSort = 'asc';
      this.longSetTableQuery();
    },

    //点击排名数量事件
    longGetTableInfoRank(d) {
      this.longShow = d;
      this.longQueryParam.reachStandard = undefined;
      this.longSetTableQuery();
    },

    //点击第一行五个指标的种类
    longChangeKeywordType() {
      this.longQueryParam.reachStandard = 1;
      this.longQueryParam.rankStart = undefined;
      this.longQueryParam.rankEnd = undefined;
      this.longShow = 1;
      this.longSetTableQuery();
    },

    handleLongTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0 && sorter.column) {
        this.longIsorter.column = sorter.field;
        this.longIsorter.order = 'ascend' == sorter.order ? 'asc' : 'desc';
      } else {
        this.longIsorter.column = '';
        this.longIsorter.order = '';
      }
      this.longIpagination = pagination;
      this.longLoadData();
    },

    getLongQueryParams() {
      //获取查询条件
      let sqp = {};
      var param = Object.assign(sqp, this.longQueryParam, this.longIsorter, this.filters);
      param.field = this.getLongQueryField();
      param.pageNo = this.longIpagination.current;
      param.pageSize = this.longIpagination.pageSize;
      return filterObj(param);
    },
    getLongQueryField() {
      //TODO 字段权限控制
      var str = 'id,';
      this.longColumns.forEach(function (value) {
        str += ',' + value.dataIndex;
      });
      return str;
    },

    //按排名排序
    longRankingClick() {
      let that = this;
      if (that.longRankingButtonStatus == false) {
        that.longRankingButtonStatus = true;
        that.longRankingButtonArrow = 'arrow-up';
        that.longWordsButtonStatus = false;
        that.longWordsButtonArrow = '';

        that.longQueryParam.buttonColmn = 'ranking';
        that.longQueryParam.buttonSort = 'asc';
      } else if (that.longRankingButtonStatus == true && that.longRankingButtonArrow == 'arrow-up') {
        that.longRankingButtonArrow = 'arrow-down';

        that.longQueryParam.buttonColmn = 'ranking';
        that.longQueryParam.buttonSort = 'desc';
      } else if (that.longRankingButtonArrow == 'arrow-down') {
        that.longRankingButtonStatus = false;
        that.longQueryParam.buttonColmn = '';
        that.longQueryParam.buttonSort = '';
      }
      that.longSetTableQuery();
    },

    //按字数排序
    longWordsClick() {
      let that = this;
      if (that.longWordsButtonStatus == false) {
        that.longWordsButtonStatus = true;
        that.longWordsButtonArrow = 'arrow-up';
        that.longRankingButtonStatus = false;
        that.longRankingButtonArrow = '';

        that.longQueryParam.buttonColmn = 'words';
        that.longQueryParam.buttonSort = 'asc';
      } else if (that.longWordsButtonStatus == true && that.longWordsButtonArrow == 'arrow-up') {
        that.longWordsButtonArrow = 'arrow-down';

        that.longQueryParam.buttonColmn = 'words';
        that.longQueryParam.buttonSort = 'desc';
      } else if (that.longWordsButtonArrow == 'arrow-down') {
        that.longWordsButtonStatus = false;
        that.longQueryParam.buttonColmn = '';
        that.longQueryParam.buttonSort = '';
      }
      that.longSetTableQuery();
    },
  },
};
</script>

<style lang="less">
.self-pop {
  .ant-popover-inner-content {
    background: rgb(245, 243, 254);

    p {
      font-size: 13px;
    }
  }

  .ant-popover-arrow {
    border-color: rgb(245, 243, 254) !important;
  }
}
</style>

<style lang="less" scoped>
.r1 {
  .choose-site {
    display: flex;
  }

  .t1 {
    font-size: 18px;
  }

  .ant-calendar-picker {
    margin-right: 20px;
  }

  /deep/ .ant-btn {
    background: transparent;
    margin-right: 10px;

    &.active {
      color: @primary-color;
    }
  }
}

.r2 {
  background: #fff;
  padding: 30px;
  margin: 10px;

  .ant-col {
    text-align: center;
    color: #000;

    img {
      width: 13px;
      margin: -3px 5px 0 0;
    }

    .t1 {
      font-size: 14px;
    }

    .t2 {
      font-size: 27px;
      margin-bottom: 0;
      font-weight: 500;
    }
  }
}

.r3 {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;

  .wrap {
    padding: 20px;
    background: #fff;

    .t1 {
      color: #000;
      font-size: 14px;
      font-weight: 500;
    }

    .content {
      display: block;
      overflow: hidden;
      line-height: 1;
      border-bottom: 1px solid #ddd;
      padding: 20px 0;

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .d1 {
        float: left;
        width: 50%;
        line-height: 25px;
        color: #000;

        img {
          width: 15px;
          margin: -4px 5px 0 0;
        }
      }

      .d2 {
        float: right;
        width: 50%;
        text-align: right;

        &.d3 {
          span {
            color: #000;
          }
        }

        a {
          font-size: 25px;
          font-weight: 500;
        }
      }
    }
  }
}

.r4 {
  padding: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background: #fff;

  .table-tool-wrap {
    margin-bottom: 15px;

    ul {
      list-style-type: none;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;

      li {
        float: left;
        margin: 0 10px;
        color: #333;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: underline;

        &.active {
          color: @primary-color;
        }
      }
    }
  }
}
</style>