628 lines
15 KiB
Vue
628 lines
15 KiB
Vue
<template>
|
||
<!-- 顶部 banner 区域 -->
|
||
<view class="all">
|
||
<!-- banner start -->
|
||
<!-- <view class="banner">
|
||
<img :src="bannerImg" class="banner_bk" />
|
||
<view class="r_banner_title">
|
||
<img :src="bannerTitle2" class="banner_title" />
|
||
<text>数据更新时间:{{ dayjs(new Date().getTime()).format("YYYY-MM-DD") }}</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- banner end -->
|
||
|
||
<view>
|
||
<!-- <view class="tag">
|
||
<view class="r_tag_img">
|
||
<img :src="tagicon_1_bg" class="tag_bk" />
|
||
<view class="tag_content">
|
||
<view class="tag_item_left">
|
||
<text class="tag_title">行业分类贴标</text>
|
||
|
||
<view style="display: flex; margin-top: 15rpx">
|
||
<countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></countTo>
|
||
|
||
<text class="tag_status">已处理</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tag_item_right">
|
||
<img :src="tagicon_1" class="tag_icon" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="r_tag_img">
|
||
<img :src="tagicon_2_bg" class="tag_bk" />
|
||
<view class="tag_content">
|
||
<view class="tag_item_left">
|
||
<text class="tag_title">概念标签贴标</text>
|
||
<view style="display: flex; margin-top: 15rpx">
|
||
<countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></countTo>
|
||
|
||
<text class="tag_status">已处理</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tag_item_right">
|
||
<img :src="tagicon_2" class="tag_icon" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view style="background-color: white; margin-top: -100rpx; position: relative; z-index: 9999; margin-bottom: 12pt">
|
||
<indexMenuTitle title="近7天热度统计"></indexMenuTitle>
|
||
<view style="background-color: white; padding: 12pt">
|
||
<view class="tabs">
|
||
<view :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</view>
|
||
<view :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</view>
|
||
<view :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</view>
|
||
</view>
|
||
</view>
|
||
<LineHol v-if="lineTabIndex === 0" barColor="#FF8A00" :data="lineTopData"></LineHol>
|
||
<LineHol v-else-if="lineTabIndex === 1" barColor="#FF8A00" :data="lineTopData"></LineHol>
|
||
<LineHolYellow v-else-if="lineTabIndex === 2" barColor="#FF8A00" :data="lineTopData"></LineHolYellow>
|
||
</view>
|
||
|
||
<!-- <view style="background-color: white; margin-top: 40rpx">
|
||
<indexMenuTitle title="资讯评分分布区间"></indexMenuTitle>
|
||
<Line style="margin-top: 30rpx" :data="lineData"></Line>
|
||
|
||
<view style="display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; padding-bottom: 30rpx">
|
||
<InfoSummary style="width: 85%" :count="newsNum"></InfoSummary>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view style="background-color: white">
|
||
<view style="width: 100vw; display: flex; justify-content: space-between; align-items: center">
|
||
<!-- <indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle> -->
|
||
<view class="r_title">编辑精选</view>
|
||
<view class="r_sreach">
|
||
<!-- <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image> -->
|
||
<!-- <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image> -->
|
||
<view class="sreach" @click="goSreach">
|
||
<view class="sreach_icon">
|
||
<!-- <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image> -->
|
||
<u-icon size="22" name="search" color="#999"></u-icon>
|
||
</view>
|
||
<view class="sreach_text">
|
||
<text>搜索资讯</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<RankList hasTag :newsList="newsList" :needExp="false"></RankList>
|
||
</view>
|
||
|
||
<!-- <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view> -->
|
||
|
||
<LoginPopup
|
||
:show="LoginShow"
|
||
@handlePopupClose="handlePopupClose"
|
||
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||
@handlePopupErrorCallback="handlePopupErrorCallback"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onReachBottom } from "@dcloudio/uni-app";
|
||
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||
import Line from "@/components/charts/Line.vue";
|
||
import bannerImg from "@/assets/zixun/banner_pic.png";
|
||
import bannerTitle from "@/assets/zixun/banner_title.png";
|
||
import bannerTitle2 from "@/assets/zixun/banner_title2.png";
|
||
import tagicon_1_bg from "@/assets/zixun/tagicon_1_bg.png";
|
||
import tagicon_2_bg from "@/assets/zixun/tagicon_2_bg.png";
|
||
import tagicon_1 from "@/assets/zixun/tagicon_1.png";
|
||
import tagicon_2 from "@/assets/zixun/tagicon_2.png";
|
||
import LoginPopup from "@/components/loginPopup/index.vue";
|
||
import { Session } from "@/utils/storage";
|
||
import LineHol from "@/components/charts/LineHol.vue";
|
||
import LineHolYellow from "@/components/charts/LineHolYellow.vue";
|
||
|
||
import {
|
||
getindustryCount,
|
||
getConceptCount,
|
||
getTopNewsAll,
|
||
getTopIndustry_d,
|
||
getTopConcept_d,
|
||
getNews_cnt_d,
|
||
newsInfoScore,
|
||
getTopConceptPeriod,
|
||
getTopIndustryPeriod,
|
||
getTopSourcePeriod,
|
||
} from "@/api/newsInfo";
|
||
import countTo from "@/components/count-to/vue-countTo.vue";
|
||
import RankList from "@/components/RankList.vue"; // 路径根据实际调整
|
||
import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整
|
||
import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实际调整
|
||
import dayjs from "dayjs/esm/index";
|
||
import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整
|
||
|
||
const newsList = ref([]);
|
||
|
||
const lastLeftNum = ref(0);
|
||
const lastRightNum = ref(0);
|
||
|
||
const industryList = ref([]);
|
||
const topConceptList = ref([]);
|
||
const newsNum = ref(0);
|
||
const lineData = ref();
|
||
const handleViewAll = () => {
|
||
// 在这里处理点击“查看全部”的逻辑，比如跳转新页面等
|
||
console.log("点击了查看全部");
|
||
};
|
||
|
||
const topNum = ref({});
|
||
|
||
// 获取顶部两个统计数据
|
||
async function getTopNum() {
|
||
let res1 = await getindustryCount({});
|
||
topNum.value.leftNum = res1.aggregations.industry_non_empty.doc_count;
|
||
let res2 = await getConceptCount({});
|
||
topNum.value.rightNum = res2.aggregations.concept_non_empty.doc_count;
|
||
|
||
lastLeftNum.value = topNum.value.leftNum;
|
||
lastRightNum.value = topNum.value.rightNum;
|
||
}
|
||
|
||
const newListAll = ref([]);
|
||
const pageData = reactive({
|
||
page: 1,
|
||
size: 20,
|
||
total: 0,
|
||
});
|
||
// 概念标签贴标
|
||
async function getNewsList() {
|
||
const result = await getTopNewsAll({});
|
||
// 存储所有数据
|
||
newListAll.value = [...result];
|
||
|
||
if (result && result.length > 0) {
|
||
// 获取总页数
|
||
pageData.total = Math.ceil(newListAll.value.length / pageData.size);
|
||
newsList.value = newListAll.value.slice(0, pageData.size);
|
||
} else {
|
||
newsList.value = [];
|
||
}
|
||
}
|
||
|
||
// 热门行业top10
|
||
async function getTopIndustry_dFn() {
|
||
industryList.value = await getTopIndustry_d({});
|
||
}
|
||
|
||
// 风口概念池top10
|
||
async function getTopConcept_dFn() {
|
||
topConceptList.value = await getTopConcept_d({});
|
||
}
|
||
|
||
// 今日精选
|
||
async function getNews_cnt_dFn() {
|
||
let temp = await getNews_cnt_d({});
|
||
|
||
newsNum.value = temp[0].value;
|
||
}
|
||
|
||
// 获取柱状图数据
|
||
async function getLineData() {
|
||
let res = await newsInfoScore({});
|
||
lineData.value = res;
|
||
}
|
||
|
||
function initData() {
|
||
// 获取柱状图数据
|
||
getLineData();
|
||
// 获取顶部两个统计数据
|
||
getTopNum();
|
||
// 概念标签贴标
|
||
getNewsList();
|
||
// 热门行业top10
|
||
getTopIndustry_dFn();
|
||
// 风口概念池top10
|
||
getTopConcept_dFn();
|
||
// 今日精选
|
||
getNews_cnt_dFn();
|
||
}
|
||
|
||
const type = ref();
|
||
function onViewAll(type) {
|
||
type.value = type;
|
||
if (Session.get("token")) {
|
||
uni.navigateTo({
|
||
url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
||
});
|
||
} else {
|
||
// LoginShow.value = true;
|
||
}
|
||
}
|
||
|
||
// const timer = setInterval(() => {
|
||
// initData();
|
||
// }, 5000);
|
||
|
||
const LoginShow = ref(false);
|
||
const isLoginStatus = ref();
|
||
// 关闭弹框
|
||
const handlePopupClose = () => {
|
||
LoginShow.value = false;
|
||
};
|
||
|
||
// 登录成功之后的回调
|
||
const handlePopupSuccessCallback = () => {
|
||
isLoginStatus.value = true;
|
||
|
||
// uni.navigateTo({
|
||
// url: "/pages/realtimeInfo/rankDetail?type=" + type.value,
|
||
// });
|
||
};
|
||
|
||
// 登录失败之后的回调
|
||
const handlePopupErrorCallback = () => {
|
||
console.log("登录失败");
|
||
};
|
||
import { doLogout } from "@/api";
|
||
function loginOut() {
|
||
doLogout({
|
||
financialAccount: Session.get("userPhone"),
|
||
});
|
||
Session.clear();
|
||
window.location.reload();
|
||
}
|
||
|
||
const lineTabIndex = ref(0);
|
||
function handleTabClick(index) {
|
||
lineTabIndex.value = index;
|
||
getLineDataFn();
|
||
}
|
||
|
||
const lineTopData = ref({});
|
||
async function getLineDataFn() {
|
||
if (lineTabIndex.value == 0) {
|
||
// 行业
|
||
getTopIndustryPeriod({
|
||
start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
|
||
end_time: dayjs().format("YYYY-MM-DD"),
|
||
limit_num: 10,
|
||
}).then((res) => {
|
||
lineTopData.value = res;
|
||
});
|
||
} else if (lineTabIndex.value == 1) {
|
||
// 概念
|
||
getTopConceptPeriod({
|
||
start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
|
||
end_time: dayjs().format("YYYY-MM-DD"),
|
||
limit_num: 10,
|
||
}).then((res) => {
|
||
lineTopData.value = res;
|
||
});
|
||
} else if (lineTabIndex.value == 2) {
|
||
// 媒体
|
||
getTopSourcePeriod({
|
||
start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
|
||
end_time: dayjs().format("YYYY-MM-DD"),
|
||
limit_num: 10,
|
||
}).then((res) => {
|
||
lineTopData.value = res;
|
||
});
|
||
}
|
||
}
|
||
|
||
function goSreach() {
|
||
if (Session.get("token")) {
|
||
uni.navigateTo({
|
||
url: "/pages/sreachReq/index",
|
||
});
|
||
} else {
|
||
LoginShow.value = true;
|
||
}
|
||
}
|
||
|
||
// 触底更新
|
||
onReachBottom(() => {
|
||
console.log("我到底了");
|
||
if (pageData.page < pageData.total) {
|
||
pageData.page += 1;
|
||
const start = (pageData.page - 1) * pageData.size;
|
||
const end = pageData.page * pageData.size;
|
||
newsList.value = newListAll.value.slice(0, end);
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(timer);
|
||
});
|
||
import { useRoute, useRouter } from "vue-router";
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const { aplus_queue } = window;
|
||
onMounted(async () => {
|
||
initData();
|
||
// if (!Session.get("token")) {
|
||
// LoginShow.value = true;
|
||
// }
|
||
getLineDataFn();
|
||
|
||
// 解构路由参数，排除token
|
||
const { token, phone, ...otherQuery } = route.query;
|
||
// 若存在token，替换路由清除参数
|
||
if (token) {
|
||
router.replace({
|
||
path: route.path, // 保持当前路径不变
|
||
query: otherQuery, // 保留其他参数
|
||
});
|
||
}
|
||
Session.set("token", token);
|
||
Session.set("userPhone", phone);
|
||
|
||
aplus_queue.push({
|
||
action: "aplus.sendPV",
|
||
arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.all {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f3f5f8;
|
||
}
|
||
|
||
.banner {
|
||
position: relative;
|
||
}
|
||
|
||
.banner_bk {
|
||
width: 100vw;
|
||
}
|
||
|
||
.r_banner_title {
|
||
position: absolute;
|
||
top: 160rpx;
|
||
left: 50rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.banner_title {
|
||
width: 364rpx;
|
||
height: 134rpx;
|
||
}
|
||
|
||
text {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
display: flex;
|
||
margin-top: -150rpx;
|
||
position: relative;
|
||
z-index: 999;
|
||
padding: 0 25rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.r_tag_img {
|
||
width: calc(50vw - 20rpx);
|
||
height: 175rpx;
|
||
position: relative;
|
||
box-shadow: 0 10rpx 10rpx rgba(80, 80, 80, 0.1);
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.tag_bk {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.tag_content {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 40rpx;
|
||
left: 30rpx;
|
||
width: 83%;
|
||
justify-content: space-between;
|
||
|
||
.tag_item_left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tag_title {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #222222;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
.tag_num {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 38rpx;
|
||
color: #222222;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.tag_status {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 33rpx;
|
||
margin-top: 15rpx;
|
||
margin-left: 7rpx;
|
||
}
|
||
|
||
.tag_item_right {
|
||
width: 70rpx;
|
||
height: 84rpx;
|
||
}
|
||
}
|
||
|
||
.tag_icon {
|
||
width: 70rpx;
|
||
height: 84rpx;
|
||
}
|
||
|
||
.view-all {
|
||
font-size: 14px;
|
||
color: #999;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.logout {
|
||
// width: 100%;
|
||
height: 80rpx;
|
||
background-color: red;
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;
|
||
margin-top: 50rpx;
|
||
border-radius: 20rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 16rpx;
|
||
height: 30px;
|
||
border-radius: 10px;
|
||
|
||
.tab {
|
||
// width: 100px;
|
||
// height: 100%;
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 10rpx 24rpx;
|
||
// border: 1px solid #e7e7e7;
|
||
color: #333;
|
||
font-size: 12px;
|
||
background: #f6f6f6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
// .tab_left {
|
||
// border-start-start-radius: 10px;
|
||
// border-end-start-radius: 10px;
|
||
// border-right: 0;
|
||
// }
|
||
|
||
// .tab_right {
|
||
// border-start-end-radius: 10px;
|
||
// border-end-end-radius: 10px;
|
||
// border-left: 0;
|
||
// }
|
||
|
||
.active {
|
||
font-weight: bold;
|
||
background-color: rgba(255, 153, 0, 0.1);
|
||
color: #ff9900;
|
||
}
|
||
}
|
||
|
||
.r_title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 12pt;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
|
||
&::before {
|
||
content: "";
|
||
width: 4px;
|
||
height: 32rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 16rpx;
|
||
background: #ff9900;
|
||
}
|
||
}
|
||
|
||
.r_sreach {
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
// position: absolute;
|
||
// top: 10px;
|
||
// left: 0;
|
||
// z-index: 9999;
|
||
// background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png");
|
||
}
|
||
|
||
.logo_text {
|
||
width: 88rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.sreach {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 100rpx;
|
||
// width: 90vw;
|
||
height: 63rpx;
|
||
margin-left: 20rpx;
|
||
//border: 1px solid #e7e7e7;
|
||
margin-top: 5rpx;
|
||
// box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
|
||
color: #333;
|
||
background-color: #f7f8f9;
|
||
}
|
||
|
||
.sreach_icon {
|
||
margin-right: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
|
||
.sreach_text {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.top_bk {
|
||
width: 100vw;
|
||
height: 60px;
|
||
}
|
||
</style>
|