|
|
@@ -0,0 +1,1356 @@
|
|
|
+<template>
|
|
|
+ <div class="seo_keywords_rank_wrap">
|
|
|
+ <a-row class="r1" style="margin: 20px;">
|
|
|
+ <a-col :span="24">
|
|
|
+ <span class="t1" >{{siteinfo.length > 1 ? '请选择站点：' : '套餐：'}}</span>
|
|
|
+ <select-site v-if="siteinfo.length > 1" @comMethods="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 v-show="comprehenInfo.specifyKeywordNum != null">
|
|
|
+ 指定词数：{{ comprehenInfo.specifyKeywordNum | last }}
|
|
|
+ </span>
|
|
|
+ <span v-show="comprehenInfo.longTailKeywordNum != null">
|
|
|
+ 关键词数：{{ comprehenInfo.longTailKeywordNum | last }}
|
|
|
+ </span>
|
|
|
+ <span v-show="comprehenInfo.outerLinkNum != null">
|
|
|
+ 外链数：{{ comprehenInfo.outerLinkNum | last }}
|
|
|
+ </span>
|
|
|
+ <span v-show="comprehenInfo.articleNum != null">
|
|
|
+ 文章数：{{ comprehenInfo.articleNum | last }}
|
|
|
+ </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>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row class="r2" type="flex" justify="center" align="middle">
|
|
|
+ <a-col :span="4">
|
|
|
+ <p class="t1"><img src="../../../assets/seo/zhidingci.svg"/>指定词</p>
|
|
|
+ <p class="t2" v-if="comprehenInfo.specifyKeywordNum == null">
|
|
|
+ -
|
|
|
+ </p>
|
|
|
+ <p class="t2" v-else>
|
|
|
+ <a @click="changeKeywordType()">{{ comprehenInfo.specifyKeywordNum }}</a>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <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="4">
|
|
|
+ <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="4">
|
|
|
+ <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-col :span="4">
|
|
|
+ <p class="t1"><img src="../../../assets/seo/xunpanshu.svg"/>询盘数</p>
|
|
|
+ <p class="t2" v-if="comprehenInfo.enquiryNum == null">
|
|
|
+ -
|
|
|
+ </p>
|
|
|
+ <p class="t2" v-else>
|
|
|
+ <router-link :to="{path:'/inquiry/list'}">
|
|
|
+ {{ comprehenInfo.enquiryNum }}
|
|
|
+ </router-link>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <!-- 只有当客户存在访问量指标且大于0才展示-->
|
|
|
+ <p class="t1"><img src="../../../assets/seo/fangwenliang.svg"/>访问量</p>
|
|
|
+ <p class="t2" v-if="comprehenInfo.uvNum == null">
|
|
|
+ -
|
|
|
+ </p>
|
|
|
+ <p class="t2" v-else>
|
|
|
+ <router-link :to="{path:'/adweb/insight/flowAnalysis',query:{dateType:'All'}}">
|
|
|
+ {{ comprehenInfo.uvNum }}
|
|
|
+ </router-link>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row class="r3" type="flex" :gutter="16">
|
|
|
+ <a-col :span="8" v-if="comprehenInfo.specifyKeywordNum != null || isBuildVersion">
|
|
|
+ <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 | filtr_null }}</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 | filtr_null }}</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 | filtr_null}}</a>个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" v-if="comprehenInfo.longTailKeywordNum != null || isBuildVersion">
|
|
|
+ <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 | filtr_null}}</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 | filtr_null}}</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 | filtr_null}}</a>个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <div class="wrap">
|
|
|
+ <p class="t1">服务情况</p>
|
|
|
+ <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.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>
|
|
|
+ <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">
|
|
|
+ <div class="d1"><img src="../../../assets/seo/shengyufuwutianshu.svg"/>剩余服务天数</div>
|
|
|
+ <div class="d2 d3"><span>{{
|
|
|
+ rankInfo.serverTime.remainServerDays | filtr_null}}</span>天</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ <a-row class="r4" v-if="comprehenInfo.specifyKeywordNum != null">
|
|
|
+ <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="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 slot='dataNo' slot-scope="text, record, rowIndex">
|
|
|
+ {{(ipagination.current - 1) * ipagination.pageSize + rowIndex + 1}}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template class="title" slot="keywords" slot-scope="text,record">
|
|
|
+ <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 slot="keywordsLength" slot-scope="text,record">
|
|
|
+ <span >{{ text }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template class="tag" slot="tag" slot-scope="text, record, rowIndex">
|
|
|
+ <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" slot-scope="text,record">
|
|
|
+ <a-button size="small" @click="gotoSearch(record.keywords)" type="primary">去查询</a-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </a-col>
|
|
|
+ </a-card>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row class="r4" style="margin-top: 10px" v-if="comprehenInfo.longTailKeywordNum != null">
|
|
|
+ <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="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 slot='dataNo' slot-scope="text, record, rowIndex">
|
|
|
+ {{(longIpagination.current - 1) * longIpagination.pageSize + rowIndex + 1}}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template class="title" slot="keywords" slot-scope="text,record">
|
|
|
+ <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>
|
|
|
+ <!-- <a-tag v-if="record.keywordType == 2" color="green" style="margin-left: 8px">长尾</a-tag>-->
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template slot="keywordsLength" slot-scope="text,record">
|
|
|
+ <span >{{ text }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template class="tag" slot="tag" slot-scope="text, record, rowIndex">
|
|
|
+ <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" slot-scope="text,record">
|
|
|
+ <a-button size="small" @click="gotoSearch(record.keywords)" type="primary">去查询</a-button>
|
|
|
+ </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: 'SeoKpiStatisticsList',
|
|
|
+ components: {
|
|
|
+ selectSite
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ siteinfo: [],
|
|
|
+ selectSiteInfo: {},
|
|
|
+ siteCode: '',
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ show: 1,
|
|
|
+ keywordType: undefined,
|
|
|
+ keywords: '',
|
|
|
+ url: {
|
|
|
+ list: '/serp/seoKeywords/keywordList'
|
|
|
+ },
|
|
|
+ ipagination: {
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizeOptions: ['10','15', '30', '50'],
|
|
|
+ },
|
|
|
+ disableMixinCreated: true,
|
|
|
+ comprehenInfo: {},
|
|
|
+ rankInfo: {
|
|
|
+ appointKeyword: {},
|
|
|
+ longTailKeyword: {},
|
|
|
+ serverTime:{}
|
|
|
+ },
|
|
|
+ isBuildVersion:false,
|
|
|
+ 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.getSiteInfo()
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ first: function (value) {
|
|
|
+ if (value && value != null) {
|
|
|
+ let a = value.split('/')
|
|
|
+ return a[0]
|
|
|
+ } else {
|
|
|
+ return '- '
|
|
|
+ }
|
|
|
+ },
|
|
|
+ last: function (value) {
|
|
|
+ if (value && value != null) {
|
|
|
+ let a = value.split('/')
|
|
|
+ return a[1]
|
|
|
+ } else {
|
|
|
+ return ' -'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filtr_null: function (value) {
|
|
|
+ if (value != null) {
|
|
|
+ return value
|
|
|
+ } else {
|
|
|
+ return '- '
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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.userFlag = this.siteCode
|
|
|
+ console.log(this.queryParam)
|
|
|
+ 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.historyId = that.selectSiteInfo.historyId;
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //判断是否是建站版或者无SEO套餐
|
|
|
+ calcIsBuildVersion(){
|
|
|
+ if(this.selectSiteInfo.planId == null || this.selectSiteInfo.planId == '' || this.selectSiteInfo.planName == '建站版' || this.selectSiteInfo.planType == 'STATIONCONSTRUCTION' || this.selectSiteInfo == {}){
|
|
|
+ this.isBuildVersion = true
|
|
|
+ }else{
|
|
|
+ this.isBuildVersion = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //先执行获取site信息，只有在获取到siteCode之后，才能执行以下方法
|
|
|
+ getSiteInfo() {
|
|
|
+ let that = this
|
|
|
+ getAction('/serp/seoKpiStatistics/getAllSitesBySeo').then(function (res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.siteinfo = res.result
|
|
|
+ if(res.result.length > 0){
|
|
|
+ let isInSite = false
|
|
|
+ for (let i in res.result) {
|
|
|
+ if (localStorage.getItem('siteCode') !== null && res.result[i].code === localStorage.getItem('siteCode')) {
|
|
|
+ isInSite = true
|
|
|
+ that.selectSiteInfo = res.result[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (localStorage.getItem('siteCode') !== null && isInSite) {
|
|
|
+ that.siteCode = localStorage.getItem('siteCode')
|
|
|
+ } else {
|
|
|
+ that.siteCode = res.result[0].code
|
|
|
+ that.selectSiteInfo = res.result[0]
|
|
|
+ localStorage.setItem('siteCode', res.result[0].code)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //如果是从客户案例过来的数据，直接走下面方法
|
|
|
+ if(that.routerQuery.code){
|
|
|
+ let rowData = {}
|
|
|
+ for(let i in res.result){
|
|
|
+ if(that.routerQuery.code === res.result[i].code){
|
|
|
+ rowData = res.result[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ localStorage.setItem('siteCode', that.routerQuery.code)
|
|
|
+ that.show = 3
|
|
|
+ that.longShow = 3
|
|
|
+ that.siteCode = that.routerQuery.code
|
|
|
+ that.keywordType = Number(that.routerQuery.keywordType)
|
|
|
+ that.selectSiteInfo = rowData
|
|
|
+ that.getAllInfo()
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ that.resetAllInfo()
|
|
|
+ that.calcIsBuildVersion()
|
|
|
+ if(that.isBuildVersion){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ that.getAllInfo()
|
|
|
+ } else {
|
|
|
+ that.$message.error('获取站点code失败，请刷新重试')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ 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(value, e) {
|
|
|
+ this.getSiteInfo()
|
|
|
+ this.selectSiteInfo = e.info
|
|
|
+ this.siteCode = value
|
|
|
+ this.keywordType = undefined
|
|
|
+ this.queryParam.reachStandard = undefined
|
|
|
+ this.keywords = ''
|
|
|
+ this.show = 1
|
|
|
+ // localStorage.setItem('siteCode', value)
|
|
|
+ this.resetAllInfo()
|
|
|
+ this.calcIsBuildVersion()
|
|
|
+
|
|
|
+ if(this.isBuildVersion){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.getAllInfo()
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取关键词等五个指标
|
|
|
+ getComprehenInfo() {
|
|
|
+ let that = this
|
|
|
+ let d = {
|
|
|
+ userFlag: that.siteCode,
|
|
|
+ historyId: that.selectSiteInfo.historyId ? that.selectSiteInfo.historyId : ''
|
|
|
+ }
|
|
|
+ getAction('/serp/seoKpiStatistics/comprehensiveInfo', d).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.comprehenInfo = res.result
|
|
|
+ console.log(res.result)
|
|
|
+ }
|
|
|
+ }).finally(()=>{
|
|
|
+ this.getRankInfo()
|
|
|
+ this.setTableQuery()
|
|
|
+ this.longSetTableQuery()
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取三个list的数据
|
|
|
+ getRankInfo() {
|
|
|
+ let that = this
|
|
|
+ let d = {
|
|
|
+ siteCode: that.siteCode,
|
|
|
+ historyId: that.selectSiteInfo.historyId ? that.selectSiteInfo.historyId : ''
|
|
|
+ }
|
|
|
+ getAction('/serp/seoKpiStatistics/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 = {
|
|
|
+ userFlag: that.queryParam.userFlag,
|
|
|
+ historyId: that.selectSiteInfo.historyId ? that.selectSiteInfo.historyId : '',
|
|
|
+ keywordType: keywordType
|
|
|
+ }
|
|
|
+ if (param.siteId === 0) {
|
|
|
+ this.$message.warning("请先选择站点！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(keywordType == 1){
|
|
|
+ this.excelLoading = true;
|
|
|
+ }else{
|
|
|
+ this.longExcelLoading = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ downFile("/serp/seoKeywords/exportExcel",param).then((data)=>{
|
|
|
+ if(keywordType == 1){
|
|
|
+ this.excelLoading = false;
|
|
|
+ }else{
|
|
|
+ this.longExcelLoading = false;
|
|
|
+ }
|
|
|
+ if (!data) {
|
|
|
+ this.$message.warning("文件下载失败")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (data.size == 0) {
|
|
|
+ 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对象
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getServiceDays(planStartTime) {
|
|
|
+ return moment().diff(moment(planStartTime), 'days') + 1;
|
|
|
+ },
|
|
|
+
|
|
|
+ //按排名排序
|
|
|
+ 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.historyId = that.selectSiteInfo.historyId;
|
|
|
+ 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.userFlag = 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 {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .ant-select {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t1 {
|
|
|
+ color: @primary-color;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.r2 {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px;
|
|
|
+ margin: 20px;
|
|
|
+
|
|
|
+ .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: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ .wrap {
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .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: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .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>
|
zq940222
