|
|
@ -1,61 +1,96 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
|
|
|
|
|
|
|
|
<div style="padding: 10px" v-loading="loading">
|
|
|
|
<div style="padding: 10px" v-loading="loading">
|
|
|
|
<el-collapse @change="handleChange">
|
|
|
|
|
|
|
|
<el-collapse-item class="el-collapse-item" title="抖音热搜榜" name="1">
|
|
|
|
<div style="width: 100%;">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-form :inline="true">
|
|
|
|
<div v-for="douyin in topsearchList.douyinList" :key="douyin.id" class="douyin">
|
|
|
|
<el-form-item>
|
|
|
|
<span>{{ douyin.word }}</span>
|
|
|
|
<el-date-picker
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
v-model="dateValue"
|
|
|
|
<span style="color: red;margin-left: 25px">{{ douyin.label }}</span>
|
|
|
|
align="left"
|
|
|
|
</div>
|
|
|
|
type="date"
|
|
|
|
</el-card>
|
|
|
|
placeholder="选择日期"
|
|
|
|
</el-collapse-item>
|
|
|
|
format="yyyy 年 MM 月 dd 日"
|
|
|
|
<el-collapse-item class="el-collapse-item" title="微博热搜榜" name="2">
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
<el-card shadow="hover">
|
|
|
|
:picker-options="pickerOptions">
|
|
|
|
<div v-for="weibo in topsearchList.weiboList" :key="weibo.id" class="douyin">
|
|
|
|
</el-date-picker>
|
|
|
|
<span>{{ weibo.hotword }}</span>
|
|
|
|
</el-form-item>
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
<el-form-item>
|
|
|
|
<span style="color: red;margin-left: 25px">{{ weibo.hottag }}</span>
|
|
|
|
<el-button type="primary" @click="getHistoryTopSearch">查询</el-button>
|
|
|
|
</div>
|
|
|
|
</el-form-item>
|
|
|
|
</el-card>
|
|
|
|
</el-form>
|
|
|
|
</el-collapse-item>
|
|
|
|
</div>
|
|
|
|
<el-collapse-item class="el-collapse-item" title="全网热搜榜" name="3">
|
|
|
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div>
|
|
|
|
<div v-for="allnetwork in topsearchList.allnetworkList" :key="allnetwork.id" class="allnetwork">
|
|
|
|
<el-collapse @change="handleChange">
|
|
|
|
<div>
|
|
|
|
<el-collapse-item class="el-collapse-item" title="抖音热搜榜" name="1">
|
|
|
|
<h3 style="font-weight: 800">{{ allnetwork.title }}</h3>
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
|
|
|
<div v-for="douyin in topsearchList.douyinList" :key="douyin.id" class="douyin">
|
|
|
|
|
|
|
|
<span>{{ douyin.word }}</span>
|
|
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
|
|
<span style="color: red;margin-left: 25px">{{ douyin.label }}</span>
|
|
|
|
|
|
|
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ douyin.createTime }}</span>
|
|
|
|
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
|
|
<el-collapse-item class="el-collapse-item" title="微博热搜榜" name="2">
|
|
|
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
|
|
|
<div v-for="weibo in topsearchList.weiboList" :key="weibo.id" class="douyin">
|
|
|
|
|
|
|
|
<span>{{ weibo.hotword }}</span>
|
|
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
|
|
<span style="color: red;margin-left: 25px">{{ weibo.hottag }}</span>
|
|
|
|
|
|
|
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ weibo.createTime }}</span>
|
|
|
|
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</el-card>
|
|
|
|
<span>{{ allnetwork.digest }}</span>
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
|
|
<el-collapse-item class="el-collapse-item" title="全网热搜榜" name="3">
|
|
|
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
|
|
|
<div v-for="allnetwork in topsearchList.allnetworkList" :key="allnetwork.id" class="allnetwork">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<h3 style="font-weight: 800">{{ allnetwork.title }}</h3>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<span>{{ allnetwork.digest }}</span>
|
|
|
|
|
|
|
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
|
|
|
|
|
|
|
|
allnetwork.createTime
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
</el-card>
|
|
|
|
</div>
|
|
|
|
</el-collapse-item>
|
|
|
|
</el-card>
|
|
|
|
<el-collapse-item class="el-collapse-item" title="百度热搜榜" name="4">
|
|
|
|
</el-collapse-item>
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-collapse-item class="el-collapse-item" title="百度热搜榜" name="4">
|
|
|
|
<div v-for="baidu in topsearchList.baiduList" :key="baidu.id" class="baidu">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div>
|
|
|
|
<div v-for="baidu in topsearchList.baiduList" :key="baidu.id" class="baidu">
|
|
|
|
<h3 style="font-weight: 800">{{ baidu.title }}</h3>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<h3 style="font-weight: 800">{{ baidu.title }}</h3>
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<span>{{ baidu.digest }}</span>
|
|
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
|
|
<span style="color: red;margin-left: 25px">{{ baidu.trend }}</span>
|
|
|
|
|
|
|
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
|
|
|
|
|
|
|
|
baidu.createTime
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</el-card>
|
|
|
|
<span>{{ baidu.digest }}</span>
|
|
|
|
</el-collapse-item>
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
<el-collapse-item class="el-collapse-item" title="微信热搜榜" name="5">
|
|
|
|
<span style="color: red;margin-left: 25px">{{ baidu.trend }}</span>
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
|
|
|
<div v-for="wechat in topsearchList.wechatList" :key="wechat.id" class="douyin">
|
|
|
|
|
|
|
|
<span>{{ wechat.word }}</span>
|
|
|
|
|
|
|
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ wechat.createTime }}</span>\
|
|
|
|
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
|
</el-card>
|
|
|
|
</div>
|
|
|
|
</el-collapse-item>
|
|
|
|
</el-card>
|
|
|
|
</el-collapse>
|
|
|
|
</el-collapse-item>
|
|
|
|
</div>
|
|
|
|
<el-collapse-item class="el-collapse-item" title="微信热搜榜" name="5">
|
|
|
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
|
|
|
<div v-for="wechat in topsearchList.wechatList" :key="wechat.id" class="douyin">
|
|
|
|
|
|
|
|
<span>{{ wechat.word }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
|
|
</el-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 回到顶部-->
|
|
|
|
<!-- 回到顶部-->
|
|
|
@ -68,7 +103,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
import {getTopsearch} from "@/api/business/openapi/topsearch";
|
|
|
|
import {getTopsearch, getHistoryTopSearch} from "@/api/business/openapi/topsearch";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "Topsearch",
|
|
|
|
name: "Topsearch",
|
|
|
@ -81,7 +116,37 @@ export default {
|
|
|
|
topsearchList: {},
|
|
|
|
topsearchList: {},
|
|
|
|
|
|
|
|
|
|
|
|
//默认打开哪个
|
|
|
|
//默认打开哪个
|
|
|
|
activeNames: ['1']
|
|
|
|
activeNames: ['1'],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//日期组件
|
|
|
|
|
|
|
|
pickerOptions: {
|
|
|
|
|
|
|
|
disabledDate(time) {
|
|
|
|
|
|
|
|
return time.getTime() > Date.now();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
shortcuts: [{
|
|
|
|
|
|
|
|
text: '今天',
|
|
|
|
|
|
|
|
onClick(picker) {
|
|
|
|
|
|
|
|
picker.$emit('pick', new Date());
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
|
|
text: '昨天',
|
|
|
|
|
|
|
|
onClick(picker) {
|
|
|
|
|
|
|
|
const date = new Date();
|
|
|
|
|
|
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
|
|
|
|
|
picker.$emit('pick', date);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
|
|
text: '一周前',
|
|
|
|
|
|
|
|
onClick(picker) {
|
|
|
|
|
|
|
|
const date = new Date();
|
|
|
|
|
|
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
|
|
|
|
picker.$emit('pick', date);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dateValue: '',
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
@ -90,6 +155,17 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
//获取历史热搜榜
|
|
|
|
|
|
|
|
getHistoryTopSearch() {
|
|
|
|
|
|
|
|
this.topsearchList={}
|
|
|
|
|
|
|
|
this.loading = true
|
|
|
|
|
|
|
|
console.log(this.dateValue)
|
|
|
|
|
|
|
|
getHistoryTopSearch(this.dateValue).then(res =>{
|
|
|
|
|
|
|
|
this.loading = false
|
|
|
|
|
|
|
|
this.topsearchList=res.data
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//获取热搜榜
|
|
|
|
//获取热搜榜
|
|
|
|
getTopsearch() {
|
|
|
|
getTopsearch() {
|
|
|
|
this.loading = true
|
|
|
|
this.loading = true
|
|
|
@ -120,6 +196,6 @@ export default {
|
|
|
|
.allnetwork {
|
|
|
|
.allnetwork {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
font-size: 15px;
|
|
|
|
font-size: 15px;
|
|
|
|
margin-left: 25px;
|
|
|
|
margin-left: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|