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"
            >{{ selectSiteInfo.planName && selectSiteInfo.planType !== 'STATIONCONSTRUCTION' ? selectSiteInfo.planName : '暂无SEO推广套餐~' }}
            <a-popover placement="bottom" v-show="selectSiteInfo.planName && selectSiteInfo.planType !== 'STATIONCONSTRUCTION'">
              <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="12">
        <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"
              ><a @click="getTableInfoRank(3, 1)">{{ rankInfo.appointKeyword.firstNum }}</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.secondNum }}</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.thirdType }}</a
              >个
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <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">
              <a @click="longGetTableInfoRank(3)">{{ rankInfo.longTailKeyword.firstNum }}</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.secondNum }}</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.thirdType }}</a
              >个
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <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: {},
          longTailKeyword: {},
          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: {},
      };
    },
    watch: {
      '$route.query': {
        handler: function (val) {
          this.routerQuery = val;
        },
        immediate: true, // 初次变化立即查询
      },
    },
    mounted() {
      this.siteCode = localStorage.getItem('siteCode');
      this.getSiteInfo();
    },

    methods: {
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
      getAllInfo() {
        this.getComprehenInfo();
      },
      resetAllInfo() {
        this.comprehenInfo = {};
        this.rankInfo.appointKeyword = {};
        this.rankInfo.longTailKeyword = {};
        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,
        };
        getAction('/seo/seoKeywordsRank/getSubscriptionIdBySiteCode', data).then(function (res) {
          if (res.code == 200) {
            that.subscriptionId = res.result[0].id ?? '';
            that.planId = res.result[0].planId ?? '';
          }
        });
      },

      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 : '',
        };
        getAction('/seo/seoKeywordsRank/comprehensiveInfo', d)
          .then((res) => {
            if (res.code == 200) {
              that.comprehenInfo = res.result;
            }
          })
          .finally(() => {
            this.getRankInfo();
            this.setTableQuery();
            this.longSetTableQuery();
          });
      },

      //获取三个list的数据
      getRankInfo() {
        let that = this;
        let d = {
          siteCode: that.siteCode,
          subscriptionId: that.subscriptionId ? that.subscriptionId : '',
        };
        getAction('/seo/seoKeywordsRank/getRankInfo', d).then((res) => {
          if (res.code == 200) {
            this.rankInfo.appointKeyword = res.result.appointKeyword;
            this.rankInfo.longTailKeyword = res.result.longTailKeyword;
            this.rankInfo.serverTime = res.result.serverTime;
          }
        });
      },

      //动态处理表格列
      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://google-proxy.adwebcloud.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>