<template>
<div class="app-container">
<category-tree
@category-change="handleFilterChange"
></category-tree>
<!-- 搜索条件-->
<el-card class="long-box-card">
<div class="text item">
<el-form :inline="true" :model="queryCondition" class="demo-form-inline" size="mini">
<el-form-item label="关键词搜索：" style="margin: 10px 30px 10px 30px">
<el-input placeholder="请输入关键词" type="text" v-model="queryCondition.name">
</el-input>
</el-form-item>
<el-collapse accordion style="margin: 10px 30px 10px 30px">
<el-collapse-item>
<template slot="title">
<span style="font-weight: bold;color: black;">筛选模式：</span>
<el-row>
<el-button size="medium">未设置条件</el-button>
<el-button size="medium">高单价热词</el-button>
<el-button size="medium">搜索飙升榜</el-button>
</el-row>
</template>
<div>
<el-form :inline="true" :model="queryCondition" class="demo-form-inline" style="margin: 20px 10px 15px 10px">
<el-row>
<el-col :span=6>
<el-form-item label="搜索指数：" >
<InputNumberRange v-model="queryCondition.searchExpRange" style="padding-right: 15px"></InputNumberRange>
</el-form-item>
</el-col>
<el-col :span=6>
<el-form-item label="添加购物车人数：" >
<InputNumberRange v-model="queryCondition.addCartQuantityRange" style="padding-right: 15px"></InputNumberRange>
</el-form-item>
</el-col>
<el-col :span=6>
<el-form-item label="商品数：" >
<InputNumberRange v-model="queryCondition.productNumberRange" style="padding-right: 15px"></InputNumberRange>
</el-form-item>
</el-col>
<el-col :span=6>
<el-form-item label="平均浏览商品数：" >
<InputNumberRange v-model="queryCondition.productViewsRange" style="padding-right: 15px"></InputNumberRange>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span=6>
<el-form-item label="购物车均价：">
<InputNumberRange v-model="queryCondition.cartAveragePriceRange" style="padding-right: 15px"></InputNumberRange>
</el-form-item>
</el-col>
<el-col :span=6>
<el-form-item label="竞争对手数：">
<InputNumberRange v-model="queryCondition.competitorsRange" style="padding-right: 15px"></InputNumberRange>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-collapse-item>
</el-collapse>
<el-form-item style="margin: 10px 30px 10px 30px">
<el-button size="medium" type="primary" @click="queryList()">查询</el-button>
<el-button size="medium" type="info">重置</el-button>
<el-button size="medium" type="danger" icon="el-icon-s-management">功能讲解</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 热销列表 -->
<el-card class="long-box-card">
<div slot="header" class="clearfix">
<div style="float: left;">
<el-button type="primary" plain size="small" @click="queryList(1)">周榜</el-button>
<el-button type="primary" plain size="small" @click="queryList(2)">月榜</el-button>
<el-button type="primary" plain size="small">批量添加监控</el-button>
</div>
<div style="float: right;">
<span style="font-size: 13px; margin-left: 5px; line-height: 30px;">更新时间：{{ updateTime }}</span>
</div>
</div>
<div class="text item">
<el-table
:data="tableData"
stripe
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column style="white-space: pre-line" prop="keywordNameEn" label="关键词" width="200">
<template slot-scope="scope">
<span v-html="scope.row.keywordNameEn"></span>
</template>
</el-table-column>
<el-table-column style="white-space: pre-line" prop="categoryNameEn" label="所属类目" width="200">
<template slot-scope="scope">
<span v-html="scope.row.categoryNameEn"></span>
</template>
</el-table-column>
<el-table-column style="white-space: pre-line" prop="searchExp" label="搜索指数" sortable='custom' width="120" />
<el-table-column style="white-space: pre-line" prop="convertExp" label="转化指数" sortable='custom' width="120" />
<el-table-column style="white-space: pre-line" prop="addCartEn" label="添加购物车人数转化率" sortable='custom' width="200" >
<template slot-scope="scope">
<span v-html="scope.row.addCartEn"></span>
</template>
</el-table-column>
<el-table-column style="white-space: pre-line" prop="productNumber" label="商品数" sortable='custom' width="120" />
<el-table-column style="white-space: pre-line" prop="productViews" label="平均浏览商品数" sortable='custom' width="150" />
<el-table-column style="white-space: pre-line" prop="cartAveragePriceEn" label="购物车均价" sortable='custom' width="150" >
<template slot-scope="scope">
<span v-html="scope.row.cartAveragePriceEn"></span>
</template>
</el-table-column>
<el-table-column style="white-space: pre-line" prop="competitors" label="竞争对手" sortable='custom' width="120" />
<el-table-column style="white-space: pre-line" prop="cartAveragePriceEn" label="搜索趋势" width="300" >
<template slot-scope="scope">
<div style="height: 80px;width:280px" :id="'echarts'+scope.row.id" ></div>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="120">
<template #default="scope">
</template>
<template #default="scope">
<el-button size="mini" type="primary" @click="toKeyWordDetails(scope.row)">
关键词分析
</el-button>
<el-button size="mini" type="primary" style="margin: 5px auto">
添加监控
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 实现分页 -->
<div style="padding: 10px 0">
<el-pagination
:current-page="queryCondition.page"
:page-size="queryCondition.limit"
:page-sizes="[5, 10, 15, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</el-card>
</div>
</template>
<script>
import CategoryTree from "@/components/Category/CategoryTree.vue";
import InputNumberRange from "input-number-range";
import {getMonthBluePage} from "@/api/keyWord";
import {getWeekBluePage} from "@/api/keyWordWeek";
export default {
components: {
InputNumberRange,
CategoryTree,
},
data() {
return {
queryCondition: { // 查询条件
categoryId: null, // 类目ID
categoryLevel: null, // 类目等级
name: "", // 关键词名称
russianName: "", // 关键词俄语名称
searchExpRange: [], // 搜索指数范围
convertExpRange: [], // 转化指数范围
exposureExpRange: [], // 曝光指数范围
searchGrowthRateRange: [], // 搜索增长率范围
addCartQuantityRange: [], // 添加购物车人数范围
productNumberRange: [], // 商品数范围
productViewsRange: [], // 平均浏览商品数范围
cartAveragePriceRange: [], // 购物车均价范围
competitorsRange: [], // 竞争对手数范围
page: 1,
limit: 10,
},
tableData: [], // 列表数据
total: 0,
updateTime: "",
multipleSelection: [], // 多选选中
queryListType : 2, // 查询榜单种类：1：周报；2：月榜
};
},
mounted() {
this.queryList();
},
methods: {
handleFilterChange(queryCondition) { // 获取分类筛选条件
this.queryCondition.categoryId = queryCondition.categoryId;
this.queryCondition.categoryLevel = queryCondition.categoryLevel;
console.log("分类的查询类目ID:", this.queryCondition.categoryId)
console.log("分类的查询类目等级:", this.queryCondition.categoryLevel)
// 类目变化时重新查询数据
this.queryList();
},
getMonthBlueData() {
getMonthBluePage(this.queryCondition).then(response => {
console.log(response.data);
this.tableData = response.data.list;
this.total = response.data.total;
this.updateTime = response.data.updateTime;
this.getEcharts();
});
},
getWeekBlueData() {
getWeekBluePage(this.queryCondition).then(response => {
console.log(response.data);
this.tableData = response.data.list;
this.total = response.data.total;
this.updateTime = response.data.updateTime;
this.getEcharts();
});
},
queryList(data) {
if (data) {
// 通过点击按钮传递的数据
this.queryListType = data;
}
console.log("queryListType:" + this.queryListType);
if (this.queryListType === 2) {
// 查询月榜
this.getMonthBlueData();
}else if (this.queryListType === 1) {
// 查询周榜
this.getWeekBlueData();
}
},
getEcharts() {
setTimeout(_ => {
this.tableData.forEach(e => {
let data = e.searchVolumeList;
console.log(data);
if (data.length === 0) {
console.log("无数据跳过");
return;
}
let myChart = this.$echarts.init(document.getElementById('echarts' + e.id));
let option = {
tooltip: {
trigger: 'item',
position: 'top',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
type: 'time',
show: false,
},
yAxis: {
type: 'value',
show: false,
},
series: [{
data: data.map(e => [e.updateTime, e.searchVolume]),
//单独修改当前线条的颜色
lineStyle: {
normal: {
color: "#0015ff",
width: 1,
},
},
areaStyle: {},
type: 'line',
smooth: true,
symbol: 'none',
}]
};
myChart.setOption(option);
}, 2000)
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(size){
this.queryCondition.limit = size;
this.queryList();
},
handleCurrentChange(page){
this.queryCondition.page = page;
this.queryList();
},
},
};
</script>
<style scoped>
</style>