cankao-h5/src/pages/realtimeInfo/index.vue

<template>
  <!-- 顶部 banner 区域 -->
  <view class="all">
    <!-- banner start -->
    <view class="banner">
      <img :src="bannerImg" class="banner_bk" />
      <view class="r_banner_title">
        <img :src="bannerTitle" class="banner_title" />
        <text>数据更新时间:{{ dayjs(new Date().getTime()).format("YYYY-MM-DD") }}</text>
      </view>
    </view>
    <!-- banner end -->

    <view class="">
      <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">
                <!-- <text class="tag_num">{{ topNum.leftNum }}</text> -->
                <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">
                <!-- <text class="tag_num">{{ topNum.rightNum }}</text> -->
                <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: 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; margin-top: 40rpx">
      <indexMenuTitle title="周热度统计"></indexMenuTitle>
      <LineHol v-if="lineTabIndex === 0"></LineHol>
      <LineHol v-else-if="lineTabIndex === 1"></LineHol>
      <LineHolYellow v-else-if="lineTabIndex === 2"></LineHolYellow>

      <div style="display: flex; justify-content: center; margin-bottom: 20px; margin-top: 20px">
        <div class="tabs">
          <div :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</div>
          <div :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</div>
          <div :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</div>
        </div>
      </div>
    </view>

    <view style="background-color: white; margin-top: 40rpx">
      <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>
          </view>
          <view class="sreach_text">
            <text>搜索资讯</text>
          </view>
        </view>
      </view>
      <indexMenuTitle title="编辑精选 Top20"></indexMenuTitle>
      <RankList :newsList="newsList"></RankList>
    </view>

    <view style="background-color: white; margin-top: 40rpx">
      <view style="display: flex; justify-content: space-between; align-items: center; padding-right: 30rpx; height: 100rpx">
        <indexMenuTitle title="热门行业池 Top10"></indexMenuTitle>
        <view style="display: flex; gap: 3rpx">
          <text class="view-all" @click="onViewAll(0)">查看全部</text>

          <u-icon size="12" name="arrow-right"></u-icon>
        </view>
      </view>
      <HotIndustryList :industryList="industryList" :type="0" @viewAll="handleViewAll" />
    </view>

    <view style="background-color: white; margin-top: 40rpx">
      <view style="display: flex; justify-content: space-between; align-items: center; padding-right: 30rpx; height: 100rpx">
        <indexMenuTitle title="风口概念池 Top10"></indexMenuTitle>
        <view style="display: flex; gap: 3rpx">
          <text class="view-all" @click="onViewAll(1)">查看全部</text>

          <u-icon size="12" name="arrow-right"></u-icon>
        </view>
      </view>
      <HotIndustryList :type="1" :industryList="topConceptList" @viewAll="handleViewAll" />
    </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 { 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 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 { getindustryCount, getConceptCount, getTopNews, getTopIndustry_d, getTopConcept_d, getNews_cnt_d, newsInfoScore } 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"; // 路径根据实际调整
import LineHol from "@/components/charts/LineHol.vue";
import LineHolYellow from "@/components/charts/LineHolYellow.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;
}

// 概念标签贴标
async function getNewsList() {
  newsList.value = await getTopNews({});
}

// 热门行业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(null);
function onViewAll(type1) {
  type.value = type1;
  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("登录失败");
};

function loginOut() {
  Session.clear();
  window.location.reload();
}

const lineTabIndex = ref(0);
function handleTabClick(index) {
  lineTabIndex.value = index;
}

onUnmounted(() => {
  clearInterval(timer);
});

onMounted(async () => {
  initData();
  if (!Session.get("token")) {
    LoginShow.value = true;
  }
});
</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;
  height: 30px;
  border-radius: 10px;

  .tab {
    width: 100px;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 1px solid #e7e7e7;
    color: #000;
    font-size: 12px;
  }

  .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 {
    border: 1px solid #007bff;
    background-color: #007bff;
    color: #fff;
  }
}

.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: 80vw;
  height: 68rpx;
  margin-left: 20rpx;
}

.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>