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

<template>
  <div class="seo_keywords_rank_wrap">
    <a-row class="r1">
      <a-col :span="24">
        <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>
    <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-input>
              <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 slot="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-input>

              <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 slot="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>
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"
      },
      longDataSource: [],
      longLoading: false,
      longExcelLoading: false,
      longKeywords: "",
      longShow: 1,
      /* 排序参数 */
      longIsorter: {
        column: "keywords",
        order: "desc"
      },
      longRankingButtonArrow: "arrow-up",
      longWordsButtonArrow: "arrow-up",
      longRankingButtonStatus: false,
      longWordsButtonStatus: true,
      /* 筛选参数 */
      filters: {}
    };
  },
  mounted() {
    this.siteCode =localStorage.getItem("siteCode");
    this.getSiteInfo();
  },
  watch: {
    "$route.query": {
      handler: function(val) {
        this.routerQuery = val;
      },
      immediate: true // 初次变化立即查询
    }
  },

  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) {
          // this.$message.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.getSiteInfo();
      this.selectSiteInfo = selectedSiteInfo;
      this.siteCode = selectedSiteInfo.code;
      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("https://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 === "") {
        // this.$message.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);
          // this.$message.warning("文件下载失败")
          return;
        }
        if (data.size === 0) {
          console.log(111);
          // this.$message.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) {
          // this.$message.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 {
  margin: 20px;
  .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>